@limetech/lime-elements 37.2.7 → 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/picker/picker.d.ts

@@ -6,6 +6,7 @@ import { Searcher } from '../picker/searcher.types';
  * @exampleComponent limel-example-picker-single
  * @exampleComponent limel-example-picker-multiple
  * @exampleComponent limel-example-picker-icons
+ * @exampleComponent limel-example-picker-value-as-object
  * @exampleComponent limel-example-picker-empty-suggestions
  * @exampleComponent limel-example-picker-leading-icon
  * @exampleComponent limel-example-picker-static-actions
@@ -51,9 +52,15 @@ export declare class Picker {
    */
   invalid: boolean;
   /**
-   * Currently selected value or values
+   * Currently selected value or values. Where the value can be an object.
    */
-  value: ListItem<number | string> | Array<ListItem<number | string>>;
+  value: ListItem<number | string | {
+    id: string | number;
+    [key: string]: any;
+  }> | Array<ListItem<number | string | {
+    id: string | number;
+    [key: string]: any;
+  }>>;
   /**
    * A search function that takes a search-string as an argument,
    * and returns a promise that will eventually be resolved with
@@ -121,6 +128,7 @@ export declare class Picker {
   protected onChangeValue(): void;
   protected createDebouncedSearcher(newValue: Searcher): void;
   private renderDelimiter;
+  private getValueId;
   private createChips;
   private createChip;
   /**

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';
         /**
@@ -1677,6 +1682,7 @@ export namespace Components {
      * @exampleComponent limel-example-picker-single
      * @exampleComponent limel-example-picker-multiple
      * @exampleComponent limel-example-picker-icons
+     * @exampleComponent limel-example-picker-value-as-object
      * @exampleComponent limel-example-picker-empty-suggestions
      * @exampleComponent limel-example-picker-leading-icon
      * @exampleComponent limel-example-picker-static-actions
@@ -1748,9 +1754,16 @@ export namespace Components {
          */
         "searcher": Searcher;
         /**
-          * Currently selected value or values
+          * Currently selected value or values. Where the value can be an object.
          */
-        "value": ListItem<number | string> | Array<ListItem<number | string>>;
+        "value": | ListItem<
+              number | string | { id: string | number; [key: string]: any }
+          >
+        | Array<
+              ListItem<
+                  number | string | { id: string | number; [key: string]: any }
+              >
+          >;
     }
     /**
      * A popover is an impermanent layer that is displayed on top of other content
@@ -3378,6 +3391,7 @@ declare global {
      * @exampleComponent limel-example-picker-single
      * @exampleComponent limel-example-picker-multiple
      * @exampleComponent limel-example-picker-icons
+     * @exampleComponent limel-example-picker-value-as-object
      * @exampleComponent limel-example-picker-empty-suggestions
      * @exampleComponent limel-example-picker-leading-icon
      * @exampleComponent limel-example-picker-static-actions
@@ -4183,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.
          */
@@ -4192,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.
          */
@@ -4213,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
@@ -4305,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';
         /**
@@ -5554,6 +5573,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-picker-single
      * @exampleComponent limel-example-picker-multiple
      * @exampleComponent limel-example-picker-icons
+     * @exampleComponent limel-example-picker-value-as-object
      * @exampleComponent limel-example-picker-empty-suggestions
      * @exampleComponent limel-example-picker-leading-icon
      * @exampleComponent limel-example-picker-static-actions
@@ -5637,9 +5657,16 @@ declare namespace LocalJSX {
          */
         "searcher"?: Searcher;
         /**
-          * Currently selected value or values
+          * Currently selected value or values. Where the value can be an object.
          */
-        "value"?: ListItem<number | string> | Array<ListItem<number | string>>;
+        "value"?: | ListItem<
+              number | string | { id: string | number; [key: string]: any }
+          >
+        | Array<
+              ListItem<
+                  number | string | { id: string | number; [key: string]: any }
+              >
+          >;
     }
     /**
      * A popover is an impermanent layer that is displayed on top of other content
@@ -7042,6 +7069,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-picker-single
              * @exampleComponent limel-example-picker-multiple
              * @exampleComponent limel-example-picker-icons
+             * @exampleComponent limel-example-picker-value-as-object
              * @exampleComponent limel-example-picker-empty-suggestions
              * @exampleComponent limel-example-picker-leading-icon
              * @exampleComponent limel-example-picker-static-actions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.2.7",
+  "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",