le-kit 0.1.14 → 0.1.16

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

@@ -0,0 +1,565 @@
+import { h, Fragment, Host, } from "@stencil/core";
+import { classnames } from "../../utils/utils";
+/**
+ * A flexible tab component with multiple variants and states.
+ *
+ * @slot - Tab text content
+ * @slot icon-only - Icon for icon-only tabs
+ *
+ * @cssprop --le-tab-bg - Tab background color
+ * @cssprop --le-tab-color - Tab text color
+ * @cssprop --le-tab-border-radius - Tab border radius
+ * @cssprop --le-tab-padding-x - Tab horizontal padding
+ * @cssprop --le-tab-padding-y - Tab vertical padding
+ *
+ * @csspart button - The native button element
+ * @csspart content - The tab content wrapper
+ * @csspart icon-start - The start icon slot
+ * @csspart icon-end - The end icon slot
+ *
+ * @cmsEditable true
+ * @cmsCategory Actions
+ */
+export class LeTab {
+    el;
+    /**
+     * Mode of the popover should be 'default' for internal use
+     */
+    mode;
+    /**
+     * Label if it is not provided via slot
+     */
+    label;
+    /**
+     * Value of the tab, defaults to label if not provided
+     */
+    value;
+    /**
+     * Tab variant style
+     * @allowedValues solid | underlined | clear | enclosed | icon-only
+     */
+    variant = 'underlined';
+    /**
+     * Position of the tabs when used within a le-tabs component
+     * @allowedValues top | bottom | start | end
+     */
+    position = 'top';
+    /**
+     * Tab size
+     * @allowedValues small | medium | large
+     */
+    size = 'medium';
+    /**
+     * Whether the tab can get focus
+     * needed for accessibility when used in custom tab implementations
+     */
+    focusable = true;
+    /**
+     * Whether the tab is in a selected/active state
+     */
+    selected = false;
+    /**
+     * Whether the tab takes full width of its container
+     */
+    fullWidth = false;
+    /**
+     * Icon only tab image or emoji
+     * if this prop is set, the tab will render only the icon slot
+     */
+    icon;
+    /**
+     * Whether to show the label when in icon-only mode
+     */
+    showLabel = false;
+    /**
+     * Start icon image or emoji
+     */
+    iconStart;
+    /**
+     * End icon image or emoji
+     */
+    iconEnd;
+    /**
+     * Whether the tab is disabled
+     */
+    disabled = false;
+    /**
+     * Optional href to make the tab act as a link
+     */
+    href;
+    /**
+     * Link target when href is set
+     */
+    target;
+    /**
+     * Alignment of the tab label without the end icon
+     * @allowedValues start | center | space-between | end
+     */
+    align = 'center';
+    /**
+     * Get tab configuration for parent component
+     */
+    async getTabConfig() {
+        return {
+            label: this.label,
+            value: this.value ?? this.label,
+            icon: this.icon,
+            iconStart: this.iconStart,
+            iconEnd: this.iconEnd,
+            disabled: this.disabled,
+        };
+    }
+    /**
+     * Emitted when the tab is clicked.
+     * This is a custom event that wraps the native click but ensures the target is the le-tab.
+     */
+    leClick;
+    handleClick = (event) => {
+        // We stop the internal button click from bubbling up
+        event.stopPropagation();
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        // And emit our own click event from the host element
+        this.leClick.emit(event);
+    };
+    render() {
+        const classes = classnames(`variant-${this.variant}`, `size-${this.size}`, `position-${this.position}`, {
+            'selected': this.selected,
+            'full-width': this.fullWidth,
+            'icon-only': this.icon !== undefined,
+            'disabled': this.disabled,
+        });
+        const TagType = this.href ? 'a' : 'button';
+        const attrs = this.href
+            ? { href: this.href, target: this.target, role: 'button' }
+            : { disabled: this.disabled };
+        return (h(Host, { key: '6632a9b9df74dab0cb6bd638f35b55cc4a573e0e' }, h("le-component", { key: '3ed311094833d6e8819c35b1eaf69456dcb47773', component: "le-tab" }, h(TagType, { key: 'b9a3ca7a85e228da9a25ff9fc14a79cd9b4ffc41', class: classnames('le-tab-container', `le-tab-align-${this.align}`, classes), part: "button", ...attrs, onClick: this.handleClick, tabIndex: this.focusable ? 0 : -1 }, this.icon !== undefined ? (h("div", { class: "icon-only" }, h("div", { class: "icon" }, this.icon), this.showLabel && h("span", { class: "icon-label" }, this.label))) : (h(Fragment, null, h("span", { class: "le-tab-label" }, this.iconStart && (h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), h("le-slot", { name: "", description: "Tab text", type: "text", class: "content", part: "content" }, h("slot", null, this.label))), this.iconEnd && (h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
+    }
+    static get is() { return "le-tab"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-tab.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'default' | 'admin'",
+                    "resolved": "\"admin\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mode of the popover should be 'default' for internal use"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mode"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label if it is not provided via slot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of the tab, defaults to label if not provided"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'underlined' | 'solid' | 'pills' | 'enclosed' | 'icon-only'",
+                    "resolved": "\"enclosed\" | \"icon-only\" | \"pills\" | \"solid\" | \"underlined\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "solid | underlined | clear | enclosed | icon-only"
+                        }],
+                    "text": "Tab variant style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'underlined'"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom' | 'start' | 'end'",
+                    "resolved": "\"bottom\" | \"end\" | \"start\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "top | bottom | start | end"
+                        }],
+                    "text": "Position of the tabs when used within a le-tabs component"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'top'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "small | medium | large"
+                        }],
+                    "text": "Tab size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "focusable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tab can get focus\nneeded for accessibility when used in custom tab implementations"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "focusable",
+                "defaultValue": "true"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tab is in a selected/active state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tab takes full width of its container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Node",
+                    "resolved": "Node | string",
+                    "references": {
+                        "Node": {
+                            "location": "global",
+                            "id": "global::Node"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon only tab image or emoji\nif this prop is set, the tab will render only the icon slot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "showLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the label when in icon-only mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-label",
+                "defaultValue": "false"
+            },
+            "iconStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Node",
+                    "resolved": "Node | string",
+                    "references": {
+                        "Node": {
+                            "location": "global",
+                            "id": "global::Node"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Start icon image or emoji"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-start"
+            },
+            "iconEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Node",
+                    "resolved": "Node | string",
+                    "references": {
+                        "Node": {
+                            "location": "global",
+                            "id": "global::Node"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "End icon image or emoji"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-end"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tab is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional href to make the tab act as a link"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Link target when href is set"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'space-between' | 'end'",
+                    "resolved": "\"center\" | \"end\" | \"space-between\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "start | center | space-between | end"
+                        }],
+                    "text": "Alignment of the tab label without the end icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'center'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "leClick",
+                "name": "click",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the tab is clicked.\nThis is a custom event that wraps the native click but ensures the target is the le-tab."
+                },
+                "complexType": {
+                    "original": "PointerEvent",
+                    "resolved": "PointerEvent",
+                    "references": {
+                        "PointerEvent": {
+                            "location": "global",
+                            "id": "global::PointerEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getTabConfig": {
+                "complexType": {
+                    "signature": "() => Promise<{ label: string; value: string; icon: string | Node; iconStart?: string | Node; iconEnd?: string | Node; disabled: boolean; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Node": {
+                            "location": "global",
+                            "id": "global::Node"
+                        }
+                    },
+                    "return": "Promise<{ label: string; value: string; icon: string | Node; iconStart?: string | Node; iconEnd?: string | Node; disabled: boolean; }>"
+                },
+                "docs": {
+                    "text": "Get tab configuration for parent component",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=le-tab.js.map

package/dist/collection/components/le-tab/le-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-tab.js","sourceRoot":"","sources":["../../../src/components/le-tab/le-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  h,\n  Element,\n  Fragment,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n} from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible tab component with multiple variants and states.\n *\n * @slot - Tab text content\n * @slot icon-only - Icon for icon-only tabs\n *\n * @cssprop --le-tab-bg - Tab background color\n * @cssprop --le-tab-color - Tab text color\n * @cssprop --le-tab-border-radius - Tab border radius\n * @cssprop --le-tab-padding-x - Tab horizontal padding\n * @cssprop --le-tab-padding-y - Tab vertical padding\n *\n * @csspart button - The native button element\n * @csspart content - The tab content wrapper\n * @csspart icon-start - The start icon slot\n * @csspart icon-end - The end icon slot\n *\n * @cmsEditable true\n * @cmsCategory Actions\n */\n@Component({\n  tag: 'le-tab',\n  styleUrl: 'le-tab.css',\n  shadow: true,\n})\nexport class LeTab {\n  @Element() el: HTMLElement;\n\n  /**\n   * Mode of the popover should be 'default' for internal use\n   */\n  @Prop({ mutable: true, reflect: true }) mode: 'default' | 'admin';\n\n  /**\n   * Label if it is not provided via slot\n   */\n  @Prop() label?: string;\n\n  /**\n   * Value of the tab, defaults to label if not provided\n   */\n  @Prop() value?: string;\n\n  /**\n   * Tab variant style\n   * @allowedValues solid | underlined | clear | enclosed | icon-only\n   */\n  @Prop() variant: 'underlined' | 'solid' | 'pills' | 'enclosed' | 'icon-only' = 'underlined';\n\n  /**\n   * Position of the tabs when used within a le-tabs component\n   * @allowedValues top | bottom | start | end\n   */\n  @Prop() position: 'top' | 'bottom' | 'start' | 'end' = 'top';\n\n  /**\n   * Tab size\n   * @allowedValues small | medium | large\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether the tab can get focus\n   * needed for accessibility when used in custom tab implementations\n   */\n  @Prop() focusable: boolean = true;\n\n  /**\n   * Whether the tab is in a selected/active state\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * Whether the tab takes full width of its container\n   */\n  @Prop({ reflect: true }) fullWidth: boolean = false;\n\n  /**\n   * Icon only tab image or emoji\n   * if this prop is set, the tab will render only the icon slot\n   */\n  @Prop() icon?: string | Node;\n\n  /**\n   * Whether to show the label when in icon-only mode\n   */\n  @Prop() showLabel: boolean = false;\n\n  /**\n   * Start icon image or emoji\n   */\n  @Prop() iconStart?: string | Node;\n\n  /**\n   * End icon image or emoji\n   */\n  @Prop() iconEnd?: string | Node;\n\n  /**\n   * Whether the tab is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Optional href to make the tab act as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Link target when href is set\n   */\n  @Prop() target?: string;\n\n  /**\n   * Alignment of the tab label without the end icon\n   * @allowedValues start | center | space-between | end\n   */\n  @Prop() align: 'start' | 'center' | 'space-between' | 'end' = 'center';\n\n  /**\n   * Get tab configuration for parent component\n   */\n  @Method()\n  async getTabConfig(): Promise<{\n    label: string;\n    value: string;\n    icon: string | Node;\n    iconStart?: string | Node;\n    iconEnd?: string | Node;\n    disabled: boolean;\n  }> {\n    return {\n      label: this.label,\n      value: this.value ?? this.label,\n      icon: this.icon,\n      iconStart: this.iconStart,\n      iconEnd: this.iconEnd,\n      disabled: this.disabled,\n    };\n  }\n\n  /**\n   * Emitted when the tab is clicked.\n   * This is a custom event that wraps the native click but ensures the target is the le-tab.\n   */\n  @Event({ eventName: 'click' }) leClick: EventEmitter<PointerEvent>;\n\n  private handleClick = (event: PointerEvent) => {\n    // We stop the internal button click from bubbling up\n    event.stopPropagation();\n\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // And emit our own click event from the host element\n    this.leClick.emit(event);\n  };\n\n  render() {\n    const classes = classnames(\n      `variant-${this.variant}`,\n      `size-${this.size}`,\n      `position-${this.position}`,\n      {\n        'selected': this.selected,\n        'full-width': this.fullWidth,\n        'icon-only': this.icon !== undefined,\n        'disabled': this.disabled,\n      },\n    );\n\n    const TagType = this.href ? 'a' : 'button';\n    const attrs = this.href\n      ? { href: this.href, target: this.target, role: 'button' }\n      : { disabled: this.disabled };\n\n    return (\n      <Host>\n        <le-component component=\"le-tab\">\n          <TagType\n            class={classnames('le-tab-container', `le-tab-align-${this.align}`, classes)}\n            part=\"button\"\n            {...attrs}\n            onClick={this.handleClick}\n            tabIndex={this.focusable ? 0 : -1}\n          >\n            {this.icon !== undefined ? (\n              <div class=\"icon-only\">\n                <div class=\"icon\">{this.icon}</div>\n                {this.showLabel && <span class=\"icon-label\">{this.label}</span>}\n              </div>\n            ) : (\n              <Fragment>\n                <span class=\"le-tab-label\">\n                  {this.iconStart && (\n                    <span class=\"icon-start\" part=\"icon-start\">\n                      {this.iconStart}\n                    </span>\n                  )}\n                  <le-slot\n                    name=\"\"\n                    description=\"Tab text\"\n                    type=\"text\"\n                    class=\"content\"\n                    part=\"content\"\n                  >\n                    <slot>{this.label}</slot>\n                  </le-slot>\n                </span>\n                {this.iconEnd && (\n                  <span class=\"icon-end\" part=\"icon-end\">\n                    {this.iconEnd}\n                  </span>\n                )}\n              </Fragment>\n            )}\n          </TagType>\n        </le-component>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/le-tab-bar/le-tab-bar.css

@@ -0,0 +1,89 @@
+/**
+ * le-tab-bar - Default mode styles
+ */
+
+:host {
+  display: block;
+  --le-tab-bar-background: var(--le-color-surface);
+  --le-tab-bar-border-color: var(--le-color-border);
+  --le-tab-bar-gap: var(--le-spacing-2);
+  --le-tab-bar-padding-y: var(--le-spacing-2);
+  --le-tab-bar-padding-x: var(--le-spacing-1);
+
+  background: var(--le-tab-bar-background);
+  padding: var(--le-tab-bar-padding-y) var(--le-tab-bar-padding-x);
+}
+
+:host([full-width]) {
+  width: 100%;
+}
+:host(.bordered.position-top) {
+  border-bottom: 1px solid var(--le-tab-bar-border-color);
+}
+:host(.bordered.position-bottom) {
+  border-top: 1px solid var(--le-tab-bar-border-color);
+}
+
+/* ============================================
+ * TABLIST
+ * ============================================ */
+
+.tablist {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: space-around;
+  gap: var(--le-tab-bar-gap, var(--le-spacing-1));
+  width: 100%;
+}
+
+/* ============================================
+ * TAB BUTTON BASE
+ * ============================================ */
+
+.tab {
+  display: inline-flex;
+  align-items: flex-start;
+  justify-content: space-around;
+  gap: var(--le-spacing-2);
+  position: relative;
+  
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.tab-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ============================================
+ * TAB ICON
+ * ============================================ */
+
+.tab-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+  font-size: 1.1em;
+}
+
+.tab-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* ============================================
+ * TAB DESCRIPTION
+ * ============================================ */
+
+.tab-description {
+  font-size: var(--le-font-size-xs);
+  font-weight: var(--le-font-weight-normal);
+  color: var(--le-text-tertiary);
+  margin-left: var(--le-spacing-1);
+}