le-kit 0.5.1 → 0.5.3

package/dist/cjs/le-box.cjs.entry.js

@@ -8,94 +8,45 @@ const leBoxCss = () => `:host{display:block;box-sizing:border-box}:host([hidden]
 const LeBox = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Flex grow factor - how much the item should grow relative to siblings
+         * @min 0
+         */
+        this.grow = 0;
+        /**
+         * Flex shrink factor - how much the item should shrink relative to siblings
+         * @min 0
+         */
+        this.shrink = 1;
+        /**
+         * Flex basis - initial size before growing/shrinking (e.g., '200px', '25%', 'auto')
+         */
+        this.basis = 'auto';
+        /**
+         * Self-alignment override for this item on the cross axis
+         * @allowedValues auto | start | center | end | stretch | baseline
+         */
+        this.alignSelf = 'auto';
+        /**
+         * Internal horizontal alignment of content
+         * @allowedValues start | center | end | stretch
+         */
+        this.alignContent = 'stretch';
+        /**
+         * Internal vertical alignment of content
+         * @allowedValues start | center | end | stretch
+         */
+        this.justifyContent = 'start';
+        /**
+         * Whether to display box content as flex (for internal alignment)
+         */
+        this.displayFlex = false;
+        /**
+         * Direction of internal flex layout when displayFlex is true
+         * @allowedValues horizontal | vertical
+         */
+        this.innerDirection = 'vertical';
     }
-    get el() { return index.getElement(this); }
-    /**
-     * Flex grow factor - how much the item should grow relative to siblings
-     * @min 0
-     */
-    grow = 0;
-    /**
-     * Flex shrink factor - how much the item should shrink relative to siblings
-     * @min 0
-     */
-    shrink = 1;
-    /**
-     * Flex basis - initial size before growing/shrinking (e.g., '200px', '25%', 'auto')
-     */
-    basis = 'auto';
-    /**
-     * Width of the box (CSS value like '100px', '50%', 'auto')
-     */
-    width;
-    /**
-     * Height of the box (CSS value)
-     */
-    height;
-    /**
-     * Minimum width constraint
-     */
-    minWidth;
-    /**
-     * Maximum width constraint
-     */
-    maxWidth;
-    /**
-     * Minimum height constraint
-     */
-    minHeight;
-    /**
-     * Maximum height constraint
-     */
-    maxHeight;
-    /**
-     * Background color or CSS value (e.g., '#f0f0f0', 'var(--le-color-primary-light)')
-     */
-    background;
-    /**
-     * Border radius (e.g., '8px', 'var(--le-radius-md)')
-     */
-    borderRadius;
-    /**
-     * Border style (e.g., '1px solid #ccc', '2px dashed var(--le-color-border)')
-     */
-    border;
-    /**
-     * Self-alignment override for this item on the cross axis
-     * @allowedValues auto | start | center | end | stretch | baseline
-     */
-    alignSelf = 'auto';
-    /**
-     * Internal horizontal alignment of content
-     * @allowedValues start | center | end | stretch
-     */
-    alignContent = 'stretch';
-    /**
-     * Internal vertical alignment of content
-     * @allowedValues start | center | end | stretch
-     */
-    justifyContent = 'start';
-    /**
-     * Padding inside the box (CSS value like '8px', '1rem')
-     */
-    padding;
-    /**
-     * Order in the flex container (lower values come first)
-     */
-    order;
-    /**
-     * Whether to display box content as flex (for internal alignment)
-     */
-    displayFlex = false;
-    /**
-     * Direction of internal flex layout when displayFlex is true
-     * @allowedValues horizontal | vertical
-     */
-    innerDirection = 'vertical';
-    /**
-     * Gap between internal flex items when displayFlex is true
-     */
-    innerGap;
     getAlignSelf() {
         const alignMap = {
             auto: 'auto',
@@ -175,8 +126,9 @@ const LeBox = class {
             'display-flex': this.displayFlex,
             [`inner-${this.innerDirection}`]: this.displayFlex,
         });
-        return (index.h(index.Host, { key: '01fad47e9fdff2931a8f0a26d540bb1a5da6a626', style: hostStyle, class: hostClass }, index.h("le-component", { key: '2d6b2588889925835e91ecbf6be811d21b47b015', component: "le-box" }, index.h("div", { key: 'd43fd71f7f9e1211bb2dfaaf577c6c9bef78b794', class: "box", part: "box" }, index.h("div", { key: '1b8b1680dfeb7e6f31ac627d55ae05796bef4f02', class: "content", part: "content", style: contentStyle }, index.h("le-slot", { key: '8af26e1c5047b9d5ab9f4ae0464c34bf3e931805', name: "", description: "Content inside this flex item", type: "slot", "allowed-components": "le-text,le-card,le-button,le-stack,le-box" }, index.h("slot", { key: 'db95a80650aa9846eb27ccd75ee074a86a9ef47c' })))))));
+        return (index.h(index.Host, { key: '7ff795b1c7e8947ec3c807d387d1bfd6eaec0e78', style: hostStyle, class: hostClass }, index.h("le-component", { key: 'f9d95344461ac913dcf2cbd653541f0f2ce961ea', component: "le-box" }, index.h("div", { key: '9c772c7fcca7f1401601eb8f730acd2edced6de2', class: "box", part: "box" }, index.h("div", { key: '62d77dadf5966a6bd73ef839281c20574460716d', class: "content", part: "content", style: contentStyle }, index.h("le-slot", { key: 'f4a02189f884db240cfc7070a600983e905aedfb', name: "", description: "Content inside this flex item", type: "slot", "allowed-components": "le-text,le-card,le-button,le-stack,le-box" }, index.h("slot", { key: '57857570d54c3c1144dff8989733e5ba07c5407e' })))))));
     }
+    get el() { return index.getElement(this); }
 };
 LeBox.style = leBoxCss();
 

package/dist/cjs/le-breadcrumbs.cjs.entry.js

@@ -0,0 +1,223 @@
+'use strict';
+
+var index = require('./index-BzadfLTc.js');
+var utils = require('./utils-Dxx9WhWK.js');
+
+const leBreadcrumbsCss = () => `:host{display:block}.breadcrumbs{display:flex;align-items:center;gap:var(--le-space-xs);min-width:0}.list{display:flex;align-items:center;gap:var(--le-space-xs);min-width:0;flex:1}.list.wrap{flex-wrap:wrap}.list.scroll{overflow-x:auto;white-space:nowrap;scrollbar-width:none}.list.scroll::-webkit-scrollbar{display:none}.item{--le-button-padding-x:var(--le-spacing-2);--le-button-padding-y:var(--le-spacing-1)}.item.current{color:var(--le-color-text);font-weight:var(--le-font-weight-medium)}.item-popover{--le-popover-padding:var(--le-space-xs)}.separator{display:inline-flex;align-items:center;color:var(--le-color-text-tertiary, var(--le-color-text-secondary))}.separator ::slotted(*){display:inline-flex;align-items:center}.more-trigger{display:inline-flex;align-items:center;appearance:none;border:0;background:none;padding:0;color:inherit;cursor:pointer}.hidden-slot{display:none}`;
+
+const LeBreadcrumbs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.leBreadcrumbSelect = index.createEvent(this, "leBreadcrumbSelect");
+        /**
+         * Breadcrumb items (supports JSON string).
+         */
+        this.items = [];
+        /**
+         * Accessible label for the breadcrumbs navigation.
+         */
+        this.label = 'Breadcrumbs';
+        /**
+         * Separator icon name (used if no separator slot is provided).
+         */
+        this.separatorIcon = 'chevron-right';
+        /**
+         * Overflow behavior: collapse (default), wrap, or scroll.
+         */
+        this.overflowMode = 'collapse';
+        /**
+         * Minimum visible items before collapsing.
+         */
+        this.minVisibleItems = 2;
+        this.hiddenIndices = [];
+        this.separatorTemplate = '';
+        this.instanceId = utils.generateId('le-breadcrumbs');
+        this.recomputeQueued = false;
+        this.handleSeparatorSlotChange = (ev) => {
+            const slot = ev.target;
+            const nodes = slot.assignedNodes({ flatten: true });
+            const html = nodes
+                .map(node => {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    return node.textContent || '';
+                }
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    return node.outerHTML || '';
+                }
+                return '';
+            })
+                .join('')
+                .trim();
+            this.separatorTemplate = html;
+            this.scheduleOverflowRecompute();
+        };
+        this.handleItemClick = (item, id, ev) => {
+            const href = item.href || item.url;
+            this.leBreadcrumbSelect.emit({ item, id, href, originalEvent: ev });
+        };
+        this.handleKeyDown = (ev) => {
+            if (ev.key !== 'ArrowRight' && ev.key !== 'ArrowLeft')
+                return;
+            const focusables = Array.from(this.el.shadowRoot?.querySelectorAll('a,button,[tabindex="0"]') || []);
+            if (focusables.length === 0)
+                return;
+            const current = document.activeElement;
+            const idx = focusables.findIndex(el => el === current);
+            if (idx === -1)
+                return;
+            ev.preventDefault();
+            const nextIdx = ev.key === 'ArrowRight' ? idx + 1 : idx - 1;
+            const target = focusables[(nextIdx + focusables.length) % focusables.length];
+            target?.focus();
+        };
+    }
+    componentDidLoad() {
+        this.setupResizeObserver();
+        this.scheduleOverflowRecompute();
+    }
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+    }
+    handleInputsChange() {
+        this.scheduleOverflowRecompute();
+    }
+    setupResizeObserver() {
+        if (typeof window === 'undefined' || !('ResizeObserver' in window))
+            return;
+        this.resizeObserver = new ResizeObserver(() => this.scheduleOverflowRecompute());
+        this.resizeObserver.observe(this.el);
+    }
+    get parsedItems() {
+        if (typeof this.items === 'string') {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.items;
+    }
+    getItemId(item, index) {
+        return item.id ?? `${this.instanceId}:${index}`;
+    }
+    scheduleOverflowRecompute() {
+        if (this.overflowMode !== 'collapse') {
+            if (this.hiddenIndices.length) {
+                this.hiddenIndices = [];
+            }
+            return;
+        }
+        if (this.recomputeQueued)
+            return;
+        this.recomputeQueued = true;
+        requestAnimationFrame(() => this.recomputeOverflow());
+    }
+    nextFrame() {
+        return new Promise(resolve => requestAnimationFrame(() => resolve()));
+    }
+    async recomputeOverflow() {
+        this.recomputeQueued = false;
+        if (this.overflowMode !== 'collapse') {
+            return;
+        }
+        const items = this.parsedItems;
+        if (!this.listEl || items.length <= Math.max(2, this.minVisibleItems)) {
+            if (this.hiddenIndices.length) {
+                this.hiddenIndices = [];
+            }
+            return;
+        }
+        // Reset hidden items first
+        if (this.hiddenIndices.length) {
+            this.hiddenIndices = [];
+            await this.nextFrame();
+        }
+        const containerWidth = this.listEl.clientWidth;
+        if (!containerWidth)
+            return;
+        const candidates = items.map((_, idx) => idx).slice(1, -1);
+        const hidden = [];
+        let attempts = 0;
+        while (this.listEl.scrollWidth > containerWidth &&
+            attempts < candidates.length &&
+            items.length - hidden.length > this.minVisibleItems) {
+            const next = candidates.shift();
+            if (next === undefined)
+                break;
+            hidden.push(next);
+            this.hiddenIndices = [...hidden];
+            await this.nextFrame();
+            attempts += 1;
+        }
+        // If still overflowing, hide first then last as a last resort
+        if (this.listEl.scrollWidth > containerWidth &&
+            items.length - hidden.length > this.minVisibleItems) {
+            if (!hidden.includes(0)) {
+                hidden.unshift(0);
+                this.hiddenIndices = [...hidden];
+                await this.nextFrame();
+            }
+        }
+        if (this.listEl.scrollWidth > containerWidth &&
+            items.length - hidden.length > this.minVisibleItems) {
+            const lastIndex = items.length - 1;
+            if (!hidden.includes(lastIndex)) {
+                hidden.push(lastIndex);
+                this.hiddenIndices = [...hidden];
+                await this.nextFrame();
+            }
+        }
+    }
+    renderSeparator() {
+        console.log('separatorTemplate', this.separatorTemplate || 'no-template', this.separatorIcon);
+        if (this.separatorTemplate) {
+            return index.h("span", { class: "separator", "aria-hidden": "true", innerHTML: this.separatorTemplate });
+        }
+        return (index.h("span", { class: "separator", "aria-hidden": "true" }, index.h("le-icon", { name: this.separatorIcon })));
+    }
+    renderItem(item, index$1) {
+        const id = this.getItemId(item, index$1);
+        const hasChildren = Array.isArray(item.children) && item.children.length > 0;
+        const isCurrent = !!item.selected;
+        const itemClass = utils.classnames('item', { current: isCurrent });
+        const icontent = item.icon || item.iconStart;
+        const content = (index.h("le-button", { slot: hasChildren ? 'trigger' : undefined, variant: "clear", color: "secondary", class: itemClass, onClick: ev => this.handleItemClick(item, id, ev), "aria-haspopup": "menu", "aria-current": isCurrent ? 'page' : null, part: item.part, iconStart: icontent }, index.h("span", { class: "item-label" }, item.label)));
+        if (hasChildren) {
+            return (index.h("le-popover", { position: "bottom", align: "start", "show-close": "false", class: "item-popover" }, content, index.h("le-navigation", { orientation: "vertical", items: item.children, style: { minWidth: '200px' } })));
+        }
+        return content;
+    }
+    renderMore(hiddenItems) {
+        if (hiddenItems.length === 0)
+            return null;
+        return (index.h("le-popover", { position: "bottom", align: "start", "show-close": "false" }, index.h("button", { slot: "trigger", class: "more-trigger", type: "button", "aria-haspopup": "menu" }, index.h("slot", { name: "more-trigger" }, index.h("le-icon", { name: "ellipsis-horizontal" }))), index.h("le-navigation", { orientation: "vertical", items: hiddenItems, style: { minWidth: '200px' } })));
+    }
+    render() {
+        const items = this.parsedItems;
+        const indexedItems = items.map((item, index) => ({ item, index }));
+        const hiddenSet = new Set(this.hiddenIndices);
+        const hiddenItems = indexedItems.filter(({ index }) => hiddenSet.has(index));
+        const visibleItems = indexedItems.filter(({ index }) => !hiddenSet.has(index));
+        const shouldCollapse = this.overflowMode === 'collapse' && hiddenItems.length > 0;
+        const firstVisible = visibleItems[0];
+        const remainingVisible = visibleItems.slice(1);
+        const firstHidden = hiddenSet.has(0);
+        return (index.h(index.Host, { key: '6da8c091e08c97f903d6e840d02bca6a321ed0ba', onKeyDown: this.handleKeyDown }, index.h("nav", { key: 'ddc78c68de5a49d59a3d7cfa446ce7a4dea02366', class: "breadcrumbs", "aria-label": this.label }, index.h("slot", { key: 'c76c6164b589bdad8715a8adbe94d39dab261e71', name: "start" }), index.h("div", { key: '80fecb4159d873e7d5994299229f80610f0ca1ed', class: utils.classnames('list', {
+                wrap: this.overflowMode === 'wrap',
+                scroll: this.overflowMode === 'scroll',
+            }), ref: el => (this.listEl = el) }, !firstHidden && firstVisible
+            ? this.renderItem(firstVisible.item, firstVisible.index)
+            : null, shouldCollapse && !firstHidden && firstVisible ? this.renderSeparator() : null, shouldCollapse ? this.renderMore(hiddenItems.map(h => h.item)) : null, (firstHidden ? visibleItems : remainingVisible).map(({ item, index: index$1 }, i) => (index.h(index.Fragment, null, this.renderSeparator(), index.h("span", { class: "crumb", key: `${item.label}-${index$1}-${i}` }, this.renderItem(item, index$1)))))), index.h("slot", { key: 'cd9f1f1200554f43cd144f07870aa3063de9a843', name: "end" })), index.h("span", { key: '3bd953f8c8a4bae9d2e1b3bbe61977d92b1f0f50', class: "hidden-slot", "aria-hidden": "true" }, index.h("slot", { key: '5deeddaba836a0ac6c698d25ed799670231c3acd', name: "separator", onSlotchange: this.handleSeparatorSlotChange }))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "items": ["handleInputsChange"],
+        "overflowMode": ["handleInputsChange"],
+        "minVisibleItems": ["handleInputsChange"]
+    }; }
+};
+LeBreadcrumbs.style = leBreadcrumbsCss();
+
+exports.le_breadcrumbs = LeBreadcrumbs;
+//# sourceMappingURL=le-breadcrumbs.entry.cjs.js.map

package/dist/cjs/le-card.cjs.entry.js

@@ -8,20 +8,20 @@ const leCardCss = () => `:host{display:block;--le-card-bg:var(--le-color-surface
 const LeCard = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Card variant style
+         * @allowedValues default | outlined | elevated
+         */
+        this.variant = 'default';
+        /**
+         * Whether the card is interactive (clickable)
+         */
+        this.interactive = false;
     }
-    get el() { return index.getElement(this); }
-    /**
-     * Card variant style
-     * @allowedValues default | outlined | elevated
-     */
-    variant = 'default';
-    /**
-     * Whether the card is interactive (clickable)
-     */
-    interactive = false;
     render() {
-        return (index.h("le-component", { key: 'b4203e8775f711c1ce4d8b9a4270815f122271f2', component: "le-card", hostClass: utils.classnames(`variant-${this.variant}`, { 'interactive': this.interactive }) }, index.h("div", { key: '0dc9231529fc6d2eb29bc5cde2c1dbf18b332a43', class: "card", part: "card" }, index.h("div", { key: '511fcec73b51b0931d92e0fee4d17b108c827e74', class: "card-header", part: "header" }, index.h("le-slot", { key: 'e50dbadbe53ce6fa343ac7cfccb5a5d8f58fbd01', name: "header", label: "Header", description: "Card title", type: "text", tag: "h3" }, index.h("slot", { key: '36e1f7c3c5c1c5a9d49261d1b1406efe4004389b', name: "header" }))), index.h("div", { key: 'f9da55c0661d7906161b77aa22edc1c6bb7fb8d4', class: "card-content", part: "content" }, index.h("le-slot", { key: '01670058d67851f1bd70b21fc4111b4bf2509f25', name: "", label: "Content", description: "Card content", type: "textarea", tag: "p", required: true }, index.h("slot", { key: 'e6eff48970eca2b3971f0ea7bfda3ca12bd1a3a1' }))), index.h("div", { key: 'ccd29257bc339a0d26c4750823fc635a182123cc', class: "card-footer", part: "footer" }, index.h("le-slot", { key: '198499afcbb9b0e82cac6cf976ab407697263c1f', name: "footer", label: "Footer", description: "Card footer with actions", "allowed-components": "le-button,le-link" }, index.h("slot", { key: '4d495b49f48ac142cdf739472b48d4bfb37933af', name: "footer" }))))));
+        return (index.h("le-component", { key: '50b722661132acca9396539021caebd0beb99c13', component: "le-card", hostClass: utils.classnames(`variant-${this.variant}`, { 'interactive': this.interactive }) }, index.h("div", { key: '4fa7de6abb9460281b1a98a158b76dcd0ee9fe8d', class: "card", part: "card" }, index.h("div", { key: '60b67d4d7416628fbd07aae2623aebeb10e78366', class: "card-header", part: "header" }, index.h("le-slot", { key: '1ef59c336f43b1292eae242b00e92d1b90ec1fd1', name: "header", label: "Header", description: "Card title", type: "text", tag: "h3" }, index.h("slot", { key: 'cdbf9d8ee5b832a7c7314443e974b6f3fe0d6ffd', name: "header" }))), index.h("div", { key: '11290af7a2fc3f927e825e06f5ae51797013592e', class: "card-content", part: "content" }, index.h("le-slot", { key: '29d5890f7b841138910c84bf9017462edb90a851', name: "", label: "Content", description: "Card content", type: "textarea", tag: "p", required: true }, index.h("slot", { key: '6e30f0ca8881825cf474e9d28ca7f16cc9e2feb6' }))), index.h("div", { key: '6e4824adaafef5e440e7d9e26d29048841e3cdba', class: "card-footer", part: "footer" }, index.h("le-slot", { key: 'aa734bdb5f1166bae0868949225bfc50cdb6e898', name: "footer", label: "Footer", description: "Card footer with actions", "allowed-components": "le-button,le-link" }, index.h("slot", { key: '6d3bf34e9585b38ce19aaeacf8259543560856a4', name: "footer" }))))));
     }
+    get el() { return index.getElement(this); }
 };
 LeCard.style = leCardCss();
 

