godown 3.0.0-canary.0 → 3.0.0-canary.2

package/dev/components/switch.js

@@ -0,0 +1,183 @@
+import { __decorate } from "tslib";
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { css, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
+import SuperInput from "../core/super-input.js";
+const protoName = "switch";
+const cssScope = scopePrefix(protoName);
+/**
+ * {@linkcode Switch} renders a switch.
+ *
+ * The switch is rectangular by default,
+ * set the round property to rounded switch.
+ *
+ * @category input
+ */
+let Switch = class Switch extends SuperInput {
+    constructor() {
+        super(...arguments);
+        /**
+         * Border style.
+         */
+        this.round = false;
+        /**
+         * Whether this element is selected or not.
+         */
+        this.checked = false;
+        /**
+         * Whether this element is disabled or not.
+         */
+        this.disabled = false;
+        /**
+         * Parsed by JSON.parse to checked.
+         */
+        this.default = "false";
+        /**
+         * Input value.
+         */
+        this.value = "on";
+    }
+    render() {
+        return html `<div part="root" class="${this.round ? "round" : "rect"}">
+      <input
+        part="input"
+        @change="${this._handleChange}"
+        ?disabled="${this.disabled}"
+        ?checked="${this.checked}"
+        name="${this.name}"
+        id="${this.makeId}"
+        type="checkbox"
+      >
+      <span class="${this.checked}">
+      </span>
+    </div>`;
+    }
+    reset() {
+        this.checked = this.default === "true";
+        this._input.checked = this.checked;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.checked) {
+            this.default = "true";
+        }
+        if (this.default === "true") {
+            this.checked = true;
+        }
+    }
+    _handleChange() {
+        this.checked = this._input.checked;
+        this.dispatchEvent(new CustomEvent("input", { detail: this.checked, bubbles: true, composed: true }));
+        this.dispatchEvent(new CustomEvent("change", { detail: this.checked, composed: true }));
+    }
+    namevalue() {
+        return [this.name, this.checked];
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Switch.prototype, "round", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Switch.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Switch.prototype, "disabled", void 0);
+__decorate([
+    property()
+], Switch.prototype, "default", void 0);
+__decorate([
+    property()
+], Switch.prototype, "value", void 0);
+__decorate([
+    query("input")
+], Switch.prototype, "_input", void 0);
+Switch = __decorate([
+    godown(protoName),
+    styles(css `
+    :host {
+      ${cssScope}-width: 3em;
+      ${cssScope}-height: calc(var(${cssScope}-width) / 2);
+      ${cssScope}-handle-size: 1.25em;
+      ${cssScope}-transition: .2s ease-in-out;
+      background: var(${cssGlobalVars.input}-background);
+      width: var(${cssScope}-width);
+      height: var(${cssScope}-height);
+      display: inline-block;
+      vertical-align: bottom;
+      border-radius: 0;
+    }
+
+    [part="root"],
+    span {
+      transition: var(${cssScope}-transition);
+    }
+
+    [part="root"] {
+      border-radius: inherit;
+      position: relative;
+      height: inherit;
+    }
+
+    [part="root"],
+    input {
+      width: 100%;
+    }
+
+    input {
+      margin: 0;
+      height: 100%;
+      outline: none;
+      appearance: none;
+    }
+
+    span {
+      height: 100%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      left: 0;
+      width: 50%;
+      pointer-events: none;
+      border-radius: inherit;
+    }
+
+    :host([round]) {
+      border-radius: calc(var(${cssScope}-height) / 2);
+    }
+
+    :host([checked]) span {
+      transform: translateX(100%);
+    }
+
+    .rect .true {
+      background: var(${cssGlobalVars.active});
+    }
+
+    .rect .false {
+      background: var(${cssGlobalVars.passive});
+    }
+
+    .round span::after{
+      --size: var(${cssScope}-handle-size);
+      content:"";
+      border-radius: 100%;
+      background: var(--godown--input-control);
+      width: var(--size);
+      height: var(--size);
+    }
+
+    .round {
+      background: var(${cssGlobalVars.passive});
+    }
+
+    :host([checked]) .round {
+      background: var(${cssGlobalVars.active});
+    }
+  `)
+], Switch);
+export default Switch;
+//# sourceMappingURL=switch.js.map

package/dev/components/switch.js.map

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

package/dev/components/text.d.ts

@@ -0,0 +1,19 @@
+import { GlobalStyle } from "../core/global-style.js";
+/**
+ * {@linkcode Text} renders nowrap text.
+ *
+ * @category display
+ */
+declare class Text extends GlobalStyle {
+    /**
+     * Underline behavior.
+     */
+    underline: "none" | "hover" | "active" | "always";
+    /**
+     * Set background-clip to text.
+     */
+    clip: boolean;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export default Text;
+//# sourceMappingURL=text.d.ts.map

package/dev/components/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/components/text.ts"],"names":[],"mappings":"AAOA,OAAO,EAAiB,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAMlF;;;;GAIG;AACH,cAiDM,IAAK,SAAQ,WAAW;IAC5B;;OAEG;IAEH,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAU;IAE3D;;OAEG;IAEH,IAAI,EAAE,OAAO,CAAC;IAEd,SAAS,CAAC,MAAM;CAYjB;AAED,eAAe,IAAI,CAAC"}

package/dev/components/text.js

@@ -0,0 +1,93 @@
+import { __decorate } from "tslib";
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { classList } from "@godown/element/directives/class-list.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+const protoName = "text";
+const cssScope = scopePrefix(protoName);
+/**
+ * {@linkcode Text} renders nowrap text.
+ *
+ * @category display
+ */
+let Text = class Text extends GlobalStyle {
+    constructor() {
+        super(...arguments);
+        /**
+         * Underline behavior.
+         */
+        this.underline = "none";
+    }
+    render() {
+        return html `<span
+      part="root"
+      class="${classList(this.underline, {
+            clip: this.clip,
+        })}"
+    >
+      ${htmlSlot()}
+    </span>`;
+    }
+};
+__decorate([
+    property()
+], Text.prototype, "underline", void 0);
+__decorate([
+    property({ type: Boolean })
+], Text.prototype, "clip", void 0);
+Text = __decorate([
+    godown(protoName),
+    styles(css `
+    :host {
+      ${cssScope}--color: currentColor;
+      ${cssScope}--color-hover: currentColor;
+      ${cssScope}--color-active: currentColor;
+      display: inline-block;
+      text-overflow: ellipsis;
+      overflow-wrap: break-word;
+    }
+
+    span {
+      white-space: nowrap;
+      width: 100%;
+      vertical-align: bottom;
+      display: inline-block;
+      text-overflow: inherit;
+      overflow-wrap: inherit;
+      overflow: hidden;
+      color: var(${cssScope}--color);
+    }
+
+    span:hover {
+      color: var(${cssScope}--color-hover, var(${cssScope}--color));
+    }
+
+    span:active {
+      color: var(${cssScope}--color-active, var(${cssScope}--color));
+    }
+
+    .hover:hover,
+    .active:active,
+    .always {
+      text-decoration: underline;
+    }
+
+    .none {
+      text-decoration: none;
+    }
+
+    .clip{
+      background: var(${cssGlobalVars.clipBackground});
+      display: inline-block;
+      color: transparent;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      -webkit-background-clip: text;
+    }
+`)
+], Text);
+export default Text;
+//# sourceMappingURL=text.js.map

package/dev/components/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../src/components/text.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAElF,MAAM,SAAS,GAAG,MAAM,CAAC;AAEzB,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;;;GAIG;AAkDH,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,WAAW;IAA9B;;QACE;;WAEG;QAEH,cAAS,GAA2C,MAAM,CAAC;IAoB7D,CAAC;IAZW,MAAM;QACd,OAAO,IAAI,CAAA;;eAGT,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE;YACxB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CACH;;QAEI,QAAQ,EAAE;YACN,CAAC;IACX,CAAC;CACF,CAAA;AApBC;IADC,QAAQ,EAAE;uCACgD;AAM3D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kCACd;AAXV,IAAI;IAjDT,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC,GAAG,CAAA;;QAEH,QAAQ;QACR,QAAQ;QACR,QAAQ;;;;;;;;;;;;;;mBAcG,QAAQ;;;;mBAIR,QAAQ,sBAAsB,QAAQ;;;;mBAItC,QAAQ,uBAAuB,QAAQ;;;;;;;;;;;;;;wBAclC,aAAa,CAAC,cAAc;;;;;;;CAOnD,CAAC;GACI,IAAI,CAyBT;AAED,eAAe,IAAI,CAAC"}

package/dev/components/time.d.ts

@@ -0,0 +1,53 @@
+import { type PropertyValues } from "lit";
+import { GlobalStyle } from "../core/global-style.js";
+/**
+ * {@linkcode Time} renders a formatting time.
+ *
+ * @category display
+ */
+declare class Time extends GlobalStyle {
+    /**
+     * Cancels the next character formatting.
+     */
+    escape: string;
+    /**
+     * Format strings.
+     * {@linkcode Time.fmt}
+     */
+    format: string;
+    /**
+     * Time.
+     */
+    time: Date;
+    /**
+     * If there is a value, update every gap or timeout.
+     */
+    timeout: number;
+    /**
+     * The number of milliseconds that change with each update.
+     */
+    gap: number;
+    timeoutId: number;
+    protected render(): string;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
+    startTimeout(): number;
+    /**
+     * Y for year\
+     * M for month\
+     * D for day\
+     * h for hour\
+     * m for minute\
+     * s for second\
+     * S for milli second\
+     * Z for time zone.
+     *
+     * @param fm Format string.
+     * @param tm Time.
+     * @returns Format result
+     */
+    static fmt(fm: string, tm: Date, em: string): string;
+}
+export default Time;
+//# sourceMappingURL=time.d.ts.map

package/dev/components/time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../src/components/time.ts"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG/C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItD;;;;GAIG;AACH,cAEM,IAAK,SAAQ,WAAW;IAC5B;;OAEG;IAEH,MAAM,SAAO;IACb;;;OAGG;IAEH,MAAM,SAA8B;IACpC;;OAEG;IAEH,IAAI,OAAc;IAClB;;OAEG;IAEH,OAAO,SAAK;IACZ;;OAEG;IAEH,GAAG,SAAK;IAER,SAAS,EAAE,MAAM,CAAC;IAElB,SAAS,CAAC,MAAM,IAAI,MAAM;IAI1B,SAAS,CAAC,YAAY;IAMtB,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAS1D,oBAAoB;IAIpB,YAAY;IAMZ;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM;CAwCrD;AAED,eAAe,IAAI,CAAC"}

package/dev/components/time.js

@@ -0,0 +1,136 @@
+var Time_1;
+import { __decorate } from "tslib";
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { css } from "lit";
+import { property } from "lit/decorators.js";
+import { GlobalStyle } from "../core/global-style.js";
+const protoName = "time";
+/**
+ * {@linkcode Time} renders a formatting time.
+ *
+ * @category display
+ */
+let Time = Time_1 = class Time extends GlobalStyle {
+    constructor() {
+        super(...arguments);
+        /**
+         * Cancels the next character formatting.
+         */
+        this.escape = "%";
+        /**
+         * Format strings.
+         * {@linkcode Time.fmt}
+         */
+        this.format = "YYYY-MM-DD hh:mm:ss UTFZ";
+        /**
+         * Time.
+         */
+        this.time = new Date();
+        /**
+         * If there is a value, update every gap or timeout.
+         */
+        this.timeout = 0;
+        /**
+         * The number of milliseconds that change with each update.
+         */
+        this.gap = 0;
+    }
+    render() {
+        return Time_1.fmt(this.format, this.time, this.escape);
+    }
+    firstUpdated() {
+        if (this.timeout) {
+            this.timeoutId = this.startTimeout();
+        }
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("timeout")) {
+            clearInterval(this.timeoutId);
+            if (this.timeout) {
+                this.timeoutId = this.startTimeout();
+            }
+        }
+    }
+    disconnectedCallback() {
+        clearInterval(this.timeoutId);
+    }
+    startTimeout() {
+        return window.setInterval(() => {
+            this.time = new Date(this.time.getTime() + (this.gap || this.timeout));
+        }, Math.abs(this.timeout));
+    }
+    /**
+     * Y for year\
+     * M for month\
+     * D for day\
+     * h for hour\
+     * m for minute\
+     * s for second\
+     * S for milli second\
+     * Z for time zone.
+     *
+     * @param fm Format string.
+     * @param tm Time.
+     * @returns Format result
+     */
+    static fmt(fm, tm, em) {
+        if (!fm) {
+            return fm;
+        }
+        tm = typeof tm === "string" ? new Date(tm) : tm;
+        if (isNaN(tm.getTime())) {
+            return fm;
+        }
+        const rest = [];
+        const replaced = `${em}${em}`;
+        fm = fm.replace(new RegExp(`${em}([ZYMDhmsS${em}])`, "g"), (_, p1) => {
+            rest.push(p1);
+            return replaced;
+        });
+        function formatNumber(n, max = 2) {
+            return n.toString().padStart(max, "0").split("");
+        }
+        const z = tm.getTimezoneOffset() / -60;
+        const switcher = {
+            Z: [z >= 0 ? "+" + z.toString() : z.toString()],
+            Y: tm.getFullYear().toString().split(""),
+            M: formatNumber(tm.getMonth() + 1),
+            D: formatNumber(tm.getDate()),
+            h: formatNumber(tm.getHours()),
+            m: formatNumber(tm.getMinutes()),
+            s: formatNumber(tm.getSeconds()),
+            S: formatNumber(tm.getMilliseconds(), 3),
+        };
+        const result = [];
+        for (const f of fm.split("").reverse()) {
+            const s = switcher[f]?.pop();
+            result.push(s ? s : f);
+        }
+        return result
+            .reverse()
+            .join("")
+            .replace(new RegExp(replaced, "g"), () => rest.shift());
+    }
+};
+__decorate([
+    property()
+], Time.prototype, "escape", void 0);
+__decorate([
+    property()
+], Time.prototype, "format", void 0);
+__decorate([
+    property({ type: Object })
+], Time.prototype, "time", void 0);
+__decorate([
+    property({ type: Number })
+], Time.prototype, "timeout", void 0);
+__decorate([
+    property({ type: Number })
+], Time.prototype, "gap", void 0);
+Time = Time_1 = __decorate([
+    godown(protoName),
+    styles(css `:host{text-align: center;}`)
+], Time);
+export default Time;
+//# sourceMappingURL=time.js.map

