npm - globuswebcomponents - Versions diffs - 1.8.5 → 1.8.7 - Mend

globuswebcomponents 1.8.5 → 1.8.7

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

package/dist/collection/components/gb-tag-count/gb-tag-count.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class GbTagCount {
     render() {
-        return (h("div", { key: 'e0441a604b3e771bcff7e950156ea3e7d9209e13', class: this.size }, h("slot", { key: 'abcfe7965bbd74b2218b399cd2f3927bdd1503d4', name: "count" })));
+        return (h("div", { key: 'ec39f1556bd8bcbd48478cb2090947b91f6c4f6f', class: this.size }, h("slot", { key: '76284995f184a77f0bdd96b3ba0657c490e67d8c', name: "count" })));
     }
     static get is() { return "gb-tag-count"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-textarea-input-field/gb-textarea-input-field.js CHANGED Viewed

@@ -39,11 +39,13 @@ export class GbTextareaInputField {
         this.unselectedItems = [];
         this.minWidth = 10;
     }
-    componentDidLoad() {
+    connectedCallback() {
         if (this.type === 'tags') {
             document.addEventListener('click', this.handleClickOutside);
             this.inputElement.addEventListener('input', this.handleTagInput.bind(this));
         }
+    }
+    componentDidLoad() {
         this.updateInputWidth();
     }
     componentWillLoad() {
@@ -184,14 +186,14 @@ export class GbTextareaInputField {
         }
     }
     render() {
-        return (h("div", { key: '52852d0583bdea3ca2fe2cf730fe950ff981bd9d', class: "textarea_container" }, h("div", { key: '5715bb213617008e7f61dcbea39fd63f7949c90d', class: "input_with_label" }, this.showLabel && h("p", { key: '765699708651311487eee04a0e5100462a98e059', class: `label text-sm-medium` }, this.label), this.type === 'default' && (h("textarea", { key: '959e15bbc0ea429c6692aefd2b3c68da19123ea8', ref: el => (this.textarea = el), onInput: () => this.handleInput(), class: `textarea default_textarea ${this.state} ${this.destructive ? 'destructive' : ''}`, placeholder: this.placeholderText, value: this.inputValue })), this.type === 'tags' && (h("div", { key: '8a5b0b970ce9b924b89624b9da31d26e1b09de64', class: "textarea_tags" }, h("div", { key: 'd196d62bdfbdcd5c37912ae8c63e1452cad36ad5', class: `textarea ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}`, onClick: () => this.handleWrapperClick() }, h("div", { key: '594cd26cdea4e44db888f7302b5e845225daeb51', class: `results_display ${this.state === 'disabled' ? 'disabled' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => (h(Fragment, null, typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item.objectName.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.objectName
+        return (h("div", { key: '8e3514e36d53b2d4f712ee562d3b3aa773440c8d', class: "textarea_container" }, h("div", { key: '087c5f93d2251606a4484d3bead233a05b61fd3c', class: "input_with_label" }, this.showLabel && h("p", { key: '8998821f0032dc1efba7c50d0089f59077ef182e', class: `label text-sm-medium` }, this.label), this.type === 'default' && (h("textarea", { key: '553b5c4797ce497b677f9e2317bc3ef5511afd20', ref: el => (this.textarea = el), onInput: () => this.handleInput(), class: `textarea default_textarea ${this.state} ${this.destructive ? 'destructive' : ''}`, placeholder: this.placeholderText, value: this.inputValue })), this.type === 'tags' && (h("div", { key: '7532a0cc4fff013a34116585aa480e4f6679cb8b', class: "textarea_tags" }, h("div", { key: '6469f3af3eb8c192a910aa2eae1a979321c48d7e', class: `textarea ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}`, onClick: () => this.handleWrapperClick() }, h("div", { key: 'aa72a2a71786fff967313b46cdea7935eebd964e', class: `results_display ${this.state === 'disabled' ? 'disabled' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => (h(Fragment, null, typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item.objectName.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.objectName
             .split(' ')
             .map(part => part.charAt(0).toUpperCase())
-            .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item))))))))) : (h(Fragment, null, this.value.map((val, index) => (h(Fragment, null, typeof val === 'object' ? (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("h1", { class: "text-xxs-semi-bold", slot: "initials" }, val.objectName.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, val.objectName.split(' ')[0]))) : (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("p", null, val)))))))), h("span", { key: 'a447de90a03f26986166be352227d946d38ff151', class: "hidden-span", ref: el => (this.hiddenSpan = el) }, this.inputValue || '  '), h("div", { key: 'ac59b21b6ee3ef2ed52d07a5db5f589a800285be', class: "input_field" }, h("input", { key: 'b861a891b4979fa7793259d7802318c7fc094ba9', id: this.idOfInput, class: `input_like text-md-regular ${this.state}`, type: "text",
+            .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(index) }, h("p", { class: "text-xs-medium" }, item))))))))) : (h(Fragment, null, this.value.map((val, index) => (h(Fragment, null, typeof val === 'object' ? (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("h1", { class: "text-xxs-semi-bold", slot: "initials" }, val.objectName.split(' ').map(part => part.charAt(0).toUpperCase())), h("p", null, val.objectName.split(' ')[0]))) : (h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.handleTagRemove(index), key: index }, h("p", null, val)))))))), h("span", { key: '8d3ec256702aff3318545715620c91aef4cd9977', class: "hidden-span", ref: el => (this.hiddenSpan = el) }, this.inputValue || '  '), h("div", { key: '023b4026e39e3c4928a2cd9eb961d3a2cda526eb', class: "input_field" }, h("input", { key: '524ab6605860a80e31b12e5a742951472bfdbac7', id: this.idOfInput, class: `input_like text-md-regular ${this.state}`, type: "text",
             // placeholder={this.placeholderText}
-            value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.emitInputValue() }))), this.destructive && (h("div", { key: 'f6319558871f272bfdced89f2a6ef7717a15c13b', class: "help_icon" }, h("svg", { key: '7cb2151bd999892afef015da5ecd8f463de3ee31', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'ff183d51790547d6b3281443e6028e4520e13916', d: "M7.9947 10H8.00069M8.00004 8.00004V5.33337M14.6667 8.00004C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00004C1.33337 4.31814 4.31814 1.33337 8.00004 1.33337C11.6819 1.33337 14.6667 4.31814 14.6667 8.00004Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.show && (h("div", { key: 'a133964b272ade0f93bf5d9ba184b64313c3e045', class: `dropdown_menu` }, this.results.map(item => (h("gb-input-dropdown-menu-item", { type: "checkbox", "supporting-text": true, state: StateEnum.Default, onClick: () => this.selectDropdownItem(item), selected: this.isTagItemSelected(item) }, typeof item === 'object'
+            value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.emitInputValue() }))), this.destructive && (h("div", { key: 'b85bdfb6a6b35c352f39ed18ea7c8bfa7815e1c1', class: "help_icon" }, h("svg", { key: '6d683775e8a6fd376909035d9040522a19dd372f', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '4bfb9031f35c01c3f5b6540207156e3e669398d8', d: "M7.9947 10H8.00069M8.00004 8.00004V5.33337M14.6667 8.00004C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00004C1.33337 4.31814 4.31814 1.33337 8.00004 1.33337C11.6819 1.33337 14.6667 4.31814 14.6667 8.00004Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.show && (h("div", { key: '89225aefbef35dd390cb58f06b7f63d95f50d18c', class: `dropdown_menu` }, this.results.map(item => (h("gb-input-dropdown-menu-item", { type: "checkbox", "supporting-text": true, state: StateEnum.Default, onClick: () => this.selectDropdownItem(item), selected: this.isTagItemSelected(item) }, typeof item === 'object'
             ? [h("p", { slot: "name" }, item.objectName), h("p", { slot: "supporting_text" }, item.objectValue)]
-            : typeof item !== 'object' && h("p", { slot: "name" }, item))))))))), this.showHintText && h("p", { key: 'e026ba987c4e31485be21383db4b6525295b2858', class: `hint_text text-sm-regular ${this.destructive ? 'destructive' : ''}` }, this.hintText)));
+            : typeof item !== 'object' && h("p", { slot: "name" }, item))))))))), this.showHintText && h("p", { key: 'bd297f5c9955d9f12b805d457eff2c76b9392ffa', class: `hint_text text-sm-regular ${this.destructive ? 'destructive' : ''}` }, this.hintText)));
     }
     static get is() { return "gb-textarea-input-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-textarea-input-field/gb-textarea-input-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gb-textarea-input-field.js","sourceRoot":"","sources":["../../../src/components/gb-textarea-input-field/gb-textarea-input-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, State, h, Fragment, Event, EventEmitter, Listen, Watch } from '@stencil/core';\r\nimport { StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-textarea-input-field',\r\n styleUrl: 'gb-textarea-input-field.css',\r\n shadow: true,\r\n})\r\nexport class GbTextareaInputField {\r\n @Prop() type: 'default' \| 'tags';\r\n @Prop({ mutable: true }) state: 'default' \| 'filled' \| 'active' \| 'disabled';\r\n @Prop() destructive: boolean = false;\r\n @Prop() placeholderText: string = '';\r\n @Prop() showLabel: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() showHintText: boolean = false;\r\n @Prop() hintText: string = '';\r\n @Prop({ reflect: true }) idOfInput!: string;\r\n @Prop({ reflect: true }) isReadOnly: boolean = false;\r\n @Prop({ mutable: true }) value: any = [\r\n // { objectName: 'John Doe', objectValue: 'john.doe@example.com' },\r\n // { objectName: 'Jane Smith', objectValue: 'jane.smith@example.com' },\r\n // { objectName: 'Alice Johnson', objectValue: 'alice.johnson@example.com' },\r\n // { objectName: 'Emmanuel Kadiri', objectValue: 'kadiri2047@gmail.com' },\r\n // { objectName: 'Gideon Ogunkola', objectValue: 'gideon@example.com' },\r\n ];\r\n @Prop() icon: 'country' \| 'avatar' \| 'dot' \| 'false';\r\n @Prop({ mutable: true }) results: any[] = [\r\n // { objectName: 'John Doe', objectValue: 'john.doe@example.com' },\r\n // { objectName: 'Jane Smith', objectValue: 'jane.smith@example.com' },\r\n // { objectName: 'Alice Johnson', objectValue: 'alice.johnson@example.com' },\r\n // { objectName: 'Emmanuel Kadiri', objectValue: 'kadiri2047@gmail.com' },\r\n // { objectName: 'Gideon Ogunkola', objectValue: 'gideon@example.com' },\r\n // 10,\r\n // 20,\r\n // 30,\r\n // 40,\r\n // 50,\r\n ];\r\n @Element() el: HTMLElement;\r\n @State() content: string = '';\r\n @State() inputValue: string = '';\r\n @State() selectedStaff: any[] = [];\r\n @State() paddingLeft: string = '1rem';\r\n @State() paddingTop: string = '0rem';\r\n @State() show: boolean = false;\r\n @State() staffInfo: any[] = [];\r\n @State() selectedItems: any[] = [];\r\n @State() unselectedItems: any[] = [];\r\n @Event() textareaValueChanged: EventEmitter<any>;\r\n\r\n private textarea!: HTMLTextAreaElement;\r\n inputElement!: HTMLInputElement;\r\n resultsDisplayElement!: HTMLDivElement;\r\n private hiddenSpan: HTMLElement;\r\n private minWidth: number = 10;\r\n\r\n componentDidLoad() {\r\n if (this.type === 'tags') {\r\n document.addEventListener('click', this.handleClickOutside);\r\n this.inputElement.addEventListener('input', this.handleTagInput.bind(this));\r\n }\r\n\r\n this.updateInputWidth();\r\n }\r\n \r\n componentWillLoad() {\r\n this.updateSelectedItems(this.value);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.inputElement.removeEventListener('input', this.handleTagInput.bind(this));\r\n }\r\n\r\n handleInput() {\r\n this.textarea.style.height = 'auto'; // Reset height to calculate the new height\r\n this.textarea.style.height = `${this.textarea.scrollHeight - 22}px`; // Set the height to the scrollHeight\r\n this.textareaValueChanged.emit(this.textarea.value);\r\n }\r\n\r\n handleTagInput(event: Event) {\r\n const target = event.target as HTMLInputElement;\r\n this.inputValue = target.value; // Update the value\r\n this.textareaValueChanged.emit(this.selectedItems);\r\n\r\n if (this.inputValue.trim() === '') {\r\n this.show = false;\r\n // this.results = [];\r\n return;\r\n }\r\n\r\n // Simulate API call\r\n setTimeout(() => {\r\n // this.results = this.mockStaffSearch(this.inputValue);\r\n this.show = this.results.length > 0;\r\n }, 1000);\r\n\r\n this.updateInputWidth();\r\n }\r\n\r\n emitInputValue() {\r\n this.textareaValueChanged.emit(this.selectedItems);\r\n }\r\n\r\n handleTagRemove(index: number) {\r\n if (this.value.length > 0) {\r\n this.value = [...this.value.slice(0, index), ...this.value.slice(index + 1)];\r\n this.updateStyles();\r\n this.emitInputValue();\r\n } else {\r\n this.selectedItems = [...this.selectedItems.slice(0, index), ...this.selectedItems.slice(index + 1)];\r\n this.updateStyles();\r\n this.emitInputValue();\r\n }\r\n }\r\n\r\n updateStyles() {\r\n setTimeout(() => {\r\n if (this.resultsDisplayElement) {\r\n const resultsWidth = this.resultsDisplayElement.offsetWidth;\r\n const inputWidth = this.inputElement.offsetWidth;\r\n\r\n this.paddingLeft = this.selectedItems.length === 0 ? '1rem' : `${resultsWidth + 10}px`;\r\n\r\n this.paddingTop = this.selectedItems.length > 2 ? '1rem' : `${inputWidth + 10}px`;\r\n }\r\n });\r\n\r\n if (this.destructive) {\r\n this.destructive = false;\r\n }\r\n this.inputValue = '';\r\n }\r\n\r\n mockStaffSearch(query: string) {\r\n const mockData = this.results;\r\n\r\n return mockData.filter(staff => staff.objectName.toLowerCase().includes(query.toLowerCase()));\r\n }\r\n\r\n selectStaff(staff: any) {\r\n this.selectedStaff = [...this.selectedStaff, staff];\r\n this.inputValue = '';\r\n this.staffInfo = [];\r\n this.updateStyles();\r\n }\r\n\r\n updateInputWidth() {\r\n if (this.hiddenSpan) {\r\n const input = this.el.shadowRoot.querySelector('input') as HTMLInputElement;\r\n\r\n // Update input width based on span's width or use minimum width\r\n const calculatedWidth = Math.max(this.hiddenSpan.offsetWidth + 10, this.minWidth);\r\n input.style.width = `${calculatedWidth}px`;\r\n }\r\n }\r\n\r\n handleWrapperClick() {\r\n this.inputElement.focus(); // Focus the input field\r\n }\r\n\r\n selectDropdownItem(item: any) {\r\n if (this.value.length === 0) {\r\n const isObject = typeof item === 'object';\r\n const isSelected = this.selectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item));\r\n if (isSelected) {\r\n // Unselect item: Move it from selectedItems to unselectedItems\r\n this.selectedItems = this.selectedItems.filter(i => (isObject ? i.objectName !== item.objectName : i !== item));\r\n if (!this.unselectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item))) {\r\n this.unselectedItems = [...this.unselectedItems, item];\r\n }\r\n this.textareaValueChanged.emit(this.selectedItems);\r\n } else {\r\n // Select item: Move it from unselectedItems to selectedItems\r\n this.selectedItems = [...this.selectedItems, item];\r\n this.unselectedItems = this.unselectedItems.filter(i => (isObject ? i.objectName !== item.objectName : i !== item));\r\n this.textareaValueChanged.emit(this.selectedItems);\r\n }\r\n } else {\r\n const isObject = typeof item === 'object';\r\n const isSelected = this.selectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item));\r\n\r\n if (isSelected) {\r\n this.value = this.value.filter(i => (isObject ? i.objectName !== item.objectName : i !== item));\r\n console.log(this.value);\r\n this.textareaValueChanged.emit(this.value);\r\n } else {\r\n this.value = [...this.value, item]; // Add item to array\r\n this.textareaValueChanged.emit(this.value);\r\n }\r\n }\r\n\r\n this.updateStyles();\r\n }\r\n\r\n @Watch('value')\r\n updateSelectedItems(newValue: any[]) {\r\n if (Array.isArray(newValue) && newValue.length > 0) {\r\n this.selectedItems = [];\r\n this.unselectedItems = [];\r\n\r\n const objectValues = newValue.filter(val => typeof val === 'object' && val !== null);\r\n const primitiveValues = newValue.filter(val => typeof val !== 'object');\r\n\r\n this.selectedItems = this.results.filter(item =>\r\n typeof item === 'object' && item !== null\r\n ? objectValues.some(val => JSON.stringify(val) === JSON.stringify(item)) // Avoid object reference issues\r\n : primitiveValues.includes(item),\r\n );\r\n\r\n this.unselectedItems = this.results.filter(item =>\r\n typeof item === 'object' && item !== null ? !objectValues.some(val => JSON.stringify(val) === JSON.stringify(item)) : !primitiveValues.includes(item),\r\n );\r\n } else {\r\n this.selectedItems = [];\r\n this.unselectedItems = [...this.results];\r\n }\r\n }\r\n\r\n isTagItemSelected(item) {\r\n // return this.selectedStaff.some(i => i.name === item.name);\r\n\r\n const isObject = typeof item === 'object';\r\n return this.selectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item));\r\n }\r\n\r\n @Listen('click', { target: 'document' })\r\n handleClickOutside(event: MouseEvent) {\r\n if (this.show && !this.el.contains(event.target as Node)) {\r\n this.show = false;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"textarea_container\">\r\n <div class=\"input_with_label\">\r\n {this.showLabel && <p class={`label text-sm-medium`}>{this.label}</p>}\r\n {this.type === 'default' && (\r\n <textarea\r\n ref={el => (this.textarea = el as HTMLTextAreaElement)}\r\n onInput={() => this.handleInput()}\r\n class={`textarea default_textarea ${this.state} ${this.destructive ? 'destructive' : ''}`}\r\n placeholder={this.placeholderText}\r\n value={this.inputValue}\r\n ></textarea>\r\n )}\r\n {this.type === 'tags' && (\r\n <div class=\"textarea_tags\">\r\n <div class={`textarea ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}`} onClick={() => this.handleWrapperClick()}>\r\n <div class={`results_display ${this.state === 'disabled' ? 'disabled' : ''}`} ref={el => (this.resultsDisplayElement = el as HTMLDivElement)}>\r\n {this.value.length === 0 ? (\r\n <>\r\n {this.selectedItems.map((item, index) => (\r\n <>\r\n {typeof item === 'object' ? (\r\n <div class=\"added_tag\" key={index}>\r\n <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\" onClick={() => this.handleTagRemove(index)}>\r\n <p class=\"text-xs-medium\">{item.objectName.split(' ')[0]}</p>\r\n <h1 slot=\"initials\" class=\"text-xxs-semi-bold\">\r\n {item.objectName\r\n .split(' ')\r\n .map(part => part.charAt(0).toUpperCase())\r\n .join('')}\r\n </h1>\r\n </gb-tag>\r\n </div>\r\n ) : (\r\n <div class=\"added_tag\" key={index}>\r\n <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\" onClick={() => this.handleTagRemove(index)}>\r\n <p class=\"text-xs-medium\">{item}</p>\r\n </gb-tag>\r\n </div>\r\n )}\r\n </>\r\n ))}\r\n </>\r\n ) : (\r\n <>\r\n {this.value.map((val, index) => (\r\n <>\r\n {typeof val === 'object' ? (\r\n <gb-tag size=\"sm\" action=\"X_close\" icon={this.icon ? this.icon : 'avatar'} onClick={() => this.handleTagRemove(index)} key={index}>\r\n <h1 class=\"text-xxs-semi-bold\" slot=\"initials\">\r\n {val.objectName.split(' ').map(part => part.charAt(0).toUpperCase())}\r\n </h1>\r\n <p>{val.objectName.split(' ')[0]}</p>\r\n </gb-tag>\r\n ) : (\r\n <gb-tag size=\"sm\" action=\"X_close\" icon={this.icon ? this.icon : 'avatar'} onClick={() => this.handleTagRemove(index)} key={index}>\r\n <p>{val}</p>\r\n </gb-tag>\r\n )}\r\n </>\r\n ))}\r\n </>\r\n )}\r\n <span class=\"hidden-span\" ref={el => (this.hiddenSpan = el as HTMLElement)}>\r\n {this.inputValue \|\| ' '}\r\n </span>\r\n <div class=\"input_field\">\r\n <input\r\n id={this.idOfInput}\r\n class={`input_like text-md-regular ${this.state}`}\r\n type=\"text\"\r\n // placeholder={this.placeholderText}\r\n value={this.inputValue}\r\n readOnly={this.isReadOnly}\r\n ref={el => (this.inputElement = el as HTMLInputElement)}\r\n onBlur={() => this.emitInputValue()}\r\n />\r\n </div>\r\n </div>\r\n {this.destructive && (\r\n <div class=\"help_icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9947 10H8.00069M8.00004 8.00004V5.33337M14.6667 8.00004C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00004C1.33337 4.31814 4.31814 1.33337 8.00004 1.33337C11.6819 1.33337 14.6667 4.31814 14.6667 8.00004Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n )}\r\n </div>\r\n {this.show && (\r\n <div class={`dropdown_menu`}>\r\n {this.results.map(item => (\r\n <gb-input-dropdown-menu-item\r\n type=\"checkbox\"\r\n supporting-text={true}\r\n state={StateEnum.Default}\r\n onClick={() => this.selectDropdownItem(item)}\r\n selected={this.isTagItemSelected(item)}\r\n >\r\n {typeof item === 'object'\r\n ? [<p slot=\"name\">{item.objectName}</p>, <p slot=\"supporting_text\">{item.objectValue}</p>]\r\n : typeof item !== 'object' && <p slot=\"name\">{item}</p>}\r\n </gb-input-dropdown-menu-item>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {this.showHintText && <p class={`hint_text text-sm-regular ${this.destructive ? 'destructive' : ''}`}>{this.hintText}</p>}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"gb-textarea-input-field.js","sourceRoot":"","sources":["../../../src/components/gb-textarea-input-field/gb-textarea-input-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, State, h, Fragment, Event, EventEmitter, Listen, Watch } from '@stencil/core';\r\nimport { StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-textarea-input-field',\r\n styleUrl: 'gb-textarea-input-field.css',\r\n shadow: true,\r\n})\r\nexport class GbTextareaInputField {\r\n @Prop() type: 'default' \| 'tags';\r\n @Prop({ mutable: true }) state: 'default' \| 'filled' \| 'active' \| 'disabled';\r\n @Prop() destructive: boolean = false;\r\n @Prop() placeholderText: string = '';\r\n @Prop() showLabel: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() showHintText: boolean = false;\r\n @Prop() hintText: string = '';\r\n @Prop({ reflect: true }) idOfInput!: string;\r\n @Prop({ reflect: true }) isReadOnly: boolean = false;\r\n @Prop({ mutable: true }) value: any = [\r\n // { objectName: 'John Doe', objectValue: 'john.doe@example.com' },\r\n // { objectName: 'Jane Smith', objectValue: 'jane.smith@example.com' },\r\n // { objectName: 'Alice Johnson', objectValue: 'alice.johnson@example.com' },\r\n // { objectName: 'Emmanuel Kadiri', objectValue: 'kadiri2047@gmail.com' },\r\n // { objectName: 'Gideon Ogunkola', objectValue: 'gideon@example.com' },\r\n ];\r\n @Prop() icon: 'country' \| 'avatar' \| 'dot' \| 'false';\r\n @Prop({ mutable: true }) results: any[] = [\r\n // { objectName: 'John Doe', objectValue: 'john.doe@example.com' },\r\n // { objectName: 'Jane Smith', objectValue: 'jane.smith@example.com' },\r\n // { objectName: 'Alice Johnson', objectValue: 'alice.johnson@example.com' },\r\n // { objectName: 'Emmanuel Kadiri', objectValue: 'kadiri2047@gmail.com' },\r\n // { objectName: 'Gideon Ogunkola', objectValue: 'gideon@example.com' },\r\n // 10,\r\n // 20,\r\n // 30,\r\n // 40,\r\n // 50,\r\n ];\r\n @Element() el: HTMLElement;\r\n @State() content: string = '';\r\n @State() inputValue: string = '';\r\n @State() selectedStaff: any[] = [];\r\n @State() paddingLeft: string = '1rem';\r\n @State() paddingTop: string = '0rem';\r\n @State() show: boolean = false;\r\n @State() staffInfo: any[] = [];\r\n @State() selectedItems: any[] = [];\r\n @State() unselectedItems: any[] = [];\r\n @Event() textareaValueChanged: EventEmitter<any>;\r\n\r\n private textarea!: HTMLTextAreaElement;\r\n inputElement!: HTMLInputElement;\r\n resultsDisplayElement!: HTMLDivElement;\r\n private hiddenSpan: HTMLElement;\r\n private minWidth: number = 10;\r\n\r\n connectedCallback() {\r\n if (this.type === 'tags') {\r\n document.addEventListener('click', this.handleClickOutside);\r\n this.inputElement.addEventListener('input', this.handleTagInput.bind(this));\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n this.updateInputWidth();\r\n }\r\n \r\n componentWillLoad() {\r\n this.updateSelectedItems(this.value);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.inputElement.removeEventListener('input', this.handleTagInput.bind(this));\r\n }\r\n\r\n handleInput() {\r\n this.textarea.style.height = 'auto'; // Reset height to calculate the new height\r\n this.textarea.style.height = `${this.textarea.scrollHeight - 22}px`; // Set the height to the scrollHeight\r\n this.textareaValueChanged.emit(this.textarea.value);\r\n }\r\n\r\n handleTagInput(event: Event) {\r\n const target = event.target as HTMLInputElement;\r\n this.inputValue = target.value; // Update the value\r\n this.textareaValueChanged.emit(this.selectedItems);\r\n\r\n if (this.inputValue.trim() === '') {\r\n this.show = false;\r\n // this.results = [];\r\n return;\r\n }\r\n\r\n // Simulate API call\r\n setTimeout(() => {\r\n // this.results = this.mockStaffSearch(this.inputValue);\r\n this.show = this.results.length > 0;\r\n }, 1000);\r\n\r\n this.updateInputWidth();\r\n }\r\n\r\n emitInputValue() {\r\n this.textareaValueChanged.emit(this.selectedItems);\r\n }\r\n\r\n handleTagRemove(index: number) {\r\n if (this.value.length > 0) {\r\n this.value = [...this.value.slice(0, index), ...this.value.slice(index + 1)];\r\n this.updateStyles();\r\n this.emitInputValue();\r\n } else {\r\n this.selectedItems = [...this.selectedItems.slice(0, index), ...this.selectedItems.slice(index + 1)];\r\n this.updateStyles();\r\n this.emitInputValue();\r\n }\r\n }\r\n\r\n updateStyles() {\r\n setTimeout(() => {\r\n if (this.resultsDisplayElement) {\r\n const resultsWidth = this.resultsDisplayElement.offsetWidth;\r\n const inputWidth = this.inputElement.offsetWidth;\r\n\r\n this.paddingLeft = this.selectedItems.length === 0 ? '1rem' : `${resultsWidth + 10}px`;\r\n\r\n this.paddingTop = this.selectedItems.length > 2 ? '1rem' : `${inputWidth + 10}px`;\r\n }\r\n });\r\n\r\n if (this.destructive) {\r\n this.destructive = false;\r\n }\r\n this.inputValue = '';\r\n }\r\n\r\n mockStaffSearch(query: string) {\r\n const mockData = this.results;\r\n\r\n return mockData.filter(staff => staff.objectName.toLowerCase().includes(query.toLowerCase()));\r\n }\r\n\r\n selectStaff(staff: any) {\r\n this.selectedStaff = [...this.selectedStaff, staff];\r\n this.inputValue = '';\r\n this.staffInfo = [];\r\n this.updateStyles();\r\n }\r\n\r\n updateInputWidth() {\r\n if (this.hiddenSpan) {\r\n const input = this.el.shadowRoot.querySelector('input') as HTMLInputElement;\r\n\r\n // Update input width based on span's width or use minimum width\r\n const calculatedWidth = Math.max(this.hiddenSpan.offsetWidth + 10, this.minWidth);\r\n input.style.width = `${calculatedWidth}px`;\r\n }\r\n }\r\n\r\n handleWrapperClick() {\r\n this.inputElement.focus(); // Focus the input field\r\n }\r\n\r\n selectDropdownItem(item: any) {\r\n if (this.value.length === 0) {\r\n const isObject = typeof item === 'object';\r\n const isSelected = this.selectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item));\r\n if (isSelected) {\r\n // Unselect item: Move it from selectedItems to unselectedItems\r\n this.selectedItems = this.selectedItems.filter(i => (isObject ? i.objectName !== item.objectName : i !== item));\r\n if (!this.unselectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item))) {\r\n this.unselectedItems = [...this.unselectedItems, item];\r\n }\r\n this.textareaValueChanged.emit(this.selectedItems);\r\n } else {\r\n // Select item: Move it from unselectedItems to selectedItems\r\n this.selectedItems = [...this.selectedItems, item];\r\n this.unselectedItems = this.unselectedItems.filter(i => (isObject ? i.objectName !== item.objectName : i !== item));\r\n this.textareaValueChanged.emit(this.selectedItems);\r\n }\r\n } else {\r\n const isObject = typeof item === 'object';\r\n const isSelected = this.selectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item));\r\n\r\n if (isSelected) {\r\n this.value = this.value.filter(i => (isObject ? i.objectName !== item.objectName : i !== item));\r\n console.log(this.value);\r\n this.textareaValueChanged.emit(this.value);\r\n } else {\r\n this.value = [...this.value, item]; // Add item to array\r\n this.textareaValueChanged.emit(this.value);\r\n }\r\n }\r\n\r\n this.updateStyles();\r\n }\r\n\r\n @Watch('value')\r\n updateSelectedItems(newValue: any[]) {\r\n if (Array.isArray(newValue) && newValue.length > 0) {\r\n this.selectedItems = [];\r\n this.unselectedItems = [];\r\n\r\n const objectValues = newValue.filter(val => typeof val === 'object' && val !== null);\r\n const primitiveValues = newValue.filter(val => typeof val !== 'object');\r\n\r\n this.selectedItems = this.results.filter(item =>\r\n typeof item === 'object' && item !== null\r\n ? objectValues.some(val => JSON.stringify(val) === JSON.stringify(item)) // Avoid object reference issues\r\n : primitiveValues.includes(item),\r\n );\r\n\r\n this.unselectedItems = this.results.filter(item =>\r\n typeof item === 'object' && item !== null ? !objectValues.some(val => JSON.stringify(val) === JSON.stringify(item)) : !primitiveValues.includes(item),\r\n );\r\n } else {\r\n this.selectedItems = [];\r\n this.unselectedItems = [...this.results];\r\n }\r\n }\r\n\r\n isTagItemSelected(item) {\r\n // return this.selectedStaff.some(i => i.name === item.name);\r\n\r\n const isObject = typeof item === 'object';\r\n return this.selectedItems.some(i => (isObject ? i.objectName === item.objectName : i === item));\r\n }\r\n\r\n @Listen('click', { target: 'document' })\r\n handleClickOutside(event: MouseEvent) {\r\n if (this.show && !this.el.contains(event.target as Node)) {\r\n this.show = false;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"textarea_container\">\r\n <div class=\"input_with_label\">\r\n {this.showLabel && <p class={`label text-sm-medium`}>{this.label}</p>}\r\n {this.type === 'default' && (\r\n <textarea\r\n ref={el => (this.textarea = el as HTMLTextAreaElement)}\r\n onInput={() => this.handleInput()}\r\n class={`textarea default_textarea ${this.state} ${this.destructive ? 'destructive' : ''}`}\r\n placeholder={this.placeholderText}\r\n value={this.inputValue}\r\n ></textarea>\r\n )}\r\n {this.type === 'tags' && (\r\n <div class=\"textarea_tags\">\r\n <div class={`textarea ${this.type} ${this.state} ${this.destructive ? 'destructive' : ''}`} onClick={() => this.handleWrapperClick()}>\r\n <div class={`results_display ${this.state === 'disabled' ? 'disabled' : ''}`} ref={el => (this.resultsDisplayElement = el as HTMLDivElement)}>\r\n {this.value.length === 0 ? (\r\n <>\r\n {this.selectedItems.map((item, index) => (\r\n <>\r\n {typeof item === 'object' ? (\r\n <div class=\"added_tag\" key={index}>\r\n <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\" onClick={() => this.handleTagRemove(index)}>\r\n <p class=\"text-xs-medium\">{item.objectName.split(' ')[0]}</p>\r\n <h1 slot=\"initials\" class=\"text-xxs-semi-bold\">\r\n {item.objectName\r\n .split(' ')\r\n .map(part => part.charAt(0).toUpperCase())\r\n .join('')}\r\n </h1>\r\n </gb-tag>\r\n </div>\r\n ) : (\r\n <div class=\"added_tag\" key={index}>\r\n <gb-tag size=\"sm\" icon={this.icon ? this.icon : 'avatar'} action=\"X_close\" onClick={() => this.handleTagRemove(index)}>\r\n <p class=\"text-xs-medium\">{item}</p>\r\n </gb-tag>\r\n </div>\r\n )}\r\n </>\r\n ))}\r\n </>\r\n ) : (\r\n <>\r\n {this.value.map((val, index) => (\r\n <>\r\n {typeof val === 'object' ? (\r\n <gb-tag size=\"sm\" action=\"X_close\" icon={this.icon ? this.icon : 'avatar'} onClick={() => this.handleTagRemove(index)} key={index}>\r\n <h1 class=\"text-xxs-semi-bold\" slot=\"initials\">\r\n {val.objectName.split(' ').map(part => part.charAt(0).toUpperCase())}\r\n </h1>\r\n <p>{val.objectName.split(' ')[0]}</p>\r\n </gb-tag>\r\n ) : (\r\n <gb-tag size=\"sm\" action=\"X_close\" icon={this.icon ? this.icon : 'avatar'} onClick={() => this.handleTagRemove(index)} key={index}>\r\n <p>{val}</p>\r\n </gb-tag>\r\n )}\r\n </>\r\n ))}\r\n </>\r\n )}\r\n <span class=\"hidden-span\" ref={el => (this.hiddenSpan = el as HTMLElement)}>\r\n {this.inputValue \|\| ' '}\r\n </span>\r\n <div class=\"input_field\">\r\n <input\r\n id={this.idOfInput}\r\n class={`input_like text-md-regular ${this.state}`}\r\n type=\"text\"\r\n // placeholder={this.placeholderText}\r\n value={this.inputValue}\r\n readOnly={this.isReadOnly}\r\n ref={el => (this.inputElement = el as HTMLInputElement)}\r\n onBlur={() => this.emitInputValue()}\r\n />\r\n </div>\r\n </div>\r\n {this.destructive && (\r\n <div class=\"help_icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9947 10H8.00069M8.00004 8.00004V5.33337M14.6667 8.00004C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00004C1.33337 4.31814 4.31814 1.33337 8.00004 1.33337C11.6819 1.33337 14.6667 4.31814 14.6667 8.00004Z\"\r\n stroke=\"#B51726\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n </div>\r\n )}\r\n </div>\r\n {this.show && (\r\n <div class={`dropdown_menu`}>\r\n {this.results.map(item => (\r\n <gb-input-dropdown-menu-item\r\n type=\"checkbox\"\r\n supporting-text={true}\r\n state={StateEnum.Default}\r\n onClick={() => this.selectDropdownItem(item)}\r\n selected={this.isTagItemSelected(item)}\r\n >\r\n {typeof item === 'object'\r\n ? [<p slot=\"name\">{item.objectName}</p>, <p slot=\"supporting_text\">{item.objectValue}</p>]\r\n : typeof item !== 'object' && <p slot=\"name\">{item}</p>}\r\n </gb-input-dropdown-menu-item>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {this.showHintText && <p class={`hint_text text-sm-regular ${this.destructive ? 'destructive' : ''}`}>{this.hintText}</p>}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/gb-theme-tab/gb-theme-tab.js CHANGED Viewed

@@ -16,7 +16,7 @@ export class GbThemeTab {
         const systemIconSrc = getAssetPath(`assets/laptop.svg`);
         const sunSrc = getAssetPath(`assets/sun-02.svg`);
         const moonSrc = getAssetPath(`assets/moon-02.svg`);
-        return (h("div", { key: '8de003b58c97c9dd445ae2ba58af30fc47b13241', class: `theme_tab_div` }, h("div", { key: '0bc399523b6dd741cc8f11dccd59f6dae3c876dd', class: "tab" }, h("gb-icon-button-base", { key: '4d5bca44e69d645d1d52f8a1bbbd53f15ce9c0a3', current: this.currentActiveTab === 'system' ? true : false, icon: systemIconSrc, label: "System", onClick: () => this.tabClicked('system') })), h("div", { key: 'adad7a593de5203bc34b72617adcd50bd550f416', class: "tab" }, h("gb-icon-button-base", { key: '029be62645f398389f238a0e97e7f1529c8c3238', current: this.currentActiveTab === 'light' ? true : false, icon: sunSrc, label: "Light", onClick: () => this.tabClicked('light') })), h("div", { key: 'ee7ac6ea4976de1d9d2abc2709c58029c5d95f1a', class: "tab" }, h("gb-icon-button-base", { key: 'b8741e9411882c0aedb3f1bdd498a072bee35dda', current: this.currentActiveTab === 'dark' ? true : false, icon: moonSrc, label: "Dark", onClick: () => this.tabClicked('dark') }))));
+        return (h("div", { key: 'ecd15c8bf81a511634310e364383686a35dd3a61', class: `theme_tab_div` }, h("div", { key: '42164f41af67de2785820cb14170fd0e554b80e9', class: "tab" }, h("gb-icon-button-base", { key: '1990f696e031df27a720171d3171f93914795e6f', current: this.currentActiveTab === 'system' ? true : false, icon: systemIconSrc, label: "System", onClick: () => this.tabClicked('system') })), h("div", { key: 'ddff5d27c1b6b3f863f9b972a8a78ac5b50317e1', class: "tab" }, h("gb-icon-button-base", { key: 'aba448349737605a587353b4bf343fd4e878e8dd', current: this.currentActiveTab === 'light' ? true : false, icon: sunSrc, label: "Light", onClick: () => this.tabClicked('light') })), h("div", { key: '6c381297e543566820f2a5173e48a5125e789728', class: "tab" }, h("gb-icon-button-base", { key: '1364aa1d8b00a60d36d7bb2ffdcbe784da951fe7', current: this.currentActiveTab === 'dark' ? true : false, icon: moonSrc, label: "Dark", onClick: () => this.tabClicked('dark') }))));
     }
     static get is() { return "gb-theme-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,7 +54,7 @@ export class GbToast {
         }
     }
     render() {
-        return (h("div", { key: '2ce4546093f1f6406695a15af5ab181153fd2d08', class: `toast_div ${this.color} ${this.size} ${this.breakpoint}` }, this.size === 'floating' && (h(Fragment, null, h("div", { key: '0ff29fb352d88c35ae8b45c60886d49d2a2ec1b0', class: `icon_container` }, h("svg", { key: 'c4a571e92ffa5fb2d4abc2e7aab9ceb07cef6955', xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", class: `svg_icon ${this.color}` }, h("path", { key: '275f151d45d2217f8ef6029b183e4d96d59bef35', opacity: "0.4", d: "M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z", fill: "#4B5565" }), h("path", { key: '6dcedff602a10bea2a227cecf2107a8b64f4a24f', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z", fill: "#4B5565" }), h("path", { key: 'dc3bb7a4a0201206d3a18816d67ccb5ad216157e', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z", fill: "#4B5565" }))), h("div", { key: 'fc02cdd76d8361ccf3f4e7b9e6294172aa8c3313', class: `content ${this.size} ${this.actions ? ' actions' : ''}` }, h("div", { key: 'f4f30ed32d94bf2322b0af4d3724da180a25d315', class: `text ${this.size}` }, h("slot", { key: 'ea1972c37229b18650a0700fa56b8f0a5d022746', name: "main_text" }), this.showSupportingText && h("slot", { key: 'ed2aab45f060f4fd7f6566a8db84fc93255463ae', name: "supporting_text" })), this.actions && (h("div", { key: 'ec17765211e6ee381d5cef71dd5ab1b565f546c2', class: `actions ${this.size} ${!this.showSupportingText ? 'only_actions' : ''}` }, this.color === 'default' ? (h(Fragment, null, h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_gray" }, h("p", null, "Dismiss")), h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_color" }, h("p", null, "View changes")))) : (h(Fragment, null, h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "Dismiss")), h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "View changes"))))))), h("gb-button-close", { key: '8484249dfa9d95dd898bc05fa7ca7bad08d52398', size: "sm", color: this.color === 'default' ? 'gray' : this.color === 'gray' ? 'gray' : this.color, class: `close_button ${this.size}` }))), this.size === 'full_width' && (h("div", { key: '953a3d537483a856054cf673f32146ea522c16fe', class: `container ${this.breakpoint}` }, h("div", { key: '9898b47cd79dd123e948fdd743fb72d3ffb809c1', class: `full_width_content ${this.breakpoint}` }, h("div", { key: '89a868e63b9fd558cfbc2a71eb7cb945ab8d7d6a', class: `inner_content ${this.breakpoint}` }, h("div", { key: '7e8cf8f65302a3b345baa8bdb17078546abad693', class: `icon_container` }, h("svg", { key: '00146aa8d6c2f010db72215234c3933814116294', xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", class: `svg_icon ${this.color}` }, h("path", { key: 'f7ac103eeac1405349239f02537a2b564221d656', opacity: "0.4", d: "M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z", fill: "#4B5565" }), h("path", { key: 'e615ac4edf91bff5210632e6bb5e306276ebb5e7', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z", fill: "#4B5565" }), h("path", { key: 'bd88bebc773f0193b67e0090281b0318f283ed6a', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z", fill: "#4B5565" }))), h("div", { key: '085cd550f62a8a50a20735c82e77960bf7ae2acc', class: `text ${this.size} ${this.breakpoint}` }, h("slot", { key: '2721d9bd7005976878b3c5e48c5cd44d9309da72', name: "main_text" }), this.showSupportingText && h("slot", { key: '73dab942dab3d6064f349d9520491c797851cfb0', name: "supporting_text" }))), this.actions && (h("div", { key: 'c6472c19a83cf905f1ddc47dd3eb645aaa512493', class: `actions ${this.size} ${this.breakpoint} ${!this.showSupportingText ? 'only_actions' : ''}` }, this.color === 'default' ? (h(Fragment, null, h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_gray" }, h("p", null, "Dismiss")), h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_color" }, h("p", null, "View changes")))) : (h(Fragment, null, h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "Dismiss")), h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "View changes")))))), h("gb-button-close", { key: '5df41e2aa1f4a1a71798dfb3a78c1271a144c140', size: "sm", color: this.color === 'default' ? 'gray' : this.color === 'gray' ? 'gray' : this.color, class: `close_button ${this.breakpoint}`, onClick: () => this.closeToast() }))))));
+        return (h("div", { key: 'f5c142408ee11c1ac5abf8888bd034b03c94fff5', class: `toast_div ${this.color} ${this.size} ${this.breakpoint}` }, this.size === 'floating' && (h(Fragment, null, h("div", { key: 'e3dc78e9670686e9bbcdcc2a436e6818b7162f86', class: `icon_container` }, h("svg", { key: '1bb8f060cc3c9254f0ca6e87f066efaefe2e48e3', xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", class: `svg_icon ${this.color}` }, h("path", { key: '0e18451bf9c1f4afc7ec63eceaf74f38aa160f09', opacity: "0.4", d: "M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z", fill: "#4B5565" }), h("path", { key: '76e27edbc8500a41042aeaaa09a6abeecd9414d0', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z", fill: "#4B5565" }), h("path", { key: 'ca84ee3c7ea95f1f436ffe72c8c7605b9b70b1db', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z", fill: "#4B5565" }))), h("div", { key: '79a85a7e26e83f9094fb2de8af4e23cc6066763c', class: `content ${this.size} ${this.actions ? ' actions' : ''}` }, h("div", { key: 'a2aebea0078ef2f5767502496bc876f8876e19ed', class: `text ${this.size}` }, h("slot", { key: '498060581797f2a1e03841de7e2aa04efa667957', name: "main_text" }), this.showSupportingText && h("slot", { key: '871455cf20bdbc3e6c062dcb1fa690e6332a5b68', name: "supporting_text" })), this.actions && (h("div", { key: 'd4568a27dbd43de2bf04845f857e389313d08b74', class: `actions ${this.size} ${!this.showSupportingText ? 'only_actions' : ''}` }, this.color === 'default' ? (h(Fragment, null, h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_gray" }, h("p", null, "Dismiss")), h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_color" }, h("p", null, "View changes")))) : (h(Fragment, null, h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "Dismiss")), h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "View changes"))))))), h("gb-button-close", { key: '6fe62af2820e848f0ff61e0f0fee6c4ecda10120', size: "sm", color: this.color === 'default' ? 'gray' : this.color === 'gray' ? 'gray' : this.color, class: `close_button ${this.size}` }))), this.size === 'full_width' && (h("div", { key: '3c64f3b9cdcbe057e03d28beab15990a249c135c', class: `container ${this.breakpoint}` }, h("div", { key: '9fd21733dec38a50297f719699a9ac79a19a890d', class: `full_width_content ${this.breakpoint}` }, h("div", { key: '67d55763b6e280a6b5593298cf943d3630b2f411', class: `inner_content ${this.breakpoint}` }, h("div", { key: '772251c30165ebeda688bb9935d316500b4062da', class: `icon_container` }, h("svg", { key: 'b2f64bf05d01f638140ac9bb9afcda7a199cf29f', xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", class: `svg_icon ${this.color}` }, h("path", { key: '635d36d97fca405e148f50c4a0cdbc3a3fd8e6fa', opacity: "0.4", d: "M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z", fill: "#4B5565" }), h("path", { key: '45608a818c206a8fd8361f15bde647b74f58dfa5', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z", fill: "#4B5565" }), h("path", { key: '2cce6ba1e0327197abb27c0950042b41aa716cb1', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z", fill: "#4B5565" }))), h("div", { key: 'c9f8c9db5a6a854216c183eb40dd3c11072320ae', class: `text ${this.size} ${this.breakpoint}` }, h("slot", { key: '3d9f7e37cde46bfb3b3909fd8ae5a812a4128bc2', name: "main_text" }), this.showSupportingText && h("slot", { key: '71b37e6c0bdc4934f3a228fb96dbe531d144c875', name: "supporting_text" }))), this.actions && (h("div", { key: 'c956b6dc6dcb3b34f0faffbc464f3a0840b36640', class: `actions ${this.size} ${this.breakpoint} ${!this.showSupportingText ? 'only_actions' : ''}` }, this.color === 'default' ? (h(Fragment, null, h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_gray" }, h("p", null, "Dismiss")), h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_color" }, h("p", null, "View changes")))) : (h(Fragment, null, h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "Dismiss")), h("gb-toast-button", { state: StateEnum.Default, color: this.color }, h("p", null, "View changes")))))), h("gb-button-close", { key: '8e057126a782f4abc3a3cd183e6b787ae120b306', size: "sm", color: this.color === 'default' ? 'gray' : this.color === 'gray' ? 'gray' : this.color, class: `close_button ${this.breakpoint}`, onClick: () => this.closeToast() }))))));
     }
     static get is() { return "gb-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ export class GbToastButton {
         slottedContent.classList.add('text-sm-semi-bold');
     }
     render() {
-        return (h("div", { key: 'd864a7e730ee510b99dc9c756077bfb57d06608d', class: `toast_button ${this.state} ${this.color}` }, h("slot", { key: '35378b04fc69e01a3b537c5f362efdf33e9e83b8' })));
+        return (h("div", { key: 'f6265e703ec8c3b4373279294d5670fed056dbe9', class: `toast_button ${this.state} ${this.color}` }, h("slot", { key: 'a845e995726af5a0752a73658434c34a1b319f76' })));
     }
     static get is() { return "gb-toast-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,7 +34,7 @@ export class GbToggle {
         }
     }
     render() {
-        return (h("div", { key: '672cd85411b358f49e1f65da5bd07ffd0b41e1cb', class: `toggle_div ${this.size}` }, h("div", { key: '07a5fb48062b1b8ab8b0b924a596912c736d9362', class: "toggle_base" }, h("gb-toggle-base", { key: '85f991064dafb31f35eece31c1ef66bdfb92fd52', size: this.size, state: this.state, pressed: this.pressed })), this.text && (h("div", { key: '2681c2598b19321b11b6b382a1f0d923fab04522', class: "text" }, h("slot", { key: '0ed7c4cd8144f7d1e78365300bc902c8c82f6034', name: "main_text" }), this.supportingText && (h("slot", { key: 'c03bf689ae77668b9dc4c8d98db41cb0ae0c2e35', name: "supporting_text" }))))));
+        return (h("div", { key: 'd4b9ef1068adcdd285fdbc25527e5373cdc29e7c', class: `toggle_div ${this.size}` }, h("div", { key: 'bdb20fdf3a02228a6e8769f9360fa128559dd52f', class: "toggle_base" }, h("gb-toggle-base", { key: '7780b3369d8e81f7afbad59629c218a4d107353f', size: this.size, state: this.state, pressed: this.pressed })), this.text && (h("div", { key: '992a9ae083239a87f0ebeccffcfecec052f7ca52', class: "text" }, h("slot", { key: '8d726905753189570c842df072635a68ef07e859', name: "main_text" }), this.supportingText && (h("slot", { key: '424a89d3f7c56d74dc39a281137a2c054b398724', name: "supporting_text" }))))));
     }
     static get is() { return "gb-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,8 +11,8 @@ export class GbToggleBase {
     }
     render() {
         return [
-            h("input", { key: '3c5e742b3681d7311a946a75c5551010f38d4593', type: "checkbox", id: "customCheckbox", class: `${this.pressed ? 'pressed' : ''}`, readonly: true }),
-            h("label", { key: '0ebd079650a549e8addcbdb35b405de1ddfa44d5', onClick: () => this.handleToggleClick(), class: `${this.size} ${this.state} ${this.pressed ? 'pressed' : ''}`, htmlFor: "customCheckbox" }, this.pressed && this.state === 'default' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `default_checked_svg ${this.size}` }, h("path", { d: "M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667", stroke: "#075DB2", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : this.pressed && this.state === 'disabled' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `disabled_checked_svg ${this.size}` }, h("path", { d: "M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667", stroke: "#E3E8EF", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : null),
+            h("input", { key: '5ad7e6d7c75e77bda658b8f28305c98e9677b99e', type: "checkbox", id: "customCheckbox", class: `${this.pressed ? 'pressed' : ''}`, readonly: true }),
+            h("label", { key: '537e1f8ea5597280e25ed32fc53514c58bfc18d8', onClick: () => this.handleToggleClick(), class: `${this.size} ${this.state} ${this.pressed ? 'pressed' : ''}`, htmlFor: "customCheckbox" }, this.pressed && this.state === 'default' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `default_checked_svg ${this.size}` }, h("path", { d: "M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667", stroke: "#075DB2", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : this.pressed && this.state === 'disabled' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `disabled_checked_svg ${this.size}` }, h("path", { d: "M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667", stroke: "#E3E8EF", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : null),
         ];
     }
     static get is() { return "gb-toggle-base"; }

package/dist/collection/components/gb-token-field-compact/gb-token-field-compact.js CHANGED Viewed

@@ -5,7 +5,7 @@ export class GbTokenFieldCompact {
         this.supportingText = '';
     }
     render() {
-        return (h("div", { key: '8f047e0db164695ddb443f196dadee67d1283f2b', class: this.size }, h("div", { key: '0f833752ea87628d33d7b31666e53c66a1a3830f', class: "input-with-label" }, this.showLabel && (h("label", { key: 'ac70e8e8973e90bc62d61d1f247d1c3ca3b9bb14' }, this.label)), this.digits === 4 && (h("div", { key: '50fbbb2dc0e421619f07a52dab883add3072a097', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: '110dd083c637dbf43812763ead0028c8acbc678c', size: this.size }), h("gb-mega-input-field-base", { key: '11ae8ccf88771e573744f30b79a7a6cc01671c5c', size: this.size }), h("gb-mega-input-field-base", { key: '1f2b8ac76b505e5168d02503245a2142c7b5f421', size: this.size }), h("gb-mega-input-field-base", { key: 'd8d3fd1c5de07b771c483bf264e86a75200303ae', size: this.size }))), this.digits === 6 && (h("div", { key: '4587f89b326ee9c227a007ad2bf853b65bb5123b', class: "input-wrapper" }, h("div", { key: '96ae1b81105d45afac666682513001482bfe2714', class: "first=section" }, h("gb-mega-input-field-base", { key: '9c225231c36242181867458e5d3d3df64ae56db3', size: this.size }), h("gb-mega-input-field-base", { key: '092a7c070c00269464c57b877284c210f4ef0ce0', size: this.size }), h("gb-mega-input-field-base", { key: '19c47ff822dfa6e2ff5817447c0bfe3006cb3db8', size: this.size })), h("div", { key: '02860431dda76d38d0f2454cdaf67eadca889933', class: "second=section" }, h("gb-mega-input-field-base", { key: 'd2892a89421b9ece50eaee27f5ff598d55afdee3', size: this.size }), h("gb-mega-input-field-base", { key: '5eddebc85ec20a0edac1622525a0083412d2543d', size: this.size }), h("gb-mega-input-field-base", { key: '040f623efe2b7c478f717df606f75e998c066926', size: this.size })))), this.digits === 8 && (h("div", { key: 'cf9e9ecb1347bb88a889daab378c2a760966277f', class: "input-wrapper" }, h("div", { key: '37de553e12fd5750c20072308ccbcea5f73c2525', class: "first=section" }, h("gb-mega-input-field-base", { key: '919318cd0e699d73fd670fcac11eb74583d0c7c1', size: this.size }), h("gb-mega-input-field-base", { key: '599b7d1a7eefb9ec3042f0be07b6ee65607b8e0f', size: this.size }), h("gb-mega-input-field-base", { key: '5c597f444c63c97dda5373b4d7d57612ad88f890', size: this.size }), h("gb-mega-input-field-base", { key: 'dc7b5770a273545c1021ae441972747a502317b6', size: this.size })), h("div", { key: '5a8402b1e1b67b465e224a530202dedcafb3fc38', class: "second=section" }, h("gb-mega-input-field-base", { key: 'ca2d9d0d3502a47dd0cea4551cf92343ee68297d', size: this.size }), h("gb-mega-input-field-base", { key: '03a34f4e8adf98899c5046a9f6f9c7fa3bf150b9', size: this.size }), h("gb-mega-input-field-base", { key: '1f90911604b1cbd22d7267611a1803ceb0a3f290', size: this.size }), h("gb-mega-input-field-base", { key: '23a286a10a542bc1f32ecc1a6649a4c1b5f7ed67', size: this.size }))))), h("p", { key: '0f64fa2fc3c38a490695daf18c622dc098fbde9f' }, this.supportingText)));
+        return (h("div", { key: '5638ea317a84814c76a35ce40343d633ac204510', class: this.size }, h("div", { key: 'b2d31edd8a2c1bda7ca8a478f38b4004e323af26', class: "input-with-label" }, this.showLabel && (h("label", { key: '5e654294de23f9d7b3d14ccedab0cc57657c4e9a' }, this.label)), this.digits === 4 && (h("div", { key: '2833085ea85919fdbdd5c4068862d87b388069c5', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: 'b1805392e851283640b7b8d1111380616b7cc1c8', size: this.size }), h("gb-mega-input-field-base", { key: 'f9cd90ff15d4bec98188b1332a9733300c796b7c', size: this.size }), h("gb-mega-input-field-base", { key: '4c6994b1a4751cd191ab9048cdfca65bac96520b', size: this.size }), h("gb-mega-input-field-base", { key: '047e9635a5ed44fa39285a0eb43d7c42addb044e', size: this.size }))), this.digits === 6 && (h("div", { key: '539a9f5888ef80ea29fc46866f49e3a98308b6b3', class: "input-wrapper" }, h("div", { key: '14c8bf9d2bf15efc52b88e9e300fb7a0ac44b7a9', class: "first=section" }, h("gb-mega-input-field-base", { key: 'd5ba5fba34e867dfdee67097433a43b63f75c15d', size: this.size }), h("gb-mega-input-field-base", { key: '4459767301db9d8131b1ba30d09d4dabf5ea02b7', size: this.size }), h("gb-mega-input-field-base", { key: '9997758eee6f03a1f0d9b7aa124077c4ba93d3f9', size: this.size })), h("div", { key: '5dfd37db48904a55feab7eb5249e22a543da0c5b', class: "second=section" }, h("gb-mega-input-field-base", { key: '64ce4c4acccca58eb9e1651fa5c507f15d054e76', size: this.size }), h("gb-mega-input-field-base", { key: '3711afa3f21a8ce38e52d2f290746925c54e9c2e', size: this.size }), h("gb-mega-input-field-base", { key: '772d0db8886756d124b447f1c4d0f20d00eb5db0', size: this.size })))), this.digits === 8 && (h("div", { key: 'd5b71d2d65330b145993575f614f8f7f93ab627a', class: "input-wrapper" }, h("div", { key: '78a6c599499d3acc60fc816718eef7050f742dd9', class: "first=section" }, h("gb-mega-input-field-base", { key: '4a1d6545008f2a6a32bd76592b24378a904de1d8', size: this.size }), h("gb-mega-input-field-base", { key: '390e7d30ec22822cbdd04aa82ed3f5fe6f19f7b0', size: this.size }), h("gb-mega-input-field-base", { key: '5f470e92c5cce43840c5803f5fdc9bc0c77966f0', size: this.size }), h("gb-mega-input-field-base", { key: '211277d36a364f156f3e5d874d1b684e94bbd08c', size: this.size })), h("div", { key: '4a0ffe5c7fab75eba1ec774a3205f03ca710d0a3', class: "second=section" }, h("gb-mega-input-field-base", { key: 'b1aae06cfceaf51e67959234009104b414c7388e', size: this.size }), h("gb-mega-input-field-base", { key: '764268f5a4cb0e55950c0165e87c92a28c00731f', size: this.size }), h("gb-mega-input-field-base", { key: '70890034c6fed91d120fd5a4ce420d4ed8052a40', size: this.size }), h("gb-mega-input-field-base", { key: '63817ce4b4b9910ca63a505dcf8a579345f6cd9d', size: this.size }))))), h("p", { key: '0c65beedcd391a9332ebed0a91573ab0bac492d9' }, this.supportingText)));
     }
     static get is() { return "gb-token-field-compact"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-token-field-compressed/gb-token-field-compressed.js CHANGED Viewed

@@ -5,11 +5,11 @@ export class GbTokenFieldCompressed {
         this.hintText = '';
     }
     render() {
-        return (h("div", { key: '02f46b32ba8116d2a25895c529d0766d66959d69', class: {
+        return (h("div", { key: '2bb16b9dfdb22740769021043c6a997639a54749', class: {
                 container: true,
                 [this.size]: true,
                 [this.digits]: true,
-            } }, h("div", { key: '30e3da989068a60a70253088e13750ba16530efe', class: "input-with-label" }, this.showLabel && (h("label", { key: '12f1682045e2395dfa902a911bd78eb7ad87f596', class: "text-sm-medium", style: { color: 'var(--color-text, #4B5565)' } }, this.label)), this.digits === 4 && (h("div", { key: 'c401e8ca7788b9c164bfc1d2be54640c8fc405fd', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: '4cb98528f97161dc4ea6206152b2a6bee2b2e71d', size: this.size }), h("gb-mega-input-field-base", { key: '3233cc0921d4d0cc816317b61d6f1f0a5df7f59f', size: this.size }), h("gb-mega-input-field-base", { key: '1e18d272d908e7cbb26f9195fcc58c74fdcbfa96', size: this.size }), h("gb-mega-input-field-base", { key: 'b55378c664a551814a45c2ad5ddbf446bfdb2317', size: this.size }))), this.digits === 6 && (h("div", { key: '03c85a9f88eb03decf44a58b51b4de2c3dc92101', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: '6902f125fc9e7c32a368c506f83b7c21261b11c0', size: this.size }), h("gb-mega-input-field-base", { key: '1cc74adc11e9b34aec9332fa1f28cc32447f3887', size: this.size }), h("gb-mega-input-field-base", { key: '8c5d0ca9dcd540310beed3799ee7c00c54c74910', size: this.size }), h("p", { key: '84cc101ddd60fd3f65f7a6ef3ecb87a7e038b7da', class: "line display-sm-bold" }, "-"), h("gb-mega-input-field-base", { key: 'ef762fdae3a760480d4f04a5d7e990c42f0cf64a', size: this.size }), h("gb-mega-input-field-base", { key: 'b0b5b5dcb4c1f316782884f08e718244a7fbd010', size: this.size }), h("gb-mega-input-field-base", { key: 'c2f84245c9e737e353c20535b88d949d59676611', size: this.size }))), this.digits === 8 && (h("div", { key: 'f320e6c5fa21d791ca726935b6c142a23b670896', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: '2057774391b11fbc7031c0a6f03f88bab086dffc', size: this.size }), h("gb-mega-input-field-base", { key: '85f619aef9ba2ab7c100c859209a4a032801aab7', size: this.size }), h("gb-mega-input-field-base", { key: '0f5d3c22a831dee100c560982d385ba3f4c63d01', size: this.size }), h("gb-mega-input-field-base", { key: '35d2d7dadd14b4190f02d33558a018540ca578a4', size: this.size }), h("p", { key: '1c1e00909bc5124577838293d070121178c00bee', class: "line display-sm-bold" }, "-"), h("gb-mega-input-field-base", { key: 'bc0704d0d4ab226f7da7d789324adbf0ea72628d', size: this.size }), h("gb-mega-input-field-base", { key: 'ef0b07710510e0a0cdc156e6cf22f9a251290bf7', size: this.size }), h("gb-mega-input-field-base", { key: '87ea17814b0894da88963e52bee21baabaff5824', size: this.size }), h("gb-mega-input-field-base", { key: 'd2f6815f9f1796bcdb32b14f3bee024546e5acbb', size: this.size })))), this.showHintText && (h("div", { key: '57fdf02e149b338b3a83fed9052d0f7fec6a7318', class: "text-sm-regular", style: { color: 'var(--color-text-subtle, #697586)' } }, this.hintText))));
+            } }, h("div", { key: '39073e2c8e1174b44d2033a13398367992f7cce9', class: "input-with-label" }, this.showLabel && (h("label", { key: 'e3717eafb012ce275872529e97187c95aa1b47ef', class: "text-sm-medium", style: { color: 'var(--color-text, #4B5565)' } }, this.label)), this.digits === 4 && (h("div", { key: '21df1d75b4792534d95520534f441c66e9d5464a', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: 'a8a85abeee8335ef1847783b582af486ee044ff9', size: this.size }), h("gb-mega-input-field-base", { key: '1a04c12c842bd24c25f2f42598103a6e8b33c8be', size: this.size }), h("gb-mega-input-field-base", { key: '6305b00023187df45a398a2c6b7a290fad42e383', size: this.size }), h("gb-mega-input-field-base", { key: '0c2a9c6fb73f3f667a121b303e32f99d3b43068a', size: this.size }))), this.digits === 6 && (h("div", { key: '8489831905184384cecb6b8343c9860debfaeb4e', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: 'd309b9fa197d263dd4864c429ea591e571f2e2ba', size: this.size }), h("gb-mega-input-field-base", { key: 'c90fc09ef4c0731a06a6e39dbeb465ccddc1770b', size: this.size }), h("gb-mega-input-field-base", { key: '6f907f5c759af1b336e99553d375e1640f72e3f0', size: this.size }), h("p", { key: '345400417096919bed9995a2b2b417df61ba1134', class: "line display-sm-bold" }, "-"), h("gb-mega-input-field-base", { key: '81d503e5c6eb65dff074c18750b964abc1c9fd68', size: this.size }), h("gb-mega-input-field-base", { key: '11d9b8d7441c69caec1936da643b99053834f42b', size: this.size }), h("gb-mega-input-field-base", { key: '2cd21bb77e868a13df7575c3073160efbd3159f3', size: this.size }))), this.digits === 8 && (h("div", { key: '920c3e25c2a464b9c4d263a0fa989b13b0ed6c6d', class: "input-wrapper" }, h("gb-mega-input-field-base", { key: '31c49657b61c298dcc247a38d0fb13e09f91a86f', size: this.size }), h("gb-mega-input-field-base", { key: '78b0551ee19a82f8f53e97e0cb561b2723260e6e', size: this.size }), h("gb-mega-input-field-base", { key: '9a8d696d000a2883266ef3a12c99fdd2d1888db8', size: this.size }), h("gb-mega-input-field-base", { key: '52bfd0188edaa32c6cdfce624de64a94dbeb10a6', size: this.size }), h("p", { key: '0dc0c5c541377ba0e58502f4e9465c5621fe0cbd', class: "line display-sm-bold" }, "-"), h("gb-mega-input-field-base", { key: 'b225a42470c6aa41db0757c2ef9c5c97a5dc65f1', size: this.size }), h("gb-mega-input-field-base", { key: '7e3139bde46fb2cdefa834523214555745dbc888', size: this.size }), h("gb-mega-input-field-base", { key: 'e251273d95dbc01310f5c90e9e47b7763710acd4', size: this.size }), h("gb-mega-input-field-base", { key: '7f3941c92833047208a97fa633f3b69a3c4654aa', size: this.size })))), this.showHintText && (h("div", { key: '8c6228b580a9603fc63cb452696c5f9387f1ee20', class: "text-sm-regular", style: { color: 'var(--color-text-subtle, #697586)' } }, this.hintText))));
     }
     static get is() { return "gb-token-field-compressed"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,7 +22,7 @@ export class GbTooltip {
         return this.showArrow ? `arrow ${this.arrow}` : '';
     }
     render() {
-        return (h("div", { key: '71cd5c29108694c701a22b138a5d49e455356383', class: "tooltip_container" }, h("div", { key: 'ade620c252f6a160f068bfaa6dc6f1498340833e', class: "tooltip" }, this.showArrow && h("div", { key: '37188e96b57a745681d95315c90c4ca34da10f58', class: this.getArrowClass() }), h("div", { key: '6343cdea43c224be447de1d5e10ef6e9b60eabdb', class: "tooltip_content" }, h("slot", { key: '05e59c6029f1f202f6e679ac7a379b17fe96bb06', name: "label" }), this.showSupportingText && h("slot", { key: 'c3c5c7760dde1001b99d907d55f864bee5223518', name: "supporting_text" })))));
+        return (h("div", { key: '90bac90e5b6c347f6ebe6cab6040f95f30c37afd', class: "tooltip_container" }, h("div", { key: 'eca341da306ee4c10446d4ec47bc815a626db80c', class: "tooltip" }, this.showArrow && h("div", { key: 'd60a4fdbb46f188ea74b8d708d1fd826959a1a59', class: this.getArrowClass() }), h("div", { key: '99abfa01c37295316feed6487ef932c7716c2f28', class: "tooltip_content" }, h("slot", { key: '74de2aeab90f1d93216d129f4640d8e042f024d8', name: "label" }), this.showSupportingText && h("slot", { key: '3418435772a35d1ee554b675304deefecbaf92d9', name: "supporting_text" })))));
     }
     static get is() { return "gb-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-top-bar/gb-top-bar.js CHANGED Viewed

@@ -30,7 +30,7 @@ export class GbTopBar {
     }
     render() {
         const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);
-        return (h("div", { key: 'ce61451c075c072b7ee2a7004d3ea62406a67086', class: `top_bar_div ${this.category}` }, this.category === 'colored_background' && (h("div", { key: 'f8cfe4758f18dd11ccd5f334e5f4d237fa49b905', class: "pattern" }, h("img", { key: 'cca8c180bee9e0bd935bc5dc487599bd04818d39', src: patternSrc, alt: "" }))), h("div", { key: 'cdaec91b2f0057700594294fb4591cbfcf40adbb', class: "top_bar_content" }, h("div", { key: 'd609b4f600098194041cc692acd94b8300b7d0c7', class: "content" }, this.firstTabLabel && (h("gb-top-bar-item", { key: 'f6bc79a3676e1fa3c4b7a496ef88b59db391ddd3', state: this.activeIndex === 0 ? 'active' : 'default', "icon-only": this.firstTabIconOnly, category: this.category, icon: this.firstTabIcon, label: this.firstTabLabel, onClick: () => this.onTabItemClicked(0) })), this.secondTabLabel && (h("gb-top-bar-item", { key: '36ee059d2c882d1210df0b5298bba861244534df', state: this.activeIndex === 1 ? 'active' : 'default', "icon-only": this.secondTabIconOnly, category: this.category, icon: this.secondTabIcon, label: this.secondTabLabel, onClick: () => this.onTabItemClicked(1) })), this.thirdTabLabel && (h("gb-top-bar-item", { key: '52851bd7b835fa93c4b5cb99705d9332c8fc185d', state: this.activeIndex === 2 ? 'active' : 'default', "icon-only": this.thirdTabIconOnly, category: this.category, icon: this.thirdTabIcon, label: this.thirdTabLabel, onClick: () => this.onTabItemClicked(2) })), this.fourthTabLabel && (h("gb-top-bar-item", { key: 'bcee9d579a8fda2895ca6ef10d7b1523c472f1f7', state: this.activeIndex === 3 ? 'active' : 'default', "icon-only": this.fourthTabIconOnly, category: this.category, icon: this.fourthTabIcon, label: this.fourthTabLabel, onClick: () => this.onTabItemClicked(3) })), this.fifthTabLabel && (h("gb-top-bar-item", { key: 'f6c6a7f17e50b5542bf46d3fb558dd439e32d9e6', state: this.activeIndex === 4 ? 'active' : 'default', "icon-only": this.fifthTabIconOnly, category: this.category, icon: this.fifthTabIcon, label: this.fifthTabLabel, onClick: () => this.onTabItemClicked(4) })), this.sixthTabLabel && (h("gb-top-bar-item", { key: '5080cbc2ae90d25af6401fb765b14df10de06858', state: this.activeIndex === 5 ? 'active' : 'default', "icon-only": this.sixthTabIconOnly, category: this.category, icon: this.sixthTabIcon, label: this.sixthTabLabel, onClick: () => this.onTabItemClicked(5) })), this.seventhTabLabel && (h("gb-top-bar-item", { key: '36cc0bf168128fe6b29fdd43652119ae104a5cc0', state: this.activeIndex === 6 ? 'active' : 'default', "icon-only": this.seventhTabIconOnly, category: this.category, icon: this.seventhTabIcon, label: this.seventhTabLabel, onClick: () => this.onTabItemClicked(6) }))))));
+        return (h("div", { key: 'b57bcc7ea952d821f9dfd9bb93d87d85f214223c', class: `top_bar_div ${this.category}` }, this.category === 'colored_background' && (h("div", { key: 'c1e710dbfc6941ad37e1fb21b4ada3e9551f2dba', class: "pattern" }, h("img", { key: 'adb390c24ef5bb729b7d41e5a1f2f5e5366d5cf2', src: patternSrc, alt: "" }))), h("div", { key: '78e3736fc9238f6bf24786da5f52ec58f3d40a2b', class: "top_bar_content" }, h("div", { key: 'ea3226bf59c051befd33ac56642d313f25f766c3', class: "content" }, this.firstTabLabel && (h("gb-top-bar-item", { key: 'c2a03b8245ac442e3e610d3f0a83f4d41628e690', state: this.activeIndex === 0 ? 'active' : 'default', "icon-only": this.firstTabIconOnly, category: this.category, icon: this.firstTabIcon, label: this.firstTabLabel, onClick: () => this.onTabItemClicked(0) })), this.secondTabLabel && (h("gb-top-bar-item", { key: '23eae278095e0a5ba133c717054e1b0aa61b5438', state: this.activeIndex === 1 ? 'active' : 'default', "icon-only": this.secondTabIconOnly, category: this.category, icon: this.secondTabIcon, label: this.secondTabLabel, onClick: () => this.onTabItemClicked(1) })), this.thirdTabLabel && (h("gb-top-bar-item", { key: '0c4b3dd057f99d4af671f2ed4b3ed7b7ef82c700', state: this.activeIndex === 2 ? 'active' : 'default', "icon-only": this.thirdTabIconOnly, category: this.category, icon: this.thirdTabIcon, label: this.thirdTabLabel, onClick: () => this.onTabItemClicked(2) })), this.fourthTabLabel && (h("gb-top-bar-item", { key: 'fae5007f5e297a4bfab90a7fbe71110bbc1acde4', state: this.activeIndex === 3 ? 'active' : 'default', "icon-only": this.fourthTabIconOnly, category: this.category, icon: this.fourthTabIcon, label: this.fourthTabLabel, onClick: () => this.onTabItemClicked(3) })), this.fifthTabLabel && (h("gb-top-bar-item", { key: '69cea80b87a47aefdad49e9faa0f1ebad6a288fa', state: this.activeIndex === 4 ? 'active' : 'default', "icon-only": this.fifthTabIconOnly, category: this.category, icon: this.fifthTabIcon, label: this.fifthTabLabel, onClick: () => this.onTabItemClicked(4) })), this.sixthTabLabel && (h("gb-top-bar-item", { key: 'a925208f2f1794336347434bcb0a6a781d30bf4c', state: this.activeIndex === 5 ? 'active' : 'default', "icon-only": this.sixthTabIconOnly, category: this.category, icon: this.sixthTabIcon, label: this.sixthTabLabel, onClick: () => this.onTabItemClicked(5) })), this.seventhTabLabel && (h("gb-top-bar-item", { key: '1cf4181dbb2a009a8e78a9e207999fb1074e5cfb', state: this.activeIndex === 6 ? 'active' : 'default', "icon-only": this.seventhTabIconOnly, category: this.category, icon: this.seventhTabIcon, label: this.seventhTabLabel, onClick: () => this.onTabItemClicked(6) }))))));
     }
     static get is() { return "gb-top-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-top-bar-item/gb-top-bar-item.js CHANGED Viewed

@@ -17,7 +17,7 @@ export class GbTopBarItem {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: 'c922d65c78ee21bc7eb0844c62854752cbd39877', class: `top_bar_item_div ${this.category} ${this.state}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '53b45c21d8c21283b9b3f5515c2e28d82ca3560e', class: `top_bar_content` }, h("div", { key: 'dde36aadc43b419894af9894af7b15f3b72ffcf0', class: `icon ${this.category} ${this.state}`, innerHTML: this.leadingIconSvg }), !this.iconOnly && (h("div", { key: 'f6d4a8f5221f28ed1a2006f3879e1353b4ff3844', class: "label" }, h("p", { key: 'de0fa4eeb768b306fcffd79bfb8247dc12c68e7f', class: `label_text text-md-medium ${this.category} ${this.state}` }, this.label))), this.state === 'active' && this.category === 'colored_background' && h("div", { key: '4eea5a133f96decb9e94fd1a04699f3d9853ab93', class: `bar ${this.category}` }), this.state === 'active' && this.category === 'plain_background' && h("div", { key: '506511d3c7e05d7882516f55213527191644ec93', class: `bar ${this.category}` })), this.iconOnly && this.showTooltip && (h("gb-tooltip", { key: '07769733e5e256eb2f7481ae90baac5ba96a8bd2', "show-arrow": true, arrow: "bottom_center", class: "tooltip" }, h("p", { key: 'f6e891bc402f0fd85e7885192a062114d93e54ce', slot: "label" }, this.label)))));
+        return (h("div", { key: 'b30ec8f5dc547767bd08bf28b104b2d7b42b0c93', class: `top_bar_item_div ${this.category} ${this.state}`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: 'dc88119fb1a38d55c12fe5b01048ab4fc8f6dbb5', class: `top_bar_content` }, h("div", { key: '434c67e8deba2650d8e46fb048d3088a8fd420d2', class: `icon ${this.category} ${this.state}`, innerHTML: this.leadingIconSvg }), !this.iconOnly && (h("div", { key: '48163a2de852482f6b61257fddaf8adfe012ed9a', class: "label" }, h("p", { key: '926237b213eebf68f6db1a80026a30fe79456274', class: `label_text text-md-medium ${this.category} ${this.state}` }, this.label))), this.state === 'active' && this.category === 'colored_background' && h("div", { key: '89ef0f04adbda4f16c41e7e58b6af0fd9b48eda4', class: `bar ${this.category}` }), this.state === 'active' && this.category === 'plain_background' && h("div", { key: '3015cac35f0c0873f419ed81e161ac9e70c317f6', class: `bar ${this.category}` })), this.iconOnly && this.showTooltip && (h("gb-tooltip", { key: '55acef6f20d3dcef129b220a410ca808b9f5d21e', "show-arrow": true, arrow: "bottom_center", class: "tooltip" }, h("p", { key: '4fe265cdcb345403e5b87f3fe2176e431290ef54', slot: "label" }, this.label)))));
     }
     static get is() { return "gb-top-bar-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-top-bar-sidemenu/gb-top-bar-sidemenu.js CHANGED Viewed

@@ -32,7 +32,7 @@ export class GbTopBarSidemenu {
     }
     render() {
         const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);
-        return (h("div", { key: '0d211aa676adb6b5a52d9660d80f094717885f4e', class: "top_bar_sidemenu_div" }, h("div", { key: 'd5254d8397b76d0f30c04367c4b62a2d3e12706d', class: "vertical_tabs_div" }, h("gb-vertical-tabs", { key: 'f26de5f867e01898212e31f93054ebc7e556db75', size: "md", "first-tab-name": this.firstTabName, "second-tab-name": this.secondTabName, "third-tab-name": this.thirdTabName, "fourth-tab-name": this.fourthTabName, "fifth-tab-name": this.fifthTabName, type: "button_primary", "active-index": this.activeIndex, onTabItemClicked: this.onTabItemClicked.bind(this) })), h("div", { key: 'bfa9a93862f06cbe5065ea9432ab915f0d6c12d9', class: "wrapper" }, h("div", { key: 'efa5db2d9acb1961102e4017221f43bd78462d56', class: "wrapper_pattern" }, h("img", { key: 'a28118596509290c9f2cb23b4b95ecfe0dcd6b1d', src: patternSrc, alt: "" })), h("div", { key: 'b548b0658b4e5052f25e68b32036c8ff85c7652b', class: `application_icon`, innerHTML: this.leadingIconSvg }), h("div", { key: '483184c2120fc8edb0b174722e2154cb20d47431', class: "application_name" }, h("slot", { key: 'a967242c07f2867cca29b119b526fc3a1034a50b', name: "application_name" })))));
+        return (h("div", { key: '3fc7690d65991d5e8c354fc11dd284a1beccf2d4', class: "top_bar_sidemenu_div" }, h("div", { key: 'dbd2042cd1408577ccbdff915265a2a867bd00b2', class: "vertical_tabs_div" }, h("gb-vertical-tabs", { key: '98deb2ca70086c65a3617d2ddbf1f657264b2aa9', size: "md", "first-tab-name": this.firstTabName, "second-tab-name": this.secondTabName, "third-tab-name": this.thirdTabName, "fourth-tab-name": this.fourthTabName, "fifth-tab-name": this.fifthTabName, type: "button_primary", "active-index": this.activeIndex, onTabItemClicked: this.onTabItemClicked.bind(this) })), h("div", { key: 'fb0811778e66b282b403bf6278748fc82f390a25', class: "wrapper" }, h("div", { key: 'b033f2685252917b4e3e9d7c240c6bdb58122235', class: "wrapper_pattern" }, h("img", { key: '81b693ae0dd898c3193c1f64b32a9fb16b491f1c', src: patternSrc, alt: "" })), h("div", { key: '6a53d78b460560d49cf466085536fbde7322b8e8', class: `application_icon`, innerHTML: this.leadingIconSvg }), h("div", { key: '111ccf2cb7fa1f495b8fed44de98600a33448693', class: "application_name" }, h("slot", { key: 'a591ce4a83220fbb27d07adc88591b65036b34f4', name: "application_name" })))));
     }
     static get is() { return "gb-top-bar-sidemenu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,11 +25,11 @@ export class GbVerticalTabs {
     }
     async handleTabClick(index, label) {
         this.activeIndex = index;
-        console.log({ index: index, label: label });
+        // console.log({index: index, label: label})
         this.tabItemClicked.emit({ index, label });
     }
     render() {
-        return (h("div", { key: 'ab167513f735565b5ccf687332e038ea718a5f95', class: `vertical_tab_div` }, h("gb-tab-button-base", { key: '2cc959d16cf9f54a6e3438fc6bd8f9c17745815d', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.firstTabName, current: this.activeIndex === 0, onClick: () => this.handleTabClick(0, this.firstTabName), alignment: "vertical" }), h("gb-tab-button-base", { key: '1c334049df7d69a5dadcf1537befaf4f4f5f6606', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.secondTabName, current: this.activeIndex === 1, onClick: () => this.handleTabClick(1, this.secondTabName), alignment: "vertical" }), this.thirdTabName && (h("gb-tab-button-base", { key: '7b450900c28220f110811358b51ffbf146ca360c', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.thirdTabName, current: this.activeIndex === 2, onClick: () => this.handleTabClick(2, this.thirdTabName), alignment: "vertical" })), this.fourthTabName && (h("gb-tab-button-base", { key: '492717bdd12b7c98ec2a9b516544785c1dde9644', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fourthTabName, current: this.activeIndex === 3, onClick: () => this.handleTabClick(3, this.fourthTabName), alignment: "vertical" })), this.fifthTabName && (h("gb-tab-button-base", { key: 'efb6a71432b4ec53ae28f0ea6e25d58940af0424', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fifthTabName, current: this.activeIndex === 4, onClick: () => this.handleTabClick(4, this.fifthTabName), alignment: "vertical" })), this.sixthTabName && (h("gb-tab-button-base", { key: '3004ec4bfcc64749b47ff07a115720b6e410002f', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.sixthTabName, current: this.activeIndex === 5, onClick: () => this.handleTabClick(5, this.sixthTabName), alignment: "vertical" })), this.seventhTabName && (h("gb-tab-button-base", { key: '59d1815f9f61b07bf9246b7cf6a63052f4812559', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.seventhTabName, current: this.activeIndex === 6, onClick: () => this.handleTabClick(6, this.seventhTabName), alignment: "vertical" })), this.eighthTabName && (h("gb-tab-button-base", { key: '6864230a2ec6557d9fa97ac3094bf1017ce44c7d', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.eighthTabName, current: this.activeIndex === 7, onClick: () => this.handleTabClick(7, this.eighthTabName), alignment: "vertical" })), this.ninthTabName && (h("gb-tab-button-base", { key: 'acf9a9a23217a3dc6bc89aa1c3d6cc4776fc391a', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.ninthTabName, current: this.activeIndex === 8, onClick: () => this.handleTabClick(8, this.ninthTabName), alignment: "vertical" })), this.tenthTabName && (h("gb-tab-button-base", { key: '7256415722548e666300483cc50fd52388379d2b', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.tenthTabName, current: this.activeIndex === 9, onClick: () => this.handleTabClick(9, this.tenthTabName), alignment: "vertical" })), this.eleventhTabName && (h("gb-tab-button-base", { key: 'afbba07bc46a59a3d531f3bdadcca4b690497d4b', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.eleventhTabName, current: this.activeIndex === 10, onClick: () => this.handleTabClick(10, this.eleventhTabName), alignment: "vertical" })), this.twelfthTabName && (h("gb-tab-button-base", { key: 'fd9a8c0bb50cf0dea52bc65d1e9f898916e42eee', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.twelfthTabName, current: this.activeIndex === 11, onClick: () => this.handleTabClick(11, this.twelfthTabName), alignment: "vertical" })), this.thirteenthTabName && (h("gb-tab-button-base", { key: 'ea5119867fbff6d950dda142558f3e3808283933', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.thirteenthTabName, current: this.activeIndex === 12, onClick: () => this.handleTabClick(12, this.thirteenthTabName), alignment: "vertical" })), this.fourteenthTabName && (h("gb-tab-button-base", { key: '62bd0d8a7a33cedcdf8cc5f4533692782e69ef06', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fourteenthTabName, current: this.activeIndex === 13, onClick: () => this.handleTabClick(13, this.fourteenthTabName), alignment: "vertical" })), this.fifteenthTabName && (h("gb-tab-button-base", { key: '2effe96d7425fbbe803dfa60a78e72ef65d29038', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fifteenthTabName, current: this.activeIndex === 14, onClick: () => this.handleTabClick(14, this.fifteenthTabName), alignment: "vertical" })), this.sixteenthTabName && (h("gb-tab-button-base", { key: '9dcbab3efbde96068b24936421fd5615b62c656a', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.sixteenthTabName, current: this.activeIndex === 15, onClick: () => this.handleTabClick(15, this.sixteenthTabName), alignment: "vertical" })), this.seventeenthTabName && (h("gb-tab-button-base", { key: '3482d2ff732ccddec64568e8863e5f50f145e8c0', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.seventeenthTabName, current: this.activeIndex === 16, onClick: () => this.handleTabClick(16, this.seventeenthTabName), alignment: "vertical" })), this.eighteenthTabName && (h("gb-tab-button-base", { key: 'f2b5832093b44b3483c9f1ce1c3a3cb59d9b7bff', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.eighteenthTabName, current: this.activeIndex === 17, onClick: () => this.handleTabClick(17, this.eighteenthTabName), alignment: "vertical" })), this.nineteenthTabName && (h("gb-tab-button-base", { key: '5f27ba82ce4bee4f7515c31e8be471d2558cd693', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.nineteenthTabName, current: this.activeIndex === 18, onClick: () => this.handleTabClick(18, this.nineteenthTabName), alignment: "vertical" })), this.twentiethTabName && (h("gb-tab-button-base", { key: 'c5ddae3be74e1ef494161be615272d40db3e636e', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.twentiethTabName, current: this.activeIndex === 19, onClick: () => this.handleTabClick(19, this.twentiethTabName), alignment: "vertical" }))));
+        return (h("div", { key: 'e1f45b05856b8081c5c1c73e50a0da5cb3069df1', class: `vertical_tab_div` }, h("gb-tab-button-base", { key: '661d8f801e0b1d13682910eaf12fc9d45e0ae30b', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.firstTabName, current: this.activeIndex === 0, onClick: () => this.handleTabClick(0, this.firstTabName), alignment: "vertical" }), h("gb-tab-button-base", { key: '11d51aac6ce00d123846f8b36d04fe8389c28769', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.secondTabName, current: this.activeIndex === 1, onClick: () => this.handleTabClick(1, this.secondTabName), alignment: "vertical" }), this.thirdTabName && (h("gb-tab-button-base", { key: '9e3d935630fd8cfd929e2fc27f10c82ff89810ea', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.thirdTabName, current: this.activeIndex === 2, onClick: () => this.handleTabClick(2, this.thirdTabName), alignment: "vertical" })), this.fourthTabName && (h("gb-tab-button-base", { key: 'b2ddfbfde56ebb8e5f7a274df43a7bfc37aa68fa', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fourthTabName, current: this.activeIndex === 3, onClick: () => this.handleTabClick(3, this.fourthTabName), alignment: "vertical" })), this.fifthTabName && (h("gb-tab-button-base", { key: 'afcd119a02794f9bac0449c0ed75478f5df5836a', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fifthTabName, current: this.activeIndex === 4, onClick: () => this.handleTabClick(4, this.fifthTabName), alignment: "vertical" })), this.sixthTabName && (h("gb-tab-button-base", { key: 'd74dd33f25afddf4c7939ea82d3d10f2ce0a6d1f', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.sixthTabName, current: this.activeIndex === 5, onClick: () => this.handleTabClick(5, this.sixthTabName), alignment: "vertical" })), this.seventhTabName && (h("gb-tab-button-base", { key: 'c12e559b958eb708ca5ee2c86c33e052839fe927', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.seventhTabName, current: this.activeIndex === 6, onClick: () => this.handleTabClick(6, this.seventhTabName), alignment: "vertical" })), this.eighthTabName && (h("gb-tab-button-base", { key: 'bf633e53b566a1f42c1abcd849bedc17f72252f5', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.eighthTabName, current: this.activeIndex === 7, onClick: () => this.handleTabClick(7, this.eighthTabName), alignment: "vertical" })), this.ninthTabName && (h("gb-tab-button-base", { key: 'afbe49b320b1da628c6d3915ec1fce1daa758b3c', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.ninthTabName, current: this.activeIndex === 8, onClick: () => this.handleTabClick(8, this.ninthTabName), alignment: "vertical" })), this.tenthTabName && (h("gb-tab-button-base", { key: 'c2527ac6acb425eb47430fbd48e4beedcb004b77', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.tenthTabName, current: this.activeIndex === 9, onClick: () => this.handleTabClick(9, this.tenthTabName), alignment: "vertical" })), this.eleventhTabName && (h("gb-tab-button-base", { key: '4d717a75c321e41d47011e573f5f04188d850316', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.eleventhTabName, current: this.activeIndex === 10, onClick: () => this.handleTabClick(10, this.eleventhTabName), alignment: "vertical" })), this.twelfthTabName && (h("gb-tab-button-base", { key: '4ce1ef75939d1cf0c50c60e5b49ead97cb1cd3e1', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.twelfthTabName, current: this.activeIndex === 11, onClick: () => this.handleTabClick(11, this.twelfthTabName), alignment: "vertical" })), this.thirteenthTabName && (h("gb-tab-button-base", { key: '90a7d4797ce15e248baa9d51b5011be7b0cfff8e', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.thirteenthTabName, current: this.activeIndex === 12, onClick: () => this.handleTabClick(12, this.thirteenthTabName), alignment: "vertical" })), this.fourteenthTabName && (h("gb-tab-button-base", { key: '38e2b8a01c6fba2a37f61f830f1ef3dcad21415d', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fourteenthTabName, current: this.activeIndex === 13, onClick: () => this.handleTabClick(13, this.fourteenthTabName), alignment: "vertical" })), this.fifteenthTabName && (h("gb-tab-button-base", { key: 'a3e17c83b0f3b7ce941c2998cb2ffd0ccc81ba03', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fifteenthTabName, current: this.activeIndex === 14, onClick: () => this.handleTabClick(14, this.fifteenthTabName), alignment: "vertical" })), this.sixteenthTabName && (h("gb-tab-button-base", { key: '862aaadce009f7626a4bebe09645f1dbb9788b38', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.sixteenthTabName, current: this.activeIndex === 15, onClick: () => this.handleTabClick(15, this.sixteenthTabName), alignment: "vertical" })), this.seventeenthTabName && (h("gb-tab-button-base", { key: 'fdb201e81f112a2aae3b5cf0c26895fc014b9833', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.seventeenthTabName, current: this.activeIndex === 16, onClick: () => this.handleTabClick(16, this.seventeenthTabName), alignment: "vertical" })), this.eighteenthTabName && (h("gb-tab-button-base", { key: '3a7e4f3908a84a74f2f90b94c41ed3825e713bb2', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.eighteenthTabName, current: this.activeIndex === 17, onClick: () => this.handleTabClick(17, this.eighteenthTabName), alignment: "vertical" })), this.nineteenthTabName && (h("gb-tab-button-base", { key: '4abf0d76e7cb5ccfabe3a7f1ca120cd831732591', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.nineteenthTabName, current: this.activeIndex === 18, onClick: () => this.handleTabClick(18, this.nineteenthTabName), alignment: "vertical" })), this.twentiethTabName && (h("gb-tab-button-base", { key: 'a8693bd48ca0a21c948552be02d525d914438e84', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.twentiethTabName, current: this.activeIndex === 19, onClick: () => this.handleTabClick(19, this.twentiethTabName), alignment: "vertical" }))));
     }
     static get is() { return "gb-vertical-tabs"; }
     static get encapsulation() { return "shadow"; }