@duetds/components 6.2.3 → 6.2.5

package/lib/collection/components/duet-icon/duet-icon.js

@@ -1,53 +1,22 @@
 /*!
  * Built with Duet Design System
  */
-import { Build, Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
 import { buildIconUrl, fetchIconByUrl } from "./icon-utils";
 export class DuetIcon {
   constructor() {
-    /**
-     * Theme of the icon. This setting will be overridden when you set the color
-     * property
-     */
+    this.svgContent = undefined;
     this.theme = "";
-    /**
-     * Icon name from Duet to display.
-     */
+    this.icon = undefined;
+    this.src = undefined;
     this.name = "action-add";
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
-    /**
-     * Whether the icon changes its size responsively or not.
-     */
     this.responsive = true;
-    /**
-     * Custom color to be used for the icon, as a design token entered in camelCase
-     * or kebab-case. Example: "color-primary". This property can also be set to
-     * "currentColor" which forces the icon to use the CSS text color of parent
-     * element instead. Useful when you want to control the color in stylesheet
-     * instead.
-     */
     this.color = "";
-    /**
-     * Custom color to be used for a circular background, as a design token entered
-     * in camelCase or kebab-case. Using this option the icon will always be resized
-     * to $size-icon-medium on mobile viewports. Example: "color-primary".
-     */
     this.background = "";
-    /**
-     * Icon size. Entered as one of the icon size design tokens.
-     */
     this.size = "medium";
-    /**
-     * Custom color to be used for a circular border and icon outline, as a design
-     * token entered in camelCase or kebab-case. Using this option the icon will
-     * always be resized to $size-icon-medium on mobile viewports.
-     * Example: "color-primary".
-     */
     this.outline = "";
   }
   /**
@@ -96,252 +65,260 @@ export class DuetIcon {
         "duet-m-0": this.margin === "none",
         "duet-icon-has-outline": !!this.outline,
         "duet-icon-has-background": !!this.background,
-      } },
-      h("div", { "aria-hidden": "true", style: styles, class: {
-          "duet-icon": true,
-          [this.size]: true,
-          "duet-theme-turva": this.theme === "turva",
-          "duet-theme-default": this.theme === "default",
-          "duet-icon-has-outline": !!this.outline,
-          "duet-icon-has-background": !!this.background,
-          "duet-icon-not-responsive": !this.responsive,
-        } },
-        h("span", { "aria-hidden": "true", class: "duet-icon-svg", innerHTML: this.svgContent }))));
+      } }, h("div", { "aria-hidden": "true", style: styles, class: {
+        "duet-icon": true,
+        [this.size]: true,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-theme-default": this.theme === "default",
+        "duet-icon-has-outline": !!this.outline,
+        "duet-icon-has-background": !!this.background,
+        "duet-icon-not-responsive": !this.responsive,
+      } }, h("span", { "aria-hidden": "true", class: "duet-icon-svg", innerHTML: this.svgContent }))));
   }
   static get is() { return "duet-icon"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["duet-icon.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["duet-icon.css"]
-  }; }
-  static get properties() { return {
-    "theme": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "DuetTheme",
-        "resolved": "\"\" | \"default\" | \"turva\"",
-        "references": {
-          "DuetTheme": {
-            "location": "import",
-            "path": "../../common-types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-icon.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the icon. This setting will be overridden when you set the color\nproperty"
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Theme of the icon. This setting will be overridden when you set the color\nproperty"
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A raw SVG string."
+        },
+        "attribute": "icon",
+        "reflect": false
       },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "src": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A URL from which to load an icon."
+        },
+        "attribute": "src",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A raw SVG string."
-      },
-      "attribute": "icon",
-      "reflect": false
-    },
-    "src": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A URL from which to load an icon."
-      },
-      "attribute": "src",
-      "reflect": false
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetIconName",
-        "resolved": "string",
-        "references": {
-          "DuetIconName": {
-            "location": "import",
-            "path": "../../common-types"
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetIconName",
+          "resolved": "string",
+          "references": {
+            "DuetIconName": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon name from Duet to display."
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "\"action-add\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Icon name from Duet to display."
-      },
-      "attribute": "name",
-      "reflect": false,
-      "defaultValue": "\"action-add\""
-    },
-    "margin": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetMargin",
-        "resolved": "\"auto\" | \"none\"",
-        "references": {
-          "DuetMargin": {
-            "location": "import",
-            "path": "../../common-types"
+      "margin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetMargin",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetMargin": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Controls the margin of the component."
-      },
-      "attribute": "margin",
-      "reflect": false,
-      "defaultValue": "\"auto\""
-    },
-    "responsive": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the margin of the component."
+        },
+        "attribute": "margin",
+        "reflect": false,
+        "defaultValue": "\"auto\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Whether the icon changes its size responsively or not."
+      "responsive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the icon changes its size responsively or not."
+        },
+        "attribute": "responsive",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "attribute": "responsive",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetColor",
-        "resolved": "string",
-        "references": {
-          "DuetColor": {
-            "location": "import",
-            "path": "../../common-types"
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetColor",
+          "resolved": "string",
+          "references": {
+            "DuetColor": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Custom color to be used for the icon, as a design token entered in camelCase\nor kebab-case. Example: \"color-primary\". This property can also be set to\n\"currentColor\" which forces the icon to use the CSS text color of parent\nelement instead. Useful when you want to control the color in stylesheet\ninstead."
+        },
+        "attribute": "color",
+        "reflect": true,
+        "defaultValue": "\"\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Custom color to be used for the icon, as a design token entered in camelCase\nor kebab-case. Example: \"color-primary\". This property can also be set to\n\"currentColor\" which forces the icon to use the CSS text color of parent\nelement instead. Useful when you want to control the color in stylesheet\ninstead."
-      },
-      "attribute": "color",
-      "reflect": true,
-      "defaultValue": "\"\""
-    },
-    "background": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetColor",
-        "resolved": "string",
-        "references": {
-          "DuetColor": {
-            "location": "import",
-            "path": "../../common-types"
+      "background": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetColor",
+          "resolved": "string",
+          "references": {
+            "DuetColor": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Custom color to be used for a circular background, as a design token entered\nin camelCase or kebab-case. Using this option the icon will always be resized\nto $size-icon-medium on mobile viewports. Example: \"color-primary\"."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Custom color to be used for a circular background, as a design token entered\nin camelCase or kebab-case. Using this option the icon will always be resized\nto $size-icon-medium on mobile viewports. Example: \"color-primary\"."
+        },
+        "attribute": "background",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "attribute": "background",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetIconSize",
-        "resolved": "\"auto\" | \"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\"",
-        "references": {
-          "DuetIconSize": {
-            "location": "local"
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetIconSize",
+          "resolved": "\"auto\" | \"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\"",
+          "references": {
+            "DuetIconSize": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Icon size. Entered as one of the icon size design tokens."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon size. Entered as one of the icon size design tokens."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"medium\""
       },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "\"medium\""
-    },
-    "outline": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetColor",
-        "resolved": "string",
-        "references": {
-          "DuetColor": {
-            "location": "import",
-            "path": "../../common-types"
+      "outline": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetColor",
+          "resolved": "string",
+          "references": {
+            "DuetColor": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Custom color to be used for a circular border and icon outline, as a design\ntoken entered in camelCase or kebab-case. Using this option the icon will\nalways be resized to $size-icon-medium on mobile viewports.\nExample: \"color-primary\"."
-      },
-      "attribute": "outline",
-      "reflect": false,
-      "defaultValue": "\"\""
-    }
-  }; }
-  static get states() { return {
-    "svgContent": {}
-  }; }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Custom color to be used for a circular border and icon outline, as a design\ntoken entered in camelCase or kebab-case. Using this option the icon will\nalways be resized to $size-icon-medium on mobile viewports.\nExample: \"color-primary\"."
+        },
+        "attribute": "outline",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "svgContent": {}
+    };
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "src",
-      "methodName": "loadIcon"
-    }, {
-      "propName": "icon",
-      "methodName": "loadIcon"
-    }, {
-      "propName": "name",
-      "methodName": "loadIcon"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "src",
+        "methodName": "loadIcon"
+      }, {
+        "propName": "icon",
+        "methodName": "loadIcon"
+      }, {
+        "propName": "name",
+        "methodName": "loadIcon"
+      }];
+  }
 }