globuswebcomponents 2.1.3 → 2.1.4
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 +9 -5
- package/dist/cjs/gb-avatar_19.cjs.entry.js.map +1 -1
- package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.js +9 -5
- 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-BaSWXbRD.js} +11 -7
- package/dist/components/p-BaSWXbRD.js.map +1 -0
- package/dist/docs.json +1 -1
- package/dist/esm/gb-avatar_19.entry.js +9 -5
- 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-abdedda8.entry.js} +2 -2
- package/dist/globuscomponents/p-abdedda8.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
|
@@ -635,10 +635,14 @@ 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
|
+
this.unselectedItems.push(this.selectedItem);
|
|
639
640
|
this.selectedItem = [];
|
|
640
|
-
|
|
641
|
+
}
|
|
642
|
+
if (this.selectedItems && this.selectedItems.length > 0) {
|
|
643
|
+
this.unselectedItems.push(this.selectedItems);
|
|
641
644
|
this.selectedItems = [];
|
|
645
|
+
}
|
|
642
646
|
if (this.value && this.value.length > 0)
|
|
643
647
|
this.value = [];
|
|
644
648
|
this.state = 'default';
|
|
@@ -902,16 +906,16 @@ const GbInputDropdown = class {
|
|
|
902
906
|
const emptyStateBackground = index.getAssetPath('assets/empty-state-background.svg');
|
|
903
907
|
const illustration = index.getAssetPath('assets/empty-state-no-data.svg');
|
|
904
908
|
return [
|
|
905
|
-
index.h("div", { key: '
|
|
909
|
+
index.h("div", { key: 'b0c89bbb6d8aaf063585ac04861be465e5196dea', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, index.h("div", { key: '91d84ff5d4e871b55f06eedf829769a54d6fb03f', class: `input_with_label` }, this.showLabel && (index.h("p", { key: '30999164d17d6aabce5218b5fec097f39f6932d7', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())), index.h("div", { key: '560b0129f09f3f44d42f337b33241e2381292527', 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: '457b7bdcbb62342a1d673b3a971b59979c8af40f', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: '9966002ac39355a6756319abda50a98052587830', 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: '3c2cb863f5783f47c66e2bc7cd831d8bfc8747f9', 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: '60a025e1bf1b865767ae7dad24191417c158b886', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: '92727c9a93350c599a17cbdab4eb53c10c466b34', 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: '872aff73ef6d38d8086185e916d181d9d6ea9d6b', 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: '79f0e33cd3768d8bd1f53d8fc7dd85053a55a9d0', 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: 'bb8e89565cb6f4eab70fb8568fb5b01925e84d33', 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: '5ad31a87da94adeb7bdc33f29304ae85e61e502e', 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: '60e995711e996d6a6fb06b64c59f8b1cf55c5f28', class: "placeholder" }, index.h("p", { key: 'bdc9067a96749e3bc6832f73fab8248c253198db', class: "text-md-regular", style: { color: '#CDD5DF' } }, this.placeholder))))), this.state === 'default' && this.type === 'search' && (index.h("div", { key: '3c6b550f01d974788cf1cef384c031475158e32d', class: "search_input" }, index.h("input", { key: '30cab868bcacbda87e4de435af03a5742e71ec0f', 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: 'eb47171bd1174a5cd811a63c0720a1f33e3aa75f', 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: '176050dfa9f1b39c0ad8ab7940dab4e7d1d1c798', class: `content` }, index.h("div", { key: 'f61d2e25a4d2baf90d360c48b78f7527cdc7208c', 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
910
|
.split(' ')
|
|
907
911
|
.map(part => part.charAt(0).toUpperCase())
|
|
908
912
|
.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
913
|
.split(' ')
|
|
910
914
|
.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: '
|
|
915
|
+
.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: '79a39a79b89185d85ff4e44c858c4d2be2a07dfb', 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: 'd271bad0e191809b72ff8a3d0c360dfa7c307d94', class: `content` }, index.h("div", { key: 'c9e338ab932eaa49737b1c7647d1d164fcc9d795', 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
916
|
.split(' ')
|
|
913
917
|
.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: '
|
|
918
|
+
.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: '08d44bb853a216ccc5e09b04264542fe93b6cf2d', 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: '5900d1f79b2f3478cdb5fbae475e2c5a6b36cd9f', class: `help_icon` }, index.h("gb-help-tooltip", { key: 'dad49ce2079206b93b376304b7f0ac335268dda2', "show-supporting-text": true }, index.h("slot", { key: 'a9c46bd98ca5ea7af42d503fb487439c90c58c63', name: "tooltip_label", slot: "label" }), index.h("slot", { key: '99ecd4acb4553110bc3135076e7f3ba181042bdf', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (index.h("div", { key: 'c26728616a1d249cebd7e8e6b6693fd79f4cecd8', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, index.h("svg", { key: 'cad42c232368bf9b022b812c9460c35cb3076a4c', 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: '6a4e7cbacc4721060e3e260c4b1b69a0204ba800', 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: '7b8113f77e69f056de923398bbd425f66865f4a5', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (index.h("div", { key: '94e118a44cba6248acd84301fdb5275f212686d3', class: "dropdown_search_field" }, index.h("gb-input-field", { key: '38bb289d0748d6fe36f43d143085f095f0cb5b46', 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
919
|
//Empty state for when there are no search results
|
|
916
920
|
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
921
|
.split(' ')
|