package/dev/components/time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.js","sourceRoot":"","sources":["../../src/components/time.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,GAAG,EAAuB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,SAAS,GAAG,MAAM,CAAC;AAEzB;;;;GAIG;AAGH,IAAM,IAAI,YAAV,MAAM,IAAK,SAAQ,WAAW;IAA9B;;QACE;;WAEG;QAEH,WAAM,GAAG,GAAG,CAAC;QACb;;;WAGG;QAEH,WAAM,GAAG,0BAA0B,CAAC;QACpC;;WAEG;QAEH,SAAI,GAAG,IAAI,IAAI,EAAE,CAAC;QAClB;;WAEG;QAEH,YAAO,GAAG,CAAC,CAAC;QACZ;;WAEG;QAEH,QAAG,GAAG,CAAC,CAAC;IAuFV,CAAC;IAnFW,MAAM;QACd,OAAO,MAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACvD,CAAC;IAES,YAAY;QACpB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACvC,CAAC;IACH,CAAC;IAES,OAAO,CAAC,iBAAiC;QACjD,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YACrC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAC9B,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;YACvC,CAAC;QACH,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAChC,CAAC;IAED,YAAY;QACV,OAAO,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE;YAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QACzE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7B,CAAC;IAED;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,GAAG,CAAC,EAAU,EAAE,EAAQ,EAAE,EAAU;QACzC,IAAI,CAAC,EAAE,EAAE,CAAC;YACR,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,EAAE,GAAG,OAAO,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAChD,IAAI,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC;YACxB,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,MAAM,IAAI,GAAG,EAAE,CAAC;QAChB,MAAM,QAAQ,GAAG,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC;QAC9B,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE;YACnE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACd,OAAO,QAAQ,CAAC;QAClB,CAAC,CAAC,CAAC;QAEH,SAAS,YAAY,CAAC,CAAS,EAAE,GAAG,GAAG,CAAC;YACtC,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QACnD,CAAC;QAED,MAAM,CAAC,GAAG,EAAE,CAAC,iBAAiB,EAAE,GAAG,CAAC,EAAE,CAAC;QACvC,MAAM,QAAQ,GAA6B;YACzC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;YAC/C,CAAC,EAAE,EAAE,CAAC,WAAW,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;YACxC,CAAC,EAAE,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;YAClC,CAAC,EAAE,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC;YAC7B,CAAC,EAAE,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC;YAC9B,CAAC,EAAE,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;YAChC,CAAC,EAAE,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;YAChC,CAAC,EAAE,YAAY,CAAC,EAAE,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;SACzC,CAAC;QACF,MAAM,MAAM,GAAa,EAAE,CAAC;QAC5B,KAAK,MAAM,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC;YACvC,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC;YAC7B,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACzB,CAAC;QACD,OAAO,MAAM;aACV,OAAO,EAAE;aACT,IAAI,CAAC,EAAE,CAAC;aACR,OAAO,CAAC,IAAI,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAC5D,CAAC;CACF,CAAA;AA5GC;IADC,QAAQ,EAAE;oCACE;AAMb;IADC,QAAQ,EAAE;oCACyB;AAKpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kCACT;AAKlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACf;AAKZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iCACnB;AA1BJ,IAAI;IAFT,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC,GAAG,CAAA,4BAA4B,CAAC;GAClC,IAAI,CAiHT;AAED,eAAe,IAAI,CAAC"}

