le-kit 0.5.3 → 0.6.0

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

@@ -1,162 +0,0 @@
-'use strict';
-
-var index = require('./index-BzadfLTc.js');
-var utils = require('./utils-Dxx9WhWK.js');
-
-const leNumberInputCss = () => `:host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999;--le-input-border-error:2px solid var(--le-color-danger, #dc3545);--le-input-error-color:var(--le-color-danger, #dc3545)}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-input-container.has-error{border:var(--le-input-border-error)}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;width:100%;height:calc(var(--le-input-height) - 2px);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;text-align:right;-moz-appearance:textfield;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-controls{display:flex;flex-direction:column;border-left:1px solid var(--le-color-border, #cccccc);height:100%}.le-input-control-btn{--le-button-border-radius:0;--le-button-padding-x:0;--le-button-padding-y:0;--le-button-small-font-size:9.5px;--le-button-small-padding:0 0.2rem;--le-button-icon-aspect-ratio:2;display:flex;align-items:center;justify-content:center;height:50%;cursor:pointer;background:none;border:none;color:var(--le-input-desc-color);font-size:10px;line-height:1}.le-input-control-btn:hover{background-color:rgba(0,0,0,0.05);color:var(--le-color-primary, #007bff)}.le-input-control-btn:active{background-color:rgba(0,0,0,0.1)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-error{font-size:0.85em;color:var(--le-input-error-color);margin-top:2px}`;
-
-const LeNumberInput = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.leChange = index.createEvent(this, "leChange");
-        this.leInput = index.createEvent(this, "leInput");
-        /**
-         * Step value for increment/decrement
-         */
-        this.step = 1;
-        /**
-         * Whether the input is required
-         */
-        this.required = false;
-        /**
-         * Whether the input is disabled
-         */
-        this.disabled = false;
-        /**
-         * Whether the input is read-only
-         */
-        this.readonly = false;
-        /**
-         * Whether to show the spinner controls
-         */
-        this.showSpinners = true;
-        /**
-         * Internal validation state
-         */
-        this.isValid = true;
-        this.validationMessage = '';
-        this.handleInput = (ev) => {
-            const input = ev.target;
-            const val = parseFloat(input.value);
-            if (input.value === '') {
-                this.value = undefined;
-            }
-            else if (!isNaN(val)) {
-                this.value = val;
-            }
-            this.validate();
-            this.emitInput();
-        };
-        this.handleChange = () => {
-            this.validate();
-            this.emitChange();
-        };
-        this.handleKeyDown = (ev) => {
-            if (this.disabled || this.readonly)
-                return;
-            let multiplier = 1;
-            if (ev.shiftKey)
-                multiplier = 10;
-            if (ev.altKey)
-                multiplier = 0.1;
-            const current = this.value || 0;
-            if (ev.key === 'ArrowUp') {
-                ev.preventDefault();
-                this.updateValue(current + (this.step * multiplier));
-            }
-            else if (ev.key === 'ArrowDown') {
-                ev.preventDefault();
-                this.updateValue(current - (this.step * multiplier));
-            }
-        };
-        this.handleWheel = (ev) => {
-            if (this.disabled || this.readonly)
-                return;
-            // Only handle if input is focused to prevent accidental scrolling
-            if (document.activeElement !== ev.target)
-                return;
-            ev.preventDefault();
-            const current = this.value || 0;
-            if (ev.deltaY < 0) {
-                this.updateValue(current + this.step);
-            }
-            else {
-                this.updateValue(current - this.step);
-            }
-        };
-        this.increment = (ev) => {
-            ev.preventDefault(); // Prevent focus loss
-            const current = this.value || 0;
-            this.updateValue(current + this.step);
-            // Trigger change event for buttons as they are "final" actions usually
-            this.emitChange();
-        };
-        this.decrement = (ev) => {
-            ev.preventDefault();
-            const current = this.value || 0;
-            this.updateValue(current - this.step);
-            this.emitChange();
-        };
-    }
-    valueChanged() {
-        this.validate();
-    }
-    validate() {
-        if (this.required && (this.value === undefined || this.value === null || isNaN(this.value))) {
-            this.isValid = false;
-            this.validationMessage = 'This field is required';
-            return;
-        }
-        if (this.value !== undefined && this.value !== null && !isNaN(this.value)) {
-            if (this.min !== undefined && this.value < this.min) {
-                this.isValid = false;
-                this.validationMessage = `Value must be at least ${this.min}`;
-                return;
-            }
-            if (this.max !== undefined && this.value > this.max) {
-                this.isValid = false;
-                this.validationMessage = `Value must be at most ${this.max}`;
-                return;
-            }
-        }
-        this.isValid = true;
-        this.validationMessage = '';
-    }
-    emitChange() {
-        this.leChange.emit({
-            value: this.value,
-            name: this.name,
-            externalId: this.externalId,
-            isValid: this.isValid
-        });
-    }
-    emitInput() {
-        this.leInput.emit({
-            value: this.value,
-            name: this.name,
-            externalId: this.externalId,
-            isValid: this.isValid
-        });
-    }
-    updateValue(newValue) {
-        if (this.disabled || this.readonly)
-            return;
-        // Round to avoid floating point errors
-        const precision = this.step.toString().split('.')[1]?.length || 0;
-        const rounded = parseFloat(newValue.toFixed(precision));
-        this.value = rounded;
-        this.validate();
-        this.emitInput();
-    }
-    render() {
-        return (index.h("le-component", { key: '3448b68633e7ebde8e6175f29047791c9094dc49', component: "le-number-input", hostClass: utils.classnames({ 'disabled': this.disabled }) }, index.h("div", { key: 'd941698c42e2dd9a5b2dbe60decfa9692c840c1a', class: "le-input-wrapper" }, this.label && (index.h("label", { key: 'c2b255bf365937e2233835ef6564b81f8a1872a5', class: "le-input-label", htmlFor: this.name }, this.label)), index.h("div", { key: '6090fe6737015bc1cd87ef881276975870e6797c', class: utils.classnames('le-input-container', { 'has-error': !this.isValid }) }, this.iconStart && (index.h("span", { key: 'e453aa8eb57857540b29d78c3f61ec371be6c71a', class: "icon-start" }, this.iconStart)), index.h("input", { key: '3e9d52dbfcc1bac000e0ca9663595aaac8f42d85', id: this.name, type: "number", name: this.name, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onWheel: this.handleWheel }), this.showSpinners && (index.h("div", { key: 'dd4e42f8a9916574e61643dbe90bae50e2defb77', class: "le-input-controls" }, index.h("le-button", { key: '5aa823b516f6f71a26b5749959dec30fac2b65b3', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.increment, disabled: this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max), tabindex: "-1" }, index.h("span", { key: 'c1858ce8cf23de1610ac6e957bd40ec2fe7a97ea', slot: "icon-only" }, "\u2191")), index.h("le-button", { key: '71982d4f725dc9a94144033e2b328f33699264e4', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.decrement, disabled: this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min), tabindex: "-1" }, index.h("span", { key: '0c5225558cf4adf80e63dcfafe1bb83d80fbb7dd', slot: "icon-only" }, "\u2193"))))), !this.isValid && index.h("div", { key: 'd97bc87f564b9a23dac85b518895e7ffcbd72aa8', class: "le-input-error" }, this.validationMessage), index.h("div", { key: '257757f47a84f40c48e98672d6217ec565f37cce', class: "le-input-description" }, index.h("le-slot", { key: '89c69d0be6c3ef9975d2b2ab21f65c916067d452', name: "description", type: "text", tag: "p", label: "Description" }, index.h("slot", { key: '9dffb85d1c8e2463d05a514b1659d0ac3eee802e', name: "description" }))))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "value": ["valueChanged"]
-    }; }
-};
-LeNumberInput.style = leNumberInputCss();
-
-exports.le_number_input = LeNumberInput;
-//# sourceMappingURL=le-number-input.entry.cjs.js.map

