xv-webcomponents 0.1.46 → 0.1.48
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/{index-MLh9SbX2.js → index-CjhPTfz8.js} +41 -14
- package/dist/cjs/index-CjhPTfz8.js.map +1 -0
- package/dist/cjs/loader.cjs.js +3 -4
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/cjs/xv-accordion-v2_38.cjs.entry.js +79072 -0
- package/dist/cjs/xv-accordion-v2_38.cjs.entry.js.map +1 -0
- package/dist/cjs/xv-breadcrumbs-v2.cjs.entry.js +1 -1
- package/dist/cjs/xv-webcomponents.cjs.js +4 -5
- package/dist/cjs/xv-webcomponents.cjs.js.map +1 -1
- package/dist/collection/collection-manifest.json +5 -1
- package/dist/collection/components/xv-datepicker/xv-datepicker.css +401 -0
- package/dist/collection/components/xv-datepicker/xv-datepicker.js +570 -0
- package/dist/collection/components/xv-datepicker/xv-datepicker.js.map +1 -0
- package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js +1 -1
- package/dist/collection/components/xv-dropdown/xv-dropdown.js +2 -2
- package/dist/collection/components/xv-dropdown/xv-dropdown.js.map +1 -1
- package/dist/collection/components/xv-file-uploader/xv-file-uploader.js +2 -2
- package/dist/collection/components/xv-footer/xv-footer.js +1 -1
- package/dist/collection/components/xv-header/xv-header.js +1 -1
- package/dist/collection/components/xv-link/xv-link.js +1 -1
- package/dist/collection/components/xv-modal/xv-modal.js +1 -1
- package/dist/collection/components/xv-notification/xv-notification.css +1 -1
- package/dist/collection/components/xv-notification/xv-notification.js +1 -1
- package/dist/collection/components/xv-number-input/xv-number-input.js +2 -2
- package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js +1 -1
- package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.js +1 -1
- package/dist/collection/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.js +1 -1
- package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js +1 -1
- package/dist/collection/components/xv-slider/xv-slider.css +196 -0
- package/dist/collection/components/xv-slider/xv-slider.js +259 -0
- package/dist/collection/components/xv-slider/xv-slider.js.map +1 -0
- package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.js +1 -1
- package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.js +1 -1
- package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js +1 -1
- package/dist/collection/components/xv-table/xv-table.js +1 -1
- package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js +1 -1
- package/dist/collection/components/xv-tag/xv-tag.js +1 -1
- package/dist/collection/components/xv-text-input/xv-text-input.js +2 -2
- package/dist/collection/components/xv-textarea/xv-textarea.css +254 -0
- package/dist/collection/components/xv-textarea/xv-textarea.js +411 -0
- package/dist/collection/components/xv-textarea/xv-textarea.js.map +1 -0
- package/dist/collection/components/xv-tile/xv-tile.css +294 -0
- package/dist/collection/components/xv-tile/xv-tile.js +264 -0
- package/dist/collection/components/xv-tile/xv-tile.js.map +1 -0
- package/dist/collection/components/xv-toggle-tip/xv-toggle-tip.js +1 -1
- package/dist/collection/components/xv-tooltip/xv-tooltip.js +2 -2
- package/dist/esm/{index-DLYJiP99.js → index-BQoQLd_U.js} +41 -15
- package/dist/esm/index-BQoQLd_U.js.map +1 -0
- package/dist/esm/loader.js +3 -4
- package/dist/esm/loader.js.map +1 -1
- package/dist/esm/xv-accordion-v2_38.entry.js +79033 -0
- package/dist/esm/xv-accordion-v2_38.entry.js.map +1 -0
- package/dist/esm/xv-breadcrumbs-v2.entry.js +1 -1
- package/dist/esm/xv-webcomponents.js +4 -5
- package/dist/esm/xv-webcomponents.js.map +1 -1
- package/dist/types/components/xv-datepicker/xv-datepicker.d.ts +69 -0
- package/dist/types/components/xv-slider/xv-slider.d.ts +20 -0
- package/dist/types/components/xv-textarea/xv-textarea.d.ts +27 -0
- package/dist/types/components/xv-tile/xv-tile.d.ts +24 -0
- package/dist/types/components.d.ts +344 -0
- package/dist/types/stencil-public-runtime.d.ts +1 -1
- package/dist/xv-webcomponents/loader.esm.js.map +1 -1
- package/dist/xv-webcomponents/p-50fb934d.entry.js +2 -0
- package/dist/xv-webcomponents/p-50fb934d.entry.js.map +1 -0
- package/dist/xv-webcomponents/p-BQoQLd_U.js +3 -0
- package/dist/xv-webcomponents/p-BQoQLd_U.js.map +1 -0
- package/dist/xv-webcomponents/{p-851c4716.entry.js → p-a8d785da.entry.js} +2 -2
- package/dist/xv-webcomponents/xv-webcomponents.esm.js +1 -1
- package/dist/xv-webcomponents/xv-webcomponents.esm.js.map +1 -1
- package/package.json +7 -4
- package/dist/cjs/app-globals-V2Kpy_OQ.js +0 -8
- package/dist/cjs/app-globals-V2Kpy_OQ.js.map +0 -1
- package/dist/cjs/index-MLh9SbX2.js.map +0 -1
- package/dist/cjs/xv-accordion-v2_34.cjs.entry.js +0 -3542
- package/dist/cjs/xv-accordion-v2_34.cjs.entry.js.map +0 -1
- package/dist/esm/app-globals-DQuL1Twl.js +0 -6
- package/dist/esm/app-globals-DQuL1Twl.js.map +0 -1
- package/dist/esm/index-DLYJiP99.js.map +0 -1
- package/dist/esm/xv-accordion-v2_34.entry.js +0 -3507
- package/dist/esm/xv-accordion-v2_34.entry.js.map +0 -1
- package/dist/xv-webcomponents/p-DLYJiP99.js +0 -3
- package/dist/xv-webcomponents/p-DLYJiP99.js.map +0 -1
- package/dist/xv-webcomponents/p-DQuL1Twl.js +0 -2
- package/dist/xv-webcomponents/p-DQuL1Twl.js.map +0 -1
- package/dist/xv-webcomponents/p-d96c1b6a.entry.js +0 -2
- package/dist/xv-webcomponents/p-d96c1b6a.entry.js.map +0 -1
- /package/dist/xv-webcomponents/{p-851c4716.entry.js.map → p-a8d785da.entry.js.map} +0 -0
|
@@ -10,7 +10,7 @@ export class XvDropdown {
|
|
|
10
10
|
this.setSelected = (selectedMap, optionNodes) => {
|
|
11
11
|
const values = Array.from(selectedMap.values());
|
|
12
12
|
const options = optionNodes || this.el.querySelectorAll(DropdownItemSelector);
|
|
13
|
-
this.selected = values.length === options.length ?
|
|
13
|
+
this.selected = this.multiple && values.length === options.length ?
|
|
14
14
|
['Alle ausgewählt'] : values.length > 2 ?
|
|
15
15
|
[`${values.length} ausgewählt`] : values.map((v) => v.text);
|
|
16
16
|
return values;
|
|
@@ -94,7 +94,7 @@ export class XvDropdown {
|
|
|
94
94
|
this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));
|
|
95
95
|
}
|
|
96
96
|
render() {
|
|
97
|
-
return (h(Host, { key: '
|
|
97
|
+
return (h(Host, { key: '22a368d8ed8366bc14b76571d1d230b09a8796b0', class: "xv-dropdown", role: "combobox", size: this.size, open: this.open, error: this.error, disabled: this.disabled, tabindex: this.disabled ? -1 : false }, h("label", { key: '758412d82f433d5675f0f69048a76c67d7fea92c', class: "label" }, h("slot", { key: '7ea798f0ddca889db33845470d45aeeaaddce4a8', name: "label" }, this.label), this.info && h("xv-tooltip-v2", { key: '72bdd6aabf193f323cbc5ca715314568dc3aa8c8', class: "label_info", message: this.info })), h("div", { key: '91fc2cae2fe12eb171c017fcbf2e9b5a204bc955', class: "xv-dropdown-control control", onClick: this.handleOpen }, this.selected.length ? (h("p", { class: "control_value" }, this.selected.join(', '))) : (h("p", { class: "control_placeholder" }, this.placeholder || '')), this.renderIcon(), h("svg", { key: 'ab6e2eea7aa7563f9bdfa82bd980ba62bc29037a', class: "control_arrow", focusable: "false", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16" }, h("path", { key: '71fc59d404e95dc3de990403370bc5abf206812b', d: "M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" }))), this.open && h("div", { key: '52f8a04ccb8364b6e9a0b1d3ad50cbff3ebf96af', class: "options" }, h("slot", { key: "xv-dropdown-options" })), (this.helper || this.error || this.warning) && (h("p", { key: 'a83ed0ce93a8886dbdff9e0d271c8d4229ffadc0', class: "helper" }, this.error || this.warning || this.helper))));
|
|
98
98
|
}
|
|
99
99
|
componentWillLoad() {
|
|
100
100
|
this.setDefaultValues();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xv-dropdown.js","sourceRoot":"","sources":["../../../src/components/xv-dropdown/xv-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, Watch, Listen, Event, EventEmitter } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\nimport { DropdownItemData, DropdownItemSelector } from './_vars';\nimport { forEach, setAttr } from '../../utils/utils';\n\n@Component({\n tag: 'xv-dropdown-v2',\n styleUrl: 'xv-dropdown.scss',\n shadow: true,\n})\nexport class XvDropdown {\n @Element() el: HTMLElement;\n @Prop({ reflect: true }) disabled?: boolean;\n @Prop({ reflect: true }) multiple?: boolean;\n @Prop({ reflect: true }) required?: boolean;\n @Prop({ reflect: true }) loading?: boolean;\n @Prop({ reflect: true, mutable: true }) open?: boolean;\n @Prop({ reflect: true }) error?: string;\n @Prop({ reflect: true }) label?: string;\n @Prop({ reflect: true }) helper?: string;\n @Prop({ reflect: true }) warning?: string;\n @Prop({ reflect: true }) placeholder?: string;\n @Prop({ reflect: false }) info?: string;\n @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n @Prop({ attribute: 'default-value'}) defaultValue?: DropdownItemData['value'];\n\n @State() selected: DropdownItemData['text'][] = [];\n @State() selectedMap: Map<DropdownItemData['value'], DropdownItemData> = new Map();\n\n @Event() changeSelection: EventEmitter<DropdownItemData[]>;\n\n @Watch('open')\n openChangeHandle() {\n if (this.disabled) return;\n\n if (this.open) {\n this.addListeners();\n } else {\n this.removeListeners();\n }\n }\n\n @Listen('itemSelected')\n handleItemSelected({ detail }: CustomEvent<DropdownItemData>) {\n const hasItem = this.selectedMap.has(detail.value);\n\n if (this.multiple) {\n if (detail.selected) {\n if (!hasItem) this.selectedMap.set(detail.value, detail);\n } else {\n if (hasItem) {\n if (this.required && this.selectedMap.size === 1) return;\n this.selectedMap.delete(detail.value);\n }\n }\n } else {\n if (detail.selected) {\n this.selectedMap.clear();\n this.selectedMap.set(detail.value, detail);\n } else {\n if (!this.required) this.selectedMap.clear();\n }\n this.open = false;\n }\n\n const optionElements = this.el.querySelectorAll(DropdownItemSelector);\n\n forEach(\n optionElements,\n (option) => setAttr(option, 'selected', this.selectedMap.has(option.getAttribute('value')))\n );\n\n this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));\n }\n\n private setSelected = (selectedMap: typeof this.selectedMap, optionNodes?: NodeListOf<Element>): DropdownItemData[] => {\n const values = Array.from(selectedMap.values());\n const options = optionNodes || this.el.querySelectorAll(DropdownItemSelector);\n\n this.selected = values.length === options.length ?\n ['Alle ausgewählt'] : values.length > 2 ?\n [`${values.length} ausgewählt`] : values.map((v) => v.text);\n\n return values;\n };\n\n private handleOpen = () => {\n if (this.disabled || this.open || this.loading) return;\n this.open = true;\n };\n\n private handleClickOutside = (ev: MouseEvent) => {\n if (!this.open || this.el.contains(ev.target as Node)) return;\n\n if (this.open) this.open = false;\n }\n\n private addListeners = () => {\n document.body.addEventListener('click', this.handleClickOutside);\n }\n\n private removeListeners = () => {\n document.body.removeEventListener('click', this.handleClickOutside);\n }\n\n private setDefaultValues = () => {\n if (!this.defaultValue) return;\n\n // Needs to wait next Javascript tik\n setTimeout(() => {\n const options = this.el.querySelectorAll(DropdownItemSelector);\n\n forEach(\n options,\n (option) => {\n const dropdownItemData: DropdownItemData = {\n value: option.getAttribute('value'),\n text: (option as any).innerText,\n selected: `${this.defaultValue}` === option.getAttribute('value'),\n };\n\n if (dropdownItemData.selected) {\n setAttr(option, 'selected', dropdownItemData.selected);\n this.selectedMap.set(dropdownItemData.value, dropdownItemData);\n }\n }\n );\n\n this.setSelected(this.selectedMap, options);\n });\n };\n\n render() {\n return (\n <Host\n class=\"xv-dropdown\"\n role=\"combobox\"\n size={this.size}\n open={this.open}\n error={this.error}\n disabled={this.disabled}\n tabindex={this.disabled ? -1 : false}>\n <label class=\"label\">\n <slot name=\"label\">{this.label}</slot>\n {this.info && <xv-tooltip-v2 class=\"label_info\" message={this.info}></xv-tooltip-v2>}\n </label>\n\n <div class=\"xv-dropdown-control control\" onClick={this.handleOpen}>\n {this.selected.length ? (\n <p class=\"control_value\">{this.selected.join(', ')}</p>\n ) : (\n <p class=\"control_placeholder\">{this.placeholder || ''}</p>\n )}\n\n {this.renderIcon()}\n\n <svg class=\"control_arrow\" focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\" aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n </svg>\n </div>\n\n {this.open && <div class=\"options\">\n <slot key=\"xv-dropdown-options\" />\n </div>}\n\n {(this.helper || this.error || this.warning) && (\n <p class=\"helper\">{this.error || this.warning || this.helper}</p>\n )}\n </Host>\n );\n }\n\n componentWillLoad() {\n this.setDefaultValues();\n }\n\n componentDidLoad() {\n this.openChangeHandle();\n }\n\n disconnectedCallback() {\n this.removeListeners();\n }\n\n private renderIcon(): undefined | HTMLElement {\n if (this.loading) {\n return <xv-loader-v2 class=\"control_icon error\" size={SIZE_VAR.XS} />\n }\n\n if (this.error) {\n return (\n <svg class=\"control_icon error\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <path fill=\"currentColor\"\n d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z\" />\n </svg>\n )\n }\n\n if (!this.error && !!this.warning) {\n return (\n <svg class=\"control_icon warning\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <path fill=\"currentColor\" d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\" />\n </svg>\n );\n }\n\n return undefined;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"xv-dropdown.js","sourceRoot":"","sources":["../../../src/components/xv-dropdown/xv-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, Watch, Listen, Event, EventEmitter } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\nimport { DropdownItemData, DropdownItemSelector } from './_vars';\nimport { forEach, setAttr } from '../../utils/utils';\n\n@Component({\n tag: 'xv-dropdown-v2',\n styleUrl: 'xv-dropdown.scss',\n shadow: true,\n})\nexport class XvDropdown {\n @Element() el: HTMLElement;\n @Prop({ reflect: true }) disabled?: boolean;\n @Prop({ reflect: true }) multiple?: boolean;\n @Prop({ reflect: true }) required?: boolean;\n @Prop({ reflect: true }) loading?: boolean;\n @Prop({ reflect: true, mutable: true }) open?: boolean;\n @Prop({ reflect: true }) error?: string;\n @Prop({ reflect: true }) label?: string;\n @Prop({ reflect: true }) helper?: string;\n @Prop({ reflect: true }) warning?: string;\n @Prop({ reflect: true }) placeholder?: string;\n @Prop({ reflect: false }) info?: string;\n @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n @Prop({ attribute: 'default-value'}) defaultValue?: DropdownItemData['value'];\n\n @State() selected: DropdownItemData['text'][] = [];\n @State() selectedMap: Map<DropdownItemData['value'], DropdownItemData> = new Map();\n\n @Event() changeSelection: EventEmitter<DropdownItemData[]>;\n\n @Watch('open')\n openChangeHandle() {\n if (this.disabled) return;\n\n if (this.open) {\n this.addListeners();\n } else {\n this.removeListeners();\n }\n }\n\n @Listen('itemSelected')\n handleItemSelected({ detail }: CustomEvent<DropdownItemData>) {\n const hasItem = this.selectedMap.has(detail.value);\n\n if (this.multiple) {\n if (detail.selected) {\n if (!hasItem) this.selectedMap.set(detail.value, detail);\n } else {\n if (hasItem) {\n if (this.required && this.selectedMap.size === 1) return;\n this.selectedMap.delete(detail.value);\n }\n }\n } else {\n if (detail.selected) {\n this.selectedMap.clear();\n this.selectedMap.set(detail.value, detail);\n } else {\n if (!this.required) this.selectedMap.clear();\n }\n this.open = false;\n }\n\n const optionElements = this.el.querySelectorAll(DropdownItemSelector);\n\n forEach(\n optionElements,\n (option) => setAttr(option, 'selected', this.selectedMap.has(option.getAttribute('value')))\n );\n\n this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));\n }\n\n private setSelected = (selectedMap: typeof this.selectedMap, optionNodes?: NodeListOf<Element>): DropdownItemData[] => {\n const values = Array.from(selectedMap.values());\n const options = optionNodes || this.el.querySelectorAll(DropdownItemSelector);\n\n this.selected = this.multiple && values.length === options.length ?\n ['Alle ausgewählt'] : values.length > 2 ?\n [`${values.length} ausgewählt`] : values.map((v) => v.text);\n\n return values;\n };\n\n private handleOpen = () => {\n if (this.disabled || this.open || this.loading) return;\n this.open = true;\n };\n\n private handleClickOutside = (ev: MouseEvent) => {\n if (!this.open || this.el.contains(ev.target as Node)) return;\n\n if (this.open) this.open = false;\n }\n\n private addListeners = () => {\n document.body.addEventListener('click', this.handleClickOutside);\n }\n\n private removeListeners = () => {\n document.body.removeEventListener('click', this.handleClickOutside);\n }\n\n private setDefaultValues = () => {\n if (!this.defaultValue) return;\n\n // Needs to wait next Javascript tik\n setTimeout(() => {\n const options = this.el.querySelectorAll(DropdownItemSelector);\n\n forEach(\n options,\n (option) => {\n const dropdownItemData: DropdownItemData = {\n value: option.getAttribute('value'),\n text: (option as any).innerText,\n selected: `${this.defaultValue}` === option.getAttribute('value'),\n };\n\n if (dropdownItemData.selected) {\n setAttr(option, 'selected', dropdownItemData.selected);\n this.selectedMap.set(dropdownItemData.value, dropdownItemData);\n }\n }\n );\n\n this.setSelected(this.selectedMap, options);\n });\n };\n\n render() {\n return (\n <Host\n class=\"xv-dropdown\"\n role=\"combobox\"\n size={this.size}\n open={this.open}\n error={this.error}\n disabled={this.disabled}\n tabindex={this.disabled ? -1 : false}>\n <label class=\"label\">\n <slot name=\"label\">{this.label}</slot>\n {this.info && <xv-tooltip-v2 class=\"label_info\" message={this.info}></xv-tooltip-v2>}\n </label>\n\n <div class=\"xv-dropdown-control control\" onClick={this.handleOpen}>\n {this.selected.length ? (\n <p class=\"control_value\">{this.selected.join(', ')}</p>\n ) : (\n <p class=\"control_placeholder\">{this.placeholder || ''}</p>\n )}\n\n {this.renderIcon()}\n\n <svg class=\"control_arrow\" focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\" aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">\n <path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n </svg>\n </div>\n\n {this.open && <div class=\"options\">\n <slot key=\"xv-dropdown-options\" />\n </div>}\n\n {(this.helper || this.error || this.warning) && (\n <p class=\"helper\">{this.error || this.warning || this.helper}</p>\n )}\n </Host>\n );\n }\n\n componentWillLoad() {\n this.setDefaultValues();\n }\n\n componentDidLoad() {\n this.openChangeHandle();\n }\n\n disconnectedCallback() {\n this.removeListeners();\n }\n\n private renderIcon(): undefined | HTMLElement {\n if (this.loading) {\n return <xv-loader-v2 class=\"control_icon error\" size={SIZE_VAR.XS} />\n }\n\n if (this.error) {\n return (\n <svg class=\"control_icon error\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <path fill=\"currentColor\"\n d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z\" />\n </svg>\n )\n }\n\n if (!this.error && !!this.warning) {\n return (\n <svg class=\"control_icon warning\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n <path fill=\"currentColor\" d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\" />\n </svg>\n );\n }\n\n return undefined;\n }\n}\n"]}
|
|
@@ -84,10 +84,10 @@ export class XvFileUploader {
|
|
|
84
84
|
}
|
|
85
85
|
render() {
|
|
86
86
|
var _a;
|
|
87
|
-
return (h(Host, { key: '
|
|
87
|
+
return (h(Host, { key: '4a33985fd3a6b9213d592ebec1b5b8abbf1d27df', class: { 'upload-wrapper': true, [`uploader-${this.size}`]: true, disabled: !!this.disabled } }, this.label && h("label", { key: '127894a635ce497df0a3a4732f5fc5a28f4d635b', class: "label" }, this.label), this.description && h("p", { key: 'dc34a999207c109b45f6e793552ff93b144fde85', class: "description" }, this.description), this.variant === 'button' ? (h("xv-button-v2", { variant: this.buttonVariant, disabled: this.disabled, onClick: () => this.fileInput.click() }, this.addText || 'Dateien auswählen')) : (h("div", { class: { 'drop-zone': true, active: this.dragActive }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onClick: () => this.fileInput.click() }, this.addText || 'Dateien hierher ziehen oder darauf klicken, um eine Datei auszuwählen.', ((_a = this.accept) === null || _a === void 0 ? void 0 : _a.length) > 0 && h("span", null, " (", this.accept.join(', '), ")"))), h("input", { key: 'f7d47bff9993ab16abb38d70a065c6778f141359', ref: el => (this.fileInput = el), type: "file", hidden: true, onChange: this.onFileSelect, multiple: this.multiple, accept: this.accept.join(',') }), h("ul", { key: '04f33d47b7f3389b29b880261eb7d032ffea37e4', class: "file-list" }, this.files.map((file, index) => {
|
|
88
88
|
var _a, _b;
|
|
89
89
|
return (h("li", { class: { file: true, withError: !!(((_a = this.errors) === null || _a === void 0 ? void 0 : _a[index]) || ((_b = this.errorMessages) === null || _b === void 0 ? void 0 : _b[index])) } }, h("div", { class: "file_container" }, h("span", { class: "file_container_name" }, file.name), this._renderLoaderState(index)), this._renderError(index)));
|
|
90
|
-
})), this.error && (h("div", { key: '
|
|
90
|
+
})), this.error && (h("div", { key: '21aae629c18e97fc42f478e78ed4b771975389ab', class: "error-container" }, h("p", { key: '2fefb6eae6b6a8d838f6aca2ff05c5981f1491a2', class: "error-container_primary" }, this.error)))));
|
|
91
91
|
}
|
|
92
92
|
_renderLoaderState(index) {
|
|
93
93
|
var _a, _b, _c;
|
|
@@ -14,7 +14,7 @@ export class Xvfooter {
|
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
|
-
return (h("footer", { key: '
|
|
17
|
+
return (h("footer", { key: '69d48cf34ca1c2b39cc4152b1da10e3d6784ecaf' }, h("div", { key: '91a2a4e95bc830478182cdd2b64d68670a36bb41', innerHTML: this.htmlContent })));
|
|
18
18
|
}
|
|
19
19
|
static get is() { return "xv-footer"; }
|
|
20
20
|
static get originalStyleUrls() {
|
|
@@ -30,7 +30,7 @@ export class XvHeader {
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
render() {
|
|
33
|
-
return (h("div", { key: '
|
|
33
|
+
return (h("div", { key: '9a0b5ecb9fd32c9666a64a901df847f5971b704f', id: "nav-container", class: "xv-header" }, h("nav", { key: '51167653ba632fb0d228bfb8082b30a285aa22d9', class: "navbar navbar-default navbar-fixed-top backend-force-relative" }, h("div", { key: '90c35a32a68ae1589ef51fa852ef324f1a6b4913', class: "container" }, h("div", { key: 'b45f7755d75399291282635b1b19b49aead2633b', class: "row" }, h("div", { key: 'd042bd0d254eb9a0f78fbd94b0b532b6c5cee399', class: "col-sm-3 col-xs-3 col-xxs-4 no-padding-right" }, h("div", { key: '3a0763f213dfb5462f2fa335ebd77ece39a12cf4', class: "navbar-header" }, h("button", { key: '505bab3f231a425aab0d23f0392ff2c8061b71e2', class: "btn btn-default navbar-toggle pull-left navbar-btn", "data-toggle": "collapse", "data-target": "#main-menu" }, h("i", { key: 'a9e737a1d7d7f7ff7784730d9845712d5b9cffef', class: "fa fa-bars fa-lg", "aria-hidden": "true" })), h("div", { key: 'a85c1e35e4525d7cd3e2d572a1643a5032323174', class: "visible-xs-inline" }, h("a", { key: '64797dbb15864b7918bc8d33fbac9640184a514a', href: "https://www.crossvertise.com/", class: "navbar-brand" }, h("img", { key: '0bb00eb9f8361fa368c86dd82c6830c2d3a19117', src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg", alt: "Crossvertise" }))), h("div", { key: '2c1ee42c6b44c0b224aacd8fadf3dfc4f3ee7b77', class: "hidden-xs" }, h("a", { key: '12f4e225c1bcb2f5d35b038b2c9f16345b3f11a2', href: "https://www.crossvertise.com/", class: "navbar-brand" }, h("img", { key: 'bcd0a4ccc05a2b694f25dd6bde53fff354e1b200', loading: "lazy", src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg", alt: "Crossvertise" }))))), h("div", { key: 'f77f4bdb29d9fe35292f6077581255b36f9f809e', class: "col-sm-9 col-xs-9 col-xxs-8 no-padding-left" }, h("ul", { key: 'd108adbb8c3b7201dcc3374c6e0c7dba2f66201c', class: "nav nav-pills nav-meta pull-right" }, h("li", { key: '5167705128b06f89c55cabb127b6630ced7ab864' }, h("a", { key: '28bcbd1cbdc64f0b3c5a6cd0689023f9f43c5214', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, h("i", { key: '3964041fccfb4bd71852517ba865e64340ef9617', class: "fa fa-user" }), h("i", { key: '904c8ce3cf34875b40639afc332001e368e42a20', class: "fa fa-exchange-alt" }))), h("li", { key: '46b99c495412b3de6cffc403c0cf7b6684f331a7' }, h("a", { key: 'de934f468a5a568388488675d75225e438745396', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, "Kontakt"), h("a", { key: '134677aed84f082fae3114585d6d2ac8311a4400', href: "https://www.crossvertise.com/contact", class: "btn btn-link navbar-btn hidden-xs", style: { display: 'none' } }, "Kontakt"), h("a", { key: 'c9043b2b2da5e8465935f09f36451b15306fd059', class: "btn btn-default btn-link navbar-btn visible-xs hidden-xxs", href: "#" }, h("i", { key: '97b9f4877edcd66b413fc11dc280f07400acc054', class: "fa fa-phone" }))), h("li", { key: '069f8097e6b840aee219d2d07353fc8cf0fd445c', class: "dropdown", id: "my-xv-menu" }, h("a", { key: 'e57bf0efec70ab2e8e9616601916b341c08dd782', href: "#", class: "dropdown-toggle btn btn-default navbar-btn btn-link", "data-toggle": "dropdown" }, h("i", { key: 'd3bae72660fc74510dd0fede584bba3e51166ff5', class: "fa fa-user fa-lg text-success", "aria-hidden": "true" }), "\u00A0", h("span", { key: 'd295f2ad9e22f1e8e5fb77f6ae6ea72bf13bee83', class: "hidden-xs" }, "Mein Bereich"), h("span", { key: '2ecfdba55d593480fb4fbbe0d0c16d58311d1406', class: "caret" })), h("ul", { key: '2fdcd0fae663fafae2f9c7b2d0bd686db264e18d', class: "dropdown-menu-left dropdown-menu navbar-myxv" }, h("li", { key: '08f18ff8a17205e160ec8861ba0420efdca0b5cd' }, h("a", { key: '4fa15bd769d4f53dd5e75d9f3cb61e68caf32efa', href: "#" }, h("i", { key: 'a0719ea6e0eca342191842cbcb69153d956d8701', class: "fa fa-tachometer-alt fa-fw" }), "\u00A0Cockpitfunktionen\u00A0", h("i", { key: 'b24f70641cf85b3a6758d8098737330cab5d3ec3', class: "fa fa-caret-down" }))), h("li", { key: '2b3d310ef95945a52b1541f7ca20dfd762db2c3a' }, h("a", { key: 'f2133efe5e813a9a71e130592ffbafbca1d6e1a5', href: "#" }, h("i", { key: 'b80aee7f65ce6474ac51cf5e1bb638e543a78da1', class: "fa fa-cubes" }), "\u00A0Entit\u00E4ten\u00A0", h("i", { key: 'd1bbbc6fe0d5064412bc76a193d7eb047b76f3d4', class: "fa fa-caret-down" }))), h("li", { key: '362a0942868f39fc07353b05c7a5d42bef0385d4', role: "separator", class: "divider" }), h("li", { key: 'ac0c3d294ff098cd23c7cfa07326c9c6a26abb7c' }, h("a", { key: '2a7e3df24f4c9f2a3536851977c45cd40e81becb', href: "#" }, h("i", { key: '3b6017fd400db20134b41932d358c96fc1b3f71a', class: "fa fa-user" }), "\u00A0Mein Crossvertise\u00A0", h("span", { key: '91fafd2c3e3c2f5632de5763d624e2ef4cf35c80', class: "badge" }, "0"), h("i", { key: '75c2c4f52ccd74c5f2b69da9f39260c7d04ef357', class: "fa fa-caret-down" }))), h("li", { key: '6aaec4116f1b3deeff7007acc45c39e221e0fd97' }, h("a", { key: '9003a050b45de8d9e3b07978404df44f7ff59f88', href: "https://www.crossvertise.com/de-de/mycrossvertise/account/logoff?returnUrl=https%3A%2F%2Fwww.crossvertise.com" }, h("i", { key: '7f3aa0f1be83d4a496ec3b61ee366c079b500f13', class: "fa fa-sign-out-alt fa-fw", "aria-hidden": "true" }), "\u00A0Logout")))), h("li", { key: '5d7c139fafff2139fac690558e6ebf0b20d43a62', class: "visible-sm-block visible-xs-block hidden-xxs" }, h("a", { key: 'edf530735fc194c2276b1985fe3364f77890f60e', class: "btn btn-default navbar-btn btn-link", "data-toggle": "collapse", "data-target": "#search-collapse" }, h("i", { key: '572d8f1b2b0666d54297bade290358a61fce138b', class: "fa fa-search", "aria-hidden": "true" }))), h("li", { key: '02f33a18efb09a876f149f2b8b66ccf01bd5e291', class: "hidden-xs hidden-sm" }, h("a", { key: '7f528344d1518d32d99da414777b3e6d208720b7', role: "button", onClick: this.openLoginModal, class: "btn btn-default navbar-btn btn-link" }, h("i", { key: '42214e28902b95a768094c48d94900ed6dcb953a', class: "fa fa-user fa-lg", "aria-hidden": "true" }), h("span", { key: '945313f68df6607e0efcbdc35708cf4992500fa8' }, "Login"))), h("xv-login-modal", { key: 'ada6e8b4ecca9ba16a3b151bba5dae1705024f5c', visible: this.showLoginModal, onClose: this.closeLoginModal }), h("li", { key: 'ecce45495173251c52feb457ec4584bc72fd7a26', class: "hidden-xs" }, h("a", { key: 'f734a0215ce4207ccf39293566aa491cddfe3042', class: "btn btn-default navbar-btn btn-link", href: "https://market.crossvertise.com/de-de/mycrossvertise/account/register" }, h("span", { key: '9fd77861ad3530c7fc009fb39e6c9aa209185328' }, "Registrieren"))), h("li", { key: '6a605a1851914fb9e1bed8f68be372e4a6c1a665', class: "navbar-divider hidden-xs" }), h("li", { key: '19b2c12c76c14b1e50f1f0a367e00ece9b1a47c1' }, h("a", { key: '2a9554839bfce522caa41317ffde792c5ef3d9f0', class: "btn btn-success navbar-btn", href: "https://market.crossvertise.com/de-de/mycrossvertise/shoppingcart/activecart" }, h("span", { key: '487cb7d6fd7847a4c88b3a0b5e9bb0fb513a55c2', class: "xv-font-icon-warenkorb fa-lg fa-fw", "aria-hidden": "true" }), h("span", { key: 'ed68bd8f397cc6574ded6bcb9deedd2eec0f89d6', class: "hidden-xs hidden-sm" }, "\u00A0Warenkorb\u00A0"), h("span", { key: '8503a47508b38a2a5671d3f4e32c004ad8155333', class: "badge badge-success" }, "0"))))))), h("div", { key: 'd42acb598b78e980f83fffd48826f1682b9083c2', class: "collapse hidden-md hidden-lg", id: "search-collapse" }, h("div", { key: '2ffd90f9029f5ce9968b26aad369bf2f87b54e69', class: "container" }, h("form", { key: '5a72e321f545efd8e2147980b16db960c1de33eb', action: "https://market.crossvertise.com/de-de/media/search", class: "navbar-form", method: "get", role: "search" }, h("div", { key: '192ac273785e073a79936dff575d0b2ae675912d', class: "input-group" }, h("input", { key: '4f9dc1001920cd76f2ae57b78065d0002d670b3d', class: "form-control", name: "Q", placeholder: "Suche", type: "text", autocomplete: "off" }), h("span", { key: 'cdd9ad37c985ab2db67e7df845b6502b0e4327f7', class: "input-group-btn force-full-width" }, h("button", { key: '74ca744c2c2148ea6363ec4200d31f4d9082a4e3', class: "btn btn-default search-addon", type: "submit" }, h("i", { key: '8b4d8612e841d325e7fe719e05e0b1603472a300', class: "fa fa-search", "aria-hidden": "true" })))))))), h("div", { key: 'cb79f91dc7d12d19927c3ceab3b401bcac1dfcbb', innerHTML: this.htmlContent })));
|
|
34
34
|
}
|
|
35
35
|
static get is() { return "xv-header"; }
|
|
36
36
|
static get originalStyleUrls() {
|
|
@@ -12,7 +12,7 @@ export class XvLink {
|
|
|
12
12
|
e.stopPropagation();
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (h(Host, { key: '
|
|
15
|
+
return (h(Host, { key: 'e876b31740e6313a78443d88d67380c1b0806438', class: `xv-link_${this.variant}` }, h("a", { key: '291a159a70493a6226b343cf57c099a3122524f3', href: this.href, onClick: this.preventLinkHandler.bind(this), class: `xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`, target: this.target }, h("slot", { key: 'fe3dfb7c21bbafb129e42e307b0fbe99b6b7dcff', name: "icon-left" }), h("slot", { key: 'a0bff519cbb790053bcfa0a54518b9b1a83c88b3' }), h("slot", { key: 'b077cce6b800314c5e1f2109c9bc1ee3a15d299f', name: "icon-right" }))));
|
|
16
16
|
}
|
|
17
17
|
static get is() { return "xv-link-v2"; }
|
|
18
18
|
static get encapsulation() { return "shadow"; }
|
|
@@ -58,7 +58,7 @@ export class XvModal {
|
|
|
58
58
|
}
|
|
59
59
|
render() {
|
|
60
60
|
var _a;
|
|
61
|
-
return (h(Host, { key: '
|
|
61
|
+
return (h(Host, { key: '06abb2a0caeb44966b1a70f8268d2d81bf948ec6', role: "dialog", size: this.size, id: this.el.id }, h("slot", { key: 'aecaed309692e7ffaa5883b21cbfeb461afc7fde', name: "trigger", onSlotchange: this.setupTrigger }), h("div", { key: '4c455aa59c2b9daead69dd3ddd34ce3f14f2f5d9', class: { backdrop: true }, onClick: this.onBackdropClick }, h("div", { key: '681c7e3ed3da8d5a17ea4c45007ef3f05a17ae33', class: "modal" }, h("button", { key: 'b354b9b77ff4698d7709dd797f0a0dd90ba9afce', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), h("div", { key: '44c708a55bc92abb11aa2e69d0143060ae4438df', class: "modal_header" }, h("slot", { key: '5302a4c8f57d40daf9328bb64450ce28218b8639', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && h("h5", { key: '4565fc0c5e5cc2f8ab8b4af09ac7fb5a87555557', class: "modal_header__title" }, this.el.title))), h("div", { key: 'c0606a1649777d9abd111b5bf4af58f0a2ee04d6', class: { 'modal_content': true, overflow: this.overflow } }, h("slot", { key: '2a0e12ebc1a51fd01b158c3930b00015fdaaf252' })), h("div", { key: 'dfa474f53eef5e9cf48b21b74b4450e761a2a6ae', class: "modal_footer" }, h("slot", { key: 'd23b33797b367c77ddbaa730bc13bcaa3d492aee', name: "footer" })), !!this.loading && (h("div", { key: '32d68b8b6bd981e17626fd706d3b750a81da2e08', class: "loading" }, h("xv-loader-v2", { key: '56c37d9cdfdb4bf7c7452e1e813d58a4f3cef1f5', size: SIZE_VAR.LG })))))));
|
|
62
62
|
}
|
|
63
63
|
disconnectedCallback() {
|
|
64
64
|
this.removeTriggerListener();
|
|
@@ -25,7 +25,7 @@ export class XvNotification {
|
|
|
25
25
|
};
|
|
26
26
|
}
|
|
27
27
|
render() {
|
|
28
|
-
return (h(Host, { key: '
|
|
28
|
+
return (h(Host, { key: 'e34b6db6aa817d60458169cddd7606174d849dc2', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), h("div", { key: 'a292ba34994258458b02ddc6e2cb012a2a729366', class: "content" }, h("div", { key: 'a432611a51b0ad58e2258f0dd602ffceca801016', class: "content_wrapper" }, this.el.title && h("h5", { key: 'a3bcb4aab491f3d331a52ca70706c49bbef13a9b', class: "content_title" }, this.el.title), h("slot", { key: '434cc453bf5e347e973a9ef3303a5fa4d7d34047' })), h("slot", { key: 'b136fd271b44bd07714e2c4ee91beae3bee33f69', name: "footer" })), this.dismissible && h("button", { key: 'eaf75a33ecb101ea9ca9c4111d2e22d50af56ec2', class: "close", onClick: this.closeHandle })));
|
|
29
29
|
}
|
|
30
30
|
static get is() { return "xv-notification-v2"; }
|
|
31
31
|
static get encapsulation() { return "shadow"; }
|
|
@@ -32,12 +32,12 @@ export class XvNumberInput {
|
|
|
32
32
|
this.valueChange.emit(this.value);
|
|
33
33
|
}
|
|
34
34
|
render() {
|
|
35
|
-
return (h(Host, { key: '
|
|
35
|
+
return (h(Host, { key: '7a0f52001d3207ca3a832b8f5d3f7b6688011fc1', class: { disabled: !!this.disabled } }, h("label", { key: '2a39a80c29a7ec4a1df78d1024b51b323c2463ad', class: "control" }, this.label && h("span", { key: '280cbcb901336958a56385b3a40ca40ba95b26ff', class: "control_label" }, this.label), h("div", { key: 'fbdf8584b631667a24e2cf02d1936963bda57370', class: {
|
|
36
36
|
'control_input': true,
|
|
37
37
|
readonly: !!this.readonly,
|
|
38
38
|
error: !!this.error,
|
|
39
39
|
warning: !!this.warning
|
|
40
|
-
} }, h("input", { key: '
|
|
40
|
+
} }, h("input", { key: '8f76d4723c9cda3a4b9ef9d7922836f694bd4a29', type: "number", placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, min: this.min, max: this.max, step: this.step, value: this.value }), h("div", { key: '7c7729225ffab05d2649e607ab764b0062426d05', class: "control_input__icons" }, this.loading ? (h("xv-loader-v2", { size: SIZE_VAR.XS })) : !!this.error ? (h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null, h("xv-button-v2", { key: 'ee4135d3699310e79aae069bd8117dc2e4e60bae', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.decrement, "aria-label": "Decrease" }, h("span", { key: '48f157bedce8c7503bea9e33513fcc7f7781ba3c', slot: "icon-left", class: "status-icon" }, "\u2212")), h("hr", { key: 'df439a010360f68c7136a25c2ee9bfe2cd758995' }), h("xv-button-v2", { key: '01065c3fb19e840b7db792467f5e449ff11915a6', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.increment, "aria-label": "Increase" }, h("span", { key: '11c3577d28eebb44c804f4ff5717c8fd0a8f40a8', slot: "icon-left", class: "status-icon" }, "+"))))), this.helper && h("p", { key: '547859327426600ac0d6b33ef7277c5aefbff345', class: "message" }, this.helper), typeof this.error === 'string' ? (h("p", { class: "message error" }, this.error)) : typeof this.warning === 'string' ? (h("p", { class: "message warning" }, this.warning)) : null));
|
|
41
41
|
}
|
|
42
42
|
static get is() { return "xv-number-input-v2"; }
|
|
43
43
|
static get encapsulation() { return "shadow"; }
|
package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js
CHANGED
|
@@ -11,7 +11,7 @@ export class XvOverflowMenuItem {
|
|
|
11
11
|
this.itemClick.emit({ event, value: this.value });
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
|
-
return (h(Host, { key: '
|
|
14
|
+
return (h(Host, { key: '39ed800716df91f37e1e22ab2ab62a9a2963ef33', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, h("slot", { key: 'a7a0c9c1961492c0168e72bd130f30b4ec627c64' })));
|
|
15
15
|
}
|
|
16
16
|
static get is() { return "xv-overflow-menu-v2-item"; }
|
|
17
17
|
static get encapsulation() { return "shadow"; }
|
|
@@ -48,7 +48,7 @@ export class XvOverflowMenu {
|
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
render() {
|
|
51
|
-
return (h(Host, { key: '
|
|
51
|
+
return (h(Host, { key: '5e3f5cc27fb7c9ea539c3f98abf0563ea99c40ad', class: "xv-overflow-menu", size: this.size, role: "menu", tabindex: -1 }, h("button", { key: 'a3005123e361a685dbadf21e4a4d8ff45188e2a3', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, h("svg", { key: 'c594a4eab6e6e73533fef006ac9e4edd6ed60a53', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, h("path", { key: '445a29a156b2e688ee4c42861b10cbdc063880d9', d: "M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z" }))), h("div", { key: '7e0a95e0d5e154e0a1107b4f3c2a8623e9e0b93b', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, h("slot", { key: '1311647140aa4800c074940290ff08481698d39c' }))));
|
|
52
52
|
}
|
|
53
53
|
componentDidLoad() {
|
|
54
54
|
this.openChangeHandle();
|
|
@@ -5,7 +5,7 @@ export class XvProgressIndicatorItem {
|
|
|
5
5
|
this.status = PROGRESS_ITEM_STATUS.NO_STARTED;
|
|
6
6
|
}
|
|
7
7
|
render() {
|
|
8
|
-
return (h(Host, { key: '
|
|
8
|
+
return (h(Host, { key: '4e9e7900cc4142b6c03b9ad1c41b9a86a989d8fe', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: 'f2f866ab391d9e0beb5e87b0191f9b99168cb1c4', class: "line" }), h("span", { key: '0bef030a4374110d59df8ab73a289e72dbd210e5', class: "icon" }, h("svg", { key: 'fde94a5a0ee33b3a10efa15c26d8c8332c9af24a', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: '1d40d9211eddc1a9cd7c30a15432dfea55dc21b1', fill: "currentColor", d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }))), h("p", { key: '7307e47fdc37171d2f84f6aa8eda3a21b1110beb', class: "label" }, h("slot", { key: 'b48d171d7dd228a0eee2a8ffad92a7a9a71fdc14' }))));
|
|
9
9
|
}
|
|
10
10
|
static get is() { return "xv-progress-indicator-v2-item"; }
|
|
11
11
|
static get encapsulation() { return "shadow"; }
|
|
@@ -56,7 +56,7 @@ export class XvProgressIndicator {
|
|
|
56
56
|
this.updateChildItems();
|
|
57
57
|
}
|
|
58
58
|
render() {
|
|
59
|
-
return (h(Host, { key: '
|
|
59
|
+
return (h(Host, { key: '3a2b488debb915e0fe1a8480abebad12bd8a8d5f', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: 'ab7b6fd72941e3b6fa39a5bc76c27754a57960ed' })));
|
|
60
60
|
}
|
|
61
61
|
static get is() { return "xv-progress-indicator-v2"; }
|
|
62
62
|
static get encapsulation() { return "shadow"; }
|
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
.xv-tooltip[role=tooltip] {
|
|
2
|
+
position: absolute;
|
|
3
|
+
background-color: var(--background-inverse, #333333);
|
|
4
|
+
color: var(--text-on-color);
|
|
5
|
+
padding: var(--spacing-03) var(--spacing-04);
|
|
6
|
+
border-radius: 3px;
|
|
7
|
+
font-size: var(--fz-sm);
|
|
8
|
+
z-index: 999;
|
|
9
|
+
min-width: min(150px, 90vw);
|
|
10
|
+
max-width: min(400px, 90vw);
|
|
11
|
+
}
|
|
12
|
+
.xv-tooltip[role=tooltip]::after {
|
|
13
|
+
content: "";
|
|
14
|
+
position: absolute;
|
|
15
|
+
width: 0;
|
|
16
|
+
height: 0;
|
|
17
|
+
border-style: solid;
|
|
18
|
+
}
|
|
19
|
+
.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
|
|
20
|
+
bottom: -5px;
|
|
21
|
+
left: 50%;
|
|
22
|
+
transform: translateX(-50%);
|
|
23
|
+
border-width: 5px 5px 0 5px;
|
|
24
|
+
border-color: var(--background-inverse, black) transparent transparent transparent;
|
|
25
|
+
}
|
|
26
|
+
.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
|
|
27
|
+
bottom: -5px;
|
|
28
|
+
left: 12px;
|
|
29
|
+
border-width: 5px 5px 0 5px;
|
|
30
|
+
border-color: var(--background-inverse, black) transparent transparent transparent;
|
|
31
|
+
}
|
|
32
|
+
.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
|
|
33
|
+
bottom: -5px;
|
|
34
|
+
right: 12px;
|
|
35
|
+
border-width: 5px 5px 0 5px;
|
|
36
|
+
border-color: var(--background-inverse, black) transparent transparent transparent;
|
|
37
|
+
}
|
|
38
|
+
.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
|
|
39
|
+
top: -5px;
|
|
40
|
+
left: 50%;
|
|
41
|
+
transform: translateX(-50%);
|
|
42
|
+
border-width: 0 5px 5px 5px;
|
|
43
|
+
border-color: transparent transparent var(--background-inverse, black) transparent;
|
|
44
|
+
}
|
|
45
|
+
.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
|
|
46
|
+
top: -5px;
|
|
47
|
+
left: 12px;
|
|
48
|
+
border-width: 0 5px 5px 5px;
|
|
49
|
+
border-color: transparent transparent var(--background-inverse, black) transparent;
|
|
50
|
+
}
|
|
51
|
+
.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
|
|
52
|
+
top: -5px;
|
|
53
|
+
right: 12px;
|
|
54
|
+
border-width: 0 5px 5px 5px;
|
|
55
|
+
border-color: transparent transparent var(--background-inverse, black) transparent;
|
|
56
|
+
}
|
|
57
|
+
.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
|
|
58
|
+
top: 50%;
|
|
59
|
+
right: -5px;
|
|
60
|
+
transform: translateY(-50%);
|
|
61
|
+
border-width: 5px 0 5px 5px;
|
|
62
|
+
border-color: transparent transparent transparent var(--background-inverse, black);
|
|
63
|
+
}
|
|
64
|
+
.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
|
|
65
|
+
top: 12px;
|
|
66
|
+
right: -5px;
|
|
67
|
+
border-width: 5px 0 5px 5px;
|
|
68
|
+
border-color: transparent transparent transparent var(--background-inverse, black);
|
|
69
|
+
}
|
|
70
|
+
.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
|
|
71
|
+
bottom: 12px;
|
|
72
|
+
right: -5px;
|
|
73
|
+
border-width: 5px 0 5px 5px;
|
|
74
|
+
border-color: transparent transparent transparent var(--background-inverse, black);
|
|
75
|
+
}
|
|
76
|
+
.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
|
|
77
|
+
top: 50%;
|
|
78
|
+
left: -5px;
|
|
79
|
+
transform: translateY(-50%);
|
|
80
|
+
border-width: 5px 5px 5px 0;
|
|
81
|
+
border-color: transparent var(--background-inverse, black) transparent transparent;
|
|
82
|
+
}
|
|
83
|
+
.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
|
|
84
|
+
top: 12px;
|
|
85
|
+
left: -5px;
|
|
86
|
+
border-width: 5px 5px 5px 0;
|
|
87
|
+
border-color: transparent var(--background-inverse, black) transparent transparent;
|
|
88
|
+
}
|
|
89
|
+
.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
|
|
90
|
+
bottom: 12px;
|
|
91
|
+
left: -5px;
|
|
92
|
+
border-width: 5px 5px 5px 0;
|
|
93
|
+
border-color: transparent var(--background-inverse, black) transparent transparent;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
:host {
|
|
97
|
+
display: flex;
|
|
98
|
+
flex-direction: column;
|
|
99
|
+
gap: var(--spacing-03, 8px);
|
|
100
|
+
text-align: left;
|
|
101
|
+
font-family: var(--ff-body);
|
|
102
|
+
}
|
|
103
|
+
:host .label {
|
|
104
|
+
color: var(--text-secondary, #515151);
|
|
105
|
+
font-size: var(--fz-sm);
|
|
106
|
+
font-weight: 700;
|
|
107
|
+
line-height: var(--fz-md);
|
|
108
|
+
letter-spacing: 0.32px;
|
|
109
|
+
}
|
|
110
|
+
:host .control {
|
|
111
|
+
display: flex;
|
|
112
|
+
align-items: center;
|
|
113
|
+
gap: var(--spacing-04, 12px);
|
|
114
|
+
}
|
|
115
|
+
:host .control_label {
|
|
116
|
+
text-align: center;
|
|
117
|
+
color: var(--text-primary, #333);
|
|
118
|
+
font-size: var(--fz-md);
|
|
119
|
+
font-weight: 400;
|
|
120
|
+
line-height: var(--fz-lg);
|
|
121
|
+
letter-spacing: 0.32px;
|
|
122
|
+
}
|
|
123
|
+
:host .control input[type=range] {
|
|
124
|
+
flex: 1;
|
|
125
|
+
appearance: none;
|
|
126
|
+
height: 4px;
|
|
127
|
+
border-radius: 2px;
|
|
128
|
+
outline: none;
|
|
129
|
+
background-color: var(--border-subtle-01, #D1D1D1);
|
|
130
|
+
background-image: linear-gradient(var(--interactive-02), var(--interactive-02));
|
|
131
|
+
background-repeat: no-repeat;
|
|
132
|
+
}
|
|
133
|
+
:host .control input[type=range]::-webkit-slider-thumb {
|
|
134
|
+
appearance: none;
|
|
135
|
+
width: 20px;
|
|
136
|
+
height: 20px;
|
|
137
|
+
border-radius: 50%;
|
|
138
|
+
background-color: var(--interactive-02, #96bf00);
|
|
139
|
+
cursor: pointer;
|
|
140
|
+
border: 2px solid transparent;
|
|
141
|
+
outline: 2px solid transparent;
|
|
142
|
+
transition: 200ms ease-in-out border-color, 200ms ease-in-out outline-color;
|
|
143
|
+
}
|
|
144
|
+
:host .control input[type=range]::-moz-range-thumb {
|
|
145
|
+
width: 20px;
|
|
146
|
+
height: 20px;
|
|
147
|
+
border-radius: 50%;
|
|
148
|
+
background-color: var(--interactive-02, #96bf00);
|
|
149
|
+
border: 2px solid transparent;
|
|
150
|
+
outline: 2px solid transparent;
|
|
151
|
+
cursor: pointer;
|
|
152
|
+
transition: 200ms ease-in-out border-color, 200ms ease-in-out outline-color;
|
|
153
|
+
}
|
|
154
|
+
:host .control input[type=range]:focus::-webkit-slider-thumb {
|
|
155
|
+
border-color: white;
|
|
156
|
+
outline-color: var(--focus);
|
|
157
|
+
}
|
|
158
|
+
:host .control input[type=range]:focus::-moz-range-thumb {
|
|
159
|
+
border-color: white;
|
|
160
|
+
outline-color: var(--focus);
|
|
161
|
+
}
|
|
162
|
+
:host .control input[type=number] {
|
|
163
|
+
inline-size: 3.7em;
|
|
164
|
+
padding: var(--spacing-04) var(--spacing-02) var(--spacing-04) var(--spacing-04);
|
|
165
|
+
text-align: center;
|
|
166
|
+
border-radius: 3px;
|
|
167
|
+
background: var(--field-02, #FFF);
|
|
168
|
+
box-shadow: 0 0 0 1px #8B8B8B inset;
|
|
169
|
+
border: none;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
:host(.disabled) .label,
|
|
173
|
+
:host(.disabled) .control_label,
|
|
174
|
+
:host(.disabled) input[type=number] {
|
|
175
|
+
color: var(--text-disabled, rgba(19, 19, 19, 0.25));
|
|
176
|
+
}
|
|
177
|
+
:host(.disabled) .control input[type=range] {
|
|
178
|
+
background-image: none;
|
|
179
|
+
background-color: var(--border-subtle-01, #D1D1D1);
|
|
180
|
+
}
|
|
181
|
+
:host(.disabled) .control input[type=range]::-webkit-slider-thumb {
|
|
182
|
+
background-color: var(--border-subtle-01, #D1D1D1);
|
|
183
|
+
}
|
|
184
|
+
:host(.disabled) .control input[type=range]::-moz-range-thumb {
|
|
185
|
+
background-color: var(--border-subtle-01, #D1D1D1);
|
|
186
|
+
}
|
|
187
|
+
:host(.disabled) .control input[type=number] {
|
|
188
|
+
background-color: var(--field-01, #F7F7F7);
|
|
189
|
+
box-shadow: none;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
:host(.readonly) input[type=number] {
|
|
193
|
+
box-shadow: none;
|
|
194
|
+
outline: none;
|
|
195
|
+
background-color: var(--field-01, #F7F7F7);
|
|
196
|
+
}
|