le-kit 0.5.3 → 0.6.0

package/dist/collection/components/le-code-input/le-code-input.js

@@ -1,433 +0,0 @@
-import { h } from "@stencil/core";
-import { classnames } from "../../utils/utils";
-/**
- * A one-time code input component with individual frames for each character.
- * Supports standard copy/paste and range selection behaviors.
- *
- * @slot description - Additional description text displayed below the input
- *
- * @cssprop --le-code-box-size - Size of each character box (default: 40px width, 48px height)
- * @cssprop --le-input-bg - Input background color
- * @cssprop --le-input-color - Input text color
- * @cssprop --le-input-border - Input border style
- * @cssprop --le-input-border-focus - Input border style when focused
- * @cssprop --le-input-border-error - Input border style when invalid
- * @cssprop --le-input-radius - Input border radius
- */
-export class LeCodeInput {
-    constructor() {
-        /**
-         * The value of the input
-         */
-        this.value = '';
-        /**
-         * Length of the code (number of characters)
-         */
-        this.length = 6;
-        /**
-         * The type of code (numeric or alphanumeric)
-         * This affects the keyboard layout on mobile devices.
-         */
-        this.type = 'text';
-        /**
-         * Whether the input is disabled
-         */
-        this.disabled = false;
-        /**
-         * Whether the input is read-only
-         */
-        this.readonly = false;
-        /**
-         * Internal validation state (can be set externally manually or via simple check)
-         */
-        this.error = false;
-        this.isFocused = false;
-        this.selectionStart = 0;
-        this.selectionEnd = 0;
-        this.handleInput = (ev) => {
-            const input = ev.target;
-            let val = input.value;
-            // Enforce length limit
-            if (val.length > this.length) {
-                val = val.slice(0, this.length);
-                // We need to force update the input value if it exceeded length
-                // because Stencil prop update might not happen if value is same as prop but input is different
-                input.value = val;
-            }
-            this.value = val;
-            this.updateSelection(input);
-            this.leInput.emit({
-                value: this.value,
-                name: this.name,
-                externalId: this.externalId,
-            });
-        };
-        this.handleChange = () => {
-            this.leChange.emit({
-                value: this.value,
-                name: this.name,
-                externalId: this.externalId,
-            });
-        };
-        this.handleFocus = (ev) => {
-            this.isFocused = true;
-            const input = ev.target;
-            // Move cursor to the end on focus so typing appends to current value
-            window.requestAnimationFrame(() => {
-                const len = input.value.length;
-                input.setSelectionRange(len, len);
-                this.updateSelection(input);
-            });
-            this.leFocus.emit();
-        };
-        this.handleBlur = () => {
-            this.isFocused = false;
-            this.leBlur.emit();
-            // Trigger change on blur
-            this.handleChange();
-        };
-        this.handleSelect = (ev) => {
-            this.updateSelection(ev.target);
-        };
-    }
-    valueChanged(newValue) {
-        if (newValue && newValue.length > this.length) {
-            this.value = newValue.slice(0, this.length);
-        }
-    }
-    componentWillLoad() {
-        if (this.value && this.value.length > this.length) {
-            this.value = this.value.slice(0, this.length);
-        }
-    }
-    updateSelection(input) {
-        this.selectionStart = input.selectionStart || 0;
-        this.selectionEnd = input.selectionEnd || 0;
-    }
-    /**
-     * Helper to determine active index for focus ring
-     */
-    getActiveIndex() {
-        if (!this.isFocused)
-            return -1;
-        // If we have a range selection, usually focus ring is not shown or shown around selection?
-        // We'll stick to showing it at the cursor end (selectionEnd) or start?
-        // If range selected, `selectionStart` is start of range.
-        // If cursor is at the very end (pos == length), we highlight the last box
-        if (this.selectionStart === this.length && this.length > 0) {
-            return this.length - 1;
-        }
-        return this.selectionStart;
-    }
-    renderBoxes() {
-        const boxes = [];
-        const activeIndex = this.getActiveIndex();
-        const isRangeSelection = this.selectionEnd - this.selectionStart > 0;
-        for (let i = 0; i < this.length; i++) {
-            const char = this.value ? this.value[i] : '';
-            const isActive = this.isFocused && !isRangeSelection && i === activeIndex;
-            const isSelected = this.isFocused && isRangeSelection && i >= this.selectionStart && i < this.selectionEnd;
-            boxes.push(h("div", { class: classnames('code-box', {
-                    'active': isActive,
-                    'selected': isSelected,
-                    'has-value': !!char,
-                }) }, char));
-        }
-        return boxes;
-    }
-    render() {
-        return (h("le-component", { key: 'c9a4a92342645c54aee90091cd860fc439de6334', component: "le-code-input", hostClass: classnames({ 'disabled': this.disabled, 'has-error': this.error }) }, h("div", { key: '50480c7c827ba801421c260c4e6fef88f22dcbd0', class: "le-code-input-wrapper" }, this.label && (h("label", { key: '316653c42c51ea0a443d8401c5adaf3e4821d7c8', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '803789d07d538e1576dbb0ff7536110ab620632b', class: classnames('input-group', { 'has-error': this.error }) }, h("input", { key: '7bbf221d32aa9363066d799b5b2a4aac2e9ae77f', class: "ghost-input", id: this.name, name: this.name, type: "text", inputMode: this.type === 'number' ? 'numeric' : 'text', pattern: this.type === 'number' ? '[0-9]*' : undefined, autocomplete: "one-time-code", value: this.value, maxLength: this.length, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onSelect: this.handleSelect,
-            // Prevent browser autofill background from messing up visual
-            spellcheck: false, autoCapitalize: "none", autoCorrect: "off" }), h("div", { key: '0ff57ab380039c4bbbbf0e347331eb6885f8ce63', class: "visual-container" }, this.renderBoxes())), !this.error && (h("div", { key: '7da46dfc052457588969a1c9631eb310d80030c4', class: "le-input-description" }, h("le-slot", { key: '7bcfa46fd981286736ea7ec490d65c962ef998d5', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: 'ee810bf920acc45c48b3cbc4ebf9598ac5937923', name: "description" }, this.description)))))));
-    }
-    static get is() { return "le-code-input"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["le-code-input.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["le-code-input.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "value": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The value of the input"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "value",
-                "defaultValue": "''"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The name of the input"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Label for the input"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label"
-            },
-            "length": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Length of the code (number of characters)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "length",
-                "defaultValue": "6"
-            },
-            "description": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Description text displayed below the input\nin case there is a more complex markup,\nit can be provided via slot as well"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "description"
-            },
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'text' | 'number'",
-                    "resolved": "\"number\" | \"text\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The type of code (numeric or alphanumeric)\nThis affects the keyboard layout on mobile devices."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "type",
-                "defaultValue": "'text'"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the input is disabled"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "readonly": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the input is read-only"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "readonly",
-                "defaultValue": "false"
-            },
-            "externalId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "External ID for linking with external systems"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "external-id"
-            },
-            "error": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Internal validation state (can be set externally manually or via simple check)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "error",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isFocused": {},
-            "selectionStart": {},
-            "selectionEnd": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "leChange",
-                "name": "leChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the value changes (on blur or Enter)"
-                },
-                "complexType": {
-                    "original": "{ value: string; name: string; externalId: string }",
-                    "resolved": "{ value: string; name: string; externalId: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "leInput",
-                "name": "leInput",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the input value changes (on keystroke)"
-                },
-                "complexType": {
-                    "original": "{ value: string; name: string; externalId: string }",
-                    "resolved": "{ value: string; name: string; externalId: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "leFocus",
-                "name": "leFocus",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the input is focused"
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "leBlur",
-                "name": "leBlur",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the input is blurred"
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "valueChanged"
-            }];
-    }
-}
-//# sourceMappingURL=le-code-input.js.map

