tinkiet 0.7.2 → 0.7.6

package/tinkiet/button/button.js

@@ -1,125 +0,0 @@
-import { __decorate } from 'tslib';
-import { css, unsafeCSS, html } 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 './button.scss.js';
-import { TkBox } from '../box/box.js';
-
-/**
- * A button web component
- *
- * @cssprop --tk-badge-color - Color of widget
- * @cssprop [--tk-badge-color=--primary]
- * @cssprop --tk-badge-text-color - Text color of widget to --on-primary-color
- *
- * @attr {Boolean} accent - accent colors
- * @attr {Boolean} disabled - Disable this element
- * @attr {Boolean} inverted - color and text-color are inverted
- * @attr {Boolean} outlined - outlined
- * @attr {Boolean} pill - rounded corner
- * @attr {Boolean} ripple - display ripple when active
- * @attr {Boolean} small - mini button
- */
-let TkButton = class TkButton extends TkBox {
-    constructor() {
-        super(...arguments);
-        this._id = uniqueID();
-        this.href = null;
-        this.type = "button";
-        this.disabled = false;
-    }
-    static get styles() {
-        return [
-            ...TkBox.styles,
-            css `
-				${unsafeCSS(css_248z)}
-			`
-        ];
-    }
-    render() {
-        return html `
-			<div class="before">
-				<slot name="before"></slot>
-			</div>
-			<div class="content">
-				<slot></slot>
-			</div>
-			<div class="after">
-				<slot name="after"></slot>
-			</div>
-			<div class="badge-in">
-				<slot name="badge-in"></slot>
-			</div>
-			<div class="badge-out">
-				<slot name="badge-out"></slot>
-			</div>
-			${this.href
-            ? html `
-						<a tabindex="-1" hidden id="ahref" href="${this.href}" target="${ifDefined(this.target)}" rel="noreferrer"></a>
-				  `
-            : ""}
-			<button id=${this._id} hidden type="${ifDefined(this.type)}"></button>
-		`;
-    }
-    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);
-    }
-    updated(props) {
-        this.tabIndex = this.disabled ? -1 : 0;
-        super.updated(props);
-    }
-    onKeyDown(e) {
-        if (e.code === "Space" || e.code === "Enter") {
-            e.preventDefault();
-            e.stopPropagation();
-            this.click();
-        }
-    }
-    firstUpdated() {
-        if (this.type == "submit" || this.type == "reset")
-            this.appendChild(this.$button);
-    }
-    handleClick(e) {
-        var _a;
-        if (this.href && e.isTrusted) {
-            e.stopPropagation();
-            e.preventDefault();
-            this.$ahref.click();
-        }
-        else if (e.isTrusted && this.type == "submit" || this.type == "reset") {
-            (_a = this.querySelector("button")) === null || _a === void 0 ? void 0 : _a.click();
-        }
-    }
-};
-__decorate([
-    property()
-], TkButton.prototype, "href", void 0);
-__decorate([
-    property()
-], TkButton.prototype, "target", void 0);
-__decorate([
-    property()
-], TkButton.prototype, "type", void 0);
-__decorate([
-    property({ type: Boolean })
-], TkButton.prototype, "disabled", void 0);
-__decorate([
-    query("#ahref")
-], TkButton.prototype, "$ahref", void 0);
-__decorate([
-    query("button")
-], TkButton.prototype, "$button", void 0);
-TkButton = __decorate([
-    customElement("tk-button")
-], TkButton);
-
-export { TkButton };

