@fluid-topics/ftds-combobox 2.0.38 → 2.1.0

package/build/ftds-base-combobox.d.ts

@@ -1,6 +1,6 @@
 import { nothing, PropertyValues, TemplateResult } from "lit";
 import { ElementDefinitionsMap, FtdsBase, ValidationRule } from "@fluid-topics/ft-wc-utils";
-import { FtIcons } from "@fluid-topics/ft-icon";
+import { FtdsIcons } from "@fluid-topics/ftds-icon";
 import { ActionableListboxItem, FtdsBaseComboboxProperties, ListboxItem, SuggestionListboxItem, SuggestionsProvider } from "./ftds-base-combobox.properties";
 declare const FtdsBaseComboboxBase: typeof FtdsBase & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-wc-utils").FtInputInterface<any>> & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
 export declare abstract class FtdsBaseCombobox<T> extends FtdsBaseComboboxBase implements FtdsBaseComboboxProperties {
@@ -37,7 +37,7 @@ export declare abstract class FtdsBaseCombobox<T> extends FtdsBaseComboboxBase i
     get shouldRaiseLabel(): boolean;
     get filteredSuggestions(): SuggestionListboxItem[];
     get filteredSuggestionsWithLimit(): SuggestionListboxItem[];
-    get appendIcon(): FtIcons;
+    get appendIcon(): FtdsIcons;
     get activeItemId(): string | undefined;
     protected renderField(): TemplateResult;
     protected renderListboxContainer(isMultiSelectable: boolean): TemplateResult;

package/build/ftds-base-combobox.js

@@ -11,13 +11,13 @@ import { repeat } from "lit/directives/repeat.js";
 import { classMap } from "lit/directives/class-map.js";
 import { when } from "lit/directives/when.js";
 import { Debouncer, FtdsBase, ignoreComposingEvents, numberProperty, processValidationRules, Status, toFtInput, } from "@fluid-topics/ft-wc-utils";
-import { FtIcons, FtIconVariants, } from "@fluid-topics/ft-icon";
+import { FtdsIcons, FtdsIconVariants, } from "@fluid-topics/ftds-icon";
 import { isActionableListboxItem, isSelectableListboxItem, ListboxItemType, } from "./ftds-base-combobox.properties";
 import { withI18n } from "@fluid-topics/ft-i18n";
 import { baseComboboxContext, defaultBaseComboboxMessages, } from "./FtdsBaseComboboxMessages";
-import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ft-typography";
-import { FtdsBaseInput } from "@fluid-topics/ft-base-input";
-import { FtdsNotice } from "@fluid-topics/ft-notice";
+import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
+import { FtdsBaseInput } from "@fluid-topics/ftds-base-input";
+import { FtdsNotice } from "@fluid-topics/ftds-notice";
 // TS2562: base class expressions cannot reference class type parameters, so we
 // fix V=any here and restore the generic via `declare value: T` below.
 const FtdsBaseComboboxBase = withI18n(toFtInput(FtdsBase));
@@ -82,7 +82,7 @@ export class FtdsBaseCombobox extends FtdsBaseComboboxBase {
         return this.filteredSuggestions.slice(0, this.maxDisplayedSuggestions);
     }
     get appendIcon() {
-        return this.isOpen ? FtIcons.THIN_ARROW_UP : FtIcons.THIN_ARROW;
+        return this.isOpen ? FtdsIcons.ANGLE_UP : FtdsIcons.ANGLE_DOWN;
     }
     get activeItemId() {
         if (!this.isOpen || this.activeIndex < 0 || this.activeIndex >= this.listboxItems.length) {
@@ -103,7 +103,7 @@ export class FtdsBaseCombobox extends FtdsBaseComboboxBase {
                 ?raiseLabel=${this.shouldRaiseLabel}
                 ?disabled=${this.disabled}
                 .appendIcon=${this.appendIcon}
-                .appendIconVariant=${FtIconVariants.fluid_topics}
+                .appendIconVariant=${FtdsIconVariants.regular}
                 .appendIconLabel=${this.isOpen ? baseComboboxContext.messages.closeMenu() : baseComboboxContext.messages.openMenu()}
                 @click=${() => this.onInputClick()}
             >

package/build/ftds-base-combobox.styles.js

@@ -1,7 +1,7 @@
 import { css } from "lit";
 import { combobox, floatingMenu, } from "@fluid-topics/design-system-variables";
 import { foundation } from "@fluid-topics/ft-wc-utils";
-import { FtdsBaseInputCssVariables } from "@fluid-topics/ft-base-input";
+import { FtdsBaseInputCssVariables } from "@fluid-topics/ftds-base-input";
 // language=css
 export const baseComboboxStyles = css `
     :host {

package/build/ftds-combobox-multi-value.js

@@ -8,12 +8,12 @@ import { html, } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { numberProperty, processValidationRules, screenReaderStyles, } from "@fluid-topics/ft-wc-utils";
-import { FtdsIcon } from "@fluid-topics/ft-icon";
+import { FtdsIcon, FtdsIcons } from "@fluid-topics/ftds-icon";
 import { ListboxItemType, } from "./ftds-base-combobox.properties";
 import { FtdsComboboxMultiValueChangeEvent, } from "./ftds-combobox-multi-value.properties";
 import { comboboxMultiValueStyles } from "./ftds-combobox-multi-value.styles";
-import { FtdsTypographyVariants } from "@fluid-topics/ft-typography";
-import { FtdsChipGroup, } from "@fluid-topics/ft-chip-group";
+import { FtdsTypographyVariants } from "@fluid-topics/ftds-typography";
+import { FtdsChipGroup, } from "@fluid-topics/ftds-chip-group";
 import { comboboxMultiValueContext, defaultComboboxMultiValueMessages, } from "./FtdsComboboxMultiValueMessages";
 import { FtdsBaseCombobox } from "./ftds-base-combobox";
 import { baseComboboxStyles } from "./ftds-base-combobox.styles";
@@ -120,12 +120,12 @@ export class FtdsComboboxMultiValue extends FtdsBaseCombobox {
         const areAllSuggestionsUnchecked = this.areAllSuggestionsUnchecked();
         const areAllSuggestionsChecked = this.areAllSuggestionsChecked();
         const shouldBeIntermediate = !areAllSuggestionsUnchecked && !areAllSuggestionsChecked;
-        let icon = "square";
+        let icon = FtdsIcons.SQUARE;
         if (shouldBeIntermediate) {
-            icon = "square-minus";
+            icon = FtdsIcons.SQUARE_MINUS;
         }
         if (areAllSuggestionsChecked) {
-            icon = "square-check";
+            icon = FtdsIcons.SQUARE_CHECK;
         }
         const checkboxClasses = {
             "listbox-option--checkbox": true,
@@ -135,20 +135,20 @@ export class FtdsComboboxMultiValue extends FtdsBaseCombobox {
         };
         const isActive = this.activeIndex === index;
         return html `
-                <li class="listbox-option--select-all listbox-option"
-                    id="${this.suggestionId(index)}"
-                    role="option"
-                    aria-selected="${areAllSuggestionsChecked}"
-                    data-active="${isActive}"
-                    @mousedown=${(e) => e.preventDefault()}
-                    @click=${() => this.toggleSelectAll()}
-                >
-                    <ftds-icon class="${classMap(checkboxClasses)}" icon="${icon}"></ftds-icon>
-                    <ftds-typography variant="${FtdsTypographyVariants.body2medium}" class="listbox-option--label">
-                        ${comboboxMultiValueContext.messages.selectAll()}
-                    </ftds-typography>
-                </li>
-            `;
+            <li class="listbox-option--select-all listbox-option"
+                id="${this.suggestionId(index)}"
+                role="option"
+                aria-selected="${areAllSuggestionsChecked}"
+                data-active="${isActive}"
+                @mousedown=${(e) => e.preventDefault()}
+                @click=${() => this.toggleSelectAll()}
+            >
+                <ftds-icon class="${classMap(checkboxClasses)}" icon="${icon}"></ftds-icon>
+                <ftds-typography variant="${FtdsTypographyVariants.body2medium}" class="listbox-option--label">
+                    ${comboboxMultiValueContext.messages.selectAll()}
+                </ftds-typography>
+            </li>
+        `;
     }
     isValueSelected(value) {
         return this.value.some((v) => v.value === value);
@@ -171,7 +171,7 @@ export class FtdsComboboxMultiValue extends FtdsBaseCombobox {
     }
     renderSuggestionItem(suggestion, isSelected) {
         return html `
-            <ftds-icon class="listbox-option--checkbox" icon="${isSelected ? "square-check" : "square"}"></ftds-icon>
+            <ftds-icon class="listbox-option--checkbox" icon="${isSelected ? FtdsIcons.SQUARE_CHECK : FtdsIcons.SQUARE}"></ftds-icon>
             <ftds-typography variant="${FtdsTypographyVariants.body2medium}" class="listbox-option--label">
                 ${suggestion.label}
             </ftds-typography>

package/build/ftds-combobox.js

@@ -3,7 +3,7 @@ import { processValidationRules, screenReaderStyles, } from "@fluid-topics/ft-wc
 import { isSelectableListboxItem, ListboxItemType, } from "./ftds-base-combobox.properties";
 import { FtdsComboboxChangeEvent, } from "./ftds-combobox.properties";
 import { comboboxStyles } from "./ftds-combobox.styles";
-import { FtdsTypographyVariants } from "@fluid-topics/ft-typography";
+import { FtdsTypographyVariants } from "@fluid-topics/ftds-typography";
 import { FtdsBaseCombobox } from "./ftds-base-combobox";
 import { baseComboboxStyles } from "./ftds-base-combobox.styles";
 export class FtdsCombobox extends FtdsBaseCombobox {