le-kit 0.5.2 → 0.5.4

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

@@ -1,184 +0,0 @@
-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;
-    /**
-     * Since Stencil boolean props default to `false` when the attribute is missing.
-     * instead of `open` defaulting to `true`, using a `closed` prop.
-     */
-    closed = false;
-    /** 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;
-    componentDidLoad() {
-        this.applyOpenState();
-    }
-    onOpenChange() {
-        this.applyOpenState();
-    }
-    onDrivenStateChange() {
-        this.applyOpenState();
-    }
-    shouldBeOpen() {
-        if (this.closed)
-            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: 'e0882ec40ed132dbd6eeaa43da4aff03b6e45352', "data-open": this.shouldBeOpen() ? 'true' : 'false' }, h("le-component", { key: '55c98e5382ddd6b5ef8a8f506f9a2901fc0b48ce', component: "le-collapse" }, h("div", { key: '0bcfa5aada8a7a6f9c86011e6a3dfa5bbb5e08c4', class: { 'region': true, 'scroll-down': this.scrollDown }, part: "region" }, h("slot", { key: '7b762e372802512a287ae98d4aeecdb3160bb54e' })))));
-    }
-    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 {
-            "closed": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Since Stencil boolean props default to `false` when the attribute is missing.\ninstead of `open` defaulting to `true`, using a `closed` prop."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "closed",
-                "defaultValue": "false"
-            },
-            "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

@@ -1 +0,0 @@
-{"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;;;OAGG;IACqC,MAAM,GAAY,KAAK,CAAC;IAEhE,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,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,IAAI,CAAC,MAAM;YAAE,OAAO,KAAK,CAAC;QAC9B,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,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAC,QAAQ;oBAC3E,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  /**\n   * Since Stencil boolean props default to `false` when the attribute is missing.\n   * instead of `open` defaulting to `true`, using a `closed` prop.\n   */\n  @Prop({ mutable: true, reflect: true }) closed: boolean = false;\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  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.closed) 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': true, 'scroll-down': this.scrollDown }} 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

@@ -1,144 +0,0 @@
-/**
- * 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;
-}