tinkiet 0.6.2 → 0.7.2

package/{loading → tinkiet/loading}/loading.js

@@ -1,17 +1,19 @@
-import { __decorate, __metadata } from 'tslib';
+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 '../../node_modules/lit/directives/style-map.js';
 import '../box/index.js';
 import css_248z from './loading.scss.js';
 import { TkBox } from '../box/box.js';
+import { styleMap as i } from '../../node_modules/lit-html/directives/style-map.js';
 
 let TkLoading = class TkLoading extends TkBox {
     constructor() {
         super(...arguments);
         this.circle = false;
         this.indeterminate = false;
-        this.value = 0.5;
+        this.percent = 0;
     }
     static get styles() {
         return [
@@ -22,6 +24,7 @@ let TkLoading = class TkLoading extends TkBox {
         ];
     }
     render() {
+        const lineStyle = { width: this.percent + "%" };
         return html `
 			${this.circle
             ? html `
@@ -39,24 +42,21 @@ let TkLoading = class TkLoading extends TkBox {
 				  `
             : html `
 						<div class="line">
-							<div class=${classMap({ indeterminate: this.indeterminate })}></div>
+							<div class=${classMap({ progress: true, indeterminate: this.indeterminate })} style="${i(lineStyle)}"></div>
 						</div>
 				  `}
 		`;
     }
 };
 __decorate([
-    property({ attribute: true, type: Boolean }),
-    __metadata("design:type", Boolean)
+    property({ attribute: true, type: Boolean })
 ], TkLoading.prototype, "circle", void 0);
 __decorate([
-    property({ attribute: true, type: Boolean }),
-    __metadata("design:type", Boolean)
+    property({ attribute: true, type: Boolean })
 ], TkLoading.prototype, "indeterminate", void 0);
 __decorate([
-    property({ attribute: true, type: Number }),
-    __metadata("design:type", Number)
-], TkLoading.prototype, "value", void 0);
+    property({ attribute: true, type: Number })
+], TkLoading.prototype, "percent", void 0);
 TkLoading = __decorate([
     customElement("tk-loading")
 ], TkLoading);

package/tinkiet/loading/loading.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{--color:currentColor;--background-color:var(--tk-loading-background-color,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([accent]){--color:var(--accent)}:host([error]){--color:var(--error)}.circle{animation:rotator 3s linear infinite;display:inline-flex;height:2em;width:2em}.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)}}.line{background-color:var(--background-color);height:.4em;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:currentColor;--background-color:var(--tk-loading-background-color,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([accent]){--color:var(--accent)}:host([error]){--color:var(--error)}.circle{animation:rotator 3s linear infinite;display:inline-flex;height:2em;width:2em}.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)}}.line{background-color:var(--background-color);height:.4em;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/{notie → tinkiet/notie}/notie.d.ts

@@ -52,7 +52,7 @@ declare class TkNotie extends TkBox {
     private $container;
     private resolve;
     render(): TemplateResult<1>;
-    show(): Promise<string | boolean | null>;
+    show(): Promise<string | boolean>;
     hide(value: boolean | string | null): void;
     constructor(text?: string);
     static show(options: NotieOptions): Promise<boolean | string | null>;

package/{notie → tinkiet/notie}/notie.js

@@ -1,11 +1,10 @@
-import { __decorate, __metadata } from 'tslib';
+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';
-import { TkTextfield } from '../textfield/textfield.js';
 
 var TkNotie_1;
 var NotieType;
@@ -24,20 +23,6 @@ var NotieLevel;
     NotieLevel["neutral"] = "neutral";
 })(NotieLevel || (NotieLevel = {}));
 let TkNotie = TkNotie_1 = class TkNotie extends TkBox {
-    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 get styles() {
         return [
             ...TkBox.styles,
@@ -111,6 +96,20 @@ let TkNotie = TkNotie_1 = class TkNotie extends TkBox {
         }, { 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();
@@ -134,74 +133,61 @@ let TkNotie = TkNotie_1 = class TkNotie extends TkBox {
         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 = options.delay ?? 999999999;
+        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 ? options.container.shadowRoot?.appendChild(notie) : window.document.body.appendChild(notie);
+        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(),
-    __metadata("design:type", Boolean)
+    state()
 ], TkNotie.prototype, "persistent", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Boolean)
+    property({ type: Boolean, reflect: true })
 ], TkNotie.prototype, "open", void 0);
 __decorate([
-    property({ reflect: true }),
-    __metadata("design:type", Object)
+    property({ reflect: true })
 ], TkNotie.prototype, "position", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
+    property({ type: String })
 ], TkNotie.prototype, "type", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
+    property({ type: String })
 ], TkNotie.prototype, "level", void 0);
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Number)
+    property({ type: Number })
 ], TkNotie.prototype, "delay", void 0);
 __decorate([
-    property(),
-    __metadata("design:type", String)
+    property()
 ], TkNotie.prototype, "text", void 0);
 __decorate([
-    property(),
-    __metadata("design:type", String)
+    property()
 ], TkNotie.prototype, "buttonText", void 0);
 __decorate([
-    property(),
-    __metadata("design:type", String)
+    property()
 ], TkNotie.prototype, "confirmText", void 0);
 __decorate([
-    property(),
-    __metadata("design:type", String)
+    property()
 ], TkNotie.prototype, "cancelText", void 0);
 __decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
