tinkiet 0.7.6 → 0.7.8

package/notie/notie.js

@@ -0,0 +1,193 @@
+import { __decorate } from 'tslib';
+import { css, unsafeCSS, html } from 'lit';
+import { state, property, query, customElement } from 'lit/decorators.js';
+import '../box/index.js';
+import '../textfield/index.js';
+import css_248z from './notie.scss.js';
+import { TkBox } from '../box/box.js';
+
+var TkNotie_1;
+var NotieType;
+(function (NotieType) {
+    NotieType["show"] = "show";
+    NotieType["force"] = "force";
+    NotieType["confirm"] = "confirm";
+    NotieType["input"] = "input";
+})(NotieType || (NotieType = {}));
+var NotieLevel;
+(function (NotieLevel) {
+    NotieLevel["success"] = "success";
+    NotieLevel["warning"] = "warning";
+    NotieLevel["error"] = "error";
+    NotieLevel["info"] = "info";
+    NotieLevel["neutral"] = "neutral";
+})(NotieLevel || (NotieLevel = {}));
+let TkNotie = TkNotie_1 = class TkNotie extends TkBox {
+    static get styles() {
+        return [
+            ...TkBox.styles,
+            css `
+				${unsafeCSS(css_248z)}
+			`
+        ];
+    }
+    render() {
+        return html `
+			<div class="overlay" @click=${() => this.hide(false)}></div>
+			<tk-box class="container ${this.level}">
+				${this.text
+            ? html `
+							<tk-box class="text" @click="${() => (this.type == NotieType.show ? this.hide(true) : null)}">${this.text}</tk-box>
+					  `
+            : ""}
+				${this.template
+            ? html `
+							<tk-box class="template" @click="${() => (this.type == NotieType.show ? this.hide(true) : null)}">${this.template}</tk-box>
+					  `
+            : ""}
+				${this.type == NotieType.force
+            ? html `
+							<tk-box @click="${() => this.hide(true)}" class="button force">${this.buttonText}</tk-box>
+					  `
+            : ""}
+				${this.type == NotieType.input
+            ? html `
+							<tk-textfield class="input" ></tk-textfield>
+					  `
+            : ""}
+				${this.type == NotieType.confirm || this.type == NotieType.input
+            ? html `
+							<tk-box direction="row">
+								<tk-box justify="center" align-items="center" flex="grow" @click="${() => this.hide(true)}" class="button confirm">
+									${this.confirmText}
+								</tk-box>
+								<tk-box justify="center" align-items="center" flex="grow" @click="${() => this.hide(false)}" class="button confirm cancel">
+									${this.cancelText}
+								</tk-box>
+							</tk-box>
+					  `
+            : ""}
+			</tk-box>
+		`;
+    }
+    show() {
+        return new Promise(resolve => {
+            this.resolve = resolve;
+            this.style.setProperty("display", "flex");
+            setTimeout(() => (this.open = true));
+            this.dispatchEvent(new Event("didShow"));
+            if (this.$input)
+                setTimeout(() => this.$input.focus());
+            if (this.type == NotieType.show)
+                setTimeout(() => this.hide(false), this.delay);
+        });
+    }
+    hide(value) {
+        if (value && this.type === NotieType.input)
+            value = this.$input.value;
+        if (!value && this.type === NotieType.input)
+            value = null;
+        this.$input ? (this.$input.value = "") : null;
+        this.$container.addEventListener("transitionend", () => {
+            this.dispatchEvent(new Event("didHide"));
+            this.resolve(value);
+            if (!this.persistent)
+                this.remove();
+        }, { once: true });
+        this.open = false;
+    }
+    constructor(text = "") {
+        super();
+        this.persistent = true;
+        this.open = false;
+        this.position = "bottom";
+        this.type = NotieType.show;
+        this.level = NotieLevel.info;
+        this.delay = 3000;
+        this.animationDelay = 300;
+        this.buttonText = "OK";
+        this.confirmText = "OK";
+        this.cancelText = "CANCEL";
+        this.text = text;
+    }
+    static show(options) {
+        const notie = this.getNotie(options, NotieType.show);
+        return notie.show();
+    }
+    static force(options) {
+        const notie = this.getNotie(options, NotieType.force);
+        options.buttonText ? (notie.buttonText = options.buttonText) : null;
+        return notie.show();
+    }
+    static confirm(options) {
+        const notie = this.getNotie(options, NotieType.confirm);
+        options.confirmText ? (notie.confirmText = options.confirmText) : null;
+        options.cancelText ? (notie.cancelText = options.cancelText) : null;
+        return notie.show();
+    }
+    static input(options) {
+        const notie = this.getNotie(options, NotieType.input);
+        options.password ? (notie.$input.type = "password") : null;
+        options.confirmText ? (notie.confirmText = options.confirmText) : null;
+        options.cancelText ? (notie.cancelText = options.cancelText) : null;
+        return notie.show();
+    }
+    static getNotie(options, type) {
+        var _a, _b;
+        const notie = new TkNotie_1(options.text);
+        notie.persistent = false;
+        notie.type = type;
+        notie.delay = (_a = options.delay) !== null && _a !== void 0 ? _a : 999999999;
+        options.template ? (notie.template = options.template) : null;
+        options.position ? (notie.position = options.position) : null;
+        options.background && notie.$container ? notie.$container.setAttribute("background-color", options.background) : null;
+        options.color && notie.$container ? notie.$container.setAttribute("color", options.color) : null;
+        options.container ? (_b = options.container.shadowRoot) === null || _b === void 0 ? void 0 : _b.appendChild(notie) : window.document.body.appendChild(notie);
+        options.zIndex ? notie.style.setProperty("z-index", options.zIndex.toString()) : null;
+        return notie;
+    }
+};
+__decorate([
+    state()
+], TkNotie.prototype, "persistent", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TkNotie.prototype, "open", void 0);
+__decorate([
+    property({ reflect: true })
+], TkNotie.prototype, "position", void 0);
+__decorate([
+    property({ type: String })
+], TkNotie.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], TkNotie.prototype, "level", void 0);
+__decorate([
+    property({ type: Number })
+], TkNotie.prototype, "delay", void 0);
+__decorate([
+    property()
+], TkNotie.prototype, "text", void 0);
+__decorate([
+    property()
+], TkNotie.prototype, "buttonText", void 0);
+__decorate([
+    property()
+], TkNotie.prototype, "confirmText", void 0);
+__decorate([
+    property()
+], TkNotie.prototype, "cancelText", void 0);
+__decorate([
+    property({ type: Object })
+], TkNotie.prototype, "template", void 0);
+__decorate([
+    query("tk-textfield")
+], TkNotie.prototype, "$input", void 0);
+__decorate([
+    query(".container")
+], TkNotie.prototype, "$container", void 0);
+TkNotie = TkNotie_1 = __decorate([
+    customElement("tk-notie")
+], TkNotie);
+
+export { TkNotie };

