le-kit 0.1.14 → 0.1.16

package/dist/collection/components/le-collapse/le-collapse.js

@@ -0,0 +1,188 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Animated show/hide wrapper.
+ *
+ * Supports height collapse (auto->0) and/or fading.
+ * Can optionally listen to the nearest `le-header` shrink events.
+ *
+ * @slot - Content to animate
+ *
+ * @cssprop --le-collapse-duration - Transition duration
+ *
+ * @csspart region - Collapsible region
+ * @csspart content - Inner content
+ *
+ * @cmsEditable true
+ * @cmsCategory Layout
+ */
+export class LeCollapse {
+    el;
+    /** Whether the content should be shown. */
+    open = true;
+    /** Whether the content should scroll down from the top when open. */
+    scrollDown = false;
+    /** Stop fading the content when collapsing/expanding. */
+    noFading = false;
+    /** If true, collapse/expand based on the nearest header shrink event. */
+    collapseOnHeaderShrink = false;
+    /**
+     * Handles `leHeaderShrinkChange` events from the `le-header`.
+     * In case multiple headers are present, only the nearest one in the DOM tree is used.
+     */
+    handleHeaderShrink(ev) {
+        const e = ev;
+        this.headerShrunk = !!e.detail?.shrunk;
+    }
+    headerShrunk = false;
+    componentWillLoad() {
+        // Stencil boolean props default to `false` when the attribute is missing.
+        // For this component, the desired default is open=true.
+        if (!this.el.hasAttribute('open')) {
+            this.open = true;
+        }
+    }
+    componentDidLoad() {
+        this.applyOpenState();
+    }
+    onOpenChange() {
+        this.applyOpenState();
+    }
+    onDrivenStateChange() {
+        this.applyOpenState();
+    }
+    shouldBeOpen() {
+        if (!this.open)
+            return false;
+        if (this.collapseOnHeaderShrink && this.headerShrunk)
+            return false;
+        return true;
+    }
+    applyOpenState() {
+        const nextOpen = this.shouldBeOpen();
+        this.el.toggleAttribute('data-open', nextOpen);
+    }
+    render() {
+        return (h(Host, { key: '30fe288583bae1645ce00714de95c40ed92b7af0', "data-open": this.shouldBeOpen() ? 'true' : 'false' }, h("le-component", { key: '5fdc1e83caaff73fedb61d7286fc56f03fa8127a', component: "le-collapse" }, h("div", { key: '185df372a5039be23abf42ff262ef2d3eaa1602f', class: "region", part: "region" }, h("slot", { key: '1790f5457264342d71aecb94a67ce4ee11149af2' })))));
+    }
+    static get is() { return "le-collapse"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-collapse.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-collapse.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the content should be shown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "true"
+            },
+            "scrollDown": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the content should scroll down from the top when open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "scroll-down",
+                "defaultValue": "false"
+            },
+            "noFading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stop fading the content when collapsing/expanding."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "no-fading",
+                "defaultValue": "false"
+            },
+            "collapseOnHeaderShrink": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, collapse/expand based on the nearest header shrink event."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "collapse-on-header-shrink",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "headerShrunk": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }, {
+                "propName": "headerShrunk",
+                "methodName": "onDrivenStateChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "leHeaderShrinkChange",
+                "method": "handleHeaderShrink",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=le-collapse.js.map

