godown 2.4.1 → 2.5.0

package/items/base-button.js

@@ -4,61 +4,135 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { constructCSS, createScope, css, define, html, property, query, unsafeCSS } from "../deps.js";
-import { htmlSlot } from "../tmpl.js";
+import { createScope, define } from "../root.js";
+import { css, html, property, query, unsafeCSS } from "../deps.js";
+import { htmlSlot } from "../lib/templates.js";
+import { constructCSS } from "../lib/utils.js";
 import ItemsSTD from "./std.js";
 const defineName = "base-button";
 const cssvarScope = createScope(defineName);
-const vars = ["--color", "--background", "--box-shadow", "--ghost-color"];
+const shadow1 = "-2px 2px 5px -2px";
+const shadow2 = "2px -2px 5px -2px";
+const linearGradient = "linear-gradient";
+const fff = "#fff";
+const _000 = "#000";
+const vars = ["color", "background", "box-shadow", "ghost-color"];
 const colors = {
-    black: ["#fff", "linear-gradient(45deg, rgb(41 40 40), #2d3034)", "-2px 2px 5px 0px rgb(0 0 0 / 20%), 2px -2px 5px 0 rgb(99 99 99 / 20%)", "rgb(0 0 0 / 80%)"],
-    white: ["#000", "linear-gradient(45deg, rgb(240 240 240 / 85%), rgb(240 240 240 / 70%))", "-2px 2px 5px 0px rgb(255 255 255 / 20%), 2px -2px 5px 0 rgb(165 165 165 / 20%)", "rgb(255 255 255 / 80%)"],
-    red: ["#fff", "linear-gradient(45deg, rgb(207 19 34 / 85%), rgb(250 84 28 / 65%))", "-2px 2px 5px 0px rgb(181 35 44 / 20%), 2px -2px 5px 0 rgb(234 130 174 / 20%)", "rgb(214 11 23 / 80%)"],
-    green: ["#fff", "linear-gradient(45deg, rgb(25 149 56 / 85%), rgb(0 245 36 / 65%))", "-2px 2px 5px 0px rgb(63 179 69 / 20%), 2px -2px 5px 0 rgb(136 225 142 / 20%)", "rgb(60 214 68 / 80%)"],
-    blue: ["#fff", "linear-gradient(45deg, rgb(22 119 255 / 85%), rgb(21 198 198 / 65%))", "-2px 2px 5px 0px rgb(92 182 255 / 20%), 2px -2px 5px 0 rgb(135 232 222 / 20%)", "rgb(42 141 221 / 80%)"],
-    yellow: ["#fff", "linear-gradient(45deg, rgb(223 194 0 / 85%), rgb(230 255 0 / 65%))", "-2px 2px 5px 0px rgb(214 203 55 / 20%), 2px -2px 5px 0 rgb(202 203 137 / 20%)", "rgb(237 224 43 / 80%)"],
+    black: [
+        fff,
+        `${linearGradient}(45deg, rgb(30 30 30), rgb(65 65 65))`,
+        `${shadow1} rgb(0 0 0 / 20%), ${shadow2} rgb(99 99 99 / 20%)`,
+        "rgb(22 20 20)",
+    ],
+    gary: [
+        fff,
+        `${linearGradient}(45deg, rgb(65 65 65),  rgb(100 100 100))`,
+        `${shadow1} rgb(0 0 0 / 20%), ${shadow2} rgb(99 99 99 / 20%)`,
+        "rgb(56 56 56)",
+    ],
+    white: [
+        _000,
+        `${linearGradient}(45deg, rgb(225 225 225), rgb(240 240 240))`,
+        `${shadow1} rgb(255 255 255 / 20%), ${shadow2} rgb(165 165 165 / 20%)`,
+        "rgb(212 212 212)",
+    ],
+    red: [
+        fff,
+        `${linearGradient}(45deg, rgb(215 57 68), rgb(250 141 106))`,
+        `${shadow1} rgb(181 35 44 / 20%), ${shadow2} rgb(234 130 174 / 20%)`,
+        "rgb(214 11 23)",
+    ],
+    green: [
+        _000,
+        `${linearGradient}(45deg, rgb(21 206 71), rgb(99 253 122))`,
+        `${shadow1} rgb(63 179 69 / 20%), ${shadow2} rgb(136 225 142 / 20%)`,
+        "rgb(60 214 68)",
+    ],
+    blue: [
+        fff,
+        `${linearGradient}(45deg, rgb(14 143 255), rgb(121 211 255))`,
+        `${shadow1} rgb(92 182 255 / 20%), ${shadow2} rgb(135 232 222 / 20%)`,
+        "rgb(42 141 221)",
+    ],
+    yellow: [
+        _000,
+        `${linearGradient}(45deg, rgb(255 190 54), rgb(255 249 68))`,
+        `${shadow1} rgb(214 203 55 / 20%), ${shadow2} rgb(202 203 137 / 20%)`,
+        "rgb(255 235 59)",
+    ],
 };
