tinkiet 0.7.6 → 0.8.2

package/index.js

@@ -0,0 +1,45 @@
+import './accordion/index.js';
+import './badge/index.js';
+import './box/index.js';
+import './button/index.js';
+import './checkbox/index.js';
+import './dialog/index.js';
+import './form/index.js';
+import './icon/index.js';
+import './list-item/index.js';
+import './loading/index.js';
+import './navbar/index.js';
+import './notie/index.js';
+import './pages/index.js';
+import './radio/index.js';
+import './select/index.js';
+import './slider/index.js';
+import './switch/index.js';
+import './tab-group/index.js';
+import './tag/index.js';
+import './textarea/index.js';
+import './textfield/index.js';
+import './theme/index.js';
+export { TkAccordion } from './accordion/accordion.js';
+export { TkBadge } from './badge/badge.js';
+export { TkBox } from './box/box.js';
+export { TkButton } from './button/button.js';
+export { TkCheckbox } from './checkbox/checkbox.js';
+export { TkDialog } from './dialog/dialog.js';
+export { TkForm } from './form/form.js';
+export { TkIcon } from './icon/icon.js';
+export { TkIcons } from './icon/icons.js';
+export { TkListItem } from './list-item/list-item.js';
+export { TkLoading } from './loading/loading.js';
+export { TkNavbar } from './navbar/navbar.js';
+export { TkNotie } from './notie/notie.js';
+export { TkPages } from './pages/pages.js';
+export { TkRadio } from './radio/radio.js';
+export { TkSelect } from './select/select.js';
+export { TkSlider } from './slider/slider.js';
+export { TkSwitch } from './switch/switch.js';
+export { TkTabGroup } from './tab-group/tab-group.js';
+export { TkTag } from './tag/tag.js';
+export { TkTextarea } from './textarea/textarea.js';
+export { TkTextfield } from './textfield/textfield.js';
+export { TkTheme } from './theme/theme.js';

package/list-item/index.d.ts

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

package/list-item/index.js

@@ -0,0 +1 @@
+export { TkListItem } from './list-item.js';

package/list-item/list-item.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from "lit";
+declare class TkListItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    href: string;
+    target: string;
+    ariaLabel: string;
+    protected $ahref: HTMLAnchorElement;
+    render(): import("lit-html").TemplateResult<1>;
+    constructor();
+    firstUpdated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected handleClick(e: Event): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-list-item": TkListItem;
+    }
+}
+export { TkListItem };

package/list-item/list-item.js

@@ -0,0 +1,72 @@
+import { __decorate } from 'tslib';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { property, query, customElement } from 'lit/decorators.js';
+import css_248z from './list-item.scss.js';
+
+let TkListItem = class TkListItem extends LitElement {
+    render() {
+        return html `
+			<slot name="before" @click=${this.handleClick}></slot>
+			<div id="content">
+				<slot></slot>
+			</div>
+			<slot name="after" @click=${this.handleClick}></slot>
+			${this.href
+            ? html `
+						<a tabindex="-1" id="ahref" href="${this.href}" rel="noreferrer" aria-label=${this.ariaLabel}></a>
+				  `
+            : ""}
+		`;
+    }
+    constructor() {
+        super();
+        this.href = "";
+        this.target = "";
+    }
+    firstUpdated() {
+        if (!this.ariaLabel && this.innerText)
+            this.ariaLabel = this.innerText;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("click", this.handleClick.bind(this));
+    }
+    disconnectedCallback() {
+        this.removeEventListener("click", this.handleClick);
+        super.disconnectedCallback();
+    }
+    handleClick(e) {
+        const target = e.target;
+        // In case click cames from a slotted element with href attribute we stop propagation
+        if ((target.tagName == "BUTTON" || target.tagName == "TK-BUTTON") && target.hasAttribute("href")) {
+            // e.preventDefault();
+            //e.stopPropagation();
+        }
+        ;
+        if (this.href && e.isTrusted) {
+            e.stopPropagation();
+            e.preventDefault();
+            this.$ahref.click();
+        }
+    }
+};
+TkListItem.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
+__decorate([
+    property({ attribute: true })
+], TkListItem.prototype, "href", void 0);
+__decorate([
+    property({ attribute: true })
+], TkListItem.prototype, "target", void 0);
+__decorate([
+    property({ attribute: "aria-label" })
+], TkListItem.prototype, "ariaLabel", void 0);
+__decorate([
+    query("#ahref")
+], TkListItem.prototype, "$ahref", void 0);
+TkListItem = __decorate([
+    customElement("tk-list-item")
+], TkListItem);
+
+export { TkListItem };