package/dist/cjs/le-code-input.cjs.entry.js

@@ -12,70 +12,80 @@ const LeCodeInput = class {
         this.leInput = index.createEvent(this, "leInput");
         this.leFocus = index.createEvent(this, "leFocus");
         this.leBlur = index.createEvent(this, "leBlur");
+        /**
+         * 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);
+        };
     }
-    get el() { return index.getElement(this); }
-    /**
-     * The value of the input
-     */
-    value = '';
-    /**
-     * The name of the input
-     */
-    name;
-    /**
-     * Label for the input
-     */
-    label;
-    /**
-     * Length of the code (number of characters)
-     */
-    length = 6;
-    /**
-     * Description text displayed below the input
-     * in case there is a more complex markup,
-     * it can be provided via slot as well
-     */
-    description;
-    /**
-     * The type of code (numeric or alphanumeric)
-     * This affects the keyboard layout on mobile devices.
-     */
-    type = 'text';
-    /**
-     * Whether the input is disabled
-     */
-    disabled = false;
-    /**
-     * Whether the input is read-only
-     */
-    readonly = false;
-    /**
-     * External ID for linking with external systems
-     */
-    externalId;
-    /**
-     * Internal validation state (can be set externally manually or via simple check)
-     */
-    error = false;
-    /**
-     * Emitted when the value changes (on blur or Enter)
-     */
-    leChange;
-    /**
-     * Emitted when the input value changes (on keystroke)
-     */
-    leInput;
-    /**
-     * Emitted when the input is focused
-     */
-    leFocus;
-    /**
-     * Emitted when the input is blurred
-     */
-    leBlur;
-    isFocused = false;
-    selectionStart = 0;
-    selectionEnd = 0;
     valueChanged(newValue) {
         if (newValue && newValue.length > this.length) {
             this.value = newValue.slice(0, this.length);
@@ -86,51 +96,6 @@ const LeCodeInput = class {
             this.value = this.value.slice(0, this.length);
         }
     }
-    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,
-        });
-    };
-    handleChange = () => {
-        this.leChange.emit({
-            value: this.value,
-            name: this.name,
-            externalId: this.externalId,
-        });
-    };
-    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();
-    };
-    handleBlur = () => {
-        this.isFocused = false;
-        this.leBlur.emit();
-        // Trigger change on blur
-        this.handleChange();
-    };
-    handleSelect = (ev) => {
-        this.updateSelection(ev.target);
-    };
     updateSelection(input) {
         this.selectionStart = input.selectionStart || 0;
         this.selectionEnd = input.selectionEnd || 0;
@@ -167,10 +132,11 @@ const LeCodeInput = class {
         return boxes;
     }
     render() {
-        return (index.h("le-component", { key: '74615aa06971f7b2883e4a8e6f77b76918722e53', component: "le-code-input", hostClass: utils.classnames({ 'disabled': this.disabled, 'has-error': this.error }) }, index.h("div", { key: '423a974717f0676b266a362d0151540577ae8845', class: "le-code-input-wrapper" }, this.label && (index.h("label", { key: 'f2ba7d9c8a8a400ca31adc944919e4750785503d', class: "le-input-label", htmlFor: this.name }, this.label)), index.h("div", { key: 'f56b80ffc1362c164bdfe473877d934c252c9bd5', class: utils.classnames('input-group', { 'has-error': this.error }) }, index.h("input", { key: 'a94d422a0884c731ecfc6221133d725057fbb87c', 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,
+        return (index.h("le-component", { key: 'c9a4a92342645c54aee90091cd860fc439de6334', component: "le-code-input", hostClass: utils.classnames({ 'disabled': this.disabled, 'has-error': this.error }) }, index.h("div", { key: '50480c7c827ba801421c260c4e6fef88f22dcbd0', class: "le-code-input-wrapper" }, this.label && (index.h("label", { key: '316653c42c51ea0a443d8401c5adaf3e4821d7c8', class: "le-input-label", htmlFor: this.name }, this.label)), index.h("div", { key: '803789d07d538e1576dbb0ff7536110ab620632b', class: utils.classnames('input-group', { 'has-error': this.error }) }, index.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" }), index.h("div", { key: '9436ca5298d83aae923e762748d634b9517a3b17', class: "visual-container" }, this.renderBoxes())), !this.error && (index.h("div", { key: '398a377af9c6c26f441e94b3598a1007c64e6ea0', class: "le-input-description" }, index.h("le-slot", { key: '3d9a8c248efc57ffa026f9ffdf889599b276f344', name: "description", type: "text", tag: "p", label: "Description" }, index.h("slot", { key: '6873dec4bea990f9fe6de013e8fa729fc385871c', name: "description" }, this.description)))))));
+            spellcheck: false, autoCapitalize: "none", autoCorrect: "off" }), index.h("div", { key: '0ff57ab380039c4bbbbf0e347331eb6885f8ce63', class: "visual-container" }, this.renderBoxes())), !this.error && (index.h("div", { key: '7da46dfc052457588969a1c9631eb310d80030c4', class: "le-input-description" }, index.h("le-slot", { key: '7bcfa46fd981286736ea7ec490d65c962ef998d5', name: "description", type: "text", tag: "p", label: "Description" }, index.h("slot", { key: 'ee810bf920acc45c48b3cbc4ebf9598ac5937923', name: "description" }, this.description)))))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "value": ["valueChanged"]
     }; }