+/**
+ * BaseButton.
+ *
+ * Inspired by Next-ui.
+ */
 let BaseButton = class BaseButton extends ItemsSTD {
     constructor() {
         super(...arguments);
+        /**
+         * Whether to disable this element.
+         */
         this.disabled = false;
-        this.outline = false;
+        /**
+         * Invert font and background color.
+         */
         this.ghost = false;
+        /**
+         * Whether this element is active or not.
+         */
         this.active = false;
+        /**
+         * Enables rounded corners to appear capsule shaped.
+         */
         this.radius = false;
+        /**
+         * Enables scale when mousedown.
+         */
+        this.scale = false;
+        /**
+         * The primary color.
+         */
         this.color = "black";
+        /**
+         * Text inside.
+         */
         this.text = "";
     }
     render() {
         return html `
-      <div>
-        <b>
-          <i></i>
-        </b>
+      <div color="${this.nextColor()}">
+        <b></b>
         <p>${this.text || htmlSlot()}</p>
       </div>
     `;
     }
     focus() {
+        if (this.disabled) {
+            return;
+        }
         this.active = true;
     }
     blur() {
         this.active = false;
     }
     firstUpdated() {
-        if (this.outline) {
-            this.addEvent(window, "click", this._handleClick.bind(this));
+        if (this.scale) {
+            this.addEvent(this, "mousedown", this.focus);
+            this.addEvent(this, "mouseup", (e) => {
+                if (this.disabled) {
+                    return;
+                }
+                this.blur();
+                this._handleModal(e);
+            });
+            this.addEvent(this, "mouseleave", this.blur);
+            return;
         }
         else {
-            this.addEvent(this, "mouseup", this.blur);
+            this.addEvent(document, "click", this._handelClick.bind(this));
         }
-        this.addEvent(this, "click", this._handleClick);
     }
     _handleModal(e) {
-        if (this.disabled) {
-            return;
-        }
-        this.blur();
         const a = this._div.offsetHeight + 1;
         const b = this._div.offsetWidth + 1;
         const size = `${Math.sqrt(a * a + b * b) * 2}px`;
@@ -66,67 +140,88 @@ let BaseButton = class BaseButton extends ItemsSTD {
         this._b.style.width = size;
         this._b.style.height = size;
         this._b.style.transform = translate;
-        this.focus();
+        const i = document.createElement("i");
+        i.style.animationName = "i";
+        this._b.appendChild(i);
+        setTimeout(() => {
+            i.remove();
+        }, 2000);
     }
-    _handleClick(e) {
+    _handelClick(e) {
+        if (this.disabled) {
+            return;
+        }
         if (e.target === this) {
             this._handleModal(e);
+            this.focus();
         }
         else {
             this.blur();
         }
     }
+    /**
+     * Get the color to render, default is this.color.
+     *
+     * @returns New color.
+     *
+     * Colors can be set for different states.
+     *
+     * The matching selector is `[color=COLOR]`.
+     *
+     * @example
+     * ```ts
+     * button.adoptStyles("[color=COLOR1]{...}")
+     * button.adoptStyles("[color=COLOR2]{...}")
+     * button.nextColor = () => state ? COLOR1 : COLOR2
+     * ```
+     */
+    nextColor() {
+        return this.color;
+    }
 };
 BaseButton.styles = [
-    unsafeCSS(constructCSS(vars, colors, (raw) => `:host([color="${raw}"])`, (k, v) => `${cssvarScope}${k}:${v}`)),
+    unsafeCSS(constructCSS(vars, colors, (raw) => `[color=${raw}]`, (k, v) => `${cssvarScope}--${k}:${v}`)),
     css `
       :host {
-        ${cssvarScope}--padding-x: .25em;
-        ${cssvarScope}--padding-y: .075em;
-        ${cssvarScope}--padding: var(${cssvarScope}--padding-y) var(${cssvarScope}--padding-x);
-        ${cssvarScope}--ghost-width: .15em;
+        ${cssvarScope}--padding: .075em .25em;
+        ${cssvarScope}--deg: .075em .25em;
+        ${cssvarScope}--ghost-width: .09em;
         ${cssvarScope}--modal-opacity: .15;
         ${cssvarScope}--modal-opacity-end: 0;
-        ${cssvarScope}--modal-animation-duration: .8s;
-        color: var(${cssvarScope}--color);
-        background: var(${cssvarScope}--background);
-        box-shadow: var(${cssvarScope}--box-shadow);
-        display: inline-flex;
+        ${cssvarScope}--modal-animation-duration: 1s;
+        ${cssvarScope}--focus-scale: .975;
+        transition: 0.1s;
+        display: flex;
         width: fit-content;
-        border-radius: 4px;
+        border-radius: 0.25em;
         cursor: pointer;
+        background: none !important;
       }
 
       :host([disabled]) {
         cursor: not-allowed;
       }
 
+      :host([active][scale]) div {
+        scale: var(${cssvarScope}--focus-scale);
+      }
+
       slot {
-        pointer-events: none;
         display: flow-root;
       }
 
       div {
+        background: var(${cssvarScope}--background);
+        box-shadow: var(${cssvarScope}--box-shadow);
+        color: var(--godown--base-button--color, inherit);
         width: 100%;
         height: 100%;
         position: relative;
         overflow: hidden;
         border-radius: inherit;
-      }
-
-      i {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
+        transition-duration: inherit;
+        transition-property: scale;
         pointer-events: none;
-        border-radius: 50%;
-        transform: translate(0, 0);
-        background: currentColor;
-        opacity: var(${cssvarScope}--modal-opacity-end);
       }
 
       b {
@@ -136,29 +231,47 @@ BaseButton.styles = [
         visibility: hidden;
       }
 
-      :host([active]) i {
-        visibility: visible;
-        animation-name: i;
-        animation-duration: var(${cssvarScope}--modal-animation-duration);
-      }
-
       p {
         padding: var(${cssvarScope}--padding);
         margin: 0;
         user-select: none;
+        transition: 0;
       }
 
       :host([ghost]) p {
         background-image: var(${cssvarScope}--background);
+        margin: calc(-1 * var(${cssvarScope}--ghost-width));
         background-clip: text;
         -webkit-background-clip: text;
         color: transparent;
       }
 
-      :host([ghost]) {
-        ${cssvarScope}--modal-opacity: .2;
+      :host([ghost]) div {
         background: transparent;
-        box-shadow: 0 0 0 var(${cssvarScope}--ghost-width) var(${cssvarScope}--ghost-color);
+        border: var(${cssvarScope}--ghost-width) solid var(${cssvarScope}--ghost-color);
+      }
+
+      :host([radius]) {
+        border-radius: calc(infinity * 1px);
+        ${cssvarScope}--padding: .075em .5em;
+      }
+    `,
+    css `
+      i {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        border-radius: 50%;
+        transform: translate(0, 0);
+        background: currentColor;
+        opacity: var(${cssvarScope}--modal-opacity-end);
+        visibility: visible;
+        animation-duration: min(var(${cssvarScope}--modal-animation-duration), 2s);
       }
 
       :host([ghost]) i {
@@ -170,32 +283,18 @@ BaseButton.styles = [
           transform: scale(0);
           opacity: var(${cssvarScope}--modal-opacity);
         }
-        100% {
+        80% {
           transform: scale(1);
+        }
+        100% {
           opacity: var(${cssvarScope}--modal-opacity-end);
         }
       }
-
-      :host([outline]) {
-        ${cssvarScope}--modal-opacity-end:var( ${cssvarScope}--modal-opacity);
-      }
-
-      :host([outline][active]) {
-        outline: var(--godown--base-button--ghost-color) var(${cssvarScope}--ghost-width) solid;
-      }
-
-      :host([radius]) {
-        border-radius: calc(infinity * 1px);
-        ${cssvarScope}--padding-x: .5em;
-      }
     `,
 ];
 __decorate([
     property({ type: Boolean, reflect: true })
 ], BaseButton.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], BaseButton.prototype, "outline", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], BaseButton.prototype, "ghost", void 0);
@@ -206,14 +305,14 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], BaseButton.prototype, "radius", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ type: Boolean, reflect: true })
+], BaseButton.prototype, "scale", void 0);
+__decorate([
+    property()
 ], BaseButton.prototype, "color", void 0);
 __decorate([
     property()
 ], BaseButton.prototype, "text", void 0);