package/list-item/list-item.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{--text:var(--list-item-color,var(--foreground,#454545));--color:var(--list-item-bg,var(--background,#f7f7f7));align-items:center;background:var(--color);border-radius:var(--list-item-border-radius,var(--border-radius-large,.5rem));color:var(--text);display:flex;outline:none;overflow:hidden;padding:var(--spacing-m,1rem) var(--spacing-m,1rem);position:relative;text-align:left;transition:var(--list-item-transition,background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}:host([clickable]),:host([href]){user-select:none}:host([clickable]:not([active]):not([disabled])),:host([href]:not([active]):not([disabled])){cursor:pointer}:host(:focus),:host(:hover){--color:var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3)));will-change:background,color}:host([active]:focus),:host([active]:hover){--text:var(--primary-darker,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*0.7)));--color:var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3)))}:host([disabled]){--text:var(--shade-dark,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*0.85)));--color:var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%)));opacity:.4;pointer-events:none}:host([active]){--text:var(--primary-darker,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*0.7)));--color:var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3)))}::slotted([slot=after]),::slotted([slot=before]){flex-shrink:0}::slotted([slot=before]){align-self:var(--list-item-left-align-self,center);margin:0 var(--spacing-m,1rem) 0 0}::slotted([slot=after]){align-self:var(--list-item-left-align-self,center);margin:0 0 0 var(--spacing-m,1rem)}#content{display:flex;flex-direction:column;flex-grow:1}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--text:var(--list-item-color,var(--foreground,#454545));--color:var(--list-item-bg,var(--background,#f7f7f7));align-items:center;background:var(--color);border-radius:var(--list-item-border-radius,var(--border-radius-large,.5rem));color:var(--text);display:flex;outline:none;overflow:hidden;padding:var(--spacing-m,1rem) var(--spacing-m,1rem);position:relative;text-align:left;transition:var(--list-item-transition,background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}:host([clickable]),:host([href]){user-select:none}:host([clickable]:not([active]):not([disabled])),:host([href]:not([active]):not([disabled])){cursor:pointer}:host(:focus),:host(:hover){--color:var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3)));will-change:background,color}:host([active]:focus),:host([active]:hover){--text:var(--primary-darker,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*0.7)));--color:var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3)))}:host([disabled]){--text:var(--shade-dark,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*0.85)));--color:var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%)));opacity:.4;pointer-events:none}:host([active]){--text:var(--primary-darker,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*0.7)));--color:var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3)))}::slotted([slot=after]),::slotted([slot=before]){flex-shrink:0}::slotted([slot=before]){align-self:var(--list-item-left-align-self,center);margin:0 var(--spacing-m,1rem) 0 0}::slotted([slot=after]){align-self:var(--list-item-left-align-self,center);margin:0 0 0 var(--spacing-m,1rem)}#content{display:flex;flex-direction:column;flex-grow:1}";
+
+export { css_248z as default, stylesheet };

package/loading/index.d.ts

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

package/loading/index.js

@@ -0,0 +1 @@
+export { TkLoading } from './loading.js';

package/loading/loading.d.ts

@@ -0,0 +1,14 @@
+import { TkBox } from "../box/index";
+declare class TkLoading extends TkBox {
+    static get styles(): import("lit").CSSResult[];
+    circle: boolean;
+    indeterminate: boolean;
+    percent: number;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-loading": TkLoading;
+    }
+}
+export { TkLoading };

package/loading/loading.js

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

@@ -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/navbar/index.d.ts

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

package/navbar/index.js

@@ -0,0 +1 @@
+export { TkNavbar } from './navbar.js';

package/navbar/navbar.d.ts

@@ -0,0 +1,11 @@
+import { TkBox } from "../box/index";
+declare class TkNavbar extends TkBox {
+    static get styles(): import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-navbar": TkNavbar;
+    }
+}
+export { TkNavbar };

package/navbar/navbar.js

@@ -0,0 +1,33 @@
+import { __decorate } from 'tslib';
+import { css, unsafeCSS, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import '../box/index.js';
+import css_248z from './navbar.scss.js';
+import { TkBox } from '../box/box.js';
+
+let TkNavbar = class TkNavbar extends TkBox {
+    static get styles() {
+        return [
+            ...TkBox.styles,
+            css `
+				${unsafeCSS(css_248z)}
+			`
+        ];
+    }
+    render() {
+        return html `
+			<div id="left">
+				<slot name="left"></slot>
+				<slot name="title"></slot>
+			</div>
+			<div id="right">
+				<slot name="right"></slot>
+			</div>
+		`;
+    }
+};
+TkNavbar = __decorate([
+    customElement("tk-navbar")
+], TkNavbar);
+
+export { TkNavbar };

package/navbar/navbar.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:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));--text:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));align-items:center;background:var(--color);color:var(--text);flex-direction:row;justify-content:space-between}: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([fixed]){left:0;position:fixed;right:0;top:0;z-index:var(--navbar-z-index,100)}#left,#right,#title,::slotted([slot=left]),::slotted([slot=right]),::slotted([slot=title]){align-items:center;display:flex;height:100%}#title,::slotted([slot=title]){font-weight:var(--nav-title-font-weight,var(--font-weight-regular,500));margin:var(--nav-title-margin,0 0 0 var(--spacing-l,1.25rem))}";
+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%)));--text:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));align-items:center;background:var(--color);color:var(--text);flex-direction:row;justify-content:space-between}: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([fixed]){left:0;position:fixed;right:0;top:0;z-index:var(--navbar-z-index,100)}#left,#right,#title,::slotted([slot=left]),::slotted([slot=right]),::slotted([slot=title]){align-items:center;display:flex;height:100%}#title,::slotted([slot=title]){font-weight:var(--nav-title-font-weight,var(--font-weight-regular,500));margin:var(--nav-title-margin,0 0 0 var(--spacing-l,1.25rem))}";
+
+export { css_248z as default, stylesheet };