package/dev/components/tooltip.d.ts

@@ -0,0 +1,38 @@
+import SuperOpenable, { type Direction8 } from "../core/super-openable.js";
+/**
+ * {@linkcode Tooltip} provide tooltip for slot elements.
+ *
+ * If it has the tip property, ignore the slot tip.
+ *
+ * @slot tip - Tip element.
+ * @slot - Content.
+ * @category feedback
+ */
+declare class Tooltip extends SuperOpenable {
+    /**
+     * Tip text, if there is a value, the slot will be ignored.
+     */
+    tip: string;
+    /**
+     * Direction of opening the tip.
+     */
+    direction: Direction8;
+    /**
+     * Content alignment.
+     */
+    align: "center" | "flex-start" | "flex-end" | "start" | "end";
+    /**
+     * If true, allow penetration of the tip.
+     */
+    propagation: boolean;
+    static aligns: {
+        start: string;
+        end: string;
+        center: string;
+        "flex-start": string;
+        "flex-end": string;
+    };
+    protected render(): import("lit").TemplateResult<1>;
+}
+export default Tooltip;
+//# sourceMappingURL=tooltip.d.ts.map

package/dev/components/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.ts"],"names":[],"mappings":"AAOA,OAAO,aAAa,EAAE,EAAE,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAK3E;;;;;;;;GAQG;AACH,cAmDM,OAAQ,SAAQ,aAAa;IACjC;;OAEG;IAEH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IAEH,SAAS,EAAE,UAAU,CAAS;IAC9B;;OAEG;IAEH,KAAK,EAAE,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,OAAO,GAAG,KAAK,CAAY;IAEzE;;OAEG;IAEH,WAAW,EAAE,OAAO,CAAC;IAErB,MAAM,CAAC,MAAM;;;;;;MAMX;IAEF,SAAS,CAAC,MAAM;CAYjB;AAED,eAAe,OAAO,CAAC"}

