godown 3.0.0-canary.0 → 3.0.0-canary.10

package/dev/components/switch.d.ts

@@ -0,0 +1,39 @@
+import SuperInput from "../core/super-input.js";
+/**
+ * {@linkcode Switch} renders a switch.
+ *
+ * The switch is rectangular by default,
+ * set the round property to rounded switch.
+ *
+ * @category input
+ */
+declare class Switch extends SuperInput {
+    /**
+     * Display rounded.
+     */
+    round: boolean;
+    /**
+     * Whether this element is selected or not.
+     */
+    checked: boolean;
+    /**
+     * Disable this element.
+     */
+    disabled: boolean;
+    /**
+     * Default checked state.
+     */
+    default: string;
+    /**
+     * Input value.
+     */
+    value: string;
+    protected _input: HTMLInputElement;
+    protected render(): import("lit").TemplateResult<1>;
+    reset(): void;
+    connectedCallback(): void;
+    protected _handleChange(): void;
+    namevalue(): [string, boolean];
+}
+export default Switch;
+//# sourceMappingURL=switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/components/switch.ts"],"names":[],"mappings":"AAMA,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAKhD;;;;;;;GAOG;AACH,cAqFM,MAAO,SAAQ,UAAU;IAC7B;;OAEG;IAEH,KAAK,UAAS;IAEd;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,SAAW;IAElB;;OAEG;IAEH,KAAK,SAAQ;IAGb,SAAS,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAEnC,SAAS,CAAC,MAAM;IAehB,KAAK;IAKL,iBAAiB;IAUjB,SAAS,CAAC,aAAa;IAMvB,SAAS,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;CAG/B;AAED,eAAe,MAAM,CAAC"}

package/dev/components/switch.js

@@ -0,0 +1,182 @@
+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);
+        /**
+         * Display rounded.
+         */
+        this.round = false;
+        /**
+         * Whether this element is selected or not.
+         */
+        this.checked = false;
+        /**
+         * Disable this element.
+         */
+        this.disabled = false;
+        /**
+         * Default checked state.
+         */
+        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 part="handle" 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}-handle-space: .125em;
+      ${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 {
+      opacity: 0;
+      height: 100%;
+      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 {
+      left: 50%;
+    }
+
+    .rect .true {
+      background: var(${cssGlobalVars.active});
+    }
+
+    .rect .false {
+      background: var(${cssGlobalVars.passive});
+    }
+
+    .round span{
+      --size: var(${cssScope}-handle-size);
+      border-radius: 100%;
+      background: var(--godown--input-control);
+      width: var(--size);
+      height: var(--size);
+      margin: var(${cssScope}-handle-space);
+    }
+
+    .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;
+    }
+
+    [part=root] {
+      white-space: nowrap;
+      width: 100%;
+      vertical-align: bottom;
+      display: inline-block;
+      text-overflow: inherit;
+      overflow-wrap: inherit;
+      overflow: hidden;
+      color: var(${cssScope}--color);
+    }
+
+    [part=root]:hover {
+      color: var(${cssScope}--color-hover, var(${cssScope}--color));
+    }
+
+    [part=root]: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,37 @@
+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 {
+    /**
+     * Escape symbol.
+     */
+    escape: string;
+    /**
+     * Format strings.
+     */
+    format: string;
+    /**
+     * Time.
+     */
+    time: Date;
+    /**
+     * If there is a value, update every gap or timeout.
+     */
+    timeout: any;
+    /**
+     * The number of milliseconds that change with each update.
+     */
+    gap: any;
+    protected timeoutId: number;
+    protected render(): string;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
+    startTimeout(): number;
+}
+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":"AAGA,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;IAEb;;OAEG;IAEH,MAAM,SAA8B;IAEpC;;OAEG;IAEH,IAAI,OAAc;IAElB;;OAEG;IAEH,OAAO,MAAC;IAER;;OAEG;IAEH,GAAG,MAAC;IAEJ,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC;IAE5B,SAAS,CAAC,MAAM,IAAI,MAAM;IAI1B,SAAS,CAAC,YAAY;IAMtB,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAS1D,oBAAoB;IAIpB,YAAY;CAKb;AAED,eAAe,IAAI,CAAC"}

package/dev/components/time.js

@@ -0,0 +1,75 @@
+import { __decorate } from "tslib";
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import fmtime from "fmtime";
+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 = class Time extends GlobalStyle {
+    constructor() {
+        super(...arguments);
+        /**
+         * Escape symbol.
+         */
+        this.escape = "%";
+        /**
+         * Format strings.
+         */
+        this.format = "YYYY-MM-DD hh:mm:ss UTFZ";
+        /**
+         * Time.
+         */
+        this.time = new Date();
+    }
+    render() {
+        return fmtime(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));
+    }
+};
+__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 = __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,MAAM,MAAM,QAAQ,CAAC;AAC5B,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,GAAV,MAAM,IAAK,SAAQ,WAAW;IAA9B;;QACE;;WAEG;QAEH,WAAM,GAAG,GAAG,CAAC;QAEb;;WAEG;QAEH,WAAM,GAAG,0BAA0B,CAAC;QAEpC;;WAEG;QAEH,SAAI,GAAG,IAAI,IAAI,EAAE,CAAC;IA4CpB,CAAC;IA5BW,MAAM;QACd,OAAO,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACrD,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;CACF,CAAA;AAxDC;IADC,QAAQ,EAAE;oCACE;AAMb;IADC,QAAQ,EAAE;oCACyB;AAMpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kCACT;AAMlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACnB;AAMR;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iCACvB;AA7BA,IAAI;IAFT,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC,GAAG,CAAA,4BAA4B,CAAC;GAClC,IAAI,CA6DT;AAED,eAAe,IAAI,CAAC"}