package/notie/index.d.ts

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

package/notie/index.js

@@ -0,0 +1 @@
+export { TkNotie } from './notie.js';

package/notie/notie.d.ts

@@ -0,0 +1,69 @@
+import { TemplateResult } from "lit";
+import { TkBox } from "../box/index";
+interface NotieOptions {
+    background?: string;
+    level?: NotieLevel;
+    color?: string;
+    text?: string;
+    delay?: number;
+    zIndex?: number;
+    template?: TemplateResult;
+    container?: HTMLElement;
+    position?: "bottom" | "top";
+}
+interface NotieForceOptions extends NotieOptions {
+    buttonText?: string;
+}
+interface NotieConfirmOptions extends NotieOptions {
+    confirmText?: string;
+    cancelText?: string;
+}
+interface NotieInputOptions extends NotieConfirmOptions {
+    password?: boolean;
+}
+declare enum NotieType {
+    show = "show",
+    force = "force",
+    confirm = "confirm",
+    input = "input"
+}
+declare enum NotieLevel {
+    success = "success",
+    warning = "warning",
+    error = "error",
+    info = "info",
+    neutral = "neutral"
+}
+declare class TkNotie extends TkBox {
+    static get styles(): import("lit").CSSResult[];
+    persistent: boolean;
+    open: boolean;
+    position: NotieOptions["position"];
+    type: NotieType;
+    level: NotieLevel;
+    delay: number;
+    animationDelay: number;
+    text: string;
+    buttonText: string;
+    confirmText: string;
+    cancelText: string;
+    template: TemplateResult;
+    private $input;
+    private $container;
+    private resolve;
+    render(): TemplateResult<1>;
+    show(): Promise<string | boolean | null>;
+    hide(value: boolean | string | null): void;
+    constructor(text?: string);
+    static show(options: NotieOptions): Promise<boolean | string | null>;
+    static force(options: NotieForceOptions): Promise<boolean | string | null>;
+    static confirm(options: NotieConfirmOptions): Promise<boolean | string | null>;
+    static input(options: NotieInputOptions): Promise<boolean | string | null>;
+    private static getNotie;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-notie": TkNotie;
+    }
+}
+export { TkNotie };

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.8.2",
   "description": "Pragmatic UI Web Components",
   "type": "module",
   "main": "index.js",
@@ -19,18 +19,13 @@
     "component",
     "element"
   ],
-  "scripts": {
-    "clean": "rimraf ./dist",
-    "blib": "rollup -c rollup.config.mjs",
-    "build": "rimraf ./dist && rollup -c rollup.config.mjs"
-  },
   "author": "Cyrille Colin <cyrille.colin@educ.cloud>",
   "license": "MIT",
   "homepage": "https://tinkiet.educ.cloud",
   "dependencies": {
-    "contactjs": "^2.1.3",
-    "lit": "^2.2.7",
-    "tslib": "^2.4.0"
+    "contactjs": "^2.1.5",
+    "lit": "^2.6.1",
+    "tslib": "^2.5.0"
   },
   "contributors": [
     {

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 };