package/dist/collection/components/le-collapse/le-collapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-collapse.js","sourceRoot":"","sources":["../../../src/components/le-collapse/le-collapse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAIxF;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,UAAU;IACV,EAAE,CAAc;IAE3B,2CAA2C;IACH,IAAI,GAAY,IAAI,CAAC;IAE7D,qEAAqE;IAClB,UAAU,GAAY,KAAK,CAAC;IAE/E,yDAAyD;IACR,QAAQ,GAAY,KAAK,CAAC;IAE3E,yEAAyE;IACR,sBAAsB,GACrF,KAAK,CAAC;IAER;;;OAGG;IAEH,kBAAkB,CAAC,EAAS;QAC1B,MAAM,CAAC,GAAG,EAAsC,CAAC;QACjD,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC;IACzC,CAAC;IAEgB,YAAY,GAAY,KAAK,CAAC;IAE/C,iBAAiB;QACf,0EAA0E;QAC1E,wDAAwD;QACxD,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YAClC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACnB,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAGS,YAAY;QACpB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAGS,mBAAmB;QAC3B,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QAC7B,IAAI,IAAI,CAAC,sBAAsB,IAAI,IAAI,CAAC,YAAY;YAAE,OAAO,KAAK,CAAC;QACnE,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,cAAc;QACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACrC,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IACjD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,kEAAY,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YACrD,qEAAc,SAAS,EAAC,aAAa;gBACnC,4DAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;oBAC/B,8DAAa,CACT,CACO,CACV,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nexport type LeCollapseAnimation = 'fade' | 'collapse' | 'fade-collapse';\n\n/**\n * Animated show/hide wrapper.\n *\n * Supports height collapse (auto->0) and/or fading.\n * Can optionally listen to the nearest `le-header` shrink events.\n *\n * @slot - Content to animate\n *\n * @cssprop --le-collapse-duration - Transition duration\n *\n * @csspart region - Collapsible region\n * @csspart content - Inner content\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-collapse',\n  styleUrl: 'le-collapse.css',\n  shadow: true,\n})\nexport class LeCollapse {\n  @Element() el: HTMLElement;\n\n  /** Whether the content should be shown. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = true;\n\n  /** Whether the content should scroll down from the top when open. */\n  @Prop({ attribute: 'scroll-down', reflect: true }) scrollDown: boolean = false;\n\n  /** Stop fading the content when collapsing/expanding. */\n  @Prop({ attribute: 'no-fading', reflect: true }) noFading: boolean = false;\n\n  /** If true, collapse/expand based on the nearest header shrink event. */\n  @Prop({ attribute: 'collapse-on-header-shrink', reflect: true }) collapseOnHeaderShrink: boolean =\n    false;\n\n  /**\n   * Handles `leHeaderShrinkChange` events from the `le-header`.\n   * In case multiple headers are present, only the nearest one in the DOM tree is used.\n   */\n  @Listen('leHeaderShrinkChange', { target: 'window' })\n  handleHeaderShrink(ev: Event) {\n    const e = ev as CustomEvent<{ shrunk: boolean }>;\n    this.headerShrunk = !!e.detail?.shrunk;\n  }\n\n  @State() private headerShrunk: boolean = false;\n\n  componentWillLoad() {\n    // Stencil boolean props default to `false` when the attribute is missing.\n    // For this component, the desired default is open=true.\n    if (!this.el.hasAttribute('open')) {\n      this.open = true;\n    }\n  }\n\n  componentDidLoad() {\n    this.applyOpenState();\n  }\n\n  @Watch('open')\n  protected onOpenChange() {\n    this.applyOpenState();\n  }\n\n  @Watch('headerShrunk')\n  protected onDrivenStateChange() {\n    this.applyOpenState();\n  }\n\n  private shouldBeOpen() {\n    if (!this.open) return false;\n    if (this.collapseOnHeaderShrink && this.headerShrunk) return false;\n    return true;\n  }\n\n  private applyOpenState() {\n    const nextOpen = this.shouldBeOpen();\n    this.el.toggleAttribute('data-open', nextOpen);\n  }\n\n  render() {\n    return (\n      <Host data-open={this.shouldBeOpen() ? 'true' : 'false'}>\n        <le-component component=\"le-collapse\">\n          <div class=\"region\" part=\"region\">\n            <slot></slot>\n          </div>\n        </le-component>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/le-combobox/le-combobox.css

@@ -0,0 +1,144 @@
+/**
+ * le-combobox component styles
+ *
+ * CSS Custom Properties:
+ * --le-combobox-padding-x
+ * --le-combobox-font-size
+ * --le-combobox-border-radius
+ * --le-combobox-border-color
+ * --le-combobox-bg
+ * --le-combobox-color
+ */
+
+:host {
+  display: inline-block;
+  min-width: 200px;
+  --le-combobox-border-color: var(--le-color-primary, #3b82f6);
+}
+
+:host([disabled]) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+:host([full-width]) {
+  width: 100%;
+}
+
+/* Trigger wrapper */
+.combobox-trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background: var(--le-combobox-bg, var(--le-color-surface, #fff));
+  border: 1px solid color-mix(in srgb, var(--le-combobox-border-color) 33%, transparent);
+  border-radius: var(--le-combobox-border-radius, 0.375rem);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.combobox-trigger:hover:not(.is-disabled),
+:host(:focus-within) .combobox-trigger:not(.is-disabled) {
+  border-color: var(--le-combobox-border-color);
+}
+
+.combobox-trigger:focus-within {
+  outline: 2px solid var(--le-color-focus);
+  outline-offset: 2px;
+}
+
+.combobox-trigger.is-open {
+  border-color: var(--le-color-primary, #3b82f6);
+}
+
+/* Input */
+.combobox-input {
+  flex: 1;
+  border: none;
+  outline: none;
+}
+.combobox-input::part(container) {
+  border: none;
+}
+.combobox-input::part(container):focus-within {
+  outline: none !important;
+}
+
+.combobox-input::placeholder {
+  color: color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent);
+}
+
+.combobox-trigger.is-disabled {
+  cursor: not-allowed;
+  background: var(--le-color-surface-disabled, #f9fafb);
+}
+.combobox-input:disabled {
+  cursor: not-allowed;
+}
+
+/* Clear button */
+.combobox-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  margin-right: 0.25rem;
+  color: var(--le-color-primary, #3b82f6);
+  background: transparent;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.15s ease, background-color 0.15s ease;
+}
+
+.combobox-clear:hover {
+  opacity: 1;
+  background: var(--le-color-surface-hover, #f3f4f6);
+}
+
+.combobox-clear svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+/* Arrow icon */
+.combobox-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2rem;
+  height: 100%;
+  color: var(--le-color-primary, #3b82f6);
+  transition: transform 0.2s ease;
+}
+
+.combobox-arrow svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.combobox-trigger.is-open .combobox-arrow {
+  transform: rotate(180deg);
+}
+
+/* Size variants */
+:host([size='small']) .combobox-trigger {
+  --le-combobox-height: 2rem;
+}
+
+:host([size='small']) .combobox-input {
+  --le-combobox-padding-x: 0.5rem;
+  --le-combobox-font-size: 0.75rem;
+}
+
+:host([size='large']) .combobox-trigger {
+  --le-combobox-height: 3rem;
+}
+
+:host([size='large']) .combobox-input {
+  --le-combobox-padding-x: 1rem;
+  --le-combobox-font-size: 1rem;
+}