@getflip/swirl-components 0.387.0 → 0.389.0

package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.js

@@ -8,6 +8,7 @@ export class SwirlShellNavigationItem {
         this.hideLabel = false;
         this.inlineLabelColor = "default";
         this.markAsNewLabel = "New";
+        this.useCustomIconSize = false;
         this.variant = "default";
     }
     componentWillLoad() {
@@ -17,6 +18,9 @@ export class SwirlShellNavigationItem {
         this.forceIconProps();
     }
     forceIconProps() {
+        if (this.useCustomIconSize) {
+            return;
+        }
         const iconEl = this.el.querySelector("[slot='icon']");
         const smallIcon = (this.hideLabel && this.variant === "app-icon") ||
             this.variant === "default";
@@ -57,9 +61,9 @@ export class SwirlShellNavigationItem {
         const tooltipContent = this.description
             ? `${this.label} ${this.description}`
             : this.label;
-        return (h(Host, { key: 'eb3cc38916a4a868d447c631b65d2ebfb3c158e5' }, h("swirl-tooltip", { key: '5d38b0bf756b0a845d0ddff0aa6fe2a955da44f8', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right", positioning: "fixed" }, h(Tag, { key: '852f4913ae1c9e90f0ecccf32f14d857321c5694', class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button", title: !this.hideLabel ? this.label : undefined }, h("span", { key: 'f9de6d6dc253563b0397fbbc42d4bdb5260015fb', class: "shell-navigation-item__icon" }, h("slot", { key: 'e1a0fc498c658f9094c906b8319971af9025883e', name: "icon" })), !this.hideLabel ? (this.variant !== "default" ? (h("span", { class: labelClassNames }, this.label)) : (h("div", { class: "shell-navigation-item__text-wrapper" }, h("span", { class: labelClassNames }, this.label), this.description && (h("span", { class: "shell-navigation-item__description" }, this.description))))) : (h("swirl-visually-hidden", null, h("span", { class: labelClassNames }, this.label))), hasBadge && (h("span", { key: '6697baa3fdc919e7a2b7c8595b871566a6b8eaa2', class: "shell-navigation-item__badge-wrapper" }, h("swirl-badge", { key: 'feadd39faef80c53f72a77e16a5def012d77c53b', "aria-label": this.badgeLabel, class: classnames("shell-navigation-item__badge", {
+        return (h(Host, { key: '5f8337a6e328f4b70794c5df34bea4ce004cdbfc' }, h("swirl-tooltip", { key: 'de803be5c5e466daed55cf67c6127f897425e10d', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right", positioning: "fixed" }, h(Tag, { key: '56b42a124385745a2048c1fac11abd75c5f5ea47', class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button", title: !this.hideLabel ? this.label : undefined }, h("span", { key: 'fe342b65d7beef54084c3fecd2f448bf2cf8e5c8', class: "shell-navigation-item__icon" }, h("slot", { key: '9c1b2a2476fc0235e3241ed57b458a97809ad50a', name: "icon" })), !this.hideLabel ? (this.variant !== "default" ? (h("span", { class: labelClassNames }, this.label)) : (h("div", { class: "shell-navigation-item__text-wrapper" }, h("span", { class: labelClassNames }, this.label), this.description && (h("span", { class: "shell-navigation-item__description" }, this.description))))) : (h("swirl-visually-hidden", null, h("span", { class: labelClassNames }, this.label))), hasBadge && (h("span", { key: '89bb559959dae885912f6af1311c22755cd14af2', class: "shell-navigation-item__badge-wrapper" }, h("swirl-badge", { key: 'b9015202651b5c205849113fcc0e8ce783d18412', "aria-label": this.badgeLabel, class: classnames("shell-navigation-item__badge", {
                 "shell-navigation-item__badge--dot": this.badgeLabel === "",
-            }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (h("swirl-tag", { key: 'dd8f48f9940c328b8fae2676e9a3b773a70e12d1', class: "shell-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "s", variant: "strong" })), showIsNewBadge && (h("swirl-badge", { key: 'ffbfa549236b20fc6fff35a96865386ea7b7517f', class: "shell-navigation-item__is-new-badge", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "xs", variant: "dot" }))))));
+            }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (h("swirl-tag", { key: '9e05640b202bd785e50ae6741804b64c3e1e276a', class: "shell-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "s", variant: "strong" })), showIsNewBadge && (h("swirl-badge", { key: '30aa107e83bc07394bd7de154109097d0ccf51c4', class: "shell-navigation-item__is-new-badge", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "xs", variant: "dot" }))))));
     }
     static get is() { return "swirl-shell-navigation-item"; }
     static get encapsulation() { return "shadow"; }
@@ -312,6 +316,26 @@ export class SwirlShellNavigationItem {
                 "reflect": false,
                 "defaultValue": "\"New\""
             },
+            "useCustomIconSize": {
+                "type": "boolean",
+                "attribute": "use-custom-icon-size",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "target": {
                 "type": "string",
                 "attribute": "target",

package/dist/collection/components/swirl-tag/swirl-tag.css

@@ -19,6 +19,9 @@
   line-height: var(--s-line-height-sm);
   white-space: nowrap;
   gap: var(--s-space-4);
+  border-style: solid;
+  border-width: var(--s-border-width-default);
+  border-color: transparent;
 }
 
 .tag--size-s {
@@ -30,8 +33,6 @@
 }
 
 .tag--variant-outline {
-  border-style: solid;
-  border-width: var(--s-border-width-default);
   border-color: var(--s-border-strong);
 }