le-kit 0.1.18 → 0.2.0

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

@@ -0,0 +1,168 @@
+/**
+ * Based on the script from Paul Andreson's article:
+ * https://paulcpederson.com/articles/stencil-icons/
+ */
+import { Build, getAssetPath, h } from "@stencil/core";
+const iconCache = {};
+const requestCache = {};
+async function fetchIcon({ name }) {
+    if (iconCache[name]) {
+        return iconCache[name];
+    }
+    if (!requestCache[name]) {
+        requestCache[name] = fetch(getAssetPath(`./assets/icons/${name}.json`))
+            .then(resp => resp.json())
+            .catch(() => {
+            console.error(`"${name}" is not a valid name`);
+            return '';
+        });
+    }
+    const path = await requestCache[name];
+    iconCache[name] = path;
+    return path;
+}
+export class LeIcon {
+    el;
+    /**
+     * Name of the icon to display. Corresponds to a JSON file in the assets folder.
+     * For example, "search" will load the "search.json" file.
+     */
+    name = null;
+    /**
+     * Size of the icon in pixels. Default is 16.
+     */
+    size = 16;
+    iconData = null;
+    visible = false;
+    async loadIconData() {
+        const { name, visible } = this;
+        if (!Build.isBrowser || !name || !visible) {
+            return;
+        }
+        this.iconData = await fetchIcon({ name });
+    }
+    intersectionObserver;
+    connectedCallback() {
+        this.waitUntilVisible(() => {
+            this.visible = true;
+            this.loadIconData();
+        });
+    }
+    disconnectedCallback() {
+        if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+            this.intersectionObserver = null;
+        }
+    }
+    async componentWillLoad() {
+        this.loadIconData();
+    }
+    waitUntilVisible(callback) {
+        if (!Build.isBrowser ||
+            typeof window === 'undefined' ||
+            !window.IntersectionObserver) {
+            callback();
+            return;
+        }
+        this.intersectionObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    this.intersectionObserver.disconnect();
+                    this.intersectionObserver = null;
+                    callback();
+                }
+            });
+        }, { rootMargin: '50px' });
+        this.intersectionObserver.observe(this.el);
+    }
+    /**
+     * Renders the SVG content out of a JSON data in a format:
+     * { "viewBox": "...", children: [{ "tag": "g", ""children": [ ... ], ...attrs }, ...] }
+     *
+     * @returns JSX.Element | null
+     */
+    renderSVGContent(children) {
+        if (!children || children.length === 0) {
+            return null;
+        }
+        const createElement = node => {
+            const { tag, children, ...attrs } = node;
+            return h(tag, attrs, children ? children.map(createElement) : null);
+        };
+        const svgElements = children.map(createElement);
+        return svgElements;
+    }
+    render() {
+        return (h("svg", { key: 'bf1ded84a38f5d8fdb1723476f4709dc58f71def', xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: this.size, width: this.size, viewBox: this.iconData?.viewBox || `0 0 ${this.size} ${this.size}` }, this.renderSVGContent(this.iconData?.children)));
+    }
+    static get is() { return "le-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the icon to display. Corresponds to a JSON file in the assets folder.\nFor example, \"search\" will load the \"search.json\" file."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "null"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the icon in pixels. Default is 16."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "16"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "iconData": {},
+            "visible": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "name",
+                "methodName": "loadIconData"
+            }];
+    }
+}
+//# sourceMappingURL=le-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"le-icon.js","sourceRoot":"","sources":["../../../src/components/le-icon/le-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Based on the script from Paul Andreson's article:\n * https://paulcpederson.com/articles/stencil-icons/\n */\nimport { Build, Component, Element, getAssetPath, h, Prop, State, Watch } from '@stencil/core';\n\nconst iconCache = {};\nconst requestCache = {};\n\nasync function fetchIcon({ name }): Promise<string> {\n  if (iconCache[name]) {\n    return iconCache[name];\n  }\n  if (!requestCache[name]) {\n    requestCache[name] = fetch(getAssetPath(`./assets/icons/${name}.json`))\n      .then(resp => resp.json())\n      .catch(() => {\n        console.error(`\"${name}\" is not a valid name`);\n        return '';\n      });\n  }\n\n  const path = await requestCache[name];\n  iconCache[name] = path;\n\n  return path;\n}\n\n@Component({\n  tag: 'le-icon',\n  styleUrl: 'le-icon.css',\n  shadow: true,\n})\nexport class LeIcon {\n  @Element() el: HTMLElement;\n\n  /**\n   * Name of the icon to display. Corresponds to a JSON file in the assets folder.\n   * For example, \"search\" will load the \"search.json\" file.\n   */\n  @Prop() name: string = null;\n\n  /**\n   * Size of the icon in pixels. Default is 16.\n   */\n  @Prop() size: number = 16;\n\n  @State() private iconData: any = null;\n\n  @State() private visible = false;\n\n  @Watch('name') private async loadIconData(): Promise<void> {\n    const { name, visible } = this;\n\n    if (!Build.isBrowser || !name || !visible) {\n      return;\n    }\n\n    this.iconData = await fetchIcon({ name });\n  }\n\n  private intersectionObserver: IntersectionObserver;\n\n  connectedCallback(): void {\n    this.waitUntilVisible(() => {\n      this.visible = true;\n      this.loadIconData();\n    });\n  }\n\n  disconnectedCallback(): void {\n    if (this.intersectionObserver) {\n      this.intersectionObserver.disconnect();\n      this.intersectionObserver = null;\n    }\n  }\n\n  async componentWillLoad(): Promise<void> {\n    this.loadIconData();\n  }\n\n  private waitUntilVisible(callback: () => void): void {\n    if (\n      !Build.isBrowser ||\n      typeof window === 'undefined' ||\n      !(window as any).IntersectionObserver\n    ) {\n      callback();\n      return;\n    }\n\n    this.intersectionObserver = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            this.intersectionObserver.disconnect();\n            this.intersectionObserver = null;\n            callback();\n          }\n        });\n      },\n      { rootMargin: '50px' },\n    );\n\n    this.intersectionObserver.observe(this.el);\n  }\n\n  /**\n   * Renders the SVG content out of a JSON data in a format:\n   * { \"viewBox\": \"...\", children: [{ \"tag\": \"g\", \"\"children\": [ ... ], ...attrs }, ...] }\n   *\n   * @returns JSX.Element | null\n   */\n  private renderSVGContent(children?: any[]) {\n    if (!children || children.length === 0) {\n      return null;\n    }\n\n    const createElement = node => {\n      const { tag, children, ...attrs } = node;\n      return h(tag, attrs, children ? children.map(createElement) : null);\n    };\n\n    const svgElements = children.map(createElement);\n    return svgElements;\n  }\n\n  render() {\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        height={this.size}\n        width={this.size}\n        viewBox={this.iconData?.viewBox || `0 0 ${this.size} ${this.size}`}\n      >\n        {this.renderSVGContent(this.iconData?.children)}\n      </svg>\n    );\n  }\n}\n"]}

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