package/dev/components/tooltip.js

@@ -0,0 +1,114 @@
+var Tooltip_1;
+import { __decorate } from "tslib";
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
+import SuperOpenable from "../core/super-openable.js";
+const protoName = "tooltip";
+const cssScope = scopePrefix(protoName);
+/**
+ * {@linkcode Tooltip} provide tooltip for slot elements.
+ *
+ * If it has the tip property, ignore the slot tip.
+ *
+ * @slot tip - Tip element.
+ * @slot - Content.
+ * @category feedback
+ */
+let Tooltip = Tooltip_1 = class Tooltip extends SuperOpenable {
+    constructor() {
+        super(...arguments);
+        /**
+         * Direction of opening the tip.
+         */
+        this.direction = "top";
+        /**
+         * Content alignment.
+         */
+        this.align = "center";
+    }
+    render() {
+        const align = Tooltip_1.aligns[this.align] || "inherit";
+        return html `<div part="root" style="justify-content:${align};align-items:${align}">
+      ${htmlSlot()}
+      <div part="tip" direction="${this.direction}" style="pointer-events:${this.propagation ? "none" : "all"}">
+    ${this.tip
+            ? html `<span class="passive">${this.tip}</span>`
+            : htmlSlot("tip")}</div>
+    </div>`;
+    }
+};
+Tooltip.aligns = {
+    start: "flex-start",
+    end: "flex-end",
+    center: "center",
+    "flex-start": "flex-start",
+    "flex-end": "flex-end",
+};
+__decorate([
+    property()
+], Tooltip.prototype, "tip", void 0);
+__decorate([
+    property()
+], Tooltip.prototype, "direction", void 0);
+__decorate([
+    property()
+], Tooltip.prototype, "align", void 0);
+__decorate([
+    property({ type: Boolean })
+], Tooltip.prototype, "propagation", void 0);
+Tooltip = Tooltip_1 = __decorate([
+    godown(protoName),
+    styles(css `
+    :host {
+      ${cssScope}--tip-background: var(${cssGlobalVars.background});
+      display: inline-block;
+      width: fit-content;
+    }
+
+    [part="root"] {
+      display: flex;
+      position: relative;
+      transition: inherit;
+      border-radius: inherit;
+    }
+
+    [part="tip"] {
+      width: fit-content;
+      height: fit-content;
+      position: absolute;
+      visibility: hidden;
+      transition: inherit;
+      user-select: none;
+    }
+
+    :host([open]) [part="tip"],
+    :host(:hover) [part="tip"],
+    [part="tip"]:hover {
+      visibility: visible;
+    }
+
+    .passive{
+      background: var(${cssScope}--tip-background);
+      padding: 0 .5em;
+    }
+  `, css `
+    [direction^="top"] {
+      bottom: 100%;
+    }
+    [direction^="bottom"] {
+      top: 100%;
+    }
+    [direction$="right"] {
+      left: 100%;
+    }
+    [direction$="left"] {
+      right: 100%;
+    }
+  `)
+], Tooltip);
+export default Tooltip;
+//# sourceMappingURL=tooltip.js.map

