@rededor/cura-hydrate 1.0.0 → 1.3.0
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/index.js +875 -193
- package/index.mjs +875 -193
- package/package.json +1 -1
package/index.mjs
CHANGED
|
@@ -123,7 +123,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
|
|
|
123
123
|
|
|
124
124
|
|
|
125
125
|
const NAMESPACE = 'cura';
|
|
126
|
-
const BUILD = /* cura */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener:
|
|
126
|
+
const BUILD = /* cura */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
|
|
127
127
|
|
|
128
128
|
/**
|
|
129
129
|
* Cura Default Theme
|
|
@@ -161,9 +161,9 @@ const ThemeDefault = {
|
|
|
161
161
|
font: {
|
|
162
162
|
size: '14px',
|
|
163
163
|
color: '#4A4A4A',
|
|
164
|
-
body: "'
|
|
165
|
-
heading: "'
|
|
166
|
-
display: "'
|
|
164
|
+
body: "'Gotham', Arial, Helvetica, sans-serif",
|
|
165
|
+
heading: "'Gotham', Arial, Helvetica, sans-serif",
|
|
166
|
+
display: "'Gotham', Arial, Helvetica, sans-serif",
|
|
167
167
|
weights: {
|
|
168
168
|
thin: 100,
|
|
169
169
|
light: 300,
|
|
@@ -270,6 +270,36 @@ const ThemeOncology = Object.assign(Object.assign({}, ThemeDefault), {
|
|
|
270
270
|
},
|
|
271
271
|
} });
|
|
272
272
|
|
|
273
|
+
/**
|
|
274
|
+
* Richet Theme
|
|
275
|
+
*/
|
|
276
|
+
const ThemeRichet = Object.assign(Object.assign({}, ThemeDefault), {
|
|
277
|
+
/* Custom */
|
|
278
|
+
/* Colors */
|
|
279
|
+
color: {
|
|
280
|
+
primary: {
|
|
281
|
+
'100': '153,197,255',
|
|
282
|
+
'300': '67,142,241',
|
|
283
|
+
'500': '0,47,108',
|
|
284
|
+
'700': '1,39,91',
|
|
285
|
+
'900': '0,33,77'
|
|
286
|
+
},
|
|
287
|
+
secondary: {
|
|
288
|
+
'100': '243,237,227',
|
|
289
|
+
'300': '216,194,163',
|
|
290
|
+
'500': '208,173,103',
|
|
291
|
+
'700': '201,155,64',
|
|
292
|
+
'900': '149,104,15'
|
|
293
|
+
},
|
|
294
|
+
accent: {
|
|
295
|
+
'100': '167,230,215',
|
|
296
|
+
'300': '130,225,209',
|
|
297
|
+
'500': '44,213,196',
|
|
298
|
+
'700': '26,188,169',
|
|
299
|
+
'900': '0,150,129'
|
|
300
|
+
}
|
|
301
|
+
} });
|
|
302
|
+
|
|
273
303
|
/**
|
|
274
304
|
* Legacy Default Theme
|
|
275
305
|
*/
|
|
@@ -298,12 +328,29 @@ const ThemeLegacyDefault = Object.assign(Object.assign({}, ThemeDefault), {
|
|
|
298
328
|
'700': '149,94,29',
|
|
299
329
|
'900': '45,28,9'
|
|
300
330
|
}
|
|
331
|
+
},
|
|
332
|
+
/* Fonts */
|
|
333
|
+
font: {
|
|
334
|
+
size: '14px',
|
|
335
|
+
color: '#4A4A4A',
|
|
336
|
+
body: "'Roboto', Arial, Helvetica, sans-serif",
|
|
337
|
+
heading: "'Roboto', Arial, Helvetica, sans-serif",
|
|
338
|
+
display: "'Roboto', Arial, Helvetica, sans-serif",
|
|
339
|
+
weights: {
|
|
340
|
+
thin: 100,
|
|
341
|
+
light: 300,
|
|
342
|
+
regular: 400,
|
|
343
|
+
medium: 500,
|
|
344
|
+
bold: 700,
|
|
345
|
+
black: 900
|
|
346
|
+
},
|
|
301
347
|
} });
|
|
302
348
|
|
|
303
349
|
const ThemePresets = {
|
|
304
350
|
'default': ThemeDefault,
|
|
305
351
|
'maternidade': ThemeMaternity,
|
|
306
352
|
'oncologia': ThemeOncology,
|
|
353
|
+
'richet': ThemeRichet,
|
|
307
354
|
'legacyDefault': ThemeLegacyDefault
|
|
308
355
|
};
|
|
309
356
|
|
|
@@ -1782,6 +1829,13 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
|
|
|
1782
1829
|
}
|
|
1783
1830
|
let maybePromise;
|
|
1784
1831
|
if (isInitialLoad) {
|
|
1832
|
+
{
|
|
1833
|
+
hostRef.$flags$ |= 256 /* isListenReady */;
|
|
1834
|
+
if (hostRef.$queuedListeners$) {
|
|
1835
|
+
hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
|
|
1836
|
+
hostRef.$queuedListeners$ = void 0;
|
|
1837
|
+
}
|
|
1838
|
+
}
|
|
1785
1839
|
{
|
|
1786
1840
|
maybePromise = safeCall(instance, "componentWillLoad");
|
|
1787
1841
|
}
|
|
@@ -2169,6 +2223,7 @@ var connectedCallback = (elm) => {
|
|
|
2169
2223
|
initializeComponent(elm, hostRef, cmpMeta);
|
|
2170
2224
|
}
|
|
2171
2225
|
} else {
|
|
2226
|
+
addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
|
|
2172
2227
|
if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
|
|
2173
2228
|
fireConnectedCallback(hostRef.$lazyInstance$);
|
|
2174
2229
|
} else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
|
|
@@ -2185,6 +2240,36 @@ var setContentReference = (elm) => {
|
|
|
2185
2240
|
contentRefElm["s-cn"] = true;
|
|
2186
2241
|
insertBefore(elm, contentRefElm, elm.firstChild);
|
|
2187
2242
|
};
|
|
2243
|
+
var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
|
|
2244
|
+
if (listeners) {
|
|
2245
|
+
listeners.map(([flags, name, method]) => {
|
|
2246
|
+
const target = getHostListenerTarget(elm, flags) ;
|
|
2247
|
+
const handler = hostListenerProxy(hostRef, method);
|
|
2248
|
+
const opts = hostListenerOpts(flags);
|
|
2249
|
+
plt.ael(target, name, handler, opts);
|
|
2250
|
+
(hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
|
|
2251
|
+
});
|
|
2252
|
+
}
|
|
2253
|
+
};
|
|
2254
|
+
var hostListenerProxy = (hostRef, methodName) => (ev) => {
|
|
2255
|
+
var _a;
|
|
2256
|
+
try {
|
|
2257
|
+
{
|
|
2258
|
+
if (hostRef.$flags$ & 256 /* isListenReady */) {
|
|
2259
|
+
(_a = hostRef.$lazyInstance$) == null ? void 0 : _a[methodName](ev);
|
|
2260
|
+
} else {
|
|
2261
|
+
(hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
|
|
2262
|
+
}
|
|
2263
|
+
}
|
|
2264
|
+
} catch (e) {
|
|
2265
|
+
consoleError(e);
|
|
2266
|
+
}
|
|
2267
|
+
};
|
|
2268
|
+
var getHostListenerTarget = (elm, flags) => {
|
|
2269
|
+
if (flags & 8 /* TargetWindow */) return win;
|
|
2270
|
+
return elm;
|
|
2271
|
+
};
|
|
2272
|
+
var hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
|
|
2188
2273
|
|
|
2189
2274
|
// src/runtime/vdom/vdom-annotations.ts
|
|
2190
2275
|
var insertVdomAnnotations = (doc2, staticComponents) => {
|
|
@@ -2517,7 +2602,8 @@ async function hydrateComponent(win2, results, tagName, elm, waitingElements) {
|
|
|
2517
2602
|
const cmpMeta = Cstr.cmpMeta;
|
|
2518
2603
|
if (cmpMeta != null) {
|
|
2519
2604
|
waitingElements.add(elm);
|
|
2520
|
-
getHostRef(this);
|
|
2605
|
+
const hostRef = getHostRef(this);
|
|
2606
|
+
addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
|
|
2521
2607
|
try {
|
|
2522
2608
|
connectedCallback(elm);
|
|
2523
2609
|
await elm.componentOnReady();
|
|
@@ -2733,7 +2819,7 @@ var registerHost = (elm, cmpMeta) => {
|
|
|
2733
2819
|
};
|
|
2734
2820
|
var styles = /* @__PURE__ */ new Map();
|
|
2735
2821
|
|
|
2736
|
-
const curaAccordionCss = ":host{display:block;color:var(--font-color);font-size:var(--font-size);font-size:var(--font-size);font-family:var(--font-family);font-weight:var(--font-weight-regular)}
|
|
2822
|
+
const curaAccordionCss = ":host{display:block;color:var(--font-color);font-size:var(--font-size);font-size:var(--font-size);font-family:var(--font-family);font-weight:var(--font-weight-regular)}";
|
|
2737
2823
|
var CuraAccordionStyle0 = curaAccordionCss;
|
|
2738
2824
|
|
|
2739
2825
|
class CuraAccordion {
|
|
@@ -2761,14 +2847,14 @@ class CuraAccordion {
|
|
|
2761
2847
|
};
|
|
2762
2848
|
this.mutationObserver = new MutationObserver(this.mutationObserverCallback);
|
|
2763
2849
|
this.color = 'primary';
|
|
2764
|
-
this.activeColor = 'accent';
|
|
2765
2850
|
this.colorMode = 'dark';
|
|
2766
|
-
this.iconSize =
|
|
2851
|
+
this.iconSize = 20;
|
|
2852
|
+
this.labelIcon = '';
|
|
2767
2853
|
this.openIcon = 'down';
|
|
2768
2854
|
this.closeIcon = 'up';
|
|
2769
2855
|
this.iconColor = '';
|
|
2770
|
-
this.iconActiveColor = '';
|
|
2771
2856
|
this.behavior = 'default';
|
|
2857
|
+
this.level = 3;
|
|
2772
2858
|
this.styles = {};
|
|
2773
2859
|
}
|
|
2774
2860
|
handleChangeColor() {
|
|
@@ -2777,8 +2863,6 @@ class CuraAccordion {
|
|
|
2777
2863
|
connectedCallback() {
|
|
2778
2864
|
const weights = window.CuraAPI.theme.fonts.getWeights();
|
|
2779
2865
|
this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
|
|
2780
|
-
this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);
|
|
2781
|
-
this.styles['--neutral-lighter'] = window.CuraAPI.theme.colors.getColor(`neutral-lighter`);
|
|
2782
2866
|
this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
|
|
2783
2867
|
this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
|
|
2784
2868
|
this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();
|
|
@@ -2800,22 +2884,24 @@ class CuraAccordion {
|
|
|
2800
2884
|
// Theme
|
|
2801
2885
|
item.colorMode = this.colorMode;
|
|
2802
2886
|
item.iconColor = this.iconColor || this.color;
|
|
2803
|
-
item.iconActiveColor = this.iconActiveColor || this.activeColor;
|
|
2804
2887
|
// Icon
|
|
2805
2888
|
item.iconSize = this.iconSize;
|
|
2889
|
+
if (this.labelIcon)
|
|
2890
|
+
item.labelIcon = this.labelIcon; // It's possible to define a specific icon for each item.
|
|
2806
2891
|
item.openIcon = this.openIcon;
|
|
2807
2892
|
item.closeIcon = this.closeIcon;
|
|
2893
|
+
// Level
|
|
2894
|
+
item.level = this.level;
|
|
2808
2895
|
}
|
|
2809
2896
|
setColors() {
|
|
2810
|
-
this.styles = Object.assign(Object.assign({}, this.styles), {
|
|
2897
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { "--acc-color": window.CuraAPI.theme.colors.getColor("neutral-black"), "--acc-color-hover": window.CuraAPI.theme.colors.getColor(`${this.color}-base`), "--acc-color-icon": window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-base`), "--acc-color-icon-hover": window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-darker`), "--acc-color-inverted": window.CuraAPI.theme.colors.getColor("neutral-white"), "--acc-color-hover-inverted": window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`), "--acc-color-icon-inverted": window.CuraAPI.theme.colors.getColor("neutral-white"), "--acc-color-icon-hover-inverted": window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-lighter`) });
|
|
2811
2898
|
}
|
|
2812
2899
|
render() {
|
|
2813
|
-
return (hAsync(Host, { key: '
|
|
2900
|
+
return (hAsync(Host, { key: 'a56103203dd352195eaac03957350c73a1fcfb06', style: this.styles }, hAsync("slot", { key: '3226a757908201e1c91d6a9a195980d9020f2327', name: 'accordion-item' })));
|
|
2814
2901
|
}
|
|
2815
2902
|
get host() { return getElement(this); }
|
|
2816
2903
|
static get watchers() { return {
|
|
2817
|
-
"color": ["handleChangeColor"]
|
|
2818
|
-
"activeColor": ["handleChangeColor"]
|
|
2904
|
+
"color": ["handleChangeColor"]
|
|
2819
2905
|
}; }
|
|
2820
2906
|
static get style() { return CuraAccordionStyle0; }
|
|
2821
2907
|
static get cmpMeta() { return {
|
|
@@ -2823,44 +2909,39 @@ class CuraAccordion {
|
|
|
2823
2909
|
"$tagName$": "cura-accordion",
|
|
2824
2910
|
"$members$": {
|
|
2825
2911
|
"color": [513],
|
|
2826
|
-
"activeColor": [513, "active-color"],
|
|
2827
2912
|
"colorMode": [513, "color-mode"],
|
|
2828
2913
|
"iconSize": [514, "icon-size"],
|
|
2914
|
+
"labelIcon": [513, "label-icon"],
|
|
2829
2915
|
"openIcon": [513, "open-icon"],
|
|
2830
2916
|
"closeIcon": [513, "close-icon"],
|
|
2831
2917
|
"iconColor": [513, "icon-color"],
|
|
2832
|
-
"iconActiveColor": [513, "icon-active-color"],
|
|
2833
2918
|
"behavior": [513],
|
|
2919
|
+
"level": [514],
|
|
2834
2920
|
"styles": [32]
|
|
2835
2921
|
},
|
|
2836
2922
|
"$listeners$": undefined,
|
|
2837
2923
|
"$lazyBundleId$": "-",
|
|
2838
|
-
"$attrsToReflect$": [["color", "color"], ["
|
|
2924
|
+
"$attrsToReflect$": [["color", "color"], ["colorMode", "color-mode"], ["iconSize", "icon-size"], ["labelIcon", "label-icon"], ["openIcon", "open-icon"], ["closeIcon", "close-icon"], ["iconColor", "icon-color"], ["behavior", "behavior"], ["level", "level"]]
|
|
2839
2925
|
}; }
|
|
2840
2926
|
}
|
|
2841
2927
|
|
|
2842
|
-
const curaAccordionItemCss = ":host{display:block}:host .accordion-item{width:100%}:host .accordion-item
|
|
2928
|
+
const curaAccordionItemCss = ":host{display:block}:host .accordion-item{width:100%}:host .accordion-item::after{content:\"\";display:block;border-top:solid 1px var(--neutral-base);width:100%}:host .accordion-item:hover:not(.active)::after{content:\"\";display:block;border-top:solid 1px var(--acc-color-icon-hover);width:100%}:host .accordion-item .label{display:flex;flex-direction:column}:host .accordion-item .label .label-container{display:flex;flex-grow:1;justify-content:space-between;align-items:center;gap:calc(var(--base-spacing) * 3px);padding:calc(var(--base-spacing) * 3px);word-break:break-word;cursor:pointer;font-size:1.14em;font-weight:var(--font-weight-regular)}:host .accordion-item .label .label-container .label-content{display:flex;justify-content:center;align-items:center;gap:calc(var(--base-spacing) * 3px)}:host .accordion-item .label .label-container .label-content cura-icon{--color:var(--acc-color) !important}:host .accordion-item .label .label-container .label-content cura-heading{--color-body:var(--acc-color) !important}:host .accordion-item .label .label-container cura-icon{--color:var(--acc-color-icon) !important;margin-right:4px}:host .accordion-item .label .label-container:hover cura-heading{--color-body:var(--acc-color-hover) !important}:host .accordion-item .label .label-container:hover cura-icon{--color:var(--acc-color-icon-hover) !important}:host .accordion-item .content{font-size:1em;overflow:hidden;max-height:0;transition:max-height 0.25s ease}:host .accordion-item .content .content-wrapper{padding:calc(var(--base-spacing) * 3px)}:host .accordion-item.inverted:hover:not(.active)::after{content:\"\";display:block;border-top:solid 1px var(--acc-color-icon-hover-inverted);width:100%}:host .accordion-item.inverted .label .label-container cura-heading{--color-body:var(--acc-color-inverted) !important}:host .accordion-item.inverted .label .label-container cura-icon{--color:var(--acc-color-icon-inverted) !important}:host .accordion-item.inverted .label .label-container:hover cura-heading{--color-body:var(--acc-color-hover-inverted) !important}:host .accordion-item.inverted .label .label-container:hover cura-icon{--color:var(--acc-color-icon-hover-inverted) !important}:host .accordion-item.active .content{max-height:200vh;overflow-y:auto;transition:max-height 0.5s ease 0.14s}@media (min-width: 769px) and (max-width: 992px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}@media (min-width: 993px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}";
|
|
2843
2929
|
var CuraAccordionItemStyle0 = curaAccordionItemCss;
|
|
2844
2930
|
|
|
2845
2931
|
class CuraAccordionItem {
|
|
2846
2932
|
constructor(hostRef) {
|
|
2847
2933
|
registerInstance(this, hostRef);
|
|
2848
2934
|
this.label = '';
|
|
2849
|
-
this.iconSize =
|
|
2935
|
+
this.iconSize = 20;
|
|
2936
|
+
this.labelIcon = '';
|
|
2850
2937
|
this.openIcon = 'down';
|
|
2851
2938
|
this.closeIcon = 'up';
|
|
2852
2939
|
this.iconColor = '';
|
|
2853
|
-
this.iconActiveColor = '';
|
|
2854
2940
|
this.colorMode = 'dark';
|
|
2941
|
+
this.level = 3;
|
|
2855
2942
|
this.opened = false;
|
|
2856
2943
|
this.styles = {};
|
|
2857
2944
|
}
|
|
2858
|
-
getIconColor() {
|
|
2859
|
-
const inverted = this.colorMode === 'light';
|
|
2860
|
-
const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;
|
|
2861
|
-
const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;
|
|
2862
|
-
return this.opened ? iconActiveColor : iconColor;
|
|
2863
|
-
}
|
|
2864
2945
|
getClasses() {
|
|
2865
2946
|
const classes = {};
|
|
2866
2947
|
classes['accordion-item'] = true;
|
|
@@ -2871,8 +2952,13 @@ class CuraAccordionItem {
|
|
|
2871
2952
|
accordionItemClick(_) {
|
|
2872
2953
|
this.opened = !this.opened;
|
|
2873
2954
|
}
|
|
2955
|
+
renderIcon() {
|
|
2956
|
+
if (!this.labelIcon)
|
|
2957
|
+
return '';
|
|
2958
|
+
return hAsync("cura-icon", { name: this.labelIcon, size: this.iconSize, color: "neutral-black" });
|
|
2959
|
+
}
|
|
2874
2960
|
render() {
|
|
2875
|
-
return (hAsync(Host, { key: '
|
|
2961
|
+
return (hAsync(Host, { key: '3dd53ab4a597b1726045ec4d3ed066c6c30050d0', slot: "accordion-item" }, hAsync("div", { key: '209291c7c9b587ac546e8b9e40b7d94a11a2489e', class: this.getClasses(), style: this.styles }, hAsync("div", { key: '9c2de1103c7f30bc9d2cb0a86fc660c98b94be84', class: "label", onClick: e => this.accordionItemClick(e) }, hAsync("div", { key: '052a8be2c00edf3907e49970120d9b65937ab031', class: "label-container" }, hAsync("div", { key: 'da543cdbcb0c0d5f691c3d2fcabfbfc9ec46f506', class: "label-content" }, this.renderIcon(), hAsync("cura-heading", { key: 'f587de080f2c1779ffacf0b557827c24edf5e1ee', size: "small", level: this.level, weight: 'bold', "margin-block": "0", color: "neutral-black" }, this.label)), hAsync("cura-icon", { key: '611b48e32dfd7056a563aab56401feb3c8febee2', name: this.opened ? this.closeIcon : this.openIcon, size: this.iconSize, color: "neutral-black" }))), hAsync("div", { key: 'e1d5e606f3e9415570a2a5c2ba3d96264d430bd0', class: 'content' }, hAsync("div", { key: '62b76ef21093a4d051120e2502936049a186c36a', class: "content-wrapper" }, hAsync("slot", { key: '646b3d0163edf473c1a2e824f251f4db85b2fc18' }))))));
|
|
2876
2962
|
}
|
|
2877
2963
|
static get style() { return CuraAccordionItemStyle0; }
|
|
2878
2964
|
static get cmpMeta() { return {
|
|
@@ -2881,21 +2967,22 @@ class CuraAccordionItem {
|
|
|
2881
2967
|
"$members$": {
|
|
2882
2968
|
"label": [513],
|
|
2883
2969
|
"iconSize": [514, "icon-size"],
|
|
2970
|
+
"labelIcon": [513, "label-icon"],
|
|
2884
2971
|
"openIcon": [513, "open-icon"],
|
|
2885
2972
|
"closeIcon": [513, "close-icon"],
|
|
2886
2973
|
"iconColor": [513, "icon-color"],
|
|
2887
|
-
"iconActiveColor": [513, "icon-active-color"],
|
|
2888
2974
|
"colorMode": [1, "color-mode"],
|
|
2975
|
+
"level": [514],
|
|
2889
2976
|
"opened": [1540],
|
|
2890
2977
|
"styles": [32]
|
|
2891
2978
|
},
|
|
2892
2979
|
"$listeners$": undefined,
|
|
2893
2980
|
"$lazyBundleId$": "-",
|
|
2894
|
-
"$attrsToReflect$": [["label", "label"], ["iconSize", "icon-size"], ["openIcon", "open-icon"], ["closeIcon", "close-icon"], ["iconColor", "icon-color"], ["
|
|
2981
|
+
"$attrsToReflect$": [["label", "label"], ["iconSize", "icon-size"], ["labelIcon", "label-icon"], ["openIcon", "open-icon"], ["closeIcon", "close-icon"], ["iconColor", "icon-color"], ["level", "level"], ["opened", "opened"]]
|
|
2895
2982
|
}; }
|
|
2896
2983
|
}
|
|
2897
2984
|
|
|
2898
|
-
const curaAlertCss = ":host{display:block;box-sizing:border-box}:host .conteiner{display:flex;box-sizing:border-box;padding:
|
|
2985
|
+
const curaAlertCss = ":host{display:block;box-sizing:border-box}:host .conteiner{display:flex;box-sizing:border-box;padding:calc(var(--base-spacing) * 3px);gap:calc(var(--base-spacing) * 3px);flex-shrink:0;border:1px solid var(--color-base);border-radius:4px;background-color:var(--color-lighter)}:host .conteiner.floating{box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}:host .content{flex:1;flex-direction:column;display:flex;gap:calc(var(--base-spacing) * 1px)}:host .icon-right{cursor:pointer}";
|
|
2899
2986
|
var CuraAlertStyle0 = curaAlertCss;
|
|
2900
2987
|
|
|
2901
2988
|
class CuraAlert {
|
|
@@ -2926,6 +3013,7 @@ class CuraAlert {
|
|
|
2926
3013
|
this.styles = Object.assign({}, this.styles);
|
|
2927
3014
|
}
|
|
2928
3015
|
connectedCallback() {
|
|
3016
|
+
this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
|
|
2929
3017
|
this.setColors();
|
|
2930
3018
|
}
|
|
2931
3019
|
getClasses() {
|
|
@@ -2944,7 +3032,7 @@ class CuraAlert {
|
|
|
2944
3032
|
return this.icon ? this.icon : iconMapping[this.type];
|
|
2945
3033
|
}
|
|
2946
3034
|
render() {
|
|
2947
|
-
return (hAsync(Host, { key: '
|
|
3035
|
+
return (hAsync(Host, { key: 'e8998ea87d6a1342f6907ac96d2ee73c9f2ef2ad' }, hAsync("div", { key: '917a9c712631eb1f3af2caf3d9d1bbdb7390c239', class: this.getClasses(), style: this.styles }, hAsync("cura-icon", { key: '406ec8e8ebbdcb7b634c26085785fb5e6943c23c', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), hAsync("div", { key: 'de416db715df6bf4335def85044564e51af97b2d', class: "content" }, this.label ? (hAsync("cura-label", { class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label)) : '', hAsync("cura-paragraph", { key: '7c759da9b461769f01facda7b52faac4fad4ff86', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, hAsync("slot", { key: 'f71f45289c632acbe25c19db15de07b09ec395fe' })), hAsync("slot", { key: 'd46e508a7da7579fc4aed665c9606d1d7a93ceb4', name: "actions" })), this.closeable ?
|
|
2948
3036
|
(hAsync("cura-icon", { name: "close", size: 16, color: "error-dark", class: "icon-right", onClick: this.handleClose }))
|
|
2949
3037
|
: '')));
|
|
2950
3038
|
}
|
|
@@ -3020,7 +3108,7 @@ class CuraAvatar {
|
|
|
3020
3108
|
this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;
|
|
3021
3109
|
}
|
|
3022
3110
|
render() {
|
|
3023
|
-
return (hAsync(Host, { key: '
|
|
3111
|
+
return (hAsync(Host, { key: '01de93bd7f04abfba6c189c944f71cc75528b187', style: this.hostCSSProperties(), role: "img" }, hAsync("div", { key: '8d34f270a8c70a46678f7ec16d7d210eecc6b43e', class: this.getClasses(), style: this.styles }, hAsync("img", { key: 'c0997bfcdb3468d5017ca5902c76e8ec0e8ea6f9', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
|
|
3024
3112
|
}
|
|
3025
3113
|
get host() { return getElement(this); }
|
|
3026
3114
|
static get watchers() { return {
|
|
@@ -3048,6 +3136,37 @@ class CuraAvatar {
|
|
|
3048
3136
|
}; }
|
|
3049
3137
|
}
|
|
3050
3138
|
|
|
3139
|
+
const curaBadgeNumberCss = ":host .container{display:flex;width:20px;height:20px;min-width:16px;justify-content:center;align-items:center;border-radius:500px;background:var(--background-color)}";
|
|
3140
|
+
var CuraBadgeNumberStyle0 = curaBadgeNumberCss;
|
|
3141
|
+
|
|
3142
|
+
class CuraBadgeNumber {
|
|
3143
|
+
constructor(hostRef) {
|
|
3144
|
+
registerInstance(this, hostRef);
|
|
3145
|
+
this.styles = {};
|
|
3146
|
+
this.theme = window.CuraAPI.theme;
|
|
3147
|
+
this.number = undefined;
|
|
3148
|
+
this.color = undefined;
|
|
3149
|
+
}
|
|
3150
|
+
connectedCallback() {
|
|
3151
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--background-color': this.theme.colors.getColor(this.color) });
|
|
3152
|
+
}
|
|
3153
|
+
render() {
|
|
3154
|
+
return (hAsync(Host, { key: 'a20934b4bec43ab7024e1bc4ad7537ff0d54b937' }, hAsync("div", { key: 'a3fc8332932a117db4be61092050c3df3e4142bc', class: "container", style: this.styles }, hAsync("cura-label", { key: 'ff53c0645348be0d392728778e3486c353243af5' }, hAsync("slot", { key: 'f0774cc8f8ad07287b68bb3c59bf22cd4fc69755' }, this.number)))));
|
|
3155
|
+
}
|
|
3156
|
+
static get style() { return CuraBadgeNumberStyle0; }
|
|
3157
|
+
static get cmpMeta() { return {
|
|
3158
|
+
"$flags$": 9,
|
|
3159
|
+
"$tagName$": "cura-badge-number",
|
|
3160
|
+
"$members$": {
|
|
3161
|
+
"number": [514],
|
|
3162
|
+
"color": [513]
|
|
3163
|
+
},
|
|
3164
|
+
"$listeners$": undefined,
|
|
3165
|
+
"$lazyBundleId$": "-",
|
|
3166
|
+
"$attrsToReflect$": [["number", "number"], ["color", "color"]]
|
|
3167
|
+
}; }
|
|
3168
|
+
}
|
|
3169
|
+
|
|
3051
3170
|
const labelSizes = {
|
|
3052
3171
|
"small": "xsmall",
|
|
3053
3172
|
"medium": "small",
|
|
@@ -3154,7 +3273,7 @@ class CuraButton {
|
|
|
3154
3273
|
render() {
|
|
3155
3274
|
const symbolColor = this.getSymbolColor();
|
|
3156
3275
|
const labelSize = labelSizes[this.size] || labelSizes["default"];
|
|
3157
|
-
return (hAsync(Host, { key: '
|
|
3276
|
+
return (hAsync(Host, { key: '2831f74cc53bbadcaf1648c759090204cf3c20ea' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", size: labelSize, lineHeight: '105%', color: symbolColor }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: symbolColor }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { class: "label", size: labelSize, lineHeight: '105%', color: symbolColor }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: symbolColor })))));
|
|
3158
3277
|
}
|
|
3159
3278
|
static get formAssociated() { return true; }
|
|
3160
3279
|
static get watchers() { return {
|
|
@@ -3193,7 +3312,7 @@ class CuraButton {
|
|
|
3193
3312
|
const curaButtonOutlineCss = ":host{--border-radius:4px;display:inline-block;vertical-align:middle;position:relative}:host button,:host a{outline:none;box-shadow:none;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:transparent;box-sizing:border-box;border:none}:host button:focus,:host a:focus{outline:2px solid #6EA8FF}:host button::before,:host a::before{content:\"\";width:100%;height:100%;position:absolute;left:0px;top:0px;box-sizing:border-box;border:2px solid var(--color-dark-neutral-purewhite);border-radius:var(--border-radius)}:host button:not(.disabled):not(.isLoading):hover,:host a:not(.disabled):not(.isLoading):hover{background-color:var(--color-lighter-color-darker)}:host button:not(.disabled):not(.inverted):not(.isLoading):active,:host a:not(.disabled):not(.inverted):not(.isLoading):active{background-color:var(--color-light-color-darker)}:host button.large,:host a.large{padding:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px)}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 10px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 2px);min-height:calc(var(--base-spacing) * 8px)}:host button .button-container,:host a .button-container{display:flex;align-items:center;opacity:1;transition:opacity 0.2s linear;position:relative}:host button.icon-right .button-container,:host a.icon-right .button-container{flex-direction:row-reverse}:host button.justify .button-container,:host a.justify .button-container{width:100%}:host button cura-label,:host a cura-label{flex:1;text-align:var(--text-align, \"left\")}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host button.small.icon-left cura-icon,:host a.medium.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2px)}:host button.medium.icon-right cura-icon,:host button.small.icon-right cura-icon,:host a.medium.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2px)}:host button.disabled,:host a.disabled{cursor:not-allowed}:host button.disabled::before,:host a.disabled::before{border-color:var(--neutral-dark)}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px)}:host button.icon-only cura-label,:host a.icon-only cura-label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 3px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 2px)}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}";
|
|
3194
3313
|
var CuraButtonOutlineStyle0 = curaButtonOutlineCss;
|
|
3195
3314
|
|
|
3196
|
-
class CuraButtonOutline
|
|
3315
|
+
class CuraButtonOutline {
|
|
3197
3316
|
constructor(hostRef) {
|
|
3198
3317
|
registerInstance(this, hostRef);
|
|
3199
3318
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
@@ -3288,7 +3407,7 @@ class CuraButtonOutline$1 {
|
|
|
3288
3407
|
render() {
|
|
3289
3408
|
const symbolColor = this.getSymbolColor();
|
|
3290
3409
|
const labelSize = labelSizes[this.size] || labelSizes["default"];
|
|
3291
|
-
return (hAsync(Host, { key: '
|
|
3410
|
+
return (hAsync(Host, { key: '5adde27bc83165040d4279e4835646e13b08a412' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: symbolColor }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: symbolColor })))));
|
|
3292
3411
|
}
|
|
3293
3412
|
static get formAssociated() { return true; }
|
|
3294
3413
|
static get watchers() { return {
|
|
@@ -3325,52 +3444,100 @@ class CuraButtonOutline$1 {
|
|
|
3325
3444
|
}; }
|
|
3326
3445
|
}
|
|
3327
3446
|
|
|
3328
|
-
const curaButtonSelectCss = ":host{--border-radius:4px;display:inline-block;vertical-align:middle;position:relative}:host button,:host a{outline:none;box-shadow:none;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:var(--neutral-purewhite);box-sizing:border-box;border:
|
|
3447
|
+
const curaButtonSelectCss = ":host{--border-radius:4px;display:inline-block;vertical-align:middle;position:relative}:host button,:host a{outline:none;box-shadow:none;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:var(--neutral-purewhite);box-sizing:border-box;border:none}:host button:focus,:host a:focus{outline:2px solid #6EA8FF}:host button::before,:host a::before{content:\"\";width:100%;height:100%;position:absolute;left:0px;top:0px;box-sizing:border-box;border:2px solid var(--color-border);border-radius:var(--border-radius)}:host button:not(.disabled):hover,:host a:not(.disabled):hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover-pressed)}:host button:focus,:host a:focus{border-color:var(--color-border) !important}:host button.large,:host a.large{padding:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px)}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 10px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 2px);min-height:calc(var(--base-spacing) * 8px)}:host button cura-label,:host a cura-label{flex:1;text-align:var(--text-align, \"left\")}:host button .button-container,:host a .button-container{display:flex;align-items:center;opacity:1;transition:opacity 0.2s linear;position:relative;flex-direction:row !important}:host button .button-container .badge-number,:host a .button-container .badge-number{margin-left:10px}:host button.icon-right .button-container,:host a.icon-right .button-container{flex-direction:row-reverse}:host button.justify .button-container,:host a.justify .button-container{width:100%}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host button.small.icon-left cura-icon,:host a.medium.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2px)}:host button.medium.icon-right cura-icon,:host button.small.icon-right cura-icon,:host a.medium.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2px)}:host button.selected,:host a.selected{cursor:pointer;background-color:var(--color-select);border-color:var(--color-select)}:host button.selected:not(.disabled):hover,:host a.selected:not(.disabled):hover{background-color:var(--color-border-hover-pressed);border-color:var(--color-border-hover-pressed)}:host button.selected:focus,:host a.selected:focus{border-color:var(--color-select-focus) !important}:host button.selected.disabled,:host a.selected.disabled{background-color:var(--color-disable-select);border-color:var(--color-disable-select)}:host button.disabled,:host a.disabled{cursor:not-allowed;background-color:var(--neutral-white-primary-darker);border-color:var(--color-border-disable-unselect)}";
|
|
3329
3448
|
var CuraButtonSelectStyle0 = curaButtonSelectCss;
|
|
3330
3449
|
|
|
3331
|
-
class
|
|
3450
|
+
class CuraButtonSelect {
|
|
3332
3451
|
constructor(hostRef) {
|
|
3333
3452
|
registerInstance(this, hostRef);
|
|
3334
3453
|
this.onclick = createEvent(this, "onclick", 7);
|
|
3335
3454
|
this.theme = window.CuraAPI.theme;
|
|
3336
|
-
this.size = 'medium';
|
|
3337
|
-
this.disabled = false;
|
|
3338
3455
|
this.selected = false;
|
|
3339
|
-
this.
|
|
3340
|
-
this.
|
|
3456
|
+
this.iconName = undefined;
|
|
3457
|
+
this.size = 'medium';
|
|
3458
|
+
this.counter = undefined;
|
|
3459
|
+
this.disabled = undefined;
|
|
3341
3460
|
this.background = 'light';
|
|
3342
|
-
this.
|
|
3461
|
+
this.color = 'primary';
|
|
3462
|
+
this.iconPosition = undefined;
|
|
3343
3463
|
this.hovered = false;
|
|
3344
3464
|
this.styles = {};
|
|
3345
3465
|
}
|
|
3346
3466
|
setColors() {
|
|
3347
3467
|
const colors = [
|
|
3348
|
-
{ name: '--color-
|
|
3349
|
-
{ name: '--color-
|
|
3350
|
-
{ name: '--color-
|
|
3351
|
-
{ name: '--
|
|
3352
|
-
{ name: '--
|
|
3353
|
-
{ name: '--
|
|
3468
|
+
{ name: '--color-border', thema: this.background === 'light' ? `${this.color}-darker` : 'neutral-white' },
|
|
3469
|
+
{ name: '--color-border-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-light` },
|
|
3470
|
+
{ name: '--color-background-hover', thema: this.background === 'light' ? `${this.color}-light` : `${this.color}-dark` },
|
|
3471
|
+
{ name: '--color-select', thema: this.background === 'light' ? `${this.color}-base` : 'neutral-white' },
|
|
3472
|
+
{ name: '--color-select-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-lighter` },
|
|
3473
|
+
{ name: '--color-select-focus', thema: this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter` },
|
|
3474
|
+
{ name: '--color-disable-select', thema: this.background === 'light' ? 'neutral-white' : 'neutral-black' },
|
|
3475
|
+
{ name: '--color-border-disable-unselect', thema: 'neutral-dark' },
|
|
3476
|
+
{ name: '--color-counter-disabled', thema: this.background === 'light' ? 'neutral-pale' : 'neutral-black' },
|
|
3477
|
+
{ name: '--color-counter', thema: !this.disabled && 'primary-lighter' },
|
|
3354
3478
|
];
|
|
3355
|
-
colors.forEach(color =>
|
|
3356
|
-
|
|
3357
|
-
});
|
|
3479
|
+
colors.forEach(color => (this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema)));
|
|
3480
|
+
this.styles = Object.assign({}, this.styles);
|
|
3358
3481
|
}
|
|
3359
|
-
|
|
3360
|
-
|
|
3361
|
-
|
|
3362
|
-
|
|
3363
|
-
this.
|
|
3364
|
-
|
|
3365
|
-
|
|
3366
|
-
|
|
3367
|
-
this.styles['--primary-base'] = this.theme.colors.getColor("primary-base");
|
|
3368
|
-
this.styles['--info-base'] = this.theme.colors.getColor("info-base");
|
|
3482
|
+
getClasses() {
|
|
3483
|
+
var _a;
|
|
3484
|
+
const classes = {};
|
|
3485
|
+
classes[`${(_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase()}`] = true;
|
|
3486
|
+
classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
|
|
3487
|
+
classes['disabled'] = this.disabled;
|
|
3488
|
+
classes['selected'] = this.selected;
|
|
3489
|
+
return classes;
|
|
3369
3490
|
}
|
|
3370
3491
|
connectedCallback() {
|
|
3371
|
-
this.
|
|
3492
|
+
this.weights = window.CuraAPI.theme.fonts.getWeights();
|
|
3493
|
+
this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
|
|
3494
|
+
this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
|
|
3495
|
+
this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
|
|
3496
|
+
this.styles['--font-weight-medium'] = this.weights.medium;
|
|
3372
3497
|
this.setColors();
|
|
3373
3498
|
}
|
|
3499
|
+
getLabelFontColor() {
|
|
3500
|
+
if (this.disabled)
|
|
3501
|
+
return 'neutral-dark';
|
|
3502
|
+
if (this.background === 'dark') {
|
|
3503
|
+
return this.selected ? 'neutral-black' : 'neutral-white';
|
|
3504
|
+
}
|
|
3505
|
+
if (this.background === 'light') {
|
|
3506
|
+
return this.selected ? 'neutral-white' : 'neutral-black';
|
|
3507
|
+
}
|
|
3508
|
+
}
|
|
3509
|
+
getColorCounter() {
|
|
3510
|
+
if (this.background === 'dark' && this.disabled) {
|
|
3511
|
+
return !this.selected ? 'neutral-black' : 'neutral-dark';
|
|
3512
|
+
}
|
|
3513
|
+
if (this.background === 'light' && this.disabled) {
|
|
3514
|
+
return 'neutral-pale';
|
|
3515
|
+
}
|
|
3516
|
+
return `${this.color}-lighter`;
|
|
3517
|
+
}
|
|
3518
|
+
getColorBagdeNumber() {
|
|
3519
|
+
if (this.background === 'dark' && this.disabled) {
|
|
3520
|
+
return this.selected ? 'neutral-black' : 'neutral-dark';
|
|
3521
|
+
}
|
|
3522
|
+
if (this.background === 'light' && this.disabled) {
|
|
3523
|
+
return 'neutral-medium';
|
|
3524
|
+
}
|
|
3525
|
+
return `${this.color}-darker`;
|
|
3526
|
+
}
|
|
3527
|
+
getIcon() {
|
|
3528
|
+
const iconSize = this.size === 'large' ? 20 : 16;
|
|
3529
|
+
if (this.iconPosition === 'right') {
|
|
3530
|
+
return;
|
|
3531
|
+
}
|
|
3532
|
+
return hAsync("cura-icon", { name: this.iconName, size: iconSize, color: this.getLabelFontColor() });
|
|
3533
|
+
}
|
|
3534
|
+
getCounter() {
|
|
3535
|
+
return (hAsync("cura-badge-number", { color: this.getColorCounter(), class: "badge-number" }, hAsync("cura-label", { color: this.getColorBagdeNumber(), size: "small" }, this.counter)));
|
|
3536
|
+
}
|
|
3537
|
+
getCheckIconRight() {
|
|
3538
|
+
const iconSize = this.size === 'large' ? 20 : 16;
|
|
3539
|
+
return hAsync("cura-icon", { name: "check", size: iconSize, color: this.getLabelFontColor() });
|
|
3540
|
+
}
|
|
3374
3541
|
handleMouseEnter() {
|
|
3375
3542
|
if (this.disabled)
|
|
3376
3543
|
return;
|
|
@@ -3379,61 +3546,40 @@ class CuraButtonOutline {
|
|
|
3379
3546
|
handleMouseLeave() {
|
|
3380
3547
|
this.hovered = false;
|
|
3381
3548
|
}
|
|
3382
|
-
assignColor() {
|
|
3383
|
-
if (!this.selected)
|
|
3384
|
-
return 'primary-base';
|
|
3385
|
-
const fontcolor = this.disabled
|
|
3386
|
-
? (this.background === 'light' ? 'neutral-medium' : 'primary-base')
|
|
3387
|
-
: this.selected && this.fontcolor === "dark" ? 'neutral-black' : "neutral-purewhite";
|
|
3388
|
-
return fontcolor;
|
|
3389
|
-
}
|
|
3390
|
-
getIcon() {
|
|
3391
|
-
if (!this.selected)
|
|
3392
|
-
return;
|
|
3393
|
-
const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
|
|
3394
|
-
const iconName = this.hovered ? 'closeCircle' : 'checkCircle';
|
|
3395
|
-
return hAsync("cura-icon", { class: "button-icon", name: iconName, size: iconSize, color: this.assignColor() });
|
|
3396
|
-
}
|
|
3397
3549
|
handleClick(e) {
|
|
3398
3550
|
if (this.disabled)
|
|
3399
3551
|
e.preventDefault();
|
|
3400
3552
|
this.selected = !this.selected;
|
|
3401
3553
|
this.onclick.emit({ selected: this.selected });
|
|
3402
3554
|
}
|
|
3403
|
-
getClasses() {
|
|
3404
|
-
const classes = {};
|
|
3405
|
-
classes[`${this.size.toLowerCase()}`] = true;
|
|
3406
|
-
classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
|
|
3407
|
-
classes['disabled'] = this.disabled;
|
|
3408
|
-
classes['selected'] = this.selected;
|
|
3409
|
-
return classes;
|
|
3410
|
-
}
|
|
3411
3555
|
render() {
|
|
3412
|
-
|
|
3556
|
+
const labelSize = labelSizes[this.size] || labelSizes['default'];
|
|
3557
|
+
return (hAsync(Host, { key: '8b766a3e23c2af13a47d113884047d19717702f2' }, hAsync("button", { key: '90b57f260baa61de7c73e09965e190cd13eb62e1', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: e => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("div", { key: 'f318438fa59f43846ce5043e4ee290faf3cf05d4', class: "button-container" }, this.iconName ? this.getIcon() : null, hAsync("cura-label", { key: '2d069740c62b32dd3aa0fd74bdafb951d8deb73b', class: "label", size: labelSize, lineHeight: "0%", color: this.getLabelFontColor(), weight: "regular" }, hAsync("slot", { key: 'e71e072d1dd91bbbafa939181cc22ba7b7c6189e' })), this.counter ? this.getCounter() : null, this.iconPosition === 'right' && this.selected ? this.getCheckIconRight() : null))));
|
|
3413
3558
|
}
|
|
3559
|
+
get host() { return getElement(this); }
|
|
3414
3560
|
static get watchers() { return {
|
|
3415
|
-
"background": ["setColors"
|
|
3416
|
-
"color": ["setColors"]
|
|
3417
|
-
"fontcolor": ["setColors", "assignColor"]
|
|
3561
|
+
"background": ["setColors"],
|
|
3562
|
+
"color": ["setColors"]
|
|
3418
3563
|
}; }
|
|
3419
3564
|
static get style() { return CuraButtonSelectStyle0; }
|
|
3420
3565
|
static get cmpMeta() { return {
|
|
3421
3566
|
"$flags$": 9,
|
|
3422
3567
|
"$tagName$": "cura-button-select",
|
|
3423
3568
|
"$members$": {
|
|
3569
|
+
"selected": [1540],
|
|
3570
|
+
"iconName": [1537, "icon-name"],
|
|
3424
3571
|
"size": [513],
|
|
3572
|
+
"counter": [1544],
|
|
3425
3573
|
"disabled": [516],
|
|
3426
|
-
"selected": [516],
|
|
3427
|
-
"iconPosition": [513, "icon-position"],
|
|
3428
|
-
"color": [1],
|
|
3429
3574
|
"background": [1],
|
|
3430
|
-
"
|
|
3575
|
+
"color": [1],
|
|
3576
|
+
"iconPosition": [513, "icon-position"],
|
|
3431
3577
|
"hovered": [32],
|
|
3432
3578
|
"styles": [32]
|
|
3433
3579
|
},
|
|
3434
3580
|
"$listeners$": undefined,
|
|
3435
3581
|
"$lazyBundleId$": "-",
|
|
3436
|
-
"$attrsToReflect$": [["size", "size"], ["
|
|
3582
|
+
"$attrsToReflect$": [["selected", "selected"], ["iconName", "icon-name"], ["size", "size"], ["counter", "counter"], ["disabled", "disabled"], ["iconPosition", "icon-position"]]
|
|
3437
3583
|
}; }
|
|
3438
3584
|
}
|
|
3439
3585
|
|
|
@@ -3524,7 +3670,7 @@ class CuraButtonTransparent {
|
|
|
3524
3670
|
render() {
|
|
3525
3671
|
const symbolColor = this.getSymbolColor();
|
|
3526
3672
|
const labelSize = labelSizes[this.size] || labelSizes["default"];
|
|
3527
|
-
return (hAsync(Host, { key: '
|
|
3673
|
+
return (hAsync(Host, { key: '60ab1e67798d35b9bb391ad491e4a9e6f3bc123f' }, this.href ? (hAsync("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: symbolColor }))) : (hAsync("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, hAsync("span", { class: "button-container" }, this.getIcon(), hAsync("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, hAsync("slot", null))), hAsync("cura-loader-circle", { size: this.size, color: symbolColor })))));
|
|
3528
3674
|
}
|
|
3529
3675
|
static get formAssociated() { return true; }
|
|
3530
3676
|
static get watchers() { return {
|
|
@@ -7122,7 +7268,7 @@ var locale = {
|
|
|
7122
7268
|
};
|
|
7123
7269
|
var ptBR = locale;
|
|
7124
7270
|
|
|
7125
|
-
const curaCalendarCss = ":host{display:block;width:var(--width)}:host .calendar{display:flex;flex-direction:column;gap:5px;width:var(--width);
|
|
7271
|
+
const curaCalendarCss = ":host{display:block;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);margin:0 auto}:host .calendar{display:flex;flex-direction:column;gap:5px;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);border-radius:4px;overflow:hidden;background:#fff;font-family:var(--font-family)}:host .calendar.embedded{border:2px solid var(--neutral-light);padding:0px 12px 12px 12px}:host .calendar.floating{box-shadow:0 4px 8px var(--neutral-light)}:host .header{position:relative;padding:12px 0}:host .header::after{content:\"\";position:absolute;bottom:0;left:2px;right:2px;border-bottom:2px dotted var(--neutral-light)}:host .month-year{display:flex;padding:12px 8px;justify-content:space-between;align-self:stretch}:host .month-year.dropdown{padding:0%}:host .select{display:flex;padding:7px 10px 0px;justify-content:center;align-items:center;gap:6px;flex:1 0 0}:host .drop-month{display:flex;max-width:118px;padding:0px;align-items:flex-start;gap:0px;flex:1 0 0}:host .drop-year{display:flex;min-width:80px;max-width:85px;padding:0px;align-items:flex-start;gap:0px;flex:1 0 0}:host .days-of-week{display:flex;height:30px;padding:4px;justify-content:center;align-items:center;gap:4px;flex-shrink:0}:host .day{flex:1;text-align:center}:host .dates{display:flex;flex-wrap:wrap;align-items:center;align-self:stretch;gap:0}:host .icon{cursor:pointer;position:relative;overflow:hidden;border-radius:50%}:host .icon.dropdown{margin-top:10px}:host .icon::before{content:\"\";position:absolute;border-radius:50%;top:50%;left:50%;width:20px;height:20px;background:var(--accent-base);transform:translate(-50%, -50%) scale(0);transition:transform 0.2s ease}:host .icon:active::before{transform:translate(-50%, -50%) scale(1)}:host .icon:active{transform:scale(1)}:host .collapsed-container{text-align:center;position:relative;display:flex;align-items:center;justify-content:center;padding-top:10px}:host .collapsed-container::before{content:\"\";position:absolute;bottom:0;top:0;left:2px;right:2px;border-top:2px dotted var(--neutral-light)}:host .date{display:flex;justify-content:center;align-items:center;height:auto;width:14.2857142857%;aspect-ratio:1;font-size:14px;cursor:pointer;position:relative;box-sizing:border-box;text-align:center;flex-shrink:0}:host .date.today{border:2px solid var(--primary-darker);border-radius:50%;color:var(--primary-darker)}:host .date.selected,:host .date.default-dates{color:var(--neutral-black) !important;background:var(--accent-base);border-radius:50%;border:none}:host .date.invalid{color:var(--neutral-dark) !important;cursor:not-allowed}:host .date.invalid:hover{background:none;box-shadow:none}:host .date.valid{color:var(--primary-darker);font-weight:var(--font-weight-bold)}:host .date.range.start{border-radius:50% 0 0 50%;color:var(--primary-darker) !important;background:var(--accent-base)}:host .date.range.interval{border-radius:0;background-color:var(--accent-light);color:var(--neutral-black)}:host .date.range.interval.today{border:none}:host .date.range.end{border-radius:0 50% 50% 0;color:var(--primary-darker) !important;background:var(--accent-base)}:host .date:hover{background:var(--accent-light);border-radius:50%;color:var(--neutral-black)}:host select,:host input{width:60px;font-size:16px;box-shadow:0 2px 2px var(--neutral-black);padding:5px;border-radius:4px;border:1px solid #ccc;background:#f7f7f7}.teste{width:100%}";
|
|
7126
7272
|
var CuraCalendarStyle0 = curaCalendarCss;
|
|
7127
7273
|
|
|
7128
7274
|
class CuraCalendar {
|
|
@@ -7133,7 +7279,9 @@ class CuraCalendar {
|
|
|
7133
7279
|
this.weights = this.theme.fonts.getWeights();
|
|
7134
7280
|
this.optionsLocale = { 'pt-BR': ptBR, 'en-US': enAU };
|
|
7135
7281
|
this.period = null;
|
|
7136
|
-
this.width = '
|
|
7282
|
+
this.width = '268px';
|
|
7283
|
+
this.minWidth = '268px';
|
|
7284
|
+
this.maxWidth = '400px';
|
|
7137
7285
|
this.mode = 'single';
|
|
7138
7286
|
this.dateFormat = 'yyyy-MM-dd';
|
|
7139
7287
|
this.locale = 'pt-BR';
|
|
@@ -7141,9 +7289,13 @@ class CuraCalendar {
|
|
|
7141
7289
|
this.disable = [];
|
|
7142
7290
|
this.enable = [];
|
|
7143
7291
|
this.defaultDate = [];
|
|
7292
|
+
this.customDates = [];
|
|
7144
7293
|
this.limitRange = null;
|
|
7145
|
-
this.disablePassDates =
|
|
7294
|
+
this.disablePassDates = undefined;
|
|
7295
|
+
this.disableFutureDates = undefined;
|
|
7146
7296
|
this.collapsed = null;
|
|
7297
|
+
this.floating = undefined;
|
|
7298
|
+
this.embedded = undefined;
|
|
7147
7299
|
this.currentDate = new Date();
|
|
7148
7300
|
this.selectedDates = [];
|
|
7149
7301
|
this.rangeStart = null;
|
|
@@ -7153,8 +7305,8 @@ class CuraCalendar {
|
|
|
7153
7305
|
this.styles = {};
|
|
7154
7306
|
}
|
|
7155
7307
|
connectedCallback() {
|
|
7156
|
-
this.initializeDefaultDates();
|
|
7157
7308
|
this.setFontProperties();
|
|
7309
|
+
this.initializeDefaultDates();
|
|
7158
7310
|
const colors = [
|
|
7159
7311
|
{ name: '--accent-base', theme: 'accent-base' },
|
|
7160
7312
|
{ name: '--accent-light', theme: 'accent-light' },
|
|
@@ -7163,7 +7315,7 @@ class CuraCalendar {
|
|
|
7163
7315
|
{ name: '--neutral-dark', theme: 'neutral-dark' },
|
|
7164
7316
|
{ name: '--neutral-light', theme: 'neutral-light' },
|
|
7165
7317
|
];
|
|
7166
|
-
colors.forEach(color => this.styles = Object.assign(Object.assign({}, this.styles), { [color.name]: this.theme.colors.getColor(color.theme) }));
|
|
7318
|
+
colors.forEach(color => (this.styles = Object.assign(Object.assign({}, this.styles), { [color.name]: this.theme.colors.getColor(color.theme) })));
|
|
7167
7319
|
}
|
|
7168
7320
|
setFontProperties() {
|
|
7169
7321
|
this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
|
|
@@ -7177,22 +7329,31 @@ class CuraCalendar {
|
|
|
7177
7329
|
* Initialize the selected dates based on defaultDate and mode.
|
|
7178
7330
|
*/
|
|
7179
7331
|
initializeDefaultDates() {
|
|
7332
|
+
if (typeof this.defaultDate === 'string') {
|
|
7333
|
+
const parsedDefaultDate = JSON.parse(this.defaultDate || '[]');
|
|
7334
|
+
if (typeof parsedDefaultDate === 'string') {
|
|
7335
|
+
this.defaultDate = [parsedDefaultDate];
|
|
7336
|
+
}
|
|
7337
|
+
else {
|
|
7338
|
+
this.defaultDate = parsedDefaultDate;
|
|
7339
|
+
}
|
|
7340
|
+
}
|
|
7180
7341
|
this.defaultDates = this.expandDateRanges(this.defaultDate);
|
|
7181
7342
|
}
|
|
7182
7343
|
/**
|
|
7183
|
-
|
|
7184
|
-
|
|
7185
|
-
|
|
7186
|
-
|
|
7344
|
+
* Get the locale for the calendar.
|
|
7345
|
+
*
|
|
7346
|
+
* @returns {Locale} The locale object.
|
|
7347
|
+
*/
|
|
7187
7348
|
determineLocale() {
|
|
7188
7349
|
return this.optionsLocale[this.locale] || this.locale;
|
|
7189
7350
|
}
|
|
7190
7351
|
/**
|
|
7191
|
-
|
|
7192
|
-
|
|
7193
|
-
|
|
7194
|
-
|
|
7195
|
-
|
|
7352
|
+
* Check if a date is within the valid period.
|
|
7353
|
+
*
|
|
7354
|
+
* @param {Date} date - The date to check.
|
|
7355
|
+
* @returns {boolean} Whether the date is valid.
|
|
7356
|
+
*/
|
|
7196
7357
|
isDateInValidPeriod(date) {
|
|
7197
7358
|
if (this.period === null) {
|
|
7198
7359
|
return true;
|
|
@@ -7228,6 +7389,8 @@ class CuraCalendar {
|
|
|
7228
7389
|
today.setHours(0, 0, 0, 0);
|
|
7229
7390
|
if (this.disablePassDates)
|
|
7230
7391
|
return isBefore(date, today);
|
|
7392
|
+
if (this.disableFutureDates)
|
|
7393
|
+
return isAfter(date, today);
|
|
7231
7394
|
if (this.disable === null)
|
|
7232
7395
|
return false;
|
|
7233
7396
|
return this.isDateInList(this.expandDateRanges(this.disable), date);
|
|
@@ -7244,12 +7407,12 @@ class CuraCalendar {
|
|
|
7244
7407
|
return this.isDateInList(this.expandDateRanges(this.enable), date);
|
|
7245
7408
|
}
|
|
7246
7409
|
/**
|
|
7247
|
-
|
|
7248
|
-
|
|
7249
|
-
|
|
7250
|
-
|
|
7251
|
-
|
|
7252
|
-
|
|
7410
|
+
* Checks if a date is in the provided list of dates.
|
|
7411
|
+
*
|
|
7412
|
+
* @param {Date[]} dates - The list of dates to check against.
|
|
7413
|
+
* @param {Date} date - The date to check.
|
|
7414
|
+
* @returns {boolean} Whether the date is in the list.
|
|
7415
|
+
*/
|
|
7253
7416
|
isDateInList(dates, date) {
|
|
7254
7417
|
return dates.some(d => isSameDay(d, date));
|
|
7255
7418
|
}
|
|
@@ -7304,6 +7467,8 @@ class CuraCalendar {
|
|
|
7304
7467
|
* @returns {Date[]} An array of individual dates.
|
|
7305
7468
|
*/
|
|
7306
7469
|
expandDateRanges(dates) {
|
|
7470
|
+
if (!dates)
|
|
7471
|
+
return [];
|
|
7307
7472
|
return dates.flatMap(date => {
|
|
7308
7473
|
if (typeof date === 'string')
|
|
7309
7474
|
return isValid(parseISO(date)) ? [parseISO(date)] : [];
|
|
@@ -7330,7 +7495,7 @@ class CuraCalendar {
|
|
|
7330
7495
|
*/
|
|
7331
7496
|
selectMultiplesDate(date) {
|
|
7332
7497
|
if (!this.isDateSelected(date) || !this.isDateInDefaultSelection(date))
|
|
7333
|
-
return this.selectedDates = [...this.selectedDates, date];
|
|
7498
|
+
return (this.selectedDates = [...this.selectedDates, date]);
|
|
7334
7499
|
this.selectedDates = this.removeDateFromSelection(this.selectedDates, date);
|
|
7335
7500
|
this.defaultDates = this.removeDateFromSelection(this.defaultDates, date);
|
|
7336
7501
|
}
|
|
@@ -7365,16 +7530,16 @@ class CuraCalendar {
|
|
|
7365
7530
|
const selectionHandlers = {
|
|
7366
7531
|
single: this.selectSingleDate.bind(this),
|
|
7367
7532
|
multiple: this.selectMultiplesDate.bind(this),
|
|
7368
|
-
range: this.selectDateRange.bind(this)
|
|
7533
|
+
range: this.selectDateRange.bind(this),
|
|
7369
7534
|
};
|
|
7370
7535
|
selectionHandlers[this.mode](date);
|
|
7371
7536
|
this.onchangeday.emit({ days: [...this.defaultDates, ...this.selectedDates].filter(d => this.isDateInValidPeriod(d)) });
|
|
7372
7537
|
}
|
|
7373
7538
|
/**
|
|
7374
|
-
|
|
7375
|
-
|
|
7376
|
-
|
|
7377
|
-
|
|
7539
|
+
* Get the days of the week.
|
|
7540
|
+
*
|
|
7541
|
+
* @returns {string[]} An array of abbreviated day names.
|
|
7542
|
+
*/
|
|
7378
7543
|
fetchWeekDays() {
|
|
7379
7544
|
const start = startOfWeek(new Date(2021, 0, 3), { locale: this.determineLocale() });
|
|
7380
7545
|
const end = endOfWeek(new Date(2021, 0, 3), { locale: this.determineLocale() });
|
|
@@ -7390,7 +7555,7 @@ class CuraCalendar {
|
|
|
7390
7555
|
this.fetchDaysOfWeek();
|
|
7391
7556
|
}
|
|
7392
7557
|
else
|
|
7393
|
-
|
|
7558
|
+
this.fetchDaysOfMonth();
|
|
7394
7559
|
this.collapsed = false;
|
|
7395
7560
|
}
|
|
7396
7561
|
showColapsedCalendar() {
|
|
@@ -7422,20 +7587,16 @@ class CuraCalendar {
|
|
|
7422
7587
|
const prevMonthEnd = endOfMonth(prevMonthStart);
|
|
7423
7588
|
const daysInPrevMonth = eachDayOfInterval({
|
|
7424
7589
|
start: subDays(prevMonthEnd, getDay(start)),
|
|
7425
|
-
end: prevMonthEnd
|
|
7590
|
+
end: prevMonthEnd,
|
|
7426
7591
|
});
|
|
7427
7592
|
const nextMonthStart = startOfMonth(addMonths(end, 1));
|
|
7428
7593
|
const nextMonthEnd = endOfMonth(nextMonthStart);
|
|
7429
7594
|
const remainingDays = WEEKS_IN_CALENDAR_VIEW - getDay(end);
|
|
7430
7595
|
const daysInNextMonth = eachDayOfInterval({
|
|
7431
7596
|
start: nextMonthStart,
|
|
7432
|
-
end: addDays(nextMonthEnd, remainingDays)
|
|
7597
|
+
end: addDays(nextMonthEnd, remainingDays),
|
|
7433
7598
|
});
|
|
7434
|
-
const totalDays = [
|
|
7435
|
-
...daysInPrevMonth.slice(-getDay(start)),
|
|
7436
|
-
...daysIncurrentDate,
|
|
7437
|
-
...daysInNextMonth
|
|
7438
|
-
];
|
|
7599
|
+
const totalDays = [...daysInPrevMonth.slice(-getDay(start)), ...daysIncurrentDate, ...daysInNextMonth];
|
|
7439
7600
|
return totalDays.slice(0, DAYS_IN_CALENDAR_VIEW);
|
|
7440
7601
|
}
|
|
7441
7602
|
/**
|
|
@@ -7448,7 +7609,7 @@ class CuraCalendar {
|
|
|
7448
7609
|
const locale = this.determineLocale();
|
|
7449
7610
|
const months = eachMonthOfInterval({
|
|
7450
7611
|
start: startOfYear(new Date(currentYear, 0, 1)),
|
|
7451
|
-
end: new Date(currentYear, 11, 31)
|
|
7612
|
+
end: new Date(currentYear, 11, 31),
|
|
7452
7613
|
}).map(month => format(month, 'MMMM', { locale }));
|
|
7453
7614
|
const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
|
|
7454
7615
|
return {
|
|
@@ -7465,20 +7626,20 @@ class CuraCalendar {
|
|
|
7465
7626
|
return Array.from({ length: 100 }, (_, i) => currentYear - i);
|
|
7466
7627
|
}
|
|
7467
7628
|
/**
|
|
7468
|
-
|
|
7469
|
-
|
|
7470
|
-
|
|
7471
|
-
|
|
7629
|
+
* Get the color for the previous button.
|
|
7630
|
+
*
|
|
7631
|
+
* @returns {string} The color name for the previous button.
|
|
7632
|
+
*/
|
|
7472
7633
|
determinePrevButtonColor() {
|
|
7473
7634
|
const isPrevDisabled = isBefore(new Date(getYear(this.currentDate), getMonth(this.currentDate) - 1, 1), startOfMonth(new Date()));
|
|
7474
7635
|
return isPrevDisabled && 'primary-base';
|
|
7475
7636
|
}
|
|
7476
7637
|
/**
|
|
7477
|
-
|
|
7478
|
-
|
|
7479
|
-
|
|
7480
|
-
|
|
7481
|
-
|
|
7638
|
+
* Get the status of a given date, determining its position and interval status.
|
|
7639
|
+
*
|
|
7640
|
+
* @param {Date | null} date - The date to evaluate.
|
|
7641
|
+
* @returns {Object} An object containing the status flags for the date.
|
|
7642
|
+
*/
|
|
7482
7643
|
getDateStatus(date) {
|
|
7483
7644
|
const [startSelected, endSelected] = [this.selectedDates[0], this.selectedDates[this.selectedDates.length - 1]];
|
|
7484
7645
|
const [startDefault, endDefault] = [this.defaultDates[0], this.defaultDates[this.defaultDates.length - 1]];
|
|
@@ -7508,7 +7669,7 @@ class CuraCalendar {
|
|
|
7508
7669
|
isSelected,
|
|
7509
7670
|
isRange,
|
|
7510
7671
|
isDefault,
|
|
7511
|
-
isInterval
|
|
7672
|
+
isInterval,
|
|
7512
7673
|
};
|
|
7513
7674
|
}
|
|
7514
7675
|
/**
|
|
@@ -7518,7 +7679,7 @@ class CuraCalendar {
|
|
|
7518
7679
|
* @returns {Object} An object containing the CSS classes for the date.
|
|
7519
7680
|
*/
|
|
7520
7681
|
getClasses(date) {
|
|
7521
|
-
const classes = {
|
|
7682
|
+
const classes = { date: true };
|
|
7522
7683
|
if (date === null)
|
|
7523
7684
|
return classes;
|
|
7524
7685
|
const dateStatus = this.getDateStatus(date);
|
|
@@ -7541,14 +7702,35 @@ class CuraCalendar {
|
|
|
7541
7702
|
getHostCSSProperties() {
|
|
7542
7703
|
return {
|
|
7543
7704
|
'--width': this.width,
|
|
7705
|
+
'--min-width': this.minWidth,
|
|
7706
|
+
'--max-width': this.maxWidth,
|
|
7544
7707
|
};
|
|
7545
7708
|
}
|
|
7709
|
+
watchDefaultDatesArray() {
|
|
7710
|
+
this.selectedDates = this.customDates;
|
|
7711
|
+
}
|
|
7712
|
+
handleDefaultDateChange(newValue) {
|
|
7713
|
+
if (typeof newValue === 'string') {
|
|
7714
|
+
const parsedDefaultDate = JSON.parse(newValue || '[]');
|
|
7715
|
+
if (typeof parsedDefaultDate === 'string') {
|
|
7716
|
+
newValue = [parsedDefaultDate];
|
|
7717
|
+
}
|
|
7718
|
+
else {
|
|
7719
|
+
newValue = parsedDefaultDate;
|
|
7720
|
+
}
|
|
7721
|
+
}
|
|
7722
|
+
this.defaultDates = this.expandDateRanges(newValue);
|
|
7723
|
+
}
|
|
7546
7724
|
render() {
|
|
7547
7725
|
const { months } = this.fetchMonthNames();
|
|
7548
|
-
return (hAsync(Host, { key: '
|
|
7549
|
-
this.fetchDaysOfMonth().map((day, index) => (hAsync("div", { key: index, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))
|
|
7550
|
-
this.fetchDaysOfWeek().map((day, index) => (hAsync("div", { key: index, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))), this.collapsed !== null ? (this.collapsed ? (hAsync("div", { class:
|
|
7726
|
+
return (hAsync(Host, { key: '2167c17db3fcc20b3b9de3e8b4c071f78369d37e', style: this.getHostCSSProperties() }, hAsync("div", { key: 'e09c187cd19bc53cd9b4c592001c8de8bc30bdd7', class: `calendar ${this.floating ? 'floating' : ''} ${this.embedded ? 'embedded' : ''}`, style: this.styles }, hAsync("header", { key: 'c89688cd2b5e398364b3b0208eb01ae82aa7d808', class: "header" }, hAsync("div", { key: 'a18b029a7446791c87303e959c3c7ecd3bdead47', class: `month-year ${this.type === 'dropdown' && 'dropdown'}` }, hAsync("cura-icon", { key: '25532f4297827c6431fb9be4491894952cda1c8f', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "left", color: this.determinePrevButtonColor(), onClick: !this.collapsed ? () => this.updateCurrentMonth('prev') : () => this.updateCurrentWeek('prev') }), this.type === 'dropdown' ? (hAsync("div", { class: "select" }, hAsync("cura-select", { size: "small", class: "drop-month", mode: "transparent", value: months[getMonth(this.currentDate)], onSelected: e => this.onMonthDropdownChange(e) }, months.map((month, index) => (hAsync("cura-select-option", { size: "xsmall", key: index, value: month }, month)))), hAsync("cura-select", { size: "small", class: "drop-year", mode: "transparent", value: getYear(this.currentDate).toString(), onSelected: e => this.onYearDropdownChange(e) }, this.fetchYearList().map((year, index) => (hAsync("cura-select-option", { key: index, value: year.toString() }, year.toString())))))) : (hAsync("cura-label", { color: "neutral-black", size: "large" }, months[getMonth(this.currentDate)].slice(0, 3), ", ", getYear(this.currentDate))), hAsync("cura-icon", { key: '52d65856b6797a8ad185fdeb0bd40abee24cc95e', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "right", color: "primary-base", onClick: !this.collapsed ? () => this.updateCurrentMonth('next') : () => this.updateCurrentWeek('next') }))), hAsync("span", { key: '83afcab7b30fc4bdf3e02810dc911000c71a6d68', class: "days-of-week" }, this.fetchWeekDays().map((day, index) => (hAsync("cura-label", { class: "day", size: "xsmall", color: "neutral-black", weight: "bold", key: index }, day === 'sab' ? 'SÁB' : day.toLocaleUpperCase())))), hAsync("div", { key: 'f5b55f62ced251c9a77138492e77aeb6feb3e117', class: "dates" }, !this.collapsed
|
|
7727
|
+
? this.fetchDaysOfMonth().map((day, index) => (hAsync("div", { key: index, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))
|
|
7728
|
+
: this.fetchDaysOfWeek().map((day, index) => (hAsync("div", { key: index, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))), this.collapsed !== null ? (this.collapsed ? (hAsync("div", { class: "collapsed-container" }, hAsync("cura-button-transparent", { onClick: () => this.showNotColapsedCalendar(), size: "small", color: "primary", fontColor: "dark", iconName: "plusCircle" }, "Veja mais datas"))) : (hAsync("div", { class: "collapsed-container" }, hAsync("cura-button-transparent", { onClick: () => this.showColapsedCalendar(), size: "small", color: "primary", fontColor: "dark", iconName: "minusCircle" }, "Veja menos datas")))) : null)));
|
|
7551
7729
|
}
|
|
7730
|
+
static get watchers() { return {
|
|
7731
|
+
"customDates": ["watchDefaultDatesArray"],
|
|
7732
|
+
"defaultDate": ["handleDefaultDateChange"]
|
|
7733
|
+
}; }
|
|
7552
7734
|
static get style() { return CuraCalendarStyle0; }
|
|
7553
7735
|
static get cmpMeta() { return {
|
|
7554
7736
|
"$flags$": 9,
|
|
@@ -7556,16 +7738,22 @@ class CuraCalendar {
|
|
|
7556
7738
|
"$members$": {
|
|
7557
7739
|
"period": [513],
|
|
7558
7740
|
"width": [513],
|
|
7741
|
+
"minWidth": [513, "min-width"],
|
|
7742
|
+
"maxWidth": [513, "max-width"],
|
|
7559
7743
|
"mode": [513],
|
|
7560
7744
|
"dateFormat": [1537, "date-format"],
|
|
7561
7745
|
"locale": [513],
|
|
7562
7746
|
"type": [513],
|
|
7563
7747
|
"disable": [16],
|
|
7564
7748
|
"enable": [16],
|
|
7565
|
-
"defaultDate": [
|
|
7749
|
+
"defaultDate": [1537, "default-date"],
|
|
7750
|
+
"customDates": [16],
|
|
7566
7751
|
"limitRange": [514, "limit-range"],
|
|
7567
7752
|
"disablePassDates": [1540, "disable-pass-dates"],
|
|
7753
|
+
"disableFutureDates": [1540, "disable-future-dates"],
|
|
7568
7754
|
"collapsed": [1540],
|
|
7755
|
+
"floating": [1540],
|
|
7756
|
+
"embedded": [1540],
|
|
7569
7757
|
"currentDate": [32],
|
|
7570
7758
|
"selectedDates": [32],
|
|
7571
7759
|
"rangeStart": [32],
|
|
@@ -7576,7 +7764,7 @@ class CuraCalendar {
|
|
|
7576
7764
|
},
|
|
7577
7765
|
"$listeners$": undefined,
|
|
7578
7766
|
"$lazyBundleId$": "-",
|
|
7579
|
-
"$attrsToReflect$": [["period", "period"], ["width", "width"], ["mode", "mode"], ["dateFormat", "date-format"], ["locale", "locale"], ["type", "type"], ["limitRange", "limit-range"], ["disablePassDates", "disable-pass-dates"], ["collapsed", "collapsed"]]
|
|
7767
|
+
"$attrsToReflect$": [["period", "period"], ["width", "width"], ["minWidth", "min-width"], ["maxWidth", "max-width"], ["mode", "mode"], ["dateFormat", "date-format"], ["locale", "locale"], ["type", "type"], ["defaultDate", "default-date"], ["limitRange", "limit-range"], ["disablePassDates", "disable-pass-dates"], ["disableFutureDates", "disable-future-dates"], ["collapsed", "collapsed"], ["floating", "floating"], ["embedded", "embedded"]]
|
|
7580
7768
|
}; }
|
|
7581
7769
|
}
|
|
7582
7770
|
|
|
@@ -7619,7 +7807,7 @@ class CuraCard {
|
|
|
7619
7807
|
return classes;
|
|
7620
7808
|
}
|
|
7621
7809
|
render() {
|
|
7622
|
-
return (hAsync(Host, { key: '
|
|
7810
|
+
return (hAsync(Host, { key: '72140d7ae467677c7acbdb3ff45fa84c9fe60fce', role: this.href ? 'link' : 'div' }, this.href ? (hAsync("a", { class: this.getClasses(), target: this.target, style: this.styles, href: this.href }, hAsync("slot", null))) : (hAsync("div", { class: this.getClasses(), style: this.styles }, hAsync("slot", null)))));
|
|
7623
7811
|
}
|
|
7624
7812
|
static get style() { return CuraCardStyle0; }
|
|
7625
7813
|
static get cmpMeta() { return {
|
|
@@ -7655,7 +7843,7 @@ const formsSizes = {
|
|
|
7655
7843
|
},
|
|
7656
7844
|
};
|
|
7657
7845
|
|
|
7658
|
-
const curaCheckboxCss = "@charset \"UTF-8\";:host{display:block;width:fit-content;box-sizing:border-box}.container{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap)}.position.container{flex-direction:row}.position .label-wrapper{justify-content:end}.position .message{text-align:right}.position .label{order:1}.info{display:flex;flex-direction:column}.label-wrapper{display:flex;justify-content:start;align-items:center;gap:5px}.control{width:fit-content;cursor:pointer;position:relative}.checkbox{appearance:none;border:2px solid var(--neutral-base-neutral-medium);border-radius:4px;background:var(--neutral-black-neutral-purewhite);flex:1 0;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;box-sizing:border-box;width:var(--size);height:var(--size);flex:0 0 var(--size)}.icon{position:absolute;display:flex;opacity:0;transition:opacity 0.3s}.checkbox:focus{border-color:var(--info-base) !important}.disabled .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base);cursor:not-allowed}.disabled .checkbox:hover{border-color:var(--neutral-darker-neutral-base) !important}.disabled.checked .checkbox,.disabled.indeterminate .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base)}.disabled.checked .checkbox:hover,.disabled.indeterminate .checkbox:hover{border-color:var(--neutral-base-neutral-white);background:var(--primary-base-neutral-white)}.disabled .checkbox:focus{border-color:var(--neutral-darker-neutral-base) !important}.checked .checkbox
|
|
7846
|
+
const curaCheckboxCss = "@charset \"UTF-8\";:host{display:block;width:fit-content;box-sizing:border-box}.container{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap)}.position.container{flex-direction:row}.position .label-wrapper{justify-content:end}.position .message{text-align:right}.position .label{order:1}.info{display:flex;flex-direction:column}.label-wrapper{display:flex;justify-content:start;align-items:center;gap:5px}.control{width:fit-content;cursor:pointer;position:relative}.checkbox{appearance:none;border:2px solid var(--neutral-base-neutral-medium);border-radius:4px;background:var(--neutral-black-neutral-purewhite);flex:1 0;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;box-sizing:border-box;width:var(--size);height:var(--size);flex:0 0 var(--size)}.icon{position:absolute;display:flex;opacity:0;transition:opacity 0.3s}.checkbox:focus{border-color:var(--info-base) !important}.disabled .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base);cursor:not-allowed}.disabled .checkbox:hover{border-color:var(--neutral-darker-neutral-base) !important}.disabled.checked .checkbox,.disabled.indeterminate .checkbox{background:var(--neutral-black-neutral-white);border-color:var(--neutral-darker-neutral-base)}.disabled.checked .checkbox:hover,.disabled.indeterminate .checkbox:hover{border-color:var(--neutral-base-neutral-white);background:var(--primary-base-neutral-white)}.disabled .checkbox:focus{border-color:var(--neutral-darker-neutral-base) !important}.checked .checkbox{border-color:var(--color-dark);background:var(--color-base)}.checked .checkbox:hover{border-color:var(--color-base) !important;background:var(--color-light)}.indeterminate .checkbox{border-color:var(--color-base);background:var(--color-light)}.indeterminate .checkbox:hover{border-color:var(--color-dark) !important;background:var(--color-base)}.checked .icon,.indeterminate .icon{opacity:1}:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover{border-color:var(--neutral-purewhite-neutral-dark)}.success.dark .checkbox{background:var(--neutral-black)}.success .checkbox{border-color:var(--success-base);background:var(--success-lighter)}.success .checkbox:hover{border-color:var(--success-base) !important}.success.checked .checkbox{border-color:var(--success-dark-base);background:var(--success-base-lighter)}.success.checked .checkbox:hover{border-color:var(--success-dark-base)}.error.dark .checkbox{background:var(--neutral-black)}.error .checkbox{border-color:var(--error-base);background:var(--error-lighter)}.error .checkbox:hover{border-color:var(--error-base) !important}.error.checked .checkbox{border-color:var(--error-dark-base);background:var(--error-base-lighter)}.error.checked .checkbox:hover{border-color:var(--error-dark-base)}input{appearance:none;-webkit-appearance:none;-moz-appearance:none}";
|
|
7659
7847
|
var CuraCheckboxStyle0 = curaCheckboxCss;
|
|
7660
7848
|
|
|
7661
7849
|
class CuraCheckbox {
|
|
@@ -7814,7 +8002,7 @@ class CuraCheckbox {
|
|
|
7814
8002
|
return hAsync("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
|
|
7815
8003
|
}
|
|
7816
8004
|
render() {
|
|
7817
|
-
return (hAsync(Host, { key: '
|
|
8005
|
+
return (hAsync(Host, { key: '00334ec058edf0849cf30c65d2f9e2e2e051de96' }, hAsync("div", { key: 'd7c7857afa27a033f0642369717eb3be406f9f27', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, hAsync("div", { key: 'aed0ec8155b2a5c0e3000b416afd6c5455c55f0e', class: "info" }, hAsync("div", { key: 'd90166401c6946c508d2cace62976c2e7374689f', class: "label-wrapper" }, hAsync("cura-label", { key: '7c0c5cc650db37f09127050333f49c5f4b4c7dc6', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && hAsync("cura-paragraph", { key: '3c1cd2dcad221f4d93bde959ca33273270f0fe45', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), hAsync("cura-label", { key: '3fd01d993596f36da00b3acfeef02f2a28340eae', color: this.assignColor('message'), size: "xsmall", class: "message" }, hAsync("slot", { key: '2c106bd163a1b330a18061c0e99eb21c911d7da9' }))), hAsync("div", { key: '2286927b31856a224049693295caa9e037695749', class: 'checkbox', tabIndex: this.ontabindex }, hAsync("input", { key: '9bb8a436f1500d046a9b57972307cf5feff183d3', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
|
|
7818
8006
|
}
|
|
7819
8007
|
static get formAssociated() { return true; }
|
|
7820
8008
|
get host() { return getElement(this); }
|
|
@@ -7916,7 +8104,7 @@ class CuraDisplay {
|
|
|
7916
8104
|
return tags[`${this.level}`] || tags['default'];
|
|
7917
8105
|
}
|
|
7918
8106
|
render() {
|
|
7919
|
-
return (hAsync(Host, { key: '
|
|
8107
|
+
return (hAsync(Host, { key: 'bf5c1121ffd1debb9b5763acdde1c7244b4afcc3', style: this.hostCSSProperties() }, this.getHeadingTag()));
|
|
7920
8108
|
}
|
|
7921
8109
|
get host() { return getElement(this); }
|
|
7922
8110
|
static get watchers() { return {
|
|
@@ -7965,7 +8153,7 @@ class CuraDistance {
|
|
|
7965
8153
|
this.formatDistance();
|
|
7966
8154
|
}
|
|
7967
8155
|
render() {
|
|
7968
|
-
return (hAsync(Host, { key: '
|
|
8156
|
+
return (hAsync(Host, { key: '7027189b17f2ad1759f9d43bc5dbc9cbb1fe47cc' }, hAsync("div", { key: 'bc57ac9c32c0651469d4bd6ee75d0f97408fde34', class: "container", style: this.styles }, hAsync("cura-label", { key: '913db081273caf2e7d46d92b22e1988cf28ddeb3', size: 'xsmall', weight: 'bold', color: 'neutral-black' }, this.displayDistance, this.isThousandRounded ? 'K' : ''), hAsync("cura-label", { key: '4c327bd9d55466bb2d9c614d9aa0420e42da23ce', size: 'xsmall', weight: 'bold', color: 'neutral-dark' }, this.label))));
|
|
7969
8157
|
}
|
|
7970
8158
|
setCssProperties() {
|
|
7971
8159
|
this.styles = {
|
|
@@ -7992,7 +8180,7 @@ class CuraDistance {
|
|
|
7992
8180
|
}; }
|
|
7993
8181
|
}
|
|
7994
8182
|
|
|
7995
|
-
const curaDropdownSearchCss = ":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:
|
|
8183
|
+
const curaDropdownSearchCss = ":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;gap:4px;padding:12px 8px;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}.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}";
|
|
7996
8184
|
var CuraDropdownSearchStyle0 = curaDropdownSearchCss;
|
|
7997
8185
|
|
|
7998
8186
|
class CuraDropdownSearch {
|
|
@@ -8001,6 +8189,28 @@ class CuraDropdownSearch {
|
|
|
8001
8189
|
this.valueChanged = createEvent(this, "valueChanged", 7);
|
|
8002
8190
|
this.onselect = createEvent(this, "onselect", 7);
|
|
8003
8191
|
this.overlayElement = null;
|
|
8192
|
+
this.adjustInputPosition = () => {
|
|
8193
|
+
window.visualViewport.addEventListener('resize', () => {
|
|
8194
|
+
var _a;
|
|
8195
|
+
const isKeyboardOpen = window.innerHeight < window.screen.height * 0.8;
|
|
8196
|
+
const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
|
|
8197
|
+
if (dropdown) {
|
|
8198
|
+
if (isKeyboardOpen) {
|
|
8199
|
+
dropdown.style.position = 'absolute';
|
|
8200
|
+
dropdown.style.bottom = `${window.screen.height - window.innerHeight}px`;
|
|
8201
|
+
}
|
|
8202
|
+
else {
|
|
8203
|
+
dropdown.style.position = 'fixed';
|
|
8204
|
+
dropdown.style.bottom = '0';
|
|
8205
|
+
}
|
|
8206
|
+
}
|
|
8207
|
+
window.scroll({
|
|
8208
|
+
top: 0,
|
|
8209
|
+
left: 0,
|
|
8210
|
+
behavior: 'smooth',
|
|
8211
|
+
});
|
|
8212
|
+
});
|
|
8213
|
+
};
|
|
8004
8214
|
this.handleSlotChange = () => {
|
|
8005
8215
|
this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));
|
|
8006
8216
|
this.addClickListenersToOptions();
|
|
@@ -8040,6 +8250,7 @@ class CuraDropdownSearch {
|
|
|
8040
8250
|
}
|
|
8041
8251
|
}
|
|
8042
8252
|
};
|
|
8253
|
+
this.size = 'large';
|
|
8043
8254
|
this.status = 'default';
|
|
8044
8255
|
this.disabled = false;
|
|
8045
8256
|
this.name = undefined;
|
|
@@ -8084,6 +8295,7 @@ class CuraDropdownSearch {
|
|
|
8084
8295
|
componentDidRender() {
|
|
8085
8296
|
if (this.isDropdownOpen && this.isMobile) {
|
|
8086
8297
|
this.showOverlay();
|
|
8298
|
+
this.getDropdownSearchListHeight();
|
|
8087
8299
|
}
|
|
8088
8300
|
else {
|
|
8089
8301
|
this.removeOverlay();
|
|
@@ -8091,9 +8303,11 @@ class CuraDropdownSearch {
|
|
|
8091
8303
|
}
|
|
8092
8304
|
componentDidLoad() {
|
|
8093
8305
|
window.addEventListener('resize', this.handleResize);
|
|
8306
|
+
window.addEventListener('resize', this.adjustInputPosition);
|
|
8094
8307
|
}
|
|
8095
8308
|
disconnectedCallback() {
|
|
8096
8309
|
window.removeEventListener('resize', this.handleResize);
|
|
8310
|
+
window.removeEventListener('resize', this.adjustInputPosition);
|
|
8097
8311
|
}
|
|
8098
8312
|
showOverlay() {
|
|
8099
8313
|
if (!this.overlayElement) {
|
|
@@ -8126,6 +8340,7 @@ class CuraDropdownSearch {
|
|
|
8126
8340
|
this.updateOptionAttribute('hovered', this.hoveredIndex);
|
|
8127
8341
|
this.updateOptionAttribute('selected', this.hoveredIndex);
|
|
8128
8342
|
this.scrollIntoView();
|
|
8343
|
+
this.adjustInputPosition();
|
|
8129
8344
|
}
|
|
8130
8345
|
onSelectedOption(index) {
|
|
8131
8346
|
const selectedOption = this.options[index];
|
|
@@ -8182,14 +8397,14 @@ class CuraDropdownSearch {
|
|
|
8182
8397
|
return {
|
|
8183
8398
|
'dropdown-input-search': true,
|
|
8184
8399
|
'dropdown-open': this.isDropdownOpen,
|
|
8185
|
-
disabled: this.disabled,
|
|
8400
|
+
'disabled': this.disabled,
|
|
8186
8401
|
[this.status]: true,
|
|
8187
8402
|
};
|
|
8188
8403
|
}
|
|
8189
8404
|
getDropdownClasses() {
|
|
8190
8405
|
return {
|
|
8191
8406
|
'dropdown-search-list': true,
|
|
8192
|
-
'visible': this.options.length && this.isDropdownOpen ? true : false
|
|
8407
|
+
'visible': this.options.length && this.isDropdownOpen ? true : false,
|
|
8193
8408
|
};
|
|
8194
8409
|
}
|
|
8195
8410
|
hostCSSProperties() {
|
|
@@ -8197,11 +8412,21 @@ class CuraDropdownSearch {
|
|
|
8197
8412
|
'--dropdown-max-height': this.dropdownMaxHeight,
|
|
8198
8413
|
};
|
|
8199
8414
|
}
|
|
8415
|
+
handleOnFocus() {
|
|
8416
|
+
this.isDropdownOpen = true;
|
|
8417
|
+
}
|
|
8418
|
+
getDropdownSearchListHeight() {
|
|
8419
|
+
var _a;
|
|
8420
|
+
const dropdownInputSearchElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-input-search');
|
|
8421
|
+
if (dropdownInputSearchElement) {
|
|
8422
|
+
this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);
|
|
8423
|
+
}
|
|
8424
|
+
}
|
|
8200
8425
|
render() {
|
|
8201
8426
|
const isMobileDropdown = this.isMobile && this.isDropdownOpen;
|
|
8202
|
-
return (hAsync(Host, { key: '
|
|
8427
|
+
return (hAsync(Host, { key: '36a0df3dfbe9f164ccb41541fb5373b0e94c86bd', style: this.hostCSSProperties(), class: "dropdown-overlay" }, hAsync("div", { key: 'e17cf1eec89b0346f49f497ffc6e5ea272fcd3eb', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, hAsync("div", { key: 'eb33cc0c6abd4792cb18a4e55eaed913e4f75761', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (hAsync("cura-button-transparent", { key: 'd837a3a15a89a9bd14260a32e3e218a3f53a18b1', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), hAsync("cura-input-text", { key: 'c8a02959ee1d637fde64fbcd8be238b7562f0790', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => this.handleOnFocus(), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
|
|
8203
8428
|
this.handleOnBlur();
|
|
8204
|
-
}, placeholder: this.placeholder, size:
|
|
8429
|
+
}, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '9cc22d4cf269fee171456169b787be54a814189e', name: "helperText" }))), hAsync("div", { key: '4a9ce1710312984d2af67ac3a04df504183caaf6', id: "dropdown-search-list", class: this.getDropdownClasses() }, hAsync("slot", { key: 'afdeb4b938c3d6767e440f4b32316c45b2a5e86f', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
|
|
8205
8430
|
}
|
|
8206
8431
|
get host() { return getElement(this); }
|
|
8207
8432
|
static get watchers() { return {
|
|
@@ -8212,6 +8437,7 @@ class CuraDropdownSearch {
|
|
|
8212
8437
|
"$flags$": 9,
|
|
8213
8438
|
"$tagName$": "cura-dropdown-search",
|
|
8214
8439
|
"$members$": {
|
|
8440
|
+
"size": [1537],
|
|
8215
8441
|
"status": [513],
|
|
8216
8442
|
"disabled": [516],
|
|
8217
8443
|
"name": [513],
|
|
@@ -8234,7 +8460,7 @@ class CuraDropdownSearch {
|
|
|
8234
8460
|
},
|
|
8235
8461
|
"$listeners$": undefined,
|
|
8236
8462
|
"$lazyBundleId$": "-",
|
|
8237
|
-
"$attrsToReflect$": [["status", "status"], ["disabled", "disabled"], ["name", "name"], ["required", "required"], ["selected", "selected"], ["value", "value"], ["placeholder", "placeholder"], ["label", "label"], ["iconName", "icon-name"], ["dropdownMaxHeight", "dropdown-max-height"]]
|
|
8463
|
+
"$attrsToReflect$": [["size", "size"], ["status", "status"], ["disabled", "disabled"], ["name", "name"], ["required", "required"], ["selected", "selected"], ["value", "value"], ["placeholder", "placeholder"], ["label", "label"], ["iconName", "icon-name"], ["dropdownMaxHeight", "dropdown-max-height"]]
|
|
8238
8464
|
}; }
|
|
8239
8465
|
}
|
|
8240
8466
|
|
|
@@ -8280,12 +8506,12 @@ class CuraDropdownSearchOption {
|
|
|
8280
8506
|
}
|
|
8281
8507
|
}
|
|
8282
8508
|
render() {
|
|
8283
|
-
return (hAsync(Host, { key: '
|
|
8509
|
+
return (hAsync(Host, { key: 'a084adaf6f89be71c8d5dc141705e7a71af353bb', slot: "dropdown-search-option" }, hAsync("div", { key: '58ac361d8f16fdab8ef07d3be3f9c12a8c4b85ef', style: this.styles, class: {
|
|
8284
8510
|
"option-container": true,
|
|
8285
8511
|
hovered: this.selectable ? this.hovered : false,
|
|
8286
8512
|
selected: this.selected,
|
|
8287
8513
|
disabled: !this.selectable
|
|
8288
|
-
} }, hAsync("div", { key: '
|
|
8514
|
+
} }, hAsync("div", { key: '0a7f959582b45df5c30fbbd225fccfc93aa937f4', class: "content-container" }, hAsync("div", { key: '74b8a9626430847bf9dfb32d5188303427d2fd28', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, hAsync("slot", { key: '1dba6e28939841569f290c9fb18d3b7595bac06a', name: "image" }), hAsync("cura-heading", { key: 'f7722edfd7ab87f7d9bacf475d988a1e80af41ef', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, hAsync("slot", { key: 'db0385e5e3d2c450ba9a96d75e7913d2fe913d98' }))), hAsync("slot", { key: '734b467cfce5ce114b06a10e3a153723da7ad41d', name: "action" })))));
|
|
8289
8515
|
}
|
|
8290
8516
|
get hostElement() { return getElement(this); }
|
|
8291
8517
|
static get watchers() { return {
|
|
@@ -8316,7 +8542,7 @@ class CuraDropdownSearchOptionTitle {
|
|
|
8316
8542
|
registerInstance(this, hostRef);
|
|
8317
8543
|
}
|
|
8318
8544
|
render() {
|
|
8319
|
-
return (hAsync(Host, { key: '
|
|
8545
|
+
return (hAsync(Host, { key: 'e4929a8c5c1c1f11b3e51dc088b2dd506e1bdfa0', slot: "dropdown-search-option" }, hAsync("cura-label", { key: '5bb5406c11a39a6a587737cf99eb1d2deb2ea0da', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, hAsync("slot", { key: 'c781e560b512d5362370e9855551b3e088ffbec1' }))));
|
|
8320
8546
|
}
|
|
8321
8547
|
static get style() { return CuraDropdownSearchOptionTitleStyle0; }
|
|
8322
8548
|
static get cmpMeta() { return {
|
|
@@ -8329,7 +8555,7 @@ class CuraDropdownSearchOptionTitle {
|
|
|
8329
8555
|
}; }
|
|
8330
8556
|
}
|
|
8331
8557
|
|
|
8332
|
-
const curaHeadingCss = ":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:1.714em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}:host h1.bold-weight,:host h2.bold-weight,:host h3.bold-weight,:host h4.bold-weight,:host h5.bold-weight,:host h6.bold-weight{font-weight:var(--font-weight-medium)}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.071em;letter-spacing:-0.58px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.214em;line-height:calc(var(--line-height) + 20%)}:host h1.small.bold-weight,:host h1.small ::slotted(b),:host h1.small ::slotted(strong),:host h2.small.bold-weight,:host h2.small ::slotted(b),:host h2.small ::slotted(strong),:host h3.small.bold-weight,:host h3.small ::slotted(b),:host h3.small ::slotted(strong),:host h4.small.bold-weight,:host h4.small ::slotted(b),:host h4.small ::slotted(strong),:host h5.small.bold-weight,:host h5.small ::slotted(b),:host h5.small ::slotted(strong),:host h6.small.bold-weight,:host h6.small ::slotted(b),:host h6.small ::slotted(strong){font-weight:var(--font-weight-bold)}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.714em;font-weight:var(--font-weight-medium);letter-spacing:0.6px}:host h1.xsmall.bold-weight,:host h1.xsmall ::slotted(b),:host h1.xsmall ::slotted(strong),:host h2.xsmall.bold-weight,:host h2.xsmall ::slotted(b),:host h2.xsmall ::slotted(strong),:host h3.xsmall.bold-weight,:host h3.xsmall ::slotted(b),:host h3.xsmall ::slotted(strong),:host h4.xsmall.bold-weight,:host h4.xsmall ::slotted(b),:host h4.xsmall ::slotted(strong),:host h5.xsmall.bold-weight,:host h5.xsmall ::slotted(b),:host h5.xsmall ::slotted(strong),:host h6.xsmall.bold-weight,:host h6.xsmall ::slotted(b),:host h6.xsmall ::slotted(strong){font-weight:var(--font-weight-bold)}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.357em;letter-spacing:-0.66px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.357em}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.857em;line-height:calc(var(--line-height) + 3%);letter-spacing:0.72px}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2.5em;line-height:calc(var(--line-height) + 5%);letter-spacing:-0.82px}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.929em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.714em;line-height:calc(var(--line-height) + 30%);letter-spacing:0%}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:1em;line-height:calc(var(--line-height) + 12.857%);letter-spacing:0.28px}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-medium)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(abbr){color:var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}:host ::slotted(i)
|
|
8558
|
+
const curaHeadingCss = ":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:1.714em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}:host h1.bold-weight,:host h2.bold-weight,:host h3.bold-weight,:host h4.bold-weight,:host h5.bold-weight,:host h6.bold-weight{font-weight:var(--font-weight-medium)}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.071em;letter-spacing:-0.58px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.214em;line-height:calc(var(--line-height) + 20%)}:host h1.small.bold-weight,:host h1.small ::slotted(b),:host h1.small ::slotted(strong),:host h2.small.bold-weight,:host h2.small ::slotted(b),:host h2.small ::slotted(strong),:host h3.small.bold-weight,:host h3.small ::slotted(b),:host h3.small ::slotted(strong),:host h4.small.bold-weight,:host h4.small ::slotted(b),:host h4.small ::slotted(strong),:host h5.small.bold-weight,:host h5.small ::slotted(b),:host h5.small ::slotted(strong),:host h6.small.bold-weight,:host h6.small ::slotted(b),:host h6.small ::slotted(strong){font-weight:var(--font-weight-bold)}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.714em;font-weight:var(--font-weight-medium);letter-spacing:0.6px}:host h1.xsmall.bold-weight,:host h1.xsmall ::slotted(b),:host h1.xsmall ::slotted(strong),:host h2.xsmall.bold-weight,:host h2.xsmall ::slotted(b),:host h2.xsmall ::slotted(strong),:host h3.xsmall.bold-weight,:host h3.xsmall ::slotted(b),:host h3.xsmall ::slotted(strong),:host h4.xsmall.bold-weight,:host h4.xsmall ::slotted(b),:host h4.xsmall ::slotted(strong),:host h5.xsmall.bold-weight,:host h5.xsmall ::slotted(b),:host h5.xsmall ::slotted(strong),:host h6.xsmall.bold-weight,:host h6.xsmall ::slotted(b),:host h6.xsmall ::slotted(strong){font-weight:var(--font-weight-bold)}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.357em;letter-spacing:-0.66px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.357em}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.857em;line-height:calc(var(--line-height) + 3%);letter-spacing:0.72px}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2.5em;line-height:calc(var(--line-height) + 5%);letter-spacing:-0.82px}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.929em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.714em;line-height:calc(var(--line-height) + 30%);letter-spacing:0%}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:1em;line-height:calc(var(--line-height) + 12.857%);letter-spacing:0.28px}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-medium)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(abbr){color:var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}:host ::slotted(i){font-weight:var(--font-weight-medium)}:host ::slotted(em){color:var(--color-link);font-style:normal}";
|
|
8333
8559
|
var CuraHeadingStyle0 = curaHeadingCss;
|
|
8334
8560
|
|
|
8335
8561
|
class CuraHeading {
|
|
@@ -8370,17 +8596,18 @@ class CuraHeading {
|
|
|
8370
8596
|
};
|
|
8371
8597
|
}
|
|
8372
8598
|
hostCSSProperties() {
|
|
8599
|
+
const fontColor = this.color
|
|
8600
|
+
? this.theme.colors.getColor(this.color)
|
|
8601
|
+
: this.theme.fonts.getColor();
|
|
8373
8602
|
return {
|
|
8374
8603
|
'--margin-block': this.marginBlock,
|
|
8375
8604
|
'--font-size-base': this.fontSizeBase,
|
|
8376
|
-
'--line-height': this.lineHeight
|
|
8605
|
+
'--line-height': this.lineHeight,
|
|
8606
|
+
'--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),
|
|
8377
8607
|
};
|
|
8378
8608
|
}
|
|
8379
8609
|
setColors() {
|
|
8380
|
-
|
|
8381
|
-
? this.theme.colors.getColor(this.color)
|
|
8382
|
-
: this.theme.fonts.getColor();
|
|
8383
|
-
this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
|
|
8610
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
|
|
8384
8611
|
}
|
|
8385
8612
|
getHeadingTag() {
|
|
8386
8613
|
const tags = {
|
|
@@ -8395,7 +8622,7 @@ class CuraHeading {
|
|
|
8395
8622
|
return tags[`${this.level}`] || tags['default'];
|
|
8396
8623
|
}
|
|
8397
8624
|
render() {
|
|
8398
|
-
return (hAsync(Host, { key: '
|
|
8625
|
+
return (hAsync(Host, { key: '4a130c7453ba61027050fc8f4a5739cad34d1c0a', style: this.hostCSSProperties() }, this.getHeadingTag()));
|
|
8399
8626
|
}
|
|
8400
8627
|
get host() { return getElement(this); }
|
|
8401
8628
|
static get watchers() { return {
|
|
@@ -8472,7 +8699,7 @@ class CuraIcon {
|
|
|
8472
8699
|
this.host.style.setProperty(prop, value);
|
|
8473
8700
|
}
|
|
8474
8701
|
render() {
|
|
8475
|
-
return (hAsync(Host, { key: '
|
|
8702
|
+
return (hAsync(Host, { key: '0ab55b86ccb41c3be1c1a114c35c81d8488e12cc' }, hAsync("svg", { key: 'c787e2ff356af580215cef7c05225ef5ac716d21', version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, hAsync("use", { key: '71c4f67a6d50cd2112fcef7cbac7b506d662911e', xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
|
|
8476
8703
|
}
|
|
8477
8704
|
get host() { return getElement(this); }
|
|
8478
8705
|
static get watchers() { return {
|
|
@@ -8516,9 +8743,9 @@ class CuraIconsView {
|
|
|
8516
8743
|
this.sizes.unshift(this.sizes.pop());
|
|
8517
8744
|
}
|
|
8518
8745
|
render() {
|
|
8519
|
-
return (hAsync(Host, { key: '
|
|
8520
|
-
hAsync("div", { class: "size" }, hAsync("cura-icon", { name: this.selected, size: size }), hAsync("span", null, size)))), hAsync("div", { key: '
|
|
8521
|
-
hAsync("div", { class: "size" }, hAsync("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), hAsync("span", null, size))))), hAsync("div", { key: '
|
|
8746
|
+
return (hAsync(Host, { key: '8852f24d59f30c812ac2e05be38bba10bccb1fd8' }, hAsync("div", { key: '6b88398ca80b05a62681d7b6834d5d0f59d790fa', class: "iconDetail" }, hAsync("cura-heading", { key: '5b3cab1aa26adc1b1b09dc3f3f5c0bd2ac394f89', size: "small", "margin-block": "0 24px" }, "Icon: ", hAsync("b", { key: 'eb974ce78dd33e56cd2c6118c6c399f029660547' }, this.selected)), hAsync("div", { key: '46d600bbf0903861f5c982b0e73c4757447d0324', class: "iconSizes" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
|
|
8747
|
+
hAsync("div", { class: "size" }, hAsync("cura-icon", { name: this.selected, size: size }), hAsync("span", null, size)))), hAsync("div", { key: '973355e41f1a10405c8224461625215aedabe0e3', class: "iconSizes invert" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
|
|
8748
|
+
hAsync("div", { class: "size" }, hAsync("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), hAsync("span", null, size))))), hAsync("div", { key: 'acd2b60eb99238893fc97aa177e96f43a3c54bd1', class: "icons" }, iconsetdefaulticons.map(icon => hAsync("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, hAsync("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), hAsync("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon), !microIcons.includes(icon) ? '' :
|
|
8522
8749
|
hAsync("cura-paragraph", { color: 'success-dark', size: "xsmall", "margin-block": "0px", "line-height": '100%' }, "MICRO"))))));
|
|
8523
8750
|
}
|
|
8524
8751
|
static get style() { return CuraIconsViewStyle0; }
|
|
@@ -8534,6 +8761,208 @@ class CuraIconsView {
|
|
|
8534
8761
|
}; }
|
|
8535
8762
|
}
|
|
8536
8763
|
|
|
8764
|
+
const curaInputDateCss = ":host{display:block}.container{display:flex;flex-direction:column;position:relative}.container .calendar{padding:0px calc(var(--base-spacing) * 3px);margin-top:-8px;border-radius:0px 0px 4px 4px;border-top:0px;border-right:2px solid #D4D4D4;border-bottom:2px solid #D4D4D4;border-left:2px solid #D4D4D4;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));position:absolute;top:100%;z-index:10;display:none;opacity:0;pointer-events:none}.container .calendar.visible{box-sizing:border-box;display:block;opacity:1;pointer-events:auto;width:100%;background-color:#fff}";
|
|
8765
|
+
var CuraInputDateStyle0 = curaInputDateCss;
|
|
8766
|
+
|
|
8767
|
+
class CuraInputDate {
|
|
8768
|
+
constructor(hostRef) {
|
|
8769
|
+
registerInstance(this, hostRef);
|
|
8770
|
+
this.dateChange = createEvent(this, "dateChange", 7);
|
|
8771
|
+
this.statusInputChange = createEvent(this, "statusInputChange", 7);
|
|
8772
|
+
this.label = '';
|
|
8773
|
+
this.status = 'default';
|
|
8774
|
+
this.size = 'medium';
|
|
8775
|
+
this.name = '';
|
|
8776
|
+
this.helperText = undefined;
|
|
8777
|
+
this.enableRangeDates = undefined;
|
|
8778
|
+
this.disableFutureDates = undefined;
|
|
8779
|
+
this.disablePassDates = undefined;
|
|
8780
|
+
this.iconName = '';
|
|
8781
|
+
this.placeholder = null;
|
|
8782
|
+
this.styles = {};
|
|
8783
|
+
this.isCalendarVisible = false;
|
|
8784
|
+
this.dates = [];
|
|
8785
|
+
this.value = '';
|
|
8786
|
+
this.dateSettings = {
|
|
8787
|
+
placeholder: null,
|
|
8788
|
+
mask: 'date',
|
|
8789
|
+
mode: 'single',
|
|
8790
|
+
};
|
|
8791
|
+
}
|
|
8792
|
+
connectedCallback() {
|
|
8793
|
+
const { fonts, colors, spacing } = window.CuraAPI.theme;
|
|
8794
|
+
const weights = fonts.getWeights();
|
|
8795
|
+
this.styles = {
|
|
8796
|
+
'--base-spacing': spacing.getSpacing(),
|
|
8797
|
+
'--neutral-purewhite': colors.getColor('neutral-purewhite'),
|
|
8798
|
+
'--neutral-lighter': colors.getColor('neutral-lighter'),
|
|
8799
|
+
'--neutral-base': colors.getColor('neutral-base'),
|
|
8800
|
+
'--font-size': fonts.getSize(),
|
|
8801
|
+
'--font-color': fonts.getColor(),
|
|
8802
|
+
'--font-family': fonts.getFamily(),
|
|
8803
|
+
'--font-weight-regular': weights.regular,
|
|
8804
|
+
};
|
|
8805
|
+
}
|
|
8806
|
+
componentWillLoad() {
|
|
8807
|
+
this.updateDateSettings();
|
|
8808
|
+
}
|
|
8809
|
+
/**
|
|
8810
|
+
* Callback for form association
|
|
8811
|
+
*/
|
|
8812
|
+
formAssociatedCallback(form) {
|
|
8813
|
+
form.ariaLabel = this.label;
|
|
8814
|
+
}
|
|
8815
|
+
updateDateSettings() {
|
|
8816
|
+
const newSettings = this.getDateSettings(this.enableRangeDates);
|
|
8817
|
+
if (this.shouldUpdateDateSettings(newSettings)) {
|
|
8818
|
+
this.dateSettings = newSettings;
|
|
8819
|
+
}
|
|
8820
|
+
}
|
|
8821
|
+
getDateSettings(isRange) {
|
|
8822
|
+
return {
|
|
8823
|
+
placeholder: this.placeholder || (isRange ? 'dd/mm/aaaa - dd/mm/aaaa' : 'dd/mm/aaaa'),
|
|
8824
|
+
mask: isRange ? 'dateRange' : 'date',
|
|
8825
|
+
mode: isRange ? 'range' : 'single',
|
|
8826
|
+
};
|
|
8827
|
+
}
|
|
8828
|
+
shouldUpdateDateSettings(newSettings) {
|
|
8829
|
+
return this.dateSettings.placeholder !== newSettings.placeholder || this.dateSettings.mask !== newSettings.mask || this.dateSettings.mode !== newSettings.mode;
|
|
8830
|
+
}
|
|
8831
|
+
handleClick(ev) {
|
|
8832
|
+
if (this.el.contains(ev.target)) {
|
|
8833
|
+
return;
|
|
8834
|
+
}
|
|
8835
|
+
this.hideCalendar();
|
|
8836
|
+
}
|
|
8837
|
+
hideCalendar() {
|
|
8838
|
+
this.isCalendarVisible = false;
|
|
8839
|
+
}
|
|
8840
|
+
showCalendar() {
|
|
8841
|
+
this.isCalendarVisible = true;
|
|
8842
|
+
}
|
|
8843
|
+
handleInputDates(event) {
|
|
8844
|
+
const inputValue = event.target.value;
|
|
8845
|
+
const dateRangeRegex = /^(\d{2}\/\d{2}\/\d{4})\s*-\s*(\d{2}\/\d{2}\/\d{4})$/;
|
|
8846
|
+
const simpleDateRegex = /^(\d{2}\/\d{2}\/\d{4})$/;
|
|
8847
|
+
if (dateRangeRegex.test(inputValue)) {
|
|
8848
|
+
const matches = inputValue.match(dateRangeRegex);
|
|
8849
|
+
const startDate = this.parseStringToDate(matches[1]);
|
|
8850
|
+
const endDate = this.parseStringToDate(matches[2]);
|
|
8851
|
+
if (this.isDateValid(startDate) && this.isDateValid(endDate)) {
|
|
8852
|
+
this.status = 'default';
|
|
8853
|
+
this.dates = [startDate, endDate];
|
|
8854
|
+
this.value = `${this.parseDateToString(startDate)} - ${this.parseDateToString(endDate)}`;
|
|
8855
|
+
this.dateChange.emit(this.value);
|
|
8856
|
+
}
|
|
8857
|
+
else {
|
|
8858
|
+
this.resetDates();
|
|
8859
|
+
}
|
|
8860
|
+
}
|
|
8861
|
+
else if (simpleDateRegex.test(inputValue)) {
|
|
8862
|
+
const matches = inputValue.match(simpleDateRegex);
|
|
8863
|
+
const singleDate = this.parseStringToDate(matches[1]);
|
|
8864
|
+
if (this.isDateValid(singleDate)) {
|
|
8865
|
+
this.status = 'default';
|
|
8866
|
+
this.dates = [singleDate];
|
|
8867
|
+
this.value = this.parseDateToString(singleDate);
|
|
8868
|
+
this.dateChange.emit(this.value);
|
|
8869
|
+
}
|
|
8870
|
+
else {
|
|
8871
|
+
this.resetDates();
|
|
8872
|
+
}
|
|
8873
|
+
}
|
|
8874
|
+
else {
|
|
8875
|
+
this.dates = [];
|
|
8876
|
+
}
|
|
8877
|
+
}
|
|
8878
|
+
handleChangeDates(event) {
|
|
8879
|
+
if (event.detail === '') {
|
|
8880
|
+
this.dates = [];
|
|
8881
|
+
this.status = 'default';
|
|
8882
|
+
this.value = '';
|
|
8883
|
+
this.dateChange.emit(this.value);
|
|
8884
|
+
this.statusInputChange.emit(this.status);
|
|
8885
|
+
}
|
|
8886
|
+
}
|
|
8887
|
+
isDateValid(date) {
|
|
8888
|
+
const today = new Date();
|
|
8889
|
+
today.setHours(0, 0, 0, 0);
|
|
8890
|
+
if (this.disablePassDates)
|
|
8891
|
+
return !isBefore(date, today);
|
|
8892
|
+
if (this.disableFutureDates)
|
|
8893
|
+
return !isAfter(date, today);
|
|
8894
|
+
return true;
|
|
8895
|
+
}
|
|
8896
|
+
parseStringToDate(dateString) {
|
|
8897
|
+
const [day, month, year] = dateString.split('/').map(Number);
|
|
8898
|
+
return new Date(year, month - 1, day);
|
|
8899
|
+
}
|
|
8900
|
+
parseDateToString(date) {
|
|
8901
|
+
const day = String(date.getDate()).padStart(2, '0');
|
|
8902
|
+
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
8903
|
+
const year = date.getFullYear();
|
|
8904
|
+
return `${day}/${month}/${year}`;
|
|
8905
|
+
}
|
|
8906
|
+
resetDates() {
|
|
8907
|
+
this.status = 'error';
|
|
8908
|
+
this.dates = [];
|
|
8909
|
+
this.statusInputChange.emit(this.status);
|
|
8910
|
+
}
|
|
8911
|
+
renderCalendarOrHelperText() {
|
|
8912
|
+
if (this.isCalendarVisible) {
|
|
8913
|
+
return (hAsync("div", { class: "calendar visible" }, hAsync("cura-calendar", { customDates: this.dates, mode: this.dateSettings.mode, width: "100%", maxWidth: "400px", embedded: false, floating: false, disableFutureDates: this.disableFutureDates, disablePassDates: this.disablePassDates, onOnchangeday: e => {
|
|
8914
|
+
const days = e.detail.days;
|
|
8915
|
+
if (days.length === 1) {
|
|
8916
|
+
this.value = this.parseDateToString(days[0]);
|
|
8917
|
+
}
|
|
8918
|
+
else if (days.length > 0) {
|
|
8919
|
+
this.value = `${this.parseDateToString(days[0])} - ${this.parseDateToString(days[days.length - 1])}`;
|
|
8920
|
+
}
|
|
8921
|
+
else {
|
|
8922
|
+
this.value = '';
|
|
8923
|
+
}
|
|
8924
|
+
this.dateChange.emit(this.value);
|
|
8925
|
+
} })));
|
|
8926
|
+
}
|
|
8927
|
+
else {
|
|
8928
|
+
return this.helperText;
|
|
8929
|
+
}
|
|
8930
|
+
}
|
|
8931
|
+
render() {
|
|
8932
|
+
return (hAsync(Host, { key: 'a85d8edd29146ca4068bb0fb5f718a5b6426638e' }, hAsync("div", { key: '99a69b37f9370bdf242d0dc698f707f28cf0325a', class: "container", style: this.styles }, hAsync("cura-input-text", { key: '5f5450f7390792c1188e17f48a9d04f4339fc156', label: this.label, name: this.name, status: this.status, value: this.value, onFocus: () => this.showCalendar(), size: this.size, "icon-name": this.iconName, placeholder: this.dateSettings.placeholder, "mask-preset": this.dateSettings.mask, "enable-selection-mode": true, onKeyUp: event => this.handleInputDates(event), autocomplete: "off", onValueChange: event => this.handleChangeDates(event) }, this.renderCalendarOrHelperText()))));
|
|
8933
|
+
}
|
|
8934
|
+
static get formAssociated() { return true; }
|
|
8935
|
+
get el() { return getElement(this); }
|
|
8936
|
+
static get watchers() { return {
|
|
8937
|
+
"enableRangeDates": ["updateDateSettings"]
|
|
8938
|
+
}; }
|
|
8939
|
+
static get style() { return CuraInputDateStyle0; }
|
|
8940
|
+
static get cmpMeta() { return {
|
|
8941
|
+
"$flags$": 73,
|
|
8942
|
+
"$tagName$": "cura-input-date",
|
|
8943
|
+
"$members$": {
|
|
8944
|
+
"label": [513],
|
|
8945
|
+
"status": [1537],
|
|
8946
|
+
"size": [513],
|
|
8947
|
+
"name": [513],
|
|
8948
|
+
"helperText": [513, "helper-text"],
|
|
8949
|
+
"enableRangeDates": [516, "enable-range-dates"],
|
|
8950
|
+
"disableFutureDates": [516, "disable-future-dates"],
|
|
8951
|
+
"disablePassDates": [516, "disable-pass-dates"],
|
|
8952
|
+
"iconName": [513, "icon-name"],
|
|
8953
|
+
"placeholder": [513],
|
|
8954
|
+
"styles": [32],
|
|
8955
|
+
"isCalendarVisible": [32],
|
|
8956
|
+
"dates": [32],
|
|
8957
|
+
"value": [32],
|
|
8958
|
+
"dateSettings": [32]
|
|
8959
|
+
},
|
|
8960
|
+
"$listeners$": [[8, "click", "handleClick"]],
|
|
8961
|
+
"$lazyBundleId$": "-",
|
|
8962
|
+
"$attrsToReflect$": [["label", "label"], ["status", "status"], ["size", "size"], ["name", "name"], ["helperText", "helper-text"], ["enableRangeDates", "enable-range-dates"], ["disableFutureDates", "disable-future-dates"], ["disablePassDates", "disable-pass-dates"], ["iconName", "icon-name"], ["placeholder", "placeholder"]]
|
|
8963
|
+
}; }
|
|
8964
|
+
}
|
|
8965
|
+
|
|
8537
8966
|
/** Checks if value is string */
|
|
8538
8967
|
function isString(str) {
|
|
8539
8968
|
return typeof str === 'string' || str instanceof String;
|
|
@@ -12172,9 +12601,12 @@ const maskOptions = {
|
|
|
12172
12601
|
date: {
|
|
12173
12602
|
mask: '00/00/0000'
|
|
12174
12603
|
},
|
|
12604
|
+
dateRange: {
|
|
12605
|
+
mask: '00/00/0000 - 00/00/0000'
|
|
12606
|
+
},
|
|
12175
12607
|
};
|
|
12176
12608
|
|
|
12177
|
-
const curaInputTextCss = ":host{display:block;box-sizing:border-box;width:100%}.required{color:var(--error-base)}.cura-input-group{width:100%;font-family:var(--font-family);text-align:left !important}.cura-input-group .helper-text{margin-top:8px;color:var(--neutral-dark)}.cura-input-group cura-label{margin-bottom:8px}.cura-input-group .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group .cura-input-field cura-loader-circle{margin:0px 12px}.cura-input-group .cura-input-field .feedback-icon{padding-left:12px;padding-top:6px}.cura-input-group .cura-input-field .clear-button{padding-right:12px;cursor:pointer}.cura-input-group .helper-text{margin-top:8px;color:var(--neutral-dark)}.cura-input-group.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success .cura-input-field input{color:var(--success-darker) !important}.cura-input-group.success .cura-input-field input::placeholder{color:var(--success-darker) !important}.cura-input-group.success:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark) !important;background-color:var(--success-lighter) !important}.cura-input-group.success:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error .cura-input-field input{color:var(--error-darker) !important}.cura-input-group.error .cura-input-field input::placeholder{color:var(--error-darker) !important}.cura-input-group.error:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark) !important;background-color:var(--error-lighter) !important}.cura-input-group.error:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group:focus-within .cura-input-field{border:2px solid var(--info-base) !important;background-color:var(--neutral-purewhite);outline:none}.cura-input-group:focus-within .cura-input-field input{color:var(--neutral-black) !important}.cura-input-group.isLoading{cursor:wait}.cura-input-group.isLoading .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:var(--neutral-white) !important;border:2px solid var(--primary-base) !important}.cura-input-group.isLoading .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.isLoading .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.isLoading .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.isLoading .cura-input-field input{cursor:wait;color:var(--primary-base) !important}.cura-input-group.isLoading .cura-input-field input::placeholder{color:var(--primary-base) !important}.cura-input-group.readOnly[read-only] .cura-input-field{cursor:default}.cura-input-group.readOnly[read-only] .cura-input-field input{cursor:default}.cura-input-group.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.cura-input-group.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.cura-input-group.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.disabled .cura-input-field{background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.cura-input-group.disabled .cura-input-field input{color:var(--neutral-medium)}.cura-input-group.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.cura-input-group.transparent{background-color:transparent;padding:0px;max-height:80px}.cura-input-group.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:transparent !important;border:none !important;border-radius:0;height:27px}.cura-input-group.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.transparent .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.transparent .cura-input-field input{color:var(--neutral-black) !important;font-size:16px;font-weight:var(--font-weight-bold) !important;padding:0}.cura-input-group.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.cura-input-group.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.cura-input-group.transparent:focus-within .cura-input-field{border:none !important;background-color:transparent !important}.cura-input-group.transparent:focus-within .cura-input-field input{border:none !important;outline:none}.cura-input-group.transparent .helper-text{margin-top:0px}.cura-input-group.transparent.transparent{display:flex;background-color:transparent;padding:0px;justify-content:start;align-items:center;max-height:80px;gap:4px}.cura-input-group.transparent.transparent .input-wrapper{display:flex;width:100%;flex-direction:column;justify-content:start}.cura-input-group.transparent.transparent cura-label{margin-bottom:4px}.cura-input-group.transparent.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:transparent !important;border:none !important;border-radius:0;height:27px;overflow:hidden}.cura-input-group.transparent.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.transparent.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.transparent.transparent .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.transparent.transparent .cura-input-field input{order:1;color:var(--neutral-black) !important;font-size:16px;font-weight:var(--font-weight-bold) !important;padding:0}.cura-input-group.transparent.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.cura-input-group.transparent.transparent .cura-input-field .clear-button{order:2;cursor:pointer;margin:0 20px 0 0;padding:0}.cura-input-group.transparent.transparent .cura-input-field .feedback-icon{padding:6px 0 0 0}.cura-input-group.transparent.transparent .cura-input-field cura-loader-circle{order:2;margin:0 20px 0 0}.cura-input-group.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error .cura-input-field input{color:var(--error-darker) !important}.cura-input-group.error .cura-input-field input::placeholder{color:var(--error-darker) !important}.cura-input-group.error.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.cura-input-group.error.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.error.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.cura-input-group.error.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.error.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.error:not(.transparent).large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark) !important;background-color:var(--error-lighter) !important}.cura-input-group.error:not(.transparent).large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error:not(.transparent).large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error:not(.transparent).large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success .cura-input-field input{color:var(--success-darker) !important}.cura-input-group.success .cura-input-field input::placeholder{color:var(--success-darker) !important}.cura-input-group.success.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.cura-input-group.success.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.success.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.cura-input-group.success.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.success.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.success:not(.transparent).large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark) !important;background-color:var(--success-lighter) !important}.cura-input-group.success:not(.transparent).large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success:not(.transparent).large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success:not(.transparent).large .cura-input-field .feedback-icon{padding-left:12px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}";
|
|
12609
|
+
const curaInputTextCss = ":host{display:block;box-sizing:border-box;width:100%}.required{color:var(--error-base)}.cura-input-group{width:100%;font-family:var(--font-family);text-align:left !important}.cura-input-group .helper-text{margin-top:8px;color:var(--neutral-dark)}.cura-input-group cura-label{margin-bottom:8px}.cura-input-group .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group .cura-input-field cura-loader-circle{margin:0px 12px}.cura-input-group .cura-input-field .feedback-icon{padding-left:12px;padding-top:6px}.cura-input-group .cura-input-field .clear-button{padding-right:12px;cursor:pointer}.cura-input-group .helper-text{margin-top:8px;color:var(--neutral-dark)}.cura-input-group.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success .cura-input-field input{color:var(--success-darker) !important}.cura-input-group.success .cura-input-field input::placeholder{color:var(--success-darker) !important}.cura-input-group.success:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark) !important;background-color:var(--success-lighter) !important}.cura-input-group.success:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error .cura-input-field input{color:var(--error-darker) !important}.cura-input-group.error .cura-input-field input::placeholder{color:var(--error-darker) !important}.cura-input-group.error:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark) !important;background-color:var(--error-lighter) !important}.cura-input-group.error:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group:focus-within:not(.selection) .cura-input-field{border:2px solid var(--info-base) !important;background-color:var(--neutral-purewhite);outline:none}.cura-input-group:focus-within:not(.selection) .cura-input-field input{color:var(--neutral-black) !important}.cura-input-group:focus-within.selection .cura-input-field{border-radius:4px 4px 0px 0px}.cura-input-group.isLoading{cursor:wait}.cura-input-group.isLoading .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:var(--neutral-white) !important;border:2px solid var(--primary-base) !important}.cura-input-group.isLoading .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.isLoading .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.isLoading .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.isLoading .cura-input-field input{cursor:wait;color:var(--primary-base) !important}.cura-input-group.isLoading .cura-input-field input::placeholder{color:var(--primary-base) !important}.cura-input-group.readOnly[read-only] .cura-input-field{cursor:default}.cura-input-group.readOnly[read-only] .cura-input-field input{cursor:default}.cura-input-group.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.cura-input-group.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.cura-input-group.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.disabled .cura-input-field{background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.cura-input-group.disabled .cura-input-field input{color:var(--neutral-medium)}.cura-input-group.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.cura-input-group.transparent{background-color:transparent;padding:0px;max-height:80px}.cura-input-group.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:transparent !important;border:none !important;border-radius:0;height:27px}.cura-input-group.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.transparent .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.transparent .cura-input-field input{color:var(--neutral-black) !important;font-size:16px;font-weight:var(--font-weight-bold) !important;padding:0}.cura-input-group.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.cura-input-group.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.cura-input-group.transparent:focus-within .cura-input-field{border:none !important;background-color:transparent !important}.cura-input-group.transparent:focus-within .cura-input-field input{border:none !important;outline:none}.cura-input-group.transparent .helper-text{margin-top:0px}.cura-input-group.transparent.transparent{display:flex;background-color:transparent;padding:0px;justify-content:start;align-items:center;max-height:80px;gap:4px}.cura-input-group.transparent.transparent .input-wrapper{display:flex;width:100%;flex-direction:column;justify-content:start}.cura-input-group.transparent.transparent cura-label{margin-bottom:4px}.cura-input-group.transparent.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:transparent !important;border:none !important;border-radius:0;height:27px;overflow:hidden}.cura-input-group.transparent.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.transparent.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.transparent.transparent .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.transparent.transparent .cura-input-field input{order:1;color:var(--neutral-black) !important;font-size:16px;font-weight:var(--font-weight-bold) !important;padding:0}.cura-input-group.transparent.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.cura-input-group.transparent.transparent .cura-input-field .clear-button{order:2;cursor:pointer;margin:0 20px 0 0;padding:0}.cura-input-group.transparent.transparent .cura-input-field .feedback-icon{padding:6px 0 0 0}.cura-input-group.transparent.transparent .cura-input-field cura-loader-circle{order:2;margin:0 20px 0 0}.cura-input-group.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error .cura-input-field input{color:var(--error-darker) !important}.cura-input-group.error .cura-input-field input::placeholder{color:var(--error-darker) !important}.cura-input-group.error.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.cura-input-group.error.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.error.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.cura-input-group.error.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.error.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.error.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.error.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.error:not(.transparent).large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark) !important;background-color:var(--error-lighter) !important}.cura-input-group.error:not(.transparent).large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.error:not(.transparent).large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.error:not(.transparent).large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success .cura-input-field input{color:var(--success-darker) !important}.cura-input-group.success .cura-input-field input::placeholder{color:var(--success-darker) !important}.cura-input-group.success.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.small .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.cura-input-group.success.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.success.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.medium .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.cura-input-group.success.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.cura-input-group.success.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.cura-input-group.success.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success.large .cura-input-field .feedback-icon{padding-left:12px}.cura-input-group.success.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.cura-input-group.success:not(.transparent).large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark) !important;background-color:var(--success-lighter) !important}.cura-input-group.success:not(.transparent).large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.cura-input-group.success:not(.transparent).large .cura-input-field input::placeholder{color:var(--neutral-dark)}.cura-input-group.success:not(.transparent).large .cura-input-field .feedback-icon{padding-left:12px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}";
|
|
12178
12610
|
var CuraInputTextStyle0 = curaInputTextCss;
|
|
12179
12611
|
|
|
12180
12612
|
class CuraInputText {
|
|
@@ -12202,6 +12634,7 @@ class CuraInputText {
|
|
|
12202
12634
|
this.disabled = false;
|
|
12203
12635
|
this.required = false;
|
|
12204
12636
|
this.maskPreset = undefined;
|
|
12637
|
+
this.enableSelectionMode = false;
|
|
12205
12638
|
this.maskRegex = undefined;
|
|
12206
12639
|
this.maskAdvanced = undefined;
|
|
12207
12640
|
this.maxlength = undefined;
|
|
@@ -12212,6 +12645,7 @@ class CuraInputText {
|
|
|
12212
12645
|
this.styles = {};
|
|
12213
12646
|
this.clearIcon = true;
|
|
12214
12647
|
this.hideErrorIcon = false;
|
|
12648
|
+
this.autocomplete = 'on';
|
|
12215
12649
|
}
|
|
12216
12650
|
/**
|
|
12217
12651
|
* Callback to restore the switch state from the form.
|
|
@@ -12274,6 +12708,7 @@ class CuraInputText {
|
|
|
12274
12708
|
isHovered: this.isHovered,
|
|
12275
12709
|
[this.status]: true,
|
|
12276
12710
|
transparent: this.mode === 'transparent',
|
|
12711
|
+
selection: this.enableSelectionMode,
|
|
12277
12712
|
};
|
|
12278
12713
|
}
|
|
12279
12714
|
getLabelColor() {
|
|
@@ -12468,7 +12903,7 @@ class CuraInputText {
|
|
|
12468
12903
|
e.preventDefault();
|
|
12469
12904
|
}
|
|
12470
12905
|
render() {
|
|
12471
|
-
return (hAsync(Host, { key: '
|
|
12906
|
+
return (hAsync(Host, { key: '7e2ba6e0ecae174b2ecc2592264d2d836b4ec63f' }, hAsync("div", { key: '0ed1e0e943b1b9b14c09f4b5a3f7bbe7211205c4', style: this.styles, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), class: Object.assign({ 'cura-input-group': true }, this.getClasses()) }, hAsync("div", { key: '5eb22b6c40ada7afb122d49fc997c661848edd7d', class: "input-wrapper" }, this.label && (hAsync("cura-label", { key: '3d1b76bae46fe021dcd4b8ccd6dba663b0d97f91', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getLabelColor() }, this.label, " ", this.required && hAsync("span", { key: 'debbb27cc068069717077a2437ca239e700d688d', class: "required" }, "* "))), hAsync("div", { key: '5a4884cfefd1218a625f77e640a5b372c5b453ad', class: "cura-input-field", part: "cura-input-field", style: this.styles }, this.renderIcon(), hAsync("input", { key: '8ee9aa8d28c522a22b1b10701569bfe1029ad64a', name: this.name ? this.name : '', type: this.type, onKeyDown: event => this.handleKeyDown(event), onBlur: this.handleInputBlur.bind(this), onFocus: this.handleInputFocus.bind(this), onInput: event => this.handleInputChange(event), class: this.getClasses(), style: this.styles, placeholder: this.placeholder, disabled: this.disabled || this.isLoading, required: this.required, readonly: this.readOnly, maxlength: this.maxlength, value: this.value !== undefined && this.value !== null ? this.value : '', inputmode: this.maskPreset ? 'tel' : this.inputMode, ref: ref => (this.inputRef = ref), autocomplete: this.autocomplete }), !!this.clearIcon && !this.readOnly && !this.isLoading && !this.disabled && this.value && this.isFocused && (hAsync("cura-icon", { key: 'f4839d9819657d2599c9d68b947624fd543fef36', size: this.size === 'large' || this.mode === 'transparent' ? 20 : 16, color: "primary-base", name: "closeCircle", iconset: "default", class: "clear-button", onClick: () => this.handleClearInput() })), this.isLoading && hAsync("cura-loader-circle", { key: '017c815c741c8113d9992ba3eefdda740f2a885d', size: this.size === 'large' ? 'medium' : 'small', color: "primary-base" })), this.renderHelperText()))));
|
|
12472
12907
|
}
|
|
12473
12908
|
static get formAssociated() { return true; }
|
|
12474
12909
|
static get watchers() { return {
|
|
@@ -12499,6 +12934,7 @@ class CuraInputText {
|
|
|
12499
12934
|
"disabled": [516],
|
|
12500
12935
|
"required": [516],
|
|
12501
12936
|
"maskPreset": [8, "mask-preset"],
|
|
12937
|
+
"enableSelectionMode": [1540, "enable-selection-mode"],
|
|
12502
12938
|
"maskRegex": [1537, "mask-regex"],
|
|
12503
12939
|
"maskAdvanced": [1544, "mask-advanced"],
|
|
12504
12940
|
"maxlength": [1538],
|
|
@@ -12506,13 +12942,14 @@ class CuraInputText {
|
|
|
12506
12942
|
"isLoading": [1540, "is-loading"],
|
|
12507
12943
|
"clearIcon": [1540, "clear-icon"],
|
|
12508
12944
|
"hideErrorIcon": [4, "hide-error-icon"],
|
|
12945
|
+
"autocomplete": [513],
|
|
12509
12946
|
"isHovered": [32],
|
|
12510
12947
|
"isFocused": [32],
|
|
12511
12948
|
"styles": [32]
|
|
12512
12949
|
},
|
|
12513
12950
|
"$listeners$": undefined,
|
|
12514
12951
|
"$lazyBundleId$": "-",
|
|
12515
|
-
"$attrsToReflect$": [["mode", "mode"], ["status", "status"], ["size", "size"], ["type", "type"], ["inputMode", "input-mode"], ["label", "label"], ["name", "name"], ["placeholder", "placeholder"], ["iconName", "icon-name"], ["helperText", "helper-text"], ["disabled", "disabled"], ["required", "required"], ["maskRegex", "mask-regex"], ["maskAdvanced", "mask-advanced"], ["maxlength", "maxlength"], ["readOnly", "read-only"], ["isLoading", "is-loading"], ["clearIcon", "clear-icon"]]
|
|
12952
|
+
"$attrsToReflect$": [["mode", "mode"], ["status", "status"], ["size", "size"], ["type", "type"], ["inputMode", "input-mode"], ["label", "label"], ["name", "name"], ["placeholder", "placeholder"], ["iconName", "icon-name"], ["helperText", "helper-text"], ["disabled", "disabled"], ["required", "required"], ["enableSelectionMode", "enable-selection-mode"], ["maskRegex", "mask-regex"], ["maskAdvanced", "mask-advanced"], ["maxlength", "maxlength"], ["readOnly", "read-only"], ["isLoading", "is-loading"], ["clearIcon", "clear-icon"], ["autocomplete", "autocomplete"]]
|
|
12516
12953
|
}; }
|
|
12517
12954
|
}
|
|
12518
12955
|
|
|
@@ -12567,7 +13004,7 @@ class CuraLabel {
|
|
|
12567
13004
|
};
|
|
12568
13005
|
}
|
|
12569
13006
|
render() {
|
|
12570
|
-
return (hAsync(Host, { key: '
|
|
13007
|
+
return (hAsync(Host, { key: 'ae255523f9f465d4e9f76dccf24e127a73d35b46', style: this.hostCSSProperties() }, hAsync("p", { key: 'b517371dcedfcd256dff4fcaddfe40c946541513', style: this.styles, class: this.getClasses() }, hAsync("slot", { key: '38ed6316d7882ba14a1e1710091be8d12158cd74' }))));
|
|
12571
13008
|
}
|
|
12572
13009
|
get host() { return getElement(this); }
|
|
12573
13010
|
static get watchers() { return {
|
|
@@ -12614,7 +13051,7 @@ class CuraLoaderBar {
|
|
|
12614
13051
|
this.setProgress();
|
|
12615
13052
|
}
|
|
12616
13053
|
render() {
|
|
12617
|
-
return (hAsync(Host, { key: '
|
|
13054
|
+
return (hAsync(Host, { key: 'af0397ee6a031081a84200da4863752ccbf937ce' }, hAsync("div", { key: '5e054c2b571053bdb58b415a6ca642a8bc0385f3', id: "progress-bar", class: "progress-bar", style: this.styles }, hAsync("span", { key: '2463789bf8737e13b6b5a49a1af4e51ce1637176', class: "progress-bar-fill" }))));
|
|
12618
13055
|
}
|
|
12619
13056
|
setColor() {
|
|
12620
13057
|
this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--color-base': window.CuraAPI.theme.colors.getColor(this.color) });
|
|
@@ -12666,7 +13103,7 @@ class CuraLoaderCircle {
|
|
|
12666
13103
|
};
|
|
12667
13104
|
}
|
|
12668
13105
|
render() {
|
|
12669
|
-
return (hAsync(Host, { key: '
|
|
13106
|
+
return (hAsync(Host, { key: 'c7fb273559e35a8ac66c4a06e09150990dd62629', style: this.getStyles() }, hAsync("svg", { key: '1ef6af84e79a0bf20c78d8f28129c890f990902f', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("g", { key: '37718a9e3271cce4d939b9ee4ab7123f39d7de39' }, hAsync("circle", { key: '50284396589d4165a5e222b6e7aa7d7eba7d1f72', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), hAsync("path", { key: '1bd1557ecd739e50cacd67675d91aa56f63ec335', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), hAsync("defs", { key: '6c68b50e1cce6210827f55ade5f822c0398ebfae' }, hAsync("linearGradient", { key: '9d8f1a4955b753070618e0998205a8b48a83976a', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, hAsync("stop", { key: 'd81f6995a1de8007ede765a2f49d236f7fcff187' }), hAsync("stop", { key: 'b88855e6b35f247fa1395c220e3c0ee76093a7d2', offset: "1" }))))));
|
|
12670
13107
|
}
|
|
12671
13108
|
static get style() { return CuraLoaderCircleStyle0; }
|
|
12672
13109
|
static get cmpMeta() { return {
|
|
@@ -12701,7 +13138,7 @@ class CuraPageTemplate {
|
|
|
12701
13138
|
return classes;
|
|
12702
13139
|
}
|
|
12703
13140
|
render() {
|
|
12704
|
-
return (hAsync(Host, { key: '
|
|
13141
|
+
return (hAsync(Host, { key: 'cc20723aa41b91ea1dc91ea638988b1758295194' }, hAsync("div", { key: '77a47c8042fde17042614e9dfa451418f5599203', style: this.styles, class: "grid-template" }, hAsync("div", { key: 'b6364534caa10c454c88cb0bee0cb15d5f5b3290', id: "sub-header" }, hAsync("slot", { key: 'e9e8232ea90df3a7a9b41077c11b7471958b31ea', name: 'sub-header' })), hAsync("div", { key: 'b5407cdf0d167f65a41c27b3056dffb8963f9494', id: "header" }, hAsync("slot", { key: '75ca70a52852ba84507d836e20c3cd6e49b5ed7e', name: 'header' })), hAsync("div", { key: 'b1a18551c7c91f0356a909d0187654af7cacfd9c', id: "pre-content" }, hAsync("slot", { key: '46c5d27c42f0082115ed56b00ee5d9537a16b351', name: 'pre-content' })), hAsync("div", { key: '9f9c30b4057d00cc026509eba99b8b066285f518', id: "content-container", class: this.getClasses() }, hAsync("div", { key: '74c71d693d351e38183b501ab1ed955b1120bd13', id: "sidebar-left" }, hAsync("slot", { key: 'f09fd413d695cb57cbdeba49192d0230dddb51ca', name: 'sidebar-left' })), hAsync("div", { key: '60d8785cf429bbdc94132517707d672afa7cfca3', id: "content" }, hAsync("slot", { key: 'd440f897831ff64fb3bed669728bf6d8c557037c', name: "content" }), hAsync("slot", { key: '0e7fbe336f24608d80e7eda07869f58faf98c121' })), hAsync("div", { key: 'e92ffc7632e10b98c25ea8f3dbe854bbdbd225a8', id: "sidebar-right" }, hAsync("slot", { key: '9c9a8887643a1967df21c1d6625266ea119e828b', name: 'sidebar-right' }))), hAsync("div", { key: '9ee23371a9d003db9ebb8b2f2d1803e71da01bd7', id: "post-body" }, hAsync("slot", { key: '449fdc120956fd36f1fe71a7a5f2855a09baa9b3', name: 'post-body' })), hAsync("div", { key: '31bc1a11a0152628a6bff3fee1b2cf739ef7cd82', id: "footer" }, hAsync("slot", { key: '680ac49ea86a4945c13e52e8236e384d20a2867c', name: 'footer' })), hAsync("div", { key: '1aebe595604aadc3b31e467d71532dd9d93301bf', id: "sub-footer" }, hAsync("slot", { key: '58a2d0cebc85f73d09980b6daf8a04e7fceac133', name: 'sub-footer' })))));
|
|
12705
13142
|
}
|
|
12706
13143
|
get host() { return getElement(this); }
|
|
12707
13144
|
static get style() { return CuraPageTemplateStyle0; }
|
|
@@ -12717,7 +13154,7 @@ class CuraPageTemplate {
|
|
|
12717
13154
|
}; }
|
|
12718
13155
|
}
|
|
12719
13156
|
|
|
12720
|
-
const curaParagraphCss = ":host{display:block;font-size:var(--font-size-base)}:host p{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0.28px}:host p.large{font-size:1.214em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.small{font-size:0.85em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.48px}:host p.caption,:host p.xsmall{font-size:0.7142857143em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.6px}@media (min-width: 769px) and (max-width: 1920px){:host p{font-size:1.143em;line-height:calc(var(--line-height) + 5%);letter-spacing:0.32px}:host p.large{font-size:1.357em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.small{font-size:1em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.56px}:host p.caption,:host p.xsmall{font-size:0.85em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.72px}}@media (min-width: 1921px){:host p{font-size:1.429em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.large{font-size:1.714em;line-height:calc(var(--line-height) + 20%)}:host p.small{font-size:1.21em;line-height:calc(var(--line-height) + 5%);letter-spacing:0px}:host p.caption,:host p.xsmall{font-size:1em;line-height:calc(var(--line-height) + 5%);letter-spacing:0.28px}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-medium);color:var(--color-link);text-underline-offset:10%}:host ::slotted(u){font-weight:var(--font-weight-medium);text-underline-offset:10%}:host ::slotted(i){font-style:italic}:host ::slotted(em){font-weight:var(--font-weight-medium);color:var(--color-link);font-style:normal}:host ::slotted(abbr){color:var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
|
|
13157
|
+
const curaParagraphCss = ":host{display:block;font-size:var(--font-size-base)}:host p{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0.28px}:host p.large{font-size:1.214em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.small{font-size:0.85em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.48px}:host p.caption,:host p.xsmall{font-size:0.7142857143em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.6px}@media (min-width: 769px) and (max-width: 1920px){:host p{font-size:1.143em;line-height:calc(var(--line-height) + 5%);letter-spacing:0.32px}:host p.large{font-size:1.357em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.small{font-size:1em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.56px}:host p.caption,:host p.xsmall{font-size:0.85em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.72px}}@media (min-width: 1921px){:host p{font-size:1.429em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.large{font-size:1.714em;line-height:calc(var(--line-height) + 20%)}:host p.small{font-size:1.21em;line-height:calc(var(--line-height) + 5%);letter-spacing:0px}:host p.caption,:host p.xsmall{font-size:1em;line-height:calc(var(--line-height) + 5%);letter-spacing:0.28px}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a),:host ::slotted(span a),:host ::slotted(a:-webkit-any-link),:host p a{font-weight:var(--font-weight-medium);color:var(--color-link);text-underline-offset:10%}:host ::slotted(u){font-weight:var(--font-weight-medium);text-underline-offset:10%}:host ::slotted(i){font-style:italic}:host ::slotted(em){font-weight:var(--font-weight-medium);color:var(--color-link);font-style:normal}:host ::slotted(abbr){color:var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
|
|
12721
13158
|
var CuraParagraphStyle0 = curaParagraphCss;
|
|
12722
13159
|
|
|
12723
13160
|
class CuraParagraph {
|
|
@@ -12767,7 +13204,7 @@ class CuraParagraph {
|
|
|
12767
13204
|
};
|
|
12768
13205
|
}
|
|
12769
13206
|
render() {
|
|
12770
|
-
return (hAsync(Host, { key: '
|
|
13207
|
+
return (hAsync(Host, { key: '0ee9f41b45e758b509a18ab8ff216482d9c83af4', style: this.hostCSSProperties() }, hAsync("p", { key: '02edfbf600b0cb372e49ee8b6fc7192f19108997', style: this.styles, class: this.setsizeClass() }, hAsync("slot", { key: '0b2bd3c94a190999cc8a8dec94b14aae2af2fa09' }))));
|
|
12771
13208
|
}
|
|
12772
13209
|
get host() { return getElement(this); }
|
|
12773
13210
|
static get watchers() { return {
|
|
@@ -12924,7 +13361,7 @@ class CuraRadio {
|
|
|
12924
13361
|
return statusColors[this.status][type];
|
|
12925
13362
|
}
|
|
12926
13363
|
render() {
|
|
12927
|
-
return (hAsync(Host, { key: '
|
|
13364
|
+
return (hAsync(Host, { key: 'a0d89eeaf13690af56498ab584c22082b071b851' }, hAsync("div", { key: '17a7ffae366d1942cdf8daccb0693434468040f8', class: this.getClasses(), style: this.styles }, hAsync("div", { key: '2a03b1cc6eb6c26227bff90ec40f1f739e543613', class: "info" }, hAsync("div", { key: '63a3f9a9f99504fc5f0e824a6398d502c2d7bec7', class: "label-wrapper" }, hAsync("cura-label", { key: 'cddaf7347318cba1cd480352cde13321b44cc244', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && hAsync("cura-paragraph", { key: 'b2f5f549427841feb97ba43e26930e62e7d8f432', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), hAsync("cura-label", { key: '7d32540fd194b86224189d2ba3da8da4cae9d2a9', color: this.assignColor('message'), size: "xsmall", class: "message" }, hAsync("slot", { key: 'c4e8fa9a1fb18040da0038aa5ea7e6bcb0ee17bc' }))), hAsync("input", { key: 'eaebe407c25af0bc72df251451a652fc6376ef9a', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
|
|
12928
13365
|
}
|
|
12929
13366
|
static get formAssociated() { return true; }
|
|
12930
13367
|
get host() { return getElement(this); }
|
|
@@ -12958,7 +13395,7 @@ class CuraRadio {
|
|
|
12958
13395
|
}; }
|
|
12959
13396
|
}
|
|
12960
13397
|
|
|
12961
|
-
const curaSelectCss = ":host{display:block;position:relative;font-family:var(--font-family)}.wrapper{width:100%;user-select:none;text-align:left !important}.wrapper cura-label{margin-bottom:8px}.wrapper .helper-text{margin-top:8px;color:var(--neutral-dark)}.wrapper .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper .cura-input-field .feedback-icon{padding-left:12px}.wrapper .cura-input-field .up-down-icon{order:3;padding-right:12px;cursor:pointer;pointer-events:all}.wrapper .cura-input-field input{padding:0px 12px 0px 8px}.wrapper .cura-input-field.open{border-radius:4px 4px 0 0 !important}.wrapper.transparent{background-color:transparent;padding:0px;max-height:80px}.wrapper.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:transparent !important;border:none !important;border-radius:0;height:27px}.wrapper.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.transparent .cura-input-field .feedback-icon{padding-left:12px}.wrapper.transparent .cura-input-field input{color:var(--neutral-black) !important;font-size:16px;font-weight:var(--font-weight-bold) !important;padding:0}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.wrapper.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.wrapper.transparent:focus-within .cura-input-field{border:none !important;background-color:transparent !important}.wrapper.transparent:focus-within .cura-input-field input{border:none !important;outline:none}.wrapper.transparent .helper-text{margin-top:0px}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper:focus-within .cura-input-field{border:2px solid var(--info-base) !important;background-color:var(--neutral-purewhite);outline:none}.wrapper:focus-within .cura-input-field input{color:var(--neutral-black) !important}.wrapper.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success .cura-input-field .feedback-icon{padding-left:12px}.wrapper.success .cura-input-field input{color:var(--success-darker) !important}.wrapper.success .cura-input-field input::placeholder{color:var(--success-darker) !important}.wrapper.success:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark) !important;background-color:var(--success-lighter) !important}.wrapper.success:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field input{color:var(--error-darker) !important}.wrapper.error .cura-input-field input::placeholder{color:var(--error-darker) !important}.wrapper.error:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark) !important;background-color:var(--error-lighter) !important}.wrapper.error:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.small .cura-input-field .feedback-icon{padding-left:12px}.wrapper.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.wrapper.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.small.label .menu{top:53px}.wrapper.small .menu{top:33px}.wrapper.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.medium .cura-input-field .feedback-icon{padding-left:12px}.wrapper.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.wrapper.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.medium.label .menu{top:61px}.wrapper.medium .menu{top:40px}.wrapper.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.large .cura-input-field .feedback-icon{padding-left:12px}.wrapper.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.wrapper.large.label .menu{top:69px}.wrapper.large .menu{top:47px}.wrapper.disabled .cura-input-field{background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.wrapper.disabled .cura-input-field input{color:var(--neutral-medium)}.wrapper.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.required{color:red}.menu{position:absolute;left:0;right:-1px;background:#fff;border:2px solid var(--neutral-light);border-radius:4px;z-index:1000;max-height:285px;overflow:hidden;border-top:transparent;align-items:center;scrollbar-color:var(--neutral-medium) var(--neutral-black-20);overflow-y:auto;box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}.menu.open{border-radius:0 !important}";
|
|
13398
|
+
const curaSelectCss = ":host{display:block;position:relative;font-family:var(--font-family)}.wrapper{width:100%;user-select:none;text-align:left !important}.wrapper cura-label{margin-bottom:8px}.wrapper .helper-text{margin-top:8px;color:var(--neutral-dark)}.wrapper .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper .cura-input-field .feedback-icon{padding-left:12px}.wrapper .cura-input-field .up-down-icon{order:3;padding-right:12px;cursor:pointer;pointer-events:all}.wrapper .cura-input-field input{padding:0px 12px 0px 8px;cursor:pointer}.wrapper .cura-input-field.open{border-radius:4px 4px 0 0 !important}.wrapper.transparent{background-color:transparent;padding:0px;max-height:80px}.wrapper.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:transparent !important;border:none !important;border-radius:0;height:27px}.wrapper.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.transparent .cura-input-field .feedback-icon{padding-left:12px}.wrapper.transparent .cura-input-field input{color:var(--neutral-black) !important;font-size:16px;font-weight:var(--font-weight-bold) !important;padding:0}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.wrapper.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.wrapper.transparent:focus-within .cura-input-field{border:none !important;background-color:transparent !important}.wrapper.transparent:focus-within .cura-input-field input{border:none !important;outline:none}.wrapper.transparent .helper-text{margin-top:0px}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper:focus-within:not(.selection) .cura-input-field{border:2px solid var(--info-base) !important;background-color:var(--neutral-purewhite);outline:none}.wrapper:focus-within:not(.selection) .cura-input-field input{color:var(--neutral-black) !important}.wrapper:focus-within.selection .cura-input-field{border-radius:4px 4px 0px 0px}.wrapper.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success .cura-input-field .feedback-icon{padding-left:12px}.wrapper.success .cura-input-field input{color:var(--success-darker) !important}.wrapper.success .cura-input-field input::placeholder{color:var(--success-darker) !important}.wrapper.success:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark) !important;background-color:var(--success-lighter) !important}.wrapper.success:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field input{color:var(--error-darker) !important}.wrapper.error .cura-input-field input::placeholder{color:var(--error-darker) !important}.wrapper.error:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark) !important;background-color:var(--error-lighter) !important}.wrapper.error:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.small .cura-input-field .feedback-icon{padding-left:12px}.wrapper.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.wrapper.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.small.label .menu{top:53px}.wrapper.small .menu{top:33px}.wrapper.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.medium .cura-input-field .feedback-icon{padding-left:12px}.wrapper.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.wrapper.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.medium.label .menu{top:61px}.wrapper.medium .menu{top:40px}.wrapper.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.large .cura-input-field .feedback-icon{padding-left:12px}.wrapper.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.wrapper.large.label .menu{top:69px}.wrapper.large .menu{top:47px}.wrapper.disabled .cura-input-field{background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.wrapper.disabled .cura-input-field input{color:var(--neutral-medium)}.wrapper.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.required{color:red}.menu{position:absolute;left:0;right:-1px;background:#fff;border:2px solid var(--neutral-light);border-radius:4px;z-index:1000;max-height:285px;overflow:hidden;border-top:transparent;align-items:center;scrollbar-color:var(--neutral-medium) var(--neutral-black-20);overflow-y:auto;box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}.menu.open{border-radius:0 !important}";
|
|
12962
13399
|
var CuraSelectStyle0 = curaSelectCss;
|
|
12963
13400
|
|
|
12964
13401
|
class CuraSelect {
|
|
@@ -13044,6 +13481,7 @@ class CuraSelect {
|
|
|
13044
13481
|
this.status = 'default';
|
|
13045
13482
|
this.disabled = false;
|
|
13046
13483
|
this.required = false;
|
|
13484
|
+
this.searchBehavior = false;
|
|
13047
13485
|
this.isHovered = false;
|
|
13048
13486
|
this.isFocused = false;
|
|
13049
13487
|
this.isOpen = false;
|
|
@@ -13058,7 +13496,7 @@ class CuraSelect {
|
|
|
13058
13496
|
* Filters the options based on the current input value.
|
|
13059
13497
|
*/
|
|
13060
13498
|
filterOptions(newText) {
|
|
13061
|
-
if (!this.isOpen) {
|
|
13499
|
+
if (!this.isOpen || !this.searchBehavior) {
|
|
13062
13500
|
return;
|
|
13063
13501
|
}
|
|
13064
13502
|
this.options.forEach(option => {
|
|
@@ -13235,13 +13673,13 @@ class CuraSelect {
|
|
|
13235
13673
|
return (hAsync("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
|
|
13236
13674
|
}
|
|
13237
13675
|
render() {
|
|
13238
|
-
return (hAsync(Host, { key: '
|
|
13676
|
+
return (hAsync(Host, { key: '1f9549c90dbc1c5a958488fdaa7e6b320730691a', style: this.styles }, hAsync("div", { key: '52f93a983269e95bf4e19b590c47a8de472f9cb1', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (hAsync("cura-label", { key: '1fbbdb175324020e975e515c07a7eb85e593eb19', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && hAsync("span", { key: 'b76d8b6fc6399af17f8345d097f70e29ef9a549e', class: 'required' }, "* "))), hAsync("div", { key: '0f1484f9debd047eb99760adb2c2da6d124c39f0', class: {
|
|
13239
13677
|
'cura-input-field': true,
|
|
13240
13678
|
'open': this.isOpen
|
|
13241
|
-
} }, this.renderIcon(), hAsync("input", { key: '
|
|
13679
|
+
} }, this.renderIcon(), hAsync("input", { key: '2b10751ad085669523eeaba20a9d8736b4332dc0', 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 }), hAsync("cura-icon", { key: '965687e4884ab2da4de009ccee8a2607a80ca0d3', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), hAsync("cura-label", { key: 'ec844637fe1b96ac3719a53fc4753a66dde5710f', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, hAsync("slot", { key: 'fdc615752aad7bc80ba97a380c4086a3e81fad48' })), this.isOpen && (hAsync("div", { key: 'cac6207d71dabbf2ad7d6dd0f5a152d23f64e554', class: {
|
|
13242
13680
|
'menu': true,
|
|
13243
13681
|
'open': this.isOpen
|
|
13244
|
-
} }, hAsync("slot", { key: '
|
|
13682
|
+
} }, hAsync("slot", { key: '3414977f685fd5f7692e1b5fbcf8b8af11992fba', name: 'option' }))))));
|
|
13245
13683
|
}
|
|
13246
13684
|
static get formAssociated() { return true; }
|
|
13247
13685
|
get host() { return getElement(this); }
|
|
@@ -13263,6 +13701,7 @@ class CuraSelect {
|
|
|
13263
13701
|
"status": [1537],
|
|
13264
13702
|
"disabled": [516],
|
|
13265
13703
|
"required": [516],
|
|
13704
|
+
"searchBehavior": [516, "search-behavior"],
|
|
13266
13705
|
"isHovered": [32],
|
|
13267
13706
|
"isFocused": [32],
|
|
13268
13707
|
"isOpen": [32],
|
|
@@ -13272,7 +13711,7 @@ class CuraSelect {
|
|
|
13272
13711
|
},
|
|
13273
13712
|
"$listeners$": undefined,
|
|
13274
13713
|
"$lazyBundleId$": "-",
|
|
13275
|
-
"$attrsToReflect$": [["label", "label"], ["placeholder", "placeholder"], ["value", "value"], ["mode", "mode"], ["size", "size"], ["status", "status"], ["disabled", "disabled"], ["required", "required"]]
|
|
13714
|
+
"$attrsToReflect$": [["label", "label"], ["placeholder", "placeholder"], ["value", "value"], ["mode", "mode"], ["size", "size"], ["status", "status"], ["disabled", "disabled"], ["required", "required"], ["searchBehavior", "search-behavior"]]
|
|
13276
13715
|
}; }
|
|
13277
13716
|
}
|
|
13278
13717
|
|
|
@@ -13314,7 +13753,7 @@ class CuraSelectOption {
|
|
|
13314
13753
|
};
|
|
13315
13754
|
}
|
|
13316
13755
|
render() {
|
|
13317
|
-
return (hAsync(Host, { key: '
|
|
13756
|
+
return (hAsync(Host, { key: 'd65a51c56c05c15db545fa9dec1da8849e45235d', slot: "option" }, hAsync("div", { key: '892175c91b317d015f13f9d5d9bc0a956272a49f', class: this.getClasses(), style: this.styles }, hAsync("cura-label", { key: 'aaabd66fc3e8e6beb0d840e4b12dbcfb3282e392', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, hAsync("slot", { key: 'a1570b98b56147b8cf8d0b01f504a19efbdf4749' })), this.selected && hAsync("cura-icon", { key: 'fcd06691f5d18e460b14e5cd7ae99c06fec26e3f', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
|
|
13318
13757
|
}
|
|
13319
13758
|
get host() { return getElement(this); }
|
|
13320
13759
|
static get watchers() { return {
|
|
@@ -13441,7 +13880,7 @@ class CuraSwitch {
|
|
|
13441
13880
|
return classes;
|
|
13442
13881
|
}
|
|
13443
13882
|
render() {
|
|
13444
|
-
return (hAsync(Host, { key: '
|
|
13883
|
+
return (hAsync(Host, { key: '019642743001393249cba0ac937b861a0b309af3' }, hAsync("div", { key: '32d6358af066b24b60fb2967891b0eda03027a25', class: this.getClasses(), style: this.styles }, hAsync("div", { key: 'c29681689cbf04ee89afa793dd84f1a3c1198fb7', class: "info" }, hAsync("cura-label", { key: '0865c7e0c45843769046039981382e4f7a9cf8cf', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), hAsync("cura-label", { key: 'b1fff87c188c2a1f306630a692c254dcacc5b03b', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, hAsync("slot", { key: '553757a5022374bd10af67f4a0c449511203e2e6' }))), hAsync("div", { key: 'a8babf17cdd9c8bb95225fce8501015859122ec6', onClick: this.toggleSwitch, class: "control" }, hAsync("div", { key: '4828791117512af2526ed94b5981a0dab04b3e5c', class: `track ${this.size.toLowerCase()}` }, hAsync("div", { key: '30a712271bcee777e9a3c79d04a2038db5b84869', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
|
|
13445
13884
|
}
|
|
13446
13885
|
static get formAssociated() { return true; }
|
|
13447
13886
|
static get watchers() { return {
|
|
@@ -13497,7 +13936,7 @@ class CuraToast {
|
|
|
13497
13936
|
this.setStyle();
|
|
13498
13937
|
}
|
|
13499
13938
|
render() {
|
|
13500
|
-
return (hAsync(Host, { key: '
|
|
13939
|
+
return (hAsync(Host, { key: 'eb867953a8c56ae385b1226686cbe1b1e9df4318' }, hAsync("div", { key: 'c901632a6fb414c981b5c149fdd7081306ae1130', class: this.getClasses(), style: this.styles }, hAsync("cura-icon", { key: '98c9a49501c71ee60c6ae1d783bba11d5bdce999', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), hAsync("div", { key: '19b2e0bd0d816e94f3b9d1f113f4b833e770cee3', class: "content" }, hAsync("cura-heading", { key: '17ed67e5b531b45b94f8dbc7d65675f7a57308f9', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), hAsync("cura-paragraph", { key: 'dd90e612d924dff9b3e9896dc29cef2541ae51af', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, hAsync("slot", { key: '33cd9c1dd10ae6d3ebd857fab5c70ca7151f8a1b' })), hAsync("slot", { key: '12d18bd482b957cdc5ee7a4fab20bdffe6bc647d', name: "actions" })), this.closeButton && hAsync("cura-icon", { key: '3a83cdd43c6c11587013111c29673f916509b165', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && hAsync("cura-loader-bar", { key: '13ec00fd7146119e9eab81ed6d52b1020d1eb1e8', color: `${this.type}-base`, progress: this.progress }))));
|
|
13501
13940
|
}
|
|
13502
13941
|
componentDidLoad() {
|
|
13503
13942
|
this.openContainer();
|
|
@@ -13585,14 +14024,255 @@ class CuraToast {
|
|
|
13585
14024
|
}; }
|
|
13586
14025
|
}
|
|
13587
14026
|
|
|
14027
|
+
const curaTooltipCss = ":host{position:absolute;z-index:99999;display:block;width:fit-content;height:fit-content;box-sizing:border-box}@media (max-width: 768px){:host{width:100%}}:host .container{display:flex;box-sizing:border-box;max-width:var(--max-width);height:auto;padding:calc(var(--base-spacing) * 2px);border:1px solid var(--neutral-light);border-radius:calc(var(--base-spacing) * 1px);background-color:var(--neutral-purewhite);box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16))}@media (max-width: 768px){:host .container{max-width:90%;height:fit-content;padding:calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px) 0 calc(var(--base-spacing) * 4px);margin:0 auto;border:2px solid;border-radius:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px) 0 0;border-color:var(--neutral-light) var(--neutral-light) transparent var(--neutral-light)}}:host .container::after{content:\"\";position:absolute;z-index:99999;width:calc(var(--base-spacing) * 2.5px);height:calc(var(--base-spacing) * 2.5px);border:1px solid;border-radius:2px;background-color:var(--neutral-purewhite);left:var(--arrow-left);top:var(--arrow-top);border-color:var(--arrow-border-color);transform:var(--arrow-translate) rotate(45deg)}@media (max-width: 768px){:host .container::after{display:none}}:host .container .content{flex:1 1 0;display:flex;flex-direction:column;gap:calc(var(--base-spacing) * 1px)}@media (max-width: 768px){:host .container .content{padding-bottom:calc(var(--base-spacing) * 4px);border-bottom:1px dashed var(--neutral-light)}}:host .container .close-icon{margin-left:calc(var(--base-spacing) * 3px);cursor:pointer}:host .container .close-button{padding:calc(var(--base-spacing) * 2px) 0}";
|
|
14028
|
+
var CuraTooltipStyle0 = curaTooltipCss;
|
|
14029
|
+
|
|
14030
|
+
const BREAKPOINT_SMALL_MAX = 768;
|
|
14031
|
+
class CuraTooltip {
|
|
14032
|
+
constructor(hostRef) {
|
|
14033
|
+
registerInstance(this, hostRef);
|
|
14034
|
+
this.tooltipClosed = createEvent(this, "tooltipClosed", 7);
|
|
14035
|
+
this.styles = {};
|
|
14036
|
+
this.handleClose = () => {
|
|
14037
|
+
this.closeContainer();
|
|
14038
|
+
};
|
|
14039
|
+
this.elementId = '';
|
|
14040
|
+
this.interactive = true;
|
|
14041
|
+
this.delay = 250;
|
|
14042
|
+
this.maxWidth = '280px';
|
|
14043
|
+
this.position = 'top';
|
|
14044
|
+
this.label = undefined;
|
|
14045
|
+
this.closeButton = false;
|
|
14046
|
+
this.isMobile = false;
|
|
14047
|
+
}
|
|
14048
|
+
onWindowResize() {
|
|
14049
|
+
this.setPosition(this.targetElement);
|
|
14050
|
+
}
|
|
14051
|
+
onWindowScroll() {
|
|
14052
|
+
this.setPosition(this.targetElement);
|
|
14053
|
+
}
|
|
14054
|
+
connectedCallback() {
|
|
14055
|
+
this.setStyle();
|
|
14056
|
+
}
|
|
14057
|
+
render() {
|
|
14058
|
+
return (hAsync(Host, { key: '228558663e00355ca59429d70a129e4b0e426dc1', role: "tooltip", id: this.elementId }, hAsync("div", { key: 'd8fa27a56dd894a4cfb335fc9de348402590aa93', class: "container", style: this.styles }, hAsync("div", { key: '974114d04252a106deb2174bfe8ecf204e689d26', class: "content" }, hAsync("cura-heading", { key: '14be9154283064e48d2435bc4bb6af6469b18e04', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), hAsync("cura-paragraph", { key: 'db64a96112781640be945502b995dc07392977bd', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, hAsync("slot", { key: 'b3a9a3f7a5f227ddc92ac9498c3aee93f9196f77' }))), this.closeButton && !this.isMobile && hAsync("cura-icon", { key: '66c113fe2c3b4c67b1b9e98408b8ca1736d4eb86', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && hAsync("cura-button-transparent", { key: '059b4e579bebc92b5082d98ce8ae3cce9f4da95d', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
|
|
14059
|
+
}
|
|
14060
|
+
componentDidLoad() {
|
|
14061
|
+
this.targetElement = document.querySelector(`[aria-labelledby="${this.elementId}"]`);
|
|
14062
|
+
if (!this.interactive) {
|
|
14063
|
+
this.host.style.visibility = 'visible';
|
|
14064
|
+
}
|
|
14065
|
+
else {
|
|
14066
|
+
this.host.style.visibility = 'hidden';
|
|
14067
|
+
let openTimeoutID = null;
|
|
14068
|
+
let closeTimeoutID = null;
|
|
14069
|
+
this.targetElement.addEventListener('mouseenter', () => {
|
|
14070
|
+
clearTimeout(closeTimeoutID);
|
|
14071
|
+
openTimeoutID = setTimeout(() => {
|
|
14072
|
+
this.host.style.visibility = 'visible';
|
|
14073
|
+
}, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);
|
|
14074
|
+
});
|
|
14075
|
+
this.targetElement.addEventListener('mouseleave', () => {
|
|
14076
|
+
clearTimeout(openTimeoutID);
|
|
14077
|
+
closeTimeoutID = setTimeout(() => {
|
|
14078
|
+
this.handleClose();
|
|
14079
|
+
}, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);
|
|
14080
|
+
});
|
|
14081
|
+
this.host.addEventListener('mouseenter', () => {
|
|
14082
|
+
if (window.getComputedStyle(this.host).visibility === 'visible') {
|
|
14083
|
+
clearTimeout(closeTimeoutID);
|
|
14084
|
+
}
|
|
14085
|
+
});
|
|
14086
|
+
this.host.addEventListener('mouseleave', () => {
|
|
14087
|
+
clearTimeout(openTimeoutID);
|
|
14088
|
+
this.handleClose();
|
|
14089
|
+
});
|
|
14090
|
+
this.targetElement.addEventListener('click', () => {
|
|
14091
|
+
if (window.getComputedStyle(this.host).visibility === 'hidden') {
|
|
14092
|
+
openTimeoutID = setTimeout(() => {
|
|
14093
|
+
this.host.style.visibility = 'visible';
|
|
14094
|
+
}, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);
|
|
14095
|
+
}
|
|
14096
|
+
else {
|
|
14097
|
+
clearTimeout(openTimeoutID);
|
|
14098
|
+
this.handleClose();
|
|
14099
|
+
}
|
|
14100
|
+
});
|
|
14101
|
+
document.addEventListener('click', (event) => {
|
|
14102
|
+
if (!this.targetElement.contains(event.target) && !this.host.contains(event.target)) {
|
|
14103
|
+
clearTimeout(openTimeoutID);
|
|
14104
|
+
this.handleClose();
|
|
14105
|
+
}
|
|
14106
|
+
});
|
|
14107
|
+
}
|
|
14108
|
+
setTimeout(() => {
|
|
14109
|
+
this.setPosition(this.targetElement);
|
|
14110
|
+
}, 100);
|
|
14111
|
+
}
|
|
14112
|
+
setStyle() {
|
|
14113
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--max-width': this.maxWidth, '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(), '--neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`), '--neutral-light': window.CuraAPI.theme.colors.getColor(`neutral-light`), '--neutral-black-shadow': window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16) });
|
|
14114
|
+
}
|
|
14115
|
+
getClasses() {
|
|
14116
|
+
const [firstPosition, secondPosition] = this.position.split('-');
|
|
14117
|
+
const classes = {};
|
|
14118
|
+
classes['container'] = true;
|
|
14119
|
+
if (firstPosition) {
|
|
14120
|
+
classes[firstPosition] = true;
|
|
14121
|
+
}
|
|
14122
|
+
if (secondPosition) {
|
|
14123
|
+
classes[secondPosition] = true;
|
|
14124
|
+
}
|
|
14125
|
+
return classes;
|
|
14126
|
+
}
|
|
14127
|
+
setPosition(element) {
|
|
14128
|
+
const windowWidth = window.innerWidth;
|
|
14129
|
+
const windowHeight = window.innerHeight;
|
|
14130
|
+
const container = this.host.shadowRoot.querySelector('.container');
|
|
14131
|
+
this.isMobile = windowWidth <= BREAKPOINT_SMALL_MAX;
|
|
14132
|
+
this.host.style.position = this.isMobile ? 'fixed' : 'absolute';
|
|
14133
|
+
this.host.style.bottom = this.isMobile ? '0' : 'unset';
|
|
14134
|
+
container.style.flexDirection = this.isMobile ? 'column' : 'row';
|
|
14135
|
+
if (this.isMobile) {
|
|
14136
|
+
this.host.style.left = 'unset';
|
|
14137
|
+
this.host.style.top = 'unset';
|
|
14138
|
+
return;
|
|
14139
|
+
}
|
|
14140
|
+
const elementRect = {
|
|
14141
|
+
top: element.offsetTop,
|
|
14142
|
+
left: element.offsetLeft,
|
|
14143
|
+
width: element.offsetWidth,
|
|
14144
|
+
height: element.offsetHeight
|
|
14145
|
+
};
|
|
14146
|
+
const tooltipRect = this.host.getBoundingClientRect();
|
|
14147
|
+
const SCREEN_LIMIT = 10;
|
|
14148
|
+
const SPACE_TO_ELEMENT = 10;
|
|
14149
|
+
const ARROW_HORIZONTAL_ADJUSTMENT = (elementRect.width * 0.5) + 18;
|
|
14150
|
+
const ARROW_VERTICAL_ADJUSTMENT = (elementRect.height * 0.5) + 18;
|
|
14151
|
+
const BORDER_COLOR = this.styles['--neutral-light'];
|
|
14152
|
+
let left = 0;
|
|
14153
|
+
let top = 0;
|
|
14154
|
+
const positions = Object.keys(this.getClasses()).filter((p) => ['top', 'left', 'bottom', 'right', 'start', 'end'].includes(p));
|
|
14155
|
+
const setArrowProperties = ({ arrowTop = '', arrowLeft = '', translate = '', borderColor = '' }) => {
|
|
14156
|
+
if (arrowLeft)
|
|
14157
|
+
this.host.style.setProperty('--arrow-left', arrowLeft);
|
|
14158
|
+
if (arrowTop)
|
|
14159
|
+
this.host.style.setProperty('--arrow-top', arrowTop);
|
|
14160
|
+
if (translate)
|
|
14161
|
+
this.host.style.setProperty('--arrow-translate', translate);
|
|
14162
|
+
if (borderColor)
|
|
14163
|
+
this.host.style.setProperty('--arrow-border-color', borderColor);
|
|
14164
|
+
};
|
|
14165
|
+
//Posicionamento vertical
|
|
14166
|
+
if (positions.includes('top') || positions.includes('bottom')) {
|
|
14167
|
+
setArrowProperties({ arrowLeft: '50%', translate: 'translateX(-50%)' });
|
|
14168
|
+
if (positions.includes('top')) {
|
|
14169
|
+
top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;
|
|
14170
|
+
setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });
|
|
14171
|
+
if (top < SCREEN_LIMIT) {
|
|
14172
|
+
top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;
|
|
14173
|
+
setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });
|
|
14174
|
+
}
|
|
14175
|
+
}
|
|
14176
|
+
if (positions.includes('bottom')) {
|
|
14177
|
+
top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;
|
|
14178
|
+
setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });
|
|
14179
|
+
if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {
|
|
14180
|
+
top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;
|
|
14181
|
+
setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });
|
|
14182
|
+
}
|
|
14183
|
+
}
|
|
14184
|
+
left = elementRect.left + (elementRect.width - tooltipRect.width) / 2;
|
|
14185
|
+
if (positions.includes('start')) {
|
|
14186
|
+
left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;
|
|
14187
|
+
setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });
|
|
14188
|
+
if (left < SCREEN_LIMIT) {
|
|
14189
|
+
left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;
|
|
14190
|
+
setArrowProperties({ arrowLeft: '18px' });
|
|
14191
|
+
}
|
|
14192
|
+
}
|
|
14193
|
+
if (positions.includes('end')) {
|
|
14194
|
+
left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;
|
|
14195
|
+
setArrowProperties({ arrowLeft: '18px' });
|
|
14196
|
+
if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {
|
|
14197
|
+
left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;
|
|
14198
|
+
setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });
|
|
14199
|
+
}
|
|
14200
|
+
}
|
|
14201
|
+
}
|
|
14202
|
+
//Posicionamento horizontal
|
|
14203
|
+
if (positions.includes('right') || positions.includes('left')) {
|
|
14204
|
+
setArrowProperties({ arrowTop: '50%', translate: 'translateY(-50%)' });
|
|
14205
|
+
if (positions.includes('right')) {
|
|
14206
|
+
left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;
|
|
14207
|
+
setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });
|
|
14208
|
+
if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {
|
|
14209
|
+
left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;
|
|
14210
|
+
setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });
|
|
14211
|
+
}
|
|
14212
|
+
}
|
|
14213
|
+
if (positions.includes('left')) {
|
|
14214
|
+
left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;
|
|
14215
|
+
setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });
|
|
14216
|
+
if (left < SCREEN_LIMIT) {
|
|
14217
|
+
left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;
|
|
14218
|
+
setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });
|
|
14219
|
+
}
|
|
14220
|
+
}
|
|
14221
|
+
top = elementRect.top + (elementRect.height - tooltipRect.height) / 2;
|
|
14222
|
+
if (positions.includes('start')) {
|
|
14223
|
+
top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;
|
|
14224
|
+
setArrowProperties({ arrowTop: 'calc(100% - 18px)' });
|
|
14225
|
+
if (top < SCREEN_LIMIT) {
|
|
14226
|
+
top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;
|
|
14227
|
+
setArrowProperties({ arrowTop: '18px' });
|
|
14228
|
+
}
|
|
14229
|
+
}
|
|
14230
|
+
if (positions.includes('end')) {
|
|
14231
|
+
top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;
|
|
14232
|
+
setArrowProperties({ arrowTop: '18px' });
|
|
14233
|
+
if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {
|
|
14234
|
+
top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;
|
|
14235
|
+
setArrowProperties({ arrowTop: 'calc(100% - 18px)' });
|
|
14236
|
+
}
|
|
14237
|
+
}
|
|
14238
|
+
}
|
|
14239
|
+
this.host.style.left = `${left}px`;
|
|
14240
|
+
this.host.style.top = `${top}px`;
|
|
14241
|
+
}
|
|
14242
|
+
closeContainer() {
|
|
14243
|
+
this.host.style.visibility = 'hidden';
|
|
14244
|
+
this.tooltipClosed.emit();
|
|
14245
|
+
}
|
|
14246
|
+
get host() { return getElement(this); }
|
|
14247
|
+
static get style() { return CuraTooltipStyle0; }
|
|
14248
|
+
static get cmpMeta() { return {
|
|
14249
|
+
"$flags$": 9,
|
|
14250
|
+
"$tagName$": "cura-tooltip",
|
|
14251
|
+
"$members$": {
|
|
14252
|
+
"elementId": [1, "element-id"],
|
|
14253
|
+
"interactive": [4],
|
|
14254
|
+
"delay": [2],
|
|
14255
|
+
"maxWidth": [1, "max-width"],
|
|
14256
|
+
"position": [513],
|
|
14257
|
+
"label": [513],
|
|
14258
|
+
"closeButton": [516, "close-button"],
|
|
14259
|
+
"isMobile": [32]
|
|
14260
|
+
},
|
|
14261
|
+
"$listeners$": [[9, "resize", "onWindowResize"], [9, "scroll", "onWindowScroll"]],
|
|
14262
|
+
"$lazyBundleId$": "-",
|
|
14263
|
+
"$attrsToReflect$": [["position", "position"], ["label", "label"], ["closeButton", "close-button"]]
|
|
14264
|
+
}; }
|
|
14265
|
+
}
|
|
14266
|
+
|
|
13588
14267
|
registerComponents([
|
|
13589
14268
|
CuraAccordion,
|
|
13590
14269
|
CuraAccordionItem,
|
|
13591
14270
|
CuraAlert,
|
|
13592
14271
|
CuraAvatar,
|
|
14272
|
+
CuraBadgeNumber,
|
|
13593
14273
|
CuraButton,
|
|
13594
|
-
CuraButtonOutline$1,
|
|
13595
14274
|
CuraButtonOutline,
|
|
14275
|
+
CuraButtonSelect,
|
|
13596
14276
|
CuraButtonTransparent,
|
|
13597
14277
|
CuraCalendar,
|
|
13598
14278
|
CuraCard,
|
|
@@ -13605,6 +14285,7 @@ registerComponents([
|
|
|
13605
14285
|
CuraHeading,
|
|
13606
14286
|
CuraIcon,
|
|
13607
14287
|
CuraIconsView,
|
|
14288
|
+
CuraInputDate,
|
|
13608
14289
|
CuraInputText,
|
|
13609
14290
|
CuraLabel,
|
|
13610
14291
|
CuraLoaderBar,
|
|
@@ -13616,6 +14297,7 @@ registerComponents([
|
|
|
13616
14297
|
CuraSelectOption,
|
|
13617
14298
|
CuraSwitch,
|
|
13618
14299
|
CuraToast,
|
|
14300
|
+
CuraTooltip,
|
|
13619
14301
|
]);
|
|
13620
14302
|
|
|
13621
14303
|
exports.hydrateApp = hydrateApp;
|