le-kit 0.3.5 → 0.4.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BPF04Jvb.js');
+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}`;
 
@@ -228,7 +228,7 @@ const LeSegmentedControl = class {
             'full-width': fullWidth,
             'disabled': disabled,
         };
-        return (index.h(index.Host, { key: 'a285c7c0ca824e96670b51dc638301c2c8ab6a6b', class: `overflow-${this.overflow}` }, index.h("le-component", { key: '6afe6d0861d3e797efabac23b24ad9731e19b6dd', component: "le-segmented-control" }, index.h("div", { key: '251f4d07960c6f464001cf6fda7643fe8db6af09', class: classes, ref: el => (this.containerRef = el), role: "radiogroup", part: "container", onKeyDown: this.handleKeyDown, tabIndex: 0 }, segmentConfigs.map(option => {
+        return (index.h(index.Host, { key: '8cf5102c9418447bc6648a367261d1ebe9dd8e96', class: `overflow-${this.overflow}` }, index.h("le-component", { key: '035ed7391d0ca24d020383a8e03fee4e366c1216', component: "le-segmented-control" }, index.h("div", { key: '7273688a85a0f3b4b4fabb5e754bcd1b69adefb3', 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;

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

@@ -0,0 +1,229 @@
+'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