package/notie/notie.scss.js

@@ -0,0 +1,4 @@
+var css_248z = ":host{bottom:0;display:none;font-size:1.6rem;left:0;margin:0;position:fixed;right:0;top:0}:host .overlay{background-color:rgba(0,0,0,.502);bottom:0;left:0;position:fixed;right:0;top:0;z-index:var(--notie-z-index,400)}:host .container{background-color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));bottom:0;box-shadow:10px 10px 10px 10px var(--shadow);color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));height:fit-content;left:0;position:fixed;right:0;text-align:center;transform:translateY(100%);transition:all .15s ease-in;z-index:calc(var(--notie-z-index, 400) + 1)}:host .container.info{background-color:#4d82d6}:host .container.error{background-color:#e1715b}:host .container.warning{background-color:#d6a14d}:host .container.success{background-color:#57bf57}:host .text{padding:.5em}:host .input{--input-font-size:$font-size-widescreen;background-color:var(--background);color:var(--foreground);text-align:center}:host .button{cursor:pointer;padding:.5em}:host .button.confirm,:host .button.forcer{background-color:#57bf57;color:#fff}:host .button.cancel{background-color:var(--error,#e1715b);color:var(--on-error,#fff)}@media screen and (max-width:900px){:host{font-size:1.4rem}}@media screen and (max-width:750px){:host{font-size:1.2rem}}@media screen and (max-width:400px){:host{font-size:1rem}}:host([position=top]) .container{bottom:inherit;position:fixed;top:0;transform:translateY(-100%)}:host([open]) .container{transform:translateY(0)}";
+var stylesheet=":host{bottom:0;display:none;font-size:1.6rem;left:0;margin:0;position:fixed;right:0;top:0}:host .overlay{background-color:rgba(0,0,0,.502);bottom:0;left:0;position:fixed;right:0;top:0;z-index:var(--notie-z-index,400)}:host .container{background-color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));bottom:0;box-shadow:10px 10px 10px 10px var(--shadow);color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));height:fit-content;left:0;position:fixed;right:0;text-align:center;transform:translateY(100%);transition:all .15s ease-in;z-index:calc(var(--notie-z-index, 400) + 1)}:host .container.info{background-color:#4d82d6}:host .container.error{background-color:#e1715b}:host .container.warning{background-color:#d6a14d}:host .container.success{background-color:#57bf57}:host .text{padding:.5em}:host .input{--input-font-size:$font-size-widescreen;background-color:var(--background);color:var(--foreground);text-align:center}:host .button{cursor:pointer;padding:.5em}:host .button.confirm,:host .button.forcer{background-color:#57bf57;color:#fff}:host .button.cancel{background-color:var(--error,#e1715b);color:var(--on-error,#fff)}@media screen and (max-width:900px){:host{font-size:1.4rem}}@media screen and (max-width:750px){:host{font-size:1.2rem}}@media screen and (max-width:400px){:host{font-size:1rem}}:host([position=top]) .container{bottom:inherit;position:fixed;top:0;transform:translateY(-100%)}:host([open]) .container{transform:translateY(0)}";
+
+export { css_248z as default, stylesheet };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinkiet",
-  "version": "0.7.6",
+  "version": "0.7.8",
   "description": "Pragmatic UI Web Components",
   "type": "module",
   "main": "index.js",

