@six-group/ui-library 0.0.0-insider.77a508a → 0.0.0-insider.79a0d1c

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { getDefaultIconLibrary } from "../../utils/icon";
 /**
  * @since 1.0
  * @status stable
@@ -12,11 +13,19 @@ export class SixIcon {
         /** If set to true the default material outlined icons are not used. */
         this.filled = false;
     }
+    isSymbols() {
+        var _a;
+        const lib = (_a = this.library) !== null && _a !== void 0 ? _a : getDefaultIconLibrary();
+        return lib === 'material-symbols';
+    }
     render() {
-        return (h("i", { key: '748f3396556d9bee11a96c550c4f04b5d4945842', class: {
-                'material-icons': true,
-                'material-icons-outlined': !this.filled,
-                'material-icons-filled': this.filled,
+        const isSymbols = this.isSymbols();
+        return (h("i", { key: '16e77cf0c2d44ff84165fdf28bc353c09ac6d36a', class: {
+                'material-icons': !isSymbols,
+                'material-icons-outlined': !isSymbols && !this.filled,
+                'material-icons-filled': !isSymbols && this.filled,
+                'material-symbols-outlined': isSymbols && !this.filled,
+                'material-symbols': isSymbols && this.filled,
                 'icon--xsmall': this.size === 'xSmall',
                 'icon--small': this.size === 'small',
                 'icon--medium': this.size === 'medium',
@@ -25,7 +34,7 @@ export class SixIcon {
                 'icon--xxlarge': this.size === 'xxLarge',
                 'icon--xxxlarge': this.size === 'xxxLarge',
                 'icon--inherit': this.size === 'inherit',
-            } }, h("slot", { key: 'd80f49ba0904122e01610b0f23bae0915ee9c6ec' })));
+            } }, h("slot", { key: '5f25e9413be4ec300c0b42cfb24115548dd331e1' })));
     }
     static get is() { return "six-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -43,6 +52,7 @@ export class SixIcon {
         return {
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "| 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge'",
@@ -57,12 +67,12 @@ export class SixIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": true,
                 "defaultValue": "'inherit'"
             },
             "filled": {
                 "type": "boolean",
+                "attribute": "filled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -77,9 +87,33 @@ export class SixIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "filled",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "library": {
+                "type": "string",
+                "attribute": "library",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconLibrary",
+                    "resolved": "\"material-icons\" | \"material-symbols\" | undefined",
+                    "references": {
+                        "IconLibrary": {
+                            "location": "import",
+                            "path": "../../utils/icon",
+                            "id": "src/utils/icon.ts::IconLibrary"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon library for this instance. Overrides the global default.\n- \"material-icons\"  \u2192 Material Icons\n- \"material-symbols\"  \u2192 Material Symbols"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"six-icon.js","sourceRoot":"","sources":["../../../src/components/six-icon/six-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAOH,MAAM,OAAO,OAAO;IALpB;QAME,uBAAuB;QACE,SAAI,GAQZ,SAAS,CAAC;QAE3B,uEAAuE;QAC/D,WAAM,GAAG,KAAK,CAAC;KAuBxB;IArBC,MAAM;QACJ,OAAO,CACL,0DACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,yBAAyB,EAAE,CAAC,IAAI,CAAC,MAAM;gBACvC,uBAAuB,EAAE,IAAI,CAAC,MAAM;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACxC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;gBAC1C,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;aACzC;YAED,8DAAa,CACX,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the material icon name.\n */\n\n@Component({\n  tag: 'six-icon',\n  styleUrls: ['six-icon.scss'],\n  shadow: true,\n})\nexport class SixIcon {\n  /** The icon's size. */\n  @Prop({ reflect: true }) size:\n    | 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge' = 'inherit';\n\n  /** If set to true the default material outlined icons are not used. */\n  @Prop() filled = false;\n\n  render() {\n    return (\n      <i\n        class={{\n          'material-icons': true,\n          'material-icons-outlined': !this.filled,\n          'material-icons-filled': this.filled,\n          'icon--xsmall': this.size === 'xSmall',\n          'icon--small': this.size === 'small',\n          'icon--medium': this.size === 'medium',\n          'icon--large': this.size === 'large',\n          'icon--xlarge': this.size === 'xLarge',\n          'icon--xxlarge': this.size === 'xxLarge',\n          'icon--xxxlarge': this.size === 'xxxLarge',\n          'icon--inherit': this.size === 'inherit',\n        }}\n      >\n        <slot></slot>\n      </i>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-icon.js","sourceRoot":"","sources":["../../../src/components/six-icon/six-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAe,MAAM,kBAAkB,CAAC;AAEtE;;;;;GAKG;AAOH,MAAM,OAAO,OAAO;IALpB;QAME,uBAAuB;QACE,SAAI,GAQZ,SAAS,CAAC;QAE3B,uEAAuE;QAC/D,WAAM,GAAG,KAAK,CAAC;KAkDxB;IA/BS,SAAS;;QACf,MAAM,GAAG,GAAG,MAAA,IAAI,CAAC,OAAO,mCAAI,qBAAqB,EAAE,CAAC;QACpD,OAAO,GAAG,KAAK,kBAAkB,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QACnC,OAAO,CACL,0DACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,CAAC,SAAS;gBAC5B,yBAAyB,EAAE,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,MAAM;gBACrD,uBAAuB,EAAE,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM;gBAElD,2BAA2B,EAAE,SAAS,IAAI,CAAC,IAAI,CAAC,MAAM;gBACtD,kBAAkB,EAAE,SAAS,IAAI,IAAI,CAAC,MAAM;gBAE5C,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBACxC,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;gBAC1C,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;aACzC;YAED,8DAAa,CACX,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { getDefaultIconLibrary, IconLibrary } from '../../utils/icon';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the material icon name.\n */\n\n@Component({\n  tag: 'six-icon',\n  styleUrls: ['six-icon.scss'],\n  shadow: true,\n})\nexport class SixIcon {\n  /** The icon's size. */\n  @Prop({ reflect: true }) size:\n    | 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge' = 'inherit';\n\n  /** If set to true the default material outlined icons are not used. */\n  @Prop() filled = false;\n\n  /**\n   * Icon library to use when no `library` prop is provided.\n   * By default, all `<six-icon>` instances fall back to the globally configured\n   * default library (via `setDefaultIconLibrary()` / `getDefaultIconLibrary()`),\n   * which is `\"material-icons\"` unless changed at runtime.\n   *\n   * This allows teams to switch the default across an entire project without\n   * having to set the `library` prop on every `<six-icon>` instance.\n   */\n\n  /**\n   * Icon library for this instance. Overrides the global default.\n   * - \"material-icons\"  → Material Icons\n   * - \"material-symbols\"  → Material Symbols\n   */\n  @Prop({ reflect: true }) library?: IconLibrary;\n\n  private isSymbols(): boolean {\n    const lib = this.library ?? getDefaultIconLibrary();\n    return lib === 'material-symbols';\n  }\n\n  render() {\n    const isSymbols = this.isSymbols();\n    return (\n      <i\n        class={{\n          'material-icons': !isSymbols,\n          'material-icons-outlined': !isSymbols && !this.filled,\n          'material-icons-filled': !isSymbols && this.filled,\n\n          'material-symbols-outlined': isSymbols && !this.filled,\n          'material-symbols': isSymbols && this.filled,\n\n          'icon--xsmall': this.size === 'xSmall',\n          'icon--small': this.size === 'small',\n          'icon--medium': this.size === 'medium',\n          'icon--large': this.size === 'large',\n          'icon--xlarge': this.size === 'xLarge',\n          'icon--xxlarge': this.size === 'xxLarge',\n          'icon--xxxlarge': this.size === 'xxxLarge',\n          'icon--inherit': this.size === 'inherit',\n        }}\n      >\n        <slot></slot>\n      </i>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-icon-button/six-icon-button.js

@@ -35,11 +35,11 @@ export class SixIconButton {
         const isLink = this.href != null;
         const isButton = !isLink;
         const Button = isLink ? 'a' : 'button';
-        const html = this.html && h("span", { key: 'f351c6ac9b9c3a35d1c7cdd55d3e919f070244d0', innerHTML: this.html });
-        return (h("div", { key: '3828510ea2e5a3318c4f9dc1f40f0f13ec8f5120', onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, h(Button, { key: '05ed661d1f708125d5353caefe236cd7bf8a427e', ref: (el) => (this.button = el), part: "base", disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, class: {
+        const html = this.html && h("span", { key: '3a8510f8bb2afb5170f10c74be60ba75b8a5337c', innerHTML: this.html });
+        return (h("div", { key: '2f7bbfa76220fdcb6f761564fc0f1cd2d9965016', onClick: this.handleClickEvent, class: { 'icon-button-wrapper--disabled': this.disabled } }, h(Button, { key: '7453dadfdd7eafadae8c08c187d2aed60ac32031', ref: (el) => (this.button = el), part: "base", disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, class: {
                 'icon-button': true,
                 'icon-button--disabled': this.disabled,
-            }, type: isButton ? 'button' : undefined, "aria-label": this.label, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined }, h("six-icon", { key: 'ba8d525d4ced58c6c93dff964738f34b3a36f067', "aria-hidden": "true", size: this.size }, this.name), h("slot", { key: '8f1c47548463c556045359dc3bfaa51d14b1a6ad' }), html)));
+            }, type: isButton ? 'button' : undefined, "aria-label": this.label, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined }, h("six-icon", { key: 'ed51d0979fb1ecce548b342ee324bab5d2cf6dfd', "aria-hidden": "true", size: this.size }, this.name), h("slot", { key: '12bbdce6ac15e198adf8afd6c17cba7aadf20376' }), html)));
     }
     static get is() { return "six-icon-button"; }
     static get encapsulation() { return "shadow"; }
@@ -57,6 +57,7 @@ export class SixIconButton {
         return {
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -71,11 +72,11 @@ export class SixIconButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": true
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge'",
@@ -90,12 +91,12 @@ export class SixIconButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": true,
                 "defaultValue": "'medium'"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -110,11 +111,11 @@ export class SixIconButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": true
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -129,12 +130,12 @@ export class SixIconButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "html": {
                 "type": "string",
+                "attribute": "html",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -149,11 +150,11 @@ export class SixIconButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "html",
                 "reflect": true
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -168,11 +169,11 @@ export class SixIconButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false
             },
             "target": {
                 "type": "string",
+                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "'_blank' | '_parent' | '_self' | '_top'",
@@ -187,11 +188,11 @@ export class SixIconButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "target",
                 "reflect": false
             },
             "download": {
                 "type": "string",
+                "attribute": "download",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -206,7 +207,6 @@ export class SixIconButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "download",
                 "reflect": false
             }
         };