tinkiet 0.9.12 → 0.10.0

package/loading/loading.js

@@ -1,61 +0,0 @@
-import { __decorate } from 'tslib';
-import { css, unsafeCSS, html } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import '../box/index.js';
-import css_248z from './loading.scss.js';
-import { TkBox } from '../box/box.js';
-
-let TkLoading = class TkLoading extends TkBox {
-    constructor() {
-        super(...arguments);
-        this.circle = false;
-        this.indeterminate = false;
-        this.percent = 0;
-    }
-    static get styles() {
-        return [
-            ...TkBox.styles,
-            css `
-				${unsafeCSS(css_248z)}
-			`
-        ];
-    }
-    render() {
-        return html `
-			${this.circle
-            ? html `
-						<svg class="circle" viewBox="0 0 100 100">
-							<circle
-								class=${classMap({ indeterminate: this.indeterminate, path: true })}
-								fill="none"
-								stroke-width="1em"
-								stroke-linecap="butt"
-								cx="50"
-								cy="50"
-								r="40"
-							></circle>
-						</svg>
-				  `
-            : html `
-						<div class="line">
-							<div class=${classMap({ progress: true, indeterminate: this.indeterminate })} style="${`width:${this.percent}%;`}"></div>
-						</div>
-				  `}
-		`;
-    }
-};
-__decorate([
-    property({ attribute: true, type: Boolean })
-], TkLoading.prototype, "circle", void 0);
-__decorate([
-    property({ attribute: true, type: Boolean })
-], TkLoading.prototype, "indeterminate", void 0);
-__decorate([
-    property({ attribute: true, type: Number })
-], TkLoading.prototype, "percent", void 0);
-TkLoading = __decorate([
-    customElement("tk-loading")
-], TkLoading);
-
-export { TkLoading };

package/loading/loading.scss.js

@@ -1,4 +0,0 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:hsl(var(--primary));--background-color:var(--tk-loading-background-color,hsl(var(--surface-dim)))}:host([secondary]){--color:hsl(var(--secondary))}:host([error]){--color:hsl(var(--error))}.circle{animation:rotator 3s linear infinite;display:inline-flex;height:56px;width:56px}.circle,.circle .path{transform-origin:center}.circle .path{stroke-dasharray:265;stroke-dashoffset:0;stroke:var(--color);animation:dash 3s ease-in-out infinite}@keyframes rotator{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes dash{0%{stroke-dashoffset:265}50%{stroke-dashoffset:65;transform:rotate(90deg)}to{stroke-dashoffset:265;transform:rotate(1turn)}}:host([small]) .circle{height:20px;width:20px}:host([small]) .line{height:2px}:host([large]) .circle{height:96px;width:96px}:host([large]) .line{height:14px}.line{background-color:var(--background-color);height:6px;overflow:hidden;position:relative}.line .progress{height:100%}.line .indeterminate,.line .progress{background-color:var(--color)}.line .indeterminate:before{animation:indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite}.line .indeterminate:after,.line .indeterminate:before{background-color:inherit;bottom:0;content:\"\";left:0;position:absolute;top:0;will-change:left,right}.line .indeterminate:after{animation:indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite;animation-delay:1.15s}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:hsl(var(--primary));--background-color:var(--tk-loading-background-color,hsl(var(--surface-dim)))}:host([secondary]){--color:hsl(var(--secondary))}:host([error]){--color:hsl(var(--error))}.circle{animation:rotator 3s linear infinite;display:inline-flex;height:56px;width:56px}.circle,.circle .path{transform-origin:center}.circle .path{stroke-dasharray:265;stroke-dashoffset:0;stroke:var(--color);animation:dash 3s ease-in-out infinite}@keyframes rotator{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes dash{0%{stroke-dashoffset:265}50%{stroke-dashoffset:65;transform:rotate(90deg)}to{stroke-dashoffset:265;transform:rotate(1turn)}}:host([small]) .circle{height:20px;width:20px}:host([small]) .line{height:2px}:host([large]) .circle{height:96px;width:96px}:host([large]) .line{height:14px}.line{background-color:var(--background-color);height:6px;overflow:hidden;position:relative}.line .progress{height:100%}.line .indeterminate,.line .progress{background-color:var(--color)}.line .indeterminate:before{animation:indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite}.line .indeterminate:after,.line .indeterminate:before{background-color:inherit;bottom:0;content:\"\";left:0;position:absolute;top:0;will-change:left,right}.line .indeterminate:after{animation:indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite;animation-delay:1.15s}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}";
-
-export { css_248z as default, stylesheet };

package/navigation/navigation-bar.js

@@ -1,20 +0,0 @@
-import { __decorate } from 'tslib';
-import { LitElement, html, css, unsafeCSS } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import css_248z from './navigation-bar.scss.js';
-
-let TkNavigationBar = class TkNavigationBar extends LitElement {
-    render() {
-        return html `
-			<slot></slot>
-		`;
-    }
-};
-TkNavigationBar.styles = css `
-		${unsafeCSS(css_248z)}
-	`;
-TkNavigationBar = __decorate([
-    customElement("tk-navigation-bar")
-], TkNavigationBar);
-
-export { TkNavigationBar };

package/navigation/navigation-bar.scss.js

@@ -1,4 +0,0 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host slot{display:flex;justify-content:space-between}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host slot{display:flex;justify-content:space-between}";
-
-export { css_248z as default, stylesheet };

package/navigation/navigation-item.js

@@ -1,51 +0,0 @@
-import { __decorate } from 'tslib';
-import { LitElement, html, css, unsafeCSS } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import css_248z from './navigation-item.scss.js';
-
-let TkNavigationItem = class TkNavigationItem extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.label = "";
-        this.iconPath = "";
-        this.activeIconPath = "";
-        this.active = false;
-    }
-    render() {
-        return html `
-			<tk-box align-items="center">
-				<tk-box ripple overflow="hidden" tabindex="0" class="indicator">
-					<tk-icon path=${this.active && this.activeIconPath ? this.activeIconPath : this.iconPath}></tk-icon>
-					<span class="badge">
-						<slot name="badge"></slot>
-					</span>
-				</tk-box>
-				${this.label
-            ? html `
-							<span class="label">${this.label}</span>
-					  `
-            : ""}
-			</tk-box>
-		`;
-    }
-};
-TkNavigationItem.styles = css `
-		${unsafeCSS(css_248z)}
-	`;
-__decorate([
-    property()
-], TkNavigationItem.prototype, "label", void 0);
-__decorate([
-    property()
-], TkNavigationItem.prototype, "iconPath", void 0);
-__decorate([
-    property()
-], TkNavigationItem.prototype, "activeIconPath", void 0);
-__decorate([
-    property({ type: Boolean })
-], TkNavigationItem.prototype, "active", void 0);
-TkNavigationItem = __decorate([
-    customElement("tk-navigation-item")
-], TkNavigationItem);
-
-export { TkNavigationItem };