package/pages/index.d.ts

@@ -0,0 +1 @@
+export * from "./pages";

package/pages/index.js

@@ -0,0 +1 @@
+export { TkPages } from './pages.js';

package/pages/pages.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from "lit";
+declare class TkPages extends LitElement {
+    static styles: import("lit").CSSResult;
+    private _page;
+    set page(val: string);
+    get page(): string;
+    selected: string;
+    handleScroll: boolean;
+    private scrollHistory;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(props: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-pages": TkPages;
+    }
+}
+export { TkPages };

package/pages/pages.js

@@ -0,0 +1,75 @@
+import { __decorate } from 'tslib';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import css_248z from './pages.scss.js';
+
+let TkPages = class TkPages extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._page = "";
+        this.selected = "";
+        this.handleScroll = false;
+        this.scrollHistory = {};
+    }
+    set page(val) {
+        let oldVal = this._page;
+        this._page = val;
+        if (oldVal && this.handleScroll) {
+            const el = this.querySelector(`[page=${oldVal}]`);
+            if (el) {
+                const scrollElement = document.scrollingElement || document.documentElement;
+                this.scrollHistory[oldVal] = scrollElement.scrollTop;
+            }
+        }
+        this.requestUpdate("page", oldVal);
+    }
+    get page() {
+        return this._page;
+    }
+    render() {
+        return html `
+			<slot></slot>
+		`;
+    }
+    updated(props) {
+        if (props.has("page")) {
+            this.querySelectorAll(":scope > *").forEach(el => {
+                var _a;
+                const elPageAttribute = (_a = el.getAttribute("page")) !== null && _a !== void 0 ? _a : "default";
+                const scrollElement = document.scrollingElement || document.documentElement;
+                if (elPageAttribute == this.page) {
+                    el.removeAttribute("hidden");
+                    if (this.selected != "") {
+                        el.setAttribute(this.selected, "");
+                    }
+                    if (this.handleScroll && !el.hasAttribute("no-scroll")) {
+                        scrollElement.scrollTop = this.scrollHistory[elPageAttribute] ? this.scrollHistory[elPageAttribute] : 0;
+                    }
+                }
+                else {
+                    el.setAttribute("hidden", "");
+                    if (this.selected != "") {
+                        el.removeAttribute(this.selected);
+                    }
+                }
+            });
+        }
+    }
+};
+TkPages.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
+__decorate([
+    property({ attribute: "page", type: String })
+], TkPages.prototype, "page", null);
+__decorate([
+    property({ attribute: true, type: String })
+], TkPages.prototype, "selected", void 0);
+__decorate([
+    property({ attribute: "handle-scroll", type: Boolean })
+], TkPages.prototype, "handleScroll", void 0);
+TkPages = __decorate([
+    customElement("tk-pages")
+], TkPages);
+
+export { TkPages };

