npm - globuswebcomponents - Versions diffs - 2.13.3 → 2.13.5 - Mend

globuswebcomponents 2.13.3 → 2.13.5

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

package/dist/collection/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.css CHANGED Viewed

@@ -2869,10 +2869,14 @@
 }
 /* Icon Color Styles */
-.icon.plain_background path[stroke] {
+.icon.plain_background.default path[stroke] {
   stroke: var(--color-icon, #4b5565);
 }
+.icon.plain_background.default path[fill] {
+  fill: var(--color-icon, #4b5565);
+}
 .icon.plain_background.active path[stroke] {
   stroke: var(--color-icon-information-bold, #042f59);
 }
@@ -2881,19 +2885,31 @@
   fill: var(--color-icon-information-bold, #042f59);
 }
-.icon.plain_background path#Icon[fill] {
+.icon.plain_background.default path#Icon[stroke] {
+  stroke: var(--color-icon, #4b5565);
+}
+.icon.plain_background.default path#Icon[fill] {
   fill: var(--color-icon, #4b5565);
 }
+.icon.plain_background.active path#Icon[stroke] {
+  stroke: var(--color-icon-information-bold, #042f59);
+}
 .icon.plain_background.active path#Icon[fill] {
   fill: var(--color-icon-information-bold, #042f59);
 }
+.icon.plain_background.active path#Accent[stroke] {
+  stroke: var(--color-icon-information-bold, #042f59);
+}
 .icon.plain_background.active path#Accent[fill] {
   fill: var(--color-icon-information-bold, #042f59);
 }
-.icon.plain_background circle[stroke] {
+.icon.plain_background.default circle[stroke] {
   stroke: var(--color-icon, #4b5565);
 }
@@ -2901,45 +2917,86 @@
   fill: var(--color-icon-information-bold, #042f59);
 }
-.icon.colored_background path[stroke] {
-    stroke: var(--color-icon, #4B5565);
+.icon.colored_background.default path[stroke] {
+  stroke: var(--color-icon, #4b5565);
+}
+.icon.colored_background.default path[fill] {
+  fill: var(--color-icon, #4b5565);
 }
 .icon.colored_background.active path[stroke] {
-    stroke: var(--color-icon-information-bold, #042F59);
+  stroke: var(--color-icon-information-bold, #042f59);
 }
 .icon.colored_background.active path[fill] {
-    fill: var(--color-icon-information-bold, #042F59);
+  fill: var(--color-icon-information-bold, #042f59);
+}
+.icon.colored_background path#Icon[stroke] {
+  stroke: var(--color-icon, #4b5565);
 }
 .icon.colored_background path#Icon[fill] {
-    fill: var(--color-icon, #4B5565);
+  fill: var(--color-icon, #4b5565);
 }
-.icon.colored_background.active path#Icon[fill] {
-    fill: var(--color-icon-information-bold, #042F59);
+.icon.colored_background.active path#Accent[stroke] {
+  stroke: var(--color-icon-information-bold, #042f59);
 }
 .icon.colored_background.active path#Accent[fill] {
-    fill: var(--color-icon-information-bold, #042F59);
+  fill: var(--color-icon-information-bold, #042f59);
 }
 .icon.colored_background circle[stroke] {
-    stroke: var(--color-icon, #4B5565);
+  stroke: var(--color-icon, #4b5565);
+}
+.icon.colored_background circle[fill] {
+  fill: var(--color-icon, #4b5565);
+}
+.icon.colored_background.active circle[stroke] {
+  stroke: var(--color-icon-information-bold, #042f59);
 }
 .icon.colored_background.active circle[fill] {
-    fill: var(--color-icon-information-bold, #042F59);
+  fill: var(--color-icon-information-bold, #042f59);
 }
-.icon.plain_background.default path[fill],
+/* .icon.plain_background.default path[fill],
 .icon.colored_background.default path[fill],
 .icon.plain_background.default circle[fill],
 .icon.colored_background.default circle[fill] {
   fill: transparent;
+} */
+.icon.plain_background.default path.has_opacity,
+.icon.plain_background.default g.has_opacity,
+.icon.plain_background.default circle.has_opacity,
+.icon.colored_background.default path.has_opacity,
+.icon.colored_background.default g.has_opacity,
+.icon.colored_background.default circle.has_opacity {
+  opacity: 0;
 }
+.icon.plain_background.active path.has_opacity,
+.icon.plain_background.active g.has_opacity,
+.icon.plain_background.active circle.has_opacity,
+.icon.colored_background.active path.has_opacity,
+.icon.colored_background.active g.has_opacity,
+.icon.colored_background.active circle.has_opacity {
+  opacity: 0.5;
+}
+/* .icon.plain_background.default path[fill].has_opacity,
+.icon.plain_background.default g.has_opacity,
+.icon.colored_background.default path[fill].has_opacity,
+.icon.colored_background.default g.has_opacity{
+  fill: transparent;
+} */
 /* Text Styles */
 .label_text {
   max-width: 100%;

package/dist/collection/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.js CHANGED Viewed

@@ -1,7 +1,10 @@
 import { getAssetPath, h } from "@stencil/core";
 export class GbComplexSecondarySideBarItem {
     constructor() {
-        this.label = 'Appraisal';
+        this.state = 'default';
+        this.type = 'full_with_label';
+        this.category = 'colored_background';
+        this.label = '';
         this.icon = '';
         this.showTooltip = false;
         this.leadingIconSvg = '';
@@ -10,13 +13,28 @@ export class GbComplexSecondarySideBarItem {
         const iconPath = getAssetPath(`${iconName}`);
         const response = await fetch(iconPath);
         const svg = await response.text();
-        this.leadingIconSvg = svg;
+        const parser = new DOMParser();
+        const svgDoc = parser.parseFromString(svg, 'image/svg+xml');
+        const svgElement = svgDoc.documentElement;
+        // Add `has-opacity` class to all elements that have an opacity attribute
+        const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');
+        elementsWithOpacity.forEach(el => {
+            el.classList.add('has_opacity');
+        });
+        const gWithOpacity = svgElement.querySelectorAll('g[opacity]');
+        gWithOpacity.forEach(g => {
+            g.classList.add('has_opacity');
+        });
+        // Serialize and store
+        const modifiedSvg = svgElement.outerHTML;
+        // console.log(modifiedSvg)
+        this.leadingIconSvg = modifiedSvg;
     }
     componentDidLoad() {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: '95c40ef250a694615cc791e8cbb4bdda9ff0fec7', class: `container ${this.type}` }, h("div", { key: '0e06a973c81b77f6f87d650b20fdf87e9f7f5726', class: `secondary_side_bar_item_div ${this.state} ${this.type} ${this.category}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: 'c701dee78b2640b9bb3d11e0c21915fd603fa5b7', class: "icon" }, h("div", { key: '709c32f14cc432f00b6c825e972c3f9a1c609824', class: "icon_container" }, h("div", { key: '4fdb39198fb0aa17940b0687ab0b93e1cb51eb31', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg }))), this.type === 'full_with_label' && (h("div", { key: '235ba2b2b915822789876161c547b1d05b770f93', class: "text" }, h("p", { key: 'c3f423d6d0ccb97a2a141d83af55155e2b939909', class: `label_text ${this.state} ${this.category} ${this.state !== 'active' ? 'text-md-medium' : 'text-md-semi-bold'}` }, this.label))), this.type === 'icon_only' && this.showTooltip && (h("gb-tooltip", { key: '229619866f0f2e8f8547b38444afe03ffc022040', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: 'f2cc0006265365e9049603d3352468f3bc8294f4', slot: "label" }, this.label))))));
+        return (h("div", { key: '57632db7fd548e55a471fb6fb51f784b579d6dde', class: `container ${this.type}` }, h("div", { key: '9e53f1559c074d85ff745d7d4dc40d7286a19cec', class: `secondary_side_bar_item_div ${this.state} ${this.type} ${this.category}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: 'bfaa8ae13149b4decc820663850bdbcadd3a4edf', class: "icon" }, h("div", { key: '4566c395d1b2204ad346dfa79db6229817f35946', class: "icon_container" }, h("div", { key: 'a39d5902b0e852bfd9516ae5aef27ace8364431f', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg }))), this.type === 'full_with_label' && (h("div", { key: 'e64f1b9b1d91b25205690894e884db2aa102cd46', class: "text" }, h("p", { key: 'd6b5bd96634d311ad825457a2b97da6988a3946c', class: `label_text ${this.state} ${this.category} ${this.state !== 'active' ? 'text-md-medium' : 'text-md-semi-bold'}` }, this.label))), this.type === 'icon_only' && this.showTooltip && (h("gb-tooltip", { key: 'a381ca7df1756f7875ae463088d05d7e39d25a92', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: '6e742a6c19798eb3dbcee7c24ebd2fb9c96d44b7', slot: "label" }, this.label))))));
     }
     static get is() { return "gb-complex-secondary-side-bar-item"; }
     static get encapsulation() { return "shadow"; }
@@ -49,7 +67,8 @@ export class GbComplexSecondarySideBarItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "state"
+                "attribute": "state",
+                "defaultValue": "'default'"
             },
             "type": {
                 "type": "string",
@@ -68,7 +87,8 @@ export class GbComplexSecondarySideBarItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "type"
+                "attribute": "type",
+                "defaultValue": "'full_with_label'"
             },
             "category": {
                 "type": "string",
@@ -93,7 +113,8 @@ export class GbComplexSecondarySideBarItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "category"
+                "attribute": "category",
+                "defaultValue": "'colored_background'"
             },
             "label": {
                 "type": "string",
@@ -113,7 +134,7 @@ export class GbComplexSecondarySideBarItem {
                 "setter": false,
                 "reflect": false,
                 "attribute": "label",
-                "defaultValue": "'Appraisal'"
+                "defaultValue": "''"
             },
             "icon": {
                 "type": "string",

package/dist/collection/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gb-complex-secondary-side-bar-item.js","sourceRoot":"","sources":["../../../src/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;~~AASjF~~,MAAM,OAAO,6BAA6B;~~IAN1C~~;~~QAUY~~,UAAK,GAAW,~~WAAW~~,CAAC;~~QAC5B~~,SAAI,GAAW,EAAE,CAAC;QACD,gBAAW,GAAY,KAAK,CAAC;QAE7C,mBAAc,GAAW,EAAE,CAAC;~~KAwCxC~~;~~IAtCG~~,KAAK,CAAC,QAAQ,CAAC,QAAgB;QAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,~~GAAG~~,CAAC;~~IAC5B~~,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,MAAM;~~QACF~~,OAAO,CACL,4DAAK,KAAK,EAAE,aAAa,IAAI,CAAC,IAAI,EAAE;YAClC,4DACE,KAAK,EAAE,+BAA+B,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,EAChF,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAC7C,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;gBAE9C,4DAAK,KAAK,EAAC,MAAM;oBACf,4DAAK,KAAK,EAAC,gBAAgB;wBACzB,4DAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ,CACrF,CACF;gBACL,IAAI,CAAC,IAAI,KAAK,iBAAiB,IAAI,CAClC,4DAAK,KAAK,EAAC,MAAM;oBACf,0DAAG,KAAK,EAAE,cAAc,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,mBAAmB,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK,CACvI,CACP;gBACA,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,WAAW,IAAI,CAChD,iFAAwB,IAAI,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS;oBACxD,0DAAG,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAK,CACrB,CACd,CACG,CACF,CACP,CAAC;~~IACN~~,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ~~","sourcesContent":["import { Component, Element, Prop, State, getAssetPath, h } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-complex-secondary-side-bar-item',\r\n styleUrl: 'gb-complex-secondary-side-bar-item.css',\r\n shadow: true\r\n})\r\~~n\r\~~nexport class GbComplexSecondarySideBarItem {\r\n @Prop() state: 'default' \| 'active';\r\n @Prop() type: 'full_with_label' \| 'icon_only';\r\n @Prop() category: GeneralBackgroundCategories;\r\n @Prop() label: string = '~~Appraisal~~';\r\n @Prop() icon: string = '';\r\n @Prop({ mutable: true }) showTooltip: boolean = false;\r\n @Element() el: HTMLElement;\r\n @State() leadingIconSvg: string = '';\r\n\r\n async loadIcon(iconName: string) {\r\n const iconPath = getAssetPath(`${iconName}`);\r\n const response = await fetch(iconPath);\r\n const svg = await response.text();\r\n this.leadingIconSvg = ~~svg~~;\r\n }\r\n\r\n componentDidLoad() {\r\n this.loadIcon(this.icon);\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`container ${this.type}`}>\r\n <div\r\n class={`secondary_side_bar_item_div ${this.state} ${this.type} ${this.category}`}\r\n onMouseEnter={() => (this.showTooltip = true)}\r\n onMouseLeave={() => (this.showTooltip = false)}\r\n >\r\n <div class=\"icon\">\r\n <div class=\"icon_container\">\r\n <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n </div>\r\n </div>\r\n {this.type === 'full_with_label' && (\r\n <div class=\"text\">\r\n <p class={`label_text ${this.state} ${this.category} ${this.state !== 'active' ? 'text-md-medium' : 'text-md-semi-bold'}`}>{this.label}</p>\r\n </div>\r\n )}\r\n {this.type === 'icon_only' && this.showTooltip && (\r\n <gb-tooltip show-arrow={true} arrow=\"left\" class=\"tooltip\">\r\n <p slot=\"label\">{this.label}</p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}"]}
1	+ {"version":3,"file":"gb-complex-secondary-side-bar-item.js","sourceRoot":"","sources":["../../../src/components/gb-complex-secondary-side-bar-item/gb-complex-secondary-side-bar-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, State, getAssetPath, h } from '@stencil/core';\r\nimport { GeneralBackgroundCategories } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-complex-secondary-side-bar-item',\r\n styleUrl: 'gb-complex-secondary-side-bar-item.css',\r\n shadow: true,\r\n})\r\nexport class GbComplexSecondarySideBarItem {\r\n @Prop() state: 'default' \| 'active' = 'default';\r\n @Prop() type: 'full_with_label' \| 'icon_only' = 'full_with_label';\r\n @Prop() category: GeneralBackgroundCategories = 'colored_background';\r\n @Prop() label: string = '';\r\n @Prop() icon: string = '';\r\n @Prop({ mutable: true }) showTooltip: boolean = false;\r\n @Element() el: HTMLElement;\r\n @State() leadingIconSvg: string = '';\r\n\r\n async loadIcon(iconName: string) {\r\n const iconPath = getAssetPath(`${iconName}`);\r\n const response = await fetch(iconPath);\r\n const svg = await response.text();\r\n\r\n const parser = new DOMParser();\r\n const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n const svgElement = svgDoc.documentElement;\r\n\r\n // Add `has-opacity` class to all elements that have an opacity attribute\r\n const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\r\n elementsWithOpacity.forEach(el => {\r\n el.classList.add('has_opacity');\r\n });\r\n\r\n const gWithOpacity = svgElement.querySelectorAll('g[opacity]');\r\n\r\n gWithOpacity.forEach(g => {\r\n g.classList.add('has_opacity');\r\n });\r\n\r\n // Serialize and store\r\n const modifiedSvg = svgElement.outerHTML;\r\n // console.log(modifiedSvg)\r\n this.leadingIconSvg = modifiedSvg;\r\n }\r\n\r\n componentDidLoad() {\r\n this.loadIcon(this.icon);\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`container ${this.type}`}>\r\n <div\r\n class={`secondary_side_bar_item_div ${this.state} ${this.type} ${this.category}`}\r\n onMouseEnter={() => (this.showTooltip = true)}\r\n onMouseLeave={() => (this.showTooltip = false)}\r\n >\r\n <div class=\"icon\">\r\n <div class=\"icon_container\">\r\n <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n </div>\r\n </div>\r\n {this.type === 'full_with_label' && (\r\n <div class=\"text\">\r\n <p class={`label_text ${this.state} ${this.category} ${this.state !== 'active' ? 'text-md-medium' : 'text-md-semi-bold'}`}>{this.label}</p>\r\n </div>\r\n )}\r\n {this.type === 'icon_only' && this.showTooltip && (\r\n <gb-tooltip show-arrow={true} arrow=\"left\" class=\"tooltip\">\r\n <p slot=\"label\">{this.label}</p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/gb-filter-modal/gb-filter-modal.js CHANGED Viewed

@@ -17,8 +17,10 @@ export class GbFilterModal {
         this.renderKey = 0;
     }
     componentWillLoad() {
-        const applied = this.filterConfig.appliedValues || {};
-        this.formValues = Object.assign(Object.assign({}, (this.filterConfig.initialValues || {})), applied);
+        if (this.filterConfig) {
+            const applied = this.filterConfig.appliedValues || {};
+            this.formValues = Object.assign(Object.assign({}, (this.filterConfig.initialValues || {})), applied);
+        }
         // console.log(this.formValues);
     }
     handleFieldChange(key, value) {
@@ -80,7 +82,10 @@ export class GbFilterModal {
         this.close.emit();
     }
     render() {
-        return (h("div", { key: '39f094ab1a2cba76637fb3735d5ebb8e1dc551fe', class: "filter_modal_wrapper" }, h("div", { key: 'fb385887e495a597cdc79a01203f662f0b9e0206', class: "filter_modal_header" }, h("div", { key: '18b5de829e5eee52b7b1fb6fe2629c4eef9f5251', class: "filter_modal_content" }, h("gb-button-close", { key: '72a89204b39b01cf13f0215b244e539fd683a7f6', size: "sm", color: "gray", class: "close_button", onClick: () => this.emitCloseEvent() }), h("p", { key: '62baa2b177841a85d00fdc93d457de9b051a8ce3', class: "title display-xs-semi-bold" }, this.filterConfig.title || 'Filter'))), h("div", { key: 'f4888c13f97012e5ab00380014ead07f814cebcb', class: "filter_content_container" }, h("div", { class: "filter_content", key: this.renderKey }, this.filterConfig.fields && (h(Fragment, null, this.filterConfig.fields.map(field => {
+        if (!this.filterConfig) {
+            return (h("div", { class: "filter_modal_wrapper" }, h("div", { class: "filter_modal_header" }, h("div", { class: "filter_modal_content" }, h("gb-button-close", { size: "sm", color: "gray", class: "close_button", onClick: () => this.emitCloseEvent() }), h("p", { class: "title display-xs-semi-bold" }, "Filter")))));
+        }
+        return (h("div", { class: "filter_modal_wrapper" }, h("div", { class: "filter_modal_header" }, h("div", { class: "filter_modal_content" }, h("gb-button-close", { size: "sm", color: "gray", class: "close_button", onClick: () => this.emitCloseEvent() }), h("p", { class: "title display-xs-semi-bold" }, this.filterConfig ? this.filterConfig.title : 'Filter'))), h("div", { class: "filter_content_container" }, h("div", { class: "filter_content", key: this.renderKey }, this.filterConfig.fields && (h(Fragment, null, this.filterConfig.fields.map(field => {
             if (field.tag === 'gb-date-picker') {
                 const keys = field.key;
                 return (h("div", { class: "date_range" }, h("p", { class: "label text-sm-medium" }, field.label), h("div", { class: "date_pickers" }, h("gb-date-picker", { placeholder: "dd-mm-yy", "full-width": "true", mode: "single", format: "d-m-y", "show-months": "1", value: this.formValues[keys.start], onDateChange: e => this.handleFieldChange(keys.start, e) }), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M2.5 12L21.5002 12", stroke: "var(--color-icon-subtle, #697586)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("gb-date-picker", { placeholder: "dd-mm-yy", "full-width": "true", mode: "single", format: "d-m-y", "show-months": "1", "dropdown-alignment": "right", value: this.formValues[keys.end], onDateChange: e => this.handleFieldChange(keys.end, e) }))));
@@ -99,7 +104,7 @@ export class GbFilterModal {
                 [`on${this.capitalize(field.event)}`]: (e) => this.handleFieldChange(key, e.detail),
             };
             return (h("div", { class: "field" }, h(Tag, Object.assign({}, field.props, valueProp, eventHandler))));
-        }))))), h("div", { key: '9579fae93d962f3be8adff6a8949638e561f61d4', class: "filter_modal_actions" }, h("div", { key: 'b550025189f190bf8de6b8d0584cd3449f903ed7', class: "modal_actions_content" }, h("div", { key: '565fe5604d99404f9089aa62ccade3feee454f75', class: "btn" }, h("gb-button", { key: '8c81cfbfffaa6c8e76e4ae083c8d782950037f27', size: "xl", hierarchy: "secondary_gray", icon: "default", onClick: () => this.handleClearClick() }, h("p", { key: '5dcedca7890c1a94c297b18fc109081e494522ff' }, "Clear filter"))), h("div", { key: '80805a4a45ba9f6fb2d41175f40e61b8eadf91fe', class: "btn" }, h("gb-button", { key: '47befcff13d2669f9dfc6321e9eeb3c1a4f5facb', size: "xl", hierarchy: "primary", icon: "default", onClick: () => this.handleApplyClick() }, h("p", { key: '34b5c2d253d594b85b42f298a07ad10a38e03202' }, "Apply")))))));
+        }))))), h("div", { class: "filter_modal_actions" }, h("div", { class: "modal_actions_content" }, h("div", { class: "btn" }, h("gb-button", { size: "xl", hierarchy: "secondary_gray", icon: "default", onClick: () => this.handleClearClick() }, h("p", null, "Clear filter"))), h("div", { class: "btn" }, h("gb-button", { size: "xl", hierarchy: "primary", icon: "default", onClick: () => this.handleApplyClick() }, h("p", null, "Apply")))))));
     }
     static get is() { return "gb-filter-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -130,7 +135,7 @@ export class GbFilterModal {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""

package/dist/collection/components/gb-filter-modal/gb-filter-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gb-filter-modal.js","sourceRoot":"","sources":["../../../src/components/gb-filter-modal/gb-filter-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h, Fragment } from '@stencil/core';\r\nimport { FilterConfig } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-filter-modal',\r\n styleUrl: 'gb-filter-modal.css',\r\n shadow: true,\r\n})\r\nexport class GbFilterModal {\r\n @Prop() filterConfig: FilterConfig;\r\n @State() formValues: Record<string, any> = {};\r\n @State() renderKey = 0;\r\n @Event() applyFilters: EventEmitter<Record<string, any>>;\r\n @Event() clearFilters: EventEmitter<void>;\r\n @Event({ bubbles: true, composed: true }) close: EventEmitter<void>;\r\n\r\n componentWillLoad() {\r\n const applied = this.filterConfig.appliedValues \|\| {};\r\n\r\n this.formValues = {\r\n ...(this.filterConfig.initialValues \|\| {}),\r\n ...applied, // applied values win over defaults\r\n };\r\n\r\n // console.log(this.formValues);\r\n }\r\n\r\n handleFieldChange(key: string, value: any) {\r\n if (value instanceof CustomEvent) {\r\n value = value.detail ?? null;\r\n }\r\n\r\n const field = this.filterConfig.fields.find(f => f.key === key);\r\n\r\n if (field && field.tag === 'gb-input-dropdown') {\r\n value = Array.isArray(value) ? value : value != null ? [value] : [];\r\n }\r\n\r\n if (value === null \|\| value === undefined \|\| value === '' \|\| (Array.isArray(value) && value.length === 0)) {\r\n const { [key]: _, ...rest } = this.formValues;\r\n this.formValues = rest;\r\n return;\r\n }\r\n\r\n this.formValues = {\r\n ...this.formValues,\r\n [key]: value,\r\n };\r\n }\r\n\r\n handleClearClick() {\r\n const resetValues = { ...(this.filterConfig.initialValues \|\| {}) };\r\n \r\n this.filterConfig.fields.forEach(field => {\r\n if (field.tag === 'gb-date-picker') {\r\n const keys = field.key as { start: string; end: string };\r\n resetValues[keys.start] = null;\r\n resetValues[keys.end] = null;\r\n } else {\r\n // use field.default if defined, otherwise check if the field expects an array\r\n const isArrayField = field.props?.type === 'tags' \|\| Array.isArray(field.default);\r\n resetValues[field.key as string] = field.default ?? (isArrayField ? [] : null);\r\n }\r\n });\r\n \r\n this.formValues = resetValues;\r\n this.renderKey++;\r\n this.clearFilters.emit();\r\n }\r\n\r\n handleApplyClick() {\r\n const { pageNumber, pageSize, ...filters } = this.formValues;\r\n // console.log({\r\n // filters,\r\n // pagination: {\r\n // pageNumber: pageNumber ?? 1,\r\n // pageSize: pageSize ?? 10,\r\n // },\r\n // });\r\n\r\n this.applyFilters.emit({\r\n filters,\r\n pagination: {\r\n pageNumber: pageNumber ?? 1,\r\n pageSize: pageSize ?? 10,\r\n },\r\n });\r\n }\r\n\r\n capitalize(str: string) {\r\n return str.charAt(0).toUpperCase() + str.slice(1);\r\n }\r\n\r\n emitCloseEvent() {\r\n this.close.emit();\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"filter_modal_wrapper\">\r\n <div class=\"filter_modal_header\">\r\n <div class=\"filter_modal_content\">\r\n <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\" onClick={() => this.emitCloseEvent()}></gb-button-close>\r\n <p class=\"title display-xs-semi-bold\">{this.filterConfig.title \|\| 'Filter'}</p>\r\n </div>\r\n </div>\r\n <div class=\"filter_content_container\">\r\n <div class=\"filter_content\" key={this.renderKey}>\r\n {/* {this.filterConfig.enableDateRange && (\r\n <div class=\"date_range\">\r\n <p class=\"label text-sm-medium\">{this.filterConfig.dateRangeLabel \|\| 'Period'}</p>\r\n <div class=\"date_pickers\">\r\n <gb-date-picker\r\n placeholder=\"dd-mm-yy\"\r\n full-width=\"true\"\r\n twentyfour-hr=\"true\"\r\n mode=\"single\"\r\n format=\"d-m-y\"\r\n show-months=\"1\"\r\n onDateChange={e => this.handleFieldChange('startDate', e)}\r\n ></gb-date-picker>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M2.5 12L21.5002 12\" stroke=\"var(--color-icon-subtle ,#697586)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <gb-date-picker\r\n placeholder=\"dd-mm-yy\"\r\n full-width=\"true\"\r\n twentyfour-hr=\"true\"\r\n mode=\"single\"\r\n format=\"d-m-y\"\r\n show-months=\"1\"\r\n dropdown-alignment=\"right\"\r\n onDateChange={e => this.handleFieldChange('endDate', e)}\r\n ></gb-date-picker>\r\n </div>\r\n </div>\r\n )} */}\r\n {this.filterConfig.fields && (\r\n <>\r\n {this.filterConfig.fields.map(field => {\r\n if (field.tag === 'gb-date-picker') {\r\n const keys = field.key as { start: string; end: string };\r\n \r\n return (\r\n <div class=\"date_range\">\r\n <p class=\"label text-sm-medium\">{field.label}</p>\r\n <div class=\"date_pickers\">\r\n <gb-date-picker\r\n placeholder=\"dd-mm-yy\"\r\n full-width=\"true\"\r\n mode=\"single\"\r\n format=\"d-m-y\"\r\n show-months=\"1\"\r\n value={this.formValues[keys.start]}\r\n onDateChange={e => this.handleFieldChange(keys.start, e)}\r\n ></gb-date-picker>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M2.5 12L21.5002 12\" stroke=\"var(--color-icon-subtle, #697586)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <gb-date-picker\r\n placeholder=\"dd-mm-yy\"\r\n full-width=\"true\"\r\n mode=\"single\"\r\n format=\"d-m-y\"\r\n show-months=\"1\"\r\n dropdown-alignment=\"right\"\r\n value={this.formValues[keys.end]}\r\n onDateChange={e => this.handleFieldChange(keys.end, e)}\r\n ></gb-date-picker>\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n const Tag = field.tag;\r\n const key = field.key as string;\r\n const currentValue = this.formValues[key];\r\n const valueProp =\r\n currentValue != null\r\n ? field.tag === 'gb-slider'\r\n ? { leftControl: currentValue.left, rightControl: currentValue.right }\r\n : field.tag === 'gb-input-dropdown'\r\n ? { value: Array.isArray(currentValue) ? currentValue : [currentValue] } // ← coerce here\r\n : { value: currentValue }\r\n : {};\r\n\r\n\r\n const eventHandler = {\r\n [`on${this.capitalize(field.event as string)}`]: (e: CustomEvent) => this.handleFieldChange(key, e.detail),\r\n };\r\n\r\n return (\r\n <div class=\"field\">\r\n <Tag {...field.props} {...valueProp} {...eventHandler} />\r\n </div>\r\n );\r\n })}\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n <div class=\"filter_modal_actions\">\r\n <div class=\"modal_actions_content\">\r\n <div class=\"btn\">\r\n <gb-button size=\"xl\" hierarchy=\"secondary_gray\" icon=\"default\" onClick={() => this.handleClearClick()}>\r\n <p>Clear filter</p>\r\n </gb-button>\r\n </div>\r\n <div class=\"btn\">\r\n <gb-button size=\"xl\" hierarchy=\"primary\" icon=\"default\" onClick={() => this.handleApplyClick()}>\r\n <p>Apply</p>\r\n </gb-button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"gb-filter-modal.js","sourceRoot":"","sources":["../../../src/components/gb-filter-modal/gb-filter-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h, Fragment } from '@stencil/core';\r\nimport { FilterConfig } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-filter-modal',\r\n styleUrl: 'gb-filter-modal.css',\r\n shadow: true,\r\n})\r\nexport class GbFilterModal {\r\n @Prop() filterConfig?: FilterConfig;\r\n @State() formValues: Record<string, any> = {};\r\n @State() renderKey = 0;\r\n @Event() applyFilters: EventEmitter<Record<string, any>>;\r\n @Event() clearFilters: EventEmitter<void>;\r\n @Event({ bubbles: true, composed: true }) close: EventEmitter<void>;\r\n\r\n componentWillLoad() {\r\n if (this.filterConfig) {\r\n const applied = this.filterConfig.appliedValues \|\| {};\r\n\r\n this.formValues = {\r\n ...(this.filterConfig.initialValues \|\| {}),\r\n ...applied, // applied values win over defaults\r\n };\r\n }\r\n\r\n // console.log(this.formValues);\r\n }\r\n\r\n handleFieldChange(key: string, value: any) {\r\n if (value instanceof CustomEvent) {\r\n value = value.detail ?? null;\r\n }\r\n\r\n const field = this.filterConfig.fields.find(f => f.key === key);\r\n\r\n if (field && field.tag === 'gb-input-dropdown') {\r\n value = Array.isArray(value) ? value : value != null ? [value] : [];\r\n }\r\n\r\n if (value === null \|\| value === undefined \|\| value === '' \|\| (Array.isArray(value) && value.length === 0)) {\r\n const { [key]: _, ...rest } = this.formValues;\r\n this.formValues = rest;\r\n return;\r\n }\r\n\r\n this.formValues = {\r\n ...this.formValues,\r\n [key]: value,\r\n };\r\n }\r\n\r\n handleClearClick() {\r\n const resetValues = { ...(this.filterConfig.initialValues \|\| {}) };\r\n\r\n this.filterConfig.fields.forEach(field => {\r\n if (field.tag === 'gb-date-picker') {\r\n const keys = field.key as { start: string; end: string };\r\n resetValues[keys.start] = null;\r\n resetValues[keys.end] = null;\r\n } else {\r\n // use field.default if defined, otherwise check if the field expects an array\r\n const isArrayField = field.props?.type === 'tags' \|\| Array.isArray(field.default);\r\n resetValues[field.key as string] = field.default ?? (isArrayField ? [] : null);\r\n }\r\n });\r\n\r\n this.formValues = resetValues;\r\n this.renderKey++;\r\n this.clearFilters.emit();\r\n }\r\n\r\n handleApplyClick() {\r\n const { pageNumber, pageSize, ...filters } = this.formValues;\r\n // console.log({\r\n // filters,\r\n // pagination: {\r\n // pageNumber: pageNumber ?? 1,\r\n // pageSize: pageSize ?? 10,\r\n // },\r\n // });\r\n\r\n this.applyFilters.emit({\r\n filters,\r\n pagination: {\r\n pageNumber: pageNumber ?? 1,\r\n pageSize: pageSize ?? 10,\r\n },\r\n });\r\n }\r\n\r\n capitalize(str: string) {\r\n return str.charAt(0).toUpperCase() + str.slice(1);\r\n }\r\n\r\n emitCloseEvent() {\r\n this.close.emit();\r\n }\r\n\r\n render() {\r\n if (!this.filterConfig) {\r\n return (\r\n <div class=\"filter_modal_wrapper\">\r\n <div class=\"filter_modal_header\">\r\n <div class=\"filter_modal_content\">\r\n <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\" onClick={() => this.emitCloseEvent()}></gb-button-close>\r\n <p class=\"title display-xs-semi-bold\">Filter</p>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n \r\n return (\r\n <div class=\"filter_modal_wrapper\">\r\n <div class=\"filter_modal_header\">\r\n <div class=\"filter_modal_content\">\r\n <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\" onClick={() => this.emitCloseEvent()}></gb-button-close>\r\n <p class=\"title display-xs-semi-bold\">{this.filterConfig ? this.filterConfig.title : 'Filter'}</p>\r\n </div>\r\n </div>\r\n <div class=\"filter_content_container\">\r\n <div class=\"filter_content\" key={this.renderKey}>\r\n {/* {this.filterConfig.enableDateRange && (\r\n <div class=\"date_range\">\r\n <p class=\"label text-sm-medium\">{this.filterConfig.dateRangeLabel \|\| 'Period'}</p>\r\n <div class=\"date_pickers\">\r\n <gb-date-picker\r\n placeholder=\"dd-mm-yy\"\r\n full-width=\"true\"\r\n twentyfour-hr=\"true\"\r\n mode=\"single\"\r\n format=\"d-m-y\"\r\n show-months=\"1\"\r\n onDateChange={e => this.handleFieldChange('startDate', e)}\r\n ></gb-date-picker>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M2.5 12L21.5002 12\" stroke=\"var(--color-icon-subtle ,#697586)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <gb-date-picker\r\n placeholder=\"dd-mm-yy\"\r\n full-width=\"true\"\r\n twentyfour-hr=\"true\"\r\n mode=\"single\"\r\n format=\"d-m-y\"\r\n show-months=\"1\"\r\n dropdown-alignment=\"right\"\r\n onDateChange={e => this.handleFieldChange('endDate', e)}\r\n ></gb-date-picker>\r\n </div>\r\n </div>\r\n )} */}\r\n {this.filterConfig.fields && (\r\n <>\r\n {this.filterConfig.fields.map(field => {\r\n if (field.tag === 'gb-date-picker') {\r\n const keys = field.key as { start: string; end: string };\r\n\r\n return (\r\n <div class=\"date_range\">\r\n <p class=\"label text-sm-medium\">{field.label}</p>\r\n <div class=\"date_pickers\">\r\n <gb-date-picker\r\n placeholder=\"dd-mm-yy\"\r\n full-width=\"true\"\r\n mode=\"single\"\r\n format=\"d-m-y\"\r\n show-months=\"1\"\r\n value={this.formValues[keys.start]}\r\n onDateChange={e => this.handleFieldChange(keys.start, e)}\r\n ></gb-date-picker>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M2.5 12L21.5002 12\" stroke=\"var(--color-icon-subtle, #697586)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <gb-date-picker\r\n placeholder=\"dd-mm-yy\"\r\n full-width=\"true\"\r\n mode=\"single\"\r\n format=\"d-m-y\"\r\n show-months=\"1\"\r\n dropdown-alignment=\"right\"\r\n value={this.formValues[keys.end]}\r\n onDateChange={e => this.handleFieldChange(keys.end, e)}\r\n ></gb-date-picker>\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n const Tag = field.tag;\r\n const key = field.key as string;\r\n const currentValue = this.formValues[key];\r\n const valueProp =\r\n currentValue != null\r\n ? field.tag === 'gb-slider'\r\n ? { leftControl: currentValue.left, rightControl: currentValue.right }\r\n : field.tag === 'gb-input-dropdown'\r\n ? { value: Array.isArray(currentValue) ? currentValue : [currentValue] } // ← coerce here\r\n : { value: currentValue }\r\n : {};\r\n\r\n const eventHandler = {\r\n [`on${this.capitalize(field.event as string)}`]: (e: CustomEvent) => this.handleFieldChange(key, e.detail),\r\n };\r\n\r\n return (\r\n <div class=\"field\">\r\n <Tag {...field.props} {...valueProp} {...eventHandler} />\r\n </div>\r\n );\r\n })}\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n <div class=\"filter_modal_actions\">\r\n <div class=\"modal_actions_content\">\r\n <div class=\"btn\">\r\n <gb-button size=\"xl\" hierarchy=\"secondary_gray\" icon=\"default\" onClick={() => this.handleClearClick()}>\r\n <p>Clear filter</p>\r\n </gb-button>\r\n </div>\r\n <div class=\"btn\">\r\n <gb-button size=\"xl\" hierarchy=\"primary\" icon=\"default\" onClick={() => this.handleApplyClick()}>\r\n <p>Apply</p>\r\n </gb-button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/gb-header/gb-header.js CHANGED Viewed

@@ -194,10 +194,10 @@ export class GbHeader {
         const helpIconSrc = getAssetPath(`assets/help-circle.svg`);
         const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);
         const searchIconSrc = getAssetPath(`assets/search-01.svg`);
-        return (h("div", { key: 'bf46da7ad20335c12657e0fbdd69234507a1bbfa', class: `header_div ${this.showBorder ? 'border' : ''}` }, h("div", { key: 'e742740bea230b657a2be5e7cecf4c8e2c6b1d2b', class: {
+        return (h("div", { key: '188731e738131dd17503e19f151990710b4902fd', class: `header_div ${this.showBorder ? 'border' : ''}` }, h("div", { key: '3c7ac88798935a8865b5489b1423d115b6b69ae2', class: {
                 'full_search_bar_wrapper': true,
                 'is-hidden': !(this.width < 710 && this.searchBarShown),
-            } }, h("gb-button-close", { key: '07baee44d4e50738daf01887936da0a110f350f3', color: "gray", size: "md", onClick: () => this.showAndHideFullSearcBar() }), h("div", { key: 'baeb7d4548c0b37dae50770c532a27463e1bcaac', class: "full_search_bar" }, h("gb-input-field", { key: 'a30028c8c030e42997db175eaca62c4c1b28276a', size: "sm", state: "default", type: "icon_leading", "enable-cancel-button-function": true, placeholder: this.inputPlaceholder, "icon-swap": this.inputIcon, onInputValueChanged: this.onSearch.bind(this) }))), !this.searchBarShown && (h("div", { key: '9dc2a1dedac5d29420f55d441b5f8b6d73f972a3', class: "content" }, this.showLogo && this.renderLogo(), h("div", { key: 'c4da1cc9ceaa4941f6f66e204ab0b006c2c3567b', class: "inner_content" }, h("div", { key: '2ee9870b7093e7549ed863b8447e244627fe629b', class: `action` }, this.showSearch && this.width > 710 && (h("div", { key: '3e06b3e76f638e9aea46b67c63054cd321366bb2', class: "search" }, h("gb-input-field", { key: '4c07313ccd72999802129f82e9aee61b5c611a6f', size: "sm", state: "default", type: "icon_leading", "enable-cancel-button-function": true, placeholder: this.inputPlaceholder, "icon-swap": this.inputIcon, onInputValueChanged: this.onSearch.bind(this) }))), this.width < 710 && (h("div", { key: '9475ddf4cf9641ad5d3216d92fccce9af0698b99', class: "help" }, h("gb-header-icon", { key: 'fe6e2849deaf1bc731cab4d6ac59c9df6be8953c', state: StateEnum.Default, icon: searchIconSrc, class: "help_button", onClick: () => this.showAndHideFullSearcBar() }))), this.showHelp && (h("div", { key: '3a3d464e6c7f06cc79964684544c9fb3c276db0a', class: "help" }, h("gb-header-icon", { key: '4d5bce8887f79d294def92403734ecb95f73f40a', state: StateEnum.Default, icon: helpIconSrc, onClick: () => this.toggleDropdown('help'), class: "help_button" }), this.activeDropdown === 'help' && (h(Fragment, null, this.contactHelpDropdown ? (h("gb-contact-help-dropdown", { class: `contact_help_dropdown`, items: this.contactHelpDropdownItems })) : (h("gb-help-dropdown", { class: "help_dropdown", "show-log-error": this.showLogError, onHelpItemClicked: this.helpDropdownItemClicked.bind(this) })))))), this.showNotification && (h("div", { key: '1a7cd81dc844380036538617b2e75fefedbb6164', class: "notification" }, h("gb-header-icon", { key: 'd5a5c9ed79f8bf2151a6cbbea88bfe907978cd4b', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator, onClick: () => this.toggleDropdown('notifications') }), this.activeDropdown === 'notifications' && (h("gb-notification-pane", { key: 'e7ce6acba3a237e9e3d7208b768428e0dde306d1', state: this.notificationState, class: "notification_dropdown", notifications: this.notifications }, h("p", { key: 'a8a2439b31cb26c960742aa9a7f16d6f21fe7134', slot: "label" }, "No notification"), h("p", { key: 'a3045913b42ffe7cad32189106c496c81902e19d', slot: "supporting_text" }, "Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events")))))), h("gb-avatar", { key: '8f64905e692d43d83d102b31bbea86618970501c', size: "md", text: this.text, placeholder: this.placeholder, color: this.color, onClick: () => this.toggleDropdown('avatar') }, this.text ? h("slot", { slot: "initials", name: "initials" }) : h("slot", { name: "image", slot: "image" })), this.activeDropdown === 'avatar' && (h("gb-avatar-dropdown", { key: '12d317a3eff1c4b2038787d0d02997275eaaedc5', ref: el => (this.avatarDropdown = el), class: "avatar_dropdown", type: this.avatarDropdownType, "show-theme-tab": this.showThemeTab, "show-profile": this.showProfile, "show-log-out": this.showLogOut, listGroupOne: this.listGroupOne, listGroupTwo: this.listGroupTwo, color: this.color, roles: this.roles, "show-roles": this.showRoles, "current-theme": this.currentTheme, onThemeTabClicked: this.onThemeTabClicked.bind(this), onItemClicked: this.onAvatarDropdownItemClicked.bind(this) }, h("slot", { key: 'fdace498ef0a87639b5d88f7f5e83c82c85287e2', slot: "name", name: "name" }), h("slot", { key: '6ccf06d6f836564a56ea9d38d0b99fd2e39685e0', slot: "supporting_text", name: "supporting_text" }), h("h1", { key: 'be0bdb38db17c3d9784f5c97df3cb4f32d470f67', slot: "initials", class: `text-md-semi-bold` }, this.initials))))))));
+            } }, h("gb-button-close", { key: '54f88d8c5470af62ee925437d27b5de82a7cadc8', color: "gray", size: "md", onClick: () => this.showAndHideFullSearcBar() }), h("div", { key: 'e79398ff56c5325d451e4dbecc9f0a9d0834552b', class: "full_search_bar" }, h("gb-input-field", { key: '1f31314e76629dfb09e985106435b00645c53bf3', size: "sm", state: "default", type: "icon_leading", "enable-cancel-button-function": true, placeholder: this.inputPlaceholder, "icon-swap": this.inputIcon, onInputValueChanged: this.onSearch.bind(this) }))), !this.searchBarShown && (h("div", { key: '860eb6f859c9d4e76b5e104837a0b1031f07b74a', class: "content" }, this.showLogo && this.renderLogo(), h("div", { key: '660ef891e011293f9194283483a48ad26418b000', class: "inner_content" }, h("div", { key: 'a889405d67ff72aad2edb46fa33e10a097abe1a0', class: `action` }, this.showSearch && this.width > 710 && (h("div", { key: 'd28421baeb47ce0bd1916c8e24119cddfbfb1042', class: "search" }, h("gb-input-field", { key: '105e0ca465a534e05a3aea82c213796f2c4da459', size: "sm", state: "default", type: "icon_leading", "enable-cancel-button-function": true, placeholder: this.inputPlaceholder, "icon-swap": this.inputIcon, onInputValueChanged: this.onSearch.bind(this) }))), this.width < 710 && (h("div", { key: 'e203d631d0ec38b2ad0dc3dab2bdac377e25d749', class: "help" }, h("gb-header-icon", { key: 'f4f0501ea9d50ac3c8b38eed39a7fcfc2ae06b4d', state: StateEnum.Default, icon: searchIconSrc, class: "help_button", onClick: () => this.showAndHideFullSearcBar() }))), this.showHelp && (h("div", { key: '9fd43d23e538ac3b97b014e9ed02695f63fbc52d', class: "help" }, h("gb-header-icon", { key: 'be1d3da2d27700fd2617d2add388a0f7207b3dda', state: StateEnum.Default, icon: helpIconSrc, onClick: () => this.toggleDropdown('help'), class: "help_button" }), this.activeDropdown === 'help' && (h(Fragment, null, this.contactHelpDropdown ? (h("gb-contact-help-dropdown", { class: `contact_help_dropdown`, items: this.contactHelpDropdownItems })) : (h("gb-help-dropdown", { class: "help_dropdown", "show-log-error": this.showLogError, onHelpItemClicked: this.helpDropdownItemClicked.bind(this) })))))), this.showNotification && (h("div", { key: '8fbf80032248f70444d36ae905e065e6aa9adf8f', class: "notification" }, h("gb-header-icon", { key: '1d48fe9a660315c6bf6b964a907449fde179bc50', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator, onClick: () => this.toggleDropdown('notifications') }), this.activeDropdown === 'notifications' && (h("gb-notification-pane", { key: '6edc090e0c09744be5d7da794a9ee693ec3031c1', state: this.notificationState, class: "notification_dropdown", notifications: this.notifications }, h("p", { key: 'c965458f83edd8dcf64a99e6118bcfe1edf16914', slot: "label" }, "No notification"), h("p", { key: '066851f1d9c3ae97cbdf1739834a18f74095cad8', slot: "supporting_text" }, "Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events")))))), h("gb-avatar", { key: 'cb4dd972b6bbbaeae756d69306847d9e386ed335', size: "md", text: this.text, placeholder: this.placeholder, color: this.color, onClick: () => this.toggleDropdown('avatar') }, this.text ? h("slot", { slot: "initials", name: "initials" }) : h("slot", { name: "image", slot: "image" })), this.activeDropdown === 'avatar' && (h("gb-avatar-dropdown", { key: '7d568832dd7c6b9b80c1ade8201336b91f01a5ad', ref: el => (this.avatarDropdown = el), class: "avatar_dropdown", type: this.avatarDropdownType, "show-theme-tab": this.showThemeTab, "show-profile": this.showProfile, "show-log-out": this.showLogOut, listGroupOne: this.listGroupOne, listGroupTwo: this.listGroupTwo, color: this.color, roles: this.roles, "show-roles": this.showRoles, "current-theme": this.currentTheme, onThemeTabClicked: this.onThemeTabClicked.bind(this), onItemClicked: this.onAvatarDropdownItemClicked.bind(this) }, h("slot", { key: '9ed3ac3471fb070e3f6e76e086001a6c6466f46c', slot: "name", name: "name" }), h("slot", { key: 'dd551e3bb6cdc7402638f0f35e313b2dc5a97233', slot: "supporting_text", name: "supporting_text" }), h("h1", { key: '263affaa38f8311e8feee6e181002aa44d1144b1', slot: "initials", class: `text-md-semi-bold` }, this.initials))))))));
     }
     static get is() { return "gb-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-header-icon/gb-header-icon.js CHANGED Viewed

@@ -27,7 +27,7 @@ export class GbHeaderIcon {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: 'c2b35b94959a73bb8efd23fd35a9d2d8420f52d1', class: `background ${this.state}` }, h("div", { key: '7470944f7aa79113951f0908e5325521406aa5de', class: `icon ${this.state === StateEnum.Default ? 'default' : this.state === StateEnum.Disabled ? 'disabled' : ''}`, innerHTML: this.leadingIconSvg }), h(Fragment, null, this.showIndicator && h("div", { key: 'd69db92c26d5148915b75d6b3c9e16e98a923f85', class: "red_dot" }))));
+        return (h("div", { key: 'cac4c8d28b52de6220b82c6006fc885f2f64b4f9', class: `background ${this.state}` }, h("div", { key: '0f1ef56ff054b32ba18a95f5c0bf90d314c86d30', class: `icon ${this.state === StateEnum.Default ? 'default' : this.state === StateEnum.Disabled ? 'disabled' : ''}`, innerHTML: this.leadingIconSvg }), h(Fragment, null, this.showIndicator && h("div", { key: '753b40b0644eda7324bb3a8c53f983e959334c15', class: "red_dot" }))));
     }
     static get is() { return "gb-header-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-help-dropdown/gb-help-dropdown.js CHANGED Viewed

@@ -4,7 +4,7 @@ export class GbHelpDropdown {
         this.helpItemClicked.emit(item);
     }
     render() {
-        return (h("div", { key: '61337f91c01ac8f4d4a907cee175a7aa759d2141', class: "dropdown-container" }, h("div", { key: '23cc4a416e7b557fe0d69ff464de2904e102d99b', class: "user_guide" }, h("gb-dropdown-items-with-shortcut", { key: '89be013685b38b598100f356d475b0efa6f941ae', icon: true, iconSrc: "assets/book_open.svg", label: "Download user guide", onClick: () => this.onHelpItemClicked('download_user_guide') })), h("div", { key: 'f5c50f12bc0992a6906adfe56cb9abb2270e1e25', class: "bug" }, h("gb-dropdown-items-with-shortcut", { key: '8223227b3f3b303de0274886d5cfde33fb7b2c55', icon: true, iconSrc: "assets/bug_02.svg", label: "Report a bug", onClick: () => this.onHelpItemClicked('report_a_bug') })), this.showLogError && (h("div", { key: 'c1af32fcd03a3c75c53061e5933d42b3b88aa3fb', class: "log_error" }, h("gb-dropdown-items-with-shortcut", { key: '9491dd497acfa5326a47a2e5a3d42886bfb7bdf6', icon: true, iconSrc: "assets/alert_02.svg", label: "Log a profile error", onClick: () => this.onHelpItemClicked('log_a_profile_error') })))));
+        return (h("div", { key: '2f6820934e0d418e95afc0debe1a009ef9f73954', class: "dropdown-container" }, h("div", { key: '1aedbef5138d6c429778db6086eb85f2b48b4442', class: "user_guide" }, h("gb-dropdown-items-with-shortcut", { key: '28333dec60835aa904385c7bfe0dfeb7088e41e9', icon: true, iconSrc: "assets/book_open.svg", label: "Download user guide", onClick: () => this.onHelpItemClicked('download_user_guide') })), h("div", { key: '8a6530f934fe6d0218a58b4808c31a6326f35559', class: "bug" }, h("gb-dropdown-items-with-shortcut", { key: 'f7e84ffe8739aefed53926ec238ea1c598e6aa50', icon: true, iconSrc: "assets/bug_02.svg", label: "Report a bug", onClick: () => this.onHelpItemClicked('report_a_bug') })), this.showLogError && (h("div", { key: '763c8ca455b2d14582c385a64bcbb861241454b4', class: "log_error" }, h("gb-dropdown-items-with-shortcut", { key: '20b8cc77863e81c28e00c821f278e263876494c8', icon: true, iconSrc: "assets/alert_02.svg", label: "Log a profile error", onClick: () => this.onHelpItemClicked('log_a_profile_error') })))));
     }
     static get is() { return "gb-help-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-help-tooltip/gb-help-tooltip.js CHANGED Viewed

@@ -16,7 +16,7 @@ export class GbHelpTooltip {
         }
     }
     render() {
-        return (h("div", { key: 'ab285a5e74a94ed2857f6bf25506b751a4dbacf9', class: `help_tooltip` }, h("svg", { key: 'a7654f8cee7235fa8c037ad88e6eede6ed9b0e21', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", onMouseEnter: () => (this.showHelpTooltip = true), onMouseLeave: () => (this.showHelpTooltip = false), class: "help_circle" }, h("path", { key: 'fc6b2335f357a68293fe3146e4c461e0ebe87ab2', d: "M6.66659 6C6.66659 5.26362 7.26354 4.66666 7.99992 4.66666C8.7363 4.66666 9.33325 5.26362 9.33325 6C9.33325 6.26543 9.25569 6.51275 9.12199 6.72052C8.72352 7.33978 7.99992 7.93028 7.99992 8.66666V9M7.99458 11.3333H8.00057M14.6666 8C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8C1.33325 4.3181 4.31802 1.33333 7.99992 1.33333C11.6818 1.33333 14.6666 4.3181 14.6666 8Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), this.showHelpTooltip && (h("gb-tooltip", { key: 'dbf88b7dac6ca0337afd2c140d53cbf23fcc81c0', "show-arrow": true, arrow: "bottom_right", "show-supporting-text": this.showSupportingText, class: "tooltip" }, h("slot", { key: 'e3cc5b24c7586fef84522dd95b381d9115f4e434', name: "label", slot: "label" }), h("slot", { key: '57620e1b9df8a6c6f5df2f68c25ddd9044c71593', name: "supporting_text", slot: "supporting_text" })))));
+        return (h("div", { key: '96617a0a9032e4c95285a57912ed59a7aa7dd740', class: `help_tooltip` }, h("svg", { key: '56a08247ea661ddc32c0687a950b0117f887eeb3', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", onMouseEnter: () => (this.showHelpTooltip = true), onMouseLeave: () => (this.showHelpTooltip = false), class: "help_circle" }, h("path", { key: '5f1c96992a24eab090345e7fce919b9e2ad8bd3f', d: "M6.66659 6C6.66659 5.26362 7.26354 4.66666 7.99992 4.66666C8.7363 4.66666 9.33325 5.26362 9.33325 6C9.33325 6.26543 9.25569 6.51275 9.12199 6.72052C8.72352 7.33978 7.99992 7.93028 7.99992 8.66666V9M7.99458 11.3333H8.00057M14.6666 8C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8C1.33325 4.3181 4.31802 1.33333 7.99992 1.33333C11.6818 1.33333 14.6666 4.3181 14.6666 8Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), this.showHelpTooltip && (h("gb-tooltip", { key: 'd074f07b825142485cd9cfde6b57087056c84b27', "show-arrow": true, arrow: "bottom_right", "show-supporting-text": this.showSupportingText, class: "tooltip" }, h("slot", { key: 'bb906254c334a7b6aad2a157947fabb295ad1c3b', name: "label", slot: "label" }), h("slot", { key: '0cf0b21b9391848b50b29ea92351a274475a6cb5', name: "supporting_text", slot: "supporting_text" })))));
     }
     static get is() { return "gb-help-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.js CHANGED Viewed

@@ -203,7 +203,7 @@ export class GbHorizontalTabs {
         this.tabItemClicked.emit(index);
     }
     render() {
-        return (h("div", { key: '4aff83589e8f2c9173f74ee9f5cba31e3c5c930c', class: `horizontal_tab_div_wrapper ${this.type}` }, this.showLeftButton && (h("div", { key: 'b8997f9bd2e2777fea6dc80920a0f595324a54a1', class: "scroll_button_div left" }, h("div", { key: '8cd875d42796f4cfe202b39f83f26c325b7661cf', class: "scroll_button", onClick: () => this.scrollLeft() }, h("svg", { key: 'b5ef036e57df70f4f2cd410b13c885ffddb673d0', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '7f8583eefef4544e5d7317f433574c3fa1cb82c5', d: "M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: '7184dd6a5883cc048fe53bb89a5916a4062c05b5', class: "horizontal_tab_wrapper", ref: el => (this.tabContainer = el), onScroll: () => this.handleScroll(), onTouchStart: e => this.handleTouchStart(e), onTouchEnd: e => this.handleTouchEnd(e), onMouseDown: e => this.handleMouseDown(e), onMouseUp: e => this.handleMouseUp(e), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: '278defd9b4c32b8fcd30ea4759badcb3f45b3261', class: `horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}` }, this.internalTabs.map((tab, index) => (h("gb-tab-button-base", { class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(index), current: this.internalActiveIndex === index, "tab-name": tab.name, badge: this.badge, alignment: "horizontal" }, h("p", { slot: "count" }, tab.badgeCount)))))), this.showRightButton && (h("div", { key: '56ad6b14189e5b13393f1df415b1f4d13c8b0f5c', class: "scroll_button_div right" }, h("div", { key: '7dee4281b68809bd2670e079fbe03a4343bba78e', class: "scroll_button", onClick: () => this.scrollRight() }, h("svg", { key: '1618181859db054c37f323af2c7910e92af4a72a', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'b6f80ecb308ff34df81ccff50dc08861eda8451c', d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (h("div", { key: 'b59dce87b168230fa7f7ecf7790d1801ef35fb31', class: `horizontal_tab_div_wrapper ${this.type}` }, this.showLeftButton && (h("div", { key: 'ac3d6d7c19877b4d53bd8d677f041e8a04956cc8', class: "scroll_button_div left" }, h("div", { key: '4b26a72528e3f8f1cc0e8d48a6442067e6023cad', class: "scroll_button", onClick: () => this.scrollLeft() }, h("svg", { key: '092e52a9fbf6e061513cc81024a3ff80ee9e5cca', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '51e2c974734f8c5e2fa0bb2cbf43006bfafc4e7f', d: "M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: '6b5885b053d2a2cde46c2060a933b461dc6b1a32', class: "horizontal_tab_wrapper", ref: el => (this.tabContainer = el), onScroll: () => this.handleScroll(), onTouchStart: e => this.handleTouchStart(e), onTouchEnd: e => this.handleTouchEnd(e), onMouseDown: e => this.handleMouseDown(e), onMouseUp: e => this.handleMouseUp(e), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: '6c540e0bfed3d5b0ce564bb99e7bf052548eda2c', class: `horizontal_tab_div ${this.type} ${this.fullWidth ? 'full_width' : ''}` }, this.internalTabs.map((tab, index) => (h("gb-tab-button-base", { class: `tab_button_base ${this.fullWidth ? 'full_width' : ''}`, size: this.size, "full-width": this.fullWidth, type: this.type === 'button_white_border' ? 'button_white' : this.type === 'rounded_button_white_border' ? 'rounded_button_white' : this.type, onClick: () => this.handleTabClick(index), current: this.internalActiveIndex === index, "tab-name": tab.name, badge: this.badge, alignment: "horizontal" }, h("p", { slot: "count" }, tab.badgeCount)))))), this.showRightButton && (h("div", { key: '26d2b1afb3276754547b0621017e23be77bc7589', class: "scroll_button_div right" }, h("div", { key: '540664c0cadb617ef43622a66c9e0e868915dd01', class: "scroll_button", onClick: () => this.scrollRight() }, h("svg", { key: '56b37d27ef790aaaab2ae63237f1f23780f08841', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '14e4925a41de7e7d9959a089144cec6b2afa80e7', d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "var(--color-icon, #4B5565)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
     }
     static get is() { return "gb-horizontal-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-icon-button-base/gb-icon-button-base.js CHANGED Viewed

@@ -17,7 +17,7 @@ export class GbIconButtonBase {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: '3e7e5ab6f46220fc930d19a9dbc30b4ab8fa3968', class: "icon_button_base_container" }, this.showTooltip && (h("gb-tooltip", { key: '920942d655a793c893a06078407a92e51ae43743', "show-arrow": true, arrow: "bottom_center", class: "tooltip" }, h("p", { key: '909c328de8f6219490a57c687022ecb85a8d8f78', slot: "label" }, this.label))), h("div", { key: '5c0078013c0cdef3b0142b0d548112bc53cb942d', class: `icon_button_base_div ${this.current ? 'current' : ''}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '9afa84ae064c2ff7c4da21b8b96ef891b8c7052a', class: `icon ${this.current ? 'current' : ''}`, innerHTML: this.leadingIconSvg }))));
+        return (h("div", { key: 'a2f2d03df704b2e8634c536b1fa2deb119631333', class: "icon_button_base_container" }, this.showTooltip && (h("gb-tooltip", { key: '3378dd42fcf9367f6c6dbdcdb99274904138d67a', "show-arrow": true, arrow: "bottom_center", class: "tooltip" }, h("p", { key: 'f50ef02976882a77b4dc82d5028f395f64006925', slot: "label" }, this.label))), h("div", { key: 'd48037e20e49bf67959709cec093eab361b8d2fc', class: `icon_button_base_div ${this.current ? 'current' : ''}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '6b609d6376a0a11b26014a926a51933b2c6b95e6', class: `icon ${this.current ? 'current' : ''}`, innerHTML: this.leadingIconSvg }))));
     }
     static get is() { return "gb-icon-button-base"; }
     static get encapsulation() { return "shadow"; }