@fluid-topics/ftds-chip-group 2.2.13 → 2.2.14

package/build/ftds-chip-group.d.ts

@@ -23,5 +23,6 @@ export declare class FtdsChipGroup extends FtdsChipGroup_base implements FtdsChi
     private focusChip;
     private toggleExtraChips;
     private getFamilyIcon;
+    private getIconVariant;
 }
 export {};

package/build/ftds-chip-group.js

@@ -80,7 +80,7 @@ export class FtdsChipGroup extends withI18n(FtdsBase) {
         `;
     }
     renderChip(chip) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         return html `
             <li>
                 <ft-tooltip
@@ -91,11 +91,11 @@ export class FtdsChipGroup extends withI18n(FtdsBase) {
                                    exportparts="chip"
                                    ?removable=${this.removable}
                                    .family=${(_b = chip.family) !== null && _b !== void 0 ? _b : DesignSystemFamily.neutral}
-                                   .icon=${this.getFamilyIcon(chip.family)}
-                                   .iconVariant=${FtdsIconVariants.solid}
-                                   .removeButtonLabel=${(_c = chip.removeLabel) !== null && _c !== void 0 ? _c : chipGroupContext.messages.defaultRemoveLabel()}
+                                   .icon=${(_c = chip.icon) !== null && _c !== void 0 ? _c : this.getFamilyIcon(chip.family)}
+                                   .iconVariant=${this.getIconVariant(chip.icon, chip.iconVariant)}
+                                   .removeButtonLabel=${(_d = chip.removeLabel) !== null && _d !== void 0 ? _d : chipGroupContext.messages.defaultRemoveLabel()}
                                    @remove=${() => this.onChipRemoved(chip)}>
-                        ${(_d = chip.label) !== null && _d !== void 0 ? _d : chip.value}
+                        ${(_e = chip.label) !== null && _e !== void 0 ? _e : chip.value}
                     </ftds-chip>
                 </ft-tooltip>
             </li>
@@ -136,6 +136,12 @@ export class FtdsChipGroup extends withI18n(FtdsBase) {
                 return undefined;
         }
     }
+    getIconVariant(icon, iconVariant) {
+        if (icon) {
+            return iconVariant !== null && iconVariant !== void 0 ? iconVariant : FtdsIconVariants.regular;
+        }
+        return FtdsIconVariants.solid;
+    }
 }
 FtdsChipGroup.elementDefinitions = {
     "ftds-chip": FtdsChip,

package/build/ftds-chip-group.light.js

@@ -5,6 +5,7 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:r.extend("--ftds-con
             max-width: 100%;
             display: flex;
             flex-wrap: wrap;
+            align-items: center;
             gap: ${Le.verticalGap} ${Le.horizontalGap};
             padding-left: 0;
             margin: ${c.spacing1} 0;
@@ -2473,7 +2474,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
                     </div>
                 </ftds-popover>
             </li>
-        `}renderChip(t){var o,n,a,i;return Gn.html`
+        `}renderChip(t){var o,n,a,i,s;return Gn.html`
             <li>
                 <ft-tooltip
                     text="${(o=t.label)!==null&&o!==void 0?o:t.value}"
@@ -2483,15 +2484,15 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
                                    exportparts="chip"
                                    ?removable=${this.removable}
                                    .family=${(n=t.family)!==null&&n!==void 0?n:nt.DesignSystemFamily.neutral}
-                                   .icon=${this.getFamilyIcon(t.family)}
-                                   .iconVariant=${u.solid}
-                                   .removeButtonLabel=${(a=t.removeLabel)!==null&&a!==void 0?a:yo.messages.defaultRemoveLabel()}
+                                   .icon=${(a=t.icon)!==null&&a!==void 0?a:this.getFamilyIcon(t.family)}
+                                   .iconVariant=${this.getIconVariant(t.icon,t.iconVariant)}
+                                   .removeButtonLabel=${(i=t.removeLabel)!==null&&i!==void 0?i:yo.messages.defaultRemoveLabel()}
                                    @remove=${()=>this.onChipRemoved(t)}>
-                        ${(i=t.label)!==null&&i!==void 0?i:t.value}
+                        ${(s=t.label)!==null&&s!==void 0?s:t.value}
                     </ftds-chip>
                 </ft-tooltip>
             </li>
-        `}onChipRemoved(t){this.lastRemovedChipIndex=this.chips.findIndex(o=>o.value===t.value),this.dispatchEvent(new _r(t))}handleFocusOnChipDeleted(t){var o;let n=Array.from((o=this.allChips)!==null&&o!==void 0?o:[]);n.length!==0&&(n[t]?this.focusChip(n[t]):this.focusChip(n[t-1]))}async focusChip(t){var o;await t.updateComplete;let n=(o=t.shadowRoot)===null||o===void 0?void 0:o.querySelector(".ftds-chip--remove-button");await n?.updateComplete,n?.focus()}toggleExtraChips(t){this.isPopoverOpened=t.detail.opened}getFamilyIcon(t){if(t===nt.DesignSystemFamily.warning)return p.TRIANGLE_EXCLAMATION}};ke.elementDefinitions={"ftds-chip":ue,"ftds-popover":$,"ftds-typography":de,"ft-tooltip":ee};ke.styles=Xi;Rr([(0,er.property)({type:Boolean})],ke.prototype,"removable",void 0);Rr([(0,nt.numberProperty)()],ke.prototype,"maxNumberOfChips",void 0);Rr([(0,er.property)()],ke.prototype,"popoverTitle",void 0);Rr([(0,nt.jsonProperty)([])],ke.prototype,"chips",void 0);Rr([(0,er.state)()],ke.prototype,"isPopoverOpened",void 0);Rr([(0,er.queryAll)(".chip-group-chip")],ke.prototype,"allChips",void 0);var o4={"ftds-chip-group":ke};(0,n4.customElements)(o4);})();
+        `}onChipRemoved(t){this.lastRemovedChipIndex=this.chips.findIndex(o=>o.value===t.value),this.dispatchEvent(new _r(t))}handleFocusOnChipDeleted(t){var o;let n=Array.from((o=this.allChips)!==null&&o!==void 0?o:[]);n.length!==0&&(n[t]?this.focusChip(n[t]):this.focusChip(n[t-1]))}async focusChip(t){var o;await t.updateComplete;let n=(o=t.shadowRoot)===null||o===void 0?void 0:o.querySelector(".ftds-chip--remove-button");await n?.updateComplete,n?.focus()}toggleExtraChips(t){this.isPopoverOpened=t.detail.opened}getFamilyIcon(t){if(t===nt.DesignSystemFamily.warning)return p.TRIANGLE_EXCLAMATION}getIconVariant(t,o){return t?o??u.regular:u.solid}};ke.elementDefinitions={"ftds-chip":ue,"ftds-popover":$,"ftds-typography":de,"ft-tooltip":ee};ke.styles=Xi;Rr([(0,er.property)({type:Boolean})],ke.prototype,"removable",void 0);Rr([(0,nt.numberProperty)()],ke.prototype,"maxNumberOfChips",void 0);Rr([(0,er.property)()],ke.prototype,"popoverTitle",void 0);Rr([(0,nt.jsonProperty)([])],ke.prototype,"chips",void 0);Rr([(0,er.state)()],ke.prototype,"isPopoverOpened",void 0);Rr([(0,er.queryAll)(".chip-group-chip")],ke.prototype,"allChips",void 0);var o4={"ftds-chip-group":ke};(0,n4.customElements)(o4);})();
 /*! Bundled license information:
 
 @fortawesome/fontawesome-svg-core/index.mjs:

package/build/ftds-chip-group.min.js

@@ -87,6 +87,7 @@ Also for action icons.`,l.colorGray200),contentGlobalSubtle:n.extend("--ftds-con
             max-width: 100%;
             display: flex;
             flex-wrap: wrap;
+            align-items: center;
             gap: ${ke.verticalGap} ${ke.horizontalGap};
             padding-left: 0;
             margin: ${l.spacing1} 0;
@@ -2553,7 +2554,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
                     </div>
                 </ftds-popover>
             </li>
-        `}renderChip(e){var r,o,a,i;return $`
+        `}renderChip(e){var r,o,a,i,s;return $`
             <li>
                 <ft-tooltip
                     text="${(r=e.label)!==null&&r!==void 0?r:e.value}"
@@ -2563,15 +2564,15 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
                                    exportparts="chip"
                                    ?removable=${this.removable}
                                    .family=${(o=e.family)!==null&&o!==void 0?o:xe.neutral}
-                                   .icon=${this.getFamilyIcon(e.family)}
-                                   .iconVariant=${p.solid}
-                                   .removeButtonLabel=${(a=e.removeLabel)!==null&&a!==void 0?a:Ko.messages.defaultRemoveLabel()}
+                                   .icon=${(a=e.icon)!==null&&a!==void 0?a:this.getFamilyIcon(e.family)}
+                                   .iconVariant=${this.getIconVariant(e.icon,e.iconVariant)}
+                                   .removeButtonLabel=${(i=e.removeLabel)!==null&&i!==void 0?i:Ko.messages.defaultRemoveLabel()}
                                    @remove=${()=>this.onChipRemoved(e)}>
-                        ${(i=e.label)!==null&&i!==void 0?i:e.value}
+                        ${(s=e.label)!==null&&s!==void 0?s:e.value}
                     </ftds-chip>
                 </ft-tooltip>
             </li>
-        `}onChipRemoved(e){this.lastRemovedChipIndex=this.chips.findIndex(r=>r.value===e.value),this.dispatchEvent(new Mo(e))}handleFocusOnChipDeleted(e){var r;let o=Array.from((r=this.allChips)!==null&&r!==void 0?r:[]);o.length!==0&&(o[e]?this.focusChip(o[e]):this.focusChip(o[e-1]))}async focusChip(e){var r;await e.updateComplete;let o=(r=e.shadowRoot)===null||r===void 0?void 0:r.querySelector(".ftds-chip--remove-button");await o?.updateComplete,o?.focus()}toggleExtraChips(e){this.isPopoverOpened=e.detail.opened}getFamilyIcon(e){if(e===xe.warning)return h.TRIANGLE_EXCLAMATION}};Be.elementDefinitions={"ftds-chip":Ee,"ftds-popover":Y,"ftds-typography":ve,"ft-tooltip":ce};Be.styles=O2;Jr([E({type:Boolean})],Be.prototype,"removable",void 0);Jr([Lr()],Be.prototype,"maxNumberOfChips",void 0);Jr([E()],Be.prototype,"popoverTitle",void 0);Jr([Le([])],Be.prototype,"chips",void 0);Jr([Q()],Be.prototype,"isPopoverOpened",void 0);Jr([Na(".chip-group-chip")],Be.prototype,"allChips",void 0);var g4={"ftds-chip-group":Be};ee(g4);})();
+        `}onChipRemoved(e){this.lastRemovedChipIndex=this.chips.findIndex(r=>r.value===e.value),this.dispatchEvent(new Mo(e))}handleFocusOnChipDeleted(e){var r;let o=Array.from((r=this.allChips)!==null&&r!==void 0?r:[]);o.length!==0&&(o[e]?this.focusChip(o[e]):this.focusChip(o[e-1]))}async focusChip(e){var r;await e.updateComplete;let o=(r=e.shadowRoot)===null||r===void 0?void 0:r.querySelector(".ftds-chip--remove-button");await o?.updateComplete,o?.focus()}toggleExtraChips(e){this.isPopoverOpened=e.detail.opened}getFamilyIcon(e){if(e===xe.warning)return h.TRIANGLE_EXCLAMATION}getIconVariant(e,r){return e?r??p.regular:p.solid}};Be.elementDefinitions={"ftds-chip":Ee,"ftds-popover":Y,"ftds-typography":ve,"ft-tooltip":ce};Be.styles=O2;Jr([E({type:Boolean})],Be.prototype,"removable",void 0);Jr([Lr()],Be.prototype,"maxNumberOfChips",void 0);Jr([E()],Be.prototype,"popoverTitle",void 0);Jr([Le([])],Be.prototype,"chips",void 0);Jr([Q()],Be.prototype,"isPopoverOpened",void 0);Jr([Na(".chip-group-chip")],Be.prototype,"allChips",void 0);var g4={"ftds-chip-group":Be};ee(g4);})();
 /*! Bundled license information:
 
 @webcomponents/scoped-custom-element-registry/src/scoped-custom-element-registry.js:

package/build/ftds-chip-group.properties.d.ts

@@ -1,4 +1,5 @@
 import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
+import { FtdsIcons, FtdsIconVariants } from "@fluid-topics/ftds-icon";
 export interface FtdsChipGroupProperties {
     removable: boolean;
     maxNumberOfChips?: number;
@@ -14,4 +15,6 @@ export interface ChipElement {
     label?: string;
     family?: DesignSystemFamily;
     removeLabel?: string;
+    icon?: FtdsIcons;
+    iconVariant?: FtdsIconVariants;
 }

package/build/ftds-chip-group.styles.js

@@ -8,6 +8,7 @@ export const designSystemStyle = [
             max-width: 100%;
             display: flex;
             flex-wrap: wrap;
+            align-items: center;
             gap: ${chipGroup.verticalGap} ${chipGroup.horizontalGap};
             padding-left: 0;
             margin: ${foundation.spacing1} 0;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ftds-chip-group",
-    "version": "2.2.13",
+    "version": "2.2.14",
     "description": "A generic Fluid Topics chip",
     "keywords": [
         "Lit"
@@ -20,18 +20,18 @@
     },
     "dependencies": {
         "@fluid-topics/design-system-variables": "3.8.0",
-        "@fluid-topics/ft-i18n": "2.2.13",
-        "@fluid-topics/ft-tooltip": "2.2.13",
-        "@fluid-topics/ft-wc-utils": "2.2.13",
-        "@fluid-topics/ftds-button": "2.2.13",
-        "@fluid-topics/ftds-chip": "2.2.13",
-        "@fluid-topics/ftds-icon": "2.2.13",
-        "@fluid-topics/ftds-popover": "2.2.13",
-        "@fluid-topics/ftds-typography": "2.2.13",
+        "@fluid-topics/ft-i18n": "2.2.14",
+        "@fluid-topics/ft-tooltip": "2.2.14",
+        "@fluid-topics/ft-wc-utils": "2.2.14",
+        "@fluid-topics/ftds-button": "2.2.14",
+        "@fluid-topics/ftds-chip": "2.2.14",
+        "@fluid-topics/ftds-icon": "2.2.14",
+        "@fluid-topics/ftds-popover": "2.2.14",
+        "@fluid-topics/ftds-typography": "2.2.14",
         "lit": "3.3.3"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "2.2.13"
+        "@fluid-topics/ft-wc-test-utils": "2.2.14"
     },
-    "gitHead": "742c6664578e67145345001469f1b4eafa61bcf0"
+    "gitHead": "854d6984b9b23dbce23a195e12814084a8317fa5"
 }