package/pages/pages.scss.js

@@ -0,0 +1,4 @@
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}";
+
+export { css_248z as default, stylesheet };

package/radio/index.d.ts

@@ -0,0 +1 @@
+export * from "./radio";

package/radio/index.js

@@ -0,0 +1 @@
+export { TkRadio } from './radio.js';

package/radio/radio.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from "lit";
+declare class TkRadio extends LitElement {
+    static styles: import("lit").CSSResult;
+    private _id;
+    name: string;
+    checked: boolean;
+    required: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    value: string;
+    private $input;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    protected onKeyDown(e: KeyboardEvent): void;
+    protected handleClick(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-radio": TkRadio;
+    }
+}
+export { TkRadio };

package/radio/radio.js

@@ -0,0 +1,98 @@
+import { __decorate } from 'tslib';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { property, query, customElement } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '../box/index.js';
+import { uniqueID } from '../utils/unique.js';
+import css_248z from './radio.scss.js';
+
+let TkRadio = class TkRadio extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._id = uniqueID();
+        this.checked = false;
+        this.required = false;
+        this.disabled = false;
+        this.readonly = false;
+    }
+    render() {
+        return html `
+			<tk-box direction="row" align-items="center">
+				<div tabindex="0" class="radio">
+					<div id="dot"></div>
+				</div>
+				<span class="label"><slot></slot></span>
+			</tk-box>
+			<input
+				id=${this._id}
+				type="radio"
+				style="position: absolute;left: 0;z-index: -1;"
+				?checked="${this.checked}"
+				.checked=${this.checked}
+				?required="${this.required}"
+				?disabled="${this.disabled}"
+				?readonly="${this.readonly}"
+				value="${ifDefined(this.value)}"
+				name="${ifDefined(this.name)}"
+				tabindex="-1"
+			/>
+		`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("click", this.handleClick.bind(this));
+        this.addEventListener("keydown", this.onKeyDown.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("click", this.handleClick);
+        this.removeEventListener("keydown", this.onKeyDown);
+    }
+    firstUpdated() {
+        this.appendChild(this.$input);
+    }
+    onKeyDown(e) {
+        if (e.code === "Space" || e.code === "Enter") {
+            e.preventDefault();
+            e.stopPropagation();
+            this.click();
+        }
+    }
+    handleClick() {
+        this.checked = !this.checked;
+        if (this.checked && this.name)
+            this.getRootNode()
+                .querySelectorAll(`tk-radio[name="${this.name}"]`)
+                .forEach(el => (el != this ? (el.checked = false) : null));
+        setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
+    }
+};
+TkRadio.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
+__decorate([
+    property({ attribute: true, type: String })
+], TkRadio.prototype, "name", void 0);
+__decorate([
+    property({ attribute: true, type: Boolean, reflect: true })
+], TkRadio.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkRadio.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkRadio.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkRadio.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TkRadio.prototype, "value", void 0);
+__decorate([
+    query("input")
+], TkRadio.prototype, "$input", void 0);
+TkRadio = __decorate([
+    customElement("tk-radio")
+], TkRadio);
+
+export { TkRadio };

package/radio/radio.scss.js

