site-libsoc/Server/public/js/components/switch-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, B as flush, s as safe_not_equal, d as dispatch_dev, v as validate_slots, o as onMount, k as element, l as space, n as noop, p as attr_dev, m as add_location, u as append_dev, y as listen_dev, h as detach_dev, z as run_all } from './index-d19aafba.js';
import { px2rem, getTextWidth, getCanvasFont } from '../../../../../../../../../js/libraries/miscTools.js';

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

function create_fragment(ctx) {
	let label;
	let input;
	let t;
	let span;
	let mounted;
	let dispose;

	const block = {
		c: function create() {
			label = element("label");
			input = element("input");
			t = space();
			span = element("span");
			this.c = noop;
			attr_dev(input, "type", "checkbox");
			add_location(input, file, 39, 4, 804);
			attr_dev(span, "class", "switch-span");
			add_location(span, file, 40, 4, 880);
			attr_dev(label, "class", "switch");
			add_location(label, file, 38, 0, 776);
		},
		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, label, anchor);
			append_dev(label, input);
			input.checked = /*checked*/ ctx[0];
			append_dev(label, t);
			append_dev(label, span);

			if (!mounted) {
				dispose = [
					listen_dev(input, "change", /*input_change_handler*/ ctx[4]),
					listen_dev(input, "click", /*toggleClick*/ ctx[1], false, false, false)
				];

				mounted = true;
			}
		},
		p: function update(ctx, [dirty]) {
			if (dirty & /*checked*/ 1) {
				input.checked = /*checked*/ ctx[0];
			}
		},
		i: noop,
		o: noop,
		d: function destroy(detaching) {
			if (detaching) detach_dev(label);
			mounted = false;
			run_all(dispose);
		}
	};

	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('switch-component', slots, []);
	let { callback = null } = $$props;
	let { checked = false } = $$props;

	const toggle = () => {
		let f = () => {
			if (callback != null) {
				$$invalidate(0, checked = !checked);
				callback();
			} else {
				toggle();
			}
		};

		setTimeout(f, 100);
	};

	function toggleClick() {
		if (callback != null) {
			$$invalidate(0, checked = !checked);
			callback();
		}
	}

	// Main code
	onMount(() => {
		
	});

	const writable_props = ['callback', 'checked'];

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

	function input_change_handler() {
		checked = this.checked;
		$$invalidate(0, checked);
	}

	$$self.$$set = $$props => {
		if ('callback' in $$props) $$invalidate(2, callback = $$props.callback);
		if ('checked' in $$props) $$invalidate(0, checked = $$props.checked);
	};

	$$self.$capture_state = () => ({
		onMount,
		px2rem,
		getTextWidth,
		getCanvasFont,
		callback,
		checked,
		toggle,
		toggleClick
	});

	$$self.$inject_state = $$props => {
		if ('callback' in $$props) $$invalidate(2, callback = $$props.callback);
		if ('checked' in $$props) $$invalidate(0, checked = $$props.checked);
	};

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

	return [checked, toggleClick, callback, toggle, input_change_handler];
}

class Switch_component extends SvelteElement {
	constructor(options) {
		super();
		this.shadowRoot.innerHTML = `<style>@import '/css/common.css';.switch span{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s;border-radius:calc(2* 1.2rem)}.switch span:before{position:absolute;content:"";height:calc(var(--height) - 0.5rem);width:calc(var(--height) - 0.5rem);left:calc(0.3rem);bottom:0.25rem;background-color:white;-webkit-transition:.4s;transition:.4s;border-radius:50%}.switch input:checked+.switch-span{background-color:var(--pink)}.switch input:hover+.switch-span{box-shadow:0 0 0 var(--pink)}.switch input:checked+.switch-span:before{-webkit-transform:translateX(calc(var(--width) - var(--height)/2 - 2*0.6rem));-ms-transform:translateX(calc(var(--width) - var(--height)/2 - 2*0.6rem));transform:translateX(calc(var(--width) - var(--height)/2 - 2*0.6rem))}.switch{position:relative;display:inline-block;width:var(--width);height:var(--height)}.switch input{position:absolute;width:var(--width);height:var(--height);opacity:0}</style>`;

		init(
			this,
			{
				target: this.shadowRoot,
				props: attribute_to_object(this.attributes),
				customElement: true
			},
			instance,
			create_fragment,
			safe_not_equal,
			{ callback: 2, checked: 0, toggle: 3 },
			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", "checked", "toggle"];
	}

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

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

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

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

	get toggle() {
		return this.$$.ctx[3];
	}

	set toggle(value) {
		throw new Error("<switch-component>: Cannot set read-only property 'toggle'");
	}
}

customElements.define("switch-component", Switch_component);

export { Switch_component as default };