npm - @infineon/infineon-design-system-stencil - Versions diffs - 39.4.4--canary.1723.b2cb04cb46890b174f47cfd446a0e20dc3cee6fc.0 → 39.4.4-canary.0 - Mend

@infineon/infineon-design-system-stencil 39.4.4--canary.1723.b2cb04cb46890b174f47cfd446a0e20dc3cee6fc.0 → 39.4.4-canary.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1205) hide show

package/dist/collection/components/select/multi-select/multiselect.stories.js CHANGED Viewed

@@ -400,125 +400,125 @@ export default {
     },
 };
 const SlotBasedTemplate = args => {
-    const template = `<ifx-multiselect
-  name='${args.name}'
-  disabled='${args.disabled}'
-  required='${args.required}'
-  error='${args.error}'
-  caption='${args.caption}'
-  label='${args.label}'
-  placeholder='${args.placeholder}'
-  show-search='${args.showSearch}'
-  show-select-all='${args.showSelectAll}'
-  show-expand-collapse='${args.showExpandCollapse}'
-  show-clear-button='${args.showClearButton}'
-  no-results-message='${args.noResultsMessage}'
-  show-no-results-message='${args.showNoResultsMessage}'
-  search-placeholder='${args.searchPlaceholder}'
-  select-all-label='${args.selectAllLabel}'
-  expand-label='${args.expandLabel}'
-  collapse-label='${args.collapseLabel}'
-  aria-multi-select-label='${args.ariaMultiSelectLabel}'
-  aria-multi-select-labelled-by='${args.ariaMultiSelectLabelledBy}'
-  aria-multi-select-described-by='${args.ariaMultiSelectDescribedBy}'
-  aria-search-label='${args.ariaSearchLabel}'
-  aria-clear-label='${args.ariaClearLabel}'
-  aria-toggle-label='${args.ariaToggleLabel}'
-  aria-select-all-label='${args.ariaSelectAllLabel}'
-  aria-expand-all-label='${args.ariaExpandAllLabel}'
-  aria-collapse-all-label='${args.ariaCollapseAllLabel}'>
-  <ifx-multiselect-option value="category-a">
-    Category A - Main Section
-    <ifx-multiselect-option value="category-a-1" slot="children">
-      Category A.1 - First Subsection
-      <ifx-multiselect-option value="option-a-1-1" slot="children">Option A.1.1 - Basic Item</ifx-multiselect-option>
-      <ifx-multiselect-option value="option-a-1-2" selected slot="children">Option A.1.2 - Preselected Item</ifx-multiselect-option>
-      <ifx-multiselect-option value="option-a-1-3" slot="children">Option A.1.3 - Another Item</ifx-multiselect-option>
-    </ifx-multiselect-option>
-    <ifx-multiselect-option value="category-a-2" slot="children">
-      Category A.2 - Second Subsection
-      <ifx-multiselect-option value="option-a-2-1" slot="children">Option A.2.1 - Nested Item</ifx-multiselect-option>
-      <ifx-multiselect-option value="option-a-2-2" slot="children">
-        Option A.2.2 - Deep Nested Parent
-        <ifx-multiselect-option value="option-a-2-2-1" slot="children">Option A.2.2.1 - Level 4 Item</ifx-multiselect-option>
-        <ifx-multiselect-option value="option-a-2-2-2" slot="children">Option A.2.2.2 - Level 4 Item</ifx-multiselect-option>
-        <ifx-multiselect-option value="option-a-2-2-3" slot="children">
-          Option A.2.2.3 - Even Deeper
-          <ifx-multiselect-option value="option-a-2-2-3-1" slot="children">Option A.2.2.3.1 - Level 5 Item</ifx-multiselect-option>
-          <ifx-multiselect-option value="option-a-2-2-3-2" slot="children">Option A.2.2.3.2 - Level 5 Item</ifx-multiselect-option>
-        </ifx-multiselect-option>
-      </ifx-multiselect-option>
-      <ifx-multiselect-option value="option-a-2-3" slot="children">Option A.2.3 - Final Nested</ifx-multiselect-option>
-    </ifx-multiselect-option>
-    <ifx-multiselect-option value="option-a-3" slot="children">Option A.3 - Direct Child</ifx-multiselect-option>
-    <ifx-multiselect-option value="option-a-4" slot="children">Option A.4 - Another Direct Child</ifx-multiselect-option>
-  </ifx-multiselect-option>
-  <ifx-multiselect-option value="category-b">
-    Category B - Secondary Section
-    <ifx-multiselect-option value="category-b-1" slot="children">
-      Category B.1 - Mixed Content
-      <ifx-multiselect-option value="option-b-1-1" slot="children">Option B.1.1 - Standard Item</ifx-multiselect-option>
-      <ifx-multiselect-option value="category-b-1-2" slot="children">
-        Category B.1.2 - Sub-Category
-        <ifx-multiselect-option value="option-b-1-2-1" slot="children">Option B.1.2.1 - Nested Choice</ifx-multiselect-option>
-        <ifx-multiselect-option value="option-b-1-2-2" slot="children">Option B.1.2.2 - Nested Choice</ifx-multiselect-option>
-        <ifx-multiselect-option value="option-b-1-2-3" slot="children">Option B.1.2.3 - Nested Choice</ifx-multiselect-option>
-      </ifx-multiselect-option>
-      <ifx-multiselect-option value="option-b-1-3" slot="children">Option B.1.3 - Standard Item</ifx-multiselect-option>
-    </ifx-multiselect-option>
-    <ifx-multiselect-option value="option-b-2" slot="children">Option B.2 - Standalone Item</ifx-multiselect-option>
-    <ifx-multiselect-option value="option-b-3" slot="children">Option B.3 - Standalone Item</ifx-multiselect-option>
-  </ifx-multiselect-option>
-  <ifx-multiselect-option value="category-c">
-    Category C - Complex Structure
-    <ifx-multiselect-option value="category-c-1" slot="children">
-      Category C.1 - Multi-Level Group
-      <ifx-multiselect-option value="category-c-1-1" slot="children">
-        Category C.1.1 - Sub-Group Alpha
-        <ifx-multiselect-option value="option-c-1-1-1" slot="children">Option C.1.1.1 - Alpha Item 1</ifx-multiselect-option>
-        <ifx-multiselect-option value="option-c-1-1-2" slot="children">Option C.1.1.2 - Alpha Item 2</ifx-multiselect-option>
-      </ifx-multiselect-option>
-      <ifx-multiselect-option value="category-c-1-2" slot="children">
-        Category C.1.2 - Sub-Group Beta
-        <ifx-multiselect-option value="option-c-1-2-1" slot="children">Option C.1.2.1 - Beta Item 1</ifx-multiselect-option>
-        <ifx-multiselect-option value="option-c-1-2-2" slot="children">Option C.1.2.2 - Beta Item 2</ifx-multiselect-option>
-        <ifx-multiselect-option value="option-c-1-2-3" slot="children">Option C.1.2.3 - Beta Item 3</ifx-multiselect-option>
-      </ifx-multiselect-option>
-      <ifx-multiselect-option value="option-c-1-3" slot="children">Option C.1.3 - Direct Item</ifx-multiselect-option>
-    </ifx-multiselect-option>
-    <ifx-multiselect-option value="category-c-2" slot="children">
-      Category C.2 - Another Group
-      <ifx-multiselect-option value="option-c-2-1" slot="children">Option C.2.1 - Group Item</ifx-multiselect-option>
-      <ifx-multiselect-option value="option-c-2-2" slot="children">Option C.2.2 - Group Item</ifx-multiselect-option>
-    </ifx-multiselect-option>
-  </ifx-multiselect-option>
-  <ifx-multiselect-option value="option-d">Option D - Top-Level Standalone</ifx-multiselect-option>
-  <ifx-multiselect-option value="option-e">Option E - Top-Level Standalone</ifx-multiselect-option>
-  <ifx-multiselect-option value="category-f">
-    Category F - Final Section
-    <ifx-multiselect-option value="option-f-1" slot="children">Option F.1 - Simple Item</ifx-multiselect-option>
-    <ifx-multiselect-option value="option-f-2" slot="children">Option F.2 - Simple Item</ifx-multiselect-option>
-    <ifx-multiselect-option value="category-f-3" slot="children">
-      Category F.3 - Last Group
-      <ifx-multiselect-option value="option-f-3-1" slot="children">Option F.3.1 - Final Nested</ifx-multiselect-option>
-      <ifx-multiselect-option value="option-f-3-2" slot="children">Option F.3.2 - Final Nested</ifx-multiselect-option>
-      <ifx-multiselect-option value="option-f-3-3" slot="children">Option F.3.3 - Final Nested</ifx-multiselect-option>
-    </ifx-multiselect-option>
-  </ifx-multiselect-option>
+    const template = `<ifx-multiselect
+  name='${args.name}'
+  disabled='${args.disabled}'
+  required='${args.required}'
+  error='${args.error}'
+  caption='${args.caption}'
+  label='${args.label}'
+  placeholder='${args.placeholder}'
+  show-search='${args.showSearch}'
+  show-select-all='${args.showSelectAll}'
+  show-expand-collapse='${args.showExpandCollapse}'
+  show-clear-button='${args.showClearButton}'
+  no-results-message='${args.noResultsMessage}'
+  show-no-results-message='${args.showNoResultsMessage}'
+  search-placeholder='${args.searchPlaceholder}'
+  select-all-label='${args.selectAllLabel}'
+  expand-label='${args.expandLabel}'
+  collapse-label='${args.collapseLabel}'
+  aria-multi-select-label='${args.ariaMultiSelectLabel}'
+  aria-multi-select-labelled-by='${args.ariaMultiSelectLabelledBy}'
+  aria-multi-select-described-by='${args.ariaMultiSelectDescribedBy}'
+  aria-search-label='${args.ariaSearchLabel}'
+  aria-clear-label='${args.ariaClearLabel}'
+  aria-toggle-label='${args.ariaToggleLabel}'
+  aria-select-all-label='${args.ariaSelectAllLabel}'
+  aria-expand-all-label='${args.ariaExpandAllLabel}'
+  aria-collapse-all-label='${args.ariaCollapseAllLabel}'>
+  <ifx-multiselect-option value="category-a">
+    Category A - Main Section
+    <ifx-multiselect-option value="category-a-1" slot="children">
+      Category A.1 - First Subsection
+      <ifx-multiselect-option value="option-a-1-1" slot="children">Option A.1.1 - Basic Item</ifx-multiselect-option>
+      <ifx-multiselect-option value="option-a-1-2" selected slot="children">Option A.1.2 - Preselected Item</ifx-multiselect-option>
+      <ifx-multiselect-option value="option-a-1-3" slot="children">Option A.1.3 - Another Item</ifx-multiselect-option>
+    </ifx-multiselect-option>
+    <ifx-multiselect-option value="category-a-2" slot="children">
+      Category A.2 - Second Subsection
+      <ifx-multiselect-option value="option-a-2-1" slot="children">Option A.2.1 - Nested Item</ifx-multiselect-option>
+      <ifx-multiselect-option value="option-a-2-2" slot="children">
+        Option A.2.2 - Deep Nested Parent
+        <ifx-multiselect-option value="option-a-2-2-1" slot="children">Option A.2.2.1 - Level 4 Item</ifx-multiselect-option>
+        <ifx-multiselect-option value="option-a-2-2-2" slot="children">Option A.2.2.2 - Level 4 Item</ifx-multiselect-option>
+        <ifx-multiselect-option value="option-a-2-2-3" slot="children">
+          Option A.2.2.3 - Even Deeper
+          <ifx-multiselect-option value="option-a-2-2-3-1" slot="children">Option A.2.2.3.1 - Level 5 Item</ifx-multiselect-option>
+          <ifx-multiselect-option value="option-a-2-2-3-2" slot="children">Option A.2.2.3.2 - Level 5 Item</ifx-multiselect-option>
+        </ifx-multiselect-option>
+      </ifx-multiselect-option>
+      <ifx-multiselect-option value="option-a-2-3" slot="children">Option A.2.3 - Final Nested</ifx-multiselect-option>
+    </ifx-multiselect-option>
+    <ifx-multiselect-option value="option-a-3" slot="children">Option A.3 - Direct Child</ifx-multiselect-option>
+    <ifx-multiselect-option value="option-a-4" slot="children">Option A.4 - Another Direct Child</ifx-multiselect-option>
+  </ifx-multiselect-option>
+  <ifx-multiselect-option value="category-b">
+    Category B - Secondary Section
+    <ifx-multiselect-option value="category-b-1" slot="children">
+      Category B.1 - Mixed Content
+      <ifx-multiselect-option value="option-b-1-1" slot="children">Option B.1.1 - Standard Item</ifx-multiselect-option>
+      <ifx-multiselect-option value="category-b-1-2" slot="children">
+        Category B.1.2 - Sub-Category
+        <ifx-multiselect-option value="option-b-1-2-1" slot="children">Option B.1.2.1 - Nested Choice</ifx-multiselect-option>
+        <ifx-multiselect-option value="option-b-1-2-2" slot="children">Option B.1.2.2 - Nested Choice</ifx-multiselect-option>
+        <ifx-multiselect-option value="option-b-1-2-3" slot="children">Option B.1.2.3 - Nested Choice</ifx-multiselect-option>
+      </ifx-multiselect-option>
+      <ifx-multiselect-option value="option-b-1-3" slot="children">Option B.1.3 - Standard Item</ifx-multiselect-option>
+    </ifx-multiselect-option>
+    <ifx-multiselect-option value="option-b-2" slot="children">Option B.2 - Standalone Item</ifx-multiselect-option>
+    <ifx-multiselect-option value="option-b-3" slot="children">Option B.3 - Standalone Item</ifx-multiselect-option>
+  </ifx-multiselect-option>
+  <ifx-multiselect-option value="category-c">
+    Category C - Complex Structure
+    <ifx-multiselect-option value="category-c-1" slot="children">
+      Category C.1 - Multi-Level Group
+      <ifx-multiselect-option value="category-c-1-1" slot="children">
+        Category C.1.1 - Sub-Group Alpha
+        <ifx-multiselect-option value="option-c-1-1-1" slot="children">Option C.1.1.1 - Alpha Item 1</ifx-multiselect-option>
+        <ifx-multiselect-option value="option-c-1-1-2" slot="children">Option C.1.1.2 - Alpha Item 2</ifx-multiselect-option>
+      </ifx-multiselect-option>
+      <ifx-multiselect-option value="category-c-1-2" slot="children">
+        Category C.1.2 - Sub-Group Beta
+        <ifx-multiselect-option value="option-c-1-2-1" slot="children">Option C.1.2.1 - Beta Item 1</ifx-multiselect-option>
+        <ifx-multiselect-option value="option-c-1-2-2" slot="children">Option C.1.2.2 - Beta Item 2</ifx-multiselect-option>
+        <ifx-multiselect-option value="option-c-1-2-3" slot="children">Option C.1.2.3 - Beta Item 3</ifx-multiselect-option>
+      </ifx-multiselect-option>
+      <ifx-multiselect-option value="option-c-1-3" slot="children">Option C.1.3 - Direct Item</ifx-multiselect-option>
+    </ifx-multiselect-option>
+    <ifx-multiselect-option value="category-c-2" slot="children">
+      Category C.2 - Another Group
+      <ifx-multiselect-option value="option-c-2-1" slot="children">Option C.2.1 - Group Item</ifx-multiselect-option>
+      <ifx-multiselect-option value="option-c-2-2" slot="children">Option C.2.2 - Group Item</ifx-multiselect-option>
+    </ifx-multiselect-option>
+  </ifx-multiselect-option>
+  <ifx-multiselect-option value="option-d">Option D - Top-Level Standalone</ifx-multiselect-option>
+  <ifx-multiselect-option value="option-e">Option E - Top-Level Standalone</ifx-multiselect-option>
+  <ifx-multiselect-option value="category-f">
+    Category F - Final Section
+    <ifx-multiselect-option value="option-f-1" slot="children">Option F.1 - Simple Item</ifx-multiselect-option>
+    <ifx-multiselect-option value="option-f-2" slot="children">Option F.2 - Simple Item</ifx-multiselect-option>
+    <ifx-multiselect-option value="category-f-3" slot="children">
+      Category F.3 - Last Group
+      <ifx-multiselect-option value="option-f-3-1" slot="children">Option F.3.1 - Final Nested</ifx-multiselect-option>
+      <ifx-multiselect-option value="option-f-3-2" slot="children">Option F.3.2 - Final Nested</ifx-multiselect-option>
+      <ifx-multiselect-option value="option-f-3-3" slot="children">Option F.3.3 - Final Nested</ifx-multiselect-option>
+    </ifx-multiselect-option>
+  </ifx-multiselect-option>
 </ifx-multiselect>`;
     setTimeout(() => {
         document.querySelector('ifx-multiselect').addEventListener('ifxSelect', action('ifxSelect'));
@@ -539,43 +539,43 @@ Default.parameters = {
     }
 };
 const FlatTemplate = args => {
-    const template = `<ifx-multiselect
-  name='${args.name}'
-  disabled='${args.disabled}'
-  error='${args.error}'
-  caption='${args.caption}'
-  label='${args.label}'
-  placeholder='${args.placeholder}'
-  show-search='${args.showSearch}'
-  show-select-all='${args.showSelectAll}'
-  show-expand-collapse='${args.showExpandCollapse}'
-  show-clear-button='${args.showClearButton}'
-  no-results-message='${args.noResultsMessage}'
-  show-no-results-message='${args.showNoResultsMessage}'
-  search-placeholder='${args.searchPlaceholder}'
-  select-all-label='${args.selectAllLabel}'
-  expand-label='${args.expandLabel}'
-  collapse-label='${args.collapseLabel}'
-  aria-multi-select-label='${args.ariaMultiSelectLabel}'
-  aria-multi-select-labelled-by='${args.ariaMultiSelectLabelledBy}'
-  aria-multi-select-described-by='${args.ariaMultiSelectDescribedBy}'
-  aria-search-label='${args.ariaSearchLabel}'
-  aria-clear-label='${args.ariaClearLabel}'
-  aria-toggle-label='${args.ariaToggleLabel}'
-  aria-select-all-label='${args.ariaSelectAllLabel}'
-  aria-expand-all-label='${args.ariaExpandAllLabel}'
-  aria-collapse-all-label='${args.ariaCollapseAllLabel}'>
-  <ifx-multiselect-option value="option-1">Option 1</ifx-multiselect-option>
-  <ifx-multiselect-option value="option-2">Option 2</ifx-multiselect-option>
-  <ifx-multiselect-option value="option-3">Option 3</ifx-multiselect-option>
-  <ifx-multiselect-option value="option-4">Option 4</ifx-multiselect-option>
-  <ifx-multiselect-option value="option-5">Option 5</ifx-multiselect-option>
-  <ifx-multiselect-option value="option-6">Option 6</ifx-multiselect-option>
-  <ifx-multiselect-option value="option-7">Option 7</ifx-multiselect-option>
-  <ifx-multiselect-option value="option-8">Option 8</ifx-multiselect-option>
-  <ifx-multiselect-option value="option-9">Option 9</ifx-multiselect-option>
-  <ifx-multiselect-option value="option-10">Option 10</ifx-multiselect-option>
+    const template = `<ifx-multiselect
+  name='${args.name}'
+  disabled='${args.disabled}'
+  error='${args.error}'
+  caption='${args.caption}'
+  label='${args.label}'
+  placeholder='${args.placeholder}'
+  show-search='${args.showSearch}'
+  show-select-all='${args.showSelectAll}'
+  show-expand-collapse='${args.showExpandCollapse}'
+  show-clear-button='${args.showClearButton}'
+  no-results-message='${args.noResultsMessage}'
+  show-no-results-message='${args.showNoResultsMessage}'
+  search-placeholder='${args.searchPlaceholder}'
+  select-all-label='${args.selectAllLabel}'
+  expand-label='${args.expandLabel}'
+  collapse-label='${args.collapseLabel}'
+  aria-multi-select-label='${args.ariaMultiSelectLabel}'
+  aria-multi-select-labelled-by='${args.ariaMultiSelectLabelledBy}'
+  aria-multi-select-described-by='${args.ariaMultiSelectDescribedBy}'
+  aria-search-label='${args.ariaSearchLabel}'
+  aria-clear-label='${args.ariaClearLabel}'
+  aria-toggle-label='${args.ariaToggleLabel}'
+  aria-select-all-label='${args.ariaSelectAllLabel}'
+  aria-expand-all-label='${args.ariaExpandAllLabel}'
+  aria-collapse-all-label='${args.ariaCollapseAllLabel}'>
+  <ifx-multiselect-option value="option-1">Option 1</ifx-multiselect-option>
+  <ifx-multiselect-option value="option-2">Option 2</ifx-multiselect-option>
+  <ifx-multiselect-option value="option-3">Option 3</ifx-multiselect-option>
+  <ifx-multiselect-option value="option-4">Option 4</ifx-multiselect-option>
+  <ifx-multiselect-option value="option-5">Option 5</ifx-multiselect-option>
+  <ifx-multiselect-option value="option-6">Option 6</ifx-multiselect-option>
+  <ifx-multiselect-option value="option-7">Option 7</ifx-multiselect-option>
+  <ifx-multiselect-option value="option-8">Option 8</ifx-multiselect-option>
+  <ifx-multiselect-option value="option-9">Option 9</ifx-multiselect-option>
+  <ifx-multiselect-option value="option-10">Option 10</ifx-multiselect-option>
 </ifx-multiselect>`;
     setTimeout(() => {
         const multiselect = document.querySelectorAll('ifx-multiselect')[document.querySelectorAll('ifx-multiselect').length - 1];

package/dist/collection/components/select/multi-select/multiselect.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"multiselect.stories.js","sourceRoot":"","sources":["../../../../src/components/select/multi-select/multiselect.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Select/Multi Select',\n parameters: {\n controls: {\n expanded: true,\n sort: 'alpha'\n }\n },\n args: {\n name: 'multiselect',\n disabled: false,\n required: true,\n showSearch: true,\n showSelectAll: true,\n showExpandCollapse: true,\n error: false,\n caption: '',\n label: '',\n placeholder: 'Placeholder',\n showClearButton: true,\n noResultsMessage: 'No results found.',\n showNoResultsMessage: true,\n searchPlaceholder: 'Search',\n selectAllLabel: 'Select all',\n expandLabel: 'Expand',\n collapseLabel: 'Collapse',\n ariaMultiSelectLabel: 'Multi-select dropdown',\n ariaMultiSelectLabelledBy: '',\n ariaMultiSelectDescribedBy: '',\n ariaSearchLabel: 'Search options',\n ariaClearLabel: 'Clear all selections',\n ariaToggleLabel: 'Toggle dropdown',\n ariaSelectAllLabel: 'Select all options',\n ariaExpandAllLabel: 'Expand all categories',\n ariaCollapseAllLabel: 'Collapse all categories'\n },\n argTypes: {\n // Function\n disabled: {\n description: 'Disable the input field.',\n options: [true, false],\n control: { type: 'boolean' },\n table: {\n category: 'ifx-multiselect props',\n defaultValue: {\n summary: 'false',\n },\n type: {\n summary: 'boolean',\n },\n },\n },\n required: {\n\t\t\tdescription: 'Marks the Generic Multi-Level Selection as required with an asterik for form submission.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-multiselect props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: true\n\t\t\t\t}\n\t\t\t}\n\t\t},\n name: {\n description: `For a <form> element, the name attribute is used as a reference when the data is submitted.`,\n control: 'text',\n table: {\n category: 'ifx-multiselect props',\n defaultValue: {\n summary: 'undefined',\n },\n type: {\n summary: 'string',\n },\n },\n },\n showSearch: {\n description: 'Show a search input.',\n options: [true, false],\n control: { type: 'boolean' },\n table: {\n category: 'ifx-multiselect props',\n defaultValue: {\n summary: 'true',\n },\n type: {\n summary: 'boolean',\n },\n },\n },\n showSelectAll: {\n description: 'Show a checkbox to select all options.',\n options: [true, false],\n control: { type: 'boolean' },\n table: {\n category: 'ifx-multiselect props',\n defaultValue: {\n summary: 'true',\n },\n type: {\n summary: 'boolean',\n },\n },\n },\n showExpandCollapse: {\n description: 'Show expand/collapse controls for nested options.',\n options: [true, false],\n control: { type: 'boolean' },\n table: {\n category: 'ifx-multiselect props',\n defaultValue: {\n summary: 'true',\n },\n type: {\n summary: 'boolean',\n },\n },\n },\n showClearButton: {\n description: 'Shows the clear icon button.',\n control: 'boolean',\n table: {\n category: 'ifx-multiselect props',\n defaultValue: {\n summary: 'true',\n },\n type: {\n summary: 'boolean',\n },\n }\n },\n showNoResultsMessage: {\n description: 'Show/hide the no results message when search has no matches.',\n options: [true, false],\n control: { type: 'boolean' },\n table: {\n category: 'ifx-multiselect props',\n defaultValue: {\n summary: 'true',\n },\n type: {\n summary: 'boolean',\n },\n },\n },\n error: {\n description: 'Show error state.',\n options: [true, false],\n control: { type: 'boolean' },\n table: {\n category: 'ifx-multiselect props',\n defaultValue: {\n summary: 'false',\n },\n type: {\n summary: 'boolean',\n },\n },\n },\n label: {\n description: 'Label over the input field.',\n control: 'text',\n table: {\n category: 'ifx-multiselect props',\n defaultValue: {\n summary: '\"\"',\n },\n type: {\n summary: 'string',\n },\n },\n },\n placeholder: {\n description: 'Label inside the input field.',\n control: 'text',\n table: {\n category: 'ifx-multiselect props',\n defaultValue: {\n summary: '\"\"',\n },\n type: {\n summary: 'string',\n },\n },\n },\n caption: {\n description: 'Text displayed below the select component to provide additional information.',\n table: {\n category: 'ifx-multiselect props',\n type: {\n summary: 'string',\n },\n },\n },\n noResultsMessage: {\n description: 'Custom message to display when search has no results.',\n control: 'text',\n table: {\n category: 'ifx-multiselect props',\n defaultValue: {\n summary: 'No results found.',\n },\n type: {\n summary: 'string',\n },\n },\n },\n searchPlaceholder: {\n description: 'Placeholder text for the search input field.',\n control: 'text',\n table: {\n category: 'ifx-multiselect props',\n defaultValue: {\n summary: 'Search',\n },\n type: {\n summary: 'string',\n },\n },\n },\n selectAllLabel: {\n description: 'Label text for the select all checkbox.',\n control: 'text',\n table: {\n category: 'ifx-multiselect props',\n defaultValue: {\n summary: 'Select all',\n },\n type: {\n summary: 'string',\n },\n },\n },\n expandLabel: {\n description: 'Label text for the expand all control.',\n control: 'text',\n table: {\n category: 'ifx-multiselect props',\n defaultValue: {\n summary: 'Expand',\n },\n type: {\n summary: 'string',\n },\n },\n },\n collapseLabel: {\n description: 'Label text for the collapse all control.',\n control: 'text',\n table: {\n category: 'ifx-multiselect props',\n defaultValue: {\n summary: 'Collapse',\n },\n type: {\n summary: 'string',\n },\n },\n },\n\n // ARIA Labels\n ariaMultiSelectLabel: {\n description: 'ARIA label for the multiselect component.',\n control: 'text',\n table: {\n category: 'ARIA Labels',\n defaultValue: {\n summary: 'Multi-select dropdown',\n },\n type: {\n summary: 'string',\n },\n },\n },\n ariaMultiSelectLabelledBy: {\n description: 'ID of element that labels the multiselect.',\n control: 'text',\n table: {\n category: 'ARIA Labels',\n defaultValue: {\n summary: '\"\"',\n },\n type: {\n summary: 'string',\n },\n },\n },\n ariaMultiSelectDescribedBy: {\n description: 'ID of element that describes the multiselect.',\n control: 'text',\n table: {\n category: 'ARIA Labels',\n defaultValue: {\n summary: '\"\"',\n },\n type: {\n summary: 'string',\n },\n },\n },\n ariaSearchLabel: {\n description: 'ARIA label for the search input field.',\n control: 'text',\n table: {\n category: 'ARIA Labels',\n defaultValue: {\n summary: 'Search options',\n },\n type: {\n summary: 'string',\n },\n },\n },\n ariaClearLabel: {\n description: 'ARIA label for the clear all button.',\n control: 'text',\n table: {\n category: 'ARIA Labels',\n defaultValue: {\n summary: 'Clear all selections',\n },\n type: {\n summary: 'string',\n },\n },\n },\n ariaToggleLabel: {\n description: 'ARIA label for the dropdown toggle button.',\n control: 'text',\n table: {\n category: 'ARIA Labels',\n defaultValue: {\n summary: 'Toggle dropdown',\n },\n type: {\n summary: 'string',\n },\n },\n },\n ariaSelectAllLabel: {\n description: 'ARIA label for the select all checkbox.',\n control: 'text',\n table: {\n category: 'ARIA Labels',\n defaultValue: {\n summary: 'Select all options',\n },\n type: {\n summary: 'string',\n },\n },\n },\n ariaExpandAllLabel: {\n description: 'ARIA label for the expand all control.',\n control: 'text',\n table: {\n category: 'ARIA Labels',\n defaultValue: {\n summary: 'Expand all categories',\n },\n type: {\n summary: 'string',\n },\n },\n },\n ariaCollapseAllLabel: {\n description: 'ARIA label for the collapse all control.',\n control: 'text',\n table: {\n category: 'ARIA Labels',\n defaultValue: {\n summary: 'Collapse all categories',\n },\n type: {\n summary: 'string',\n },\n },\n },\n\n // Custom Events\n ifxSelect: {\n action: 'ifxSelect',\n description: 'Custom event emitted when item is selected or unselected.',\n table: {\n category: 'Custom Events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxSelect={handleInput}\\nVue:@ifxSelect=\"handleInput\"\\nAngular:(ifxSelect)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxSelect\", (event) => {//handle input});',\n },\n },\n },\n ifxOpen: {\n action: 'ifxOpen',\n description: 'Custom event emitted when multiselect is opened.',\n table: {\n category: 'Custom Events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxOpen={handleChange}\\nVue:@ifxOpen=\"handleChange\"\\nAngular:(ifxOpen)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxOpen\", (event) => {//handle change});',\n },\n },\n }\n },\n};\n\nconst SlotBasedTemplate = args => {\n const template = `<ifx-multiselect\n name='${args.name}'\n disabled='${args.disabled}'\n required='${args.required}'\n error='${args.error}'\n caption='${args.caption}'\n label='${args.label}'\n placeholder='${args.placeholder}'\n show-search='${args.showSearch}'\n show-select-all='${args.showSelectAll}'\n show-expand-collapse='${args.showExpandCollapse}'\n show-clear-button='${args.showClearButton}'\n no-results-message='${args.noResultsMessage}'\n show-no-results-message='${args.showNoResultsMessage}'\n search-placeholder='${args.searchPlaceholder}'\n select-all-label='${args.selectAllLabel}'\n expand-label='${args.expandLabel}'\n collapse-label='${args.collapseLabel}'\n aria-multi-select-label='${args.ariaMultiSelectLabel}'\n aria-multi-select-labelled-by='${args.ariaMultiSelectLabelledBy}'\n aria-multi-select-described-by='${args.ariaMultiSelectDescribedBy}'\n aria-search-label='${args.ariaSearchLabel}'\n aria-clear-label='${args.ariaClearLabel}'\n aria-toggle-label='${args.ariaToggleLabel}'\n aria-select-all-label='${args.ariaSelectAllLabel}'\n aria-expand-all-label='${args.ariaExpandAllLabel}'\n aria-collapse-all-label='${args.ariaCollapseAllLabel}'>\n\n <ifx-multiselect-option value=\"category-a\">\n Category A - Main Section\n\n <ifx-multiselect-option value=\"category-a-1\" slot=\"children\">\n Category A.1 - First Subsection\n <ifx-multiselect-option value=\"option-a-1-1\" slot=\"children\">Option A.1.1 - Basic Item</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-a-1-2\" selected slot=\"children\">Option A.1.2 - Preselected Item</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-a-1-3\" slot=\"children\">Option A.1.3 - Another Item</ifx-multiselect-option>\n </ifx-multiselect-option>\n\n <ifx-multiselect-option value=\"category-a-2\" slot=\"children\">\n Category A.2 - Second Subsection\n <ifx-multiselect-option value=\"option-a-2-1\" slot=\"children\">Option A.2.1 - Nested Item</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-a-2-2\" slot=\"children\">\n Option A.2.2 - Deep Nested Parent\n <ifx-multiselect-option value=\"option-a-2-2-1\" slot=\"children\">Option A.2.2.1 - Level 4 Item</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-a-2-2-2\" slot=\"children\">Option A.2.2.2 - Level 4 Item</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-a-2-2-3\" slot=\"children\">\n Option A.2.2.3 - Even Deeper\n <ifx-multiselect-option value=\"option-a-2-2-3-1\" slot=\"children\">Option A.2.2.3.1 - Level 5 Item</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-a-2-2-3-2\" slot=\"children\">Option A.2.2.3.2 - Level 5 Item</ifx-multiselect-option>\n </ifx-multiselect-option>\n </ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-a-2-3\" slot=\"children\">Option A.2.3 - Final Nested</ifx-multiselect-option>\n </ifx-multiselect-option>\n\n <ifx-multiselect-option value=\"option-a-3\" slot=\"children\">Option A.3 - Direct Child</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-a-4\" slot=\"children\">Option A.4 - Another Direct Child</ifx-multiselect-option>\n </ifx-multiselect-option>\n\n <ifx-multiselect-option value=\"category-b\">\n Category B - Secondary Section\n\n <ifx-multiselect-option value=\"category-b-1\" slot=\"children\">\n Category B.1 - Mixed Content\n <ifx-multiselect-option value=\"option-b-1-1\" slot=\"children\">Option B.1.1 - Standard Item</ifx-multiselect-option>\n <ifx-multiselect-option value=\"category-b-1-2\" slot=\"children\">\n Category B.1.2 - Sub-Category\n <ifx-multiselect-option value=\"option-b-1-2-1\" slot=\"children\">Option B.1.2.1 - Nested Choice</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-b-1-2-2\" slot=\"children\">Option B.1.2.2 - Nested Choice</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-b-1-2-3\" slot=\"children\">Option B.1.2.3 - Nested Choice</ifx-multiselect-option>\n </ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-b-1-3\" slot=\"children\">Option B.1.3 - Standard Item</ifx-multiselect-option>\n </ifx-multiselect-option>\n\n <ifx-multiselect-option value=\"option-b-2\" slot=\"children\">Option B.2 - Standalone Item</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-b-3\" slot=\"children\">Option B.3 - Standalone Item</ifx-multiselect-option>\n </ifx-multiselect-option>\n\n <ifx-multiselect-option value=\"category-c\">\n Category C - Complex Structure\n\n <ifx-multiselect-option value=\"category-c-1\" slot=\"children\">\n Category C.1 - Multi-Level Group\n <ifx-multiselect-option value=\"category-c-1-1\" slot=\"children\">\n Category C.1.1 - Sub-Group Alpha\n <ifx-multiselect-option value=\"option-c-1-1-1\" slot=\"children\">Option C.1.1.1 - Alpha Item 1</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-c-1-1-2\" slot=\"children\">Option C.1.1.2 - Alpha Item 2</ifx-multiselect-option>\n </ifx-multiselect-option>\n <ifx-multiselect-option value=\"category-c-1-2\" slot=\"children\">\n Category C.1.2 - Sub-Group Beta\n <ifx-multiselect-option value=\"option-c-1-2-1\" slot=\"children\">Option C.1.2.1 - Beta Item 1</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-c-1-2-2\" slot=\"children\">Option C.1.2.2 - Beta Item 2</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-c-1-2-3\" slot=\"children\">Option C.1.2.3 - Beta Item 3</ifx-multiselect-option>\n </ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-c-1-3\" slot=\"children\">Option C.1.3 - Direct Item</ifx-multiselect-option>\n </ifx-multiselect-option>\n\n <ifx-multiselect-option value=\"category-c-2\" slot=\"children\">\n Category C.2 - Another Group\n <ifx-multiselect-option value=\"option-c-2-1\" slot=\"children\">Option C.2.1 - Group Item</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-c-2-2\" slot=\"children\">Option C.2.2 - Group Item</ifx-multiselect-option>\n </ifx-multiselect-option>\n </ifx-multiselect-option>\n\n <ifx-multiselect-option value=\"option-d\">Option D - Top-Level Standalone</ifx-multiselect-option>\n\n <ifx-multiselect-option value=\"option-e\">Option E - Top-Level Standalone</ifx-multiselect-option>\n\n <ifx-multiselect-option value=\"category-f\">\n Category F - Final Section\n\n <ifx-multiselect-option value=\"option-f-1\" slot=\"children\">Option F.1 - Simple Item</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-f-2\" slot=\"children\">Option F.2 - Simple Item</ifx-multiselect-option>\n <ifx-multiselect-option value=\"category-f-3\" slot=\"children\">\n Category F.3 - Last Group\n <ifx-multiselect-option value=\"option-f-3-1\" slot=\"children\">Option F.3.1 - Final Nested</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-f-3-2\" slot=\"children\">Option F.3.2 - Final Nested</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-f-3-3\" slot=\"children\">Option F.3.3 - Final Nested</ifx-multiselect-option>\n </ifx-multiselect-option>\n </ifx-multiselect-option>\n</ifx-multiselect>`;\n\n setTimeout(() => {\n document.querySelector('ifx-multiselect').addEventListener('ifxSelect', action('ifxSelect'));\n document.querySelector('ifx-multiselect').addEventListener('ifxOpen', action('ifxOpen'));\n }, 0);\n\n return template;\n};\n\nexport const Default = SlotBasedTemplate.bind({});\nDefault.args = {\n label: 'Generic Multi-Level Selection',\n placeholder: 'Select options...',\n};\nDefault.parameters = {\n docs: {\n description: {\n story: 'The multiselect component supports nested hierarchical options with search, select all, and expand/collapse functionality. Use slot-based syntax for defining options and their nested structure.'\n }\n }\n};\n\nconst FlatTemplate = args => {\n const template = `<ifx-multiselect\n name='${args.name}'\n disabled='${args.disabled}'\n error='${args.error}'\n caption='${args.caption}'\n label='${args.label}'\n placeholder='${args.placeholder}'\n show-search='${args.showSearch}'\n show-select-all='${args.showSelectAll}'\n show-expand-collapse='${args.showExpandCollapse}'\n show-clear-button='${args.showClearButton}'\n no-results-message='${args.noResultsMessage}'\n show-no-results-message='${args.showNoResultsMessage}'\n search-placeholder='${args.searchPlaceholder}'\n select-all-label='${args.selectAllLabel}'\n expand-label='${args.expandLabel}'\n collapse-label='${args.collapseLabel}'\n aria-multi-select-label='${args.ariaMultiSelectLabel}'\n aria-multi-select-labelled-by='${args.ariaMultiSelectLabelledBy}'\n aria-multi-select-described-by='${args.ariaMultiSelectDescribedBy}'\n aria-search-label='${args.ariaSearchLabel}'\n aria-clear-label='${args.ariaClearLabel}'\n aria-toggle-label='${args.ariaToggleLabel}'\n aria-select-all-label='${args.ariaSelectAllLabel}'\n aria-expand-all-label='${args.ariaExpandAllLabel}'\n aria-collapse-all-label='${args.ariaCollapseAllLabel}'>\n\n <ifx-multiselect-option value=\"option-1\">Option 1</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-2\">Option 2</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-3\">Option 3</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-4\">Option 4</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-5\">Option 5</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-6\">Option 6</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-7\">Option 7</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-8\">Option 8</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-9\">Option 9</ifx-multiselect-option>\n <ifx-multiselect-option value=\"option-10\">Option 10</ifx-multiselect-option>\n</ifx-multiselect>`;\n\n setTimeout(() => {\n const multiselect = document.querySelectorAll('ifx-multiselect')[document.querySelectorAll('ifx-multiselect').length - 1];\n multiselect.addEventListener('ifxSelect', action('ifxSelect'));\n multiselect.addEventListener('ifxOpen', action('ifxOpen'));\n }, 0);\n\n return template;\n};\n\nexport const SingleLevel = FlatTemplate.bind({});\nSingleLevel.args = {\n label: 'Single Level Selection',\n placeholder: 'Select options...',\n};\nSingleLevel.parameters = {\n docs: {\n description: {\n story: 'A simple multiselect with single-level options - no nesting or hierarchical structure. Expand/Collapse controls are automatically hidden for single-level option lists.'\n }\n }\n};"]}
1	+ {"version":3,"file":"multiselect.stories.js","sourceRoot":"","sources":["../../../../src/components/select/multi-select/multiselect.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\r\n\r\nexport default {\r\n title: 'Components/Select/Multi Select',\r\n parameters: {\r\n controls: {\r\n expanded: true,\r\n sort: 'alpha'\r\n }\r\n },\r\n args: {\r\n name: 'multiselect',\r\n disabled: false,\r\n required: true,\r\n showSearch: true,\r\n showSelectAll: true,\r\n showExpandCollapse: true,\r\n error: false,\r\n caption: '',\r\n label: '',\r\n placeholder: 'Placeholder',\r\n showClearButton: true,\r\n noResultsMessage: 'No results found.',\r\n showNoResultsMessage: true,\r\n searchPlaceholder: 'Search',\r\n selectAllLabel: 'Select all',\r\n expandLabel: 'Expand',\r\n collapseLabel: 'Collapse',\r\n ariaMultiSelectLabel: 'Multi-select dropdown',\r\n ariaMultiSelectLabelledBy: '',\r\n ariaMultiSelectDescribedBy: '',\r\n ariaSearchLabel: 'Search options',\r\n ariaClearLabel: 'Clear all selections',\r\n ariaToggleLabel: 'Toggle dropdown',\r\n ariaSelectAllLabel: 'Select all options',\r\n ariaExpandAllLabel: 'Expand all categories',\r\n ariaCollapseAllLabel: 'Collapse all categories'\r\n },\r\n argTypes: {\r\n // Function\r\n disabled: {\r\n description: 'Disable the input field.',\r\n options: [true, false],\r\n control: { type: 'boolean' },\r\n table: {\r\n category: 'ifx-multiselect props',\r\n defaultValue: {\r\n summary: 'false',\r\n },\r\n type: {\r\n summary: 'boolean',\r\n },\r\n },\r\n },\r\n required: {\r\n\t\t\tdescription: 'Marks the Generic Multi-Level Selection as required with an asterik for form submission.',\r\n\t\t\ttable: {\r\n\t\t\t\tcategory: 'ifx-multiselect props',\r\n\t\t\t\tdefaultValue: {\r\n\t\t\t\t\tsummary: true\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n name: {\r\n description: `For a <form> element, the name attribute is used as a reference when the data is submitted.`,\r\n control: 'text',\r\n table: {\r\n category: 'ifx-multiselect props',\r\n defaultValue: {\r\n summary: 'undefined',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n showSearch: {\r\n description: 'Show a search input.',\r\n options: [true, false],\r\n control: { type: 'boolean' },\r\n table: {\r\n category: 'ifx-multiselect props',\r\n defaultValue: {\r\n summary: 'true',\r\n },\r\n type: {\r\n summary: 'boolean',\r\n },\r\n },\r\n },\r\n showSelectAll: {\r\n description: 'Show a checkbox to select all options.',\r\n options: [true, false],\r\n control: { type: 'boolean' },\r\n table: {\r\n category: 'ifx-multiselect props',\r\n defaultValue: {\r\n summary: 'true',\r\n },\r\n type: {\r\n summary: 'boolean',\r\n },\r\n },\r\n },\r\n showExpandCollapse: {\r\n description: 'Show expand/collapse controls for nested options.',\r\n options: [true, false],\r\n control: { type: 'boolean' },\r\n table: {\r\n category: 'ifx-multiselect props',\r\n defaultValue: {\r\n summary: 'true',\r\n },\r\n type: {\r\n summary: 'boolean',\r\n },\r\n },\r\n },\r\n showClearButton: {\r\n description: 'Shows the clear icon button.',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-multiselect props',\r\n defaultValue: {\r\n summary: 'true',\r\n },\r\n type: {\r\n summary: 'boolean',\r\n },\r\n }\r\n },\r\n showNoResultsMessage: {\r\n description: 'Show/hide the no results message when search has no matches.',\r\n options: [true, false],\r\n control: { type: 'boolean' },\r\n table: {\r\n category: 'ifx-multiselect props',\r\n defaultValue: {\r\n summary: 'true',\r\n },\r\n type: {\r\n summary: 'boolean',\r\n },\r\n },\r\n },\r\n error: {\r\n description: 'Show error state.',\r\n options: [true, false],\r\n control: { type: 'boolean' },\r\n table: {\r\n category: 'ifx-multiselect props',\r\n defaultValue: {\r\n summary: 'false',\r\n },\r\n type: {\r\n summary: 'boolean',\r\n },\r\n },\r\n },\r\n label: {\r\n description: 'Label over the input field.',\r\n control: 'text',\r\n table: {\r\n category: 'ifx-multiselect props',\r\n defaultValue: {\r\n summary: '\"\"',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n placeholder: {\r\n description: 'Label inside the input field.',\r\n control: 'text',\r\n table: {\r\n category: 'ifx-multiselect props',\r\n defaultValue: {\r\n summary: '\"\"',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n caption: {\r\n description: 'Text displayed below the select component to provide additional information.',\r\n table: {\r\n category: 'ifx-multiselect props',\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n noResultsMessage: {\r\n description: 'Custom message to display when search has no results.',\r\n control: 'text',\r\n table: {\r\n category: 'ifx-multiselect props',\r\n defaultValue: {\r\n summary: 'No results found.',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n searchPlaceholder: {\r\n description: 'Placeholder text for the search input field.',\r\n control: 'text',\r\n table: {\r\n category: 'ifx-multiselect props',\r\n defaultValue: {\r\n summary: 'Search',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n selectAllLabel: {\r\n description: 'Label text for the select all checkbox.',\r\n control: 'text',\r\n table: {\r\n category: 'ifx-multiselect props',\r\n defaultValue: {\r\n summary: 'Select all',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n expandLabel: {\r\n description: 'Label text for the expand all control.',\r\n control: 'text',\r\n table: {\r\n category: 'ifx-multiselect props',\r\n defaultValue: {\r\n summary: 'Expand',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n collapseLabel: {\r\n description: 'Label text for the collapse all control.',\r\n control: 'text',\r\n table: {\r\n category: 'ifx-multiselect props',\r\n defaultValue: {\r\n summary: 'Collapse',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n\r\n // ARIA Labels\r\n ariaMultiSelectLabel: {\r\n description: 'ARIA label for the multiselect component.',\r\n control: 'text',\r\n table: {\r\n category: 'ARIA Labels',\r\n defaultValue: {\r\n summary: 'Multi-select dropdown',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n ariaMultiSelectLabelledBy: {\r\n description: 'ID of element that labels the multiselect.',\r\n control: 'text',\r\n table: {\r\n category: 'ARIA Labels',\r\n defaultValue: {\r\n summary: '\"\"',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n ariaMultiSelectDescribedBy: {\r\n description: 'ID of element that describes the multiselect.',\r\n control: 'text',\r\n table: {\r\n category: 'ARIA Labels',\r\n defaultValue: {\r\n summary: '\"\"',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n ariaSearchLabel: {\r\n description: 'ARIA label for the search input field.',\r\n control: 'text',\r\n table: {\r\n category: 'ARIA Labels',\r\n defaultValue: {\r\n summary: 'Search options',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n ariaClearLabel: {\r\n description: 'ARIA label for the clear all button.',\r\n control: 'text',\r\n table: {\r\n category: 'ARIA Labels',\r\n defaultValue: {\r\n summary: 'Clear all selections',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n ariaToggleLabel: {\r\n description: 'ARIA label for the dropdown toggle button.',\r\n control: 'text',\r\n table: {\r\n category: 'ARIA Labels',\r\n defaultValue: {\r\n summary: 'Toggle dropdown',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n ariaSelectAllLabel: {\r\n description: 'ARIA label for the select all checkbox.',\r\n control: 'text',\r\n table: {\r\n category: 'ARIA Labels',\r\n defaultValue: {\r\n summary: 'Select all options',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n ariaExpandAllLabel: {\r\n description: 'ARIA label for the expand all control.',\r\n control: 'text',\r\n table: {\r\n category: 'ARIA Labels',\r\n defaultValue: {\r\n summary: 'Expand all categories',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n ariaCollapseAllLabel: {\r\n description: 'ARIA label for the collapse all control.',\r\n control: 'text',\r\n table: {\r\n category: 'ARIA Labels',\r\n defaultValue: {\r\n summary: 'Collapse all categories',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n\r\n // Custom Events\r\n ifxSelect: {\r\n action: 'ifxSelect',\r\n description: 'Custom event emitted when item is selected or unselected.',\r\n table: {\r\n category: 'Custom Events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail:\r\n 'React: onIfxSelect={handleInput}\\nVue:@ifxSelect=\"handleInput\"\\nAngular:(ifxSelect)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxSelect\", (event) => {//handle input});',\r\n },\r\n },\r\n },\r\n ifxOpen: {\r\n action: 'ifxOpen',\r\n description: 'Custom event emitted when multiselect is opened.',\r\n table: {\r\n category: 'Custom Events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail:\r\n 'React: onIfxOpen={handleChange}\\nVue:@ifxOpen=\"handleChange\"\\nAngular:(ifxOpen)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxOpen\", (event) => {//handle change});',\r\n },\r\n },\r\n }\r\n },\r\n};\r\n\r\nconst SlotBasedTemplate = args => {\r\n const template = `<ifx-multiselect\r\n name='${args.name}'\r\n disabled='${args.disabled}'\r\n required='${args.required}'\r\n error='${args.error}'\r\n caption='${args.caption}'\r\n label='${args.label}'\r\n placeholder='${args.placeholder}'\r\n show-search='${args.showSearch}'\r\n show-select-all='${args.showSelectAll}'\r\n show-expand-collapse='${args.showExpandCollapse}'\r\n show-clear-button='${args.showClearButton}'\r\n no-results-message='${args.noResultsMessage}'\r\n show-no-results-message='${args.showNoResultsMessage}'\r\n search-placeholder='${args.searchPlaceholder}'\r\n select-all-label='${args.selectAllLabel}'\r\n expand-label='${args.expandLabel}'\r\n collapse-label='${args.collapseLabel}'\r\n aria-multi-select-label='${args.ariaMultiSelectLabel}'\r\n aria-multi-select-labelled-by='${args.ariaMultiSelectLabelledBy}'\r\n aria-multi-select-described-by='${args.ariaMultiSelectDescribedBy}'\r\n aria-search-label='${args.ariaSearchLabel}'\r\n aria-clear-label='${args.ariaClearLabel}'\r\n aria-toggle-label='${args.ariaToggleLabel}'\r\n aria-select-all-label='${args.ariaSelectAllLabel}'\r\n aria-expand-all-label='${args.ariaExpandAllLabel}'\r\n aria-collapse-all-label='${args.ariaCollapseAllLabel}'>\r\n\r\n <ifx-multiselect-option value=\"category-a\">\r\n Category A - Main Section\r\n\r\n <ifx-multiselect-option value=\"category-a-1\" slot=\"children\">\r\n Category A.1 - First Subsection\r\n <ifx-multiselect-option value=\"option-a-1-1\" slot=\"children\">Option A.1.1 - Basic Item</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-a-1-2\" selected slot=\"children\">Option A.1.2 - Preselected Item</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-a-1-3\" slot=\"children\">Option A.1.3 - Another Item</ifx-multiselect-option>\r\n </ifx-multiselect-option>\r\n\r\n <ifx-multiselect-option value=\"category-a-2\" slot=\"children\">\r\n Category A.2 - Second Subsection\r\n <ifx-multiselect-option value=\"option-a-2-1\" slot=\"children\">Option A.2.1 - Nested Item</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-a-2-2\" slot=\"children\">\r\n Option A.2.2 - Deep Nested Parent\r\n <ifx-multiselect-option value=\"option-a-2-2-1\" slot=\"children\">Option A.2.2.1 - Level 4 Item</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-a-2-2-2\" slot=\"children\">Option A.2.2.2 - Level 4 Item</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-a-2-2-3\" slot=\"children\">\r\n Option A.2.2.3 - Even Deeper\r\n <ifx-multiselect-option value=\"option-a-2-2-3-1\" slot=\"children\">Option A.2.2.3.1 - Level 5 Item</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-a-2-2-3-2\" slot=\"children\">Option A.2.2.3.2 - Level 5 Item</ifx-multiselect-option>\r\n </ifx-multiselect-option>\r\n </ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-a-2-3\" slot=\"children\">Option A.2.3 - Final Nested</ifx-multiselect-option>\r\n </ifx-multiselect-option>\r\n\r\n <ifx-multiselect-option value=\"option-a-3\" slot=\"children\">Option A.3 - Direct Child</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-a-4\" slot=\"children\">Option A.4 - Another Direct Child</ifx-multiselect-option>\r\n </ifx-multiselect-option>\r\n\r\n <ifx-multiselect-option value=\"category-b\">\r\n Category B - Secondary Section\r\n\r\n <ifx-multiselect-option value=\"category-b-1\" slot=\"children\">\r\n Category B.1 - Mixed Content\r\n <ifx-multiselect-option value=\"option-b-1-1\" slot=\"children\">Option B.1.1 - Standard Item</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"category-b-1-2\" slot=\"children\">\r\n Category B.1.2 - Sub-Category\r\n <ifx-multiselect-option value=\"option-b-1-2-1\" slot=\"children\">Option B.1.2.1 - Nested Choice</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-b-1-2-2\" slot=\"children\">Option B.1.2.2 - Nested Choice</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-b-1-2-3\" slot=\"children\">Option B.1.2.3 - Nested Choice</ifx-multiselect-option>\r\n </ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-b-1-3\" slot=\"children\">Option B.1.3 - Standard Item</ifx-multiselect-option>\r\n </ifx-multiselect-option>\r\n\r\n <ifx-multiselect-option value=\"option-b-2\" slot=\"children\">Option B.2 - Standalone Item</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-b-3\" slot=\"children\">Option B.3 - Standalone Item</ifx-multiselect-option>\r\n </ifx-multiselect-option>\r\n\r\n <ifx-multiselect-option value=\"category-c\">\r\n Category C - Complex Structure\r\n\r\n <ifx-multiselect-option value=\"category-c-1\" slot=\"children\">\r\n Category C.1 - Multi-Level Group\r\n <ifx-multiselect-option value=\"category-c-1-1\" slot=\"children\">\r\n Category C.1.1 - Sub-Group Alpha\r\n <ifx-multiselect-option value=\"option-c-1-1-1\" slot=\"children\">Option C.1.1.1 - Alpha Item 1</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-c-1-1-2\" slot=\"children\">Option C.1.1.2 - Alpha Item 2</ifx-multiselect-option>\r\n </ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"category-c-1-2\" slot=\"children\">\r\n Category C.1.2 - Sub-Group Beta\r\n <ifx-multiselect-option value=\"option-c-1-2-1\" slot=\"children\">Option C.1.2.1 - Beta Item 1</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-c-1-2-2\" slot=\"children\">Option C.1.2.2 - Beta Item 2</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-c-1-2-3\" slot=\"children\">Option C.1.2.3 - Beta Item 3</ifx-multiselect-option>\r\n </ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-c-1-3\" slot=\"children\">Option C.1.3 - Direct Item</ifx-multiselect-option>\r\n </ifx-multiselect-option>\r\n\r\n <ifx-multiselect-option value=\"category-c-2\" slot=\"children\">\r\n Category C.2 - Another Group\r\n <ifx-multiselect-option value=\"option-c-2-1\" slot=\"children\">Option C.2.1 - Group Item</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-c-2-2\" slot=\"children\">Option C.2.2 - Group Item</ifx-multiselect-option>\r\n </ifx-multiselect-option>\r\n </ifx-multiselect-option>\r\n\r\n <ifx-multiselect-option value=\"option-d\">Option D - Top-Level Standalone</ifx-multiselect-option>\r\n\r\n <ifx-multiselect-option value=\"option-e\">Option E - Top-Level Standalone</ifx-multiselect-option>\r\n\r\n <ifx-multiselect-option value=\"category-f\">\r\n Category F - Final Section\r\n\r\n <ifx-multiselect-option value=\"option-f-1\" slot=\"children\">Option F.1 - Simple Item</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-f-2\" slot=\"children\">Option F.2 - Simple Item</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"category-f-3\" slot=\"children\">\r\n Category F.3 - Last Group\r\n <ifx-multiselect-option value=\"option-f-3-1\" slot=\"children\">Option F.3.1 - Final Nested</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-f-3-2\" slot=\"children\">Option F.3.2 - Final Nested</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-f-3-3\" slot=\"children\">Option F.3.3 - Final Nested</ifx-multiselect-option>\r\n </ifx-multiselect-option>\r\n </ifx-multiselect-option>\r\n</ifx-multiselect>`;\r\n\r\n setTimeout(() => {\r\n document.querySelector('ifx-multiselect').addEventListener('ifxSelect', action('ifxSelect'));\r\n document.querySelector('ifx-multiselect').addEventListener('ifxOpen', action('ifxOpen'));\r\n }, 0);\r\n\r\n return template;\r\n};\r\n\r\nexport const Default = SlotBasedTemplate.bind({});\r\nDefault.args = {\r\n label: 'Generic Multi-Level Selection',\r\n placeholder: 'Select options...',\r\n};\r\nDefault.parameters = {\r\n docs: {\r\n description: {\r\n story: 'The multiselect component supports nested hierarchical options with search, select all, and expand/collapse functionality. Use slot-based syntax for defining options and their nested structure.'\r\n }\r\n }\r\n};\r\n\r\nconst FlatTemplate = args => {\r\n const template = `<ifx-multiselect\r\n name='${args.name}'\r\n disabled='${args.disabled}'\r\n error='${args.error}'\r\n caption='${args.caption}'\r\n label='${args.label}'\r\n placeholder='${args.placeholder}'\r\n show-search='${args.showSearch}'\r\n show-select-all='${args.showSelectAll}'\r\n show-expand-collapse='${args.showExpandCollapse}'\r\n show-clear-button='${args.showClearButton}'\r\n no-results-message='${args.noResultsMessage}'\r\n show-no-results-message='${args.showNoResultsMessage}'\r\n search-placeholder='${args.searchPlaceholder}'\r\n select-all-label='${args.selectAllLabel}'\r\n expand-label='${args.expandLabel}'\r\n collapse-label='${args.collapseLabel}'\r\n aria-multi-select-label='${args.ariaMultiSelectLabel}'\r\n aria-multi-select-labelled-by='${args.ariaMultiSelectLabelledBy}'\r\n aria-multi-select-described-by='${args.ariaMultiSelectDescribedBy}'\r\n aria-search-label='${args.ariaSearchLabel}'\r\n aria-clear-label='${args.ariaClearLabel}'\r\n aria-toggle-label='${args.ariaToggleLabel}'\r\n aria-select-all-label='${args.ariaSelectAllLabel}'\r\n aria-expand-all-label='${args.ariaExpandAllLabel}'\r\n aria-collapse-all-label='${args.ariaCollapseAllLabel}'>\r\n\r\n <ifx-multiselect-option value=\"option-1\">Option 1</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-2\">Option 2</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-3\">Option 3</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-4\">Option 4</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-5\">Option 5</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-6\">Option 6</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-7\">Option 7</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-8\">Option 8</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-9\">Option 9</ifx-multiselect-option>\r\n <ifx-multiselect-option value=\"option-10\">Option 10</ifx-multiselect-option>\r\n</ifx-multiselect>`;\r\n\r\n setTimeout(() => {\r\n const multiselect = document.querySelectorAll('ifx-multiselect')[document.querySelectorAll('ifx-multiselect').length - 1];\r\n multiselect.addEventListener('ifxSelect', action('ifxSelect'));\r\n multiselect.addEventListener('ifxOpen', action('ifxOpen'));\r\n }, 0);\r\n\r\n return template;\r\n};\r\n\r\nexport const SingleLevel = FlatTemplate.bind({});\r\nSingleLevel.args = {\r\n label: 'Single Level Selection',\r\n placeholder: 'Select options...',\r\n};\r\nSingleLevel.parameters = {\r\n docs: {\r\n description: {\r\n story: 'A simple multiselect with single-level options - no nesting or hierarchical structure. Expand/Collapse controls are automatically hidden for single-level option lists.'\r\n }\r\n }\r\n};"]}

package/dist/collection/components/select/single-select/interfaces.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/components/select/single-select/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["/*\n @link https://github.com/jshjohnson/Choices#classnames\n /\nexport type ClassNames = {\n containerOuter?: string;\n containerInner?: string;\n input?: string;\n inputCloned?: string;\n list?: string;\n listItems?: string;\n listSingle?: string;\n listDropdown?: string;\n item?: string;\n itemSelectable?: string;\n itemDisabled?: string;\n itemChoice?: string;\n placeholder?: string;\n group?: string;\n groupHeading?: string;\n button?: string;\n activeState?: string;\n focusState?: string;\n openState?: string;\n disabledState?: string;\n highlightedState?: string;\n selectedState: string;\n flippedState?: string;\n loadingState?: string;\n noResults?: string;\n noChoices?: string;\n};\n\n/\n @link https://github.com/krisk/Fuse/blob/v3.6.1/src/typings.d.ts#L51\n /\nexport type WeightedField = {\n [key: string]: any;\n weight: number;\n};\n\n/\n @version 3.6.1\n * @link https://github.com/krisk/Fuse/blob/v3.6.1/src/typings.d.ts#L43\n /\nexport type FuseOptions = {\n id?: string;\n caseSensitive?: boolean;\n includeMatches?: boolean;\n includeScore?: boolean;\n shouldSort?: boolean;\n keys?: Array<string> \| Array<object> \| Array<WeightedField>;\n verbose?: boolean;\n tokenize?: boolean;\n tokenSeparator?: RegExp;\n matchAllTokens?: boolean;\n location?: number;\n distance?: number;\n threshold?: number;\n maxPatternLength?: number;\n minMatchCharLength?: number;\n findAllMatches?: boolean;\n sortFn?(a: { score: number }, b: { score: number }): number;\n getFn?(obj: any, path: string): any;\n};\n\n/\n @link https://github.com/jshjohnson/Choices#addItemFilter\n /\nexport type ItemFilterFn = (value: string) => boolean;\n\n/\n @link https://github.com/jshjohnson/Choices#noresultstext\n /\nexport type NoResultsTextFn = () => string;\n\n/\n @link https://github.com/jshjohnson/Choices#nochoicestext\n /\nexport type NoChoicesTextFn = () => string;\n\n/\n @link https://github.com/jshjohnson/Choices#additemtext\n /\nexport type AddItemTextFn = ((value: string) => string) \| string;\n\n/\n @link https://github.com/jshjohnson/Choices#maxitemtext\n /\nexport type MaxItemTextFn = (maxItemCount: number) => string;\n\n/\n @link https://github.com/jshjohnson/Choices#sortfilter\n /\nexport type SortFn = (el1: any, el2: any) => number;\n\nexport type UniqueItemText = ((value: string) => string) \| string;\nexport type CustomAddItemText = ((value: string) => string) \| string;\n/\n @link https://github.com/jshjohnson/Choices#callbackoninit\n /\nexport type OnInit = () => void;\n\n/\n @link https://github.com/jshjohnson/Choices#callbackoncreatetemplates\n /\nexport type OnCreateTemplates = (template) => any;\n\n/\n @link https://github.com/jshjohnson/Choices#valuecomparer\n /\nexport type ValueCompareFunction = (value1: string, value2: string) => boolean;\n\n/\n @link https://github.com/jshjohnson/Choices#configuration-options\n /\nexport interface IChoicesProps {\n silent?: boolean;\n items?: Array<any>;\n choices?: Array<any> \| string;\n renderChoiceLimit?: number;\n maxItemCount?: number;\n addItems?: boolean;\n addItemFilter?: string \| RegExp \| ItemFilterFn \| null;\n addItemText?: string \| AddItemTextFn;\n removeItems?: boolean;\n removeItemButton?: boolean;\n editItems?: boolean;\n duplicateItemsAllowed?: boolean;\n delimiter?: string;\n paste?: boolean;\n showSearch?: boolean;\n searchChoices?: boolean;\n searchFloor?: number;\n searchResultLimit?: number;\n searchFields?: Array<any> \| string;\n position?: 'auto' \| 'top' \| 'bottom';\n resetScrollPosition?: boolean;\n shouldSort?: boolean;\n shouldSortItems?: boolean;\n sorter: SortFn;\n placeholder?: boolean \| string;\n placeholderValue?: string \| null;\n searchPlaceholderValue?: string \| null;\n prependValue?: string \| null;\n appendValue?: string \| null;\n renderSelectedChoices?: 'always' \| 'auto';\n loadingText?: string;\n noResultsText?: string \| NoResultsTextFn;\n noChoicesText?: string \| NoChoicesTextFn;\n itemSelectText?: string;\n maxItemText?: string \| MaxItemTextFn;\n uniqueItemText: UniqueItemText;\n customAddItemText?: CustomAddItemText;\n valueComparer?: ValueCompareFunction;\n classNames?: ClassNames;\n fuseOptions?: FuseOptions;\n callbackOnInit?: OnInit;\n callbackOnCreateTemplates?: OnCreateTemplates;\n}\n\n/\n @link https://github.com/jshjohnson/Choices#ajaxfn\n /\nexport type AjaxFn = (callback) => void;\n\n/\n @link https://github.com/jshjohnson/Choices#methods\n */\nexport interface IChoicesMethods {\n highlightItem(item: Element, runEvent?: boolean);\n unhighlightItem(item: Element);\n highlightAll();\n unhighlightAll();\n removeActiveItemsByValue(value);\n removeActiveItems(excludedId);\n removeHighlightedItems();\n showDropdown();\n hideDropdown();\n setChoices(choices, value, label, replaceChoices);\n clearChoices();\n getValue(valueOnly);\n setValue(args);\n setChoiceByValue(value: string \| Array<string>);\n clearStore();\n clearInput();\n}\n"]}
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/components/select/single-select/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["/*\r\n @link https://github.com/jshjohnson/Choices#classnames\r\n /\r\nexport type ClassNames = {\r\n containerOuter?: string;\r\n containerInner?: string;\r\n input?: string;\r\n inputCloned?: string;\r\n list?: string;\r\n listItems?: string;\r\n listSingle?: string;\r\n listDropdown?: string;\r\n item?: string;\r\n itemSelectable?: string;\r\n itemDisabled?: string;\r\n itemChoice?: string;\r\n placeholder?: string;\r\n group?: string;\r\n groupHeading?: string;\r\n button?: string;\r\n activeState?: string;\r\n focusState?: string;\r\n openState?: string;\r\n disabledState?: string;\r\n highlightedState?: string;\r\n selectedState: string;\r\n flippedState?: string;\r\n loadingState?: string;\r\n noResults?: string;\r\n noChoices?: string;\r\n};\r\n\r\n/\r\n @link https://github.com/krisk/Fuse/blob/v3.6.1/src/typings.d.ts#L51\r\n /\r\nexport type WeightedField = {\r\n [key: string]: any;\r\n weight: number;\r\n};\r\n\r\n/\r\n @version 3.6.1\r\n * @link https://github.com/krisk/Fuse/blob/v3.6.1/src/typings.d.ts#L43\r\n /\r\nexport type FuseOptions = {\r\n id?: string;\r\n caseSensitive?: boolean;\r\n includeMatches?: boolean;\r\n includeScore?: boolean;\r\n shouldSort?: boolean;\r\n keys?: Array<string> \| Array<object> \| Array<WeightedField>;\r\n verbose?: boolean;\r\n tokenize?: boolean;\r\n tokenSeparator?: RegExp;\r\n matchAllTokens?: boolean;\r\n location?: number;\r\n distance?: number;\r\n threshold?: number;\r\n maxPatternLength?: number;\r\n minMatchCharLength?: number;\r\n findAllMatches?: boolean;\r\n sortFn?(a: { score: number }, b: { score: number }): number;\r\n getFn?(obj: any, path: string): any;\r\n};\r\n\r\n/\r\n @link https://github.com/jshjohnson/Choices#addItemFilter\r\n /\r\nexport type ItemFilterFn = (value: string) => boolean;\r\n\r\n/\r\n @link https://github.com/jshjohnson/Choices#noresultstext\r\n /\r\nexport type NoResultsTextFn = () => string;\r\n\r\n/\r\n @link https://github.com/jshjohnson/Choices#nochoicestext\r\n /\r\nexport type NoChoicesTextFn = () => string;\r\n\r\n/\r\n @link https://github.com/jshjohnson/Choices#additemtext\r\n /\r\nexport type AddItemTextFn = ((value: string) => string) \| string;\r\n\r\n/\r\n @link https://github.com/jshjohnson/Choices#maxitemtext\r\n /\r\nexport type MaxItemTextFn = (maxItemCount: number) => string;\r\n\r\n/\r\n @link https://github.com/jshjohnson/Choices#sortfilter\r\n /\r\nexport type SortFn = (el1: any, el2: any) => number;\r\n\r\nexport type UniqueItemText = ((value: string) => string) \| string;\r\nexport type CustomAddItemText = ((value: string) => string) \| string;\r\n/\r\n @link https://github.com/jshjohnson/Choices#callbackoninit\r\n /\r\nexport type OnInit = () => void;\r\n\r\n/\r\n @link https://github.com/jshjohnson/Choices#callbackoncreatetemplates\r\n /\r\nexport type OnCreateTemplates = (template) => any;\r\n\r\n/\r\n @link https://github.com/jshjohnson/Choices#valuecomparer\r\n /\r\nexport type ValueCompareFunction = (value1: string, value2: string) => boolean;\r\n\r\n/\r\n @link https://github.com/jshjohnson/Choices#configuration-options\r\n /\r\nexport interface IChoicesProps {\r\n silent?: boolean;\r\n items?: Array<any>;\r\n choices?: Array<any> \| string;\r\n renderChoiceLimit?: number;\r\n maxItemCount?: number;\r\n addItems?: boolean;\r\n addItemFilter?: string \| RegExp \| ItemFilterFn \| null;\r\n addItemText?: string \| AddItemTextFn;\r\n removeItems?: boolean;\r\n removeItemButton?: boolean;\r\n editItems?: boolean;\r\n duplicateItemsAllowed?: boolean;\r\n delimiter?: string;\r\n paste?: boolean;\r\n showSearch?: boolean;\r\n searchChoices?: boolean;\r\n searchFloor?: number;\r\n searchResultLimit?: number;\r\n searchFields?: Array<any> \| string;\r\n position?: 'auto' \| 'top' \| 'bottom';\r\n resetScrollPosition?: boolean;\r\n shouldSort?: boolean;\r\n shouldSortItems?: boolean;\r\n sorter: SortFn;\r\n placeholder?: boolean \| string;\r\n placeholderValue?: string \| null;\r\n searchPlaceholderValue?: string \| null;\r\n prependValue?: string \| null;\r\n appendValue?: string \| null;\r\n renderSelectedChoices?: 'always' \| 'auto';\r\n loadingText?: string;\r\n noResultsText?: string \| NoResultsTextFn;\r\n noChoicesText?: string \| NoChoicesTextFn;\r\n itemSelectText?: string;\r\n maxItemText?: string \| MaxItemTextFn;\r\n uniqueItemText: UniqueItemText;\r\n customAddItemText?: CustomAddItemText;\r\n valueComparer?: ValueCompareFunction;\r\n classNames?: ClassNames;\r\n fuseOptions?: FuseOptions;\r\n callbackOnInit?: OnInit;\r\n callbackOnCreateTemplates?: OnCreateTemplates;\r\n}\r\n\r\n/\r\n @link https://github.com/jshjohnson/Choices#ajaxfn\r\n /\r\nexport type AjaxFn = (callback) => void;\r\n\r\n/\r\n @link https://github.com/jshjohnson/Choices#methods\r\n */\r\nexport interface IChoicesMethods {\r\n highlightItem(item: Element, runEvent?: boolean);\r\n unhighlightItem(item: Element);\r\n highlightAll();\r\n unhighlightAll();\r\n removeActiveItemsByValue(value);\r\n removeActiveItems(excludedId);\r\n removeHighlightedItems();\r\n showDropdown();\r\n hideDropdown();\r\n setChoices(choices, value, label, replaceChoices);\r\n clearChoices();\r\n getValue(valueOnly);\r\n setValue(args);\r\n setChoiceByValue(value: string \| Array<string>);\r\n clearStore();\r\n clearInput();\r\n}\r\n"]}