@@ -0,0 +1,4 @@
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_radio-bg:var(--radio-bg,#0000);--_radio-color:var(--radio-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));display:inline-flex}:host .radio{align-items:center;background:var(--_radio-bg);border:var(--radio-border-config,.125rem solid) currentColor;border-radius:var(--radio-border-radius,100%);color:var(--_radio-color);display:inline-flex;height:var(--radio-size,1.25rem);justify-content:center;outline:none;position:relative;transition:var(--radio-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),border-color var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));-webkit-user-select:none;user-select:none;width:var(--radio-size,1.25rem)}:host .label{font-size:1.1em;margin-left:10px}:host(:not([disabled])){cursor:pointer}:host([checked]){--_radio-bg:var(--radio-bg-checked,#0000);--_radio-color:var(--radio-color-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([checked]) #dot{transform:scale(1)}:host(:focus),:host(:hover){will-change:border,background}:host(:focus) #dot,:host(:hover) #dot{will-change:transform,background}:host([disabled]){--_radio-bg:var(--radio-bg-disabled,#0000);--_radio-color:var(--radio-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));pointer-events:none}:host([disabled][checked]){--_radio-bg:var(--radio-bg-disabled-checked,#0000);--_radio-color:var(--radio-color-disabled-checked,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}#dot{background:currentColor;border-radius:var(--radio-dot-border-radius,100%);height:var(--radio-dot-size,.625rem);transform:scale(0);transition:var(--radio-dot-transition,transform var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--radio-dot-size,.625rem)}#ripple{transform:var(--radio-ripple-transform,translate(-50%,-50%) scale(1.8))}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_radio-bg:var(--radio-bg,#0000);--_radio-color:var(--radio-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));display:inline-flex}:host .radio{align-items:center;background:var(--_radio-bg);border:var(--radio-border-config,.125rem solid) currentColor;border-radius:var(--radio-border-radius,100%);color:var(--_radio-color);display:inline-flex;height:var(--radio-size,1.25rem);justify-content:center;outline:none;position:relative;transition:var(--radio-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),border-color var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));-webkit-user-select:none;user-select:none;width:var(--radio-size,1.25rem)}:host .label{font-size:1.1em;margin-left:10px}:host(:not([disabled])){cursor:pointer}:host([checked]){--_radio-bg:var(--radio-bg-checked,#0000);--_radio-color:var(--radio-color-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([checked]) #dot{transform:scale(1)}:host(:focus),:host(:hover){will-change:border,background}:host(:focus) #dot,:host(:hover) #dot{will-change:transform,background}:host([disabled]){--_radio-bg:var(--radio-bg-disabled,#0000);--_radio-color:var(--radio-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));pointer-events:none}:host([disabled][checked]){--_radio-bg:var(--radio-bg-disabled-checked,#0000);--_radio-color:var(--radio-color-disabled-checked,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}#dot{background:currentColor;border-radius:var(--radio-dot-border-radius,100%);height:var(--radio-dot-size,.625rem);transform:scale(0);transition:var(--radio-dot-transition,transform var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--radio-dot-size,.625rem)}#ripple{transform:var(--radio-ripple-transform,translate(-50%,-50%) scale(1.8))}";
+
+export { css_248z as default, stylesheet };

package/select/index.d.ts

@@ -0,0 +1 @@
+export * from "./select";

package/select/index.js

@@ -0,0 +1 @@
+export { TkSelect } from './select.js';

package/select/select.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from "lit";
+declare class TkSelect extends LitElement {
+    static styles: import("lit").CSSResult;
+    private _id;
+    set value(value: string);
+    get value(): string;
+    name: string;
+    list: string;
+    type: "email" | "number" | "password" | "text" | "search";
+    required: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    autocomplete: "on" | "off";
+    pattern: string;
+    initialValue: string;
+    label: string;
+    min: number;
+    max: number;
+    minLength: number;
+    maxLength: number;
+    private $select;
+    render(): import("lit-html").TemplateResult<1>;
+    private handleChange;
+    firstUpdated(): void;
+    private refreshAttributes;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-select": TkSelect;
+    }
+}
+export { TkSelect };

