le-kit 0.5.2 → 0.5.4

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

@@ -1,106 +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);
-    }
-    get el() { return index.getElement(this); }
-    // progress value coming from an attribute
-    value = 0;
-    updateValue(newValue) {
-        this.value = parseFloat(newValue);
-    }
-    // padding value coming from an attribute
-    padding = 0;
-    updatePadding(newValue) {
-        this.padding = parseFloat(newValue);
-        this.calcParams();
-    }
-    // the progress backgrounds can be as many as needed
-    // but it should be JSON format: double quotes and strict commas
-    paths;
-    updateProgressBackgrounds(newValue) {
-        this.progressPaths = JSON.parse(newValue);
-    }
-    progressPaths;
-    params;
-    /**
-     * 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: 'dd678c7e3ff93c60f9eb6c2c09cbf1eab963ec69', class: "round-progress--container" }, this.getPaths(), index.h("svg", { key: '4a7fc03af132741d9bcddb10d94db800a51e53bc', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, index.h("path", { key: 'd3091d22a5c5e696d0e58748f880471d99f4ac4d', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), index.h("slot", { key: '8dabb64461b68928e1e58c48dcaec84f504d4639' })));
-    }
-    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,245 +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");
-    }
-    get el() { return index.getElement(this); }
-    containerRef;
-    /**
-     * Array of options for the segmented control.
-     */
-    options = [];
-    /**
-     * The value of the currently selected option.
-     */
-    value;
-    /**
-     * Size of the control.
-     * @allowedValues small | medium | large
-     */
-    size = 'medium';
-    /**
-     * Scroll behavior for overflowing tabs.
-     * @allowedValues auto | hidden | visible | scroll
-     */
-    overflow = 'auto';
-    /**
-     * Whether the control should take full width.
-     */
-    fullWidth = false;
-    /**
-     * Whether the control is disabled.
-     */
-    disabled = false;
-    /**
-     * Internal tab configurations (built from children or tabs prop)
-     */
-    segmentConfigs = [];
-    /**
-     * Internal state for focused index (keyboard navigation)
-     */
-    focusedIndex = 0;
-    /**
-     * Whether we're using declarative mode (le-tab children)
-     */
-    isDeclarativeMode = false;
-    /**
-     * Emitted when the selection changes.
-     */
-    leChange;
-    mutationObserver;
-    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 });
-    }
-    handleClick = (option) => {
-        this.selectOption(option);
-    };
-    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]);
-            }
-        }
-    };
-    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: 'dfe7d637e07af470756a57e8878e455c472a2790', class: `overflow-${this.overflow}` }, index.h("le-component", { key: '5ffa309951b8f509fe0b0db09a9273256ec5a1b5', component: "le-segmented-control" }, index.h("div", { key: 'a448e9be4011230c689a4bab5963f1588496c1ba', 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)));
-        })))));
-    }
-    static get watchers() { return {
-        "options": ["tabsChanged"]
-    }; }
-};
-LeSegmentedControl.style = leSegmentedControlCss();
-
-exports.le_segmented_control = LeSegmentedControl;
-//# sourceMappingURL=le-segmented-control.entry.cjs.js.map

package/dist/cjs/le-side-panel-toggle.cjs.entry.js