package/tinkiet/button/button.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:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));--color-darker:var(--primary-darker,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*0.7)));--text:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));align-items:center;background-color:var(--color);border:1px solid var(--color);border-radius:var(--border-radius-medium,.25rem);box-sizing:border-box;color:var(--text);cursor:pointer;display:inline-flex;flex-direction:row;font-family:Roboto,sans-serif;justify-content:center;letter-spacing:.8px;padding:var(--spacing-s,.5rem) var(--spacing-m,1rem);position:relative;text-align:center;text-decoration:none;text-overflow:ellipsis;user-select:none;vertical-align:middle}:host .content{align-items:center;display:flex;pointer-events:none}:host .before{align-items:center;display:flex}:host .before ::slotted(*){margin-right:var(--spacing-s,.5rem)}:host .after{align-items:center;display:flex}:host .after ::slotted(*){margin-left:var(--spacing-s,.5rem)}:host .badge-out{display:flex;pointer-events:none;position:absolute;right:-.8em;top:-.7em}:host .badge-in{display:flex;pointer-events:none;position:absolute;right:2px;top:2px}:host(:focus){outline:none}:host(:focus),:host(:hover){--color:var(--primary-light,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*1.15)))}:host(:active){--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)))}:host([inverted]){--color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));--text:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)))}:host([inverted]:focus),:host([inverted]:hover){--color:#0000001a}:host([inverted]:active){--color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)))}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)));--color-darker:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent]:focus),:host([accent]:hover){--color:var(--accent-light,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),calc(var(--accent-l, 72.7451%)*1.15)))}:host([accent]:active){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent][inverted]){--color:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)));--text:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent][inverted]:focus),:host([accent][inverted]:hover){--color:#0000001a}:host([accent][inverted]:active){--color:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)))}:host([outlined]){background:var(--background,#f7f7f7) radial-gradient(circle,#0000 1%,var(--background,#f7f7f7) 1%) center/15000%;color:var(--color)}:host([pill]){border-radius:var(--border-radius-pill,9999px)}:host([small]){font-size:.8em;height:28px;line-height:.9em;padding:0 var(--spacing-s,.5rem)}:host([small]) .before ::slotted(*){margin-right:var(--spacing-xs,.25rem)}:host([small]) .after ::slotted(*){margin-left:var(--spacing-xs,.25rem)}:host([fab]){align-items:center;border-radius:50%;box-shadow:var(--elevation-1,0 1px 2px var(--shadow));height:40px;justify-content:center;line-height:normal;overflow:hidden;padding:0;width:40px}:host([fab]):hover{box-shadow:var(--elevation-3,0 4px 8px var(--shadow))}:host([fab][small]){font-size:.75em;height:30px;width:30px}:host([flat]){box-shadow:none}:host([flat]):hover{box-shadow:none}:host([disabled]),:host([disabled][accent]){--text:var(--button-color-disabled,var(--shade-lighter));--color:var(--button-bg-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));box-shadow:none;cursor:default;pointer-events:none}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));--color-darker:var(--primary-darker,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*0.7)));--text:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));align-items:center;background-color:var(--color);border:1px solid var(--color);border-radius:var(--border-radius-medium,.25rem);box-sizing:border-box;color:var(--text);cursor:pointer;display:inline-flex;flex-direction:row;font-family:Roboto,sans-serif;justify-content:center;letter-spacing:.8px;padding:var(--spacing-s,.5rem) var(--spacing-m,1rem);position:relative;text-align:center;text-decoration:none;text-overflow:ellipsis;user-select:none;vertical-align:middle}:host .content{align-items:center;display:flex;pointer-events:none}:host .before{align-items:center;display:flex}:host .before ::slotted(*){margin-right:var(--spacing-s,.5rem)}:host .after{align-items:center;display:flex}:host .after ::slotted(*){margin-left:var(--spacing-s,.5rem)}:host .badge-out{display:flex;pointer-events:none;position:absolute;right:-.8em;top:-.7em}:host .badge-in{display:flex;pointer-events:none;position:absolute;right:2px;top:2px}:host(:focus){outline:none}:host(:focus),:host(:hover){--color:var(--primary-light,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*1.15)))}:host(:active){--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)))}:host([inverted]){--color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));--text:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)))}:host([inverted]:focus),:host([inverted]:hover){--color:#0000001a}:host([inverted]:active){--color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)))}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)));--color-darker:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent]:focus),:host([accent]:hover){--color:var(--accent-light,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),calc(var(--accent-l, 72.7451%)*1.15)))}:host([accent]:active){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent][inverted]){--color:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)));--text:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent][inverted]:focus),:host([accent][inverted]:hover){--color:#0000001a}:host([accent][inverted]:active){--color:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)))}:host([outlined]){background:var(--background,#f7f7f7) radial-gradient(circle,#0000 1%,var(--background,#f7f7f7) 1%) center/15000%;color:var(--color)}:host([pill]){border-radius:var(--border-radius-pill,9999px)}:host([small]){font-size:.8em;height:28px;line-height:.9em;padding:0 var(--spacing-s,.5rem)}:host([small]) .before ::slotted(*){margin-right:var(--spacing-xs,.25rem)}:host([small]) .after ::slotted(*){margin-left:var(--spacing-xs,.25rem)}:host([fab]){align-items:center;border-radius:50%;box-shadow:var(--elevation-1,0 1px 2px var(--shadow));height:40px;justify-content:center;line-height:normal;overflow:hidden;padding:0;width:40px}:host([fab]):hover{box-shadow:var(--elevation-3,0 4px 8px var(--shadow))}:host([fab][small]){font-size:.75em;height:30px;width:30px}:host([flat]){box-shadow:none}:host([flat]):hover{box-shadow:none}:host([disabled]),:host([disabled][accent]){--text:var(--button-color-disabled,var(--shade-lighter));--color:var(--button-bg-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));box-shadow:none;cursor:default;pointer-events:none}";
-
-export { css_248z as default, stylesheet };

package/tinkiet/button/index.d.ts

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

package/tinkiet/button/index.js

@@ -1 +0,0 @@
-export { TkButton } from './button.js';

package/tinkiet/checkbox/checkbox.d.ts

@@ -1,21 +0,0 @@
-import { LitElement } from "lit";
-declare class TkCheckbox extends LitElement {
-    static styles: import("lit").CSSResult;
-    private _id;
-    name: string;
-    value: string;
-    checked: boolean;
-    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-checkbox": TkCheckbox;
-    }
-}
-export { TkCheckbox };