package/select/select.js

@@ -0,0 +1,132 @@
+import { __decorate } from 'tslib';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { property, state, eventOptions, customElement } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '../box/index.js';
+import { uniqueID } from '../utils/unique.js';
+import css_248z from './select.scss.js';
+
+let TkSelect = class TkSelect extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._id = uniqueID();
+        this.type = "text";
+        this.required = false;
+        this.disabled = false;
+        this.readonly = false;
+    }
+    set value(value) {
+        if (!this.$select) {
+            this.initialValue = value;
+        }
+        else {
+            this.$select.value = value;
+            this.refreshAttributes();
+        }
+    }
+    get value() {
+        return this.$select != null ? this.$select.value : this.initialValue || "";
+    }
+    render() {
+        return html `
+			<div id="container">
+				<slot id="before" name="before"></slot>
+				<div id="wrapper">
+					<div id="label">${this.label}</div>
+					<slot id="slot"></slot>
+					<select
+						id="${this._id}"
+						@keydown=${this.handleChange.bind(this)}
+						@input=${this.handleChange.bind(this)}
+						@focusout=${this.handleChange.bind(this)}
+						@change=${this.handleChange.bind(this)}
+						.value="${this.initialValue}"
+						?required="${this.required}"
+						?disabled="${this.disabled}"
+						?readonly="${this.readonly}"
+						name="${ifDefined(this.name)}"
+						autocomplete="${ifDefined(this.autocomplete)}"
+						tabindex="${this.disabled ? -1 : 0}"
+					></select>
+					<svg id="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 25" preserveAspectRatio="none">
+						<polygon points="0,0 50,0 25,25" />
+					</svg>
+				</div>
+				<slot id="after" name="after"></slot>
+			</div>
+		`;
+    }
+    handleChange() {
+        this.refreshAttributes();
+    }
+    firstUpdated() {
+        var _a;
+        this.$select = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("select");
+        this.appendChild(this.$select);
+        const options = this.querySelectorAll("option");
+        options.forEach(option => this.$select.appendChild(option));
+        if (this.initialValue)
+            this.value = this.initialValue;
+    }
+    refreshAttributes() {
+        this.$select.value ? this.setAttribute("dirty", "") : this.removeAttribute("dirty");
+        this.$select.checkValidity() ? this.removeAttribute("invalid") : this.setAttribute("invalid", "");
+        setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
+    }
+};
+TkSelect.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
+__decorate([
+    property({ type: String })
+], TkSelect.prototype, "value", null);
+__decorate([
+    property({ attribute: true, type: String })
+], TkSelect.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], TkSelect.prototype, "list", void 0);
+__decorate([
+    property({ type: String })
+], TkSelect.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkSelect.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkSelect.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String })
+], TkSelect.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: String })
+], TkSelect.prototype, "pattern", void 0);
+__decorate([
+    state()
+], TkSelect.prototype, "initialValue", void 0);
+__decorate([
+    property({ type: String })
+], TkSelect.prototype, "label", void 0);
+__decorate([
+    property({ type: Number })
+], TkSelect.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], TkSelect.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], TkSelect.prototype, "minLength", void 0);
+__decorate([
+    property({ type: Number })
+], TkSelect.prototype, "maxLength", void 0);
+__decorate([
+    eventOptions({ passive: true })
+], TkSelect.prototype, "handleChange", null);
+TkSelect = __decorate([
+    customElement("tk-select")
+], TkSelect);
+
+export { TkSelect };

package/select/select.scss.js