package/dist/collection/components/le-code-input/le-code-input.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-code-input.js","sourceRoot":"","sources":["../../../src/components/le-code-input/le-code-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, State, h, Element, Watch } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A one-time code input component with individual frames for each character.\n * Supports standard copy/paste and range selection behaviors.\n *\n * @slot description - Additional description text displayed below the input\n *\n * @cssprop --le-code-box-size - Size of each character box (default: 40px width, 48px height)\n * @cssprop --le-input-bg - Input background color\n * @cssprop --le-input-color - Input text color\n * @cssprop --le-input-border - Input border style\n * @cssprop --le-input-border-focus - Input border style when focused\n * @cssprop --le-input-border-error - Input border style when invalid\n * @cssprop --le-input-radius - Input border radius\n */\n@Component({\n  tag: 'le-code-input',\n  styleUrl: 'le-code-input.css',\n  shadow: true,\n})\nexport class LeCodeInput {\n  @Element() el: HTMLElement;\n\n  /**\n   * The value of the input\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n\n  /**\n   * The name of the input\n   */\n  @Prop() name: string;\n\n  /**\n   * Label for the input\n   */\n  @Prop() label: string;\n\n  /**\n   * Length of the code (number of characters)\n   */\n  @Prop() length: number = 6;\n\n  /**\n   * Description text displayed below the input\n   * in case there is a more complex markup,\n   * it can be provided via slot as well\n   */\n  @Prop() description?: string;\n\n  /**\n   * The type of code (numeric or alphanumeric)\n   * This affects the keyboard layout on mobile devices.\n   */\n  @Prop() type: 'text' | 'number' = 'text';\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * External ID for linking with external systems\n   */\n  @Prop() externalId: string;\n\n  /**\n   * Internal validation state (can be set externally manually or via simple check)\n   */\n  @Prop() error: boolean = false;\n\n  /**\n   * Emitted when the value changes (on blur or Enter)\n   */\n  @Event() leChange: EventEmitter<{ value: string; name: string; externalId: string }>;\n\n  /**\n   * Emitted when the input value changes (on keystroke)\n   */\n  @Event() leInput: EventEmitter<{ value: string; name: string; externalId: string }>;\n\n  /**\n   * Emitted when the input is focused\n   */\n  @Event() leFocus: EventEmitter<void>;\n\n  /**\n   * Emitted when the input is blurred\n   */\n  @Event() leBlur: EventEmitter<void>;\n\n  @State() private isFocused: boolean = false;\n  @State() private selectionStart: number = 0;\n  @State() private selectionEnd: number = 0;\n\n  @Watch('value')\n  valueChanged(newValue: string) {\n    if (newValue && newValue.length > this.length) {\n      this.value = newValue.slice(0, this.length);\n    }\n  }\n\n  componentWillLoad() {\n    if (this.value && this.value.length > this.length) {\n      this.value = this.value.slice(0, this.length);\n    }\n  }\n\n  private handleInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    let val = input.value;\n\n    // Enforce length limit\n    if (val.length > this.length) {\n      val = val.slice(0, this.length);\n      // We need to force update the input value if it exceeded length\n      // because Stencil prop update might not happen if value is same as prop but input is different\n      input.value = val;\n    }\n\n    this.value = val;\n    this.updateSelection(input);\n\n    this.leInput.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId,\n    });\n  };\n\n  private handleChange = () => {\n    this.leChange.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId,\n    });\n  };\n\n  private handleFocus = (ev: Event) => {\n    this.isFocused = true;\n    const input = ev.target as HTMLInputElement;\n\n    // Move cursor to the end on focus so typing appends to current value\n    window.requestAnimationFrame(() => {\n      const len = input.value.length;\n      input.setSelectionRange(len, len);\n      this.updateSelection(input);\n    });\n\n    this.leFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.isFocused = false;\n    this.leBlur.emit();\n    // Trigger change on blur\n    this.handleChange();\n  };\n\n  private handleSelect = (ev: Event) => {\n    this.updateSelection(ev.target as HTMLInputElement);\n  };\n\n  private updateSelection(input: HTMLInputElement) {\n    this.selectionStart = input.selectionStart || 0;\n    this.selectionEnd = input.selectionEnd || 0;\n  }\n\n  /**\n   * Helper to determine active index for focus ring\n   */\n  private getActiveIndex(): number {\n    if (!this.isFocused) return -1;\n\n    // If we have a range selection, usually focus ring is not shown or shown around selection?\n    // We'll stick to showing it at the cursor end (selectionEnd) or start?\n    // If range selected, `selectionStart` is start of range.\n\n    // If cursor is at the very end (pos == length), we highlight the last box\n    if (this.selectionStart === this.length && this.length > 0) {\n      return this.length - 1;\n    }\n\n    return this.selectionStart;\n  }\n\n  private renderBoxes() {\n    const boxes = [];\n    const activeIndex = this.getActiveIndex();\n    const isRangeSelection = this.selectionEnd - this.selectionStart > 0;\n\n    for (let i = 0; i < this.length; i++) {\n      const char = this.value ? this.value[i] : '';\n      const isActive = this.isFocused && !isRangeSelection && i === activeIndex;\n      const isSelected =\n        this.isFocused && isRangeSelection && i >= this.selectionStart && i < this.selectionEnd;\n\n      boxes.push(\n        <div\n          class={classnames('code-box', {\n            'active': isActive,\n            'selected': isSelected,\n            'has-value': !!char,\n          })}\n        >\n          {char}\n        </div>,\n      );\n    }\n    return boxes;\n  }\n\n  render() {\n    return (\n      <le-component\n        component=\"le-code-input\"\n        hostClass={classnames({ 'disabled': this.disabled, 'has-error': this.error })}\n      >\n        <div class=\"le-code-input-wrapper\">\n          {this.label && (\n            <label class=\"le-input-label\" htmlFor={this.name}>\n              {this.label}\n            </label>\n          )}\n\n          <div class={classnames('input-group', { 'has-error': this.error })}>\n            <input\n              class=\"ghost-input\"\n              id={this.name}\n              name={this.name}\n              type=\"text\"\n              inputMode={this.type === 'number' ? 'numeric' : 'text'}\n              pattern={this.type === 'number' ? '[0-9]*' : undefined}\n              autocomplete=\"one-time-code\"\n              value={this.value}\n              maxLength={this.length}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n              onSelect={this.handleSelect}\n              // Prevent browser autofill background from messing up visual\n              spellcheck={false}\n              autoCapitalize=\"none\"\n              autoCorrect=\"off\"\n            />\n\n            <div class=\"visual-container\">{this.renderBoxes()}</div>\n          </div>\n\n          {!this.error && (\n            <div class=\"le-input-description\">\n              <le-slot name=\"description\" type=\"text\" tag=\"p\" label=\"Description\">\n                <slot name=\"description\">{this.description}</slot>\n              </le-slot>\n            </div>\n          )}\n        </div>\n      </le-component>\n    );\n  }\n}\n"]}

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

@@ -1,31 +0,0 @@
-:host {
-  --le-collapse-duration: var(--le-transition-normal);
-
-  display: grid;
-  grid-template-rows: 1fr;
-  opacity: 1;
-  transition:
-    grid-template-rows var(--le-collapse-duration),
-    opacity var(--le-collapse-duration);
-}
-
-:host([data-open="false"]),
-:host([closed]) {
-  grid-template-rows: 0fr;
-  opacity: 0;
-}
-:host([no-fading][data-open="false"]),
-:host([no-fading][closed]) {
-  opacity: 1;
-}
-
-.region {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  overflow: hidden;
-}
-
-.region.scroll-down {
-  justify-content: flex-start;
-}

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

@@ -1,185 +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 {
-    constructor() {
-        /**
-         * Since Stencil boolean props default to `false` when the attribute is missing.
-         * instead of `open` defaulting to `true`, using a `closed` prop.
-         */
-        this.closed = false;
-        /** Whether the content should scroll down from the top when open. */
-        this.scrollDown = false;
-        /** Stop fading the content when collapsing/expanding. */
-        this.noFading = false;
-        /** If true, collapse/expand based on the nearest header shrink event. */
-        this.collapseOnHeaderShrink = false;
-        this.headerShrunk = 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;
-    }
-    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: '81a03bdd47d7c6e7d4491f4ee6be2e2f7af66334', "data-open": this.shouldBeOpen() ? 'true' : 'false' }, h("le-component", { key: '14cbe57c5cee1a3a7565175528d32b5d1be47919', component: "le-collapse" }, h("div", { key: 'c669a8d9f20776dba9d5ba162aaa6a58a31ad5b5', class: { 'region': true, 'scroll-down': this.scrollDown }, part: "region" }, h("slot", { key: 'd56fd4c71032da7935800874c13a2ba5b7427c83' })))));
-    }
-    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