globuswebcomponents 2.1.1 → 2.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/gb-avatar_19.cjs.entry.js +5 -5
- package/dist/cjs/gb-avatar_19.cjs.entry.js.map +1 -1
- package/dist/collection/components/gb-button/readme.md +2 -0
- package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.js +5 -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-ANBE_QZ8.js → p-DY4bY4pE.js} +7 -7
- package/dist/components/p-DY4bY4pE.js.map +1 -0
- package/dist/docs.json +1 -1
- package/dist/esm/gb-avatar_19.entry.js +5 -5
- package/dist/esm/gb-avatar_19.entry.js.map +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-739f986a.entry.js → p-9d290202.entry.js} +2 -2
- package/dist/globuscomponents/p-9d290202.entry.js.map +1 -0
- package/dist/globuscomponents/readme.md +2 -0
- package/package.json +1 -1
- package/dist/components/p-ANBE_QZ8.js.map +0 -1
- package/dist/globuscomponents/p-739f986a.entry.js.map +0 -1
|
@@ -635,9 +635,9 @@ const GbInputDropdown = class {
|
|
|
635
635
|
this.showCloseButton = false;
|
|
636
636
|
}
|
|
637
637
|
async clearSelection() {
|
|
638
|
-
if (this.selectedItem.length > 0)
|
|
638
|
+
if (this.selectedItem && this.selectedItem.length > 0)
|
|
639
639
|
this.selectedItem = [];
|
|
640
|
-
if (this.selectedItems.length > 0)
|
|
640
|
+
if (this.selectedItems && this.selectedItems.length > 0)
|
|
641
641
|
this.selectedItems = [];
|
|
642
642
|
}
|
|
643
643
|
clearInput() {
|
|
@@ -899,16 +899,16 @@ const GbInputDropdown = class {
|
|
|
899
899
|
const emptyStateBackground = index.getAssetPath('assets/empty-state-background.svg');
|
|
900
900
|
const illustration = index.getAssetPath('assets/empty-state-no-data.svg');
|
|
901
901
|
return [
|
|
902
|
-
index.h("div", { key: '
|
|
902
|
+
index.h("div", { key: '9476c1ae40676c5bbf17c2ef283850310cbc9cf0', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, index.h("div", { key: 'a651093a4f951031a095196ba2f7e20710bbef80', class: `input_with_label` }, this.showLabel && (index.h("p", { key: '77172cd45b8a2bea5592a9369ccb8cb1dc3276f2', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())), index.h("div", { key: '64a5c1a64d3404d3315adc869a6e7bb2037e41aa', 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: '122cbda92c5904562de677e98e502ace52d41dc9', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: '88bffc8a34dce9c073d0066824e83cebfd946100', 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: 'af2c82e4504a2734243bd4602423c5f929699dfe', 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: 'b2dc9f8971e79332f954163ec62116b77772bce0', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: 'fd0304d232534dd277c098976d866c228c64a5e9', 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: 'f2d0f243582da903d18c27f7f660d7d9f8d17592', 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: 'ff71e2f9704df9624c77564eca9def4ec5aafc9a', 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: '89330769e5fd234565c94dd6e7a8aa5c5d8ab810', 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: 'ef6a37c17e4b0f9eda5799d5382ee3dab9086037', 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: 'c9d373e00c8b1aca23e45afff29a24912dbde8dd', class: "placeholder" }, index.h("p", { key: 'c98e84a450417c0aa28f827ff4264159eb8528ca', class: "text-md-regular", style: { color: '#CDD5DF' } }, this.placeholder))))), this.state === 'default' && this.type === 'search' && (index.h("div", { key: '74612064c6e10fbf90d6e9021dacaa033a8b2e3c', class: "search_input" }, index.h("input", { key: '394b0c25f6a28f4e94d4b9c73f998f51ee649240', 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: '903b80435a72854f985e4d9c59cef63807a86b4b', 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: '3d215f1f8251916b7067e43798f222f6514a3bc4', class: `content` }, index.h("div", { key: '4b2f377bc69d0e08d67efe662bf9279552cb5343', 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
|
|
903
903
|
.split(' ')
|
|
904
904
|
.map(part => part.charAt(0).toUpperCase())
|
|
905
905
|
.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
|
|
906
906
|
.split(' ')
|
|
907
907
|
.map(part => part.charAt(0).toUpperCase())
|
|
908
|
-
.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: '
|
|
908
|
+
.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: '8a55b27dac8fc6e38843c8b1b4476c927b37054e', 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: 'e3e249aea81cfc10bd8c020b2fa6809cc6e1f4cd', class: `content` }, index.h("div", { key: '97ca758d752a3f2929ba71c00b249177ae5bc5ad', 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
|
|
909
909
|
.split(' ')
|
|
910
910
|
.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" }, 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: '
|
|
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" }, 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: '9ffa2f6f12380cdf1ff7051a7b0275377fde7992', 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: '1287068001477bb29449096ac54d219b0c9630b9', class: `help_icon` }, index.h("gb-help-tooltip", { key: '21180ead2db35db1907ea13cf2a921da50ce82bc', "show-supporting-text": true }, index.h("slot", { key: 'd070e9998a1316b35a910bde4eb15e53e8636cac', name: "tooltip_label", slot: "label" }), index.h("slot", { key: '98939fd478adcad9ffa904cdd9570c4ffb25dc2c', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (index.h("div", { key: '93be8c8f4be0e6c1468fad05f766022cc6310576', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, index.h("svg", { key: 'fa7fed08e31d5c08a6cd9b28ceab617001a4b511', 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: '697b1f206c65f093921b52082f55ef0e1b06fb3b', 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: '6d37f612f26832fb93cba6358fbda909cfa8bfbf', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (index.h("div", { key: '5828fe6006bb432382b16e2dec65fe31262cd755', class: "dropdown_search_field" }, index.h("gb-input-field", { key: '21465cede7f0de8ac75e76a0a85ec4126f7397cb', 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 ? (
|
|
912
912
|
//Empty state for when there are no search results
|
|
913
913
|
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
|
|
914
914
|
.split(' ')
|