-__decorate([
-    query("i")
-], BaseButton.prototype, "_i", void 0);
 __decorate([
     query("b")
 ], BaseButton.prototype, "_b", void 0);

package/items/base-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-button.js","sourceRoot":"","sources":["../../src/items/base-button.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"base-button.js","sourceRoot":"","sources":["../../src/items/base-button.ts"],"names":[],"mappings":"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"}

package/items/card-item.d.ts

@@ -1,20 +1,26 @@
 import { type CSSResultGroup } from "../deps.js";
-import { type HTMLTemplate } from "../tmpl.js";
+import { type HTMLTemplate } from "../lib/templates.js";
 import ItemsSTD from "./std.js";
+/**
+ * CardItem renders a card.
+ */
 export declare class CardItem extends ItemsSTD {
-    static styles: CSSResultGroup;
+    /**
+     * Enable rotate.
+     */
     rotate: boolean;
     protected _main: HTMLElement;
     protected _aside: HTMLElement;
+    static styles: CSSResultGroup;
     protected render(): HTMLTemplate;
     protected firstUpdated(): void;
     /**
-     * Cancel the aside offset
+     * Cancel the aside offset.
      */
     reset(): void;
     /**
-     * Offset aside
-     * @param e Mouse move event
+     * Offset aside.
+     * @param e Mouse move event.
      */
     protected _drawRotate(e: MouseEvent): void;
 }

