site-libsoc/Server/public/js/components/select-component.js

(function(l, r) { if (!l || l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (self.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(self.document);
import { S as SvelteElement, i as init, a as attribute_to_object, b as insert_dev, q as flush, s as safe_not_equal, d as dispatch_dev, c as validate_slots, o as onMount, v as validate_each_argument, e as element, n as noop, h as attr_dev, g as add_location, m as detach_dev, u as binding_callbacks, t as text, f as space, j as src_url_equal, w as set_style, l as append_dev, x as listen_dev, y as set_data_dev, p as destroy_each } from './index-9ff7cb25.js';
import { px2rem, getTextWidth, getCanvasFont } from '../../../../../../../../../js/libraries/miscTools.js';

/* src\components\select-component.svelte generated by Svelte v3.52.0 */
const file = "src\\components\\select-component.svelte";

function get_each_context(ctx, list, i) {
	const child_ctx = ctx.slice();
	child_ctx[26] = list[i];
	child_ctx[27] = list;
	child_ctx[28] = i;
	return child_ctx;
}

// (135:12) {#each options as option, i}
function create_each_block(ctx) {
	let button;
	let span;
	let t0_value = /*option*/ ctx[26] + "";
	let t0;
	let t1;
	let i = /*i*/ ctx[28];
	let mounted;
	let dispose;
	const assign_button = () => /*button_binding_1*/ ctx[14](button, i);
	const unassign_button = () => /*button_binding_1*/ ctx[14](null, i);

	function click_handler() {
		return /*click_handler*/ ctx[15](/*i*/ ctx[28]);
	}

	const block = {
		c: function create() {
			button = element("button");
			span = element("span");
			t0 = text(t0_value);
			t1 = space();
			add_location(span, file, 136, 20, 4826);
			button.value = /*i*/ ctx[28];
			add_location(button, file, 135, 16, 4715);
		},
		m: function mount(target, anchor) {
			insert_dev(target, button, anchor);
			append_dev(button, span);
			append_dev(span, t0);
			append_dev(button, t1);
			assign_button();

			if (!mounted) {
				dispose = listen_dev(button, "click", click_handler, false, false, false);
				mounted = true;
			}
		},
		p: function update(new_ctx, dirty) {
			ctx = new_ctx;
			if (dirty & /*options*/ 4 && t0_value !== (t0_value = /*option*/ ctx[26] + "")) set_data_dev(t0, t0_value);

			if (i !== /*i*/ ctx[28]) {
				unassign_button();
				i = /*i*/ ctx[28];
				assign_button();
			}
		},
		d: function destroy(detaching) {
			if (detaching) detach_dev(button);
			unassign_button();
			mounted = false;
			dispose();
		}
	};

	dispatch_dev("SvelteRegisterBlock", {
		block,
		id: create_each_block.name,
		type: "each",
		source: "(135:12) {#each options as option, i}",
		ctx
	});

	return block;
}

// (127:4) {#key key}
function create_key_block(ctx) {
	let button;
	let div0;
	let span;
	let t0_value = (/*value*/ ctx[0] != null ? /*value*/ ctx[0] : "") + "";
	let t0;
	let t1;
	let img;
	let img_src_value;
	let t2;
	let div1;
	let mounted;
	let dispose;
	let each_value = /*options*/ ctx[2];
	validate_each_argument(each_value);
	let each_blocks = [];

	for (let i = 0; i < each_value.length; i += 1) {
		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
	}

	const block = {
		c: function create() {
			button = element("button");
			div0 = element("div");
			span = element("span");
			t0 = text(t0_value);
			t1 = space();
			img = element("img");
			t2 = space();
			div1 = element("div");

			for (let i = 0; i < each_blocks.length; i += 1) {
				each_blocks[i].c();
			}

			attr_dev(span, "id", "current-options-span");
			add_location(span, file, 129, 16, 4359);
			attr_dev(div0, "id", "current-options-div");
			add_location(div0, file, 128, 12, 4311);
			attr_dev(img, "id", "arrow-down");
			if (!src_url_equal(img.src, img_src_value = "../assets/arrow_down.svg")) attr_dev(img, "src", img_src_value);
			attr_dev(img, "alt", "arrow down");
			add_location(img, file, 131, 12, 4484);
			attr_dev(button, "id", "current-option-button");
			add_location(button, file, 127, 8, 4202);
			attr_dev(div1, "id", "options-holder");
			set_style(div1, "display", "none");
			add_location(div1, file, 133, 8, 4582);
		},
		m: function mount(target, anchor) {
			insert_dev(target, button, anchor);
			append_dev(button, div0);
			append_dev(div0, span);
			append_dev(span, t0);
			/*span_binding*/ ctx[12](span);
			append_dev(button, t1);
			append_dev(button, img);
			/*button_binding*/ ctx[13](button);
			insert_dev(target, t2, anchor);
			insert_dev(target, div1, anchor);

			for (let i = 0; i < each_blocks.length; i += 1) {
				each_blocks[i].m(div1, null);
			}

			/*div1_binding*/ ctx[16](div1);

			if (!mounted) {
				dispose = listen_dev(button, "click", /*changeVisibility*/ ctx[9], false, false, false);
				mounted = true;
			}
		},
		p: function update(ctx, dirty) {
			if (dirty & /*value*/ 1 && t0_value !== (t0_value = (/*value*/ ctx[0] != null ? /*value*/ ctx[0] : "") + "")) set_data_dev(t0, t0_value);

			if (dirty & /*optionButtons, changeOption, callback, options*/ 1062) {
				each_value = /*options*/ ctx[2];
				validate_each_argument(each_value);
				let i;

				for (i = 0; i < each_value.length; i += 1) {
					const child_ctx = get_each_context(ctx, each_value, i);

					if (each_blocks[i]) {
						each_blocks[i].p(child_ctx, dirty);
					} else {
						each_blocks[i] = create_each_block(child_ctx);
						each_blocks[i].c();
						each_blocks[i].m(div1, null);
					}
				}

				for (; i < each_blocks.length; i += 1) {
					each_blocks[i].d(1);
				}

				each_blocks.length = each_value.length;
			}
		},
		d: function destroy(detaching) {
			if (detaching) detach_dev(button);
			/*span_binding*/ ctx[12](null);
			/*button_binding*/ ctx[13](null);
			if (detaching) detach_dev(t2);
			if (detaching) detach_dev(div1);
			destroy_each(each_blocks, detaching);
			/*div1_binding*/ ctx[16](null);
			mounted = false;
			dispose();
		}
	};

	dispatch_dev("SvelteRegisterBlock", {
		block,
		id: create_key_block.name,
		type: "key",
		source: "(127:4) {#key key}",
		ctx
	});

	return block;
}

function create_fragment(ctx) {
	let div;
	let previous_key = /*key*/ ctx[8];
	let key_block = create_key_block(ctx);

	const block = {
		c: function create() {
			div = element("div");
			key_block.c();
			this.c = noop;
			attr_dev(div, "class", "select");
			add_location(div, file, 125, 0, 4137);
		},
		l: function claim(nodes) {
			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
		},
		m: function mount(target, anchor) {
			insert_dev(target, div, anchor);
			key_block.m(div, null);
			/*div_binding*/ ctx[17](div);
		},
		p: function update(ctx, [dirty]) {
			if (dirty & /*key*/ 256 && safe_not_equal(previous_key, previous_key = /*key*/ ctx[8])) {
				key_block.d(1);
				key_block = create_key_block(ctx);
				key_block.c();
				key_block.m(div, null);
			} else {
				key_block.p(ctx, dirty);
			}
		},
		i: noop,
		o: noop,
		d: function destroy(detaching) {
			if (detaching) detach_dev(div);
			key_block.d(detaching);
			/*div_binding*/ ctx[17](null);
		}
	};

	dispatch_dev("SvelteRegisterBlock", {
		block,
		id: create_fragment.name,
		type: "component",
		source: "",
		ctx
	});

	return block;
}

function instance($$self, $$props, $$invalidate) {
	let { $$slots: slots = {}, $$scope } = $$props;
	validate_slots('select-component', slots, []);
	let { callback = null } = $$props;
	let { options = [""] } = $$props;
	let { value = null } = $$props;
	let { valueindex = null } = $$props;

	// Main code
	let root = arguments[0];

	let select;
	let optionsHolder;
	let optionButtons = [];
	let currentOption;
	let currentOptionButton;
	let init = false;
	let key = 0;
	let obs = null;

	function setKeyValue(value, options) {
		if (value !== null) {
			if (options.includes(value)) {
				let index = options.findIndex(element => element == value);
				$$invalidate(6, currentOption.innerHTML = value, currentOption);
				$$invalidate(5, optionButtons[index].style.display = "none", optionButtons);
				$$invalidate(11, valueindex = index);
			}

			$$invalidate(8, key += 1);
		}
	}

	function setKeyIndex(valueindex, options) {
		if (valueindex != null && options != undefined && options[valueindex] != value) {
			$$invalidate(0, value = options[valueindex]);
			$$invalidate(8, key += 1);
		}
	}

	function indexToValue(index) {
		$$invalidate(0, value = options[index]);
	}

	function changeVisibility() {
		if (optionsHolder.style.display == "none") {
			$$invalidate(4, optionsHolder.style.display = "initial", optionsHolder);
		} else {
			$$invalidate(4, optionsHolder.style.display = "none", optionsHolder);
		}
	}

	function changeOption(index, callback) {
		$$invalidate(11, valueindex = index);
		$$invalidate(0, value = options[index]);

		if (callback != undefined && callback != null) {
			callback(index);
		}
	}

	function hideSelect() {
		$$invalidate(4, optionsHolder.style.display = "none", optionsHolder);
	}

	function changeOptionsWidth(select, optionsHolder) {
		let selectWidth;

		if (select != undefined && optionsHolder != undefined) {
			let selectWidthText = getComputedStyle(select).getPropertyValue('--width');

			if (isNaN(selectWidthText) || selectWidthText == "") {
				if (obs == null) {
					obs = new ResizeObserver(() => changeOptionsWidth(select, optionsHolder));
					obs.observe(currentOptionButton);
					return;
				} else {
					selectWidthText = getComputedStyle(currentOptionButton).getPropertyValue('width');
					selectWidth = px2rem(parseFloat(selectWidthText.slice(0, selectWidthText.length - 2)));
				}
			} else {
				selectWidth = parseFloat(selectWidthText.slice(0, selectWidthText.length - 2));
			}

			let spanWidths = [];

			for (let i = 0; i < optionsHolder.children.length; i++) {
				let span = optionsHolder.children[i].children[0];
				let spanWidth = getTextWidth(span.innerHTML, getCanvasFont(span));
				spanWidths.push(spanWidth);
			}

			let maxOptionsWidth = px2rem(Math.max(...spanWidths));

			if (maxOptionsWidth > selectWidth) {
				let width = 1.1 * maxOptionsWidth + "rem";
				optionsHolder.style.width = width;

				for (let i = 0; i < optionsHolder.children.length; i++) {
					let button = optionsHolder.children[i];
					button.style.width = width;
				}

				optionsHolder.style.marginLeft = -(1.1 * maxOptionsWidth - selectWidth) / 2 - 0.05 + "rem";
			} else {
				let width = selectWidth + 0.1 + "rem";

				for (let i = 0; i < optionsHolder.children.length; i++) {
					let button = optionsHolder.children[i];
					button.style.width = width;
				}
			}
		}
	}

	onMount(() => {
		init = true;
		root.addEventListener('focusout', hideSelect);
	});

	const writable_props = ['callback', 'options', 'value', 'valueindex'];

	Object.keys($$props).forEach(key => {
		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<select-component> was created with unknown prop '${key}'`);
	});

	function span_binding($$value) {
		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
			currentOption = $$value;
			$$invalidate(6, currentOption);
		});
	}

	function button_binding($$value) {
		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
			currentOptionButton = $$value;
			$$invalidate(7, currentOptionButton);
		});
	}

	function button_binding_1($$value, i) {
		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
			optionButtons[i] = $$value;
			$$invalidate(5, optionButtons);
		});
	}

	const click_handler = i => changeOption(i, callback);

	function div1_binding($$value) {
		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
			optionsHolder = $$value;
			$$invalidate(4, optionsHolder);
		});
	}

	function div_binding($$value) {
		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
			select = $$value;
			$$invalidate(3, select);
		});
	}

	$$self.$$set = $$props => {
		if ('callback' in $$props) $$invalidate(1, callback = $$props.callback);
		if ('options' in $$props) $$invalidate(2, options = $$props.options);
		if ('value' in $$props) $$invalidate(0, value = $$props.value);
		if ('valueindex' in $$props) $$invalidate(11, valueindex = $$props.valueindex);
	};

	$$self.$capture_state = () => ({
		onMount,
		px2rem,
		getTextWidth,
		getCanvasFont,
		callback,
		options,
		value,
		valueindex,
		root,
		select,
		optionsHolder,
		optionButtons,
		currentOption,
		currentOptionButton,
		init,
		key,
		obs,
		setKeyValue,
		setKeyIndex,
		indexToValue,
		changeVisibility,
		changeOption,
		hideSelect,
		changeOptionsWidth
	});

	$$self.$inject_state = $$props => {
		if ('callback' in $$props) $$invalidate(1, callback = $$props.callback);
		if ('options' in $$props) $$invalidate(2, options = $$props.options);
		if ('value' in $$props) $$invalidate(0, value = $$props.value);
		if ('valueindex' in $$props) $$invalidate(11, valueindex = $$props.valueindex);
		if ('root' in $$props) root = $$props.root;
		if ('select' in $$props) $$invalidate(3, select = $$props.select);
		if ('optionsHolder' in $$props) $$invalidate(4, optionsHolder = $$props.optionsHolder);
		if ('optionButtons' in $$props) $$invalidate(5, optionButtons = $$props.optionButtons);
		if ('currentOption' in $$props) $$invalidate(6, currentOption = $$props.currentOption);
		if ('currentOptionButton' in $$props) $$invalidate(7, currentOptionButton = $$props.currentOptionButton);
		if ('init' in $$props) init = $$props.init;
		if ('key' in $$props) $$invalidate(8, key = $$props.key);
		if ('obs' in $$props) obs = $$props.obs;
	};

	if ($$props && "$$inject" in $$props) {
		$$self.$inject_state($$props.$$inject);
	}

	$$self.$$.update = () => {
		if ($$self.$$.dirty & /*value, options*/ 5) {
			setKeyValue(value, options);
		}

		if ($$self.$$.dirty & /*valueindex, options*/ 2052) {
			setKeyIndex(valueindex, options);
		}

		if ($$self.$$.dirty & /*select, optionsHolder*/ 24) {
			changeOptionsWidth(select, optionsHolder);
		}
	};

	return [
		value,
		callback,
		options,
		select,
		optionsHolder,
		optionButtons,
		currentOption,
		currentOptionButton,
		key,
		changeVisibility,
		changeOption,
		valueindex,
		span_binding,
		button_binding,
		button_binding_1,
		click_handler,
		div1_binding,
		div_binding
	];
}

class Select_component extends SvelteElement {
	constructor(options) {
		super();
		this.shadowRoot.innerHTML = `<style>@import '/css/common.css';#current-options-div{position:relative;overflow:hidden;width:calc(100% - 2.5rem);text-align:var(--text-align,left);padding-top:0.5rem}#arrow-down{right:0.5rem;width:1.365rem;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.select{position:relative;margin-top:var(--margin-top,0);width:var(--width);max-width:var(--max-width);height:var(--height,2.75rem);border:var(--border,rgba(0,0,0,var(--opacity,1)) solid);border-width:var(--border-width, 0.063rem);border-radius:var(--border-radius,0.126rem)}.select button{width:var(--width);max-width:var(--max-width)}#current-option-button,#current-option-button *{opacity:var(--opacity,1);font-family:var(--font-family,var(--serif), serif);font-size:var(--font-size, 1.3rem)}.select>:first-child{margin-right:-2.75rem;padding-right:0.0rem}.select span{position:relative;padding-top:0.5rem;white-space:nowrap}#current-option-button{display:flex;width:100%;height:100%;padding-left:0.341rem;font-weight:var(--font-weight,400)}#options-holder{position:absolute;margin-top:calc(-1 * var(--border-width, 0.063rem));background:white;z-index:1;margin-left:-0.05rem;border-radius:var(--border-radius-options,0.126rem)}#options-holder *{font-size:var(--options-font-size, 1.2rem);font-family:var(--font-family,var(--serif), serif)}#options-holder button{display:flex;position:relative;width:var(--width);background:white;font-weight:400;text-align:var(--text-align,left);padding-top:0.341rem;padding-bottom:0.341rem;padding-right:3.515rem;padding-left:0.341rem}#options-holder button:hover{background:#cdcdcd}#options-holder button{border:black solid;border-width:0 var(--border-width-options,var(--border-width, 0.063rem)) 0 var(--border-width-options,var(--border-width, 0.063rem))}#options-holder>:first-child{border-top:black solid var(--border-width-options,var(--border-width, 0.063rem));border-top-left-radius:var(--border-radius-options,0.126rem);border-top-right-radius:var(--border-radius-options,0.126rem)}#options-holder>:last-child{border-bottom:black solid var(--border-width-options,var(--border-width, 0.063rem));border-bottom-left-radius:var(--border-radius-options,0.126rem);border-bottom-right-radius:var(--border-radius-options,0.126rem)}</style>`;

		init(
			this,
			{
				target: this.shadowRoot,
				props: attribute_to_object(this.attributes),
				customElement: true
			},
			instance,
			create_fragment,
			safe_not_equal,
			{
				callback: 1,
				options: 2,
				value: 0,
				valueindex: 11
			},
			null
		);

		if (options) {
			if (options.target) {
				insert_dev(options.target, this, options.anchor);
			}

			if (options.props) {
				this.$set(options.props);
				flush();
			}
		}
	}

	static get observedAttributes() {
		return ["callback", "options", "value", "valueindex"];
	}

	get callback() {
		return this.$$.ctx[1];
	}

	set callback(callback) {
		this.$$set({ callback });
		flush();
	}

	get options() {
		return this.$$.ctx[2];
	}

	set options(options) {
		this.$$set({ options });
		flush();
	}

	get value() {
		return this.$$.ctx[0];
	}

	set value(value) {
		this.$$set({ value });
		flush();
	}

	get valueindex() {
		return this.$$.ctx[11];
	}

	set valueindex(valueindex) {
		this.$$set({ valueindex });
		flush();
	}
}

customElements.define("select-component", Select_component);

export { Select_component as default };