@limetech/lime-elements 37.2.8 → 37.3.0

package/dist/types/components/chip-set/chip-set.d.ts

@@ -20,7 +20,7 @@ export declare class ChipSet {
    * Type of chip set
    *
    * - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored
-   * - `filter` renders a set of selectable chips where all are selectable. The `icon` property is ignored
+   * - `filter` renders a set of selectable chips where all are selectable.
    * - `input` renders a set of chips that can be used in conjunction with an input field
    *
    * If no type is set, a basic set of chips without additional functionality will be rendered
@@ -120,10 +120,12 @@ export declare class ChipSet {
   private textValue;
   private blurred;
   private inputChipIndexSelected;
-  private mdcChipSet;
+  private selectedChipIds;
   private mdcTextField;
   private handleKeyDown;
   constructor();
+  connectedCallback(): void;
+  private initialize;
   /**
    * Used to find out whether the chip-set is in edit mode.
    *
@@ -145,13 +147,11 @@ export declare class ChipSet {
    */
   emptyInput(): Promise<void>;
   componentDidLoad(): void;
-  componentWillUpdate(): void;
   componentDidUpdate(): void;
   disconnectedCallback(): void;
   render(): any;
+  private getValue;
   protected handleChangeChips(newValue: Chip[], oldValue: Chip[]): void;
-  private createMDCChipSet;
-  private destroyMDCChipSet;
   private renderChipSetLabel;
   private renderInputChips;
   private renderEmptyValueForReadonly;
@@ -173,27 +173,27 @@ export declare class ChipSet {
   private syncEmptyInput;
   private inputHidden;
   private handleTextInput;
-  private handleInteractionEvent;
   private emitInteraction;
-  private handleSelection;
-  private removeChip;
   private renderChip;
-  private renderDefaultChip;
-  private renderChipLabel;
   private hasHelperText;
   private renderHelperLine;
-  private renderFilterChip;
   private renderInputChip;
+  private getChipProps;
   private catchInputChipClicks;
-  private renderChipIcon;
+  private isSelectableChip;
+  private updateSelectedChipIds;
+  private updateChoiceTypeSelectedIds;
+  private isChipSelected;
+  private updateFilterTypeSelectedIds;
+  private removeChipIdFromSelectedChipIds;
+  private addChipIdToSelectedChipIds;
+  private handleRemoveChip;
+  private removeChip;
   private renderLeadingIcon;
-  private renderChipRemoveButton;
   private renderClearAllChipsButton;
   private clearAllChipsLabel;
-  private removeChipLabel;
   private handleDeleteAllIconClick;
   private renderDelimiter;
-  private renderBadge;
   private triggerIconColorWarning;
 }
 //# sourceMappingURL=chip-set.d.ts.map

package/dist/types/components/chip-set/chip.types.d.ts

@@ -70,7 +70,7 @@ export interface Chip<T = any> {
    */
   value?: T;
   /**
-   * The value of the badge. Only valid for `filter`.
+   * The value of the badge.
    */
   badge?: number;
   /**
@@ -78,4 +78,10 @@ export interface Chip<T = any> {
    */
   href?: string;
 }
+/**
+ * This type is used to determine the visual style and behavior of a Chip component.
+ *
+ * @beta
+ */
+export type ChipType = 'default' | 'filter';
 //# sourceMappingURL=chip.types.d.ts.map

package/dist/types/components.d.ts

@@ -13,7 +13,7 @@ import { Button } from "./components/button/button.types";
 import { CalloutType } from "./components/callout/callout.types";
 import { DateType, Languages } from "./components/date-picker/date.types";
 import { Icon, Languages as Languages1, Link } from "./interface";
-import { Chip } from "./components/chip-set/chip.types";
+import { Chip, ChipType } from "./components/chip-set/chip.types";
 import { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
 import { ColorScheme, Language } from "./components/code-editor/code-editor.types";
 import { Action } from "./components/collapsible-section/action";
@@ -46,7 +46,7 @@ export { Button } from "./components/button/button.types";
 export { CalloutType } from "./components/callout/callout.types";
 export { DateType, Languages } from "./components/date-picker/date.types";
 export { Icon, Languages as Languages1, Link } from "./interface";
-export { Chip } from "./components/chip-set/chip.types";
+export { Chip, ChipType } from "./components/chip-set/chip.types";
 export { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
 export { ColorScheme, Language } from "./components/code-editor/code-editor.types";
 export { Action } from "./components/collapsible-section/action";
@@ -430,6 +430,10 @@ export namespace Components {
           * Icon of the chip.
          */
         "icon"?: string | Icon;
+        /**
+          * Identifier for the chip. Must be unique.
+         */
+        "identifier"?: number | string;
         /**
           * Defines the language for translations. Will translate the translatable strings on the components.
          */
@@ -456,8 +460,9 @@ export namespace Components {
         "text": string;
         /**
           * Set to `filter` to render the chip with a distinct style suitable for visualizing filters.
+          * @beta
          */
-        "type"?: 'filter';
+        "type"?: ChipType;
     }
     /**
      * @exampleComponent limel-example-chip-set
@@ -544,7 +549,7 @@ export namespace Components {
          */
         "setFocus": (emptyInput?: boolean) => Promise<void>;
         /**
-          * Type of chip set  - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored - `filter` renders a set of selectable chips where all are selectable. The `icon` property is ignored - `input` renders a set of chips that can be used in conjunction with an input field  If no type is set, a basic set of chips without additional functionality will be rendered
+          * Type of chip set  - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored - `filter` renders a set of selectable chips where all are selectable. - `input` renders a set of chips that can be used in conjunction with an input field  If no type is set, a basic set of chips without additional functionality will be rendered
          */
         "type"?: 'choice' | 'filter' | 'input';
         /**
@@ -4192,6 +4197,10 @@ declare namespace LocalJSX {
           * Icon of the chip.
          */
         "icon"?: string | Icon;
+        /**
+          * Identifier for the chip. Must be unique.
+         */
+        "identifier"?: number | string;
         /**
           * Defines the language for translations. Will translate the translatable strings on the components.
          */
@@ -4201,9 +4210,9 @@ declare namespace LocalJSX {
          */
         "link"?: Omit<Link, 'text'>;
         /**
-          * Fired when clicking on the remove button of a `removable` chip.
+          * Fired when clicking on the remove button of a `removable` chip. The value of `identifier` is emitted as the event detail.
          */
-        "onRemove"?: (event: LimelChipCustomEvent<void>) => void;
+        "onRemove"?: (event: LimelChipCustomEvent<number | string>) => void;
         /**
           * Set to `true` to render the chip as a static UI element. Useful when the parent component has a `readonly` state.
          */
@@ -4222,8 +4231,9 @@ declare namespace LocalJSX {
         "text"?: string;
         /**
           * Set to `filter` to render the chip with a distinct style suitable for visualizing filters.
+          * @beta
          */
-        "type"?: 'filter';
+        "type"?: ChipType;
     }
     /**
      * @exampleComponent limel-example-chip-set
@@ -4314,7 +4324,7 @@ declare namespace LocalJSX {
          */
         "searchLabel"?: string;
         /**
-          * Type of chip set  - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored - `filter` renders a set of selectable chips where all are selectable. The `icon` property is ignored - `input` renders a set of chips that can be used in conjunction with an input field  If no type is set, a basic set of chips without additional functionality will be rendered
+          * Type of chip set  - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored - `filter` renders a set of selectable chips where all are selectable. - `input` renders a set of chips that can be used in conjunction with an input field  If no type is set, a basic set of chips without additional functionality will be rendered
          */
         "type"?: 'choice' | 'filter' | 'input';
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.2.8",
+  "version": "37.3.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -43,7 +43,7 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^18.6.1",
+    "@commitlint/config-conventional": "^18.6.2",
     "@microsoft/api-extractor": "^7.40.1",
     "@popperjs/core": "^2.11.8",
     "@rjsf/core": "^2.4.2",