+    property({ type: Object })
 ], TkNotie.prototype, "template", void 0);
 __decorate([
-    query("tk-textfield"),
-    __metadata("design:type", TkTextfield)
+    query("tk-textfield")
 ], TkNotie.prototype, "$input", void 0);
 __decorate([
-    query(".container"),
-    __metadata("design:type", HTMLElement)
+    query(".container")
 ], TkNotie.prototype, "$container", void 0);
 TkNotie = TkNotie_1 = __decorate([
-    customElement("tk-notie"),
-    __metadata("design:paramtypes", [String])
+    customElement("tk-notie")
 ], TkNotie);
 
 export { TkNotie };

package/{pages → tinkiet/pages}/pages.js

@@ -1,5 +1,5 @@
-import { __decorate, __metadata } from 'tslib';
-import { LitElement, css, unsafeCSS, html } from 'lit';
+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';
 
@@ -11,9 +11,6 @@ let TkPages = class TkPages extends LitElement {
         this.handleScroll = false;
         this.scrollHistory = {};
     }
-    static { this.styles = css `
-		${unsafeCSS(css_248z)}
-	`; }
     set page(val) {
         let oldVal = this._page;
         this._page = val;
@@ -37,7 +34,8 @@ let TkPages = class TkPages extends LitElement {
     updated(props) {
         if (props.has("page")) {
             this.querySelectorAll(":scope > *").forEach(el => {
-                const elPageAttribute = el.getAttribute("page") ?? "default";
+                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");
@@ -58,18 +56,17 @@ let TkPages = class TkPages extends LitElement {
         }
     }
 };
+TkPages.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
 __decorate([
-    property({ attribute: "page", type: String }),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
+    property({ attribute: "page", type: String })
 ], TkPages.prototype, "page", null);
 __decorate([
-    property({ attribute: true, type: String }),
-    __metadata("design:type", String)
+    property({ attribute: true, type: String })
 ], TkPages.prototype, "selected", void 0);
 __decorate([
-    property({ attribute: "handle-scroll", type: Boolean }),
-    __metadata("design:type", Boolean)
+    property({ attribute: "handle-scroll", type: Boolean })
 ], TkPages.prototype, "handleScroll", void 0);
 TkPages = __decorate([
     customElement("tk-pages")

package/{radio → tinkiet/radio}/radio.js

@@ -1,5 +1,5 @@
-import { __decorate, __metadata } from 'tslib';
-import { LitElement, css, unsafeCSS, html } from 'lit';
+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';
@@ -15,9 +15,6 @@ let TkRadio = class TkRadio extends LitElement {
         this.disabled = false;
         this.readonly = false;
     }
-    static { this.styles = css `
-		${unsafeCSS(css_248z)}
-	`; }
     render() {
         return html `
 			<tk-box direction="row" align-items="center">
@@ -70,33 +67,29 @@ let TkRadio = class TkRadio extends LitElement {
         setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
     }
 };
+TkRadio.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
 __decorate([
-    property({ attribute: true, type: String }),
-    __metadata("design:type", String)
+    property({ attribute: true, type: String })
 ], TkRadio.prototype, "name", void 0);
 __decorate([
-    property({ attribute: true, type: Boolean, reflect: true }),
-    __metadata("design:type", Boolean)
+    property({ attribute: true, type: Boolean, reflect: true })
 ], TkRadio.prototype, "checked", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
+    property({ type: Boolean })
 ], TkRadio.prototype, "required", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
+    property({ type: Boolean })
 ], TkRadio.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
+    property({ type: Boolean })
 ], TkRadio.prototype, "readonly", void 0);
 __decorate([
-    property({ type: String, reflect: true }),
-    __metadata("design:type", String)
+    property({ type: String, reflect: true })
 ], TkRadio.prototype, "value", void 0);
 __decorate([
-    query("input"),
-    __metadata("design:type", HTMLInputElement)
+    query("input")
 ], TkRadio.prototype, "$input", void 0);
 TkRadio = __decorate([
     customElement("tk-radio")

package/{select → tinkiet/select}/select.js

@@ -1,5 +1,5 @@
-import { __decorate, __metadata } from 'tslib';
-import { LitElement, css, unsafeCSS, html } from 'lit';
+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';
@@ -15,9 +15,6 @@ let TkSelect = class TkSelect extends LitElement {
         this.disabled = false;
         this.readonly = false;
     }
-    static { this.styles = css `
-		${unsafeCSS(css_248z)}
-	`; }
     set value(value) {
         if (!this.$select) {
             this.initialValue = value;
@@ -63,7 +60,8 @@ let TkSelect = class TkSelect extends LitElement {
         this.refreshAttributes();
     }
     firstUpdated() {
-        this.$select = this.shadowRoot?.querySelector("select");
+        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));
@@ -76,72 +74,56 @@ let TkSelect = class TkSelect extends LitElement {
         setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
     }
 };
+TkSelect.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
+    property({ type: String })
 ], TkSelect.prototype, "value", null);
 __decorate([
-    property({ attribute: true, type: String }),
-    __metadata("design:type", String)
+    property({ attribute: true, type: String })
 ], TkSelect.prototype, "name", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
+    property({ type: String })
 ], TkSelect.prototype, "list", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
+    property({ type: String })
 ], TkSelect.prototype, "type", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
+    property({ type: Boolean })
 ], TkSelect.prototype, "required", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
+    property({ type: Boolean })
 ], TkSelect.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
+    property({ type: Boolean })
 ], TkSelect.prototype, "readonly", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
+    property({ type: String })
 ], TkSelect.prototype, "autocomplete", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
+    property({ type: String })
 ], TkSelect.prototype, "pattern", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", String)
+    state()
 ], TkSelect.prototype, "initialValue", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
+    property({ type: String })
 ], TkSelect.prototype, "label", void 0);
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Number)
+    property({ type: Number })
 ], TkSelect.prototype, "min", void 0);
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Number)
+    property({ type: Number })
 ], TkSelect.prototype, "max", void 0);
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Number)
+    property({ type: Number })
 ], TkSelect.prototype, "minLength", void 0);
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Number)
+    property({ type: Number })
 ], TkSelect.prototype, "maxLength", void 0);
 __decorate([
-    eventOptions({ passive: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
+    eventOptions({ passive: true })
 ], TkSelect.prototype, "handleChange", null);
 TkSelect = __decorate([
     customElement("tk-select")

package/{slider → tinkiet/slider}/slider.js

@@ -1,5 +1,5 @@
-import { __decorate, __metadata } from 'tslib';
-import { LitElement, css, unsafeCSS, html } from 'lit';
+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 { uniqueID } from '../utils/unique.js';
@@ -18,9 +18,6 @@ let TkSlider = class TkSlider extends LitElement {
         this.value = this.min;
         this.max = 100;
     }
-    static { this.styles = css `
-		${unsafeCSS(css_248z)}
-	`; }
     render() {
         return html `
 			<div id="container">
@@ -83,65 +80,53 @@ let TkSlider = class TkSlider extends LitElement {
         });
     }
 };
+TkSlider.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
 __decorate([
-    property({ attribute: true, type: String }),
-    __metadata("design:type", String)
+    property({ attribute: true, type: String })
 ], TkSlider.prototype, "name", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
+    property({ type: String })
 ], TkSlider.prototype, "list", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
+    property({ type: Boolean })
 ], TkSlider.prototype, "required", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
+    property({ type: Boolean })
 ], TkSlider.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
+    property({ type: Boolean })
 ], TkSlider.prototype, "readonly", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
+    property({ type: String })
 ], TkSlider.prototype, "autocomplete", void 0);
 __decorate([
-    property({ type: Boolean, attribute: "thumblabel" }),
-    __metadata("design:type", Boolean)
+    property({ type: Boolean, attribute: "thumblabel" })
 ], TkSlider.prototype, "thumbLabel", void 0);
 __decorate([
-    property({ type: Boolean, attribute: "thumblabel-persist" }),
-    __metadata("design:type", Boolean)
+    property({ type: Boolean, attribute: "thumblabel-persist" })
 ], TkSlider.prototype, "thumbLabelPersist", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
+    property({ type: String })
 ], TkSlider.prototype, "label", void 0);
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Number)
+    property({ type: Number })
 ], TkSlider.prototype, "min", void 0);
 __decorate([
-    property({ type: Number, reflect: true }),
-    __metadata("design:type", Number)
+    property({ type: Number, reflect: true })
 ], TkSlider.prototype, "value", void 0);
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Number)
+    property({ type: Number })
 ], TkSlider.prototype, "max", void 0);
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Number)
+    property({ type: Number })
 ], TkSlider.prototype, "step", void 0);
 __decorate([
-    query("#slider"),
-    __metadata("design:type", HTMLInputElement)
+    query("#slider")
 ], TkSlider.prototype, "$slider", void 0);
 __decorate([
-    query(".hidden-input"),
-    __metadata("design:type", HTMLInputElement)
+    query(".hidden-input")
 ], TkSlider.prototype, "$input", void 0);
 TkSlider = __decorate([
     customElement("tk-slider")