package/items/card-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card-item.d.ts","sourceRoot":"","sources":["../../src/items/card-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,cAAc,EAA+C,MAAM,YAAY,CAAC;AAChH,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACzD,OAAO,QAAQ,MAAM,UAAU,CAAC;AAKhC,qBACa,QAAS,SAAQ,QAAQ;IACpC,MAAM,CAAC,MAAM,iBA+CO;IACS,MAAM,UAAS;IAC7B,SAAS,CAAC,KAAK,EAAG,WAAW,CAAC;IAC7B,SAAS,CAAC,MAAM,EAAG,WAAW,CAAC;IAE/C,SAAS,CAAC,MAAM,IAAI,YAAY;IAOhC,SAAS,CAAC,YAAY;IAUtB;;OAEG;IACH,KAAK;IAKL;;;OAGG;IACH,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,UAAU;CAUpC;AAED,eAAe,QAAQ,CAAC;AAExB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"card-item.d.ts","sourceRoot":"","sources":["../../src/items/card-item.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,cAAc,EAAyB,MAAM,YAAY,CAAC;AAC7E,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAElE,OAAO,QAAQ,MAAM,UAAU,CAAC;AAKhC;;GAEG;AACH,qBACa,QAAS,SAAQ,QAAQ;IACpC;;OAEG;IAC0B,MAAM,UAAS;IAE7B,SAAS,CAAC,KAAK,EAAG,WAAW,CAAC;IAC7B,SAAS,CAAC,MAAM,EAAG,WAAW,CAAC;IAE/C,MAAM,CAAC,MAAM,iBAoEO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAyBhC,SAAS,CAAC,YAAY;IAOtB;;OAEG;IACH,KAAK;IAKL;;;OAGG;IACH,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,UAAU;CAWpC;AAED,eAAe,QAAQ,CAAC;AAExB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/items/card-item.js

@@ -4,41 +4,58 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { createScope, css, cssvarValues, define, html, property, query } from "../deps.js";
-import { htmlSlot } from "../tmpl.js";
+import { createScope, cssvarValues, define } from "../root.js";
+import { css, html, property, query } from "../deps.js";
+import { htmlSlot } from "../lib/templates.js";
+import { ifValue } from "../lib/directives.js";
 import ItemsSTD from "./std.js";
 const defineName = "card-item";
 const cssvarScope = createScope(defineName);
+/**
+ * CardItem renders a card.
+ */
 let CardItem = class CardItem extends ItemsSTD {
     constructor() {
         super(...arguments);
+        /**
+         * Enable rotate.
+         */
         this.rotate = false;
     }
     render() {
+        const HEADER = "header";
+        const FOOTER = "footer";
         return html `<div>
       <aside></aside>
-      <main>${htmlSlot("header")} ${htmlSlot()} ${htmlSlot("footer")}</main>
+      <main>
+        ${ifValue(this.querySlot(HEADER), html `
+            ${htmlSlot(HEADER)}
+            <hr />
+          `)}
+        ${htmlSlot()}
+        ${ifValue(this.querySlot(FOOTER), html `
+            <hr />
+            ${htmlSlot(FOOTER)}
+          `)}
+      </main>
     </div>`;
     }
     firstUpdated() {
         if (this.rotate) {
-            this.addEvent(this._main, "mousemove", (e) => {
-                this._drawRotate(e);
-                this._main.style.transition = "none";
-            });
+            this.addEvent(this._main, "mousemove", this._drawRotate.bind(this));
             this.addEvent(this._aside, "mouseleave", this.reset.bind(this));
         }
     }
     /**
-     * Cancel the aside offset
+     * Cancel the aside offset.
      */
     reset() {
         this._main.style.transition = ".5s";
         this._main.style.transform = "none";
     }
     /**
-     * Offset aside
-     * @param e Mouse move event
+     * Offset aside.
+     * @param e Mouse move event.
      */
     _drawRotate(e) {
         const { left, top, width, height } = this._main.getBoundingClientRect();
@@ -49,6 +66,7 @@ let CardItem = class CardItem extends ItemsSTD {
         const rotateX = -(rotate * (offsetY - height / 2)) / height / 1.5;
         const rotateY = (rotate * (offsetX - width / 2)) / width / 1.5;
         this._main.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+        this._main.style.transition = "none";
     }
 };
 CardItem.styles = [
@@ -58,11 +76,16 @@ CardItem.styles = [
         ${cssvarScope}--offset: .25em;
         ${cssvarScope}--background: var(${cssvarValues.main});
         ${cssvarScope}--wapper-background: none;
-        ${cssvarScope}--outline: 1px solid rgb(var(${cssvarValues.textRGB}) / 12.5%);
-        ${cssvarScope}--box-shadow: 0 0 .5em 0 rgb(var(${cssvarValues.mainRGB}) / 60%);
+        ${cssvarScope}--outline: 0;
+        ${cssvarScope}--box-shadow: 0 .05em .4em 0 rgb(var(${cssvarValues.mainRGB}) / 60%);
+        ${cssvarScope}--hr-width: 100%;
+        ${cssvarScope}--hr-height: .05em;
+        ${cssvarScope}--padding: .75em;
         margin: auto;
         display: block;
         width: fit-content;
+        color: var(${cssvarValues.text});
+        border-radius: 0.2em;
       }
 
       * {
@@ -75,11 +98,13 @@ CardItem.styles = [
         outline: var(${cssvarScope}--outline);
         box-shadow: var(${cssvarScope}--box-shadow);
         background: var(${cssvarScope}--background);
+        z-index: 2;
+        position: relative;
       }
 
       aside {
         box-sizing: content-box;
-        z-index: -1;
+        z-index: 0;
         height: 100%;
         width: 100%;
         position: absolute;
@@ -97,6 +122,20 @@ CardItem.styles = [
       i {
         position: absolute;
       }
+
+      hr {
+        width: var(${cssvarScope}--hr-width);
+        height: var(${cssvarScope}--hr-height);
+        margin: auto;
+        display: block;
+        background: currentColor;
+        opacity: 0.5;
+      }
+
+      slot {
+        display: block;
+        padding: var(${cssvarScope}--padding);
+      }
     `,
 ];
 __decorate([

package/items/card-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-item.js","sourceRoot":"","sources":["../../src/items/card-item.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"card-item.js","sourceRoot":"","sources":["../../src/items/card-item.ts"],"names":[],"mappings":"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"}

package/items/dialog-item.d.ts

@@ -1,21 +1,43 @@
-import { type HTMLTemplate } from "../deps.js";
+import { type PropertyValueMap } from "../deps.js";
+import { type HTMLTemplate } from "../lib/templates.js";
 import ItemsSTD from "./std.js";
-import type { PropertyValueMap } from "lit";
+type Direction5 = "left" | "center" | "right" | "top" | "bottom";
+/**
+ * DialogItem similar to dialog.
+ */
 export declare class DialogItem extends ItemsSTD {
-    static styles: import("lit").CSSResult[];
+    /**
+     * Enable modal.
+     */
     modal: boolean;
+    /**
+     * Whether this element is activated.
+     */
     open: boolean;
+    /**
+     * Enable scale.
+     */
     scale: boolean;
+    /**
+     * Scale gap.
+     */
     gap: number;
+    /**
+     * Exit key, which can be multiple.
+     */
     key: string;
-    call: "left" | "center" | "right" | "top" | "bottom";
+    /**
+     * The direction in which it appears.
+     */
+    direction: Direction5;
     _div: HTMLDivElement;
+    static styles: import("lit").CSSResult[];
     protected render(): HTMLTemplate;
     connectedCallback(): void;
     show(): void;
     showModal(): void;
     close(): void;
-    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    protected updated(changedProperties: PropertyValueMap<this>): void;
     protected _handleWheel(e: any): void;
     protected _handleKeydown(e: KeyboardEvent): void;
     protected _handelSubmit(e: SubmitEvent): void;

package/items/dialog-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-item.d.ts","sourceRoot":"","sources":["../../src/items/dialog-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmC,KAAK,YAAY,EAAmB,MAAM,YAAY,CAAC;AACjG,OAAO,QAAQ,MAAM,UAAU,CAAC;AAChC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAI5C,qBACa,UAAW,SAAQ,QAAQ;IACtC,MAAM,CAAC,MAAM,4BA6EX;IAC0C,KAAK,UAAS;IACd,IAAI,UAAS;IAC5B,KAAK,UAAS;IACf,GAAG,SAAO;IACV,GAAG,SAAY;IACf,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAY;IAC9E,IAAI,EAAE,cAAc,CAAC;IAEnC,SAAS,CAAC,MAAM,IAAI,YAAY;IAMhC,iBAAiB;IAcjB,IAAI;IAIJ,SAAS;IAKT,KAAK;IAIL,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAOtF,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,GAAG;IAgB7B,SAAS,CAAC,cAAc,CAAC,CAAC,EAAE,aAAa;IAOzC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,WAAW;CAKvC;AAED,eAAe,UAAU,CAAC;AAE1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"dialog-item.d.ts","sourceRoot":"","sources":["../../src/items/dialog-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,gBAAgB,EAAS,MAAM,YAAY,CAAC;AAE/E,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,QAAQ,MAAM,UAAU,CAAC;AAEhC,KAAK,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAIjE;;GAEG;AACH,qBACa,UAAW,SAAQ,QAAQ;IACtC;;OAEG;IACyC,KAAK,UAAS;IAC1D;;OAEG;IACyC,IAAI,UAAS;IACzD;;OAEG;IAC0B,KAAK,UAAS;IAC3C;;OAEG;IACyB,GAAG,SAAO;IACtC;;OAEG;IACyB,GAAG,SAAY;IAC3C;;OAEG;IACyB,SAAS,EAAE,UAAU,CAAY;IAE/C,IAAI,EAAE,cAAc,CAAC;IAEnC,MAAM,CAAC,MAAM,4BA6EX;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;IAMhC,iBAAiB;IAcjB,IAAI;IAIJ,SAAS;IAKT,KAAK;IAIL,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAO3D,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,GAAG;IAgB7B,SAAS,CAAC,cAAc,CAAC,CAAC,EAAE,aAAa;IAOzC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,WAAW;CAKvC;AAED,eAAe,UAAU,CAAC;AAE1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}