@rededor/cura 1.5.0-alpha.1 → 1.5.0-alpha.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/assets/assets/icons/iconset-default-list.ts +1 -1
- package/dist/assets/assets/icons/iconset-default-tmp.svg +26 -0
- package/dist/assets/assets/icons/iconset-default.svg +1 -1
- package/dist/cjs/{cura-accordion_13.cjs.entry.js → cura-accordion_12.cjs.entry.js} +25 -75
- package/dist/cjs/cura-accordion_12.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-badge-pill.cjs.entry.js +9 -13
- package/dist/cjs/cura-badge-pill.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-dropdown-search.cjs.entry.js +5 -4
- package/dist/cjs/cura-dropdown-search.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-icons-view.cjs.entry.js +1 -1
- package/dist/cjs/cura-icons-view.cjs.entry.js.map +1 -1
- package/dist/cjs/cura-modal.cjs.entry.js +73 -0
- package/dist/cjs/cura-modal.cjs.entry.js.map +1 -0
- package/dist/cjs/cura-stepper.cjs.entry.js +1 -1
- package/dist/cjs/cura-stepper.cjs.entry.js.map +1 -1
- package/dist/cjs/cura.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/assets/icons/iconset-default-list.js +1 -1
- package/dist/collection/assets/icons/iconset-default-list.js.map +1 -1
- package/dist/collection/assets/icons/iconset-default-tmp.svg +26 -0
- package/dist/collection/assets/icons/iconset-default.svg +1 -1
- package/dist/collection/assets-raw/icons/default/accessibility2.svg +4 -0
- package/dist/collection/assets-raw/icons/default/accessibility3.svg +5 -0
- package/dist/collection/assets-raw/icons/default/accessibility4.svg +4 -0
- package/dist/collection/assets-raw/icons/default/elevator.svg +5 -0
- package/dist/collection/assets-raw/icons/default/parking.svg +3 -0
- package/dist/collection/components/badges/cura-badge-pill/cura-badge-pill.js +10 -14
- package/dist/collection/components/badges/cura-badge-pill/cura-badge-pill.js.map +1 -1
- package/dist/collection/components/cura-modal/cura-modal.css +0 -1
- package/dist/collection/components/cura-stepper/cura-stepper.js +1 -1
- package/dist/collection/components/cura-stepper/cura-stepper.js.map +1 -1
- package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js +5 -4
- package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js.map +1 -1
- package/dist/collection/components/forms/cura-input-text/cura-input-text.js +3 -1
- package/dist/collection/components/forms/cura-input-text/cura-input-text.js.map +1 -1
- package/dist/collection/components/forms/cura-select/cura-select.js +70 -8
- package/dist/collection/components/forms/cura-select/cura-select.js.map +1 -1
- package/dist/collection/components/forms/cura-select/cura-select.stories.js +61 -15
- package/dist/collection/components/forms/cura-select/cura-select.stories.js.map +1 -1
- package/dist/components/cura-badge-pill2.js +10 -14
- package/dist/components/cura-badge-pill2.js.map +1 -1
- package/dist/components/cura-dropdown-search.js +5 -4
- package/dist/components/cura-dropdown-search.js.map +1 -1
- package/dist/components/cura-icons-view.js +1 -1
- package/dist/components/cura-icons-view.js.map +1 -1
- package/dist/components/cura-input-text2.js +3 -1
- package/dist/components/cura-input-text2.js.map +1 -1
- package/dist/components/cura-modal.js +1 -1
- package/dist/components/cura-modal.js.map +1 -1
- package/dist/components/cura-select2.js +23 -8
- package/dist/components/cura-select2.js.map +1 -1
- package/dist/components/cura-stepper.js +1 -1
- package/dist/components/cura-stepper.js.map +1 -1
- package/dist/cura/cura.esm.js +1 -1
- package/dist/cura/cura.esm.js.map +1 -1
- package/dist/cura/p-629c34fe.entry.js +2 -0
- package/dist/cura/p-629c34fe.entry.js.map +1 -0
- package/dist/cura/p-7f25f4dc.entry.js +2 -0
- package/dist/cura/p-7f25f4dc.entry.js.map +1 -0
- package/dist/cura/p-9d7c6e96.entry.js +2 -0
- package/dist/cura/p-9d7c6e96.entry.js.map +1 -0
- package/dist/cura/p-a4a1f6c6.entry.js +2 -0
- package/dist/cura/p-a4a1f6c6.entry.js.map +1 -0
- package/dist/cura/{p-cfbe2bce.entry.js → p-bd99ef4c.entry.js} +2 -2
- package/dist/cura/{p-cfbe2bce.entry.js.map → p-bd99ef4c.entry.js.map} +1 -1
- package/dist/cura/{p-46eaee31.entry.js → p-ced52230.entry.js} +2 -2
- package/dist/cura/p-ced52230.entry.js.map +1 -0
- package/dist/esm/{cura-accordion_13.entry.js → cura-accordion_12.entry.js} +26 -75
- package/dist/esm/cura-accordion_12.entry.js.map +1 -0
- package/dist/esm/cura-badge-pill.entry.js +9 -13
- package/dist/esm/cura-badge-pill.entry.js.map +1 -1
- package/dist/esm/cura-dropdown-search.entry.js +5 -4
- package/dist/esm/cura-dropdown-search.entry.js.map +1 -1
- package/dist/esm/cura-icons-view.entry.js +1 -1
- package/dist/esm/cura-icons-view.entry.js.map +1 -1
- package/dist/esm/cura-modal.entry.js +69 -0
- package/dist/esm/cura-modal.entry.js.map +1 -0
- package/dist/esm/cura-stepper.entry.js +1 -1
- package/dist/esm/cura-stepper.entry.js.map +1 -1
- package/dist/esm/cura.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/badges/cura-badge-pill/cura-badge-pill.d.ts +1 -1
- package/dist/types/components/forms/cura-select/cura-select.d.ts +10 -0
- package/dist/types/components/forms/cura-select/cura-select.stories.d.ts +25 -0
- package/dist/types/components.d.ts +15 -0
- package/package.json +2 -2
- package/dist/cjs/cura-accordion_13.cjs.entry.js.map +0 -1
- package/dist/cura/p-23fa2246.entry.js +0 -2
- package/dist/cura/p-23fa2246.entry.js.map +0 -1
- package/dist/cura/p-2af6216a.entry.js +0 -2
- package/dist/cura/p-2af6216a.entry.js.map +0 -1
- package/dist/cura/p-46eaee31.entry.js.map +0 -1
- package/dist/cura/p-7ba80d78.entry.js +0 -2
- package/dist/cura/p-7ba80d78.entry.js.map +0 -1
- package/dist/esm/cura-accordion_13.entry.js.map +0 -1
|
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
|
|
|
2
2
|
import { d as defineCustomElement$3 } from './cura-icon2.js';
|
|
3
3
|
import { d as defineCustomElement$2 } from './cura-paragraph2.js';
|
|
4
4
|
|
|
5
|
-
const curaModalCss = ":host{display:block}.modal{position:fixed;height:100%;width:100%;top:var(--top-offset);bottom:var(--bottom-offset);left:var(--left-offset);right:var(--right-offset);z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:var(--zIndex)}.modal.open .backdrop,.modal.open .wrapper{opacity:1;visibility:visible;animation:fadeIn 0.3s ease-out}.container{display:flex;align-items:center;justify-content:center}.backdrop,.wrapper{opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease}.backdrop{background-color:var(--background-color);z-index:calc(var(--zIndex) - 10);animation:fadeIn 0.3s ease-out}.wrapper{position:fixed;background-color:var(--neutral-white);border:2px solid var(--neutral-light);border-radius:calc(var(--base-spacing) * 3px);
|
|
5
|
+
const curaModalCss = ":host{display:block}.modal{position:fixed;height:100%;width:100%;top:var(--top-offset);bottom:var(--bottom-offset);left:var(--left-offset);right:var(--right-offset);z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:var(--zIndex)}.modal.open .backdrop,.modal.open .wrapper{opacity:1;visibility:visible;animation:fadeIn 0.3s ease-out}.container{display:flex;align-items:center;justify-content:center}.backdrop,.wrapper{opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease}.backdrop{background-color:var(--background-color);z-index:calc(var(--zIndex) - 10);animation:fadeIn 0.3s ease-out}.wrapper{position:fixed;background-color:var(--neutral-white);border:2px solid var(--neutral-light);border-radius:calc(var(--base-spacing) * 3px);max-width:600px;min-width:200px;padding:0px calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px);z-index:var(--zIndex);box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12));transform:scale(0.95);transition:transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease}.wrapper ::slotted(*){max-height:80vh;overflow:auto;padding-right:calc(var(--base-spacing) * 5px)}.modal.open .wrapper{transform:scale(1);opacity:1;visibility:visible}.close{justify-self:flex-end;padding-top:calc(var(--base-spacing) * 4px);background:none;border:none;cursor:pointer}.close.mobile{display:none}.close.desktop{display:flex}@media (max-width: 768px){.wrapper{position:fixed;bottom:0px;width:80%;padding-top:calc(var(--base-spacing) * 4px);padding-bottom:0px;border-radius:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px) 0px 0px;border-bottom:none}.close{align-items:center;border-top:1px dashed var(--neutral-light);margin-top:calc(var(--base-spacing) * 4px);padding:calc(var(--base-spacing) * 4px) 0px;justify-content:center;width:100%}.close.mobile{display:flex;gap:calc(var(--base-spacing) * 2px)}.close.desktop{display:none}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}";
|
|
6
6
|
const CuraModalStyle0 = curaModalCss;
|
|
7
7
|
|
|
8
8
|
const CuraModal$1 = /*@__PURE__*/ proxyCustomElement(class CuraModal extends HTMLElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cura-modal.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,
|
|
1
|
+
{"file":"cura-modal.js","mappings":"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","names":["CuraModal"],"sources":["src/components/cura-modal/cura-modal.scss?tag=cura-modal&encapsulation=shadow","src/components/cura-modal/cura-modal.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/spacing.scss';\n@import '../../../src/scss/mixins/shadows.scss';\n@import '../../../src/scss/mixins/responsive.scss';\n@import '../../../src/scss/mixins/animations.scss';\n\n:host {\n display: block;\n}\n\n.modal {\n position: fixed;\n height: 100%;\n width: 100%;\n top: var(--top-offset);\n bottom: var(--bottom-offset);\n left: var(--left-offset);\n right: var(--right-offset);\n z-index: -1;\n margin-top: var(--offset-top);\n\n &.open {\n z-index: var(--zIndex);\n\n .backdrop,\n .wrapper {\n opacity: 1;\n visibility: visible;\n animation: fadeIn 0.3s ease-out;\n }\n }\n}\n\n.container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.backdrop,\n.wrapper {\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n}\n\n.backdrop {\n background-color: var(--background-color);\n z-index: calc(var(--zIndex) - 10);\n animation: fadeIn 0.3s ease-out;\n}\n\n.wrapper {\n position: fixed;\n background-color: var(--neutral-white);\n border: 2px solid var(--neutral-light);\n border-radius: #{$spacing-xxxs};\n max-width: 600px;\n min-width: 200px;\n padding: #{$spacing-none} #{$spacing-xxs} #{$spacing-xxs} #{$spacing-xxs};\n z-index: var(--zIndex);\n\n @include shadow-level4();\n\n transform: scale(0.95);\n transition: transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease;\n\n ::slotted(*) {\n max-height: 80vh;\n overflow: auto;\n padding-right: #{$spacing-xs};\n }\n}\n\n.modal.open .wrapper {\n transform: scale(1);\n opacity: 1;\n visibility: visible;\n}\n\n.close {\n justify-self: flex-end;\n padding-top: #{$spacing-xxs};\n background: none;\n border: none;\n cursor: pointer;\n\n &.mobile {\n display: none;\n }\n\n &.desktop {\n display: flex;\n }\n}\n\n@include mobile-only() {\n .wrapper {\n position: fixed;\n bottom: #{$spacing-none};\n width: 80%;\n padding-top: #{$spacing-xxs};\n padding-bottom: #{$spacing-none};\n border-radius: #{$spacing-xxxs} #{$spacing-xxxs} #{$spacing-none} #{$spacing-none};\n border-bottom: none;\n }\n\n .close {\n align-items: center;\n border-top: 1px dashed var(--neutral-light);\n margin-top: #{$spacing-xxs};\n padding: #{$spacing-xxs} #{$spacing-none};\n justify-content: center;\n width: 100%;\n\n &.mobile {\n display: flex;\n gap: #{$spacing-mini};\n }\n\n &.desktop {\n display: none;\n }\n }\n}\n\n@include fadeIn();\n@include fadeOut();\n","import { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-modal',\n styleUrl: 'cura-modal.scss',\n shadow: true,\n})\nexport class CuraModal {\n /**\n * Property open to control modal visibility.\n * Default: false\n */\n @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n /**\n * Property background to control modal backdrop color.\n * Default: light\n */\n @Prop() background?: 'dark' | 'light' = 'light';\n /**\n * Property top to control modal top position.\n * Default: 0px\n */\n @Prop() top?: number = 0;\n /**\n * Property bottom to control modal bottom position.\n * Default: 0px\n */\n @Prop() bottom?: number = 0;\n /**\n * Property left to control modal left position.\n * Default: 0px\n */\n @Prop() left?: number = 0;\n /**\n * Property right to control modal right position.\n * Default: 0px\n */\n @Prop() right?: number = 0;\n /**\n * Defines the label for the close button when the modal is viewed on mobile.\n * Default: Fechar\n */\n @Prop({ reflect: true }) mobileCloseLabel: string = 'Fechar';\n /**\n * Property zindex to control the z-index value of the component.\n * Default: 100\n */\n @Prop({ reflect: true }) zindex: string = '100';\n /**\n * Event close to handle modal close.\n */\n @Event({ eventName: 'modalClose' }) modalClose: EventEmitter<void>;\n\n @State() styles = {};\n\n @Watch('background')\n setColors() {\n const backgroundTheme = {\n dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),\n light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),\n };\n\n this.styles = {\n ...this.styles,\n '--background-color': backgroundTheme[this.background],\n };\n }\n\n setOffset(name: string, value: number) {\n this.styles = {\n ...this.styles,\n [`--${name}-offset`]: `${value}px`,\n };\n }\n\n @Watch('top')\n setTop() {\n this.setOffset('top', this.top);\n }\n\n @Watch('bottom')\n setBottom() {\n this.setOffset('bottom', this.bottom);\n }\n\n @Watch('left')\n setLeft() {\n this.setOffset('left', this.left);\n }\n\n @Watch('right')\n setRight() {\n this.setOffset('right', this.right);\n }\n\n connectedCallback() {\n this.styles = {\n ...this.styles,\n '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'),\n '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'),\n '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n };\n this.setColors();\n this.setTop();\n this.setBottom();\n this.setLeft();\n this.setRight();\n }\n\n private handleClose = () => {\n this.modalClose.emit();\n this.open = false;\n };\n\n render() {\n return (\n <Host role=\"dialog\" aria-modal=\"true\" style={{ '--zIndex': this.zindex }}>\n <div class={this.open ? 'modal container open' : 'modal container'} style={this.styles}>\n <div class={this.open ? 'modal backdrop open' : 'modal backdrop'} onClick={this.handleClose}></div>\n <div class=\"wrapper\">\n {/* Desktop button */}\n <button class=\"close desktop\" onClick={this.handleClose}>\n <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"></cura-icon>\n </button>\n <slot></slot>\n {/* Mobile button */}\n <button class=\"close mobile\" onClick={this.handleClose}>\n <cura-icon name=\"close\" color=\"error-dark\" size=\"16\"></cura-icon>\n <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n {this.mobileCloseLabel}\n </cura-paragraph>\n </button>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -11,6 +11,7 @@ const CuraSelect = /*@__PURE__*/ proxyCustomElement(class CuraSelect extends HTM
|
|
|
11
11
|
this.__registerHost();
|
|
12
12
|
this.__attachShadow();
|
|
13
13
|
this.selected = createEvent(this, "selected", 7);
|
|
14
|
+
this.searchTermInput = createEvent(this, "searchTermInput", 7);
|
|
14
15
|
this.internals = this.attachInternals();
|
|
15
16
|
/**
|
|
16
17
|
* Styles to be applied to the component.
|
|
@@ -81,10 +82,12 @@ const CuraSelect = /*@__PURE__*/ proxyCustomElement(class CuraSelect extends HTM
|
|
|
81
82
|
this.value = '';
|
|
82
83
|
this.mode = 'default';
|
|
83
84
|
this.size = 'medium';
|
|
85
|
+
this.iconName = undefined;
|
|
84
86
|
this.status = 'default';
|
|
85
87
|
this.disabled = false;
|
|
86
88
|
this.required = false;
|
|
87
89
|
this.searchBehavior = false;
|
|
90
|
+
this.caseSensitive = true;
|
|
88
91
|
this.isHovered = false;
|
|
89
92
|
this.isFocused = false;
|
|
90
93
|
this.isOpen = false;
|
|
@@ -99,13 +102,23 @@ const CuraSelect = /*@__PURE__*/ proxyCustomElement(class CuraSelect extends HTM
|
|
|
99
102
|
* Filters the options based on the current input value.
|
|
100
103
|
*/
|
|
101
104
|
filterOptions(newText) {
|
|
105
|
+
this.searchTermInput.emit(newText);
|
|
102
106
|
if (!this.isOpen || !this.searchBehavior) {
|
|
103
107
|
return;
|
|
104
108
|
}
|
|
109
|
+
const removeAccents = (str) => {
|
|
110
|
+
return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
|
|
111
|
+
};
|
|
112
|
+
let searchTerm = newText;
|
|
113
|
+
if (!this.caseSensitive) {
|
|
114
|
+
searchTerm = removeAccents(searchTerm).toLocaleLowerCase();
|
|
115
|
+
}
|
|
105
116
|
this.options.forEach(option => {
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
117
|
+
let optionValue = option.textContent || '';
|
|
118
|
+
if (!this.caseSensitive) {
|
|
119
|
+
optionValue = removeAccents(optionValue === null || optionValue === void 0 ? void 0 : optionValue.toLowerCase());
|
|
120
|
+
}
|
|
121
|
+
const isVisible = optionValue.includes(searchTerm);
|
|
109
122
|
option.style.display = isVisible ? 'block' : 'none';
|
|
110
123
|
});
|
|
111
124
|
}
|
|
@@ -283,19 +296,19 @@ const CuraSelect = /*@__PURE__*/ proxyCustomElement(class CuraSelect extends HTM
|
|
|
283
296
|
* Renders the icon based on the component's status.
|
|
284
297
|
*/
|
|
285
298
|
renderIcon() {
|
|
286
|
-
if (this.status === 'default')
|
|
299
|
+
if (this.status === 'default' && !this.iconName)
|
|
287
300
|
return null;
|
|
288
|
-
const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];
|
|
301
|
+
const icon = { default: this.iconName, success: 'checkCircle', error: 'alertCircle' }[this.status];
|
|
289
302
|
return h("cura-icon", { class: "feedback-icon", name: icon, iconset: "default", size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles });
|
|
290
303
|
}
|
|
291
304
|
render() {
|
|
292
|
-
return (h(Host, { key: '
|
|
305
|
+
return (h(Host, { key: 'c4d3b518ddf6b9498e3a038b42d96cc36ea5b9af', style: this.styles }, h("div", { key: 'b469ec6460df4faa9dbf33ae46efd25b16e8dede', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: 'b1e96f454e136f74a34d3fe2ad915a76b8892383', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: 'f6df4c9fd66179b157545354c9d7bce3a1965383', class: "required" }, "* "))), h("div", { key: '3c99013ba59cbc7520fcd9e54e4911be88e257e8', class: {
|
|
293
306
|
'cura-input-field': true,
|
|
294
307
|
'open': this.isOpen,
|
|
295
|
-
} }, this.renderIcon(), h("input", { key: '
|
|
308
|
+
} }, this.renderIcon(), h("input", { key: '5c4cca3aa11ca5a43679551ef0db5d3b4a2672c1', type: "text", autocomplete: "off", onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("button", { key: '0e4ae1fc33090cb1c2a5f6616302262093c709f3', class: "up-down-button" }, h("cura-icon", { key: '7aa46c48d670725d6010e00ff74772dd76f04358', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), h("cura-label", { key: 'b37bbce2d092b368509778cb39e830fbfba40107', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'b8090f03acc7d34e75088cdd8b7f375b2be21aaf' })), this.isOpen && (h("div", { key: '4d279e833a3c4311972b11c259d616b7480fc5b5', class: {
|
|
296
309
|
menu: true,
|
|
297
310
|
open: this.isOpen,
|
|
298
|
-
} }, h("slot", { key: '
|
|
311
|
+
} }, h("slot", { key: '0c20c0bbfb9ed727825bb6cc7e06ab671350d37b', name: "option" }))))));
|
|
299
312
|
}
|
|
300
313
|
static get formAssociated() { return true; }
|
|
301
314
|
get host() { return this; }
|
|
@@ -311,10 +324,12 @@ const CuraSelect = /*@__PURE__*/ proxyCustomElement(class CuraSelect extends HTM
|
|
|
311
324
|
"value": [1537],
|
|
312
325
|
"mode": [513],
|
|
313
326
|
"size": [513],
|
|
327
|
+
"iconName": [1, "icon-name"],
|
|
314
328
|
"status": [1537],
|
|
315
329
|
"disabled": [516],
|
|
316
330
|
"required": [516],
|
|
317
331
|
"searchBehavior": [516, "search-behavior"],
|
|
332
|
+
"caseSensitive": [516, "case-sensitive"],
|
|
318
333
|
"isHovered": [32],
|
|
319
334
|
"isFocused": [32],
|
|
320
335
|
"isOpen": [32],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cura-select2.js","mappings":"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","names":[],"sources":["src/components/forms/cura-select/cura-select.scss?tag=cura-select&encapsulation=shadow","src/components/forms/cura-select/cura-select.tsx"],"sourcesContent":["@import '../../../scss/mixins/forms.scss';\n\n:host {\n display: block;\n position: relative;\n font-family: var(--font-family);\n}\n\n.wrapper {\n width: 100%;\n user-select: none;\n text-align: left !important;\n\n @include cura-label();\n @include helper-text();\n\n @include cura-input-field() {\n .up-down-icon {\n order: 3;\n padding-right: 9px;\n cursor: pointer;\n pointer-events: all;\n }\n\n .up-down-button {\n background-color: transparent;\n border: none;\n }\n\n input {\n padding: 0px 12px 0px 8px;\n cursor: pointer;\n }\n\n &.open {\n border-radius: 4px 4px 0 0 !important;\n }\n }\n\n @include cura-input-transparent();\n\n @include cura-forms-hover();\n @include cura-forms-focused();\n\n @include cura-forms-success();\n @include cura-forms-error();\n\n @include cura-forms-small() {\n &.label {\n .menu {\n top: 53px;\n }\n }\n .menu {\n top: 33px;\n }\n }\n\n @include cura-forms-medium() {\n &.label {\n .menu {\n top: 61px;\n }\n }\n .menu {\n top: 40px;\n }\n }\n\n @include cura-forms-large() {\n &.label {\n .menu {\n top: 69px;\n }\n }\n .menu {\n top: 47px;\n }\n }\n\n @include cura-forms-disabled();\n}\n\n.required {\n color: red;\n}\n\n.menu {\n position: absolute;\n left: 0;\n right: -1px;\n background: #fff;\n border: 2px solid var(--neutral-light);\n border-radius: 4px;\n z-index: 1000;\n max-height: 285px;\n overflow: hidden;\n border-top: transparent;\n align-items: center;\n\n scrollbar-color: var(--neutral-medium) var(--neutral-black-20);\n overflow-y: auto;\n box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n\n &.open {\n border-radius: 0 !important;\n }\n}\n","import { Component, Element, Host, Prop, State, h, Event, EventEmitter, AttachInternals, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-select',\n styleUrl: 'cura-select.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraSelect {\n /**\n * The label text for the select component.\n * Reflects as an attribute in the DOM.\n */\n @Prop({ reflect: true }) label: string = '';\n\n /**\n * Placeholder text for the input field.\n * Reflects as an attribute in the DOM.\n */\n @Prop({ reflect: true }) placeholder: string = '';\n\n /**\n * Current value of the select component.\n * Reflects as an attribute in the DOM and is mutable.\n */\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /**\n * Display mode of the select component.\n * Can be 'default' or 'transparent'.\n */\n @Prop({ reflect: true }) mode: 'default' | 'transparent' = 'default';\n\n /**\n * Size of the select component.\n * Can be 'small', 'medium', or 'large'.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Status of the select component.\n * Can be 'success', 'error', or 'default'.\n */\n @Prop({ reflect: true, mutable: true }) status: 'success' | 'error' | 'default' = 'default';\n\n /**\n * Whether the select component is disabled.\n * Reflects as an attribute in the DOM.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Whether the select component is required.\n * Reflects as an attribute in the DOM.\n */\n @Prop({ reflect: true }) required: boolean = false;\n\n /**\n * Enable / Disable search at options by term.\n * Default: false\n */\n @Prop({ reflect: true }) searchBehavior: boolean = false;\n\n /**\n * Internal state: Whether the input is hovered.\n * Default: false\n */\n @State() isHovered: boolean = false;\n\n /**\n * Internal state: Whether the input is focused.\n * Default: false\n */\n @State() isFocused: boolean = false;\n\n /**\n * Internal state: Whether the dropdown menu is open.\n * Default: false\n */\n @State() isOpen: boolean = false;\n\n /**\n * Internal state: Collection of options for the select component.\n */\n @State() options: NodeListOf<HTMLCuraSelectOptionElement>;\n\n @State() activeIndex = -1;\n\n @Watch('activeIndex')\n updateOptionHighlights(newActiveINdex: number) {\n this.options.forEach((option, index) => ((option as any).active = index === newActiveINdex));\n }\n\n @State() textInput = '';\n\n @Watch('textInput')\n /**\n * Filters the options based on the current input value.\n */\n filterOptions(newText) {\n if (!this.isOpen || !this.searchBehavior) {\n return;\n }\n\n this.options.forEach(option => {\n const optionValue = option.textContent?.toLowerCase() || '';\n const isVisible = optionValue.includes(newText.toLocaleLowerCase());\n option.style.display = isVisible ? 'block' : 'none';\n });\n }\n\n /**\n * Reference to the host element of the component.\n */\n @Element() host: HTMLElement;\n\n /**\n * Event emitted when an option is selected.\n */\n @Event() selected: EventEmitter;\n\n /**\n * MutationObserver to watch changes in the component.\n */\n mutationObserver: MutationObserver;\n\n /**\n * Styles to be applied to the component.\n */\n styles = {};\n\n /**\n * Theme object containing font and color information.\n */\n theme = window.CuraAPI.theme;\n\n @AttachInternals() internals: ElementInternals;\n\n /**\n * Callback for form association.\n */\n formAssociatedCallback(form: { ariaLabel: string }) {\n form.ariaLabel = this.label;\n }\n\n /**\n * Callback to restore the switch state from the form.\n */\n formStateRestoreCallback(state: { value: string }) {\n this.textInput = state.value;\n this.updateSelectedOption();\n }\n\n /**\n * Callback to reset the switch state when the form is reset.\n */\n formResetCallback() {\n this.textInput = '';\n this.clearSelectedAttributes();\n this.internals.setFormValue('');\n this.internals.setValidity({});\n }\n\n /**\n * Callback to update the switch's disabled state when the form's disabled state changes.\n */\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n /**\n * Lifecycle method called before the component is rendered.\n * Initializes the options for the select component.\n */\n componentWillLoad() {\n this.initializeOptions();\n }\n /**\n * Lifecycle method called after the component is rendered.\n * Initializes select-related functionality.\n */\n componentDidLoad() {\n this.setupMutationObserver();\n }\n /**\n * Lifecycle method called when the component is connected to the DOM.\n * Applies styles based on the theme.\n */\n connectedCallback() {\n this.applyStyles();\n }\n /**\n * Lifecycle method called when the component is disconnected from the DOM.\n * Disconnects the MutationObserver if it exists.\n */\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n initializeOptions() {\n this.options = this.host.querySelectorAll<HTMLCuraSelectOptionElement>('cura-select-option');\n this.options.forEach(option => {\n option.setAttribute('size', this.size);\n\n const isSelected = this.value === option.value;\n option.setAttribute('selected', JSON.stringify(isSelected));\n\n if (isSelected) {\n this.value = option.value;\n this.internals.setFormValue(option.value);\n }\n });\n\n this.textInput = Array.from(this.options).find(option => option.value === this.value)?.textContent || this.textInput;\n }\n /**\n * Applies styles to the component based on the theme.\n */\n applyStyles() {\n const { fonts, colors } = this.theme;\n const fontWeights = fonts.getWeights();\n\n this.styles = {\n ...this.styles,\n '--font-weight-medium': fontWeights.medium,\n '--font-weight-bold': fontWeights.bold,\n '--font-weight-regular': fontWeights.regular,\n '--font-color': fonts.getColor(),\n '--font-family': fonts.getFamily(),\n '--font-size': fonts.getSize(),\n };\n\n const colorKeys = [\n 'primary-base',\n 'neutral-purewhite',\n 'neutral-white',\n 'neutral-black',\n 'neutral-medium',\n 'neutral-light',\n 'neutral-base',\n 'neutral-dark',\n 'success-dark',\n 'success-darker',\n 'success-lighter',\n 'error-lighter',\n 'error-dark',\n 'error-darker',\n 'error-base',\n 'info-base',\n ];\n\n colorKeys.forEach(key => {\n this.styles[`--${key}`] = colors.getColor(key);\n });\n }\n /**\n * Sets up a MutationObserver to watch for changes in the component.\n */\n setupMutationObserver() {\n this.mutationObserver = new MutationObserver(this.handleMutations);\n this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });\n }\n /**\n * Handles mutations observed by the MutationObserver.\n * Updates the selected option or filters options based on the mutation type.\n */\n handleMutations = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.type === 'attributes') {\n if (mutation.attributeName === 'selected') this.updateSelectedOption();\n }\n });\n };\n /**\n * Handles the selection of an option.\n */\n onOptiselected = (event: Event) => {\n const selectedOption = event.target as HTMLElement;\n this.clearSelectedAttributes();\n selectedOption.setAttribute('selected', 'true');\n };\n\n @Watch('value')\n handleValueChange(newValue: string) {\n this.clearSelectedAttributes();\n\n const selectedOption = this.host.querySelector(`cura-select-option[value=\"${newValue}\"]`);\n\n if (!selectedOption) {\n return;\n }\n\n selectedOption.setAttribute('selected', 'true');\n }\n\n updateSelectedOption() {\n const selectedOptionElement = this.host.querySelector<HTMLCuraSelectOptionElement>('cura-select-option[selected]');\n\n if (!selectedOptionElement) {\n return;\n }\n\n this.value = selectedOptionElement.value;\n this.internals.setFormValue(this.value);\n\n if (this.textInput !== selectedOptionElement.textContent) {\n this.textInput = selectedOptionElement.textContent;\n this.isOpen = false;\n this.selected.emit(selectedOptionElement.value);\n }\n }\n\n /**\n * Clears the 'selected' attribute from all options.\n */\n clearSelectedAttributes() {\n this.options.forEach(option => option.removeAttribute('selected'));\n }\n\n handleKeyNavigation = (event: KeyboardEvent) => {\n const { code: keyCode } = event;\n\n if (!this.isOpen && keyCode === 'ArrowDown') {\n this.isOpen = true;\n this.activeIndex = 0;\n\n return;\n }\n\n if (keyCode === 'ArrowDown') {\n event.preventDefault();\n this.updateActiveIndex(1);\n }\n\n if (keyCode === 'ArrowUp') {\n event.preventDefault();\n this.updateActiveIndex(-1);\n }\n\n if (keyCode === 'Enter' || keyCode === 'Space') {\n this.options[this.activeIndex]?.click();\n }\n\n if (keyCode === 'Escape') {\n this.isOpen = false;\n }\n };\n\n updateActiveIndex(direction: number) {\n if (this.options.length === 0) return;\n this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;\n }\n\n handleInputChange = (e: Event) => {\n this.textInput = (e.target as HTMLInputElement).value;\n this.isOpen = this.textInput.length > 0;\n this.internals.setFormValue(this.textInput);\n };\n\n getClasses() {\n return {\n wrapper: true,\n label: !!this.label,\n disabled: this.disabled,\n transparent: this.mode === 'transparent',\n [this.size.toLowerCase()]: true,\n [this.status.toLowerCase()]: true,\n };\n }\n\n /**\n * Determines the color based on the item type and component state.\n */\n getColor(item: 'label' | 'text' | 'icon') {\n if (this.disabled) return 'neutral-medium';\n\n const isStatusDefault = this.status === 'default';\n const isHoveredOrFocused = this.isFocused || this.isHovered;\n\n if (item === 'label') {\n if (!isStatusDefault || isHoveredOrFocused) return 'neutral-black';\n return 'neutral-dark';\n }\n\n if (isHoveredOrFocused && isStatusDefault) return 'neutral-black';\n if (this.status === 'success') return 'success-dark';\n if (this.status === 'error') return 'error-dark';\n\n return 'neutral-dark';\n }\n\n /**\n * Renders the icon based on the component's status.\n */\n renderIcon() {\n if (this.status === 'default') return null;\n const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];\n return <cura-icon class=\"feedback-icon\" name={icon} iconset=\"default\" size={this.size === 'large' ? 20 : 16} color={this.getColor('icon')} style={this.styles} />;\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.disabled) return event.preventDefault();\n const target = event.target as HTMLElement;\n\n if (target.tagName === 'CURA-SELECT-OPTION') return this.onOptiselected(event);\n this.isOpen = !this.isOpen;\n };\n\n render() {\n return (\n <Host style={this.styles}>\n <div class={this.getClasses()} onMouseEnter={() => (this.isHovered = true)} onMouseLeave={() => (this.isHovered = false)} onClick={this.handleClick}>\n {this.label && (\n <cura-label class=\"label\" weight=\"bold\" size={this.size === 'large' ? 'small' : 'xsmall'} color={this.getColor('label')}>\n {this.label} {this.required && <span class=\"required\">* </span>}\n </cura-label>\n )}\n\n <div\n class={{\n 'cura-input-field': true,\n 'open': this.isOpen,\n }}\n >\n {this.renderIcon()}\n <input\n type=\"text\"\n autocomplete=\"off\"\n onFocus={() => (this.isFocused = true)}\n onBlur={() => (this.isFocused = false)}\n onKeyDown={this.handleKeyNavigation}\n aria-required={String(this.required)}\n aria-disabled={String(this.disabled)}\n aria-invalid={String(this.status === 'error')}\n onInput={this.handleInputChange}\n style={this.styles}\n placeholder={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n value={this.textInput}\n readonly={this.searchBehavior ? null : true}\n />\n <button class=\"up-down-button\">\n <cura-icon name={this.isOpen ? 'up' : 'down'} class=\"up-down-icon\" color={this.disabled ? 'neutral-dark' : 'primary-base'} size={16} iconset=\"default\" />\n </button>\n </div>\n <cura-label class=\"helper-text\" size=\"xsmall\" color={this.getColor('text')} weight={this.mode === 'transparent' ? 'bold' : 'regular'}>\n <slot></slot>\n </cura-label>\n {this.isOpen && (\n <div\n class={{\n menu: true,\n open: this.isOpen,\n }}\n >\n <slot name=\"option\"></slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"cura-select2.js","mappings":"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","names":[],"sources":["src/components/forms/cura-select/cura-select.scss?tag=cura-select&encapsulation=shadow","src/components/forms/cura-select/cura-select.tsx"],"sourcesContent":["@import '../../../scss/mixins/forms.scss';\n\n:host {\n display: block;\n position: relative;\n font-family: var(--font-family);\n}\n\n.wrapper {\n width: 100%;\n user-select: none;\n text-align: left !important;\n\n @include cura-label();\n @include helper-text();\n\n @include cura-input-field() {\n .up-down-icon {\n order: 3;\n padding-right: 9px;\n cursor: pointer;\n pointer-events: all;\n }\n\n .up-down-button {\n background-color: transparent;\n border: none;\n }\n\n input {\n padding: 0px 12px 0px 8px;\n cursor: pointer;\n }\n\n &.open {\n border-radius: 4px 4px 0 0 !important;\n }\n }\n\n @include cura-input-transparent();\n\n @include cura-forms-hover();\n @include cura-forms-focused();\n\n @include cura-forms-success();\n @include cura-forms-error();\n\n @include cura-forms-small() {\n &.label {\n .menu {\n top: 53px;\n }\n }\n .menu {\n top: 33px;\n }\n }\n\n @include cura-forms-medium() {\n &.label {\n .menu {\n top: 61px;\n }\n }\n .menu {\n top: 40px;\n }\n }\n\n @include cura-forms-large() {\n &.label {\n .menu {\n top: 69px;\n }\n }\n .menu {\n top: 47px;\n }\n }\n\n @include cura-forms-disabled();\n}\n\n.required {\n color: red;\n}\n\n.menu {\n position: absolute;\n left: 0;\n right: -1px;\n background: #fff;\n border: 2px solid var(--neutral-light);\n border-radius: 4px;\n z-index: 1000;\n max-height: 285px;\n overflow: hidden;\n border-top: transparent;\n align-items: center;\n\n scrollbar-color: var(--neutral-medium) var(--neutral-black-20);\n overflow-y: auto;\n box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n\n &.open {\n border-radius: 0 !important;\n }\n}\n","import { Component, Element, Host, Prop, State, h, Event, EventEmitter, AttachInternals, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-select',\n styleUrl: 'cura-select.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraSelect {\n /**\n * The label text for the select component.\n * Reflects as an attribute in the DOM.\n */\n @Prop({ reflect: true }) label: string = '';\n\n /**\n * Placeholder text for the input field.\n * Reflects as an attribute in the DOM.\n */\n @Prop({ reflect: true }) placeholder: string = '';\n\n /**\n * Current value of the select component.\n * Reflects as an attribute in the DOM and is mutable.\n */\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /**\n * Display mode of the select component.\n * Can be 'default' or 'transparent'.\n */\n @Prop({ reflect: true }) mode: 'default' | 'transparent' = 'default';\n\n /**\n * Size of the select component.\n * Can be 'small', 'medium', or 'large'.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n @Prop() iconName?: string\n\n /**\n * Status of the select component.\n * Can be 'success', 'error', or 'default'.\n */\n @Prop({ reflect: true, mutable: true }) status: 'success' | 'error' | 'default' = 'default';\n\n /**\n * Whether the select component is disabled.\n * Reflects as an attribute in the DOM.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Whether the select component is required.\n * Reflects as an attribute in the DOM.\n */\n @Prop({ reflect: true }) required: boolean = false;\n\n /**\n * Enable / Disable search at options by term.\n * Default: false\n */\n @Prop({ reflect: true }) searchBehavior: boolean = false;\n\n /**\n * The search will be sensitive to accents.\n * Default: true\n */\n @Prop({ reflect: true }) caseSensitive: boolean = true;\n\n /**\n * Internal state: Whether the input is hovered.\n * Default: false\n */\n @State() isHovered: boolean = false;\n\n /**\n * Internal state: Whether the input is focused.\n * Default: false\n */\n @State() isFocused: boolean = false;\n\n /**\n * Internal state: Whether the dropdown menu is open.\n * Default: false\n */\n @State() isOpen: boolean = false;\n\n /**\n * Internal state: Collection of options for the select component.\n */\n @State() options: NodeListOf<HTMLCuraSelectOptionElement>;\n\n @State() activeIndex = -1;\n\n @Watch('activeIndex')\n updateOptionHighlights(newActiveINdex: number) {\n this.options.forEach((option, index) => ((option as any).active = index === newActiveINdex));\n }\n\n @State() textInput = '';\n\n @Watch('textInput')\n /**\n * Filters the options based on the current input value.\n */\n filterOptions(newText) {\n this.searchTermInput.emit(newText);\n\n if (!this.isOpen || !this.searchBehavior) {\n return;\n }\n\n const removeAccents = (str: string) => {\n return str.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '');\n };\n\n let searchTerm = newText;\n if (!this.caseSensitive) {\n searchTerm = removeAccents(searchTerm).toLocaleLowerCase();\n }\n\n this.options.forEach(option => {\n let optionValue = option.textContent || '';\n if (!this.caseSensitive) {\n optionValue = removeAccents(optionValue?.toLowerCase());\n }\n const isVisible = optionValue.includes(searchTerm);\n option.style.display = isVisible ? 'block' : 'none';\n });\n }\n\n /**\n * Reference to the host element of the component.\n */\n @Element() host: HTMLElement;\n\n /**\n * Event emitted when an option is selected.\n */\n @Event() selected: EventEmitter;\n\n /**\n * Event emitted when an option is searched.\n */\n @Event() searchTermInput: EventEmitter;\n\n /**\n * MutationObserver to watch changes in the component.\n */\n mutationObserver: MutationObserver;\n\n /**\n * Styles to be applied to the component.\n */\n styles = {};\n\n /**\n * Theme object containing font and color information.\n */\n theme = window.CuraAPI.theme;\n\n @AttachInternals() internals: ElementInternals;\n\n /**\n * Callback for form association.\n */\n formAssociatedCallback(form: { ariaLabel: string }) {\n form.ariaLabel = this.label;\n }\n\n /**\n * Callback to restore the switch state from the form.\n */\n formStateRestoreCallback(state: { value: string }) {\n this.textInput = state.value;\n this.updateSelectedOption();\n }\n\n /**\n * Callback to reset the switch state when the form is reset.\n */\n formResetCallback() {\n this.textInput = '';\n this.clearSelectedAttributes();\n this.internals.setFormValue('');\n this.internals.setValidity({});\n }\n\n /**\n * Callback to update the switch's disabled state when the form's disabled state changes.\n */\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n /**\n * Lifecycle method called before the component is rendered.\n * Initializes the options for the select component.\n */\n componentWillLoad() {\n this.initializeOptions();\n }\n /**\n * Lifecycle method called after the component is rendered.\n * Initializes select-related functionality.\n */\n componentDidLoad() {\n this.setupMutationObserver();\n }\n /**\n * Lifecycle method called when the component is connected to the DOM.\n * Applies styles based on the theme.\n */\n connectedCallback() {\n this.applyStyles();\n }\n /**\n * Lifecycle method called when the component is disconnected from the DOM.\n * Disconnects the MutationObserver if it exists.\n */\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n initializeOptions() {\n this.options = this.host.querySelectorAll<HTMLCuraSelectOptionElement>('cura-select-option');\n this.options.forEach(option => {\n option.setAttribute('size', this.size);\n\n const isSelected = this.value === option.value;\n option.setAttribute('selected', JSON.stringify(isSelected));\n\n if (isSelected) {\n this.value = option.value;\n this.internals.setFormValue(option.value);\n }\n });\n\n this.textInput = Array.from(this.options).find(option => option.value === this.value)?.textContent || this.textInput;\n }\n /**\n * Applies styles to the component based on the theme.\n */\n applyStyles() {\n const { fonts, colors } = this.theme;\n const fontWeights = fonts.getWeights();\n\n this.styles = {\n ...this.styles,\n '--font-weight-medium': fontWeights.medium,\n '--font-weight-bold': fontWeights.bold,\n '--font-weight-regular': fontWeights.regular,\n '--font-color': fonts.getColor(),\n '--font-family': fonts.getFamily(),\n '--font-size': fonts.getSize(),\n };\n\n const colorKeys = [\n 'primary-base',\n 'neutral-purewhite',\n 'neutral-white',\n 'neutral-black',\n 'neutral-medium',\n 'neutral-light',\n 'neutral-base',\n 'neutral-dark',\n 'success-dark',\n 'success-darker',\n 'success-lighter',\n 'error-lighter',\n 'error-dark',\n 'error-darker',\n 'error-base',\n 'info-base',\n ];\n\n colorKeys.forEach(key => {\n this.styles[`--${key}`] = colors.getColor(key);\n });\n }\n /**\n * Sets up a MutationObserver to watch for changes in the component.\n */\n setupMutationObserver() {\n this.mutationObserver = new MutationObserver(this.handleMutations);\n this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });\n }\n /**\n * Handles mutations observed by the MutationObserver.\n * Updates the selected option or filters options based on the mutation type.\n */\n handleMutations = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.type === 'attributes') {\n if (mutation.attributeName === 'selected') this.updateSelectedOption();\n }\n });\n };\n /**\n * Handles the selection of an option.\n */\n onOptiselected = (event: Event) => {\n const selectedOption = event.target as HTMLElement;\n this.clearSelectedAttributes();\n selectedOption.setAttribute('selected', 'true');\n };\n\n @Watch('value')\n handleValueChange(newValue: string) {\n this.clearSelectedAttributes();\n\n const selectedOption = this.host.querySelector(`cura-select-option[value=\"${newValue}\"]`);\n\n if (!selectedOption) {\n return;\n }\n\n selectedOption.setAttribute('selected', 'true');\n }\n\n updateSelectedOption() {\n const selectedOptionElement = this.host.querySelector<HTMLCuraSelectOptionElement>('cura-select-option[selected]');\n\n if (!selectedOptionElement) {\n return;\n }\n\n this.value = selectedOptionElement.value;\n this.internals.setFormValue(this.value);\n\n if (this.textInput !== selectedOptionElement.textContent) {\n this.textInput = selectedOptionElement.textContent;\n this.isOpen = false;\n this.selected.emit(selectedOptionElement.value);\n }\n }\n\n /**\n * Clears the 'selected' attribute from all options.\n */\n clearSelectedAttributes() {\n this.options.forEach(option => option.removeAttribute('selected'));\n }\n\n handleKeyNavigation = (event: KeyboardEvent) => {\n const { code: keyCode } = event;\n\n if (!this.isOpen && keyCode === 'ArrowDown') {\n this.isOpen = true;\n this.activeIndex = 0;\n\n return;\n }\n\n if (keyCode === 'ArrowDown') {\n event.preventDefault();\n this.updateActiveIndex(1);\n }\n\n if (keyCode === 'ArrowUp') {\n event.preventDefault();\n this.updateActiveIndex(-1);\n }\n\n if (keyCode === 'Enter' || keyCode === 'Space') {\n this.options[this.activeIndex]?.click();\n }\n\n if (keyCode === 'Escape') {\n this.isOpen = false;\n }\n };\n\n updateActiveIndex(direction: number) {\n if (this.options.length === 0) return;\n this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;\n }\n\n handleInputChange = (e: Event) => {\n this.textInput = (e.target as HTMLInputElement).value;\n this.isOpen = this.textInput.length > 0;\n this.internals.setFormValue(this.textInput);\n };\n\n getClasses() {\n return {\n wrapper: true,\n label: !!this.label,\n disabled: this.disabled,\n transparent: this.mode === 'transparent',\n [this.size.toLowerCase()]: true,\n [this.status.toLowerCase()]: true,\n };\n }\n\n /**\n * Determines the color based on the item type and component state.\n */\n getColor(item: 'label' | 'text' | 'icon') {\n if (this.disabled) return 'neutral-medium';\n\n const isStatusDefault = this.status === 'default';\n const isHoveredOrFocused = this.isFocused || this.isHovered;\n\n if (item === 'label') {\n if (!isStatusDefault || isHoveredOrFocused) return 'neutral-black';\n return 'neutral-dark';\n }\n\n if (isHoveredOrFocused && isStatusDefault) return 'neutral-black';\n if (this.status === 'success') return 'success-dark';\n if (this.status === 'error') return 'error-dark';\n\n return 'neutral-dark';\n }\n\n /**\n * Renders the icon based on the component's status.\n */\n renderIcon() {\n if (this.status === 'default' && !this.iconName) return null;\n const icon = { default: this.iconName, success: 'checkCircle', error: 'alertCircle' }[this.status];\n return <cura-icon class=\"feedback-icon\" name={icon} iconset=\"default\" size={this.size === 'large' ? 20 : 16} color={this.getColor('icon')} style={this.styles} />;\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.disabled) return event.preventDefault();\n const target = event.target as HTMLElement;\n\n if (target.tagName === 'CURA-SELECT-OPTION') return this.onOptiselected(event);\n this.isOpen = !this.isOpen;\n };\n\n render() {\n return (\n <Host style={this.styles}>\n <div class={this.getClasses()} onMouseEnter={() => (this.isHovered = true)} onMouseLeave={() => (this.isHovered = false)} onClick={this.handleClick}>\n {this.label && (\n <cura-label class=\"label\" weight=\"bold\" size={this.size === 'large' ? 'small' : 'xsmall'} color={this.getColor('label')}>\n {this.label} {this.required && <span class=\"required\">* </span>}\n </cura-label>\n )}\n\n <div\n class={{\n 'cura-input-field': true,\n 'open': this.isOpen,\n }}\n >\n {this.renderIcon()}\n <input\n type=\"text\"\n autocomplete=\"off\"\n onFocus={() => (this.isFocused = true)}\n onBlur={() => (this.isFocused = false)}\n onKeyDown={this.handleKeyNavigation}\n aria-required={String(this.required)}\n aria-disabled={String(this.disabled)}\n aria-invalid={String(this.status === 'error')}\n onInput={this.handleInputChange}\n style={this.styles}\n placeholder={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n value={this.textInput}\n readonly={this.searchBehavior ? null : true}\n />\n <button class=\"up-down-button\">\n <cura-icon name={this.isOpen ? 'up' : 'down'} class=\"up-down-icon\" color={this.disabled ? 'neutral-dark' : 'primary-base'} size={16} iconset=\"default\" />\n </button>\n </div>\n <cura-label class=\"helper-text\" size=\"xsmall\" color={this.getColor('text')} weight={this.mode === 'transparent' ? 'bold' : 'regular'}>\n <slot></slot>\n </cura-label>\n {this.isOpen && (\n <div\n class={{\n menu: true,\n open: this.isOpen,\n }}\n >\n <slot name=\"option\"></slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -117,7 +117,7 @@ const CuraStepper$1 = /*@__PURE__*/ proxyCustomElement(class CuraStepper extends
|
|
|
117
117
|
return (h("div", { class: "container", style: this.styles }, h("div", { class: "stepper-list" }, this.stepList.map((step, stepIndex) => this.renderStep(step, stepIndex)))));
|
|
118
118
|
}
|
|
119
119
|
render() {
|
|
120
|
-
return h(Host, { key: '
|
|
120
|
+
return h(Host, { key: 'a6562de52fefff80eb2d310555ce56956cce64d9' }, this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper());
|
|
121
121
|
}
|
|
122
122
|
get host() { return this; }
|
|
123
123
|
static get style() { return CuraStepperStyle0; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cura-stepper.js","mappings":"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","names":["CuraStepper"],"sources":["src/components/cura-stepper/cura-stepper.scss?tag=cura-stepper&encapsulation=shadow","src/components/cura-stepper/cura-stepper.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n width: 100%;\n}\n\ncura-heading { \n --margin-block: 0 !important;\n}\n\n.container {\n display: flex;\n}\n\n.compact {\n display: flex;\n padding: 0px;\n justify-content: space-between;\n align-items: center;\n\n .heading{\n text-align: right;\n }\n}\n\n.stepper-list {\n gap: 4px;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n padding: 0;\n flex: 1;\n width: 100%;\n justify-content: space-between;\n}\n\n.step{\n display: flex;\n align-items: center;\n flex-direction: row;\n flex: 1;\n gap: 4px;\n\n .wrapper {\n flex: 1;\n position: relative;\n }\n\n .divider{\n background-color: var(--neutral-light);\n height: 2px;\n flex: 1;\n\n transition: all 1s;\n }\n\n .animation {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n width: var(--progress-width);\n }\n\n .done{\n background-color: var(--success-light);\n }\n\n .stop{\n background-color: var(--error-light);\n }\n\n .active{\n background-color: var(--info-light);\n }\n}\n\n.last{\n flex: 0;\n}\n","import { Component, Host, State, h, Element, Prop } from '@stencil/core';\nimport { Step } from './stepper.type';\n\n@Component({\n tag: 'cura-stepper',\n styleUrl: 'cura-stepper.scss',\n shadow: true,\n})\nexport class CuraStepper {\n /**\n * The current active step index\n */\n @Prop({ reflect: true }) activeStepIndex: number;\n\n /**\n * Indicates if a step has encountered an error\n * If `true`, the current step will be marked as 'stop'\n */\n @Prop({ reflect: true }) errorInCurrentStep: boolean = false;\n\n /**\n * Whether to display the title (default: false)\n */\n @Prop({ reflect: true }) displayHeading: boolean = false;\n\n /**\n * Allows you to set the appearance of the component (default: default)\n */\n @Prop({ reflect: true }) variant: 'compact' | 'default' = 'default';\n\n /**\n * List of steps in the stepper.\n */\n @Prop() steps: Step[] | string = [];\n /**\n * Reference to the host element.\n */\n @Element() host: HTMLElement;\n\n @State() styles = {};\n\n /**\n * Array of steps in the stepper.\n *\n * @type {Date[]}\n * @default []\n */\n @State() stepList: Step[] = [];\n\n connectedCallback() {\n this.initializeSteps();\n\n const { fonts, colors, spacing } = window.CuraAPI.theme;\n const weights = fonts.getWeights();\n\n this.styles = this.generateStyles(colors, fonts, spacing, weights);\n }\n\n generateStyles(colors, fonts, spacing, weights) {\n return {\n '--base-spacing': spacing.getSpacing(),\n '--neutral-purewhite': colors.getColor('neutral-purewhite'),\n '--neutral-lighter': colors.getColor('neutral-lighter'),\n '--neutral-base': colors.getColor('neutral-base'),\n '--neutral-light': colors.getColor('neutral-light'),\n '--success-light': colors.getColor('success-light'),\n '--info-light': colors.getColor('info-light'),\n '--error-light': colors.getColor('error-light'),\n '--font-size': fonts.getSize(),\n '--font-color': fonts.getColor(),\n '--font-family': fonts.getFamily(),\n '--font-weight-regular': weights.regular,\n };\n }\n\n initializeSteps() {\n if (typeof this.steps === 'string') {\n this.stepList = JSON.parse(this.steps || '[]');\n } else {\n this.stepList = this.steps;\n }\n }\n\n getStepStatus(step: number): 'done' | 'stop' | 'active' | 'default' {\n if (this.activeStepIndex === step && this.errorInCurrentStep) return 'stop';\n if (this.activeStepIndex === step && this.stepList.length !== step) return 'active';\n if (this.activeStepIndex >= step) return 'done';\n\n return 'default';\n }\n\n getProgressStyles() {\n const progressStyles = {\n default: {\n progressColor: 'var(--info-light)',\n activeStepTextColor: 'info-darker',\n nextStepTextColor: 'info-dark',\n },\n firstStep: {\n progressColor: 'var(--info-light)',\n activeStepTextColor: 'neutral-dark',\n nextStepTextColor: 'neutral-medium',\n },\n completed: {\n progressColor: 'var(--success-light)',\n activeStepTextColor: 'success-darker',\n nextStepTextColor: 'success-dark',\n },\n error: {\n progressColor: 'var(--error-light)',\n activeStepTextColor: 'error-darker',\n nextStepTextColor: 'error-dark',\n },\n };\n\n if (this.errorInCurrentStep) {\n return progressStyles.error;\n }\n\n if (this.activeStepIndex === 0) {\n return progressStyles.firstStep;\n }\n\n if (this.activeStepIndex === this.stepList.length) {\n return progressStyles.completed;\n }\n\n return progressStyles.default;\n }\n\n renderCompactStepper() {\n const title = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex].title : this.stepList[this.activeStepIndex - 1].title;\n const subtitle = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex + 1].title : this.stepList[this.activeStepIndex]?.title;\n const completed = this.activeStepIndex === this.stepList.length;\n const inProgress = !(completed || this.errorInCurrentStep);\n const { progressColor, activeStepTextColor, nextStepTextColor } = this.getProgressStyles();\n\n // Representa a porcentagem de progresso (step atual / quantidade de steps;)\n const progress = (this.activeStepIndex * 100) / this.stepList.length;\n\n return (\n <div class=\"container compact\" style={this.styles}>\n <cura-progress-bar progress={progress} progressColor={progressColor} active={this.activeStepIndex !== 0}>\n {!inProgress ? (\n <cura-icon name={this.errorInCurrentStep ? 'alertCircle' : 'checkCircle'} color={this.errorInCurrentStep ? 'error-dark' : 'success-dark'} size=\"16\"></cura-icon>\n ) : (\n <cura-heading color=\"neutral-dark\" size=\"xsmall\">\n {this.activeStepIndex}/{this.stepList.length}\n </cura-heading>\n )}\n </cura-progress-bar>\n {this.displayHeading && (\n <div class=\"heading\">\n <cura-heading size=\"small\" weight=\"bold\" color={activeStepTextColor}>\n {title}\n </cura-heading>\n {!completed && (\n <cura-heading size=\"xsmall\" weight=\"regular\" color={nextStepTextColor}>\n Próximo: {subtitle}\n </cura-heading>\n )}\n </div>\n )}\n </div>\n );\n }\n\n renderStep(step: Step, stepIndex: number) {\n const stepStatus = this.getStepStatus(stepIndex + 1);\n const lastStep = stepIndex === this.stepList.length - 1;\n const progressWidth = stepStatus !== 'default' ? '100%' : '0';\n\n return (\n <div class={`step ${lastStep ? 'last' : ''}`} key={step.title}>\n <cura-stepper-item heading={step.title} label={step.label} displayHeading={this.displayHeading} status={stepStatus} />\n {stepIndex < this.stepList.length - 1 && (\n <div class=\"wrapper\">\n <div class=\"divider\" />\n <div class={`divider ${stepStatus} animation`} style={{ '--progress-width': progressWidth }} />\n </div>\n )}\n </div>\n );\n }\n renderStepper() {\n return (\n <div class=\"container\" style={this.styles}>\n <div class=\"stepper-list\">{this.stepList.map((step, stepIndex) => this.renderStep(step, stepIndex))}</div>\n </div>\n );\n }\n\n render() {\n return <Host>{this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper()}</Host>;\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"cura-stepper.js","mappings":"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","names":["CuraStepper"],"sources":["src/components/cura-stepper/cura-stepper.scss?tag=cura-stepper&encapsulation=shadow","src/components/cura-stepper/cura-stepper.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n width: 100%;\n}\n\ncura-heading { \n --margin-block: 0 !important;\n}\n\n.container {\n display: flex;\n}\n\n.compact {\n display: flex;\n padding: 0px;\n justify-content: space-between;\n align-items: center;\n\n .heading{\n text-align: right;\n }\n}\n\n.stepper-list {\n gap: 4px;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n padding: 0;\n flex: 1;\n width: 100%;\n justify-content: space-between;\n}\n\n.step{\n display: flex;\n align-items: center;\n flex-direction: row;\n flex: 1;\n gap: 4px;\n\n .wrapper {\n flex: 1;\n position: relative;\n }\n\n .divider{\n background-color: var(--neutral-light);\n height: 2px;\n flex: 1;\n\n transition: all 1s;\n }\n\n .animation {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n width: var(--progress-width);\n }\n\n .done{\n background-color: var(--success-light);\n }\n\n .stop{\n background-color: var(--error-light);\n }\n\n .active{\n background-color: var(--info-light);\n }\n}\n\n.last{\n flex: 0;\n}\n","import { Component, Host, State, h, Element, Prop } from '@stencil/core';\nimport { Step } from './stepper.type';\n\n@Component({\n tag: 'cura-stepper',\n styleUrl: 'cura-stepper.scss',\n shadow: true,\n})\nexport class CuraStepper {\n /**\n * The current active step index\n */\n @Prop({ reflect: true }) activeStepIndex: number;\n\n /**\n * Indicates if a step has encountered an error\n * If `true`, the current step will be marked as 'stop'\n */\n @Prop({ reflect: true }) errorInCurrentStep: boolean = false;\n\n /**\n * Whether to display the title (default: false)\n */\n @Prop({ reflect: true }) displayHeading: boolean = false;\n\n /**\n * Allows you to set the appearance of the component (default: default)\n */\n @Prop({ reflect: true }) variant: 'compact' | 'default' = 'default';\n\n /**\n * List of steps in the stepper.\n */\n @Prop() steps: Step[] | string = [];\n /**\n * Reference to the host element.\n */\n @Element() host: HTMLElement;\n\n @State() styles = {};\n\n /**\n * Array of steps in the stepper.\n *\n * @type {Date[]}\n * @default []\n */\n @State() stepList: Step[] = [];\n\n connectedCallback() {\n this.initializeSteps();\n\n const { fonts, colors, spacing } = window.CuraAPI.theme;\n const weights = fonts.getWeights();\n\n this.styles = this.generateStyles(colors, fonts, spacing, weights);\n }\n\n generateStyles(colors, fonts, spacing, weights) {\n return {\n '--base-spacing': spacing.getSpacing(),\n '--neutral-purewhite': colors.getColor('neutral-purewhite'),\n '--neutral-lighter': colors.getColor('neutral-lighter'),\n '--neutral-base': colors.getColor('neutral-base'),\n '--neutral-light': colors.getColor('neutral-light'),\n '--success-light': colors.getColor('success-light'),\n '--info-light': colors.getColor('info-light'),\n '--error-light': colors.getColor('error-light'),\n '--font-size': fonts.getSize(),\n '--font-color': fonts.getColor(),\n '--font-family': fonts.getFamily(),\n '--font-weight-regular': weights.regular,\n };\n }\n\n initializeSteps() {\n if (typeof this.steps === 'string') {\n this.stepList = JSON.parse(this.steps || '[]');\n } else {\n this.stepList = this.steps;\n }\n }\n\n getStepStatus(step: number): 'done' | 'stop' | 'active' | 'default' {\n if (this.activeStepIndex === step && this.errorInCurrentStep) return 'stop';\n if (this.activeStepIndex === step && this.stepList.length !== step) return 'active';\n if (this.activeStepIndex >= step) return 'done';\n\n return 'default';\n }\n\n getProgressStyles() {\n const progressStyles = {\n default: {\n progressColor: 'var(--info-light)',\n activeStepTextColor: 'info-darker',\n nextStepTextColor: 'info-dark',\n },\n firstStep: {\n progressColor: 'var(--info-light)',\n activeStepTextColor: 'neutral-dark',\n nextStepTextColor: 'neutral-medium',\n },\n completed: {\n progressColor: 'var(--success-light)',\n activeStepTextColor: 'success-darker',\n nextStepTextColor: 'success-dark',\n },\n error: {\n progressColor: 'var(--error-light)',\n activeStepTextColor: 'error-darker',\n nextStepTextColor: 'error-dark',\n },\n };\n\n if (this.errorInCurrentStep) {\n return progressStyles.error;\n }\n\n if (this.activeStepIndex === 0) {\n return progressStyles.firstStep;\n }\n\n if (this.activeStepIndex === this.stepList.length) {\n return progressStyles.completed;\n }\n\n return progressStyles.default;\n }\n\n renderCompactStepper() {\n const title = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex].title : this.stepList[this.activeStepIndex - 1].title;\n const subtitle = this.activeStepIndex === 0 ? this.stepList[this.activeStepIndex + 1].title : this.stepList[this.activeStepIndex]?.title;\n const completed = this.activeStepIndex === this.stepList.length;\n const inProgress = !(completed || this.errorInCurrentStep);\n const { progressColor, activeStepTextColor, nextStepTextColor } = this.getProgressStyles();\n\n // Representa a porcentagem de progresso (step atual / quantidade de steps;)\n const progress = (this.activeStepIndex * 100) / this.stepList.length;\n\n return (\n <div class=\"container compact\" style={this.styles}>\n <cura-progress-bar progress={progress} progressColor={progressColor} active={this.activeStepIndex !== 0}>\n {!inProgress ? (\n <cura-icon name={this.errorInCurrentStep ? 'alertCircle' : 'checkCircle'} color={this.errorInCurrentStep ? 'error-dark' : 'success-dark'} size=\"16\"></cura-icon>\n ) : (\n <cura-heading color=\"neutral-dark\" size=\"xsmall\">\n {this.activeStepIndex}/{this.stepList.length}\n </cura-heading>\n )}\n </cura-progress-bar>\n {this.displayHeading && (\n <div class=\"heading\">\n <cura-heading size=\"small\" weight=\"bold\" color={activeStepTextColor}>\n {title}\n </cura-heading>\n {!completed && (\n <cura-heading size=\"xsmall\" weight=\"regular\" color={nextStepTextColor}>\n Próximo: {subtitle}\n </cura-heading>\n )}\n </div>\n )}\n </div>\n );\n }\n\n renderStep(step: Step, stepIndex: number) {\n const stepStatus = this.getStepStatus(stepIndex + 1);\n const lastStep = stepIndex === this.stepList.length - 1;\n const progressWidth = stepStatus !== 'default' ? '100%' : '0';\n\n return (\n <div class={`step ${lastStep ? 'last' : ''}`} key={step.title}>\n <cura-stepper-item heading={step.title} label={step.label} displayHeading={this.displayHeading} status={stepStatus}></cura-stepper-item>\n {stepIndex < this.stepList.length - 1 && (\n <div class=\"wrapper\">\n <div class=\"divider\" />\n <div class={`divider ${stepStatus} animation`} style={{ '--progress-width': progressWidth }} />\n </div>\n )}\n </div>\n );\n }\n renderStepper() {\n return (\n <div class=\"container\" style={this.styles}>\n <div class=\"stepper-list\">{this.stepList.map((step, stepIndex) => this.renderStep(step, stepIndex))}</div>\n </div>\n );\n }\n\n render() {\n return <Host>{this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper()}</Host>;\n }\n}\n"],"version":3}
|
package/dist/cura/cura.esm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as o}from"./p-fd5ed6b0.js";export{s as setNonce}from"./p-fd5ed6b0.js";import{g as l}from"./p-82b99090.js";var a=()=>{const o=import.meta.url;const l={};if(o!==""){l.resourcesUrl=new URL(".",o).href}return e(l)};a().then((async e=>{await l();return o(JSON.parse('[["p-46eaee31",[[65,"cura-button",{"type":[513],"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"iconOnly":[516,"icon-only"],"href":[513],"target":[513],"color":[1],"background":[513],"fontColor":[513,"font-color"],"textAlign":[513,"text-align"],"justify":[516],"styles":[32],"hovered":[32]},null,{"background":["setColors"],"color":["setColors"]}],[1,"cura-accordion-item",{"label":[513],"iconSize":[514,"icon-size"],"labelIcon":[513,"label-icon"],"openIcon":[513,"open-icon"],"closeIcon":[513,"close-icon"],"iconColor":[513,"icon-color"],"colorMode":[1,"color-mode"],"level":[514],"opened":[1540],"styles":[32]}],[1,"cura-modal",{"open":[1540],"background":[1],"top":[2],"bottom":[2],"left":[2],"right":[2],"mobileCloseLabel":[513,"mobile-close-label"],"zindex":[513],"styles":[32]},null,{"background":["setColors"],"top":["setTop"],"bottom":["setBottom"],"left":["setLeft"],"right":["setRight"]}],[1,"cura-accordion",{"color":[513],"colorMode":[513,"color-mode"],"iconSize":[514,"icon-size"],"labelIcon":[513,"label-icon"],"openIcon":[513,"open-icon"],"closeIcon":[513,"close-icon"],"iconColor":[513,"icon-color"],"behavior":[513],"level":[514],"styles":[32]},null,{"color":["handleChangeColor"]}],[1,"cura-page-template",{"contentwidth":[513]}],[65,"cura-input-text",{"mode":[1537],"status":[1537],"size":[1537],"type":[513],"inputMode":[513,"input-mode"],"label":[513],"name":[513],"placeholder":[513],"value":[1032],"iconName":[1537,"icon-name"],"helperText":[1537,"helper-text"],"disabled":[516],"required":[516],"maskPreset":[8,"mask-preset"],"enableSelectionMode":[1540,"enable-selection-mode"],"maskRegex":[1537,"mask-regex"],"maskAdvanced":[1544,"mask-advanced"],"maxlength":[1538],"readOnly":[516,"read-only"],"isLoading":[1540,"is-loading"],"clearIcon":[1540,"clear-icon"],"hideErrorIcon":[4,"hide-error-icon"],"autocomplete":[513],"isHovered":[32],"isFocused":[32],"styles":[32]},null,{"styles":["connectedCallback"],"size":["getClasses"],"status":["renderIcon"],"mode":["renderIcon"],"maskPreset":["initializeMask"],"maskRegex":["initializeMask"],"maskAdvanced":["initializeMask"]}],[65,"cura-select",{"label":[513],"placeholder":[513],"value":[1537],"mode":[513],"size":[513],"status":[1537],"disabled":[516],"required":[516],"searchBehavior":[516,"search-behavior"],"isHovered":[32],"isFocused":[32],"isOpen":[32],"options":[32],"activeIndex":[32],"textInput":[32]},null,{"activeIndex":["updateOptionHighlights"],"textInput":["filterOptions"],"value":["handleValueChange"]}],[1,"cura-select-option",{"value":[513],"selected":[516],"active":[516],"size":[1],"styles":[32]},null,{"size":["getSize"]}],[1,"cura-heading",{"level":[514],"size":[513],"weight":[513],"spotColor":[513,"spot-color"],"color":[1],"marginBlock":[513,"margin-block"],"lineHeight":[513,"line-height"],"styles":[32]},null,{"color":["handleChangeColor"],"spotColor":["handleChangeColor"]}],[1,"cura-loader-circle",{"size":[513],"color":[513]}],[1,"cura-paragraph",{"size":[513],"spotColor":[513,"spot-color"],"color":[1],"marginBlock":[513,"margin-block"],"lineHeight":[513,"line-height"],"styles":[32]},null,{"color":["handleChangeColor"],"spotColor":["handleChangeColor"]}],[1,"cura-icon",{"name":[513],"color":[1],"size":[8],"iconset":[513],"disabled":[4]},null,{"size":["sizeHandler"],"color":["colorHandler"],"disabled":["colorHandler"]}],[1,"cura-label",{"size":[513],"weight":[513],"spotColor":[513,"spot-color"],"color":[1],"marginBlock":[513,"margin-block"],"lineHeight":[513,"line-height"],"styles":[32]},null,{"color":["handleChangeColor"],"spotColor":["handleChangeColor"]}]]],["p-4aefe237",[[65,"cura-input-date",{"label":[513],"status":[1537],"size":[513],"name":[513],"helperText":[513,"helper-text"],"enableRangeDates":[516,"enable-range-dates"],"disableFutureDates":[516,"disable-future-dates"],"disablePassDates":[516,"disable-pass-dates"],"iconName":[513,"icon-name"],"placeholder":[513],"styles":[32],"isCalendarVisible":[32],"dates":[32],"value":[32],"dateSettings":[32]},[[8,"click","handleClick"]],{"enableRangeDates":["updateDateSettings"]}]]],["p-cfbe2bce",[[1,"cura-stepper",{"activeStepIndex":[514,"active-step-index"],"errorInCurrentStep":[516,"error-in-current-step"],"displayHeading":[516,"display-heading"],"variant":[513],"steps":[1],"styles":[32],"stepList":[32]}]]],["p-8622c492",[[1,"cura-tooltip",{"elementId":[1,"element-id"],"interactive":[4],"delay":[2],"maxWidth":[1,"max-width"],"position":[513],"label":[513],"closeButton":[516,"close-button"],"isMobile":[32]},[[9,"resize","onWindowResize"],[9,"scroll","onWindowScroll"]]]]],["p-23fa2246",[[1,"cura-dropdown-search",{"size":[1537],"status":[513],"disabled":[516],"name":[513],"required":[1540],"selected":[1540],"value":[1537],"placeholder":[1537],"label":[1537],"iconName":[513,"icon-name"],"dropdownMaxHeight":[513,"dropdown-max-height"],"overlayVisible":[32],"isDropdownOpen":[32],"styles":[32],"isMobile":[32],"mode":[32],"inputTextRef":[32],"isOnBlurInput":[32],"hoveredIndex":[32],"options":[32],"originalOverflow":[32],"screenDefaultHeight":[32]},null,{"value":["onValueChange"]}]]],["p-3c0931d3",[[1,"cura-toast",{"type":[1],"position":[1],"icon":[513],"label":[513],"closeButton":[516,"close-button"],"loader":[516],"autoCloseDelay":[514,"auto-close-delay"],"styles":[32],"progress":[32]},null,{"type":["handleChangeType"],"position":["handleChangeType"]}]]],["p-b3e93e74",[[1,"cura-alert",{"type":[1],"floating":[516],"label":[513],"closeable":[516],"icon":[513],"styles":[32]},null,{"type":["setColors"]}]]],["p-0a133399",[[65,"cura-button-outline",{"type":[513],"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"iconOnly":[516,"icon-only"],"href":[513],"target":[513],"color":[1],"background":[1],"fontColor":[1,"font-color"],"textAlign":[513,"text-align"],"justify":[516],"styles":[32],"hovered":[32]},null,{"background":["setColors"],"color":["setColors","getSymbolColor"],"fontColor":["getSymbolColor"]}]]],["p-545e8e55",[[1,"cura-button-select",{"selected":[1540],"iconName":[1537,"icon-name"],"size":[513],"counter":[1538],"disabled":[516],"background":[1],"color":[1],"iconPosition":[513,"icon-position"],"hovered":[32],"styles":[32]},null,{"background":["setColors"],"color":["setColors"]}]]],["p-f96b0923",[[65,"cura-checkbox",{"checked":[1540],"indeterminate":[1540],"status":[1537],"disabled":[516],"required":[516],"label":[513],"ontabindex":[514],"position":[513],"value":[513],"name":[513],"size":[513],"background":[1],"iconColor":[1,"icon-color"],"color":[1],"styles":[32]},null,{"size":["sizeHandler"],"color":["setColors"],"background":["setColors","assignColor"],"iconColor":["assignColor"]}]]],["p-2af6216a",[[1,"cura-icons-view",{"selected":[32]}]]],["p-d13e3295",[[65,"cura-radio",{"checked":[1540],"status":[1537],"disabled":[516],"required":[516],"label":[513],"ontabindex":[514],"position":[513],"value":[513],"name":[513],"background":[1],"size":[1],"color":[1],"styles":[32]},null,{"size":["sizeHandler"],"color":["setColors"],"background":["setColors","assignColor"]}]]],["p-935eeb7b",[[1,"cura-badge-distance",{"distance":[2],"label":[513],"styles":[32],"displayDistance":[32]},null,{"distance":["formatDistance"]}]]],["p-235ac0b4",[[1,"cura-dropdown-search-option",{"value":[513],"selected":[1540],"selectable":[516],"hovered":[1540],"styles":[32]},null,{"selected":["updateIconColor"]}]]],["p-6624108e",[[1,"cura-dropdown-search-option-title"]]],["p-ee8db3dc",[[65,"cura-switch",{"checked":[1540],"disabled":[516],"label":[513],"ontabindex":[514],"position":[513],"size":[513],"background":[1],"color":[1],"styles":[32]},null,{"size":["sizeHandler"],"color":["setColors"],"background":["setColors"]}]]],["p-164ddb46",[[1,"cura-avatar",{"size":[1],"backgroundColor":[513,"background-color"],"borderColor":[513,"border-color"],"borderRadius":[513,"border-radius"],"border":[516],"type":[513],"imageSrc":[1537,"image-src"],"imageSrcDefault":[513,"image-src-default"],"floating":[516],"styles":[32]},null,{"size":["sizeHandler"]}]]],["p-6b627841",[[1,"cura-badge-dot",{"color":[1],"disabled":[516],"type":[513],"styles":[32]}]]],["p-bce10f9b",[[1,"cura-card",{"hasPadding":[1028,"has-padding"],"hasShadow":[1028,"has-shadow"],"type":[1025],"colorMode":[1025,"color-mode"],"href":[1537],"target":[513],"styles":[32]}]]],["p-70adcf7b",[[1,"cura-display",{"level":[514],"size":[513],"spotColor":[1,"spot-color"],"color":[1],"marginBlock":[513,"margin-block"],"lineHeight":[513,"line-height"],"styles":[32]},null,{"color":["handleChangeColor"],"spotColor":["handleChangeColor"]}]]],["p-ec7876d3",[[1,"cura-calendar",{"period":[513],"width":[513],"minWidth":[513,"min-width"],"maxWidth":[513,"max-width"],"mode":[513],"dateFormat":[1537,"date-format"],"locale":[513],"type":[513],"disable":[16],"enable":[16],"defaultDate":[1537,"default-date"],"customDates":[16],"limitRange":[514,"limit-range"],"disablePassDates":[1540,"disable-pass-dates"],"disableFutureDates":[1540,"disable-future-dates"],"collapsed":[1540],"floating":[1540],"embedded":[1540],"currentDate":[32],"selectedDates":[32],"rangeStart":[32],"defaultDates":[32],"selectMonth":[32],"selectYear":[32],"styles":[32]},null,{"customDates":["watchDefaultDatesArray"],"defaultDate":["handleDefaultDateChange"]}]]],["p-529332d3",[[1,"cura-badge-counter",{"number":[514],"color":[1],"disabled":[4],"type":[1],"styles":[32]},null,{"disabled":["handleColorChange"],"color":["handleColorChange"],"type":["handleColorChange"]}]]],["p-3030774e",[[1,"cura-loader-bar",{"color":[1],"progress":[2],"styles":[32]},null,{"color":["handleChangeColor"],"progress":["handleProgress"]}]]],["p-7ba80d78",[[1,"cura-badge-pill",{"type":[513],"color":[1],"iconName":[513,"icon-name"],"iconset":[513],"disabled":[516],"iconOnly":[516,"icon-only"],"borderRadius":[513,"border-radius"],"styles":[32]},null,{"color":["handleColorChange"]}]]],["p-557b90c4",[[1,"cura-stepper-item",{"displayHeading":[516,"display-heading"],"heading":[513],"label":[513],"status":[513],"styles":[32]}],[1,"cura-progress-bar",{"progressColor":[513,"progress-color"],"progress":[514],"size":[514],"strokeWidth":[514,"stroke-width"],"active":[516]}]]],["p-04006a3e",[[65,"cura-button-transparent",{"type":[513],"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"iconOnly":[516,"icon-only"],"href":[513],"target":[513],"color":[513],"fontColor":[513,"font-color"],"textAlign":[513,"text-align"],"justify":[516],"hovered":[32],"styles":[32]},null,{"fontColor":["getSymbolColor"],"color":["getSymbolColor"]}]]]]'),e)}));
|
|
1
|
+
import{p as e,b as o}from"./p-fd5ed6b0.js";export{s as setNonce}from"./p-fd5ed6b0.js";import{g as l}from"./p-82b99090.js";var a=()=>{const o=import.meta.url;const l={};if(o!==""){l.resourcesUrl=new URL(".",o).href}return e(l)};a().then((async e=>{await l();return o(JSON.parse('[["p-ced52230",[[65,"cura-button",{"type":[513],"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"iconOnly":[516,"icon-only"],"href":[513],"target":[513],"color":[1],"background":[513],"fontColor":[513,"font-color"],"textAlign":[513,"text-align"],"justify":[516],"styles":[32],"hovered":[32]},null,{"background":["setColors"],"color":["setColors"]}],[1,"cura-accordion-item",{"label":[513],"iconSize":[514,"icon-size"],"labelIcon":[513,"label-icon"],"openIcon":[513,"open-icon"],"closeIcon":[513,"close-icon"],"iconColor":[513,"icon-color"],"colorMode":[1,"color-mode"],"level":[514],"opened":[1540],"styles":[32]}],[1,"cura-accordion",{"color":[513],"colorMode":[513,"color-mode"],"iconSize":[514,"icon-size"],"labelIcon":[513,"label-icon"],"openIcon":[513,"open-icon"],"closeIcon":[513,"close-icon"],"iconColor":[513,"icon-color"],"behavior":[513],"level":[514],"styles":[32]},null,{"color":["handleChangeColor"]}],[1,"cura-page-template",{"contentwidth":[513]}],[65,"cura-input-text",{"mode":[1537],"status":[1537],"size":[1537],"type":[513],"inputMode":[513,"input-mode"],"label":[513],"name":[513],"placeholder":[513],"value":[1032],"iconName":[1537,"icon-name"],"helperText":[1537,"helper-text"],"disabled":[516],"required":[516],"maskPreset":[8,"mask-preset"],"enableSelectionMode":[1540,"enable-selection-mode"],"maskRegex":[1537,"mask-regex"],"maskAdvanced":[1544,"mask-advanced"],"maxlength":[1538],"readOnly":[516,"read-only"],"isLoading":[1540,"is-loading"],"clearIcon":[1540,"clear-icon"],"hideErrorIcon":[4,"hide-error-icon"],"autocomplete":[513],"isHovered":[32],"isFocused":[32],"styles":[32]},null,{"styles":["connectedCallback"],"size":["getClasses"],"status":["renderIcon"],"mode":["renderIcon"],"maskPreset":["initializeMask"],"maskRegex":["initializeMask"],"maskAdvanced":["initializeMask"]}],[65,"cura-select",{"label":[513],"placeholder":[513],"value":[1537],"mode":[513],"size":[513],"iconName":[1,"icon-name"],"status":[1537],"disabled":[516],"required":[516],"searchBehavior":[516,"search-behavior"],"caseSensitive":[516,"case-sensitive"],"isHovered":[32],"isFocused":[32],"isOpen":[32],"options":[32],"activeIndex":[32],"textInput":[32]},null,{"activeIndex":["updateOptionHighlights"],"textInput":["filterOptions"],"value":["handleValueChange"]}],[1,"cura-select-option",{"value":[513],"selected":[516],"active":[516],"size":[1],"styles":[32]},null,{"size":["getSize"]}],[1,"cura-heading",{"level":[514],"size":[513],"weight":[513],"spotColor":[513,"spot-color"],"color":[1],"marginBlock":[513,"margin-block"],"lineHeight":[513,"line-height"],"styles":[32]},null,{"color":["handleChangeColor"],"spotColor":["handleChangeColor"]}],[1,"cura-loader-circle",{"size":[513],"color":[513]}],[1,"cura-paragraph",{"size":[513],"spotColor":[513,"spot-color"],"color":[1],"marginBlock":[513,"margin-block"],"lineHeight":[513,"line-height"],"styles":[32]},null,{"color":["handleChangeColor"],"spotColor":["handleChangeColor"]}],[1,"cura-icon",{"name":[513],"color":[1],"size":[8],"iconset":[513],"disabled":[4]},null,{"size":["sizeHandler"],"color":["colorHandler"],"disabled":["colorHandler"]}],[1,"cura-label",{"size":[513],"weight":[513],"spotColor":[513,"spot-color"],"color":[1],"marginBlock":[513,"margin-block"],"lineHeight":[513,"line-height"],"styles":[32]},null,{"color":["handleChangeColor"],"spotColor":["handleChangeColor"]}]]],["p-4aefe237",[[65,"cura-input-date",{"label":[513],"status":[1537],"size":[513],"name":[513],"helperText":[513,"helper-text"],"enableRangeDates":[516,"enable-range-dates"],"disableFutureDates":[516,"disable-future-dates"],"disablePassDates":[516,"disable-pass-dates"],"iconName":[513,"icon-name"],"placeholder":[513],"styles":[32],"isCalendarVisible":[32],"dates":[32],"value":[32],"dateSettings":[32]},[[8,"click","handleClick"]],{"enableRangeDates":["updateDateSettings"]}]]],["p-bd99ef4c",[[1,"cura-stepper",{"activeStepIndex":[514,"active-step-index"],"errorInCurrentStep":[516,"error-in-current-step"],"displayHeading":[516,"display-heading"],"variant":[513],"steps":[1],"styles":[32],"stepList":[32]}]]],["p-8622c492",[[1,"cura-tooltip",{"elementId":[1,"element-id"],"interactive":[4],"delay":[2],"maxWidth":[1,"max-width"],"position":[513],"label":[513],"closeButton":[516,"close-button"],"isMobile":[32]},[[9,"resize","onWindowResize"],[9,"scroll","onWindowScroll"]]]]],["p-9d7c6e96",[[1,"cura-dropdown-search",{"size":[1537],"status":[513],"disabled":[516],"name":[513],"required":[1540],"selected":[1540],"value":[1537],"placeholder":[1537],"label":[1537],"iconName":[513,"icon-name"],"dropdownMaxHeight":[513,"dropdown-max-height"],"overlayVisible":[32],"isDropdownOpen":[32],"styles":[32],"isMobile":[32],"mode":[32],"inputTextRef":[32],"isOnBlurInput":[32],"hoveredIndex":[32],"options":[32],"originalOverflow":[32],"screenDefaultHeight":[32]},null,{"value":["onValueChange"]}]]],["p-3c0931d3",[[1,"cura-toast",{"type":[1],"position":[1],"icon":[513],"label":[513],"closeButton":[516,"close-button"],"loader":[516],"autoCloseDelay":[514,"auto-close-delay"],"styles":[32],"progress":[32]},null,{"type":["handleChangeType"],"position":["handleChangeType"]}]]],["p-b3e93e74",[[1,"cura-alert",{"type":[1],"floating":[516],"label":[513],"closeable":[516],"icon":[513],"styles":[32]},null,{"type":["setColors"]}]]],["p-0a133399",[[65,"cura-button-outline",{"type":[513],"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"iconOnly":[516,"icon-only"],"href":[513],"target":[513],"color":[1],"background":[1],"fontColor":[1,"font-color"],"textAlign":[513,"text-align"],"justify":[516],"styles":[32],"hovered":[32]},null,{"background":["setColors"],"color":["setColors","getSymbolColor"],"fontColor":["getSymbolColor"]}]]],["p-545e8e55",[[1,"cura-button-select",{"selected":[1540],"iconName":[1537,"icon-name"],"size":[513],"counter":[1538],"disabled":[516],"background":[1],"color":[1],"iconPosition":[513,"icon-position"],"hovered":[32],"styles":[32]},null,{"background":["setColors"],"color":["setColors"]}]]],["p-f96b0923",[[65,"cura-checkbox",{"checked":[1540],"indeterminate":[1540],"status":[1537],"disabled":[516],"required":[516],"label":[513],"ontabindex":[514],"position":[513],"value":[513],"name":[513],"size":[513],"background":[1],"iconColor":[1,"icon-color"],"color":[1],"styles":[32]},null,{"size":["sizeHandler"],"color":["setColors"],"background":["setColors","assignColor"],"iconColor":["assignColor"]}]]],["p-7f25f4dc",[[1,"cura-icons-view",{"selected":[32]}]]],["p-a4a1f6c6",[[1,"cura-modal",{"open":[1540],"background":[1],"top":[2],"bottom":[2],"left":[2],"right":[2],"mobileCloseLabel":[513,"mobile-close-label"],"zindex":[513],"styles":[32]},null,{"background":["setColors"],"top":["setTop"],"bottom":["setBottom"],"left":["setLeft"],"right":["setRight"]}]]],["p-d13e3295",[[65,"cura-radio",{"checked":[1540],"status":[1537],"disabled":[516],"required":[516],"label":[513],"ontabindex":[514],"position":[513],"value":[513],"name":[513],"background":[1],"size":[1],"color":[1],"styles":[32]},null,{"size":["sizeHandler"],"color":["setColors"],"background":["setColors","assignColor"]}]]],["p-935eeb7b",[[1,"cura-badge-distance",{"distance":[2],"label":[513],"styles":[32],"displayDistance":[32]},null,{"distance":["formatDistance"]}]]],["p-235ac0b4",[[1,"cura-dropdown-search-option",{"value":[513],"selected":[1540],"selectable":[516],"hovered":[1540],"styles":[32]},null,{"selected":["updateIconColor"]}]]],["p-6624108e",[[1,"cura-dropdown-search-option-title"]]],["p-ee8db3dc",[[65,"cura-switch",{"checked":[1540],"disabled":[516],"label":[513],"ontabindex":[514],"position":[513],"size":[513],"background":[1],"color":[1],"styles":[32]},null,{"size":["sizeHandler"],"color":["setColors"],"background":["setColors"]}]]],["p-164ddb46",[[1,"cura-avatar",{"size":[1],"backgroundColor":[513,"background-color"],"borderColor":[513,"border-color"],"borderRadius":[513,"border-radius"],"border":[516],"type":[513],"imageSrc":[1537,"image-src"],"imageSrcDefault":[513,"image-src-default"],"floating":[516],"styles":[32]},null,{"size":["sizeHandler"]}]]],["p-6b627841",[[1,"cura-badge-dot",{"color":[1],"disabled":[516],"type":[513],"styles":[32]}]]],["p-bce10f9b",[[1,"cura-card",{"hasPadding":[1028,"has-padding"],"hasShadow":[1028,"has-shadow"],"type":[1025],"colorMode":[1025,"color-mode"],"href":[1537],"target":[513],"styles":[32]}]]],["p-70adcf7b",[[1,"cura-display",{"level":[514],"size":[513],"spotColor":[1,"spot-color"],"color":[1],"marginBlock":[513,"margin-block"],"lineHeight":[513,"line-height"],"styles":[32]},null,{"color":["handleChangeColor"],"spotColor":["handleChangeColor"]}]]],["p-ec7876d3",[[1,"cura-calendar",{"period":[513],"width":[513],"minWidth":[513,"min-width"],"maxWidth":[513,"max-width"],"mode":[513],"dateFormat":[1537,"date-format"],"locale":[513],"type":[513],"disable":[16],"enable":[16],"defaultDate":[1537,"default-date"],"customDates":[16],"limitRange":[514,"limit-range"],"disablePassDates":[1540,"disable-pass-dates"],"disableFutureDates":[1540,"disable-future-dates"],"collapsed":[1540],"floating":[1540],"embedded":[1540],"currentDate":[32],"selectedDates":[32],"rangeStart":[32],"defaultDates":[32],"selectMonth":[32],"selectYear":[32],"styles":[32]},null,{"customDates":["watchDefaultDatesArray"],"defaultDate":["handleDefaultDateChange"]}]]],["p-529332d3",[[1,"cura-badge-counter",{"number":[514],"color":[1],"disabled":[4],"type":[1],"styles":[32]},null,{"disabled":["handleColorChange"],"color":["handleColorChange"],"type":["handleColorChange"]}]]],["p-3030774e",[[1,"cura-loader-bar",{"color":[1],"progress":[2],"styles":[32]},null,{"color":["handleChangeColor"],"progress":["handleProgress"]}]]],["p-629c34fe",[[1,"cura-badge-pill",{"type":[513],"color":[1],"iconName":[513,"icon-name"],"iconset":[513],"disabled":[516],"iconOnly":[516,"icon-only"],"borderRadius":[513,"border-radius"],"styles":[32]},null,{"color":["watchColorChange"]}]]],["p-557b90c4",[[1,"cura-stepper-item",{"displayHeading":[516,"display-heading"],"heading":[513],"label":[513],"status":[513],"styles":[32]}],[1,"cura-progress-bar",{"progressColor":[513,"progress-color"],"progress":[514],"size":[514],"strokeWidth":[514,"stroke-width"],"active":[516]}]]],["p-04006a3e",[[65,"cura-button-transparent",{"type":[513],"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"iconOnly":[516,"icon-only"],"href":[513],"target":[513],"color":[513],"fontColor":[513,"font-color"],"textAlign":[513,"text-align"],"justify":[516],"hovered":[32],"styles":[32]},null,{"fontColor":["getSymbolColor"],"color":["getSymbolColor"]}]]]]'),e)}));
|
|
2
2
|
//# sourceMappingURL=cura.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","JSON","parse"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.22.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"0HAOA,IAAIA,EAAe,KAUjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACrBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACjD,CACE,OAAOC,EAAeJ,EAAK,EClB7BH,IAAeQ,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAcC,KAAAC,MAAA,
|
|
1
|
+
{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","JSON","parse"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.22.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"0HAOA,IAAIA,EAAe,KAUjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACrBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACjD,CACE,OAAOC,EAAeJ,EAAK,EClB7BH,IAAeQ,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAcC,KAAAC,MAAA,gjVAAuCJ,EAAA","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,h as t,H as a,g as r}from"./p-fd5ed6b0.js";const o='.badge-container{display:flex;align-items:center;justify-content:center;gap:calc(var(--base-spacing) * 1px);padding:calc(var(--base-spacing) * 1px);border-radius:var(--border-radius);font-family:var(--font-family);font-size:var(--font-size);position:relative;box-sizing:border-box;width:fit-content;height:calc(var(--base-spacing) * 5px);min-width:calc(var(--base-spacing) * 5px);background-color:var(--color-background)}.badge-container::before{content:"";width:100%;height:100%;position:absolute;left:0px;top:0px;box-sizing:border-box;border:1px solid transparent;border-radius:var(--border-radius);pointer-events:none}.badge-container.icon-only cura-label{display:none !important}.badge-container.disabled{background-color:var(--color-background-disabled)}.badge-container.outline{background-color:transparent}.badge-container.outline::before{border:1px solid var(--color-base)}.badge-container.outline.disabled::before{border:1px solid var(--color-outline-disabled)}.badge-container.transparent{background-color:transparent}.badge-container.transparent::before{border:1px solid transparent}.badge-container.transparent.disabled{background-color:transparent}.badge-container cura-icon{display:flex}';const i=o;const s=class{constructor(t){e(this,t);this.theme=window.CuraAPI.theme;this.type="solid";this.color="primary";this.iconName=undefined;this.iconset="default";this.disabled=false;this.iconOnly=false;this.borderRadius="2px";this.styles={}}watchColorChange(){this.setColors()}connectedCallback(){this.setBaseStyles();this.setColors()}setBaseStyles(){this.styles=Object.assign(Object.assign({},this.styles),{"--base-spacing":this.theme.spacing.getSpacing(),"--font-family":this.theme.fonts.getFamily(),"--font-size":this.theme.fonts.getSize()})}setColors(){const e=[{name:"--color-background",theme:`${this.color}-lighter`},{name:"--color-base",theme:`${this.color}-dark`},{name:"--color-background-disabled",theme:"neutral-pale"},{name:"--color-outline-disabled",theme:"neutral-medium"}];const t=Object.assign({},this.styles);e.forEach((e=>{t[e.name]=this.theme.colors.getColor(e.theme)}));this.styles=t}hostCSSProperties(){return{"--border-radius":this.borderRadius||"2px"}}getClasses(){const e={};e["badge-container"]=true;e[`icon-only`]=this.iconOnly;e["disabled"]=this.disabled;e[`${this.type}`]=true;return e}getSymbolColor(){return this.disabled?"neutral-medium":`${this.color}-dark`}getIcon(){if(!this.iconName)return"";return t("cura-icon",{name:this.iconName,iconset:this.iconset,size:"micro",color:this.getSymbolColor()})}render(){const e=this.getSymbolColor();return t(a,{key:"ac5aafc485ee2a88514a34fc5025f54c01901a46",style:this.hostCSSProperties()},t("div",{key:"7f32b824ab54471c0517980e6e4ed2b1b21fd435",class:this.getClasses(),style:this.styles},this.getIcon(),t("cura-label",{key:"c2ef8d70153a5b8498cf2cb3ce6b60f80aec1d51",size:"xsmall","line-height":"117%",color:e},t("slot",{key:"758b0c994aab961f4c76b7030028268aa8c2364f"}))))}get host(){return r(this)}static get watchers(){return{color:["watchColorChange"]}}};s.style=i;export{s as cura_badge_pill};
|
|
2
|
+
//# sourceMappingURL=p-629c34fe.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["curaBadgePillCss","CuraBadgePillStyle0","CuraBadgePill","this","theme","window","CuraAPI","watchColorChange","setColors","connectedCallback","setBaseStyles","styles","Object","assign","spacing","getSpacing","fonts","getFamily","getSize","colors","name","color","newStyles","forEach","getColor","hostCSSProperties","borderRadius","getClasses","classes","iconOnly","disabled","type","getSymbolColor","getIcon","iconName","h","iconset","size","render","symbolColor","Host","key","style","class"],"sources":["src/components/badges/cura-badge-pill/cura-badge-pill.scss?tag=cura-badge-pill&encapsulation=shadow","src/components/badges/cura-badge-pill/cura-badge-pill.tsx"],"sourcesContent":["@import \"../../../scss/mixins/spacing.scss\";\n\n.badge-container {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: #{$spacing-tiny};\n padding: #{$spacing-tiny};\n border-radius: var(--border-radius);\n font-family: var(--font-family);\n font-size: var(--font-size);\n position: relative;\n box-sizing: border-box;\n width: fit-content;\n height: #{$spacing-xs};\n min-width: #{$spacing-xs};\n\n background-color: var(--color-background);\n\n &::before {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0px;\n top: 0px;\n box-sizing: border-box;\n border: 1px solid transparent;\n border-radius: var(--border-radius);\n pointer-events: none;\n }\n\n &.icon-only {\n cura-label {\n display: none !important;\n }\n }\n\n &.disabled {\n background-color: var(--color-background-disabled);\n }\n\n &.outline {\n background-color: transparent;\n\n &::before {\n border: 1px solid var(--color-base);\n }\n\n &.disabled::before {\n border: 1px solid var(--color-outline-disabled);\n }\n }\n\n &.transparent {\n background-color: transparent;\n\n &::before {\n border: 1px solid transparent;\n }\n\n &.disabled {\n background-color: transparent;\n }\n }\n\n cura-icon {\n display: flex;\n }\n}\n","import { Component, Host, Prop, State, h, Watch, Element } from '@stencil/core';\n\n@Component({\n tag: 'cura-badge-pill',\n styleUrl: 'cura-badge-pill.scss',\n shadow: true,\n})\nexport class CuraBadgePill {\n @Element() host: HTMLElement;\n\n /**\n * Badge type: solid | outline | transparent\n */\n @Prop({ reflect: true }) type: 'solid' | 'outline' | 'transparent' = 'solid';\n\n /**\n * Color base from color scheme. Default: primary\n */\n @Prop() color: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error' = 'primary';\n\n /**\n * Name of the icon to be used from iconset\n */\n @Prop({ reflect: true }) iconName: string;\n\n /**\n * Custom iconset if needed\n */\n @Prop({ reflect: true }) iconset = 'default';\n\n /**\n * Disabled state. Boolean\n */\n @Prop({ reflect: true }) disabled = false;\n\n /**\n * Set badge to icon only. Boolean\n */\n @Prop({ reflect: true }) iconOnly = false;\n\n /**\n * Set border-radius.\n */\n @Prop({ reflect: true }) borderRadius: string = '2px';\n\n @State() styles = {};\n\n theme = window.CuraAPI.theme;\n\n @Watch('color')\n watchColorChange() {\n this.setColors();\n }\n\n connectedCallback() {\n this.setBaseStyles();\n this.setColors();\n }\n\n private setBaseStyles() {\n this.styles = {\n ...this.styles,\n '--base-spacing': this.theme.spacing.getSpacing(),\n '--font-family': this.theme.fonts.getFamily(),\n '--font-size': this.theme.fonts.getSize(),\n };\n }\n\n private setColors() {\n const colors = [\n { name: '--color-background', theme: `${this.color}-lighter` },\n { name: '--color-base', theme: `${this.color}-dark` },\n { name: '--color-background-disabled', theme: 'neutral-pale' },\n { name: '--color-outline-disabled', theme: 'neutral-medium' },\n ];\n\n const newStyles = { ...this.styles };\n colors.forEach(color => {\n newStyles[color.name] = this.theme.colors.getColor(color.theme);\n });\n\n this.styles = newStyles;\n }\n\n hostCSSProperties() {\n return {\n '--border-radius': this.borderRadius || '2px',\n };\n }\n\n getClasses() {\n const classes = {};\n classes['badge-container'] = true;\n classes[`icon-only`] = this.iconOnly;\n classes['disabled'] = this.disabled;\n classes[`${this.type}`] = true;\n return classes;\n }\n\n getSymbolColor() {\n return this.disabled ? 'neutral-medium' : `${this.color}-dark`;\n }\n\n getIcon() {\n if (!this.iconName) return '';\n return <cura-icon name={this.iconName} iconset={this.iconset} size={'micro'} color={this.getSymbolColor()} />;\n }\n\n render() {\n const symbolColor = this.getSymbolColor();\n return (\n <Host style={this.hostCSSProperties()}>\n <div class={this.getClasses()} style={this.styles}>\n {this.getIcon()}\n <cura-label size=\"xsmall\" line-height=\"117%\" color={symbolColor}>\n <slot></slot>\n </cura-label>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAmB,orCACzB,MAAAC,EAAeD,E,MCMFE,EAAa,M,yBAwCxBC,KAAAC,MAAQC,OAAOC,QAAQF,M,UAlC8C,Q,WAKsC,U,qCAUxE,U,cAKC,M,cAKA,M,kBAKY,M,YAE9B,E,CAKlB,gBAAAG,GACEJ,KAAKK,W,CAGP,iBAAAC,GACEN,KAAKO,gBACLP,KAAKK,W,CAGC,aAAAE,GACNP,KAAKQ,OAAMC,OAAAC,OAAAD,OAAAC,OAAA,GACNV,KAAKQ,QAAM,CACd,iBAAkBR,KAAKC,MAAMU,QAAQC,aACrC,gBAAiBZ,KAAKC,MAAMY,MAAMC,YAClC,cAAed,KAAKC,MAAMY,MAAME,W,CAI5B,SAAAV,GACN,MAAMW,EAAS,CACb,CAAEC,KAAM,qBAAsBhB,MAAO,GAAGD,KAAKkB,iBAC7C,CAAED,KAAM,eAAgBhB,MAAO,GAAGD,KAAKkB,cACvC,CAAED,KAAM,8BAA+BhB,MAAO,gBAC9C,CAAEgB,KAAM,2BAA4BhB,MAAO,mBAG7C,MAAMkB,EAASV,OAAAC,OAAA,GAAQV,KAAKQ,QAC5BQ,EAAOI,SAAQF,IACbC,EAAUD,EAAMD,MAAQjB,KAAKC,MAAMe,OAAOK,SAASH,EAAMjB,MAAM,IAGjED,KAAKQ,OAASW,C,CAGhB,iBAAAG,GACE,MAAO,CACL,kBAAmBtB,KAAKuB,cAAgB,M,CAI5C,UAAAC,GACE,MAAMC,EAAU,GAChBA,EAAQ,mBAAqB,KAC7BA,EAAQ,aAAezB,KAAK0B,SAC5BD,EAAQ,YAAczB,KAAK2B,SAC3BF,EAAQ,GAAGzB,KAAK4B,QAAU,KAC1B,OAAOH,C,CAGT,cAAAI,GACE,OAAO7B,KAAK2B,SAAW,iBAAmB,GAAG3B,KAAKkB,Y,CAGpD,OAAAY,GACE,IAAK9B,KAAK+B,SAAU,MAAO,GAC3B,OAAOC,EAAA,aAAWf,KAAMjB,KAAK+B,SAAUE,QAASjC,KAAKiC,QAASC,KAAM,QAAShB,MAAOlB,KAAK6B,kB,CAG3F,MAAAM,GACE,MAAMC,EAAcpC,KAAK6B,iBACzB,OACEG,EAACK,EAAI,CAAAC,IAAA,2CAACC,MAAOvC,KAAKsB,qBAChBU,EAAA,OAAAM,IAAA,2CAAKE,MAAOxC,KAAKwB,aAAce,MAAOvC,KAAKQ,QACxCR,KAAK8B,UACNE,EAAA,cAAAM,IAAA,2CAAYJ,KAAK,SAAQ,cAAa,OAAOhB,MAAOkB,GAClDJ,EAAA,QAAAM,IAAA,+C","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,h as i,H as a}from"./p-fd5ed6b0.js";import{i as c}from"./p-48f9289b.js";const r=["360","accessibility","accessibility2","accessibility3","accessibility4","addUser","airdrop","alertCircle","alertTriangle","arrowDown","arrowDownCircle","arrowLeft","arrowLeftCircle","arrowRight","arrowRightCircle","arrowUp","arrowUpCircle","attach","avatarF","avatarM","biometry","bloodGroup","calendar","cam","camOff","central","chatCircle","check","checkBadge","checkCircle","checkDouble","clock","close","closeCircle","collapse","config","contacts","currency","delete","desktop","doc","down","download","drug","duplicate","edit","elevator","exam","examDoc","expand","facebook","fileBmp","fileJpg","filePdf","filePng","fileUpload","fileXls","filter","fullscreen","gallery","geotag","geotagUnity","geotagUnityGroup","google","graph","healthPlan","heart","height","height2","home","horizontalList","imageUp","infoCircle","instagram","key","lamp","language","language2","languageEN","languagePT","lattes","left","like","link","linkExternal","linkedin","list","login","logout","mail","maintenance","medDoc","medEspec","medImg","medUser","medical","menuHamburguer","menuKebab","menuMeatballs","mic","micOff","minus","minusCircle","minusSquare","mobile","news","notification","npsDeslike","npsHate","npsLike","npsLove","npsNeutral","order","parking","partner","phone","play","plus","plusCircle","plusSquare","print","profile","profileCircle","questionCircle","questionSquare","range","reload","ribbon","right","schedule","scheduleCancel","scheduleCheck","scheduleHistorico","search","secure","share","siren","sound","soundOff","subItem","swap","target","team","telegram","twitter","unLink","unSecure","unity","unlike","up","upload","verticalList","viewFalse","viewTrue","weight","whatsapp","wifi","wifiOff","youtube","zoomIn","zoomOut"];const l=':host{display:block;padding:24px;font-family:"Roboto", Arial, Helvetica, sans-serif}.iconDetail{display:block}.iconSizes{display:flex;align-items:center}.iconSizes .size{display:flex;flex-direction:column;text-align:center;align-items:center;margin-right:9px;padding:8px}.iconSizes .size:last-child{margin-right:0}.iconSizes .size span{font-size:10px;margin:8px 0}.iconSizes.invert{margin-top:12px}.iconSizes.invert .size{background-color:#2d2d2d;color:#F6F6F6;border-radius:3px}.icons{margin-top:28px;display:flex;flex-wrap:wrap;position:relative}.icons .icon{position:relative;padding:4px;cursor:pointer;opacity:0.6;transition:opacity 0.2s linear;width:105px;display:flex;flex-direction:column;text-align:center;align-items:center;margin-bottom:16px;box-sizing:border-box;}.icons .icon cura-label{margin-top:8px}.icons .icon cura-paragraph{margin-top:4px}';const n=l;const s=class{constructor(i){e(this,i);this.sizes=Object.keys(c).filter((e=>e!=="default"));this.colors=["primary","secondary","accent","info","warning","error","success","neutral"];this.setSelected=e=>{this.selected=e};this.selected=r[0]}connectedCallback(){this.sizes.unshift(this.sizes.pop())}render(){return i(a,{key:"4918bc5d13f24f3133af45ce5991b3f3f43e99cf"},i("div",{key:"837d47976a39702b13ceb5a7c5ac8ae097d34988",class:"iconDetail"},i("cura-heading",{key:"de4c75c4652b464991aa173cf7243db65f9ba2ba",size:"small","margin-block":"0 24px"},"Icon: ",i("b",{key:"77591ce199e5140ddcde3d7b956586d27fe6bc05"},this.selected)),i("div",{key:"6da36b174603d48ab3b11a8490c424f164855147",class:"iconSizes"},this.sizes.map((e=>i("div",{class:"size"},i("cura-icon",{name:this.selected,size:e}),i("span",null,e))))),i("div",{key:"4920c8010e0a55f80bb557f4ba0e537b7861ae36",class:"iconSizes invert"},this.sizes.map((e=>i("div",{class:"size"},i("cura-icon",{name:this.selected,size:e,color:"neutral-white"}),i("span",null,e)))))),i("div",{key:"99739b351fb25036efd4b55774c0f077058be8fc",class:"icons"},r.map((e=>i("div",{class:{icon:true,selected:e===this.selected},onClick:()=>this.setSelected(e)},i("cura-icon",{name:e,size:"32",color:e===this.selected?"accent-dark":"neutral-dark"}),i("cura-label",{size:"xsmall",weight:e===this.selected?"bold":"regular",color:e===this.selected?"accent-dark":"neutral-dark"},e))))))}};s.style=n;export{s as cura_icons_view};
|
|
2
|
+
//# sourceMappingURL=p-7f25f4dc.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["iconsetdefaulticons","curaIconsViewCss","CuraIconsViewStyle0","CuraIconsView","this","sizes","Object","keys","iconSizes","filter","key","colors","setSelected","icon","selected","connectedCallback","unshift","pop","render","h","Host","class","size","map","name","color","onClick","weight"],"sources":["src/assets/icons/iconset-default-list.ts","src/components/cura-icons-view/cura-icons-view.scss?tag=cura-icons-view&encapsulation=shadow","src/components/cura-icons-view/cura-icons-view.tsx"],"sourcesContent":["export default [\"360\",\"accessibility\",\"accessibility2\",\"accessibility3\",\"accessibility4\",\"addUser\",\"airdrop\",\"alertCircle\",\"alertTriangle\",\"arrowDown\",\"arrowDownCircle\",\"arrowLeft\",\"arrowLeftCircle\",\"arrowRight\",\"arrowRightCircle\",\"arrowUp\",\"arrowUpCircle\",\"attach\",\"avatarF\",\"avatarM\",\"biometry\",\"bloodGroup\",\"calendar\",\"cam\",\"camOff\",\"central\",\"chatCircle\",\"check\",\"checkBadge\",\"checkCircle\",\"checkDouble\",\"clock\",\"close\",\"closeCircle\",\"collapse\",\"config\",\"contacts\",\"currency\",\"delete\",\"desktop\",\"doc\",\"down\",\"download\",\"drug\",\"duplicate\",\"edit\",\"elevator\",\"exam\",\"examDoc\",\"expand\",\"facebook\",\"fileBmp\",\"fileJpg\",\"filePdf\",\"filePng\",\"fileUpload\",\"fileXls\",\"filter\",\"fullscreen\",\"gallery\",\"geotag\",\"geotagUnity\",\"geotagUnityGroup\",\"google\",\"graph\",\"healthPlan\",\"heart\",\"height\",\"height2\",\"home\",\"horizontalList\",\"imageUp\",\"infoCircle\",\"instagram\",\"key\",\"lamp\",\"language\",\"language2\",\"languageEN\",\"languagePT\",\"lattes\",\"left\",\"like\",\"link\",\"linkExternal\",\"linkedin\",\"list\",\"login\",\"logout\",\"mail\",\"maintenance\",\"medDoc\",\"medEspec\",\"medImg\",\"medUser\",\"medical\",\"menuHamburguer\",\"menuKebab\",\"menuMeatballs\",\"mic\",\"micOff\",\"minus\",\"minusCircle\",\"minusSquare\",\"mobile\",\"news\",\"notification\",\"npsDeslike\",\"npsHate\",\"npsLike\",\"npsLove\",\"npsNeutral\",\"order\",\"parking\",\"partner\",\"phone\",\"play\",\"plus\",\"plusCircle\",\"plusSquare\",\"print\",\"profile\",\"profileCircle\",\"questionCircle\",\"questionSquare\",\"range\",\"reload\",\"ribbon\",\"right\",\"schedule\",\"scheduleCancel\",\"scheduleCheck\",\"scheduleHistorico\",\"search\",\"secure\",\"share\",\"siren\",\"sound\",\"soundOff\",\"subItem\",\"swap\",\"target\",\"team\",\"telegram\",\"twitter\",\"unLink\",\"unSecure\",\"unity\",\"unlike\",\"up\",\"upload\",\"verticalList\",\"viewFalse\",\"viewTrue\",\"weight\",\"whatsapp\",\"wifi\",\"wifiOff\",\"youtube\",\"zoomIn\",\"zoomOut\"];",":host {\n display: block;\n padding: 24px;\n font-family: 'Roboto', Arial, Helvetica, sans-serif;\n}\n\n.iconDetail {\n display: block;\n}\n\n.iconSizes {\n display: flex;\n align-items: center;\n\n\n .size {\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n margin-right: 9px;\n padding: 8px;\n\n &:last-child { margin-right: 0; }\n span {\n font-size: 10px;\n margin: 8px 0;\n }\n }\n\n &.invert {\n margin-top: 12px;\n\n .size {\n background-color: #2d2d2d;\n color: #F6F6F6;\n border-radius: 3px;\n }\n }\n}\n\n.icons {\n margin-top: 28px;\n display: flex;\n flex-wrap: wrap;\n position: relative;\n\n .icon {\n position: relative;\n padding: 4px;\n cursor: pointer;\n opacity: .6;\n transition: opacity .2s linear;\n width: 105px;\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n margin-bottom: 16px;\n box-sizing: border-box;\n cura-label {\n margin-top: 8px;\n }\n cura-paragraph {\n margin-top: 4px;\n }\n /* &.selected {\n transform: scale(1.2);\n } */\n }\n}\n\n","import { Component, Host, h, State } from '@stencil/core';\nimport iconsetdefaulticons from '../../assets/icons/iconset-default-list';\nimport { iconSizes } from '../cura-icon/cura-icon.definitions';\n\n@Component({\n tag: 'cura-icons-view',\n styleUrl: 'cura-icons-view.scss',\n shadow: true,\n})\nexport class CuraIconsView {\n\n sizes = Object.keys(iconSizes).filter(key => key !== 'default');\n colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];\n @State() selected = iconsetdefaulticons[0];\n\n connectedCallback() {\n this.sizes.unshift(this.sizes.pop());\n }\n\n setSelected = (icon) => {\n this.selected = icon;\n }\n\n render() {\n return (\n <Host>\n <div class=\"iconDetail\">\n <cura-heading size=\"small\" margin-block=\"0 24px\">Icon: <b>{ this.selected }</b></cura-heading>\n <div class=\"iconSizes\">\n { this.sizes.map( size =>\n <div class=\"size\">\n <cura-icon name={this.selected} size={size}></cura-icon>\n <span>{ size }</span>\n </div>\n )}\n </div>\n <div class=\"iconSizes invert\">\n { this.sizes.map( size =>\n <div class=\"size\">\n <cura-icon name={this.selected} size={size} color=\"neutral-white\"></cura-icon>\n <span>{ size }</span>\n </div>\n )}\n </div>\n </div>\n <div class=\"icons\">\n { iconsetdefaulticons.map(icon =>\n <div class={{icon: true, selected: icon === this.selected }} onClick={() => this.setSelected(icon)}>\n <cura-icon\n name={icon}\n size=\"32\"\n color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}></cura-icon>\n <cura-label\n size=\"xsmall\"\n weight={icon === this.selected ? 'bold' : 'regular'}\n color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}>{icon}</cura-label>\n </div>\n )}\n </div>\n </Host>\n );\n }\n\n}\n"],"mappings":"sFAAA,MAAAA,EAAe,CAAC,MAAM,gBAAgB,iBAAiB,iBAAiB,iBAAiB,UAAU,UAAU,cAAc,gBAAgB,YAAY,kBAAkB,YAAY,kBAAkB,aAAa,mBAAmB,UAAU,gBAAgB,SAAS,UAAU,UAAU,WAAW,aAAa,WAAW,MAAM,SAAS,UAAU,aAAa,QAAQ,aAAa,cAAc,cAAc,QAAQ,QAAQ,cAAc,WAAW,SAAS,WAAW,WAAW,SAAS,UAAU,MAAM,OAAO,WAAW,OAAO,YAAY,OAAO,WAAW,OAAO,UAAU,SAAS,WAAW,UAAU,UAAU,UAAU,UAAU,aAAa,UAAU,SAAS,aAAa,UAAU,SAAS,cAAc,mBAAmB,SAAS,QAAQ,aAAa,QAAQ,SAAS,UAAU,OAAO,iBAAiB,UAAU,aAAa,YAAY,MAAM,OAAO,WAAW,YAAY,aAAa,aAAa,SAAS,OAAO,OAAO,OAAO,eAAe,WAAW,OAAO,QAAQ,SAAS,OAAO,cAAc,SAAS,WAAW,SAAS,UAAU,UAAU,iBAAiB,YAAY,gBAAgB,MAAM,SAAS,QAAQ,cAAc,cAAc,SAAS,OAAO,eAAe,aAAa,UAAU,UAAU,UAAU,aAAa,QAAQ,UAAU,UAAU,QAAQ,OAAO,OAAO,aAAa,aAAa,QAAQ,UAAU,gBAAgB,iBAAiB,iBAAiB,QAAQ,SAAS,SAAS,QAAQ,WAAW,iBAAiB,gBAAgB,oBAAoB,SAAS,SAAS,QAAQ,QAAQ,QAAQ,WAAW,UAAU,OAAO,SAAS,OAAO,WAAW,UAAU,SAAS,WAAW,QAAQ,SAAS,KAAK,SAAS,eAAe,YAAY,WAAW,SAAS,WAAW,OAAO,UAAU,UAAU,SAAS,WCA3sD,MAAMC,EAAmB,41BACzB,MAAAC,EAAeD,E,MCQFE,EAAa,M,yBAExBC,KAAAC,MAAQC,OAAOC,KAAKC,GAAWC,QAAOC,GAAOA,IAAQ,YACrDN,KAAAO,OAAS,CAAC,UAAW,YAAa,SAAU,OAAQ,UAAW,QAAS,UAAW,WAOnFP,KAAAQ,YAAeC,IACbT,KAAKU,SAAWD,CAAI,E,cAPFb,EAAoB,E,CAExC,iBAAAe,GACEX,KAAKC,MAAMW,QAAQZ,KAAKC,MAAMY,M,CAOhC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAV,IAAA,4CACHS,EAAA,OAAAT,IAAA,2CAAKW,MAAM,cACTF,EAAA,gBAAAT,IAAA,2CAAcY,KAAK,QAAO,eAAc,UAAQ,SAAOH,EAAA,KAAAT,IAAA,4CAAKN,KAAKU,WACjEK,EAAA,OAAAT,IAAA,2CAAKW,MAAM,aACPjB,KAAKC,MAAMkB,KAAKD,GAChBH,EAAA,OAAKE,MAAM,QACTF,EAAA,aAAWK,KAAMpB,KAAKU,SAAUQ,KAAMA,IACtCH,EAAA,YAAQG,OAIdH,EAAA,OAAAT,IAAA,2CAAKW,MAAM,oBACPjB,KAAKC,MAAMkB,KAAKD,GAChBH,EAAA,OAAKE,MAAM,QACTF,EAAA,aAAWK,KAAMpB,KAAKU,SAAUQ,KAAMA,EAAMG,MAAM,kBAClDN,EAAA,YAAQG,QAKhBH,EAAA,OAAAT,IAAA,2CAAKW,MAAM,SACPrB,EAAoBuB,KAAIV,GACxBM,EAAA,OAAKE,MAAO,CAACR,KAAM,KAAMC,SAAUD,IAAST,KAAKU,UAAYY,QAAS,IAAMtB,KAAKQ,YAAYC,IAC3FM,EAAA,aACEK,KAAMX,EACNS,KAAK,KACLG,MAAOZ,IAAST,KAAKU,SAAW,cAAgB,iBAClDK,EAAA,cACEG,KAAK,SACLK,OAAQd,IAAST,KAAKU,SAAW,OAAS,UAC1CW,MAAOZ,IAAST,KAAKU,SAAW,cAAgB,gBAAiBD,O","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as i,c as t,h as o,H as e,g as s}from"./p-fd5ed6b0.js";const d=":host{display:block;width:100%;box-sizing:border-box}.dropdown{display:flex;position:relative;flex-direction:column;width:inherit}.dropdown .dropdown-search-list{z-index:1000}.dropdown-input-search{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.dropdown-input-search.dropdown-open ::part(cura-input-field){border-radius:4px 4px 0px 0px}.dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:none}.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]){display:none}.dropdown-search-list{position:absolute;top:calc(100% - 8px);width:100%;max-height:var(--dropdown-max-height);padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));border-radius:0px 0px 4px 4px;border-top:0 var(--neutral-light);border-right:2px solid var(--neutral-light);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;display:none}.dropdown-search-list.visible{display:block}.dropdown-search-list-input-search{width:inherit;display:flex;justify-content:center;align-items:center;padding:16px 8px;border-bottom:2px solid var(--info-base);background-color:var(--neutral-purewhite)}.dropdown-search-list-input-search cura-input-text{width:inherit}.dropdown-search-list-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile{position:fixed;top:1%;left:0;right:0;width:100%;z-index:10000}.dropdown-mobile .dropdown-input-search{display:flex;background-color:var(--neutral-purewhite);border-bottom:2px solid var(--info-base);z-index:10000}.dropdown-mobile .dropdown-input-search cura-button-transparent{display:flex;margin-right:4px}.dropdown-mobile .dropdown-input-search cura-input-text{padding:12px 8px 12px 0px}.dropdown-mobile .dropdown-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile .dropdown-input-search.dropdown-open{display:flex}.dropdown-mobile .dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:block}.dropdown-mobile .dropdown-search-list{position:static;width:100%;height:calc(100vh - var(--dynamic-input-search-height, 0));max-height:none;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:none;border:none;background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;z-index:10000}";const r=d;const n=class{constructor(o){i(this,o);this.valueChanged=t(this,"valueChanged",7);this.onselect=t(this,"onselect",7);this.overlayElement=null;this.adjustInputPosition=async()=>{var i,t;const o=(window===null||window===void 0?void 0:window.innerHeight)<this.screenDefaultHeight;const e=(i=this.host.shadowRoot)===null||i===void 0?void 0:i.querySelector(".dropdown-mobile");if(e){e.style.bottom=o?`${((t=window===null||window===void 0?void 0:window.screen)===null||t===void 0?void 0:t.height)-(window===null||window===void 0?void 0:window.innerHeight)}px`:"0";window.scroll({top:0,left:0,behavior:"smooth"})}};this.handleSlotChange=()=>{this.options=Array.from(this.host.querySelectorAll("cura-dropdown-search-option"));this.addClickListenersToOptions();this.updateHoveredIndex()};this.handleInputChange=i=>{const t=i.target;this.value=t.value;this.onValueChange(this.value)};this.handleKeyDown=i=>{if(i.key==="ArrowDown"){i.preventDefault();this.moveHighlight(1)}else if(i.key==="ArrowUp"){i.preventDefault();this.moveHighlight(-1)}else if(i.key==="Enter"){i.preventDefault();if(this.hoveredIndex>-1){this.handleOnBlur();this.onSelectedOption(this.hoveredIndex)}}};this.handleResize=()=>{this.isMobile=window.innerWidth<768;if(this.isDropdownOpen){if(this.isMobile){this.showOverlay()}else{this.resetDropdownStyles();this.removeOverlay()}}};this.setUp=()=>{this.handleResize();this.adjustInputPosition()};this.size="large";this.status="default";this.disabled=false;this.name=undefined;this.required=false;this.selected=false;this.value="";this.placeholder="";this.label="";this.iconName="search";this.dropdownMaxHeight="630px";this.overlayVisible=false;this.isDropdownOpen=false;this.styles={};this.isMobile=window.innerWidth<768;this.mode="default";this.inputTextRef=undefined;this.isOnBlurInput=true;this.hoveredIndex=-1;this.options=[];this.originalOverflow="";this.screenDefaultHeight=0}connectedCallback(){this.weights=window.CuraAPI.theme.fonts.getWeights();this.styles["--info-base"]=window.CuraAPI.theme.colors.getColor("info-base");this.styles["--neutral-purewhite"]=window.CuraAPI.theme.colors.getColor("neutral-purewhite");this.styles["--neutral-light"]=window.CuraAPI.theme.colors.getColor("neutral-light");this.styles["--neutral-dark"]=window.CuraAPI.theme.colors.getColor("neutral-dark");this.styles["--neutral-black-shadow"]=window.CuraAPI.theme.colors.getColor(`neutral-black`,.16);this.styles["--error-dark"]=window.CuraAPI.theme.colors.getColor("error-dark");this.styles["--error-lighter"]=window.CuraAPI.theme.colors.getColor("error-lighter");this.styles["--breakpoints"]=window.CuraAPI.theme.breakpoints.get();this.styles["--font-size"]=window.CuraAPI.theme.fonts.getSize();this.styles["--font-family"]=window.CuraAPI.theme.fonts.getFamily();this.styles["--font-weight-medium"]=this.weights.medium}onValueChange(i){this.updateSelectedOption(i);this.valueChanged.emit(i)}componentWillLoad(){this.updateSelectedOption(this.value)}componentDidRender(){if(this.isDropdownOpen&&this.isMobile){this.showOverlay();this.getDropdownSearchListHeight()}else{this.removeOverlay()}}componentDidLoad(){var i;this.screenDefaultHeight=window===null||window===void 0?void 0:window.innerHeight;window===null||window===void 0?void 0:window.addEventListener("resize",this.setUp);(i=window===null||window===void 0?void 0:window.visualViewport)===null||i===void 0?void 0:i.addEventListener("resize",this.adjustInputPosition)}disconnectedCallback(){var i;window===null||window===void 0?void 0:window.removeEventListener("resize",this.setUp);(i=window===null||window===void 0?void 0:window.visualViewport)===null||i===void 0?void 0:i.removeEventListener("resize",this.adjustInputPosition)}showOverlay(){if(!this.overlayElement){this.overlayElement=document.createElement("div");this.overlayElement.className="dropdown-overlay";this.overlayElement.style.position="fixed";this.overlayElement.style.top="0";this.overlayElement.style.left="0";this.overlayElement.style.width="100%";this.overlayElement.style.height="100%";this.overlayElement.style.zIndex="9999";this.overlayElement.style.backgroundColor="white";document.body.appendChild(this.overlayElement);this.originalOverflow=document.body.style.overflow;document.body.style.overflow="hidden"}}removeOverlay(){if(this.overlayElement&&this.overlayElement.parentNode===document.body){document.body.removeChild(this.overlayElement);this.overlayElement=null;document.body.style.overflow=this.originalOverflow}}addClickListenersToOptions(){this.options.forEach(((i,t)=>{i===null||i===void 0?void 0:i.addEventListener("optionSelected",(()=>this.onSelectedOption(t)))}))}updateSelectedOption(i){const t=this.options.findIndex((t=>t.getAttribute("value")===i));this.hoveredIndex=t;this.updateOptionAttribute("hovered",this.hoveredIndex);this.updateOptionAttribute("selected",this.hoveredIndex);this.scrollHoveredOptionIntoView();this.adjustInputPosition()}onSelectedOption(i){const t=this.options[i];if(t.selectable){const i=t.getAttribute("value")||t.textContent;this.value=i||"";this.updateSelectedOption(this.value);this.isDropdownOpen=false;this.isOnBlurInput=true;this.resetDropdownStyles();this.removeOverlay()}}moveHighlight(i){const t=this.options;const o=(this.hoveredIndex+i+t.length)%t.length;this.hoveredIndex=o;this.updateOptionAttribute("hovered",this.hoveredIndex);this.scrollHoveredOptionIntoView()}updateOptionAttribute(i,t){this.options.forEach(((o,e)=>{o[i]=e===t}))}updateHoveredIndex(){const i=this.options;const t=this.value;this.hoveredIndex=i.findIndex((i=>i.getAttribute("value")===t))}scrollHoveredOptionIntoView(){var i;const t=(i=this.host.shadowRoot)===null||i===void 0?void 0:i.querySelector(".dropdown-search-list");const o=this.options[this.hoveredIndex];if(t&&o){const i=o.getBoundingClientRect();const e=t.getBoundingClientRect();if(i.bottom>e.bottom){t.scrollTop+=i.bottom-e.bottom}if(i.top<e.top){t.scrollTop-=e.top-i.top}}}handleOnBlur(){if(this.isOnBlurInput===true){setTimeout((()=>{this.isDropdownOpen=false;this.resetDropdownStyles();this.removeOverlay()}),200)}}getClasses(){return{"dropdown-input-search":true,"dropdown-open":this.isDropdownOpen,disabled:this.disabled,[this.status]:true}}getDropdownClasses(){return{"dropdown-search-list":true,visible:this.options.length&&this.isDropdownOpen?true:false}}hostCSSProperties(){return{"--dropdown-max-height":this.dropdownMaxHeight}}handleOnFocus(){this.isDropdownOpen=true}getDropdownSearchListHeight(){var i;const t=(i=this.host.shadowRoot)===null||i===void 0?void 0:i.querySelector(".dropdown-input-search");if(t){this.host.style.setProperty("--dynamic-input-search-height",`${t.offsetHeight}px`)}}handleGoBack(){this.resetDropdownStyles();this.isMobile=false}resetDropdownStyles(){var i;const t=(i=this.host.shadowRoot)===null||i===void 0?void 0:i.querySelector(".dropdown-mobile");if(t&&t.style.position==="fixed"){t.style.position="relative";t.style.removeProperty("bottom")}}render(){const i=this.isMobile&&this.isDropdownOpen;return o(e,{key:"85b79d1f41c8f03ed8aa8f915743c6a35d529b20",style:this.hostCSSProperties(),class:"dropdown-overlay"},o("div",{key:"c5255bc1445309a8da2e28e76d31c151170fb1bf",class:`dropdown ${i?"dropdown-mobile":""}`,style:this.styles},o("div",{key:"a0e9db281870954a6f3155cd482c741e3d44db24",class:this.getClasses()},this.isMobile&&this.isDropdownOpen&&o("cura-button-transparent",{key:"67e58b57752cbe8a8fbbaee555e9c905c710782c",fontColor:"dark",onClick:()=>this.handleGoBack(),iconName:"arrowLeft",size:"medium",iconOnly:true,color:"primary"}),o("cura-input-text",{key:"87edd1a5b058a9c7ae966999269f1546d7132a53",disabled:this.disabled,label:this.label,part:"cura-input-field",mode:i?"transparent":"default",required:this.required,hideErrorIcon:this.status==="error",iconName:this.iconName||"search",value:this.value,status:this.status,onValueChange:i=>this.onValueChange(i.target.value),onInput:i=>this.handleInputChange(i),onFocus:()=>this.handleOnFocus(),onClick:()=>window.innerWidth<768?this.isMobile=true:null,onBlur:()=>{this.handleOnBlur()},placeholder:this.placeholder,size:this.size,onKeyDown:this.handleKeyDown},o("slot",{key:"47f7e07fbcce084cef173c23583ad43e580ae02d",name:"helperText"}))),o("div",{key:"4748cdb4cd039f29f50cfdf1f9ff110bafbeb064",id:"dropdown-search-list",class:this.getDropdownClasses()},o("slot",{key:"21a66543f65ff198f0b9f60758f1f0930342dc4c",name:"dropdown-search-option",onSlotchange:this.handleSlotChange}))))}get host(){return s(this)}static get watchers(){return{value:["onValueChange"]}}};n.style=r;export{n as cura_dropdown_search};
|
|
2
|
+
//# sourceMappingURL=p-9d7c6e96.entry.js.map
|