@@ -1,229 +0,0 @@
-'use strict';
-
-var index = require('./index-BzadfLTc.js');
-
-function parseShortcut(input) {
-    if (!input) {
-        return undefined;
-    }
-    const trimmed = input.trim();
-    if (!trimmed) {
-        return undefined;
-    }
-    const parts = trimmed
-        .split('+')
-        .map(p => p.trim())
-        .filter(Boolean);
-    if (parts.length === 0) {
-        return undefined;
-    }
-    const key = parts[parts.length - 1];
-    const mods = parts.slice(0, -1).map(m => m.toLowerCase());
-    const spec = {
-        key: key.toLowerCase(),
-        alt: mods.includes('alt') || mods.includes('option'),
-        ctrl: mods.includes('ctrl') || mods.includes('control'),
-        meta: mods.includes('meta') || mods.includes('cmd') || mods.includes('command'),
-        shift: mods.includes('shift'),
-    };
-    if (mods.includes('mod')) {
-        // mac: Cmd, others: Ctrl
-        const isMac = typeof navigator !== 'undefined' && /mac/i.test(navigator.platform);
-        if (isMac) {
-            spec.meta = true;
-        }
-        else {
-            spec.ctrl = true;
-        }
-    }
-    return spec;
-}
-function isEditableTarget(target) {
-    if (!(target instanceof HTMLElement)) {
-        return false;
-    }
-    const tag = target.tagName.toLowerCase();
-    if (tag === 'input' || tag === 'textarea' || tag === 'select') {
-        return true;
-    }
-    return target.isContentEditable;
-}
-const LeSidePanelToggle = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.leSidePanelRequestToggle = index.createEvent(this, "leSidePanelRequestToggle");
-    }
-    get el() { return index.getElement(this); }
-    /** Optional id used to target a specific panel. */
-    panelId;
-    /** Action to emit. Default toggles the panel. */
-    action = 'toggle';
-    /** Optional keyboard shortcut like `Mod+B` or `Alt+N`. */
-    shortcut;
-    /** Disables the toggle. */
-    disabled = false;
-    // Pass-through props for le-button
-    mode;
-    variant = 'solid';
-    color = 'primary';
-    size = 'medium';
-    selected = false;
-    fullWidth = false;
-    iconOnly;
-    iconStart;
-    iconEnd;
-    type = 'button';
-    href;
-    target;
-    align = 'center';
-    leSidePanelRequestToggle;
-    shortcutSpec;
-    expanded;
-    buttonEl;
-    forwardedNodes;
-    onShortcutChanged() {
-        this.shortcutSpec = parseShortcut(this.shortcut);
-        this.syncShortcutListener();
-    }
-    connectedCallback() {
-        this.shortcutSpec = parseShortcut(this.shortcut);
-        this.forwardedNodes = Array.from(this.el.childNodes);
-        {
-            this.syncShortcutListener();
-            document.addEventListener('leSidePanelOpenChange', this.onPanelStateChange);
-            document.addEventListener('leSidePanelCollapsedChange', this.onPanelStateChange);
-        }
-    }
-    componentDidLoad() {
-        this.syncForwardedNodesIntoButton();
-        this.syncAriaExpanded();
-    }
-    componentDidRender() {
-        this.syncForwardedNodesIntoButton();
-        this.syncAriaExpanded();
-    }
-    disconnectedCallback() {
-        {
-            document.removeEventListener('keydown', this.onDocumentKeyDown, true);
-            document.removeEventListener('leSidePanelOpenChange', this.onPanelStateChange);
-            document.removeEventListener('leSidePanelCollapsedChange', this.onPanelStateChange);
-        }
-    }
-    syncShortcutListener() {
-        if (this.shortcutSpec) {
-            document.addEventListener('keydown', this.onDocumentKeyDown, true);
-        }
-        else {
-            document.removeEventListener('keydown', this.onDocumentKeyDown, true);
-        }
-    }
-    getResolvedPanelId() {
-        if (this.panelId) {
-            return this.panelId;
-        }
-        const closestPanel = this.el?.closest?.('le-side-panel');
-        if (closestPanel?.panelId) {
-            return closestPanel.panelId;
-        }
-        return undefined;
-    }
-    emitRequest() {
-        if (this.disabled) {
-            return;
-        }
-        this.leSidePanelRequestToggle.emit({
-            panelId: this.getResolvedPanelId(),
-            action: this.action,
-        });
-    }
-    onDocumentKeyDown = (ev) => {
-        if (this.disabled) {
-            return;
-        }
-        const spec = this.shortcutSpec;
-        if (!spec) {
-            return;
-        }
-        if (isEditableTarget(ev.target)) {
-            return;
-        }
-        const key = (ev.key || '').toLowerCase();
-        if (key !== spec.key) {
-            return;
-        }
-        if (!!ev.altKey !== spec.alt) {
-            return;
-        }
-        if (!!ev.ctrlKey !== spec.ctrl) {
-            return;
-        }
-        if (!!ev.metaKey !== spec.meta) {
-            return;
-        }
-        if (!!ev.shiftKey !== spec.shift) {
-            return;
-        }
-        ev.preventDefault();
-        this.emitRequest();
-    };
-    onPanelStateChange = (ev) => {
-        const detail = ev.detail || {};
-        const requestedId = this.getResolvedPanelId() || '';
-        const eventId = detail.panelId || '';
-        if (requestedId !== eventId) {
-            return;
-        }
-        if (typeof detail.open === 'boolean') {
-            this.expanded = detail.open;
-            this.syncAriaExpanded();
-        }
-        if (typeof detail.collapsed === 'boolean') {
-            this.expanded = !detail.collapsed;
-            this.syncAriaExpanded();
-        }
-    };
-    syncForwardedNodesIntoButton() {
-        const btn = this.buttonEl;
-        if (!btn || !this.forwardedNodes || this.forwardedNodes.length === 0) {
-            return;
-        }
-        for (const node of this.forwardedNodes) {
-            if (!node) {
-                continue;
-            }
-            if (node.parentNode !== btn) {
-                try {
-                    btn.appendChild(node);
-                }
-                catch {
-                    // ignore
-                }
-            }
-        }
-    }
-    syncAriaExpanded() {
-        const value = typeof this.expanded === 'boolean' ? String(this.expanded) : null;
-        const hostBtn = this.buttonEl;
-        if (!hostBtn) {
-            return;
-        }
-        // Best-effort: set on the actual internal <button>/<a> inside le-button.
-        const inner = hostBtn.shadowRoot?.querySelector?.('[part="button"]') || null;
-        const target = inner || hostBtn;
-        if (value) {
-            target.setAttribute('aria-expanded', value);
-        }
-        else {
-            target.removeAttribute('aria-expanded');
-        }
-    }
-    render() {
-        return (index.h("le-button", { key: '382be5b4b8c301dc1d5b8c2d8709bd83cfc08409', ref: el => (this.buttonEl = el), mode: this.mode, variant: this.variant, color: this.color, size: this.size, selected: this.selected, fullWidth: this.fullWidth, iconOnly: this.iconOnly, iconStart: this.iconStart, iconEnd: this.iconEnd, disabled: this.disabled, type: this.type, href: this.href, target: this.target, align: this.align, onClick: () => this.emitRequest() }));
-    }
-    static get watchers() { return {
-        "shortcut": ["onShortcutChanged"]
-    }; }
-};
-
-exports.le_side_panel_toggle = LeSidePanelToggle;
-//# sourceMappingURL=le-side-panel-toggle.entry.cjs.js.map