package/tinkiet/checkbox/checkbox.js

@@ -1,83 +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 './checkbox.scss.js';
-
-let TkCheckbox = class TkCheckbox extends LitElement {
-    constructor() {
-        super(...arguments);
-        this._id = uniqueID();
-        this.checked = false;
-    }
-    render() {
-        return html `
-			<tk-box direction="row" align-items="center">
-				<div tabindex="0" class="checkbox">
-					<svg id="checkmark" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 24 24">
-						<path id="checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
-						<line id="indeterminate-path" fill="none" x1="0" y1="12.5" x2="24" y2="12.5" />
-					</svg>
-				</div>
-				<span class="label"><slot></slot></span>
-			</tk-box>
-			<input
-				id=${this._id}
-				slot="none"
-				style="display: none;"
-				?checked=${this.checked}
-				type="checkbox"
-				name="${ifDefined(this.name)}"
-				value="${ifDefined(this.value)}"
-				aria-hidden="true"
-				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;
-        setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
-    }
-};
-TkCheckbox.styles = css `
-		${unsafeCSS(css_248z)}
-	`;
-__decorate([
-    property({ attribute: true, type: String })
-], TkCheckbox.prototype, "name", void 0);
-__decorate([
-    property({ attribute: true, type: String })
-], TkCheckbox.prototype, "value", void 0);
-__decorate([
-    property({ attribute: true, type: Boolean, reflect: true })
-], TkCheckbox.prototype, "checked", void 0);
-__decorate([
-    query("input")
-], TkCheckbox.prototype, "$input", void 0);
-TkCheckbox = __decorate([
-    customElement("tk-checkbox")
-], TkCheckbox);
-
-export { TkCheckbox };

package/tinkiet/checkbox/checkbox.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{--_checkbox-bg:var(--checkbox-bg,#0000);--_checkbox-color:var(--checkbox-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));display:inline-flex}:host .checkbox{align-items:center;background:var(--_checkbox-bg);border:var(--checkbox-border-config,.125rem solid) currentColor;border-radius:var(--checkbox-border-radius,.375rem);color:var(--_checkbox-color);display:inline-flex;height:var(--checkbox-size,1.25rem);justify-content:center;margin:0 5px;min-width:var(--checkbox-size,1.25rem);outline:none;position:relative;transition:var(--checkbox-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(--checkbox-size,1.25rem)}:host .label{font-size:1.1em}:host(:not([disabled])){cursor:pointer}:host([checked]),:host([indeterminate]){--_checkbox-bg:var(--checkbox-bg-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--_checkbox-color:var(--checkbox-color-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([checked]:not([indeterminate])) #checkmark-path,:host([indeterminate]) #indeterminate-path{stroke-dashoffset:0}:host(:focus),:host(:hover){will-change:border,background}:host(:focus) #checkmark-path,:host(:hover) #checkmark-path{will-change:stroke-dashoffset}:host([disabled]){--_checkbox-bg:var(--checkbox-bg-disabled,#0000);--_checkbox-color:var(--checkbox-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));color:var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%)));pointer-events:none}:host([disabled][checked]),:host([disabled][indeterminate]){--_checkbox-bg:var(--checkbox-bg-disabled-checked,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_checkbox-color:var(--checkbox-color-disabled-checked,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}#checkmark{height:var(--checkbox-checkmark-size,.75rem);width:var(--checkbox-checkmark-size,.75rem)}#checkmark-path,#indeterminate-path{stroke-width:var(--checkbox-checkmark-path-width,.3rem);stroke:var(--checkbox-checkmark-stroke-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));stroke-dasharray:var(--checkbox-checkmark-path-dasharray,30);stroke-dashoffset:var(--checkbox-checkmark-path-dasharray,30);transition:var(--checkbox-checkmark-transition,stroke-dashoffset var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)))}#checkmark-path{transition-delay:var(--checkbox-checkmark-path-delay,50ms)}#ripple{transform:var(--checkbox-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{--_checkbox-bg:var(--checkbox-bg,#0000);--_checkbox-color:var(--checkbox-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));display:inline-flex}:host .checkbox{align-items:center;background:var(--_checkbox-bg);border:var(--checkbox-border-config,.125rem solid) currentColor;border-radius:var(--checkbox-border-radius,.375rem);color:var(--_checkbox-color);display:inline-flex;height:var(--checkbox-size,1.25rem);justify-content:center;margin:0 5px;min-width:var(--checkbox-size,1.25rem);outline:none;position:relative;transition:var(--checkbox-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(--checkbox-size,1.25rem)}:host .label{font-size:1.1em}:host(:not([disabled])){cursor:pointer}:host([checked]),:host([indeterminate]){--_checkbox-bg:var(--checkbox-bg-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--_checkbox-color:var(--checkbox-color-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([checked]:not([indeterminate])) #checkmark-path,:host([indeterminate]) #indeterminate-path{stroke-dashoffset:0}:host(:focus),:host(:hover){will-change:border,background}:host(:focus) #checkmark-path,:host(:hover) #checkmark-path{will-change:stroke-dashoffset}:host([disabled]){--_checkbox-bg:var(--checkbox-bg-disabled,#0000);--_checkbox-color:var(--checkbox-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));color:var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%)));pointer-events:none}:host([disabled][checked]),:host([disabled][indeterminate]){--_checkbox-bg:var(--checkbox-bg-disabled-checked,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_checkbox-color:var(--checkbox-color-disabled-checked,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}#checkmark{height:var(--checkbox-checkmark-size,.75rem);width:var(--checkbox-checkmark-size,.75rem)}#checkmark-path,#indeterminate-path{stroke-width:var(--checkbox-checkmark-path-width,.3rem);stroke:var(--checkbox-checkmark-stroke-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));stroke-dasharray:var(--checkbox-checkmark-path-dasharray,30);stroke-dashoffset:var(--checkbox-checkmark-path-dasharray,30);transition:var(--checkbox-checkmark-transition,stroke-dashoffset var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)))}#checkmark-path{transition-delay:var(--checkbox-checkmark-path-delay,50ms)}#ripple{transform:var(--checkbox-ripple-transform,translate(-50%,-50%) scale(1.8))}";
-
-export { css_248z as default, stylesheet };

package/tinkiet/checkbox/index.d.ts

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

package/tinkiet/checkbox/index.js

@@ -1 +0,0 @@
-export { TkCheckbox } from './checkbox.js';

package/tinkiet/dialog/dialog.d.ts

@@ -1,18 +0,0 @@
-import { LitElement } from "lit";
-declare class TkDialog extends LitElement {
-    static styles: import("lit").CSSResult;
-    modal: boolean;
-    open: boolean;
-    blurOverlay: boolean;
-    private resolve;
-    render(): import("lit-html").TemplateResult<1>;
-    updated(props: any): void;
-    show(): Promise<string | boolean>;
-    hide(value?: boolean | string | null): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "tk-dialog": TkDialog;
-    }
-}
-export { TkDialog };

package/tinkiet/dialog/dialog.js

@@ -1,58 +0,0 @@
-import { __decorate } from 'tslib';
-import { LitElement, html, css, unsafeCSS } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import css_248z from './dialog.scss.js';
-
-let TkDialog = class TkDialog extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.modal = false;
-        this.open = false;
-        this.blurOverlay = false;
-    }
-    render() {
-        return html `
-			${this.open
-            ? html `
-						<div class="overlay ${this.blurOverlay ? "blur" : ""}" @click=${() => (this.modal ? null : this.hide())}></div>
-						<div class="container">
-							<slot></slot>
-						</div>
-				  `
-            : ""}
-		`;
-    }
-    updated(props) {
-        if (props.has("open") && this.open)
-            this.dispatchEvent(new Event("did-show"));
-        if (props.has("open") && !this.open)
-            this.dispatchEvent(new Event("did-close"));
-    }
-    show() {
-        this.open = true;
-        return new Promise(resolve => {
-            this.resolve = resolve;
-        });
-    }
-    hide(value = null) {
-        this.open = false;
-        this.resolve(value);
-    }
-};
-TkDialog.styles = css `
-		${unsafeCSS(css_248z)}
-	`;
-__decorate([
-    property({ type: Boolean, attribute: true })
-], TkDialog.prototype, "modal", void 0);
-__decorate([
-    property({ type: Boolean, attribute: true, reflect: true })
-], TkDialog.prototype, "open", void 0);
-__decorate([
-    property({ type: Boolean, attribute: "blur-overlay" })
-], TkDialog.prototype, "blurOverlay", void 0);
-TkDialog = __decorate([
-    customElement("tk-dialog")
-], TkDialog);
-
-export { TkDialog };

package/tinkiet/dialog/dialog.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{display:none;outline:none;position:relative}:host([open]){align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:var(--dialog-z-index,300)}:host([open]) .overlay{background-color:#00000080;bottom:0;left:0;position:absolute;right:0;top:0}:host([open]) .overlay.blur{backdrop-filter:blur(2px)}:host([open]) .container{animation:fade-in .3s forwards;border-radius:var(--border-radius-medium,.25rem);height:100%;margin:0;max-width:100%;overflow-y:auto;overscroll-behavior:contain;padding:1rem;position:fixed;width:fit-content;will-change:transform,opacity}@keyframes fade-in{0%{opacity:0}to{opacity:1}}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:none;outline:none;position:relative}:host([open]){align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:var(--dialog-z-index,300)}:host([open]) .overlay{background-color:#00000080;bottom:0;left:0;position:absolute;right:0;top:0}:host([open]) .overlay.blur{backdrop-filter:blur(2px)}:host([open]) .container{animation:fade-in .3s forwards;border-radius:var(--border-radius-medium,.25rem);height:100%;margin:0;max-width:100%;overflow-y:auto;overscroll-behavior:contain;padding:1rem;position:fixed;width:fit-content;will-change:transform,opacity}@keyframes fade-in{0%{opacity:0}to{opacity:1}}";
-
-export { css_248z as default, stylesheet };

package/tinkiet/dialog/index.d.ts

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

package/tinkiet/dialog/index.js

@@ -1 +0,0 @@
-export { TkDialog } from './dialog.js';

package/tinkiet/drawer/drawer.d.ts

@@ -1,29 +0,0 @@
-import { LitElement } from "lit";
-declare class TkDrawer extends LitElement {
-    static styles: import("lit").CSSResult;
-    _open: boolean;
-    set open(value: boolean);
-    get open(): boolean;
-    over: boolean;
-    openQuery: string;
-    overQuery: string;
-    right: boolean;
-    swipeable: boolean;
-    private $drawer;
-    private mql;
-    private pointerListener;
-    render(): import("lit-html").TemplateResult<1>;
-    updated(props: any): void;
-    protected overMediaQuery(): void;
-    private overMediaQueryListener;
-    hideIfOver(): void;
-    show(): void;
-    hide(): void;
-    toggle(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "tk-drawer": TkDrawer;
-    }
-}
-export { TkDrawer };

package/tinkiet/drawer/drawer.js

@@ -1,152 +0,0 @@
-import { __decorate } from 'tslib';
-import { LitElement, html, css, unsafeCSS } from 'lit';
-import { property, query, customElement } from 'lit/decorators.js';
-import css_248z from './drawer.scss.js';
-import { Direction, Pan, PointerListener, Tap } from 'contactjs';
-
-let TkDrawer = class TkDrawer extends LitElement {
-    constructor() {
-        super(...arguments);
-        this._open = false;
-        this.over = false;
-        this.right = false;
-        this.swipeable = false;
-    }
-    set open(value) {
-        if (value === this._open)
-            return;
-        const oldValue = this._open;
-        this._open = value;
-        this.requestUpdate("open", oldValue);
-        if (this._open)
-            this.dispatchEvent(new Event("did-show"));
-        if (!this._open)
-            this.dispatchEvent(new Event("did-close"));
-    }
-    get open() {
-        return this._open;
-    }
-    render() {
-        return html `
-			<div class="container fi">
-				<slot name="drawer-container"></slot>
-			</div>
-			<div class="overlay" @click=${() => (this.open = false)}></div>
-			<div class="drawer">
-				<div class="drawer-header">
-					<slot name="drawer-header"></slot>
-				</div>
-				<div class="drawer-content">
-					<slot name="drawer-content"></slot>
-				</div>
-				<div class="drawer-footer">
-					<slot name="drawer-footer"></slot>
-				</div>
-			</div>
-		`;
-    }
-    updated(props) {
-        if (props.has("overQuery"))
-            this.overMediaQuery();
-        if (props.has("openQuery")) {
-            if (window.matchMedia(this.openQuery).matches)
-                this.show();
-        }
-        if (props.has("swipeable") && this.swipeable) {
-            var panOptions = {
-                supportedDirections: [Direction.Left, Direction.Right],
-                bubbles: false
-            };
-            var panRecognizer = new Pan(this.$drawer, panOptions);
-            this.pointerListener = new PointerListener(this.$drawer, {
-                DEBUG: true,
-                DEBUG_GESTURES: true,
-                // handleTouchEvents : false,
-                supportedGestures: [Tap, panRecognizer],
-                bubbles: false
-            });
-            this.$drawer.addEventListener("tap", (event) => {
-                var _a;
-                const { x, y } = event.detail.live.srcEvent;
-                const el = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.elementFromPoint(x, y);
-                if (el)
-                    el.click();
-            });
-            this.$drawer.addEventListener("panstart", (event) => {
-                this.$drawer.style.transition = "transform 0ms ease";
-            });
-            this.$drawer.addEventListener("pan", (event) => {
-                var x = event.detail.global.deltaX > 0 ? 0 : event.detail.global.deltaX;
-                var y = 0;
-                var transformString = "translate3d(" + x + "px, " + y + "px, 0)";
-                requestAnimationFrame(_ => {
-                    this.$drawer.style.transform = transformString;
-                });
-            });
-            this.$drawer.addEventListener("panend", (event) => {
-                requestAnimationFrame(_ => {
-                    this.$drawer.style.transition = "";
-                    this.$drawer.style.transform = "";
-                    this.open = event.detail.global.deltaX < -50 ? false : true;
-                });
-            });
-        }
-        if (props.has("swipeable") && !this.swipeable) {
-            this.pointerListener && this.pointerListener.destroy();
-            this.pointerListener = null;
-        }
-    }
-    overMediaQuery() {
-        if (this.mql)
-            this.mql.removeEventListener("change", this.overMediaQueryListener.bind(this));
-        this.mql = window.matchMedia(this.overQuery);
-        this.mql.matches ? this.setAttribute("over", "") : this.removeAttribute("over");
-        this.mql.addEventListener("change", this.overMediaQueryListener.bind(this));
-    }
-    overMediaQueryListener(e) {
-        e.matches ? this.setAttribute("over", "") : this.removeAttribute("over");
-    }
-    hideIfOver() {
-        var _a;
-        if ((this.overQuery && ((_a = this.mql) === null || _a === void 0 ? void 0 : _a.matches)) || this.over)
-            this.open = false;
-    }
-    show() {
-        this.open = true;
-    }
-    hide() {
-        this.open = false;
-    }
-    toggle() {
-        this.open = !this.open;
-    }
-};
-TkDrawer.styles = css `
-		${unsafeCSS(css_248z)}
-	`;
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TkDrawer.prototype, "open", null);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TkDrawer.prototype, "over", void 0);
-__decorate([
-    property({ type: String, attribute: "open-query" })
-], TkDrawer.prototype, "openQuery", void 0);
-__decorate([
-    property({ type: String, attribute: "over-query" })
-], TkDrawer.prototype, "overQuery", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TkDrawer.prototype, "right", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TkDrawer.prototype, "swipeable", void 0);
-__decorate([
-    query("div.drawer")
-], TkDrawer.prototype, "$drawer", void 0);
-TkDrawer = __decorate([
-    customElement("tk-drawer")
-], TkDrawer);
-
-export { TkDrawer };

package/tinkiet/drawer/drawer.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{display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:var(--background,#f7f7f7);color:var(--foreground,#454545);display:flex;flex-direction:column;height:100%;overflow:scroll;position:absolute;top:0;touch-action:pan-y;transform:translateX(-100%);transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);width:var(--drawer-width,256px);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow:scroll}:host([right]) .drawer{right:0;transform:translateX(100%)}.overlay{background-color:rgba(0,0,0,.502);bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{background-color:var(--background,#f7f7f7);height:100%;overflow:scroll;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .drawer{transform:none}:host([open]) .container{padding-left:var(--drawer-width,256px)}:host([open][over]) .container{padding-left:0}:host([open][over]) .overlay{display:block}@media (max-width:var(--drawer-trigger-width,400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:var(--background,#f7f7f7);color:var(--foreground,#454545);display:flex;flex-direction:column;height:100%;overflow:scroll;position:absolute;top:0;touch-action:pan-y;transform:translateX(-100%);transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);width:var(--drawer-width,256px);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow:scroll}:host([right]) .drawer{right:0;transform:translateX(100%)}.overlay{background-color:rgba(0,0,0,.502);bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{background-color:var(--background,#f7f7f7);height:100%;overflow:scroll;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .drawer{transform:none}:host([open]) .container{padding-left:var(--drawer-width,256px)}:host([open][over]) .container{padding-left:0}:host([open][over]) .overlay{display:block}@media (max-width:var(--drawer-trigger-width,400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}";
-
-export { css_248z as default, stylesheet };

package/tinkiet/drawer/index.d.ts

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

package/tinkiet/drawer/index.js

@@ -1 +0,0 @@
-export { TkDrawer } from './drawer.js';

package/tinkiet/form/form.d.ts

@@ -1,15 +0,0 @@
-import { LitElement } from "lit";
-declare class TkForm extends LitElement {
-    value: any;
-    protected createRenderRoot(): Element | ShadowRoot;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    submit(e: Event): void;
-    getFormDataAsObject(): any;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "tk-form": TkForm;
-    }
-}
-export { TkForm };

package/tinkiet/form/form.js

@@ -1,57 +0,0 @@
-import { __decorate } from 'tslib';
-import { LitElement } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-
-let TkForm = class TkForm extends LitElement {
-    createRenderRoot() {
-        return this;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener("submit", this.submit);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener("submit", this.submit);
-    }
-    submit(e) {
-        e.preventDefault();
-        const result = this.getFormDataAsObject();
-        this.dispatchEvent(new CustomEvent("fulfill", { detail: result }));
-    }
-    getFormDataAsObject() {
-        const $form = this.querySelector("form");
-        const result = {};
-        const data = new FormData($form);
-        data.forEach((value, key) => {
-            var _a;
-            const $inputElement = this.querySelector(`[name=${key}]`);
-            if ($inputElement.tagName == "TK-SLIDER") {
-                value = Number(value);
-            }
-            if ($inputElement.tagName == "TK-CHECKBOX" && (value == "on" || value == "true")) {
-                value = true;
-            }
-            if ($inputElement.tagName == "TK-RADIO" && (value == "on" || value == "true")) {
-                value = true;
-            }
-            if (key.indexOf("-") > 0) {
-                const _ks = key.split("-");
-                result[_ks[0]] = (_a = result[_ks[0]]) !== null && _a !== void 0 ? _a : {};
-                result[_ks[0]][_ks[1]] = value;
-            }
-            else {
-                result[key] = value;
-            }
-        });
-        return result;
-    }
-};
-__decorate([
-    property()
-], TkForm.prototype, "value", void 0);
-TkForm = __decorate([
-    customElement("tk-form")
-], TkForm);
-
-export { TkForm };

package/tinkiet/form/index.d.ts

@@ -1 +0,0 @@
-export { TkForm } from "./form";

package/tinkiet/form/index.js

@@ -1 +0,0 @@
-export { TkForm } from './form.js';