@@ -0,0 +1,4 @@
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_input-state-color:var(--input-state-color-inactive,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-padding-left-right:var(--input-padding-left-right,0);--_input-bg:var(--input-bg,#0000);--_input-border-radius:0;--_input-color:var(--input-color,var(--foreground,#454545));--_input-label-color:var(--input-label-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-border-style:var(--input-border-style,solid);display:block;outline:none;transform:translateZ(0)}:host([disabled]){--_input-state-color:var(--input-state-color-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_input-label-color:var(--input-label-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-color:var(--input-color-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_input-border-style:var(--input-border-style-disabled,dashed);pointer-events:none}#container{align-items:center;background:var(--_input-bg);border-bottom:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color);border-radius:var(--_input-border-radius);color:var(--_input-color);display:flex;font-size:var(--input-font-size,1rem);overflow:hidden;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}#wrapper{flex-grow:1;position:relative}#label{color:var(--_input-label-color);font-size:inherit;left:var(--_input-padding-left-right);line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host(:hover){--_input-state-color:var(--input-state-color-hover,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([filled]),:host([outlined]){--_input-padding-left-right:var(--input-padding-left-right-outlined,0.75rem)}:host([filled]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem 0.5rem 0 0);--_input-bg:var(--input-bg,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([filled]:hover){--_input-bg:var(--input-bg-filled-hover,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))))}:host([outlined]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem)}:host([outlined]) #container{border:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color)}:host(:focus-within){--_input-state-color:var(--input-state-color-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{font-size:var(--input-label-font-size,.75rem);top:var(--input-padding-top-bottom,.5rem);transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:var(--_input-color-state);color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:calc(var(--input-label-space, .875rem) + var(--input-padding-top-bottom, .5rem))}:host([invalid]){--_input-state-color:var(--input-state-color-invalid,var(--error,hsl(var(--error-h,4.10526),var(--error-s,89.6226%),var(--error-l,58.4314%))))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}#arrow{fill:var(--_input-state-color);height:8px;position:absolute;right:0;top:50%;transform:translate(-100%,-50%);z-index:-1}::slotted(option){display:none}:host(:not([dirty])) ::slotted(select){opacity:0}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_input-state-color:var(--input-state-color-inactive,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-padding-left-right:var(--input-padding-left-right,0);--_input-bg:var(--input-bg,#0000);--_input-border-radius:0;--_input-color:var(--input-color,var(--foreground,#454545));--_input-label-color:var(--input-label-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-border-style:var(--input-border-style,solid);display:block;outline:none;transform:translateZ(0)}:host([disabled]){--_input-state-color:var(--input-state-color-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_input-label-color:var(--input-label-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-color:var(--input-color-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_input-border-style:var(--input-border-style-disabled,dashed);pointer-events:none}#container{align-items:center;background:var(--_input-bg);border-bottom:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color);border-radius:var(--_input-border-radius);color:var(--_input-color);display:flex;font-size:var(--input-font-size,1rem);overflow:hidden;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}#wrapper{flex-grow:1;position:relative}#label{color:var(--_input-label-color);font-size:inherit;left:var(--_input-padding-left-right);line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host(:hover){--_input-state-color:var(--input-state-color-hover,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([filled]),:host([outlined]){--_input-padding-left-right:var(--input-padding-left-right-outlined,0.75rem)}:host([filled]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem 0.5rem 0 0);--_input-bg:var(--input-bg,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([filled]:hover){--_input-bg:var(--input-bg-filled-hover,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))))}:host([outlined]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem)}:host([outlined]) #container{border:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color)}:host(:focus-within){--_input-state-color:var(--input-state-color-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{font-size:var(--input-label-font-size,.75rem);top:var(--input-padding-top-bottom,.5rem);transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:var(--_input-color-state);color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:calc(var(--input-label-space, .875rem) + var(--input-padding-top-bottom, .5rem))}:host([invalid]){--_input-state-color:var(--input-state-color-invalid,var(--error,hsl(var(--error-h,4.10526),var(--error-s,89.6226%),var(--error-l,58.4314%))))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}#arrow{fill:var(--_input-state-color);height:8px;position:absolute;right:0;top:50%;transform:translate(-100%,-50%);z-index:-1}::slotted(option){display:none}:host(:not([dirty])) ::slotted(select){opacity:0}";
+
+export { css_248z as default, stylesheet };

package/slider/index.d.ts

@@ -0,0 +1 @@
+export * from "./slider";

package/slider/index.js

@@ -0,0 +1 @@
+export { TkSlider } from './slider.js';