package/navigation/navigation-item.scss.js

@@ -1,4 +0,0 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{cursor:pointer}:host .indicator{align-items:center;border-radius:16px;display:flex;height:32px;justify-content:center;margin-bottom:4px;outline:none;position:relative;width:64px}:host .indicator tk-icon{height:24px;width:24px}:host .indicator .badge{display:flex;left:35px;position:absolute;top:4px}:host .label{font-size:12px;font-weight:500;line-height:16px;margin-top:4px}:host([active]){color:hsl(var(--on-secondary-container))}:host([active]) .indicator{background-color:hsl(var(--secondary-container))}:host(:hover){color:hsl(var(--on-surface-variant))}:host(:hover) .indicator{background-color:hsla(var(--on-surface-variant),.08)}:host(:focus){color:hsl(var(--on-surface-variant))}:host(:focus) .indicator{background-color:hsla(var(--on-surface-variant),.12)}:host([active]:hover){color:hsl(var(--on-surface))}:host([active]:hover) .indicator{background-color:hsla(var(--on-surface),.08)}:host([active]:focus){color:hsl(var(--on-surface))}:host([active]:focus) .indicator{background-color:hsl(var(--on-surface),.12)}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{cursor:pointer}:host .indicator{align-items:center;border-radius:16px;display:flex;height:32px;justify-content:center;margin-bottom:4px;outline:none;position:relative;width:64px}:host .indicator tk-icon{height:24px;width:24px}:host .indicator .badge{display:flex;left:35px;position:absolute;top:4px}:host .label{font-size:12px;font-weight:500;line-height:16px;margin-top:4px}:host([active]){color:hsl(var(--on-secondary-container))}:host([active]) .indicator{background-color:hsl(var(--secondary-container))}:host(:hover){color:hsl(var(--on-surface-variant))}:host(:hover) .indicator{background-color:hsla(var(--on-surface-variant),.08)}:host(:focus){color:hsl(var(--on-surface-variant))}:host(:focus) .indicator{background-color:hsla(var(--on-surface-variant),.12)}:host([active]:hover){color:hsl(var(--on-surface))}:host([active]:hover) .indicator{background-color:hsla(var(--on-surface),.08)}:host([active]:focus){color:hsl(var(--on-surface))}:host([active]:focus) .indicator{background-color:hsl(var(--on-surface),.12)}";
-
-export { css_248z as default, stylesheet };

package/notie/notie.js