package/dev/components/tooltip.d.ts

@@ -0,0 +1,48 @@
+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 if no `tip` provided.
+ * @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;
+    /**
+     * How can tips be triggered.
+     *
+     * If `focus`, element will be focusable, open tip when focused.
+     *
+     * If `hover`, element will open tip when hovered.
+     *
+     * @default "hover"
+     */
+    type: "hover" | "focus";
+    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,cAgDM,OAAQ,SAAQ,aAAa;IACjC;;OAEG;IAEH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IAEH,SAAS,EAAE,UAAU,CAAS;IAE9B;;OAEG;IAEH,KAAK,EAAE,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,OAAO,GAAG,KAAK,CAAY;IAEzE;;OAEG;IAEH,WAAW,UAAS;IAEpB;;;;;;;;OAQG;IAEH,IAAI,EAAE,OAAO,GAAG,OAAO,CAAW;IAElC,MAAM,CAAC,MAAM;;;;;;MAMX;IAEF,SAAS,CAAC,MAAM;CAqBjB;AAED,eAAe,OAAO,CAAC"}

package/dev/components/tooltip.js

@@ -0,0 +1,137 @@
+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 { 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 if no `tip` provided.
+ * @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";
+        /**
+         * If true, allow penetration of the tip.
+         */
+        this.propagation = false;
+        /**
+         * How can tips be triggered.
+         *
+         * If `focus`, element will be focusable, open tip when focused.
+         *
+         * If `hover`, element will open tip when hovered.
+         *
+         * @default "hover"
+         */
+        this.type = "hover";
+    }
+    render() {
+        const align = Tooltip_1.aligns[this.align] || "inherit";
+        const isFocusable = this.type === "focus";
+        return html `<div part="root"
+      tabindex="${isFocusable ? 0 : -1}"
+      @focus="${isFocusable ? () => this.open = true : null}"
+      @blur="${isFocusable ? () => this.open = false : null}"
+      @mouseenter="${isFocusable ? null : () => this.open = true}"
+      @mouseleave="${isFocusable ? null : () => this.open = false}"
+      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);
+__decorate([
+    property()
+], Tooltip.prototype, "type", void 0);
+Tooltip = Tooltip_1 = __decorate([
+    godown(protoName),
+    styles(css `
+    :host {
+      ${cssScope}--tip-background: inherit;
+      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] {
+      visibility: visible;
+    }
+
+    .passive {
+      background: var(${cssScope}--tip-background);
+    }
+  `, 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,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,aAAkC,MAAM,2BAA2B,CAAC;AAE3E,MAAM,SAAS,GAAG,SAAS,CAAC;AAC5B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;;;;;;;GAQG;AAiDH,IAAM,OAAO,eAAb,MAAM,OAAQ,SAAQ,aAAa;IAAnC;;QAOE;;WAEG;QAEH,cAAS,GAAe,KAAK,CAAC;QAE9B;;WAEG;QAEH,UAAK,GAA2D,QAAQ,CAAC;QAEzE;;WAEG;QAEH,gBAAW,GAAG,KAAK,CAAC;QAEpB;;;;;;;;WAQG;QAEH,SAAI,GAAsB,OAAO,CAAC;IA+BpC,CAAC;IArBW,MAAM;QACd,MAAM,KAAK,GAAG,SAAO,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC;QACtD,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC;QAC1C,OAAO,IAAI,CAAA;kBACG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACtB,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI;eAC5C,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI;qBACtC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;qBAC3C,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK;+BAClC,KAAK,gBAAgB,KAAK;QACjD,QAAQ,EAAE;;mBAEC,IAAI,CAAC,SAAS;8BACH,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK;MAEzD,IAAI,CAAC,GAAG;YACN,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,GAAG,SAAS;YAChD,CAAC,CAAC,QAAQ,CAAC,KAAK,CACpB;WACO,CAAC;IACV,CAAC;;AA5BM,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;AAtCF;IADC,QAAQ,EAAE;oCACC;AAMZ;IADC,QAAQ,EAAE;0CACmB;AAM9B;IADC,QAAQ,EAAE;sCAC8D;AAMzE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACR;AAYpB;IADC,QAAQ,EAAE;qCACuB;AAnC9B,OAAO;IAhDZ,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CACL,GAAG,CAAA;;QAEG,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0BQ,QAAQ;;GAE7B,EACD,GAAG,CAAA;;;;;;;;;;;;;GAaF,CACF;GACK,OAAO,CAkEZ;AAED,eAAe,OAAO,CAAC"}