package/dev/components/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../src/components/tooltip.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,aAAkC,MAAM,2BAA2B,CAAC;AAE3E,MAAM,SAAS,GAAG,SAAS,CAAC;AAC5B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;;;;;;;GAQG;AAoDH,IAAM,OAAO,eAAb,MAAM,OAAQ,SAAQ,aAAa;IAAnC;;QAME;;WAEG;QAEH,cAAS,GAAe,KAAK,CAAC;QAC9B;;WAEG;QAEH,UAAK,GAA2D,QAAQ,CAAC;IA4B3E,CAAC;IAZW,MAAM;QACd,MAAM,KAAK,GAAG,SAAO,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC;QACtD,OAAO,IAAI,CAAA,2CAA2C,KAAK,gBAAgB,KAAK;QAC5E,QAAQ,EAAE;mCACiB,IAAI,CAAC,SAAS,2BAA2B,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK;MAEvG,IAAI,CAAC,GAAG;YACN,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,GAAG,SAAS;YAChD,CAAC,CAAC,QAAQ,CAAC,KAAK,CACpB;WACO,CAAC;IACV,CAAC;;AAnBM,cAAM,GAAG;IACd,KAAK,EAAE,YAAY;IACnB,GAAG,EAAE,UAAU;IACf,MAAM,EAAE,QAAQ;IAChB,YAAY,EAAE,YAAY;IAC1B,UAAU,EAAE,UAAU;CACvB,AANY,CAMX;AAxBF;IADC,QAAQ,EAAE;oCACC;AAKZ;IADC,QAAQ,EAAE;0CACmB;AAK9B;IADC,QAAQ,EAAE;sCAC8D;AAMzE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACP;AArBjB,OAAO;IAnDZ,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CACL,GAAG,CAAA;;QAEG,QAAQ,yBAAyB,aAAa,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA4BzC,QAAQ;;;GAG7B,EACD,GAAG,CAAA;;;;;;;;;;;;;GAaF,CACF;GACK,OAAO,CA2CZ;AAED,eAAe,OAAO,CAAC"}