@@ -1,201 +0,0 @@
-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.type == NotieType.force ? null : 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 type=${this.inputType} 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("did-show"));
-            setTimeout(() => {
-                if (this.$input)
-                    this.$input.focus();
-            }, 100);
-            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("did-hide"));
-            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.inputType = "text";
-        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.inputType ? (notie.inputType = options.inputType) : null;
-        options.password ? (notie.inputType = "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.level ? (notie.level = options.level) : null;
-        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([
-    state()
-], 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, "inputType", 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 { NotieLevel, TkNotie };

package/notie/notie.scss.js

@@ -1,4 +0,0 @@
-var css_248z = ":host{bottom:0;display:none;font-size:1.6rem;left:0;margin:0;position:fixed;right:0;top:0;z-index:var(--notie-z-index,400)}:host .overlay{background-color:rgba(0,0,0,.502);bottom:0;left:0;position:fixed;right:0;top:0}:host .container{background-color:hsl(var(--primary));bottom:0;box-shadow:10px 10px 10px 10px var(--shadow);color:hsl(var(--on-primary));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;color:#fff}:host .container.error{background-color:#e1715b;color:#fff}:host .container.warning{background-color:#d6a14d;color:#fff}:host .container.success{background-color:#57bf57;color:#fff}:host .text{padding:.5em}:host .input{--input-font-size:$font-size-widescreen;background-color:var(--background,#fff);color:var(--foreground,#000);text-align:center}:host .button{cursor:pointer;padding:.5em}:host .button.confirm,:host .button.force{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}}: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;z-index:var(--notie-z-index,400)}:host .overlay{background-color:rgba(0,0,0,.502);bottom:0;left:0;position:fixed;right:0;top:0}:host .container{background-color:hsl(var(--primary));bottom:0;box-shadow:10px 10px 10px 10px var(--shadow);color:hsl(var(--on-primary));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;color:#fff}:host .container.error{background-color:#e1715b;color:#fff}:host .container.warning{background-color:#d6a14d;color:#fff}:host .container.success{background-color:#57bf57;color:#fff}:host .text{padding:.5em}:host .input{--input-font-size:$font-size-widescreen;background-color:var(--background,#fff);color:var(--foreground,#000);text-align:center}:host .button{cursor:pointer;padding:.5em}:host .button.confirm,:host .button.force{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}}: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/pages/pages.js

@@ -1,75 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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/radio.js

@@ -1,105 +0,0 @@
-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">
-				<tk-box ripple tabindex="${this.disabled ? -1 : 0}" class="state">
-					<div class="radio">
-						<div id="dot"></div>
-					</div>
-				</tk-box>
-				<span class="label"><slot></slot></span>
-			</tk-box>
-			<input
-				id=${this._id}
-				hidden
-				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 (this.disabled)
-            return;
-        if (e.code === "Space" || e.code === "Enter") {
-            e.preventDefault();
-            e.stopPropagation();
-            this.click();
-        }
-    }
-    handleClick() {
-        if (this.disabled)
-            return;
-        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

@@ -1,4 +0,0 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{cursor:pointer;display:inline-flex}:host .state{align-items:center;border-radius:100%;display:inline-flex;height:40px;justify-content:center;outline:none;overflow:hidden;width:40px}:host .radio{align-items:center;border:2px solid hsl(var(--on-surface-variant));border-radius:100%;display:inline-flex;height:20px;justify-content:center;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:20px}:host #dot{background:hsl(var(--primary));border-radius:100%;height:10px;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:10px}:host .label{user-select:none}:host([checked]) .radio{border-color:hsl(var(--primary))}:host([checked]) #dot{transform:scale(1)}:host(:focus) .state,:host(:hover) .state{background:hsla(var(--on-surface),.3)}:host([checked]:focus) .state,:host([checked]:hover) .state{background:hsla(var(--primary),.3)}:host([disabled]){opacity:.5;pointer-events:none}:host([disabled]) .radio{border:2px solid hsl(var(--on-surface-variant))}:host([disabled]) #dot{background:hsl(var(--on-surface-variant))}:host([disabled]) .label{opacity:.6}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{cursor:pointer;display:inline-flex}:host .state{align-items:center;border-radius:100%;display:inline-flex;height:40px;justify-content:center;outline:none;overflow:hidden;width:40px}:host .radio{align-items:center;border:2px solid hsl(var(--on-surface-variant));border-radius:100%;display:inline-flex;height:20px;justify-content:center;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:20px}:host #dot{background:hsl(var(--primary));border-radius:100%;height:10px;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:10px}:host .label{user-select:none}:host([checked]) .radio{border-color:hsl(var(--primary))}:host([checked]) #dot{transform:scale(1)}:host(:focus) .state,:host(:hover) .state{background:hsla(var(--on-surface),.3)}:host([checked]:focus) .state,:host([checked]:hover) .state{background:hsla(var(--primary),.3)}:host([disabled]){opacity:.5;pointer-events:none}:host([disabled]) .radio{border:2px solid hsl(var(--on-surface-variant))}:host([disabled]) #dot{background:hsl(var(--on-surface-variant))}:host([disabled]) .label{opacity:.6}";
-
-export { css_248z as default, stylesheet };