npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.9.2--canary.1640.e43988106d4b26dd629292540be9d5e4b6980d07.1 → 30.9.2 - Mend

@infineon/infineon-design-system-stencil 30.9.2--canary.1640.e43988106d4b26dd629292540be9d5e4b6980d07.1 → 30.9.2

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 (291) hide show

package/dist/collection/components/search-bar/search-bar.js CHANGED Viewed

@@ -3,7 +3,7 @@ export class SearchBar {
     constructor() {
         this.handleCloseButton = () => {
             this.internalState = !this.internalState;
-            this.ifxOpen.emit(this.internalState);
+            this.ifxSearchBarIsOpen.emit(this.internalState);
         };
         this.handleFocus = () => {
             this.internalState = true;
@@ -15,7 +15,7 @@ export class SearchBar {
         this.maxlength = undefined;
     }
     async onNavbarMobile() {
-        this.ifxOpen.emit(false);
+        this.ifxSearchBarIsOpen.emit(false);
         this.internalState = false;
     }
     handlePropChange() {
@@ -26,13 +26,13 @@ export class SearchBar {
     }
     componentWillLoad() {
         this.setInitialState();
-        this.ifxOpen.emit(this.internalState);
+        this.ifxSearchBarIsOpen.emit(this.internalState);
     }
     handleInput(event) {
         this.value = event.detail;
     }
     render() {
-        return (h("div", { key: 'e1875ac2a7a96e59f77f3ecf7cc4079fe8509bf8', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { tabindex: "-1", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
+        return (h("div", { key: '80312faf68e6b0af2260c977d53f23b42067813f', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { tabindex: "-1", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
     }
     static get is() { return "ifx-search-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -150,8 +150,8 @@ export class SearchBar {
                     "references": {}
                 }
             }, {
-                "method": "ifxOpen",
-                "name": "ifxOpen",
+                "method": "ifxSearchBarIsOpen",
+                "name": "ifxSearchBarIsOpen",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/search-bar/search-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"search-bar.js","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQvG,MAAM,OAAO,SAAS;;QAqBpB,sBAAiB,GAAG,GAAG,EAAE;YACvB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;YACzC,IAAI,CAAC,~~OAAO~~,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;~~QACvC~~,CAAC,CAAA;QAkBD,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC,CAAA;sBA3CyB,IAAI;wBACF,KAAK;;;;;IASjC,KAAK,CAAC,cAAc;QAClB,IAAI,CAAC,~~OAAO~~,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;~~QACxB~~,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;IACnC,CAAC;IAOD,eAAe;QACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;IACnC,CAAC;IAID,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,~~OAAO~~,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;~~IACvC~~,CAAC;IAGD,WAAW,CAAC,KAAkB;QAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;IAC5B,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,0EAAgB,cAAc,mBAAgB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,cAAc,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,IACvH,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,WAAK,KAAK,EAAC,oBAAoB;YAC7B,wBAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;gBAC9H,gBAAU,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,GAAY,CACxC;YAEnB,SAAG,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,YAAW,CACjF,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB;YACnE,gBAAU,IAAI,EAAC,WAAW,GAAY,CAClC,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-search-bar',\n styleUrl: 'search-bar.scss',\n shadow: true,\n})\nexport class SearchBar {\n @Prop() isOpen: boolean = true;\n @Prop() disabled: boolean = false;\n @State() internalState: boolean;\n @Prop({ mutable: true }) value: string;\n @Prop() maxlength?: number;\n @Event() ifxInput: EventEmitter;\n @Event() ~~ifxOpen~~: EventEmitter;\n @Element() el;\n\n @Method()\n async onNavbarMobile() {\n this.~~ifxOpen~~.emit(false)\n this.internalState = false;\n }\n\n @Watch('isOpen')\n handlePropChange() {\n this.internalState = this.isOpen;\n }\n\n handleCloseButton = () => {\n this.internalState = !this.internalState;\n this.~~ifxOpen~~.emit(this.internalState)\n }\n\n setInitialState() {\n this.internalState = this.isOpen;\n }\n\n \n\n componentWillLoad() {\n this.setInitialState();\n this.~~ifxOpen~~.emit(this.internalState)\n }\n\n\n handleInput(event: CustomEvent) {\n this.value = event.detail;\n }\n\n handleFocus = () => {\n this.internalState = true;\n }\n\n\n render() {\n return (\n <div aria-label='a search bar' aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n {this.internalState ? (\n <div class=\"search-bar-wrapper\">\n <ifx-search-field disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n </ifx-search-field>\n\n <a tabindex=\"-1\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n </div>\n ) : (\n <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n <ifx-icon icon=\"search-16\"></ifx-icon>\n </div>\n )}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"search-bar.js","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQvG,MAAM,OAAO,SAAS;;QAqBpB,sBAAiB,GAAG,GAAG,EAAE;YACvB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;YACzC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QAClD,CAAC,CAAA;QAkBD,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC,CAAA;sBA3CyB,IAAI;wBACF,KAAK;;;;;IASjC,KAAK,CAAC,cAAc;QAClB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACnC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;IACnC,CAAC;IAOD,eAAe;QACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;IACnC,CAAC;IAID,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;IAClD,CAAC;IAGD,WAAW,CAAC,KAAkB;QAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;IAC5B,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,0EAAgB,cAAc,mBAAgB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,cAAc,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,IACvH,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,WAAK,KAAK,EAAC,oBAAoB;YAC7B,wBAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;gBAC9H,gBAAU,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,GAAY,CACxC;YAEnB,SAAG,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,YAAW,CACjF,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB;YACnE,gBAAU,IAAI,EAAC,WAAW,GAAY,CAClC,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-search-bar',\n styleUrl: 'search-bar.scss',\n shadow: true,\n})\nexport class SearchBar {\n @Prop() isOpen: boolean = true;\n @Prop() disabled: boolean = false;\n @State() internalState: boolean;\n @Prop({ mutable: true }) value: string;\n @Prop() maxlength?: number;\n @Event() ifxInput: EventEmitter;\n @Event() ifxSearchBarIsOpen: EventEmitter;\n @Element() el;\n\n @Method()\n async onNavbarMobile() {\n this.ifxSearchBarIsOpen.emit(false)\n this.internalState = false;\n }\n\n @Watch('isOpen')\n handlePropChange() {\n this.internalState = this.isOpen;\n }\n\n handleCloseButton = () => {\n this.internalState = !this.internalState;\n this.ifxSearchBarIsOpen.emit(this.internalState)\n }\n\n setInitialState() {\n this.internalState = this.isOpen;\n }\n\n \n\n componentWillLoad() {\n this.setInitialState();\n this.ifxSearchBarIsOpen.emit(this.internalState)\n }\n\n\n handleInput(event: CustomEvent) {\n this.value = event.detail;\n }\n\n handleFocus = () => {\n this.internalState = true;\n }\n\n\n render() {\n return (\n <div aria-label='a search bar' aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n {this.internalState ? (\n <div class=\"search-bar-wrapper\">\n <ifx-search-field disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n </ifx-search-field>\n\n <a tabindex=\"-1\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n </div>\n ) : (\n <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n <ifx-icon icon=\"search-16\"></ifx-icon>\n </div>\n )}\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/search-bar/search-bar.stories.js CHANGED Viewed

@@ -5,82 +5,33 @@ export default {
     args: {
         disabled: false,
         isOpen: true,
-        value: '',
     },
     argTypes: {
-        isOpen: {
-            description: 'Search bar state.',
-            control: { type: 'boolean' },
-            table: {
-                defaultValue: { summary: 'true' },
-                category: 'ifx-search-bar props',
-                type: {
-                    summary: 'boolean',
-                },
-            },
-        },
-        disabled: {
-            description: 'Search bar state.',
-            control: { type: 'boolean' },
-            table: {
-                defaultValue: { summary: 'false' },
-                category: 'ifx-search-bar props',
-                type: {
-                    summary: 'boolean',
-                },
-            },
-        },
-        value: {
-            description: 'The value is used to handle the search bar input.',
-            control: { type: 'text' },
-            table: {
-                category: 'ifx-search-bar props',
-                type: {
-                    summary: 'string',
-                },
-            },
+        ifxInput: {
+            action: 'ifxInput',
+            description: 'Custom event emitted on input\n\n(see below for Two Way Data Binding in different JS frameworks)',
         },
         maxlength: {
-            description: 'Maximum input length.',
-            control: { type: 'number' },
-            table: {
-                category: 'ifx-search-bar props',
-                type: {
-                    summary: 'number',
-                },
-            },
+            description: 'Maximum input length',
+            control: { type: 'number' }
         },
-        ifxInput: {
+        ifxSearchBarIsOpen: {
             action: 'ifxInput',
-            description: 'Custom event emitted on input.',
-            table: {
-                category: 'custom events',
-                type: {
-                    summary: 'Framework integration',
-                    detail: `React: onIfxInput={handleInput}\nVue:@ifxInput="handleInput"\nAngular:(ifxInput)="handleInput()"\nVanillaJs:.addEventListener("ifxInput", (event) => {//handle input});`,
-                }
-            }
-        },
-        ifxOpen: {
-            action: 'ifxOpen',
-            description: 'Custom event emitted when the state of *isOpen* changes.',
+            description: 'Custom event',
             table: {
-                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
-                    detail: `React: onIfxOpen={handleOpen}\nVue:@ifxOpen="handleOpen"\nAngular:(ifxOpen)="handleOpen()"\nVanillaJs:.addEventListener("ifxOpen", (event) => {//handle open});`,
+                    detail: 'React: onIfxInput={handleInput}\nVue:@ifxInput="handleInput"\nAngular:(ifxInput)="handleInput()"\nVanillaJs:.addEventListener("ifxInput", (event) => {//handle input});',
                 },
             },
         },
     },
 };
-const DefaultTemplate = ({ isOpen, disabled, maxlength, value }) => {
+const DefaultTemplate = ({ isOpen, disabled, maxlength }) => {
     const element = document.createElement('ifx-search-bar');
     element.setAttribute('is-open', isOpen);
     element.setAttribute('disabled', disabled);
-    element.setAttribute('value', value);
     element.addEventListener('ifxInput', action('ifxInput'));
-    element.addEventListener('ifxOpen', action('ifxOpen'));
     if (maxlength != undefined)
         element.setAttribute('maxlength', maxlength);
     return element;

package/dist/collection/components/search-bar/search-bar.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"search-bar.stories.js","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,sBAAsB;IAEtB,IAAI,EAAE;QACJ,QAAQ,EAAE,KAAK;QACf,MAAM,EAAE,IAAI;~~QACZ,KAAK,EAAE,EAAE~~;~~KACV;IAED~~,QAAQ,EAAE;QACR,~~MAAM,EAAE;YACN,WAAW,EAAE,mBAAmB;YAChC,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;YAC5B,KAAK,EAAE;gBACL,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;gBACjC,~~QAAQ,EAAE~~,sBAAsB~~;~~gBAChC,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QACD,QAAQ,EAAE;~~YACR,~~WAAW~~,EAAE,~~mBAAmB~~;~~YAChC~~,~~OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;YAC5B,KAAK,EAAE;gBACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;gBAClC,QAAQ,EAAE,sBAAsB;gBAChC,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QACD,KAAK,EAAE;YACL,~~WAAW,EAAE,~~mDAAmD~~;~~YAChE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE~~;~~YACzB,KAAK,EACL;gBACE,QAAQ,EAAE,sBAAsB;gBAChC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;~~QACD,SAAS,EAAE;YACT,WAAW,EAAE,~~uBAAuB~~;~~YACpC~~,OAAO,EAAE,~~EAAE~~,IAAI,EAAE,QAAQ,~~EAAE~~;~~YAC3B,KAAK,EACL~~;~~gBACE,QAAQ,EAAE,sBAAsB;gBAChC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;~~QACD,~~QAAQ~~,EAAE;~~YACR~~,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,~~gCAAgC~~;~~YAC7C~~,KAAK,EAAE;gBACL,~~QAAQ,EAAE,eAAe;gBACzB,~~IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,~~EAAE~~,yKAAyK;~~iBAClL~~;aACF;SACF;~~QACD,OAAO,EAAE;YACP,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,0DAA0D;YACvE,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,iKAAiK;iBACpK;aACF;SACF;~~KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,~~KAAK,~~EAAE,EAAE~~,EAAE~~;~~IACjE~~,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzD,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACxC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,~~YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACrC,OAAO,CAAC,~~gBAAgB,CAAC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IACzD,~~OAAO~~,~~CAAC,gBAAgB,CAAC,~~SAAS,~~EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;IAEvD,~~IAAI,SAAS~~,IAAI,SAAS~~;QAAE,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;~~IAEzE~~,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Search Bar',\n // tags: ['autodocs'],\n\n args: {\n disabled: false,\n isOpen: true,\n ~~value: '',\n~~ },\n\n argTypes: {\n ~~isOpen~~: {\n ~~description~~: '~~Search bar state.~~',\n control: { type: 'boolean' },\n table: {\n defaultValue: { summary: 'true' },\n category: 'ifx-search-bar props',\n type: {\n summary: 'boolean',\n },\n },\n },\n disabled: {\n description: '~~Search~~ ~~bar~~ ~~state.',\n control:~~ { ~~type: 'boolean' },\~~n ~~table: {\~~n ~~defaultValue:~~ { ~~summary:~~ ~~'false'~~ ~~},\n category:~~ ~~'ifx-search-bar~~ ~~props',\n type:~~ ~~{\n summary:~~ ~~'boolean',\n },\n },\n },\n value:~~ ~~{\n description:~~ '~~The value is used to handle the search bar input.'~~,\n ~~control: { type: 'text' },\n table:\n {\n category: 'ifx-search-bar props',\n type: {\n summary: 'string',\n },\n },\n~~ },\n maxlength: {\n description: 'Maximum input length.',\n control: { type: 'number' }~~,\n table:\n {~~\n ~~category: 'ifx-search-bar props',\n type: {\n summary: 'number',\n },\n },\n~~ },\n ~~ifxInput~~: {\n action: 'ifxInput',\n description: 'Custom event ~~emitted on input.~~',\n table: {\n ~~category: 'custom events',\n~~ type: {\n summary: 'Framework integration',\n detail~~: `~~React: onIfxInput={handleInput}\\nVue:@ifxInput=\"handleInput\"\\nAngular:(ifxInput)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxInput\", (event) => {//handle input})~~;`,\n }\n }\n },\n ifxOpen: {\n action:~~ '~~ifxOpen'~~,\n ~~description: 'Custom event emitted when the state of isOpen changes.',\n table: {\n~~ ~~category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n `React: onIfxOpen={handleOpen~~}~~\\nVue:@ifxOpen=\"handleOpen\"\\nAngular:(ifxOpen)=\"handleOpen()\"\\nVanillaJs:.addEventListener(\"ifxOpen\", (event) => {//handle open});`,\n }~~,\n },\n },\n },\n};\n\nconst DefaultTemplate = ({ isOpen, disabled, maxlength, ~~value~~ }) => {\n const element = document.createElement('ifx-search-bar');\n element.setAttribute('is-open', isOpen);\n element.setAttribute('disabled', disabled);\n element.~~setAttribute('value', value);\n element.~~addEventListener('ifxInput', action('ifxInput'));\n ~~element.addEventListener('ifxOpen', action('ifxOpen'));\n\n~~ if (maxlength != undefined) element.setAttribute('maxlength', maxlength);\n\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\nDefault.args = {};\n"]}
1	+ {"version":3,"file":"search-bar.stories.js","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,sBAAsB;IAEtB,IAAI,EAAE;QACJ,QAAQ,EAAE,KAAK;QACf,MAAM,EAAE,IAAI;KACb;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,kGAAkG;SAChH;QACD,SAAS,EAAE;YACT,WAAW,EAAE,sBAAsB;YACnC,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC;SAC1B;QACD,kBAAkB,EAAE;YAClB,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,cAAc;YAC3B,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,yKAAyK;iBAC5K;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IAC1D,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzD,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACxC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IACzD,IAAG,SAAS,IAAI,SAAS;QAAE,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IAExE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Search Bar',\n // tags: ['autodocs'],\n\n args: {\n disabled: false,\n isOpen: true,\n },\n argTypes: {\n ifxInput: {\n action: 'ifxInput',\n description: 'Custom event emitted on input\\n\\n(see below for Two Way Data Binding in different JS frameworks)',\n },\n maxlength: {\n description: 'Maximum input length',\n control: {type: 'number'}\n },\n ifxSearchBarIsOpen: {\n action: 'ifxInput',\n description: 'Custom event',\n table: {\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxInput={handleInput}\\nVue:@ifxInput=\"handleInput\"\\nAngular:(ifxInput)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxInput\", (event) => {//handle input});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = ({ isOpen, disabled, maxlength }) => {\n const element = document.createElement('ifx-search-bar');\n element.setAttribute('is-open', isOpen);\n element.setAttribute('disabled', disabled);\n element.addEventListener('ifxInput', action('ifxInput'));\n if(maxlength != undefined) element.setAttribute('maxlength', maxlength);\n\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\nDefault.args = {};\n"]}

package/dist/collection/components/search-field/search-field.stories.js CHANGED Viewed

@@ -6,70 +6,25 @@ export default {
         showDeleteIcon: true,
         disabled: false,
         size: 'm',
-        value: '',
-        placeholder: 'Search...',
     },
     argTypes: {
-        showDeleteIcon: {
-            description: 'Determines whether a delete icon is shown in the search field.',
-            control: 'boolean',
-            table: {
-                category: 'ifx-search-field props',
-                defaultValue: {
-                    summary: true
-                }
-            }
-        },
-        disabled: {
-            description: 'Disables the search field, preventing user interaction.',
-            control: 'boolean',
-            table: {
-                category: 'ifx-search-field props',
-                defaultValue: {
-                    summary: false
-                }
-            }
-        },
         size: {
-            description: 'Size options: s (36px) and m (40px) - default: m.',
-            control: 'radio',
+            description: 'Size options: s (36px) and m (40px) - default: m',
             options: ['s', 'm'],
-            table: {
-                category: 'ifx-search-field props',
-                defaultValue: {
-                    summary: 'm'
-                }
-            }
+            control: { type: 'radio' },
         },
         placeholder: {
-            description: 'Placeholder text displayed in the search field when it is empty.',
-            control: 'text',
-            table: {
-                category: 'ifx-search-field props',
-                defaultValue: {
-                    summary: 'Search...'
-                }
-            }
+            description: 'Place holder text - default value: "Search..."',
+            control: { type: 'text' }
         },
         maxlength: {
-            description: 'Specifies the maximum number of characters that can be entered into the search field.',
-            control: 'number',
-            table: {
-                category: 'ifx-search-field props'
-            }
-        },
-        value: {
-            description: 'The value of the search field. It is used for the form submission.',
-            control: 'text',
-            table: {
-                category: 'ifx-search-field props'
-            }
+            description: 'Maximum input length',
+            control: { type: 'number' }
         },
         ifxInput: {
             action: 'ifxInput',
-            description: 'A custom event triggered whenever there is input in the search field.',
+            description: 'Custom event',
             table: {
-                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxInput={handleInput}\nVue:@ifxInput="handleInput"\nAngular:(ifxInput)="handleInput()"\nVanillaJs:.addEventListener("ifxInput", (event) => {//handle input});',
@@ -78,12 +33,11 @@ export default {
         },
     },
 };
-const DefaultTemplate = ({ disabled, size, showDeleteIcon, placeholder, maxlength, value }) => {
+const DefaultTemplate = ({ disabled, size, showDeleteIcon, placeholder, maxlength }) => {
     const element = document.createElement('ifx-search-field');
     element.setAttribute('size', size);
     element.setAttribute('disabled', disabled);
     element.setAttribute('show-delete-icon', showDeleteIcon);
-    element.setAttribute('value', value);
     if (placeholder != undefined)
         element.setAttribute('placeholder', placeholder);
     if (maxlength != undefined)

package/dist/collection/components/search-field/search-field.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"search-field.stories.js","sourceRoot":"","sources":["../../../src/components/search-field/search-field.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,sBAAsB;IAEtB,IAAI,EAAE;QACJ,cAAc,EAAE,IAAI;QACpB,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,GAAG;~~QACT,KAAK,EAAE,EAAE~~;~~QACT,WAAW,EAAE,WAAW;KACzB;~~IACD,QAAQ,EAAE;QACR,~~cAAc,EAAE;YACd,WAAW,EAAE,gEAAgE;YAC7E,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,~~IAAI~~;iBACd;aACF;SACF;QACD~~,~~QAAQ,~~EAAE;~~YACR,WAAW,EAAE,yDAAyD;YACtE,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,IAAI,EAAE;~~YACJ,WAAW,EAAE,~~mDAAmD~~;~~YAChE~~,OAAO,EAAE,~~OAAO;YAChB,OAAO,EAAE,~~CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,~~KAAK~~,EAAE~~;gBACL~~,~~QAAQ,~~EAAE,~~wBAAwB;gBAClC~~,~~YAAY,~~EAAE~~;oBACZ~~,OAAO,EAAE~~,GAAG~~;~~iBACb~~;~~aACF;SACF;~~QACD,WAAW,EAAE;YACX,WAAW,EAAE,~~kEAAkE~~;~~YAC/E~~,OAAO,EAAE,~~MAAM;YACf,KAAK,~~EAAE~~;gBACL~~,~~QAAQ~~,EAAE,~~wBAAwB;gBAClC~~,~~YAAY,EAAE~~;~~oBACZ,OAAO,EAAE,WAAW~~;~~iBACrB;aACF;SACF;~~QACD,SAAS,EAAE;YACT,WAAW,EAAE,~~uFAAuF~~;~~YACpG~~,OAAO,EAAE,~~QAAQ;YACjB~~,~~KAAK~~,EAAE~~;gBACL~~,QAAQ,~~EAAE,wBAAwB~~;~~aACnC~~;~~SACF;~~QACD,~~KAAK,EAAE;YACL,WAAW,EAAE,oEAAoE;YACjF,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,~~QAAQ,EAAE~~,wBAAwB~~;~~aACnC;SACF;QACD,QAAQ,EAAE;~~YACR,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,~~uEAAuE~~;~~YACpF~~,KAAK,EAAE;gBACL,~~QAAQ,EAAE,eAAe;gBACzB,~~IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,yKAAyK;iBAC5K;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EAAE,~~KAAK,~~EAAE,EAAE~~,EAAE~~;~~IAC5F~~,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC3D,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;IACzD,~~OAAO~~,~~CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;IACpC,IAAI,~~WAAW,IAAI,SAAS;QAAE,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;~~IAC/E~~,~~IAAI~~,SAAS,IAAI,SAAS;QAAE,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;~~IACzE~~,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAEzD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Search Field',\n // tags: ['autodocs'],\n\n args: {\n showDeleteIcon: true,\n disabled: false,\n size: 'm',\n ~~value: '',\n placeholder: 'Search...',\n~~ },\n argTypes: {\n showDeleteIcon: {\n description: 'Determines whether a delete icon is shown in the search field.',\n control: 'boolean',\n table: {\n category: 'ifx-search-field props',\n defaultValue: {\n summary: true\n }\n }\n },\n disabled: {\n description: 'Disables the search field, preventing user interaction.',\n control: 'boolean',\n table: {\n category: 'ifx-search-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n size: {\n description: 'Size options: s (36px) and m (40px) - default: m.',\n ~~control: 'radio',\n~~ options: ['s', 'm'],\n ~~table~~: {~~\n category~~: '~~ifx-search-field props~~'~~,\n defaultValue:~~ ~~{\n summary: 'm'\n~~ }\n ~~}\n~~ },\n placeholder: {\n description: '~~Placeholder~~ ~~text~~ ~~displayed in the search field when it is empty.',\n control: '~~text~~',\n table:~~ ~~{\n category: 'ifx~~-~~search-field~~ ~~props',\n defaultValue~~: {\~~n summary: '~~Search~~...~~'~~\n }\n }\n }~~,\n ~~maxlength: {\n~~ ~~description: 'Specifies the maximum number of characters that can be entered into the search field.',\n~~ control: ~~'number',\n table:~~ ~~{\n category~~: '~~ifx-search-field props~~'\n }\n },\n ~~value~~: {\n description: '~~The~~ ~~value~~ ~~of the search field. It is used for the form submission.~~',\n control: ~~'text',\n table:~~ {~~\n category~~: '~~ifx-search-field props~~'\n }\n },\n ifxInput: {\n action: 'ifxInput',\n description: 'A ~~custom~~ event ~~triggered whenever there is input in the search field.~~',\n table: {\n ~~category: 'custom events',\n~~ type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxInput={handleInput}\\nVue:@ifxInput=\"handleInput\"\\nAngular:(ifxInput)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxInput\", (event) => {//handle input});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = ({ disabled, size, showDeleteIcon, placeholder, maxlength, ~~value~~ }) => {\n const element = document.createElement('ifx-search-field');\n element.setAttribute('size', size);\n element.setAttribute('disabled', disabled);\n element.setAttribute('show-delete-icon', showDeleteIcon);\n ~~element.setAttribute('value', value)\n~~ if (placeholder != undefined) element.setAttribute('placeholder', placeholder);\n if (maxlength != undefined) element.setAttribute('maxlength', maxlength);\n element.addEventListener('ifxInput', action('ifxInput'));\n\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
1	+ {"version":3,"file":"search-field.stories.js","sourceRoot":"","sources":["../../../src/components/search-field/search-field.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,sBAAsB;IAEtB,IAAI,EAAE;QACJ,cAAc,EAAE,IAAI;QACpB,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,GAAG;KACV;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,kDAAkD;YAC/D,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,WAAW,EAAE;YACX,WAAW,EAAE,gDAAgD;YAC7D,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAC;SACzB;QACD,SAAS,EAAE;YACT,WAAW,EAAE,sBAAsB;YACnC,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC;SAC1B;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,cAAc;YAC3B,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,yKAAyK;iBAC5K;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,EAAE;IACrF,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC3D,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;IACzD,IAAG,WAAW,IAAI,SAAS;QAAE,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;IAC9E,IAAG,SAAS,IAAI,SAAS;QAAE,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IACxE,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAEzD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Search Field',\n // tags: ['autodocs'],\n\n args: {\n showDeleteIcon: true,\n disabled: false,\n size: 'm',\n },\n argTypes: {\n size: {\n description: 'Size options: s (36px) and m (40px) - default: m',\n options: ['s', 'm'],\n control: { type: 'radio' },\n },\n placeholder: {\n description: 'Place holder text - default value: \"Search...\"',\n control: { type: 'text'}\n },\n maxlength: {\n description: 'Maximum input length',\n control: {type: 'number'}\n },\n ifxInput: {\n action: 'ifxInput',\n description: 'Custom event',\n table: {\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxInput={handleInput}\\nVue:@ifxInput=\"handleInput\"\\nAngular:(ifxInput)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxInput\", (event) => {//handle input});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = ({ disabled, size, showDeleteIcon, placeholder, maxlength }) => {\n const element = document.createElement('ifx-search-field');\n element.setAttribute('size', size);\n element.setAttribute('disabled', disabled);\n element.setAttribute('show-delete-icon', showDeleteIcon);\n if(placeholder != undefined) element.setAttribute('placeholder', placeholder);\n if(maxlength != undefined) element.setAttribute('maxlength', maxlength);\n element.addEventListener('ifxInput', action('ifxInput'));\n\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

package/dist/collection/components/segmented-control/segmented-control.stories.js CHANGED Viewed

@@ -30,6 +30,9 @@ export default {
             description: 'Set the label of *<ifx-segmented-control>*.',
             table: {
                 category: 'story controls',
+                type: {
+                    summary: '<ifx-segment> `label` </ifx-segment>'
+                }
             }
         },
         caption: {
@@ -94,7 +97,13 @@ See the 2nd *<ifx-segment>* for effects`,
             }
         },
         ifxChange: {
-            description: `Custom event emitted when the segment is changed.`,
+            description: `A custom event *ifxChange* is emitted whenever the *<ifx-segmented-control>* is clicked/selected.\n
+    event.detail:
+    {
+        previousValue: string,
+        selectedValue: string
+    }
+            `,
             table: {
                 category: 'custom events',
                 type: {

package/dist/collection/components/segmented-control/segmented-control.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"segmented-control.stories.js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACX,KAAK,EAAE,8BAA8B;IACrC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACF,gBAAgB,EAAE,CAAC;QACnB,cAAc,EAAE,OAAO;QACvB,OAAO,EAAE,uCAAuC;QAChD,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,OAAO;QACjB,KAAK,EAAE,OAAO;KACjB;IACD,QAAQ,EAAE;QACN,gBAAgB,EAAE;YACd,IAAI,EAAE,oBAAoB;YAC1B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE;YACnC,WAAW,EAAE,qDAAqD;YAClE,KAAK,EAAE;gBACH,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACF,OAAO,EAAE,IAAI;iBAChB;aACJ;SACJ;QACD,cAAc,EAAE;YACZ,IAAI,EAAE,kBAAkB;YACxB,WAAW,EAAE,6CAA6C;YAC1D,KAAK,EAAE;gBACH,QAAQ,EAAE,gBAAgB;~~aAC7B~~;SACJ;QACD,OAAO,EAAE;YACL,WAAW,EAAE,kDAAkD;YAC/D,KAAK,EAAE;gBACH,QAAQ,EAAE,6BAA6B;aAC1C;SACJ;QACD,KAAK,EAAE;YACH,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,iCAAiC;YAC9C,KAAK,EAAE;gBACH,QAAQ,EAAE,6BAA6B;aAC1C;SACJ;QACD,IAAI,EAAE;YACF,WAAW,EAAE,+CAA+C;YAC5D,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;YAC7B,KAAK,EAAE;gBACH,QAAQ,EAAE,6BAA6B;gBACvC,YAAY,EAAE;oBACV,OAAO,EAAE,SAAS;iBACrB;gBACD,IAAI,EAAE;oBACF,OAAO,EAAE,iBAAiB;iBAC7B;aACJ;SACJ;QACD,IAAI,EAAE;YACF,WAAW,EAAE,wBAAwB;YACrC,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,KAAK,EAAE;gBACH,QAAQ,EAAE,mBAAmB;aAChC;SACJ;QACD,QAAQ,EAAE;YACN,WAAW,EAAE;wCACe;YAC5B,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACH,QAAQ,EAAE,mBAAmB;gBAC7B,YAAY,EAAE;oBACV,OAAO,EAAE,KAAK;iBACjB;gBACD,IAAI,EAAE;oBACF,OAAO,EAAE,SAAS;iBACrB;aACJ;SACJ;QACD,KAAK,EAAE;YACH,WAAW,EAAE,6CAA6C;YAC1D,KAAK,EAAE;gBACH,QAAQ,EAAE,mBAAmB;gBAC7B,IAAI,EAAE;oBACF,OAAO,EAAE,QAAQ;iBACpB;aACJ;YACD,IAAI,EAAE;gBACF,QAAQ,EAAE,IAAI;aACjB;SACJ;QACD,SAAS,EAAE;YACP,WAAW,EAAE~~,mDAAmD~~;~~YAChE~~,KAAK,EAAE;gBACH,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACF,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EAAE;;;;2EAI+C;iBAC1D;aACJ;SACJ;KACJ;CACJ,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG;;aAEX,IAAI,CAAC,OAAO;WACd,IAAI,CAAC,KAAK;UACX,IAAI,CAAC,IAAI;~~MACb~~,CAAC,GAAG,EAAE;~~QACA~~,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE;YAClE,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;YACtD,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC;YACxC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,SAAS,~~GAAG~~,CAAC,EAAE,CAAC,CAAC;~~YAC/D~~,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;YAC7C,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,SAAS,KAAK,CAAC;gBAAE,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;YACxF,OAAO,OAAO,CAAC,SAAS,CAAC;QAC7B,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtB,CAAC,CAAC,~~EACF~~;;~~CAEP~~,CAAC;IACE,MAAM,gBAAgB,GAAG,OAAO,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACxE,gBAAgB,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;IAEpE,OAAO,gBAAgB,CAAC;AAC5B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from \"@storybook/addon-actions\";\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Segmented Control',\n tags: ['autodocs'],\n args: {\n amountOfSegments: 5,\n labelOfSegment: 'Label',\n caption: 'Caption text to describe the controls',\n label: 'Group Label',\n size: 'regular',\n icon: 'star-16',\n selected: 'false',\n value: 'Value'\n },\n argTypes: {\n amountOfSegments: {\n name: 'Amount of Segments',\n control: { type: 'number', min: 2 },\n description: 'Control the number of <ifx-segment> in component.',\n table: {\n category: 'story controls',\n type: {\n summary: null\n }\n }\n },\n labelOfSegment: {\n name: 'Label of Segment',\n description: 'Set the label of <ifx-segmented-control>.',\n table: {\n category: 'story controls',\n }\n },\n caption: {\n description: 'Set the caption text of segmented control group.',\n table: {\n category: 'ifx-segmented-control props'\n }\n },\n label: {\n name: 'label',\n description: 'Set the label of control group.',\n table: {\n category: 'ifx-segmented-control props'\n }\n },\n size: {\n description: 'Switch between the size of Segmented Control.',\n control: 'radio',\n options: ['regular', 'small'],\n table: {\n category: 'ifx-segmented-control props',\n defaultValue: {\n summary: 'regular'\n },\n type: {\n summary: 'regular \| small'\n }\n }\n },\n icon: {\n description: 'Set icon of a segment.',\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' },\n table: {\n category: 'ifx-segment props'\n }\n },\n selected: {\n description: `Selects the segment when set true.\\n\nSee the 2nd <ifx-segment> for effects`,\n control: 'boolean',\n table: {\n category: 'ifx-segment props',\n defaultValue: {\n summary: false,\n },\n type: {\n summary: 'boolean'\n }\n }\n },\n value: {\n description: 'Set the value of <ifx-segment>. Required.',\n table: {\n category: 'ifx-segment props',\n type: {\n summary: 'string'\n }\n },\n type: {\n required: true\n }\n },\n ifxChange: {\n description: `~~Custom~~ event emitted ~~when~~ the ~~segment~~ is ~~changed.`,\~~n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `\nReact: onIfxChange={handleChange}\nVue: @ifxChange=\"handleChange\"\nAngular: (ifxChange)=\"handleChange()\"\nVanillaJs: .addEventListener(\"ifxChange\", (event) => {/handle change/});`,\n }\n }\n }\n }\n}\n\nconst Template = (args) => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `\n<ifx-segmented-control\ncaption = '${args.caption}'\nlabel = '${args.label}'\nsize = '${args.size}'>\n ${(() => {\n return Array.from({ length: args.amountOfSegments }, (_, segmentId) => {\n const segment = document.createElement('ifx-segment');\n segment.innerText = args.labelOfSegment;\n segment.setAttribute('value', `${args.value}${segmentId + 1}`);\n segment.setAttribute('icon', `${args.icon}`);\n if (args.selected === true && segmentId === 1) segment.setAttribute('selected', 'true');\n return segment.outerHTML;\n }).join(`\\n `);\n })()\n }\n</ifx-segmented-control> \n`;\n const segmentedControl = wrapper.querySelector('ifx-segmented-control');\n segmentedControl.addEventListener('ifxChange', action('ifxChange'));\n\n return segmentedControl;\n};\n\nexport const Default = Template.bind({});"]}
1	+ {"version":3,"file":"segmented-control.stories.js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\";\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Segmented Control',\n tags: ['autodocs'],\n args: {\n amountOfSegments: 5,\n labelOfSegment: 'Label',\n caption: 'Caption text to describe the controls',\n label: 'Group Label',\n size: 'regular',\n icon: 'star-16',\n selected: 'false',\n value: 'Value'\n },\n argTypes: {\n amountOfSegments: {\n name: 'Amount of Segments',\n control: { type: 'number', min: 2 },\n description: 'Control the number of <ifx-segment> in component.',\n table: {\n category: 'story controls',\n type: {\n summary: null\n }\n }\n },\n labelOfSegment: {\n name: 'Label of Segment',\n description: 'Set the label of <ifx-segmented-control>.',\n table: {\n category: 'story controls',\n type: {\n summary: '<ifx-segment> `label` </ifx-segment>'\n }\n }\n },\n caption: {\n description: 'Set the caption text of segmented control group.',\n table: {\n category: 'ifx-segmented-control props'\n }\n },\n label: {\n name: 'label',\n description: 'Set the label of control group.',\n table: {\n category: 'ifx-segmented-control props'\n }\n },\n size: {\n description: 'Switch between the size of Segmented Control.',\n control: 'radio',\n options: ['regular', 'small'],\n table: {\n category: 'ifx-segmented-control props',\n defaultValue: {\n summary: 'regular'\n },\n type: {\n summary: 'regular \| small'\n }\n }\n },\n icon: {\n description: 'Set icon of a segment.',\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' },\n table: {\n category: 'ifx-segment props'\n }\n },\n selected: {\n description: `Selects the segment when set true.\\n\nSee the 2nd <ifx-segment> for effects`,\n control: 'boolean',\n table: {\n category: 'ifx-segment props',\n defaultValue: {\n summary: false,\n },\n type: {\n summary: 'boolean'\n }\n }\n },\n value: {\n description: 'Set the value of <ifx-segment>. Required.',\n table: {\n category: 'ifx-segment props',\n type: {\n summary: 'string'\n }\n },\n type: {\n required: true\n }\n },\n ifxChange: {\n description: `A custom event ifxChange is emitted whenever the <ifx-segmented-control> is clicked/selected.\\n\n event.detail: \n {\n previousValue: string,\n selectedValue: string\n }\n `,\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `\nReact: onIfxChange={handleChange}\nVue: @ifxChange=\"handleChange\"\nAngular: (ifxChange)=\"handleChange()\"\nVanillaJs: .addEventListener(\"ifxChange\", (event) => {/handle change/});`,\n }\n }\n }\n }\n}\n\nconst Template = (args) => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `\n<ifx-segmented-control\ncaption = '${args.caption}'\nlabel = '${args.label}'\nsize = '${args.size}'>\n ${\n (() => {\n return Array.from({ length: args.amountOfSegments }, (_, segmentId) => {\n const segment = document.createElement('ifx-segment');\n segment.innerText = args.labelOfSegment;\n segment.setAttribute('value', `${args.value}${segmentId+1}`);\n segment.setAttribute('icon', `${args.icon}`);\n if (args.selected === true && segmentId === 1) segment.setAttribute('selected', 'true');\n return segment.outerHTML;\n }).join(`\\n `);\n })()\n }\n</ifx-segmented-control> \n`;\n const segmentedControl = wrapper.querySelector('ifx-segmented-control');\n segmentedControl.addEventListener('ifxChange', action('ifxChange'));\n\n return segmentedControl;\n};\n\nexport const Default = Template.bind({});"]}

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

@@ -29,8 +29,8 @@ export class Multiselect {
             if (!path.includes(this.dropdownElement)) {
                 this.dropdownOpen = false;
                 document.removeEventListener('click', this.handleDocumentClick);
-                // Dispatch the ifxOpen event
-                this.ifxOpen.emit(this.dropdownOpen);
+                // Dispatch the ifxMultiselectIsOpen event
+                this.ifxMultiselectIsOpen.emit(this.dropdownOpen);
             }
         };
         this.name = undefined;
@@ -299,8 +299,8 @@ export class Multiselect {
             if (this.dropdownOpen) {
                 document.addEventListener('click', this.handleDocumentClick);
             }
-            // Dispatch the ifxOpen event
-            this.ifxOpen.emit(this.dropdownOpen);
+            // Dispatch the ifxMultiselectIsOpen event
+            this.ifxMultiselectIsOpen.emit(this.dropdownOpen);
         }, 0);
         this.zIndex = Multiselect.globalZIndex++;
     }
@@ -789,8 +789,8 @@ export class Multiselect {
                     "references": {}
                 }
             }, {
-                "method": "ifxOpen",
-                "name": "ifxOpen",
+                "method": "ifxMultiselectIsOpen",
+                "name": "ifxMultiselectIsOpen",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,