@@ -308,13 +308,13 @@ export class LeMultiselect {
     render() {
         const hasSelections = this.selectedOptions.length > 0;
         const atMaxSelections = this.maxSelections && this.value.length >= this.maxSelections;
-        return (h("le-component", { key: '41e4bfe6f961a44cae4cb8de69d836da9dab2a42', component: "le-multiselect" }, h("le-dropdown-base", { key: '74b05d1f6b8930fe97f4f2ae861a12c1749640fe', ref: el => (this.dropdownEl = el), options: this.effectiveOptions, value: this.value, multiple: true, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, emptyText: this.emptyText, showCheckboxes: true, fullWidth: this.fullWidth, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose }, h("div", { key: 'f270977fc98dd71908e63ae6acebaf2d275a8451', slot: "trigger", class: {
+        return (h("le-component", { key: '6fa8274a23f2cc144150442ca9478d405fa9db59', component: "le-multiselect" }, h("le-dropdown-base", { key: 'eccf77b1d40bcc1dbae6d6e73523199dba89c02a', ref: el => (this.dropdownEl = el), options: this.effectiveOptions, value: this.value, multiple: true, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, emptyText: this.emptyText, showCheckboxes: true, fullWidth: this.fullWidth, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose }, h("div", { key: '3c665ad3efc5543a9afcb836c8a996030460723a', slot: "trigger", class: {
                 'multiselect-trigger': true,
                 'has-selections': hasSelections,
                 'is-open': this.open,
                 'is-disabled': this.disabled,
-            }, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.renderTags(), h("div", { key: '9323e791cb4e6e822b493aac81868fc98c10f28f', class: "multiselect-actions" }, hasSelections && !this.disabled && (h("button", { key: '9fcc99acf644977a4f6bb1a54ad47ea1a0521e82', type: "button", class: "multiselect-clear", onClick: this.handleClearAll, "aria-label": "Clear all", tabIndex: -1 }, h("svg", { key: 'd82a6a3b3454854e6357156bed2dcf77fc76309b', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'efcd41249ae3166b87b8edd12e85ce6dc44c1ca7', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: '07f295dfa81aca548bddeb9b00324ad28be84c0d', class: "multiselect-arrow" }, h("svg", { key: 'ab794b727c4de9af2fd8e1f5bf5fdd4370fc60a5', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '7b5b9628aa0f6cf44a5806cd01fb80ff07e6a05a', d: "M4 6l4 4 4-4" }))))), this.searchable && this.open && (h("div", { key: 'a1da7b5910a7899cf18159e4c1ad9b230eb94ae5', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: '8b2e0876aa7f07e5b35379b2154a2cf548731c26', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name &&
-            this.value.map(val => (h("input", { type: "hidden", name: this.name, value: val.toString(), key: val.toString() }))), atMaxSelections && (h("span", { key: '5d98fd2daa6a9ddbc90b9be701fda628156dbe62', class: "multiselect-status" }, "Maximum ", this.maxSelections, " selections"))));
+            }, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.renderTags(), h("div", { key: 'a19d6d1dfa9bfb757874bb4e39f75e3dc8e4f101', class: "multiselect-actions" }, hasSelections && !this.disabled && (h("button", { key: 'f639279dd53a1eaff6ff146c57129d598bc55ca5', type: "button", class: "multiselect-clear", onClick: this.handleClearAll, "aria-label": "Clear all", tabIndex: -1 }, h("svg", { key: 'a5458f2d7dae924b7f943df067269beca1d9bfdd', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'c2fd9f943f0496e2c0e0ecbb79e1a16993cb796d', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: 'bd7fc5ef0af6b937fea089881f3d5fc881219247', class: "multiselect-arrow" }, h("svg", { key: '180c1c3b35713fc5de0aade07ef3524dd674cca5', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '48c1e6e3f2c0c20b52d2ba551d2720e5da5f0bed', d: "M4 6l4 4 4-4" }))))), this.searchable && this.open && (h("div", { key: '3b6dbe407a4d33065ff50496c14a71ebd27e71bb', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: '35ed3a229b0ca6f4e1f9e8732c94a531af2d7fb3', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name &&
+            this.value.map(val => (h("input", { type: "hidden", name: this.name, value: val.toString(), key: val.toString() }))), atMaxSelections && (h("span", { key: '214ee34c77755375045fce655129736ff4a1ef0f', class: "multiselect-status" }, "Maximum ", this.maxSelections, " selections"))));
     }
     static get is() { return "le-multiselect"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/le-navigation/le-navigation.css

@@ -0,0 +1,323 @@
+:host {
+  display: block;
+
+  --le-nav-radius: var(--le-radius-md);
+  --le-nav-gap: var(--le-spacing-2);
+  --le-nav-item-padding-x: var(--le-spacing-1);
+  --le-nav-item-padding-y: var(--le-spacing-2);
+  --le-nav-item-gap: var(--le-spacing-2);
+
+  --le-nav-color: var(--le-color-text-primary);
+  --le-nav-muted: var(--le-color-text-secondary);
+  --le-nav-hover-bg: var(--le-color-gray-100);
+  --le-nav-selected-bg: var(--le-color-primary);
+  --le-nav-selected-color: var(--le-color-primary-contrast);
+}
+
+/* ==========================================
+ * Vertical navigation
+ * ========================================== */
+
+.nav-vertical {
+  display: flex;
+  flex-direction: column;
+  gap: var(--le-nav-gap);
+}
+
+.nav-search {
+  width: 100%;
+}
+
+.nav-search-input {
+  --le-input-radius: var(--le-radius-md);
+}
+
+.nav-empty {
+  padding: var(--le-spacing-2);
+  color: var(--le-nav-muted);
+  font-size: var(--le-font-size-sm);
+}
+
+.nav-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--le-spacing-1);
+}
+
+.nav-row {
+  display: flex;
+  align-items: stretch;
+  gap: var(--le-spacing-1);
+  border-radius: var(--le-nav-radius);
+}
+
+.nav-row:hover {
+  background: var(--le-nav-hover-bg);
+}
+
+.nav-toggle,
+.nav-toggle-spacer {
+  box-sizing: border-box;
+  width: var(--le-spacing-4);
+  min-width: var(--le-spacing-4);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: var(--le-nav-radius);
+  color: inherit;
+}
+
+.nav-toggle {
+  background: transparent;
+  cursor: pointer;
+  opacity: 0.4;
+}
+
+.nav-toggle:hover:not(:disabled) {
+  opacity: 1;
+}
+
+.nav-toggle:focus-visible {
+  outline: 2px solid var(--le-color-focus);
+  outline-offset: 2px;
+  opacity: 1;
+}
+
+.nav-chevron {
+  display: inline-block;
+  transition: transform var(--le-transition-fast);
+}
+
+.nav-chevron svg {
+  display: block;
+  width: var(--le-spacing-4);
+  height: var(--le-spacing-4);
+}
+
+.nav-node > div > button > .nav-chevron {
+  transform: rotate(-90deg);
+}
+.nav-node.open > div > button > .nav-chevron {
+  transform: rotate(0deg);
+}
+
+.nav-item {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--le-nav-item-gap);
+  padding: var(--le-nav-item-padding-y) var(--le-nav-item-padding-x) var(--le-nav-item-padding-y) 0;
+  border-radius: var(--le-nav-radius);
+  border: 1px solid transparent;
+  background: transparent;
+  text-decoration: none;
+  color: var(--le-nav-color);
+  font-family: var(--le-font-family-base);
+  font-size: var(--le-font-size-md);
+  line-height: var(--le-line-height-tight);
+  cursor: pointer;
+}
+
+.nav-item:focus-visible {
+  outline: 2px solid var(--le-color-focus);
+  outline-offset: 2px;
+}
+
+.nav-node.selected > .nav-row {
+  background: var(--le-nav-selected-bg);
+  color: var(--le-nav-selected-color);
+}
+.nav-node.selected > .nav-row > .nav-item {
+  color: inherit;
+}
+
+.nav-node.disabled > .nav-row > .nav-item {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.nav-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.nav-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nav-description {
+  color: color-mix(in srgb, var(--le-nav-muted) 90%, transparent);
+  font-size: var(--le-font-size-sm);
+  line-height: var(--le-line-height-tight);
+}
+
+.nav-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.nav-icon-end {
+  margin-left: auto;
+}
+
+.nav-children {
+  margin-top: var(--le-spacing-1);
+}
+
+/* ==========================================
+ * Horizontal navigation
+ * ========================================== */
+
+.nav-horizontal {
+  display: flex;
+  align-items: center;
+  gap: var(--le-spacing-2);
+}
+
+.nav-horizontal-shell {
+  position: relative;
+}
+
+.nav-horizontal-measure {
+  position: absolute;
+  left: -10000px;
+  top: -10000px;
+  visibility: hidden;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  gap: var(--le-spacing-2);
+  flex-wrap: wrap;
+}
+
+.nav-horizontal.wrap {
+  flex-wrap: wrap;
+}
+
+.nav-horizontal.nowrap {
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+
+.h-item {
+  display: flex;
+  align-items: center;
+}
+
+.h-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--le-spacing-2);
+  padding: var(--le-spacing-2) var(--le-spacing-3);
+  border-radius: var(--le-nav-radius);
+  border: 1px solid transparent;
+  background: transparent;
+  text-decoration: none;
+  color: var(--le-nav-color);
+  font-family: var(--le-font-family-base);
+  font-size: var(--le-font-size-md);
+  cursor: pointer;
+}
+
+.h-link:hover {
+  background: var(--le-nav-hover-bg);
+}
+
+.h-link:focus-visible {
+  outline: 2px solid var(--le-color-focus);
+  outline-offset: 2px;
+}
+
+.h-link.disabled,
+.h-trigger.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.h-link.selected,
+.h-trigger.selected {
+  background: var(--le-nav-selected-bg);
+  color: var(--le-nav-selected-color);
+}
+
+.h-label {
+  white-space: nowrap;
+}
+
+.h-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--le-spacing-1);
+  border-radius: var(--le-nav-radius);
+}
+
+.h-submenu-toggle {
+  width: var(--le-spacing-3);
+  height: var(--le-spacing-3);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: var(--le-nav-radius);
+  background: transparent;
+  color: currentColor;
+  cursor: pointer;
+}
+
+.h-submenu-toggle:hover {
+  background: var(--le-nav-hover-bg);
+}
+
+.more-trigger-wrap {
+  display: flex;
+  align-items: center;
+}
+
+.more-trigger-wrap.is-measure {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.more-trigger-wrap.is-visible {
+  position: static;
+  visibility: visible;
+}
+
+.overflow-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--le-spacing-2);
+  padding: var(--le-spacing-2) var(--le-spacing-3);
+  border-radius: var(--le-nav-radius);
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--le-nav-color);
+  cursor: pointer;
+  font-family: var(--le-font-family-base);
+  font-size: var(--le-font-size-md);
+}
+
+.overflow-trigger:hover {
+  background: var(--le-nav-hover-bg);
+}
+
+.overflow-trigger:focus-visible {
+  outline: 2px solid var(--le-color-focus);
+  outline-offset: 2px;
+}
+
+/* Popover list container */
+le-popover::part(content) {
+  padding: var(--le-spacing-1);
+}