globuswebcomponents 2.1.3 → 2.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/gb-avatar_19.cjs.entry.js +29 -23
- package/dist/cjs/gb-avatar_19.cjs.entry.js.map +1 -1
- package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.js +31 -24
- package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.js.map +1 -1
- package/dist/components/gb-input-dropdown.js +1 -1
- package/dist/components/gb-pagination.js +1 -1
- package/dist/components/{p-BV7YvAEy.js → p-ByrZMFB1.js} +31 -25
- package/dist/components/p-ByrZMFB1.js.map +1 -0
- package/dist/docs.json +2 -2
- package/dist/esm/gb-avatar_19.entry.js +29 -23
- package/dist/esm/gb-avatar_19.entry.js.map +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-216b0986.entry.js → p-3ea67690.entry.js} +2 -2
- package/dist/globuscomponents/p-3ea67690.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/components/p-BV7YvAEy.js.map +0 -1
- package/dist/globuscomponents/p-216b0986.entry.js.map +0 -1
|
@@ -591,23 +591,23 @@ const GbInputDropdown = class {
|
|
|
591
591
|
this.text = false;
|
|
592
592
|
this.leadingIcon = '';
|
|
593
593
|
this.items = [
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
594
|
+
{ name: 'Mock Item A', username: 1 },
|
|
595
|
+
{ name: 'Mock Item B', username: 3 },
|
|
596
|
+
{ name: 'Mock Item C', username: 3 },
|
|
597
|
+
{ name: 'Mock Item D', username: 3 },
|
|
598
|
+
{ name: 'Mock Item E', username: 3 },
|
|
599
|
+
45,
|
|
600
|
+
50,
|
|
601
|
+
20,
|
|
602
|
+
25,
|
|
603
|
+
90,
|
|
604
|
+
92,
|
|
605
|
+
53,
|
|
606
|
+
'Activated',
|
|
607
|
+
'Deactivated',
|
|
608
|
+
'John Doe',
|
|
609
|
+
'John smith',
|
|
610
|
+
'Jane leo'
|
|
611
611
|
];
|
|
612
612
|
this.value = [
|
|
613
613
|
// { name: 'Mock Item A', username: 1, selected: false },
|
|
@@ -635,12 +635,18 @@ const GbInputDropdown = class {
|
|
|
635
635
|
this.showCloseButton = false;
|
|
636
636
|
}
|
|
637
637
|
async clearSelection() {
|
|
638
|
-
if (this.selectedItem && this.selectedItem.length > 0)
|
|
638
|
+
if (this.selectedItem && this.selectedItem.length > 0) {
|
|
639
639
|
this.selectedItem = [];
|
|
640
|
-
|
|
640
|
+
}
|
|
641
|
+
if (this.selectedItems && this.selectedItems.length > 0) {
|
|
641
642
|
this.selectedItems = [];
|
|
642
|
-
|
|
643
|
+
}
|
|
644
|
+
if (this.value && this.value.length > 0) {
|
|
643
645
|
this.value = [];
|
|
646
|
+
this.selectedItems = [];
|
|
647
|
+
this.selectedItem = [];
|
|
648
|
+
}
|
|
649
|
+
this.unselectedItems = [...this.items];
|
|
644
650
|
this.state = 'default';
|
|
645
651
|
}
|
|
646
652
|
clearInput() {
|
|
@@ -902,16 +908,16 @@ const GbInputDropdown = class {
|
|
|
902
908
|
const emptyStateBackground = index.getAssetPath('assets/empty-state-background.svg');
|
|
903
909
|
const illustration = index.getAssetPath('assets/empty-state-no-data.svg');
|
|
904
910
|
return [
|
|
905
|
-
index.h("div", { key: '
|
|
911
|
+
index.h("div", { key: 'bfda5fbfdfc9f0c2057a042cca26fdd4560e004e', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, index.h("div", { key: 'c6163672e67ba7eedb0671c25af90705d76d081f', class: `input_with_label` }, this.showLabel && (index.h("p", { key: '9c8dc3ad0a146755ea19a4a4f34b65b600c025e2', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())), index.h("div", { key: '5827afbbc8027dcd564ad2bab2cb328895309f65', class: `input_dropdown_div ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''} ${this.type === 'tags' ? 'tag' : ''} ${this.dropdownOpen ? 'focused' : ''}`, onClick: e => this.toggleDropdown(e) }, this.type === 'icon_leading' && (index.h("svg", { key: 'fd30a65af1cdfae31c112874eb52d32c353eae1a', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: 'a5d9089e1d9b1280324c8c085aad1c12b78497ea', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#697586", "stroke-width": "1.66667" }), index.h("path", { key: 'ed0082c3a4563b97c42cf9598a7b1f1ec25d684c', d: "M13.75 5.41667C13.75 7.48774 12.0711 9.16667 10 9.16667C7.92893 9.16667 6.25 7.48774 6.25 5.41667C6.25 3.3456 7.92893 1.66667 10 1.66667C12.0711 1.66667 13.75 3.3456 13.75 5.41667Z", stroke: "#697586", "stroke-width": "1.66667" }))), this.type === 'avatar_leading' && (index.h(index.Fragment, null, this.state === 'default' && (index.h("svg", { key: '51eb3d93c4c9b038bed9bb9466ca5db5df891043', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: 'b6d4e4b103117ec50b90e05d59da5761c0cf7ded', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#4B5565", "stroke-width": "1.66667" }), index.h("path", { key: '9b8c5d44990da8d01847ad0b43d1cda84d3a310a', d: "M13.75 5.41666C13.75 7.48772 12.0711 9.16666 10 9.16666C7.92893 9.16666 6.25 7.48772 6.25 5.41666C6.25 3.34559 7.92893 1.66666 10 1.66666C12.0711 1.66666 13.75 3.34559 13.75 5.41666Z", stroke: "#4B5565", "stroke-width": "1.66667" }))), this.state === 'filled' && (index.h("gb-avatar", { key: '47faaf459ee95ab13a581a6eda91b218a3cad186', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, this.selectedItems.map(item => (index.h(index.Fragment, null, typeof item === 'object' ? (index.h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase()))) : (index.h("h1", { slot: "initials" }, item.split(' ').map(part => part.charAt(0).toUpperCase())))))))))), this.showLeadingIcon && index.h(index.Fragment, null, this.type === 'search' || this.type === 'tags' ? index.h("div", { class: `icon`, innerHTML: this.leadingIconSvg }) : null), this.type === 'dot_leading' && (index.h("svg", { key: 'c822ae3d4f61cf1dcc5c578b52a2698175ea2eba', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `dot ${this.size}` }, index.h("circle", { key: '13bba0beadaabccd19ce9e56c2fb05bb04ec417d', cx: "5", cy: "5", r: "4", fill: "#079455" }))), index.h(index.Fragment, null, this.state === 'default' && this.type !== 'search' && (index.h(index.Fragment, null, this.placeholder && (index.h("div", { key: '4f133bd84daf82b04b92c2e3f1185d2d4272e755', class: "placeholder" }, index.h("p", { key: '3ecf99b7f9fa3798460ae751759d869b9a8d6d7f', class: "text-md-regular", style: { color: '#CDD5DF' } }, this.placeholder))))), this.state === 'default' && this.type === 'search' && (index.h("div", { key: 'be7562fd0ce75bb2e68d2fa99372fc23d741784c', class: "search_input" }, index.h("input", { key: '52663e112806f68f68948c2574db6f9846b6fbad', type: "text", placeholder: this.placeholder, class: "text-md-regular", ref: el => (this.inputRef = el), onInput: this.emitInputValueToUseForSearch.bind(this) }), this.showCloseButton && (index.h("gb-button", { key: '7d6d50a5acb7da4e750fd084338b9c93d783d32c', class: `close_button ${this.size}`, size: this.size, hierarchy: "tertiary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/cancel-01.svg", onClick: () => this.clearInput() })))), this.state === 'filled' && (index.h(index.Fragment, null, index.h("div", { key: 'a702070aaefbd3968bd5ce968c615be93e7a441f', class: `content` }, index.h("div", { key: '2b42f86291fc57c673bd03ed07a0872bef59499d', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (index.h(index.Fragment, null, this.value.length === 0 ? (index.h(index.Fragment, null, this.selectedItems.map((item, index$1) => typeof item === 'object' ? (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, index.h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), index.h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
|
|
906
912
|
.split(' ')
|
|
907
913
|
.map(part => part.charAt(0).toUpperCase())
|
|
908
914
|
.join(''))))) : (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, index.h("p", { class: "text-xs-medium" }, item))))))) : (index.h(index.Fragment, null, this.value.map((item, index$1) => typeof item === 'object' ? (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, index.h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), index.h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
|
|
909
915
|
.split(' ')
|
|
910
916
|
.map(part => part.charAt(0).toUpperCase())
|
|
911
|
-
.join(''))))) : (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, index.h("p", { class: "text-xs-medium" }, item))))))))) : (index.h("p", { class: "selected_text text-md-regular" }, this.value.length === 0 ? ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.name) || this.selectedItem : index.h(index.Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (index.h("div", { key: '
|
|
917
|
+
.join(''))))) : (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, index.h("p", { class: "text-xs-medium" }, item))))))))) : (index.h("p", { class: "selected_text text-md-regular" }, this.value.length === 0 ? ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.name) || this.selectedItem : index.h(index.Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (index.h("div", { key: '1da1f88691d1ba6829b17fd87ebd8feb93242a81', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (index.h(index.Fragment, null, this.value.length === 0 ? index.h(index.Fragment, null, this.selectedItem.username) : index.h(index.Fragment, null, this.value.map(item => typeof item === 'object' && item.username))))))))), this.state === 'disabled' && (index.h(index.Fragment, null, index.h("div", { key: 'c3255abf54fb87432e6ff76de2b4230013e90f37', class: `content` }, index.h("div", { key: '411efcd4c4f30958d2bc879a326ac26bb606ac61', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (index.h(index.Fragment, null, this.value.map((item, index$1) => typeof item === 'object' ? (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, index.h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), index.h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
|
|
912
918
|
.split(' ')
|
|
913
919
|
.map(part => part.charAt(0).toUpperCase())
|
|
914
|
-
.join(''))))) : (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, index.h("p", { class: "text-xs-medium" }, item))))))) : (index.h(index.Fragment, null, index.h(index.Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (index.h("div", { key: '
|
|
920
|
+
.join(''))))) : (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, index.h("p", { class: "text-xs-medium" }, item))))))) : (index.h(index.Fragment, null, index.h(index.Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (index.h("div", { key: '5cab688232fd9d84313c57710fcf356c85570ac1', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (index.h(index.Fragment, null, this.value.length === 0 ? index.h(index.Fragment, null, this.selectedItem.username) : index.h(index.Fragment, null, this.value.map(item => typeof item === 'object' && index.h(index.Fragment, null, item.username))))))))))), this.showHelpIcon && (index.h("div", { key: 'e1042cd1e053402b8be176c7444e5d583be957a2', class: `help_icon` }, index.h("gb-help-tooltip", { key: 'b1deed6cd8fe39dcedc434790dfdd21951163731', "show-supporting-text": true }, index.h("slot", { key: 'b19c26e60c1192983a52fb7673b561b7ec901259', name: "tooltip_label", slot: "label" }), index.h("slot", { key: '59866f3eaa27f7f29a772c656fb45c4afea71d6c', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (index.h("div", { key: '721a877ec813c1efecccaf20730e49a976a471ce', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, index.h("svg", { key: '345c268b9263d13960530f0a1f7b3392f81943d1', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, index.h("path", { key: 'f4d7c410f307963fb4beae4677a03915140f3d61', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#697586", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h(index.Fragment, null, this.dropdownOpen && (index.h("div", { key: '38b9ccb092f93f34ee7804cf20c4d093431a7ba4', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (index.h("div", { key: '3e0599e1e5bcd78799c42eac38237b3b44820dfb', class: "dropdown_search_field" }, index.h("gb-input-field", { key: '0ed7027538ec1b31dc370390d8959f721451f6ae', size: "sm", value: this.inputValue, "show-close-button": this.inputValue ? true : false, "icon-swap": "assets/search-01.svg", placeholder: this.placeholder, type: "icon_leading", labelText: "label", idOfInput: "3", onInputValueChanged: this.searchItemsInDropdownMenu.bind(this) }))), this.searchItem ? (index.h(index.Fragment, null, this.searchItem !== '' && this.searchResults.length > 0 ? (index.h(index.Fragment, null, this.searchResults.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (index.h(index.Fragment, null, index.h("p", { slot: "name" }, item.name), index.h("p", { slot: "supporting_text" }, item.username))) : (index.h("p", { slot: "name" }, item))))))) : this.searchItem !== '' && this.searchResults.length === 0 ? (
|
|
915
921
|
//Empty state for when there are no search results
|
|
916
922
|
index.h("div", { class: "empty_state" }, index.h("img", { src: emptyStateBackground, class: "background", alt: "" }), index.h("div", { class: "message_background" }, index.h("img", { src: illustration, alt: "", class: "illustration" }), index.h("p", { class: "message text-md-semi-bold" }, "No results available")))) : null)) : (index.h(index.Fragment, null, this.type === 'tags' ? (index.h(index.Fragment, null, this.selectedItems.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: true, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (index.h(index.Fragment, null, index.h("p", { slot: "name" }, item.name), index.h("p", { slot: "supporting_text" }, item.username), index.h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase())))) : (index.h(index.Fragment, null, index.h("p", { slot: "name" }, item), index.h("h1", { slot: "initials" }, item.split(' ').map(part => part.charAt(0).toUpperCase()))))))), this.unselectedItems.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: false, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (index.h(index.Fragment, null, index.h("p", { slot: "name" }, item.name), index.h("p", { slot: "supporting_text" }, item.username))) : (index.h("p", { slot: "name" }, item))))))) : (index.h(index.Fragment, null, this.items.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), color: this.color, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (index.h(index.Fragment, null, index.h("p", { slot: "name" }, item.name), index.h("h1", { slot: "initials" }, item.name
|
|
917
923
|
.split(' ')
|