package/dist/cjs/le-round-progress.cjs.entry.js

@@ -1,101 +0,0 @@
-'use strict';
-
-var index = require('./index-BzadfLTc.js');
-
-const leRoundProgressCss = () => `.round-progress--container{position:relative}.round-progress{position:absolute;top:0;left:0;right:0;bottom:0;display:block}.round-progress--progress{filter:drop-shadow(var(--progress-shadow))}.round-progress--circle{fill:none;stroke:var(--progress-color, #999);stroke-width:var(--progress-width, 4);stroke-linecap:var(--progress-linecap, round);animation:progress--circle 0.5s ease-out forwards;transition:stroke-dasharray 0.5s ease-out}@keyframes progress--circle{0%{stroke-dasharray:0 1000}}.round-progress--path{fill:none;stroke-linecap:round}`;
-
-const LeRoundProgress = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        // progress value coming from an attribute
-        this.value = 0;
-        // padding value coming from an attribute
-        this.padding = 0;
-    }
-    updateValue(newValue) {
-        this.value = parseFloat(newValue);
-    }
-    updatePadding(newValue) {
-        this.padding = parseFloat(newValue);
-        this.calcParams();
-    }
-    updateProgressBackgrounds(newValue) {
-        this.progressPaths = JSON.parse(newValue);
-    }
-    /**
-     * Component lifecycles
-     *
-     * Before the component is loaded, we need to calculate and update params
-     * using the component size (width of the round progress)
-     * and progress width (max of )
-     */
-    componentWillLoad() {
-        if (typeof this.paths === 'string') {
-            this.updateProgressBackgrounds(this.paths);
-        }
-        this.calcParams();
-    }
-    calcParams() {
-        // get element width
-        const width = this.el.getBoundingClientRect().width;
-        const diameter = width - this.padding;
-        // calc circumference — we'll need it later to calc the stroke paths
-        const circumference = Math.PI * diameter;
-        this.params = { width, diameter, circumference };
-    }
-    /**
-     * Returns the viewPath attribute value for the SVG
-     * based on the width of the parent element
-     */
-    getViewBox() {
-        return '0 0 ' + this.params.width + ' ' + this.params.width;
-    }
-    /**
-     * Returns the circular path for the progress stroke
-     * and additional paths in the background
-     */
-    getPath() {
-        return ('M' +
-            this.params.width / 2 +
-            ' ' +
-            (this.params.width - this.params.diameter) / 2 +
-            ' a ' +
-            this.params.diameter / 2 +
-            ' ' +
-            this.params.diameter / 2 +
-            ' 0 0 1 0 ' +
-            this.params.diameter +
-            ' a ' +
-            this.params.diameter / 2 +
-            ' ' +
-            this.params.diameter / 2 +
-            ' 0 0 1 0 -' +
-            this.params.diameter);
-    }
-    getStrokeDashArray() {
-        return (this.value / 100) * this.params.circumference + ', ' + this.params.circumference;
-    }
-    getPaths() {
-        if (!this.progressPaths || !this.progressPaths.length) {
-            return null;
-        }
-        let paths = [];
-        this.progressPaths.forEach(bg => {
-            paths.push(index.h("path", { class: "round-progress--path", d: this.getPath(), stroke: bg.color, "stroke-width": bg.width, "stroke-dasharray": bg.dasharray, "stroke-linecap": bg.linecap }));
-        });
-        return (index.h("svg", { viewBox: this.getViewBox(), class: "round-progress" }, paths));
-    }
-    render() {
-        return (index.h("div", { key: '5a51e57f587b1c065bc63091a4d824006ffb0547', class: "round-progress--container" }, this.getPaths(), index.h("svg", { key: '12ca2118e9f5ff3dc472f1d20a4a4d4dbd3b97c0', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, index.h("path", { key: '7fb75f5b03fe34d4a0f9ecdba94db95ba59a7756', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), index.h("slot", { key: 'a855a01d4332479f6488d1e7a7760d70e29eb707' })));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "value": ["updateValue"],
-        "padding": ["updatePadding"],
-        "paths": ["updateProgressBackgrounds"]
-    }; }
-};
-LeRoundProgress.style = leRoundProgressCss();
-
-exports.le_round_progress = LeRoundProgress;
-//# sourceMappingURL=le-round-progress.entry.cjs.js.map

package/dist/cjs/le-segmented-control.cjs.entry.js

@@ -1,235 +0,0 @@
-'use strict';
-
-var index = require('./index-BzadfLTc.js');
-
-const leSegmentedControlCss = () => `:host{display:inline-block;max-width:100%;--le-segmented-control-bg:var(--le-color-background-secondary);--le-segmented-control-padding:var(--le-spacing-1)}:host([full-width]){width:100%}:host(.overflow-visible){max-width:none}.le-segmented-control{flex-direction:row;white-space:nowrap;border:none;gap:0;background-color:var(--le-segmented-control-bg);border-radius:calc(var(--le-radius-md) + var(--le-segmented-control-padding));padding:var(--le-segmented-control-padding)}.le-segmented-control.overflow-auto{overflow:auto}.le-segmented-control.overflow-hidden{overflow:hidden}.le-segmented-control.overflow-visible{overflow:visible}.le-segmented-control.overflow-scroll{overflow:scroll}.le-segmented-control.full-width{display:flex;width:100%;width:calc(100% - var(--le-segmented-control-padding) * 2)}.le-segmented-control.disabled{opacity:0.5;pointer-events:none}.le-segmented-control:focus{outline:2px solid var(--le-color-focus);outline-offset:2px}.full-width .segment{flex:1}.segment:focus-visible{outline:2px solid var(--le-focus-ring-color, var(--le-color-primary));outline-offset:2px}.segment-active{color:var(--le-segmented-text-color-active, var(--le-text-primary))}.segment-disabled{opacity:0.5;cursor:not-allowed}`;
-
-const LeSegmentedControl = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.leChange = index.createEvent(this, "leChange");
-        /**
-         * Array of options for the segmented control.
-         */
-        this.options = [];
-        /**
-         * Size of the control.
-         * @allowedValues small | medium | large
-         */
-        this.size = 'medium';
-        /**
-         * Scroll behavior for overflowing tabs.
-         * @allowedValues auto | hidden | visible | scroll
-         */
-        this.overflow = 'auto';
-        /**
-         * Whether the control should take full width.
-         */
-        this.fullWidth = false;
-        /**
-         * Whether the control is disabled.
-         */
-        this.disabled = false;
-        /**
-         * Internal tab configurations (built from children or tabs prop)
-         */
-        this.segmentConfigs = [];
-        /**
-         * Internal state for focused index (keyboard navigation)
-         */
-        this.focusedIndex = 0;
-        /**
-         * Whether we're using declarative mode (le-tab children)
-         */
-        this.isDeclarativeMode = false;
-        this.handleClick = (option) => {
-            this.selectOption(option);
-        };
-        this.handleKeyDown = (event) => {
-            const { segmentConfigs } = this;
-            let newIndex = this.focusedIndex;
-            switch (event.key) {
-                case 'ArrowLeft':
-                    event.preventDefault();
-                    newIndex = this.findNextEnabled(-1);
-                    break;
-                case 'ArrowRight':
-                    event.preventDefault();
-                    newIndex = this.findNextEnabled(1);
-                    break;
-                case 'Home':
-                    event.preventDefault();
-                    newIndex = this.findFirstEnabled();
-                    break;
-                case 'End':
-                    event.preventDefault();
-                    newIndex = this.findLastEnabled();
-                    break;
-                case 'Enter':
-                case ' ':
-                    event.preventDefault();
-                    if (segmentConfigs[this.focusedIndex]) {
-                        this.selectOption(segmentConfigs[this.focusedIndex]);
-                    }
-                    return;
-                default:
-                    return;
-            }
-            if (newIndex !== this.focusedIndex) {
-                this.focusedIndex = newIndex;
-                this.focusSegment(newIndex);
-                if (segmentConfigs[newIndex]) {
-                    this.selectOption(segmentConfigs[newIndex]);
-                }
-            }
-        };
-    }
-    tabsChanged() {
-        if (!this.isDeclarativeMode) {
-            this.buildSegmentsConfigs();
-        }
-    }
-    handleSlotChange() {
-        this.buildSegmentsConfigs();
-    }
-    componentWillLoad() {
-        this.buildSegmentsConfigs();
-        if (this.value === undefined && this.options.length > 0) {
-            const firstEnabled = this.options.find(opt => !opt.disabled);
-            if (firstEnabled) {
-                this.value = this.getOptionValue(firstEnabled);
-            }
-        }
-        if (this.value !== undefined) {
-            const index = this.getOptionIndex(this.value);
-            if (index >= 0) {
-                this.focusedIndex = index;
-            }
-        }
-    }
-    connectedCallback() {
-        // Watch for dynamic changes to children
-        this.mutationObserver = new MutationObserver(() => {
-            this.buildSegmentsConfigs();
-        });
-        this.mutationObserver.observe(this.el, {
-            attributes: true,
-            childList: true,
-            subtree: true,
-        });
-    }
-    disconnectedCallback() {
-        this.mutationObserver?.disconnect();
-    }
-    async buildSegmentsConfigs() {
-        // Check for le-tab children
-        const segments = Array.from(this.el.querySelectorAll(':scope > le-tab'));
-        if (segments.length > 0) {
-            // Declarative mode - build from children
-            this.isDeclarativeMode = true;
-            const configs = [];
-            for (const segment of segments) {
-                const config = await segment.getTabConfig();
-                configs.push({ ...config });
-            }
-            this.segmentConfigs = configs;
-        }
-        else if (this.options.length > 0) {
-            // Programmatic mode - use options prop
-            this.isDeclarativeMode = false;
-            this.segmentConfigs = this.options.map(option => ({
-                label: option.label,
-                value: (option.value !== undefined ? option.value : option.label),
-                iconStart: option.iconStart,
-                iconEnd: option.iconEnd,
-                disabled: option.disabled ?? false,
-            }));
-        }
-        else {
-            this.segmentConfigs = [];
-        }
-        // Set default selected
-        if (this.value === undefined && this.segmentConfigs.length > 0) {
-            const firstEnabled = this.segmentConfigs.find(t => !t.disabled);
-            if (firstEnabled) {
-                this.value = firstEnabled.value;
-            }
-        }
-        // Initialize focused index
-        if (this.value !== undefined) {
-            const index = this.segmentConfigs.findIndex(t => t.value === this.value);
-            if (index >= 0) {
-                this.focusedIndex = index;
-            }
-        }
-    }
-    getOptionValue(option) {
-        return option.value !== undefined ? option.value : option.label;
-    }
-    getOptionIndex(value) {
-        return this.options.findIndex(opt => this.getOptionValue(opt) === value);
-    }
-    selectOption(option) {
-        if (option.disabled || this.disabled)
-            return;
-        const value = this.getOptionValue(option);
-        this.value = value;
-        // update focused index
-        const index = this.segmentConfigs.findIndex(seg => seg.value === value);
-        if (index >= 0) {
-            this.focusedIndex = index;
-        }
-        this.leChange.emit({ value, option });
-    }
-    findNextEnabled(direction) {
-        const { segmentConfigs } = this;
-        let index = this.focusedIndex;
-        const length = segmentConfigs.length;
-        for (let i = 0; i < length; i++) {
-            index = (index + direction + length) % length;
-            if (!segmentConfigs[index].disabled) {
-                return index;
-            }
-        }
-        return this.focusedIndex;
-    }
-    findFirstEnabled() {
-        return this.segmentConfigs.findIndex(opt => !opt.disabled);
-    }
-    findLastEnabled() {
-        for (let i = this.segmentConfigs.length - 1; i >= 0; i--) {
-            if (!this.segmentConfigs[i].disabled)
-                return i;
-        }
-        return 0;
-    }
-    focusSegment(index) {
-        const container = this.containerRef;
-        const segment = container?.querySelectorAll('.segment')[index];
-        segment?.focus();
-    }
-    render() {
-        const { segmentConfigs, value, size, fullWidth, disabled } = this;
-        const classes = {
-            'le-segmented-control': true,
-            [`size-${size}`]: true,
-            [`overflow-${this.overflow}`]: true,
-            'full-width': fullWidth,
-            'disabled': disabled,
-        };
-        return (index.h(index.Host, { key: 'dd580b3e3f6ca9fc5d8316978f0fcd77832d562f', class: `overflow-${this.overflow}` }, index.h("le-component", { key: 'baf3bf0005cdb4678eac78b73f3c7140ba631159', component: "le-segmented-control" }, index.h("div", { key: 'bc78e64043731781fddb107321c22187314f20c0', class: classes, ref: el => (this.containerRef = el), role: "radiogroup", part: "container", onKeyDown: this.handleKeyDown, tabIndex: 0 }, segmentConfigs.map(option => {
-            const optValue = this.getOptionValue(option);
-            const isSelected = optValue === value;
-            const isDisabled = option.disabled || disabled;
-            return (index.h("le-tab", { key: optValue, class: "segment", role: "radio", variant: "enclosed", selected: isSelected, disabled: isDisabled, focusable: false, size: size, part: isSelected ? 'segment segment-active' : 'segment', "aria-checked": isSelected ? 'true' : 'false', "aria-disabled": isDisabled ? 'true' : undefined, onClick: () => this.handleClick(option), iconStart: option.iconStart, iconEnd: option.iconEnd }, index.h("span", { class: "segment-label" }, option.label)));
-        })))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "options": ["tabsChanged"]
-    }; }
-};
-LeSegmentedControl.style = leSegmentedControlCss();
-
-exports.le_segmented_control = LeSegmentedControl;
-//# sourceMappingURL=le-segmented-control.entry.cjs.js.map