@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.js
CHANGED
|
@@ -127,7 +127,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
|
|
|
127
127
|
|
|
128
128
|
|
|
129
129
|
const NAMESPACE = 'cura';
|
|
130
|
-
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:
|
|
130
|
+
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 };
|
|
131
131
|
|
|
132
132
|
/**
|
|
133
133
|
* Cura Default Theme
|
|
@@ -165,9 +165,9 @@ const ThemeDefault = {
|
|
|
165
165
|
font: {
|
|
166
166
|
size: '14px',
|
|
167
167
|
color: '#4A4A4A',
|
|
168
|
-
body: "'
|
|
169
|
-
heading: "'
|
|
170
|
-
display: "'
|
|
168
|
+
body: "'Gotham', Arial, Helvetica, sans-serif",
|
|
169
|
+
heading: "'Gotham', Arial, Helvetica, sans-serif",
|
|
170
|
+
display: "'Gotham', Arial, Helvetica, sans-serif",
|
|
171
171
|
weights: {
|
|
172
172
|
thin: 100,
|
|
173
173
|
light: 300,
|
|
@@ -274,6 +274,36 @@ const ThemeOncology = Object.assign(Object.assign({}, ThemeDefault), {
|
|
|
274
274
|
},
|
|
275
275
|
} });
|
|
276
276
|
|
|
277
|
+
/**
|
|
278
|
+
* Richet Theme
|
|
279
|
+
*/
|
|
280
|
+
const ThemeRichet = Object.assign(Object.assign({}, ThemeDefault), {
|
|
281
|
+
/* Custom */
|
|
282
|
+
/* Colors */
|
|
283
|
+
color: {
|
|
284
|
+
primary: {
|
|
285
|
+
'100': '153,197,255',
|
|
286
|
+
'300': '67,142,241',
|
|
287
|
+
'500': '0,47,108',
|
|
288
|
+
'700': '1,39,91',
|
|
289
|
+
'900': '0,33,77'
|
|
290
|
+
},
|
|
291
|
+
secondary: {
|
|
292
|
+
'100': '243,237,227',
|
|
293
|
+
'300': '216,194,163',
|
|
294
|
+
'500': '208,173,103',
|
|
295
|
+
'700': '201,155,64',
|
|
296
|
+
'900': '149,104,15'
|
|
297
|
+
},
|
|
298
|
+
accent: {
|
|
299
|
+
'100': '167,230,215',
|
|
300
|
+
'300': '130,225,209',
|
|
301
|
+
'500': '44,213,196',
|
|
302
|
+
'700': '26,188,169',
|
|
303
|
+
'900': '0,150,129'
|
|
304
|
+
}
|
|
305
|
+
} });
|
|
306
|
+
|
|
277
307
|
/**
|
|
278
308
|
* Legacy Default Theme
|
|
279
309
|
*/
|
|
@@ -302,12 +332,29 @@ const ThemeLegacyDefault = Object.assign(Object.assign({}, ThemeDefault), {
|
|
|
302
332
|
'700': '149,94,29',
|
|
303
333
|
'900': '45,28,9'
|
|
304
334
|
}
|
|
335
|
+
},
|
|
336
|
+
/* Fonts */
|
|
337
|
+
font: {
|
|
338
|
+
size: '14px',
|
|
339
|
+
color: '#4A4A4A',
|
|
340
|
+
body: "'Roboto', Arial, Helvetica, sans-serif",
|
|
341
|
+
heading: "'Roboto', Arial, Helvetica, sans-serif",
|
|
342
|
+
display: "'Roboto', Arial, Helvetica, sans-serif",
|
|
343
|
+
weights: {
|
|
344
|
+
thin: 100,
|
|
345
|
+
light: 300,
|
|
346
|
+
regular: 400,
|
|
347
|
+
medium: 500,
|
|
348
|
+
bold: 700,
|
|
349
|
+
black: 900
|
|
350
|
+
},
|
|
305
351
|
} });
|
|
306
352
|
|
|
307
353
|
const ThemePresets = {
|
|
308
354
|
'default': ThemeDefault,
|
|
309
355
|
'maternidade': ThemeMaternity,
|
|
310
356
|
'oncologia': ThemeOncology,
|
|
357
|
+
'richet': ThemeRichet,
|
|
311
358
|
'legacyDefault': ThemeLegacyDefault
|
|
312
359
|
};
|
|
313
360
|
|
|
@@ -1786,6 +1833,13 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
|
|
|
1786
1833
|
}
|
|
1787
1834
|
let maybePromise;
|
|
1788
1835
|
if (isInitialLoad) {
|
|
1836
|
+
{
|
|
1837
|
+
hostRef.$flags$ |= 256 /* isListenReady */;
|
|
1838
|
+
if (hostRef.$queuedListeners$) {
|
|
1839
|
+
hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
|
|
1840
|
+
hostRef.$queuedListeners$ = void 0;
|
|
1841
|
+
}
|
|
1842
|
+
}
|
|
1789
1843
|
{
|
|
1790
1844
|
maybePromise = safeCall(instance, "componentWillLoad");
|
|
1791
1845
|
}
|
|
@@ -2173,6 +2227,7 @@ var connectedCallback = (elm) => {
|
|
|
2173
2227
|
initializeComponent(elm, hostRef, cmpMeta);
|
|
2174
2228
|
}
|
|
2175
2229
|
} else {
|
|
2230
|
+
addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
|
|
2176
2231
|
if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
|
|
2177
2232
|
fireConnectedCallback(hostRef.$lazyInstance$);
|
|
2178
2233
|
} else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
|
|
@@ -2189,6 +2244,36 @@ var setContentReference = (elm) => {
|
|
|
2189
2244
|
contentRefElm["s-cn"] = true;
|
|
2190
2245
|
insertBefore(elm, contentRefElm, elm.firstChild);
|
|
2191
2246
|
};
|
|
2247
|
+
var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
|
|
2248
|
+
if (listeners) {
|
|
2249
|
+
listeners.map(([flags, name, method]) => {
|
|
2250
|
+
const target = getHostListenerTarget(elm, flags) ;
|
|
2251
|
+
const handler = hostListenerProxy(hostRef, method);
|
|
2252
|
+
const opts = hostListenerOpts(flags);
|
|
2253
|
+
plt.ael(target, name, handler, opts);
|
|
2254
|
+
(hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
|
|
2255
|
+
});
|
|
2256
|
+
}
|
|
2257
|
+
};
|
|
2258
|
+
var hostListenerProxy = (hostRef, methodName) => (ev) => {
|
|
2259
|
+
var _a;
|
|
2260
|
+
try {
|
|
2261
|
+
{
|
|
2262
|
+
if (hostRef.$flags$ & 256 /* isListenReady */) {
|
|
2263
|
+
(_a = hostRef.$lazyInstance$) == null ? void 0 : _a[methodName](ev);
|
|
2264
|
+
} else {
|
|
2265
|
+
(hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
|
|
2266
|
+
}
|
|
2267
|
+
}
|
|
2268
|
+
} catch (e) {
|
|
2269
|
+
consoleError(e);
|
|
2270
|
+
}
|
|
2271
|
+
};
|
|
2272
|
+
var getHostListenerTarget = (elm, flags) => {
|
|
2273
|
+
if (flags & 8 /* TargetWindow */) return win;
|
|
2274
|
+
return elm;
|
|
2275
|
+
};
|
|
2276
|
+
var hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
|
|
2192
2277
|
|
|
2193
2278
|
// src/runtime/vdom/vdom-annotations.ts
|
|
2194
2279
|
var insertVdomAnnotations = (doc2, staticComponents) => {
|
|
@@ -2521,7 +2606,8 @@ async function hydrateComponent(win2, results, tagName, elm, waitingElements) {
|
|
|
2521
2606
|
const cmpMeta = Cstr.cmpMeta;
|
|
2522
2607
|
if (cmpMeta != null) {
|
|
2523
2608
|
waitingElements.add(elm);
|
|
2524
|
-
getHostRef(this);
|
|
2609
|
+
const hostRef = getHostRef(this);
|
|
2610
|
+
addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
|
|
2525
2611
|
try {
|
|
2526
2612
|
connectedCallback(elm);
|
|
2527
2613
|
await elm.componentOnReady();
|
|
@@ -2737,7 +2823,7 @@ var registerHost = (elm, cmpMeta) => {
|
|
|
2737
2823
|
};
|
|
2738
2824
|
var styles = /* @__PURE__ */ new Map();
|
|
2739
2825
|
|
|
2740
|
-
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)}
|
|
2826
|
+
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)}";
|
|
2741
2827
|
var CuraAccordionStyle0 = curaAccordionCss;
|
|
2742
2828
|
|
|
2743
2829
|
class CuraAccordion {
|
|
@@ -2765,14 +2851,14 @@ class CuraAccordion {
|
|
|
2765
2851
|
};
|
|
2766
2852
|
this.mutationObserver = new MutationObserver(this.mutationObserverCallback);
|
|
2767
2853
|
this.color = 'primary';
|
|
2768
|
-
this.activeColor = 'accent';
|
|
2769
2854
|
this.colorMode = 'dark';
|
|
2770
|
-
this.iconSize =
|
|
2855
|
+
this.iconSize = 20;
|
|
2856
|
+
this.labelIcon = '';
|
|
2771
2857
|
this.openIcon = 'down';
|
|
2772
2858
|
this.closeIcon = 'up';
|
|
2773
2859
|
this.iconColor = '';
|
|
2774
|
-
this.iconActiveColor = '';
|
|
2775
2860
|
this.behavior = 'default';
|
|
2861
|
+
this.level = 3;
|
|
2776
2862
|
this.styles = {};
|
|
2777
2863
|
}
|
|
2778
2864
|
handleChangeColor() {
|
|
@@ -2781,8 +2867,6 @@ class CuraAccordion {
|
|
|
2781
2867
|
connectedCallback() {
|
|
2782
2868
|
const weights = window.CuraAPI.theme.fonts.getWeights();
|
|
2783
2869
|
this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
|
|
2784
|
-
this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);
|
|
2785
|
-
this.styles['--neutral-lighter'] = window.CuraAPI.theme.colors.getColor(`neutral-lighter`);
|
|
2786
2870
|
this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
|
|
2787
2871
|
this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
|
|
2788
2872
|
this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();
|
|
@@ -2804,22 +2888,24 @@ class CuraAccordion {
|
|
|
2804
2888
|
// Theme
|
|
2805
2889
|
item.colorMode = this.colorMode;
|
|
2806
2890
|
item.iconColor = this.iconColor || this.color;
|
|
2807
|
-
item.iconActiveColor = this.iconActiveColor || this.activeColor;
|
|
2808
2891
|
// Icon
|
|
2809
2892
|
item.iconSize = this.iconSize;
|
|
2893
|
+
if (this.labelIcon)
|
|
2894
|
+
item.labelIcon = this.labelIcon; // It's possible to define a specific icon for each item.
|
|
2810
2895
|
item.openIcon = this.openIcon;
|
|
2811
2896
|
item.closeIcon = this.closeIcon;
|
|
2897
|
+
// Level
|
|
2898
|
+
item.level = this.level;
|
|
2812
2899
|
}
|
|
2813
2900
|
setColors() {
|
|
2814
|
-
this.styles = Object.assign(Object.assign({}, this.styles), {
|
|
2901
|
+
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`) });
|
|
2815
2902
|
}
|
|
2816
2903
|
render() {
|
|
2817
|
-
return (hAsync(Host, { key: '
|
|
2904
|
+
return (hAsync(Host, { key: 'a56103203dd352195eaac03957350c73a1fcfb06', style: this.styles }, hAsync("slot", { key: '3226a757908201e1c91d6a9a195980d9020f2327', name: 'accordion-item' })));
|
|
2818
2905
|
}
|
|
2819
2906
|
get host() { return getElement(this); }
|
|
2820
2907
|
static get watchers() { return {
|
|
2821
|
-
"color": ["handleChangeColor"]
|
|
2822
|
-
"activeColor": ["handleChangeColor"]
|
|
2908
|
+
"color": ["handleChangeColor"]
|
|
2823
2909
|
}; }
|
|
2824
2910
|
static get style() { return CuraAccordionStyle0; }
|
|
2825
2911
|
static get cmpMeta() { return {
|
|
@@ -2827,44 +2913,39 @@ class CuraAccordion {
|
|
|
2827
2913
|
"$tagName$": "cura-accordion",
|
|
2828
2914
|
"$members$": {
|
|
2829
2915
|
"color": [513],
|
|
2830
|
-
"activeColor": [513, "active-color"],
|
|
2831
2916
|
"colorMode": [513, "color-mode"],
|
|
2832
2917
|
"iconSize": [514, "icon-size"],
|
|
2918
|
+
"labelIcon": [513, "label-icon"],
|
|
2833
2919
|
"openIcon": [513, "open-icon"],
|
|
2834
2920
|
"closeIcon": [513, "close-icon"],
|
|
2835
2921
|
"iconColor": [513, "icon-color"],
|
|
2836
|
-
"iconActiveColor": [513, "icon-active-color"],
|
|
2837
2922
|
"behavior": [513],
|
|
2923
|
+
"level": [514],
|
|
2838
2924
|
"styles": [32]
|
|
2839
2925
|
},
|
|
2840
2926
|
"$listeners$": undefined,
|
|
2841
2927
|
"$lazyBundleId$": "-",
|
|
2842
|
-
"$attrsToReflect$": [["color", "color"], ["
|
|
2928
|
+
"$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"]]
|
|
2843
2929
|
}; }
|
|
2844
2930
|
}
|
|
2845
2931
|
|
|
2846
|
-
const curaAccordionItemCss = ":host{display:block}:host .accordion-item{width:100%}:host .accordion-item
|
|
2932
|
+
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}}";
|
|
2847
2933
|
var CuraAccordionItemStyle0 = curaAccordionItemCss;
|
|
2848
2934
|
|
|
2849
2935
|
class CuraAccordionItem {
|
|
2850
2936
|
constructor(hostRef) {
|
|
2851
2937
|
registerInstance(this, hostRef);
|
|
2852
2938
|
this.label = '';
|
|
2853
|
-
this.iconSize =
|
|
2939
|
+
this.iconSize = 20;
|
|
2940
|
+
this.labelIcon = '';
|
|
2854
2941
|
this.openIcon = 'down';
|
|
2855
2942
|
this.closeIcon = 'up';
|
|
2856
2943
|
this.iconColor = '';
|
|
2857
|
-
this.iconActiveColor = '';
|
|
2858
2944
|
this.colorMode = 'dark';
|
|
2945
|
+
this.level = 3;
|
|
2859
2946
|
this.opened = false;
|
|
2860
2947
|
this.styles = {};
|
|
2861
2948
|
}
|
|
2862
|
-
getIconColor() {
|
|
2863
|
-
const inverted = this.colorMode === 'light';
|
|
2864
|
-
const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;
|
|
2865
|
-
const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;
|
|
2866
|
-
return this.opened ? iconActiveColor : iconColor;
|
|
2867
|
-
}
|
|
2868
2949
|
getClasses() {
|
|
2869
2950
|
const classes = {};
|
|
2870
2951
|
classes['accordion-item'] = true;
|
|
@@ -2875,8 +2956,13 @@ class CuraAccordionItem {
|
|
|
2875
2956
|
accordionItemClick(_) {
|
|
2876
2957
|
this.opened = !this.opened;
|
|
2877
2958
|
}
|
|
2959
|
+
renderIcon() {
|
|
2960
|
+
if (!this.labelIcon)
|
|
2961
|
+
return '';
|
|
2962
|
+
return hAsync("cura-icon", { name: this.labelIcon, size: this.iconSize, color: "neutral-black" });
|
|
2963
|
+
}
|
|
2878
2964
|
render() {
|
|
2879
|
-
return (hAsync(Host, { key: '
|
|
2965
|
+
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' }))))));
|
|
2880
2966
|
}
|
|
2881
2967
|
static get style() { return CuraAccordionItemStyle0; }
|
|
2882
2968
|
static get cmpMeta() { return {
|
|
@@ -2885,21 +2971,22 @@ class CuraAccordionItem {
|
|
|
2885
2971
|
"$members$": {
|
|
2886
2972
|
"label": [513],
|
|
2887
2973
|
"iconSize": [514, "icon-size"],
|
|
2974
|
+
"labelIcon": [513, "label-icon"],
|
|
2888
2975
|
"openIcon": [513, "open-icon"],
|
|
2889
2976
|
"closeIcon": [513, "close-icon"],
|
|
2890
2977
|
"iconColor": [513, "icon-color"],
|
|
2891
|
-
"iconActiveColor": [513, "icon-active-color"],
|
|
2892
2978
|
"colorMode": [1, "color-mode"],
|
|
2979
|
+
"level": [514],
|
|
2893
2980
|
"opened": [1540],
|
|
2894
2981
|
"styles": [32]
|
|
2895
2982
|
},
|
|
2896
2983
|
"$listeners$": undefined,
|
|
2897
2984
|
"$lazyBundleId$": "-",
|
|
2898
|
-
"$attrsToReflect$": [["label", "label"], ["iconSize", "icon-size"], ["openIcon", "open-icon"], ["closeIcon", "close-icon"], ["iconColor", "icon-color"], ["
|
|
2985
|
+
"$attrsToReflect$": [["label", "label"], ["iconSize", "icon-size"], ["labelIcon", "label-icon"], ["openIcon", "open-icon"], ["closeIcon", "close-icon"], ["iconColor", "icon-color"], ["level", "level"], ["opened", "opened"]]
|
|
2899
2986
|
}; }
|
|
2900
2987
|
}
|
|
2901
2988
|
|
|
2902
|
-
const curaAlertCss = ":host{display:block;box-sizing:border-box}:host .conteiner{display:flex;box-sizing:border-box;padding:
|
|
2989
|
+
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}";
|
|
2903
2990
|
var CuraAlertStyle0 = curaAlertCss;
|
|
2904
2991
|
|
|
2905
2992
|
class CuraAlert {
|
|
@@ -2930,6 +3017,7 @@ class CuraAlert {
|
|
|
2930
3017
|
this.styles = Object.assign({}, this.styles);
|
|
2931
3018
|
}
|
|
2932
3019
|
connectedCallback() {
|
|
3020
|
+
this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
|
|
2933
3021
|
this.setColors();
|
|
2934
3022
|
}
|
|
2935
3023
|
getClasses() {
|
|
@@ -2948,7 +3036,7 @@ class CuraAlert {
|
|
|
2948
3036
|
return this.icon ? this.icon : iconMapping[this.type];
|
|
2949
3037
|
}
|
|
2950
3038
|
render() {
|
|
2951
|
-
return (hAsync(Host, { key: '
|
|
3039
|
+
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 ?
|
|
2952
3040
|
(hAsync("cura-icon", { name: "close", size: 16, color: "error-dark", class: "icon-right", onClick: this.handleClose }))
|
|
2953
3041
|
: '')));
|
|
2954
3042
|
}
|
|
@@ -3024,7 +3112,7 @@ class CuraAvatar {
|
|
|
3024
3112
|
this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;
|
|
3025
3113
|
}
|
|
3026
3114
|
render() {
|
|
3027
|
-
return (hAsync(Host, { key: '
|
|
3115
|
+
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() }))));
|
|
3028
3116
|
}
|
|
3029
3117
|
get host() { return getElement(this); }
|
|
3030
3118
|
static get watchers() { return {
|
|
@@ -3052,6 +3140,37 @@ class CuraAvatar {
|
|
|
3052
3140
|
}; }
|
|
3053
3141
|
}
|
|
3054
3142
|
|
|
3143
|
+
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)}";
|
|
3144
|
+
var CuraBadgeNumberStyle0 = curaBadgeNumberCss;
|
|
3145
|
+
|
|
3146
|
+
class CuraBadgeNumber {
|
|
3147
|
+
constructor(hostRef) {
|
|
3148
|
+
registerInstance(this, hostRef);
|
|
3149
|
+
this.styles = {};
|
|
3150
|
+
this.theme = window.CuraAPI.theme;
|
|
3151
|
+
this.number = undefined;
|
|
3152
|
+
this.color = undefined;
|
|
3153
|
+
}
|
|
3154
|
+
connectedCallback() {
|
|
3155
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--background-color': this.theme.colors.getColor(this.color) });
|
|
3156
|
+
}
|
|
3157
|
+
render() {
|
|
3158
|
+
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)))));
|
|
3159
|
+
}
|
|
3160
|
+
static get style() { return CuraBadgeNumberStyle0; }
|
|
3161
|
+
static get cmpMeta() { return {
|
|
3162
|
+
"$flags$": 9,
|
|
3163
|
+
"$tagName$": "cura-badge-number",
|
|
3164
|
+
"$members$": {
|
|
3165
|
+
"number": [514],
|
|
3166
|
+
"color": [513]
|
|
3167
|
+
},
|
|
3168
|
+
"$listeners$": undefined,
|
|
3169
|
+
"$lazyBundleId$": "-",
|
|
3170
|
+
"$attrsToReflect$": [["number", "number"], ["color", "color"]]
|
|
3171
|
+
}; }
|
|
3172
|
+
}
|
|
3173
|
+
|
|
3055
3174
|
const labelSizes = {
|
|
3056
3175
|
"small": "xsmall",
|
|
3057
3176
|
"medium": "small",
|
|
@@ -3158,7 +3277,7 @@ class CuraButton {
|
|
|
3158
3277
|
render() {
|
|
3159
3278
|
const symbolColor = this.getSymbolColor();
|
|
3160
3279
|
const labelSize = labelSizes[this.size] || labelSizes["default"];
|
|
3161
|
-
return (hAsync(Host, { key: '
|
|
3280
|
+
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 })))));
|
|
3162
3281
|
}
|
|
3163
3282
|
static get formAssociated() { return true; }
|
|
3164
3283
|
static get watchers() { return {
|
|
@@ -3197,7 +3316,7 @@ class CuraButton {
|
|
|
3197
3316
|
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}";
|
|
3198
3317
|
var CuraButtonOutlineStyle0 = curaButtonOutlineCss;
|
|
3199
3318
|
|
|
3200
|
-
class CuraButtonOutline
|
|
3319
|
+
class CuraButtonOutline {
|
|
3201
3320
|
constructor(hostRef) {
|
|
3202
3321
|
registerInstance(this, hostRef);
|
|
3203
3322
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
@@ -3292,7 +3411,7 @@ class CuraButtonOutline$1 {
|
|
|
3292
3411
|
render() {
|
|
3293
3412
|
const symbolColor = this.getSymbolColor();
|
|
3294
3413
|
const labelSize = labelSizes[this.size] || labelSizes["default"];
|
|
3295
|
-
return (hAsync(Host, { key: '
|
|
3414
|
+
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 })))));
|
|
3296
3415
|
}
|
|
3297
3416
|
static get formAssociated() { return true; }
|
|
3298
3417
|
static get watchers() { return {
|
|
@@ -3329,52 +3448,100 @@ class CuraButtonOutline$1 {
|
|
|
3329
3448
|
}; }
|
|
3330
3449
|
}
|
|
3331
3450
|
|
|
3332
|
-
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:
|
|
3451
|
+
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)}";
|
|
3333
3452
|
var CuraButtonSelectStyle0 = curaButtonSelectCss;
|
|
3334
3453
|
|
|
3335
|
-
class
|
|
3454
|
+
class CuraButtonSelect {
|
|
3336
3455
|
constructor(hostRef) {
|
|
3337
3456
|
registerInstance(this, hostRef);
|
|
3338
3457
|
this.onclick = createEvent(this, "onclick", 7);
|
|
3339
3458
|
this.theme = window.CuraAPI.theme;
|
|
3340
|
-
this.size = 'medium';
|
|
3341
|
-
this.disabled = false;
|
|
3342
3459
|
this.selected = false;
|
|
3343
|
-
this.
|
|
3344
|
-
this.
|
|
3460
|
+
this.iconName = undefined;
|
|
3461
|
+
this.size = 'medium';
|
|
3462
|
+
this.counter = undefined;
|
|
3463
|
+
this.disabled = undefined;
|
|
3345
3464
|
this.background = 'light';
|
|
3346
|
-
this.
|
|
3465
|
+
this.color = 'primary';
|
|
3466
|
+
this.iconPosition = undefined;
|
|
3347
3467
|
this.hovered = false;
|
|
3348
3468
|
this.styles = {};
|
|
3349
3469
|
}
|
|
3350
3470
|
setColors() {
|
|
3351
3471
|
const colors = [
|
|
3352
|
-
{ name: '--color-
|
|
3353
|
-
{ name: '--color-
|
|
3354
|
-
{ name: '--color-
|
|
3355
|
-
{ name: '--
|
|
3356
|
-
{ name: '--
|
|
3357
|
-
{ name: '--
|
|
3472
|
+
{ name: '--color-border', thema: this.background === 'light' ? `${this.color}-darker` : 'neutral-white' },
|
|
3473
|
+
{ name: '--color-border-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-light` },
|
|
3474
|
+
{ name: '--color-background-hover', thema: this.background === 'light' ? `${this.color}-light` : `${this.color}-dark` },
|
|
3475
|
+
{ name: '--color-select', thema: this.background === 'light' ? `${this.color}-base` : 'neutral-white' },
|
|
3476
|
+
{ name: '--color-select-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-lighter` },
|
|
3477
|
+
{ name: '--color-select-focus', thema: this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter` },
|
|
3478
|
+
{ name: '--color-disable-select', thema: this.background === 'light' ? 'neutral-white' : 'neutral-black' },
|
|
3479
|
+
{ name: '--color-border-disable-unselect', thema: 'neutral-dark' },
|
|
3480
|
+
{ name: '--color-counter-disabled', thema: this.background === 'light' ? 'neutral-pale' : 'neutral-black' },
|
|
3481
|
+
{ name: '--color-counter', thema: !this.disabled && 'primary-lighter' },
|
|
3358
3482
|
];
|
|
3359
|
-
colors.forEach(color =>
|
|
3360
|
-
|
|
3361
|
-
});
|
|
3483
|
+
colors.forEach(color => (this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema)));
|
|
3484
|
+
this.styles = Object.assign({}, this.styles);
|
|
3362
3485
|
}
|
|
3363
|
-
|
|
3364
|
-
|
|
3365
|
-
|
|
3366
|
-
|
|
3367
|
-
this.
|
|
3368
|
-
|
|
3369
|
-
|
|
3370
|
-
|
|
3371
|
-
this.styles['--primary-base'] = this.theme.colors.getColor("primary-base");
|
|
3372
|
-
this.styles['--info-base'] = this.theme.colors.getColor("info-base");
|
|
3486
|
+
getClasses() {
|
|
3487
|
+
var _a;
|
|
3488
|
+
const classes = {};
|
|
3489
|
+
classes[`${(_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase()}`] = true;
|
|
3490
|
+
classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
|
|
3491
|
+
classes['disabled'] = this.disabled;
|
|
3492
|
+
classes['selected'] = this.selected;
|
|
3493
|
+
return classes;
|
|
3373
3494
|
}
|
|
3374
3495
|
connectedCallback() {
|
|
3375
|
-
this.
|
|
3496
|
+
this.weights = window.CuraAPI.theme.fonts.getWeights();
|
|
3497
|
+
this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
|
|
3498
|
+
this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
|
|
3499
|
+
this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
|
|
3500
|
+
this.styles['--font-weight-medium'] = this.weights.medium;
|
|
3376
3501
|
this.setColors();
|
|
3377
3502
|
}
|
|
3503
|
+
getLabelFontColor() {
|
|
3504
|
+
if (this.disabled)
|
|
3505
|
+
return 'neutral-dark';
|
|
3506
|
+
if (this.background === 'dark') {
|
|
3507
|
+
return this.selected ? 'neutral-black' : 'neutral-white';
|
|
3508
|
+
}
|
|
3509
|
+
if (this.background === 'light') {
|
|
3510
|
+
return this.selected ? 'neutral-white' : 'neutral-black';
|
|
3511
|
+
}
|
|
3512
|
+
}
|
|
3513
|
+
getColorCounter() {
|
|
3514
|
+
if (this.background === 'dark' && this.disabled) {
|
|
3515
|
+
return !this.selected ? 'neutral-black' : 'neutral-dark';
|
|
3516
|
+
}
|
|
3517
|
+
if (this.background === 'light' && this.disabled) {
|
|
3518
|
+
return 'neutral-pale';
|
|
3519
|
+
}
|
|
3520
|
+
return `${this.color}-lighter`;
|
|
3521
|
+
}
|
|
3522
|
+
getColorBagdeNumber() {
|
|
3523
|
+
if (this.background === 'dark' && this.disabled) {
|
|
3524
|
+
return this.selected ? 'neutral-black' : 'neutral-dark';
|
|
3525
|
+
}
|
|
3526
|
+
if (this.background === 'light' && this.disabled) {
|
|
3527
|
+
return 'neutral-medium';
|
|
3528
|
+
}
|
|
3529
|
+
return `${this.color}-darker`;
|
|
3530
|
+
}
|
|
3531
|
+
getIcon() {
|
|
3532
|
+
const iconSize = this.size === 'large' ? 20 : 16;
|
|
3533
|
+
if (this.iconPosition === 'right') {
|
|
3534
|
+
return;
|
|
3535
|
+
}
|
|
3536
|
+
return hAsync("cura-icon", { name: this.iconName, size: iconSize, color: this.getLabelFontColor() });
|
|
3537
|
+
}
|
|
3538
|
+
getCounter() {
|
|
3539
|
+
return (hAsync("cura-badge-number", { color: this.getColorCounter(), class: "badge-number" }, hAsync("cura-label", { color: this.getColorBagdeNumber(), size: "small" }, this.counter)));
|
|
3540
|
+
}
|
|
3541
|
+
getCheckIconRight() {
|
|
3542
|
+
const iconSize = this.size === 'large' ? 20 : 16;
|
|
3543
|
+
return hAsync("cura-icon", { name: "check", size: iconSize, color: this.getLabelFontColor() });
|
|
3544
|
+
}
|
|
3378
3545
|
handleMouseEnter() {
|
|
3379
3546
|
if (this.disabled)
|
|
3380
3547
|
return;
|
|
@@ -3383,61 +3550,40 @@ class CuraButtonOutline {
|
|
|
3383
3550
|
handleMouseLeave() {
|
|
3384
3551
|
this.hovered = false;
|
|
3385
3552
|
}
|
|
3386
|
-
assignColor() {
|
|
3387
|
-
if (!this.selected)
|
|
3388
|
-
return 'primary-base';
|
|
3389
|
-
const fontcolor = this.disabled
|
|
3390
|
-
? (this.background === 'light' ? 'neutral-medium' : 'primary-base')
|
|
3391
|
-
: this.selected && this.fontcolor === "dark" ? 'neutral-black' : "neutral-purewhite";
|
|
3392
|
-
return fontcolor;
|
|
3393
|
-
}
|
|
3394
|
-
getIcon() {
|
|
3395
|
-
if (!this.selected)
|
|
3396
|
-
return;
|
|
3397
|
-
const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
|
|
3398
|
-
const iconName = this.hovered ? 'closeCircle' : 'checkCircle';
|
|
3399
|
-
return hAsync("cura-icon", { class: "button-icon", name: iconName, size: iconSize, color: this.assignColor() });
|
|
3400
|
-
}
|
|
3401
3553
|
handleClick(e) {
|
|
3402
3554
|
if (this.disabled)
|
|
3403
3555
|
e.preventDefault();
|
|
3404
3556
|
this.selected = !this.selected;
|
|
3405
3557
|
this.onclick.emit({ selected: this.selected });
|
|
3406
3558
|
}
|
|
3407
|
-
getClasses() {
|
|
3408
|
-
const classes = {};
|
|
3409
|
-
classes[`${this.size.toLowerCase()}`] = true;
|
|
3410
|
-
classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
|
|
3411
|
-
classes['disabled'] = this.disabled;
|
|
3412
|
-
classes['selected'] = this.selected;
|
|
3413
|
-
return classes;
|
|
3414
|
-
}
|
|
3415
3559
|
render() {
|
|
3416
|
-
|
|
3560
|
+
const labelSize = labelSizes[this.size] || labelSizes['default'];
|
|
3561
|
+
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))));
|
|
3417
3562
|
}
|
|
3563
|
+
get host() { return getElement(this); }
|
|
3418
3564
|
static get watchers() { return {
|
|
3419
|
-
"background": ["setColors"
|
|
3420
|
-
"color": ["setColors"]
|
|
3421
|
-
"fontcolor": ["setColors", "assignColor"]
|
|
3565
|
+
"background": ["setColors"],
|
|
3566
|
+
"color": ["setColors"]
|
|
3422
3567
|
}; }
|
|
3423
3568
|
static get style() { return CuraButtonSelectStyle0; }
|
|
3424
3569
|
static get cmpMeta() { return {
|
|
3425
3570
|
"$flags$": 9,
|
|
3426
3571
|
"$tagName$": "cura-button-select",
|
|
3427
3572
|
"$members$": {
|
|
3573
|
+
"selected": [1540],
|
|
3574
|
+
"iconName": [1537, "icon-name"],
|
|
3428
3575
|
"size": [513],
|
|
3576
|
+
"counter": [1544],
|
|
3429
3577
|
"disabled": [516],
|
|
3430
|
-
"selected": [516],
|
|
3431
|
-
"iconPosition": [513, "icon-position"],
|
|
3432
|
-
"color": [1],
|
|
3433
3578
|
"background": [1],
|
|
3434
|
-
"
|
|
3579
|
+
"color": [1],
|
|
3580
|
+
"iconPosition": [513, "icon-position"],
|
|
3435
3581
|
"hovered": [32],
|
|
3436
3582
|
"styles": [32]
|
|
3437
3583
|
},
|
|
3438
3584
|
"$listeners$": undefined,
|
|
3439
3585
|
"$lazyBundleId$": "-",
|
|
3440
|
-
"$attrsToReflect$": [["size", "size"], ["
|
|
3586
|
+
"$attrsToReflect$": [["selected", "selected"], ["iconName", "icon-name"], ["size", "size"], ["counter", "counter"], ["disabled", "disabled"], ["iconPosition", "icon-position"]]
|
|
3441
3587
|
}; }
|
|
3442
3588
|
}
|
|
3443
3589
|
|
|
@@ -3528,7 +3674,7 @@ class CuraButtonTransparent {
|
|
|
3528
3674
|
render() {
|
|
3529
3675
|
const symbolColor = this.getSymbolColor();
|
|
3530
3676
|
const labelSize = labelSizes[this.size] || labelSizes["default"];
|
|
3531
|
-
return (hAsync(Host, { key: '
|
|
3677
|
+
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 })))));
|
|
3532
3678
|
}
|
|
3533
3679
|
static get formAssociated() { return true; }
|
|
3534
3680
|
static get watchers() { return {
|
|
@@ -7126,7 +7272,7 @@ var locale = {
|
|
|
7126
7272
|
};
|
|
7127
7273
|
var ptBR = locale;
|
|
7128
7274
|
|
|
7129
|
-
const curaCalendarCss = ":host{display:block;width:var(--width)}:host .calendar{display:flex;flex-direction:column;gap:5px;width:var(--width);
|
|
7275
|
+
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%}";
|
|
7130
7276
|
var CuraCalendarStyle0 = curaCalendarCss;
|
|
7131
7277
|
|
|
7132
7278
|
class CuraCalendar {
|
|
@@ -7137,7 +7283,9 @@ class CuraCalendar {
|
|
|
7137
7283
|
this.weights = this.theme.fonts.getWeights();
|
|
7138
7284
|
this.optionsLocale = { 'pt-BR': ptBR, 'en-US': enAU };
|
|
7139
7285
|
this.period = null;
|
|
7140
|
-
this.width = '
|
|
7286
|
+
this.width = '268px';
|
|
7287
|
+
this.minWidth = '268px';
|
|
7288
|
+
this.maxWidth = '400px';
|
|
7141
7289
|
this.mode = 'single';
|
|
7142
7290
|
this.dateFormat = 'yyyy-MM-dd';
|
|
7143
7291
|
this.locale = 'pt-BR';
|
|
@@ -7145,9 +7293,13 @@ class CuraCalendar {
|
|
|
7145
7293
|
this.disable = [];
|
|
7146
7294
|
this.enable = [];
|
|
7147
7295
|
this.defaultDate = [];
|
|
7296
|
+
this.customDates = [];
|
|
7148
7297
|
this.limitRange = null;
|
|
7149
|
-
this.disablePassDates =
|
|
7298
|
+
this.disablePassDates = undefined;
|
|
7299
|
+
this.disableFutureDates = undefined;
|
|
7150
7300
|
this.collapsed = null;
|
|
7301
|
+
this.floating = undefined;
|
|
7302
|
+
this.embedded = undefined;
|
|
7151
7303
|
this.currentDate = new Date();
|
|
7152
7304
|
this.selectedDates = [];
|
|
7153
7305
|
this.rangeStart = null;
|
|
@@ -7157,8 +7309,8 @@ class CuraCalendar {
|
|
|
7157
7309
|
this.styles = {};
|
|
7158
7310
|
}
|
|
7159
7311
|
connectedCallback() {
|
|
7160
|
-
this.initializeDefaultDates();
|
|
7161
7312
|
this.setFontProperties();
|
|
7313
|
+
this.initializeDefaultDates();
|
|
7162
7314
|
const colors = [
|
|
7163
7315
|
{ name: '--accent-base', theme: 'accent-base' },
|
|
7164
7316
|
{ name: '--accent-light', theme: 'accent-light' },
|
|
@@ -7167,7 +7319,7 @@ class CuraCalendar {
|
|
|
7167
7319
|
{ name: '--neutral-dark', theme: 'neutral-dark' },
|
|
7168
7320
|
{ name: '--neutral-light', theme: 'neutral-light' },
|
|
7169
7321
|
];
|
|
7170
|
-
colors.forEach(color => this.styles = Object.assign(Object.assign({}, this.styles), { [color.name]: this.theme.colors.getColor(color.theme) }));
|
|
7322
|
+
colors.forEach(color => (this.styles = Object.assign(Object.assign({}, this.styles), { [color.name]: this.theme.colors.getColor(color.theme) })));
|
|
7171
7323
|
}
|
|
7172
7324
|
setFontProperties() {
|
|
7173
7325
|
this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
|
|
@@ -7181,22 +7333,31 @@ class CuraCalendar {
|
|
|
7181
7333
|
* Initialize the selected dates based on defaultDate and mode.
|
|
7182
7334
|
*/
|
|
7183
7335
|
initializeDefaultDates() {
|
|
7336
|
+
if (typeof this.defaultDate === 'string') {
|
|
7337
|
+
const parsedDefaultDate = JSON.parse(this.defaultDate || '[]');
|
|
7338
|
+
if (typeof parsedDefaultDate === 'string') {
|
|
7339
|
+
this.defaultDate = [parsedDefaultDate];
|
|
7340
|
+
}
|
|
7341
|
+
else {
|
|
7342
|
+
this.defaultDate = parsedDefaultDate;
|
|
7343
|
+
}
|
|
7344
|
+
}
|
|
7184
7345
|
this.defaultDates = this.expandDateRanges(this.defaultDate);
|
|
7185
7346
|
}
|
|
7186
7347
|
/**
|
|
7187
|
-
|
|
7188
|
-
|
|
7189
|
-
|
|
7190
|
-
|
|
7348
|
+
* Get the locale for the calendar.
|
|
7349
|
+
*
|
|
7350
|
+
* @returns {Locale} The locale object.
|
|
7351
|
+
*/
|
|
7191
7352
|
determineLocale() {
|
|
7192
7353
|
return this.optionsLocale[this.locale] || this.locale;
|
|
7193
7354
|
}
|
|
7194
7355
|
/**
|
|
7195
|
-
|
|
7196
|
-
|
|
7197
|
-
|
|
7198
|
-
|
|
7199
|
-
|
|
7356
|
+
* Check if a date is within the valid period.
|
|
7357
|
+
*
|
|
7358
|
+
* @param {Date} date - The date to check.
|
|
7359
|
+
* @returns {boolean} Whether the date is valid.
|
|
7360
|
+
*/
|
|
7200
7361
|
isDateInValidPeriod(date) {
|
|
7201
7362
|
if (this.period === null) {
|
|
7202
7363
|
return true;
|
|
@@ -7232,6 +7393,8 @@ class CuraCalendar {
|
|
|
7232
7393
|
today.setHours(0, 0, 0, 0);
|
|
7233
7394
|
if (this.disablePassDates)
|
|
7234
7395
|
return isBefore(date, today);
|
|
7396
|
+
if (this.disableFutureDates)
|
|
7397
|
+
return isAfter(date, today);
|
|
7235
7398
|
if (this.disable === null)
|
|
7236
7399
|
return false;
|
|
7237
7400
|
return this.isDateInList(this.expandDateRanges(this.disable), date);
|
|
@@ -7248,12 +7411,12 @@ class CuraCalendar {
|
|
|
7248
7411
|
return this.isDateInList(this.expandDateRanges(this.enable), date);
|
|
7249
7412
|
}
|
|
7250
7413
|
/**
|
|
7251
|
-
|
|
7252
|
-
|
|
7253
|
-
|
|
7254
|
-
|
|
7255
|
-
|
|
7256
|
-
|
|
7414
|
+
* Checks if a date is in the provided list of dates.
|
|
7415
|
+
*
|
|
7416
|
+
* @param {Date[]} dates - The list of dates to check against.
|
|
7417
|
+
* @param {Date} date - The date to check.
|
|
7418
|
+
* @returns {boolean} Whether the date is in the list.
|
|
7419
|
+
*/
|
|
7257
7420
|
isDateInList(dates, date) {
|
|
7258
7421
|
return dates.some(d => isSameDay(d, date));
|
|
7259
7422
|
}
|
|
@@ -7308,6 +7471,8 @@ class CuraCalendar {
|
|
|
7308
7471
|
* @returns {Date[]} An array of individual dates.
|
|
7309
7472
|
*/
|
|
7310
7473
|
expandDateRanges(dates) {
|
|
7474
|
+
if (!dates)
|
|
7475
|
+
return [];
|
|
7311
7476
|
return dates.flatMap(date => {
|
|
7312
7477
|
if (typeof date === 'string')
|
|
7313
7478
|
return isValid(parseISO(date)) ? [parseISO(date)] : [];
|
|
@@ -7334,7 +7499,7 @@ class CuraCalendar {
|
|
|
7334
7499
|
*/
|
|
7335
7500
|
selectMultiplesDate(date) {
|
|
7336
7501
|
if (!this.isDateSelected(date) || !this.isDateInDefaultSelection(date))
|
|
7337
|
-
return this.selectedDates = [...this.selectedDates, date];
|
|
7502
|
+
return (this.selectedDates = [...this.selectedDates, date]);
|
|
7338
7503
|
this.selectedDates = this.removeDateFromSelection(this.selectedDates, date);
|
|
7339
7504
|
this.defaultDates = this.removeDateFromSelection(this.defaultDates, date);
|
|
7340
7505
|
}
|
|
@@ -7369,16 +7534,16 @@ class CuraCalendar {
|
|
|
7369
7534
|
const selectionHandlers = {
|
|
7370
7535
|
single: this.selectSingleDate.bind(this),
|
|
7371
7536
|
multiple: this.selectMultiplesDate.bind(this),
|
|
7372
|
-
range: this.selectDateRange.bind(this)
|
|
7537
|
+
range: this.selectDateRange.bind(this),
|
|
7373
7538
|
};
|
|
7374
7539
|
selectionHandlers[this.mode](date);
|
|
7375
7540
|
this.onchangeday.emit({ days: [...this.defaultDates, ...this.selectedDates].filter(d => this.isDateInValidPeriod(d)) });
|
|
7376
7541
|
}
|
|
7377
7542
|
/**
|
|
7378
|
-
|
|
7379
|
-
|
|
7380
|
-
|
|
7381
|
-
|
|
7543
|
+
* Get the days of the week.
|
|
7544
|
+
*
|
|
7545
|
+
* @returns {string[]} An array of abbreviated day names.
|
|
7546
|
+
*/
|
|
7382
7547
|
fetchWeekDays() {
|
|
7383
7548
|
const start = startOfWeek(new Date(2021, 0, 3), { locale: this.determineLocale() });
|
|
7384
7549
|
const end = endOfWeek(new Date(2021, 0, 3), { locale: this.determineLocale() });
|
|
@@ -7394,7 +7559,7 @@ class CuraCalendar {
|
|
|
7394
7559
|
this.fetchDaysOfWeek();
|
|
7395
7560
|
}
|
|
7396
7561
|
else
|
|
7397
|
-
|
|
7562
|
+
this.fetchDaysOfMonth();
|
|
7398
7563
|
this.collapsed = false;
|
|
7399
7564
|
}
|
|
7400
7565
|
showColapsedCalendar() {
|
|
@@ -7426,20 +7591,16 @@ class CuraCalendar {
|
|
|
7426
7591
|
const prevMonthEnd = endOfMonth(prevMonthStart);
|
|
7427
7592
|
const daysInPrevMonth = eachDayOfInterval({
|
|
7428
7593
|
start: subDays(prevMonthEnd, getDay(start)),
|
|
7429
|
-
end: prevMonthEnd
|
|
7594
|
+
end: prevMonthEnd,
|
|
7430
7595
|
});
|
|
7431
7596
|
const nextMonthStart = startOfMonth(addMonths(end, 1));
|
|
7432
7597
|
const nextMonthEnd = endOfMonth(nextMonthStart);
|
|
7433
7598
|
const remainingDays = WEEKS_IN_CALENDAR_VIEW - getDay(end);
|
|
7434
7599
|
const daysInNextMonth = eachDayOfInterval({
|
|
7435
7600
|
start: nextMonthStart,
|
|
7436
|
-
end: addDays(nextMonthEnd, remainingDays)
|
|
7601
|
+
end: addDays(nextMonthEnd, remainingDays),
|
|
7437
7602
|
});
|
|
7438
|
-
const totalDays = [
|
|
7439
|
-
...daysInPrevMonth.slice(-getDay(start)),
|
|
7440
|
-
...daysIncurrentDate,
|
|
7441
|
-
...daysInNextMonth
|
|
7442
|
-
];
|
|
7603
|
+
const totalDays = [...daysInPrevMonth.slice(-getDay(start)), ...daysIncurrentDate, ...daysInNextMonth];
|
|
7443
7604
|
return totalDays.slice(0, DAYS_IN_CALENDAR_VIEW);
|
|
7444
7605
|
}
|
|
7445
7606
|
/**
|
|
@@ -7452,7 +7613,7 @@ class CuraCalendar {
|
|
|
7452
7613
|
const locale = this.determineLocale();
|
|
7453
7614
|
const months = eachMonthOfInterval({
|
|
7454
7615
|
start: startOfYear(new Date(currentYear, 0, 1)),
|
|
7455
|
-
end: new Date(currentYear, 11, 31)
|
|
7616
|
+
end: new Date(currentYear, 11, 31),
|
|
7456
7617
|
}).map(month => format(month, 'MMMM', { locale }));
|
|
7457
7618
|
const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
|
|
7458
7619
|
return {
|
|
@@ -7469,20 +7630,20 @@ class CuraCalendar {
|
|
|
7469
7630
|
return Array.from({ length: 100 }, (_, i) => currentYear - i);
|
|
7470
7631
|
}
|
|
7471
7632
|
/**
|
|
7472
|
-
|
|
7473
|
-
|
|
7474
|
-
|
|
7475
|
-
|
|
7633
|
+
* Get the color for the previous button.
|
|
7634
|
+
*
|
|
7635
|
+
* @returns {string} The color name for the previous button.
|
|
7636
|
+
*/
|
|
7476
7637
|
determinePrevButtonColor() {
|
|
7477
7638
|
const isPrevDisabled = isBefore(new Date(getYear(this.currentDate), getMonth(this.currentDate) - 1, 1), startOfMonth(new Date()));
|
|
7478
7639
|
return isPrevDisabled && 'primary-base';
|
|
7479
7640
|
}
|
|
7480
7641
|
/**
|
|
7481
|
-
|
|
7482
|
-
|
|
7483
|
-
|
|
7484
|
-
|
|
7485
|
-
|
|
7642
|
+
* Get the status of a given date, determining its position and interval status.
|
|
7643
|
+
*
|
|
7644
|
+
* @param {Date | null} date - The date to evaluate.
|
|
7645
|
+
* @returns {Object} An object containing the status flags for the date.
|
|
7646
|
+
*/
|
|
7486
7647
|
getDateStatus(date) {
|
|
7487
7648
|
const [startSelected, endSelected] = [this.selectedDates[0], this.selectedDates[this.selectedDates.length - 1]];
|
|
7488
7649
|
const [startDefault, endDefault] = [this.defaultDates[0], this.defaultDates[this.defaultDates.length - 1]];
|
|
@@ -7512,7 +7673,7 @@ class CuraCalendar {
|
|
|
7512
7673
|
isSelected,
|
|
7513
7674
|
isRange,
|
|
7514
7675
|
isDefault,
|
|
7515
|
-
isInterval
|
|
7676
|
+
isInterval,
|
|
7516
7677
|
};
|
|
7517
7678
|
}
|
|
7518
7679
|
/**
|
|
@@ -7522,7 +7683,7 @@ class CuraCalendar {
|
|
|
7522
7683
|
* @returns {Object} An object containing the CSS classes for the date.
|
|
7523
7684
|
*/
|
|
7524
7685
|
getClasses(date) {
|
|
7525
|
-
const classes = {
|
|
7686
|
+
const classes = { date: true };
|
|
7526
7687
|
if (date === null)
|
|
7527
7688
|
return classes;
|
|
7528
7689
|
const dateStatus = this.getDateStatus(date);
|
|
@@ -7545,14 +7706,35 @@ class CuraCalendar {
|
|
|
7545
7706
|
getHostCSSProperties() {
|
|
7546
7707
|
return {
|
|
7547
7708
|
'--width': this.width,
|
|
7709
|
+
'--min-width': this.minWidth,
|
|
7710
|
+
'--max-width': this.maxWidth,
|
|
7548
7711
|
};
|
|
7549
7712
|
}
|
|
7713
|
+
watchDefaultDatesArray() {
|
|
7714
|
+
this.selectedDates = this.customDates;
|
|
7715
|
+
}
|
|
7716
|
+
handleDefaultDateChange(newValue) {
|
|
7717
|
+
if (typeof newValue === 'string') {
|
|
7718
|
+
const parsedDefaultDate = JSON.parse(newValue || '[]');
|
|
7719
|
+
if (typeof parsedDefaultDate === 'string') {
|
|
7720
|
+
newValue = [parsedDefaultDate];
|
|
7721
|
+
}
|
|
7722
|
+
else {
|
|
7723
|
+
newValue = parsedDefaultDate;
|
|
7724
|
+
}
|
|
7725
|
+
}
|
|
7726
|
+
this.defaultDates = this.expandDateRanges(newValue);
|
|
7727
|
+
}
|
|
7550
7728
|
render() {
|
|
7551
7729
|
const { months } = this.fetchMonthNames();
|
|
7552
|
-
return (hAsync(Host, { key: '
|
|
7553
|
-
this.fetchDaysOfMonth().map((day, index) => (hAsync("div", { key: index, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))
|
|
7554
|
-
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:
|
|
7730
|
+
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
|
|
7731
|
+
? this.fetchDaysOfMonth().map((day, index) => (hAsync("div", { key: index, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))
|
|
7732
|
+
: 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)));
|
|
7555
7733
|
}
|
|
7734
|
+
static get watchers() { return {
|
|
7735
|
+
"customDates": ["watchDefaultDatesArray"],
|
|
7736
|
+
"defaultDate": ["handleDefaultDateChange"]
|
|
7737
|
+
}; }
|
|
7556
7738
|
static get style() { return CuraCalendarStyle0; }
|
|
7557
7739
|
static get cmpMeta() { return {
|
|
7558
7740
|
"$flags$": 9,
|
|
@@ -7560,16 +7742,22 @@ class CuraCalendar {
|
|
|
7560
7742
|
"$members$": {
|
|
7561
7743
|
"period": [513],
|
|
7562
7744
|
"width": [513],
|
|
7745
|
+
"minWidth": [513, "min-width"],
|
|
7746
|
+
"maxWidth": [513, "max-width"],
|
|
7563
7747
|
"mode": [513],
|
|
7564
7748
|
"dateFormat": [1537, "date-format"],
|
|
7565
7749
|
"locale": [513],
|
|
7566
7750
|
"type": [513],
|
|
7567
7751
|
"disable": [16],
|
|
7568
7752
|
"enable": [16],
|
|
7569
|
-
"defaultDate": [
|
|
7753
|
+
"defaultDate": [1537, "default-date"],
|
|
7754
|
+
"customDates": [16],
|
|
7570
7755
|
"limitRange": [514, "limit-range"],
|
|
7571
7756
|
"disablePassDates": [1540, "disable-pass-dates"],
|
|
7757
|
+
"disableFutureDates": [1540, "disable-future-dates"],
|
|
7572
7758
|
"collapsed": [1540],
|
|
7759
|
+
"floating": [1540],
|
|
7760
|
+
"embedded": [1540],
|
|
7573
7761
|
"currentDate": [32],
|
|
7574
7762
|
"selectedDates": [32],
|
|
7575
7763
|
"rangeStart": [32],
|
|
@@ -7580,7 +7768,7 @@ class CuraCalendar {
|
|
|
7580
7768
|
},
|
|
7581
7769
|
"$listeners$": undefined,
|
|
7582
7770
|
"$lazyBundleId$": "-",
|
|
7583
|
-
"$attrsToReflect$": [["period", "period"], ["width", "width"], ["mode", "mode"], ["dateFormat", "date-format"], ["locale", "locale"], ["type", "type"], ["limitRange", "limit-range"], ["disablePassDates", "disable-pass-dates"], ["collapsed", "collapsed"]]
|
|
7771
|
+
"$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"]]
|
|
7584
7772
|
}; }
|
|
7585
7773
|
}
|
|
7586
7774
|
|
|
@@ -7623,7 +7811,7 @@ class CuraCard {
|
|
|
7623
7811
|
return classes;
|
|
7624
7812
|
}
|
|
7625
7813
|
render() {
|
|
7626
|
-
return (hAsync(Host, { key: '
|
|
7814
|
+
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)))));
|
|
7627
7815
|
}
|
|
7628
7816
|
static get style() { return CuraCardStyle0; }
|
|
7629
7817
|
static get cmpMeta() { return {
|
|
@@ -7659,7 +7847,7 @@ const formsSizes = {
|
|
|
7659
7847
|
},
|
|
7660
7848
|
};
|
|
7661
7849
|
|
|
7662
|
-
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
|
|
7850
|
+
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}";
|
|
7663
7851
|
var CuraCheckboxStyle0 = curaCheckboxCss;
|
|
7664
7852
|
|
|
7665
7853
|
class CuraCheckbox {
|
|
@@ -7818,7 +8006,7 @@ class CuraCheckbox {
|
|
|
7818
8006
|
return hAsync("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
|
|
7819
8007
|
}
|
|
7820
8008
|
render() {
|
|
7821
|
-
return (hAsync(Host, { key: '
|
|
8009
|
+
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()))));
|
|
7822
8010
|
}
|
|
7823
8011
|
static get formAssociated() { return true; }
|
|
7824
8012
|
get host() { return getElement(this); }
|
|
@@ -7920,7 +8108,7 @@ class CuraDisplay {
|
|
|
7920
8108
|
return tags[`${this.level}`] || tags['default'];
|
|
7921
8109
|
}
|
|
7922
8110
|
render() {
|
|
7923
|
-
return (hAsync(Host, { key: '
|
|
8111
|
+
return (hAsync(Host, { key: 'bf5c1121ffd1debb9b5763acdde1c7244b4afcc3', style: this.hostCSSProperties() }, this.getHeadingTag()));
|
|
7924
8112
|
}
|
|
7925
8113
|
get host() { return getElement(this); }
|
|
7926
8114
|
static get watchers() { return {
|
|
@@ -7969,7 +8157,7 @@ class CuraDistance {
|
|
|
7969
8157
|
this.formatDistance();
|
|
7970
8158
|
}
|
|
7971
8159
|
render() {
|
|
7972
|
-
return (hAsync(Host, { key: '
|
|
8160
|
+
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))));
|
|
7973
8161
|
}
|
|
7974
8162
|
setCssProperties() {
|
|
7975
8163
|
this.styles = {
|
|
@@ -7996,7 +8184,7 @@ class CuraDistance {
|
|
|
7996
8184
|
}; }
|
|
7997
8185
|
}
|
|
7998
8186
|
|
|
7999
|
-
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:
|
|
8187
|
+
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}";
|
|
8000
8188
|
var CuraDropdownSearchStyle0 = curaDropdownSearchCss;
|
|
8001
8189
|
|
|
8002
8190
|
class CuraDropdownSearch {
|
|
@@ -8005,6 +8193,28 @@ class CuraDropdownSearch {
|
|
|
8005
8193
|
this.valueChanged = createEvent(this, "valueChanged", 7);
|
|
8006
8194
|
this.onselect = createEvent(this, "onselect", 7);
|
|
8007
8195
|
this.overlayElement = null;
|
|
8196
|
+
this.adjustInputPosition = () => {
|
|
8197
|
+
window.visualViewport.addEventListener('resize', () => {
|
|
8198
|
+
var _a;
|
|
8199
|
+
const isKeyboardOpen = window.innerHeight < window.screen.height * 0.8;
|
|
8200
|
+
const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
|
|
8201
|
+
if (dropdown) {
|
|
8202
|
+
if (isKeyboardOpen) {
|
|
8203
|
+
dropdown.style.position = 'absolute';
|
|
8204
|
+
dropdown.style.bottom = `${window.screen.height - window.innerHeight}px`;
|
|
8205
|
+
}
|
|
8206
|
+
else {
|
|
8207
|
+
dropdown.style.position = 'fixed';
|
|
8208
|
+
dropdown.style.bottom = '0';
|
|
8209
|
+
}
|
|
8210
|
+
}
|
|
8211
|
+
window.scroll({
|
|
8212
|
+
top: 0,
|
|
8213
|
+
left: 0,
|
|
8214
|
+
behavior: 'smooth',
|
|
8215
|
+
});
|
|
8216
|
+
});
|
|
8217
|
+
};
|
|
8008
8218
|
this.handleSlotChange = () => {
|
|
8009
8219
|
this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));
|
|
8010
8220
|
this.addClickListenersToOptions();
|
|
@@ -8044,6 +8254,7 @@ class CuraDropdownSearch {
|
|
|
8044
8254
|
}
|
|
8045
8255
|
}
|
|
8046
8256
|
};
|
|
8257
|
+
this.size = 'large';
|
|
8047
8258
|
this.status = 'default';
|
|
8048
8259
|
this.disabled = false;
|
|
8049
8260
|
this.name = undefined;
|
|
@@ -8088,6 +8299,7 @@ class CuraDropdownSearch {
|
|
|
8088
8299
|
componentDidRender() {
|
|
8089
8300
|
if (this.isDropdownOpen && this.isMobile) {
|
|
8090
8301
|
this.showOverlay();
|
|
8302
|
+
this.getDropdownSearchListHeight();
|
|
8091
8303
|
}
|
|
8092
8304
|
else {
|
|
8093
8305
|
this.removeOverlay();
|
|
@@ -8095,9 +8307,11 @@ class CuraDropdownSearch {
|
|
|
8095
8307
|
}
|
|
8096
8308
|
componentDidLoad() {
|
|
8097
8309
|
window.addEventListener('resize', this.handleResize);
|
|
8310
|
+
window.addEventListener('resize', this.adjustInputPosition);
|
|
8098
8311
|
}
|
|
8099
8312
|
disconnectedCallback() {
|
|
8100
8313
|
window.removeEventListener('resize', this.handleResize);
|
|
8314
|
+
window.removeEventListener('resize', this.adjustInputPosition);
|
|
8101
8315
|
}
|
|
8102
8316
|
showOverlay() {
|
|
8103
8317
|
if (!this.overlayElement) {
|
|
@@ -8130,6 +8344,7 @@ class CuraDropdownSearch {
|
|
|
8130
8344
|
this.updateOptionAttribute('hovered', this.hoveredIndex);
|
|
8131
8345
|
this.updateOptionAttribute('selected', this.hoveredIndex);
|
|
8132
8346
|
this.scrollIntoView();
|
|
8347
|
+
this.adjustInputPosition();
|
|
8133
8348
|
}
|
|
8134
8349
|
onSelectedOption(index) {
|
|
8135
8350
|
const selectedOption = this.options[index];
|
|
@@ -8186,14 +8401,14 @@ class CuraDropdownSearch {
|
|
|
8186
8401
|
return {
|
|
8187
8402
|
'dropdown-input-search': true,
|
|
8188
8403
|
'dropdown-open': this.isDropdownOpen,
|
|
8189
|
-
disabled: this.disabled,
|
|
8404
|
+
'disabled': this.disabled,
|
|
8190
8405
|
[this.status]: true,
|
|
8191
8406
|
};
|
|
8192
8407
|
}
|
|
8193
8408
|
getDropdownClasses() {
|
|
8194
8409
|
return {
|
|
8195
8410
|
'dropdown-search-list': true,
|
|
8196
|
-
'visible': this.options.length && this.isDropdownOpen ? true : false
|
|
8411
|
+
'visible': this.options.length && this.isDropdownOpen ? true : false,
|
|
8197
8412
|
};
|
|
8198
8413
|
}
|
|
8199
8414
|
hostCSSProperties() {
|
|
@@ -8201,11 +8416,21 @@ class CuraDropdownSearch {
|
|
|
8201
8416
|
'--dropdown-max-height': this.dropdownMaxHeight,
|
|
8202
8417
|
};
|
|
8203
8418
|
}
|
|
8419
|
+
handleOnFocus() {
|
|
8420
|
+
this.isDropdownOpen = true;
|
|
8421
|
+
}
|
|
8422
|
+
getDropdownSearchListHeight() {
|
|
8423
|
+
var _a;
|
|
8424
|
+
const dropdownInputSearchElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-input-search');
|
|
8425
|
+
if (dropdownInputSearchElement) {
|
|
8426
|
+
this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);
|
|
8427
|
+
}
|
|
8428
|
+
}
|
|
8204
8429
|
render() {
|
|
8205
8430
|
const isMobileDropdown = this.isMobile && this.isDropdownOpen;
|
|
8206
|
-
return (hAsync(Host, { key: '
|
|
8431
|
+
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: () => {
|
|
8207
8432
|
this.handleOnBlur();
|
|
8208
|
-
}, placeholder: this.placeholder, size:
|
|
8433
|
+
}, 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 })))));
|
|
8209
8434
|
}
|
|
8210
8435
|
get host() { return getElement(this); }
|
|
8211
8436
|
static get watchers() { return {
|
|
@@ -8216,6 +8441,7 @@ class CuraDropdownSearch {
|
|
|
8216
8441
|
"$flags$": 9,
|
|
8217
8442
|
"$tagName$": "cura-dropdown-search",
|
|
8218
8443
|
"$members$": {
|
|
8444
|
+
"size": [1537],
|
|
8219
8445
|
"status": [513],
|
|
8220
8446
|
"disabled": [516],
|
|
8221
8447
|
"name": [513],
|
|
@@ -8238,7 +8464,7 @@ class CuraDropdownSearch {
|
|
|
8238
8464
|
},
|
|
8239
8465
|
"$listeners$": undefined,
|
|
8240
8466
|
"$lazyBundleId$": "-",
|
|
8241
|
-
"$attrsToReflect$": [["status", "status"], ["disabled", "disabled"], ["name", "name"], ["required", "required"], ["selected", "selected"], ["value", "value"], ["placeholder", "placeholder"], ["label", "label"], ["iconName", "icon-name"], ["dropdownMaxHeight", "dropdown-max-height"]]
|
|
8467
|
+
"$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"]]
|
|
8242
8468
|
}; }
|
|
8243
8469
|
}
|
|
8244
8470
|
|
|
@@ -8284,12 +8510,12 @@ class CuraDropdownSearchOption {
|
|
|
8284
8510
|
}
|
|
8285
8511
|
}
|
|
8286
8512
|
render() {
|
|
8287
|
-
return (hAsync(Host, { key: '
|
|
8513
|
+
return (hAsync(Host, { key: 'a084adaf6f89be71c8d5dc141705e7a71af353bb', slot: "dropdown-search-option" }, hAsync("div", { key: '58ac361d8f16fdab8ef07d3be3f9c12a8c4b85ef', style: this.styles, class: {
|
|
8288
8514
|
"option-container": true,
|
|
8289
8515
|
hovered: this.selectable ? this.hovered : false,
|
|
8290
8516
|
selected: this.selected,
|
|
8291
8517
|
disabled: !this.selectable
|
|
8292
|
-
} }, hAsync("div", { key: '
|
|
8518
|
+
} }, 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" })))));
|
|
8293
8519
|
}
|
|
8294
8520
|
get hostElement() { return getElement(this); }
|
|
8295
8521
|
static get watchers() { return {
|
|
@@ -8320,7 +8546,7 @@ class CuraDropdownSearchOptionTitle {
|
|
|
8320
8546
|
registerInstance(this, hostRef);
|
|
8321
8547
|
}
|
|
8322
8548
|
render() {
|
|
8323
|
-
return (hAsync(Host, { key: '
|
|
8549
|
+
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' }))));
|
|
8324
8550
|
}
|
|
8325
8551
|
static get style() { return CuraDropdownSearchOptionTitleStyle0; }
|
|
8326
8552
|
static get cmpMeta() { return {
|
|
@@ -8333,7 +8559,7 @@ class CuraDropdownSearchOptionTitle {
|
|
|
8333
8559
|
}; }
|
|
8334
8560
|
}
|
|
8335
8561
|
|
|
8336
|
-
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)
|
|
8562
|
+
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}";
|
|
8337
8563
|
var CuraHeadingStyle0 = curaHeadingCss;
|
|
8338
8564
|
|
|
8339
8565
|
class CuraHeading {
|
|
@@ -8374,17 +8600,18 @@ class CuraHeading {
|
|
|
8374
8600
|
};
|
|
8375
8601
|
}
|
|
8376
8602
|
hostCSSProperties() {
|
|
8603
|
+
const fontColor = this.color
|
|
8604
|
+
? this.theme.colors.getColor(this.color)
|
|
8605
|
+
: this.theme.fonts.getColor();
|
|
8377
8606
|
return {
|
|
8378
8607
|
'--margin-block': this.marginBlock,
|
|
8379
8608
|
'--font-size-base': this.fontSizeBase,
|
|
8380
|
-
'--line-height': this.lineHeight
|
|
8609
|
+
'--line-height': this.lineHeight,
|
|
8610
|
+
'--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),
|
|
8381
8611
|
};
|
|
8382
8612
|
}
|
|
8383
8613
|
setColors() {
|
|
8384
|
-
|
|
8385
|
-
? this.theme.colors.getColor(this.color)
|
|
8386
|
-
: this.theme.fonts.getColor();
|
|
8387
|
-
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}`) });
|
|
8614
|
+
this.styles = Object.assign(Object.assign({}, this.styles), { '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
|
|
8388
8615
|
}
|
|
8389
8616
|
getHeadingTag() {
|
|
8390
8617
|
const tags = {
|
|
@@ -8399,7 +8626,7 @@ class CuraHeading {
|
|
|
8399
8626
|
return tags[`${this.level}`] || tags['default'];
|
|
8400
8627
|
}
|
|
8401
8628
|
render() {
|
|
8402
|
-
return (hAsync(Host, { key: '
|
|
8629
|
+
return (hAsync(Host, { key: '4a130c7453ba61027050fc8f4a5739cad34d1c0a', style: this.hostCSSProperties() }, this.getHeadingTag()));
|
|
8403
8630
|
}
|
|
8404
8631
|
get host() { return getElement(this); }
|
|
8405
8632
|
static get watchers() { return {
|
|
@@ -8476,7 +8703,7 @@ class CuraIcon {
|
|
|
8476
8703
|
this.host.style.setProperty(prop, value);
|
|
8477
8704
|
}
|
|
8478
8705
|
render() {
|
|
8479
|
-
return (hAsync(Host, { key: '
|
|
8706
|
+
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}` }))));
|
|
8480
8707
|
}
|
|
8481
8708
|
get host() { return getElement(this); }
|
|
8482
8709
|
static get watchers() { return {
|
|
@@ -8520,9 +8747,9 @@ class CuraIconsView {
|
|
|
8520
8747
|
this.sizes.unshift(this.sizes.pop());
|
|
8521
8748
|
}
|
|
8522
8749
|
render() {
|
|
8523
|
-
return (hAsync(Host, { key: '
|
|
8524
|
-
hAsync("div", { class: "size" }, hAsync("cura-icon", { name: this.selected, size: size }), hAsync("span", null, size)))), hAsync("div", { key: '
|
|
8525
|
-
hAsync("div", { class: "size" }, hAsync("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), hAsync("span", null, size))))), hAsync("div", { key: '
|
|
8750
|
+
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) ? '' :
|
|
8751
|
+
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) ? '' :
|
|
8752
|
+
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) ? '' :
|
|
8526
8753
|
hAsync("cura-paragraph", { color: 'success-dark', size: "xsmall", "margin-block": "0px", "line-height": '100%' }, "MICRO"))))));
|
|
8527
8754
|
}
|
|
8528
8755
|
static get style() { return CuraIconsViewStyle0; }
|
|
@@ -8538,6 +8765,208 @@ class CuraIconsView {
|
|
|
8538
8765
|
}; }
|
|
8539
8766
|
}
|
|
8540
8767
|
|
|
8768
|
+
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}";
|
|
8769
|
+
var CuraInputDateStyle0 = curaInputDateCss;
|
|
8770
|
+
|
|
8771
|
+
class CuraInputDate {
|
|
8772
|
+
constructor(hostRef) {
|
|
8773
|
+
registerInstance(this, hostRef);
|
|
8774
|
+
this.dateChange = createEvent(this, "dateChange", 7);
|
|
8775
|
+
this.statusInputChange = createEvent(this, "statusInputChange", 7);
|
|
8776
|
+
this.label = '';
|
|
8777
|
+
this.status = 'default';
|
|
8778
|
+
this.size = 'medium';
|
|
8779
|
+
this.name = '';
|
|
8780
|
+
this.helperText = undefined;
|
|
8781
|
+
this.enableRangeDates = undefined;
|
|
8782
|
+
this.disableFutureDates = undefined;
|
|
8783
|
+
this.disablePassDates = undefined;
|
|
8784
|
+
this.iconName = '';
|
|
8785
|
+
this.placeholder = null;
|
|
8786
|
+
this.styles = {};
|
|
8787
|
+
this.isCalendarVisible = false;
|
|
8788
|
+
this.dates = [];
|
|
8789
|
+
this.value = '';
|
|
8790
|
+
this.dateSettings = {
|
|
8791
|
+
placeholder: null,
|
|
8792
|
+
mask: 'date',
|
|
8793
|
+
mode: 'single',
|
|
8794
|
+
};
|
|
8795
|
+
}
|
|
8796
|
+
connectedCallback() {
|
|
8797
|
+
const { fonts, colors, spacing } = window.CuraAPI.theme;
|
|
8798
|
+
const weights = fonts.getWeights();
|
|
8799
|
+
this.styles = {
|
|
8800
|
+
'--base-spacing': spacing.getSpacing(),
|
|
8801
|
+
'--neutral-purewhite': colors.getColor('neutral-purewhite'),
|
|
8802
|
+
'--neutral-lighter': colors.getColor('neutral-lighter'),
|
|
8803
|
+
'--neutral-base': colors.getColor('neutral-base'),
|
|
8804
|
+
'--font-size': fonts.getSize(),
|
|
8805
|
+
'--font-color': fonts.getColor(),
|
|
8806
|
+
'--font-family': fonts.getFamily(),
|
|
8807
|
+
'--font-weight-regular': weights.regular,
|
|
8808
|
+
};
|
|
8809
|
+
}
|
|
8810
|
+
componentWillLoad() {
|
|
8811
|
+
this.updateDateSettings();
|
|
8812
|
+
}
|
|
8813
|
+
/**
|
|
8814
|
+
* Callback for form association
|
|
8815
|
+
*/
|
|
8816
|
+
formAssociatedCallback(form) {
|
|
8817
|
+
form.ariaLabel = this.label;
|
|
8818
|
+
}
|
|
8819
|
+
updateDateSettings() {
|
|
8820
|
+
const newSettings = this.getDateSettings(this.enableRangeDates);
|
|
8821
|
+
if (this.shouldUpdateDateSettings(newSettings)) {
|
|
8822
|
+
this.dateSettings = newSettings;
|
|
8823
|
+
}
|
|
8824
|
+
}
|
|
8825
|
+
getDateSettings(isRange) {
|
|
8826
|
+
return {
|
|
8827
|
+
placeholder: this.placeholder || (isRange ? 'dd/mm/aaaa - dd/mm/aaaa' : 'dd/mm/aaaa'),
|
|
8828
|
+
mask: isRange ? 'dateRange' : 'date',
|
|
8829
|
+
mode: isRange ? 'range' : 'single',
|
|
8830
|
+
};
|
|
8831
|
+
}
|
|
8832
|
+
shouldUpdateDateSettings(newSettings) {
|
|
8833
|
+
return this.dateSettings.placeholder !== newSettings.placeholder || this.dateSettings.mask !== newSettings.mask || this.dateSettings.mode !== newSettings.mode;
|
|
8834
|
+
}
|
|
8835
|
+
handleClick(ev) {
|
|
8836
|
+
if (this.el.contains(ev.target)) {
|
|
8837
|
+
return;
|
|
8838
|
+
}
|
|
8839
|
+
this.hideCalendar();
|
|
8840
|
+
}
|
|
8841
|
+
hideCalendar() {
|
|
8842
|
+
this.isCalendarVisible = false;
|
|
8843
|
+
}
|
|
8844
|
+
showCalendar() {
|
|
8845
|
+
this.isCalendarVisible = true;
|
|
8846
|
+
}
|
|
8847
|
+
handleInputDates(event) {
|
|
8848
|
+
const inputValue = event.target.value;
|
|
8849
|
+
const dateRangeRegex = /^(\d{2}\/\d{2}\/\d{4})\s*-\s*(\d{2}\/\d{2}\/\d{4})$/;
|
|
8850
|
+
const simpleDateRegex = /^(\d{2}\/\d{2}\/\d{4})$/;
|
|
8851
|
+
if (dateRangeRegex.test(inputValue)) {
|
|
8852
|
+
const matches = inputValue.match(dateRangeRegex);
|
|
8853
|
+
const startDate = this.parseStringToDate(matches[1]);
|
|
8854
|
+
const endDate = this.parseStringToDate(matches[2]);
|
|
8855
|
+
if (this.isDateValid(startDate) && this.isDateValid(endDate)) {
|
|
8856
|
+
this.status = 'default';
|
|
8857
|
+
this.dates = [startDate, endDate];
|
|
8858
|
+
this.value = `${this.parseDateToString(startDate)} - ${this.parseDateToString(endDate)}`;
|
|
8859
|
+
this.dateChange.emit(this.value);
|
|
8860
|
+
}
|
|
8861
|
+
else {
|
|
8862
|
+
this.resetDates();
|
|
8863
|
+
}
|
|
8864
|
+
}
|
|
8865
|
+
else if (simpleDateRegex.test(inputValue)) {
|
|
8866
|
+
const matches = inputValue.match(simpleDateRegex);
|
|
8867
|
+
const singleDate = this.parseStringToDate(matches[1]);
|
|
8868
|
+
if (this.isDateValid(singleDate)) {
|
|
8869
|
+
this.status = 'default';
|
|
8870
|
+
this.dates = [singleDate];
|
|
8871
|
+
this.value = this.parseDateToString(singleDate);
|
|
8872
|
+
this.dateChange.emit(this.value);
|
|
8873
|
+
}
|
|
8874
|
+
else {
|
|
8875
|
+
this.resetDates();
|
|
8876
|
+
}
|
|
8877
|
+
}
|
|
8878
|
+
else {
|
|
8879
|
+
this.dates = [];
|
|
8880
|
+
}
|
|
8881
|
+
}
|
|
8882
|
+
handleChangeDates(event) {
|
|
8883
|
+
if (event.detail === '') {
|
|
8884
|
+
this.dates = [];
|
|
8885
|
+
this.status = 'default';
|
|
8886
|
+
this.value = '';
|
|
8887
|
+
this.dateChange.emit(this.value);
|
|
8888
|
+
this.statusInputChange.emit(this.status);
|
|
8889
|
+
}
|
|
8890
|
+
}
|
|
8891
|
+
isDateValid(date) {
|
|
8892
|
+
const today = new Date();
|
|
8893
|
+
today.setHours(0, 0, 0, 0);
|
|
8894
|
+
if (this.disablePassDates)
|
|
8895
|
+
return !isBefore(date, today);
|
|
8896
|
+
if (this.disableFutureDates)
|
|
8897
|
+
return !isAfter(date, today);
|
|
8898
|
+
return true;
|
|
8899
|
+
}
|
|
8900
|
+
parseStringToDate(dateString) {
|
|
8901
|
+
const [day, month, year] = dateString.split('/').map(Number);
|
|
8902
|
+
return new Date(year, month - 1, day);
|
|
8903
|
+
}
|
|
8904
|
+
parseDateToString(date) {
|
|
8905
|
+
const day = String(date.getDate()).padStart(2, '0');
|
|
8906
|
+
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
8907
|
+
const year = date.getFullYear();
|
|
8908
|
+
return `${day}/${month}/${year}`;
|
|
8909
|
+
}
|
|
8910
|
+
resetDates() {
|
|
8911
|
+
this.status = 'error';
|
|
8912
|
+
this.dates = [];
|
|
8913
|
+
this.statusInputChange.emit(this.status);
|
|
8914
|
+
}
|
|
8915
|
+
renderCalendarOrHelperText() {
|
|
8916
|
+
if (this.isCalendarVisible) {
|
|
8917
|
+
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 => {
|
|
8918
|
+
const days = e.detail.days;
|
|
8919
|
+
if (days.length === 1) {
|
|
8920
|
+
this.value = this.parseDateToString(days[0]);
|
|
8921
|
+
}
|
|
8922
|
+
else if (days.length > 0) {
|
|
8923
|
+
this.value = `${this.parseDateToString(days[0])} - ${this.parseDateToString(days[days.length - 1])}`;
|
|
8924
|
+
}
|
|
8925
|
+
else {
|
|
8926
|
+
this.value = '';
|
|
8927
|
+
}
|
|
8928
|
+
this.dateChange.emit(this.value);
|
|
8929
|
+
} })));
|
|
8930
|
+
}
|
|
8931
|
+
else {
|
|
8932
|
+
return this.helperText;
|
|
8933
|
+
}
|
|
8934
|
+
}
|
|
8935
|
+
render() {
|
|
8936
|
+
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()))));
|
|
8937
|
+
}
|
|
8938
|
+
static get formAssociated() { return true; }
|
|
8939
|
+
get el() { return getElement(this); }
|
|
8940
|
+
static get watchers() { return {
|
|
8941
|
+
"enableRangeDates": ["updateDateSettings"]
|
|
8942
|
+
}; }
|
|
8943
|
+
static get style() { return CuraInputDateStyle0; }
|
|
8944
|
+
static get cmpMeta() { return {
|
|
8945
|
+
"$flags$": 73,
|
|
8946
|
+
"$tagName$": "cura-input-date",
|
|
8947
|
+
"$members$": {
|
|
8948
|
+
"label": [513],
|
|
8949
|
+
"status": [1537],
|
|
8950
|
+
"size": [513],
|
|
8951
|
+
"name": [513],
|
|
8952
|
+
"helperText": [513, "helper-text"],
|
|
8953
|
+
"enableRangeDates": [516, "enable-range-dates"],
|
|
8954
|
+
"disableFutureDates": [516, "disable-future-dates"],
|
|
8955
|
+
"disablePassDates": [516, "disable-pass-dates"],
|
|
8956
|
+
"iconName": [513, "icon-name"],
|
|
8957
|
+
"placeholder": [513],
|
|
8958
|
+
"styles": [32],
|
|
8959
|
+
"isCalendarVisible": [32],
|
|
8960
|
+
"dates": [32],
|
|
8961
|
+
"value": [32],
|
|
8962
|
+
"dateSettings": [32]
|
|
8963
|
+
},
|
|
8964
|
+
"$listeners$": [[8, "click", "handleClick"]],
|
|
8965
|
+
"$lazyBundleId$": "-",
|
|
8966
|
+
"$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"]]
|
|
8967
|
+
}; }
|
|
8968
|
+
}
|
|
8969
|
+
|
|
8541
8970
|
/** Checks if value is string */
|
|
8542
8971
|
function isString(str) {
|
|
8543
8972
|
return typeof str === 'string' || str instanceof String;
|
|
@@ -12176,9 +12605,12 @@ const maskOptions = {
|
|
|
12176
12605
|
date: {
|
|
12177
12606
|
mask: '00/00/0000'
|
|
12178
12607
|
},
|
|
12608
|
+
dateRange: {
|
|
12609
|
+
mask: '00/00/0000 - 00/00/0000'
|
|
12610
|
+
},
|
|
12179
12611
|
};
|
|
12180
12612
|
|
|
12181
|
-
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}";
|
|
12613
|
+
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}";
|
|
12182
12614
|
var CuraInputTextStyle0 = curaInputTextCss;
|
|
12183
12615
|
|
|
12184
12616
|
class CuraInputText {
|
|
@@ -12206,6 +12638,7 @@ class CuraInputText {
|
|
|
12206
12638
|
this.disabled = false;
|
|
12207
12639
|
this.required = false;
|
|
12208
12640
|
this.maskPreset = undefined;
|
|
12641
|
+
this.enableSelectionMode = false;
|
|
12209
12642
|
this.maskRegex = undefined;
|
|
12210
12643
|
this.maskAdvanced = undefined;
|
|
12211
12644
|
this.maxlength = undefined;
|
|
@@ -12216,6 +12649,7 @@ class CuraInputText {
|
|
|
12216
12649
|
this.styles = {};
|
|
12217
12650
|
this.clearIcon = true;
|
|
12218
12651
|
this.hideErrorIcon = false;
|
|
12652
|
+
this.autocomplete = 'on';
|
|
12219
12653
|
}
|
|
12220
12654
|
/**
|
|
12221
12655
|
* Callback to restore the switch state from the form.
|
|
@@ -12278,6 +12712,7 @@ class CuraInputText {
|
|
|
12278
12712
|
isHovered: this.isHovered,
|
|
12279
12713
|
[this.status]: true,
|
|
12280
12714
|
transparent: this.mode === 'transparent',
|
|
12715
|
+
selection: this.enableSelectionMode,
|
|
12281
12716
|
};
|
|
12282
12717
|
}
|
|
12283
12718
|
getLabelColor() {
|
|
@@ -12472,7 +12907,7 @@ class CuraInputText {
|
|
|
12472
12907
|
e.preventDefault();
|
|
12473
12908
|
}
|
|
12474
12909
|
render() {
|
|
12475
|
-
return (hAsync(Host, { key: '
|
|
12910
|
+
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()))));
|
|
12476
12911
|
}
|
|
12477
12912
|
static get formAssociated() { return true; }
|
|
12478
12913
|
static get watchers() { return {
|
|
@@ -12503,6 +12938,7 @@ class CuraInputText {
|
|
|
12503
12938
|
"disabled": [516],
|
|
12504
12939
|
"required": [516],
|
|
12505
12940
|
"maskPreset": [8, "mask-preset"],
|
|
12941
|
+
"enableSelectionMode": [1540, "enable-selection-mode"],
|
|
12506
12942
|
"maskRegex": [1537, "mask-regex"],
|
|
12507
12943
|
"maskAdvanced": [1544, "mask-advanced"],
|
|
12508
12944
|
"maxlength": [1538],
|
|
@@ -12510,13 +12946,14 @@ class CuraInputText {
|
|
|
12510
12946
|
"isLoading": [1540, "is-loading"],
|
|
12511
12947
|
"clearIcon": [1540, "clear-icon"],
|
|
12512
12948
|
"hideErrorIcon": [4, "hide-error-icon"],
|
|
12949
|
+
"autocomplete": [513],
|
|
12513
12950
|
"isHovered": [32],
|
|
12514
12951
|
"isFocused": [32],
|
|
12515
12952
|
"styles": [32]
|
|
12516
12953
|
},
|
|
12517
12954
|
"$listeners$": undefined,
|
|
12518
12955
|
"$lazyBundleId$": "-",
|
|
12519
|
-
"$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"]]
|
|
12956
|
+
"$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"]]
|
|
12520
12957
|
}; }
|
|
12521
12958
|
}
|
|
12522
12959
|
|
|
@@ -12571,7 +13008,7 @@ class CuraLabel {
|
|
|
12571
13008
|
};
|
|
12572
13009
|
}
|
|
12573
13010
|
render() {
|
|
12574
|
-
return (hAsync(Host, { key: '
|
|
13011
|
+
return (hAsync(Host, { key: 'ae255523f9f465d4e9f76dccf24e127a73d35b46', style: this.hostCSSProperties() }, hAsync("p", { key: 'b517371dcedfcd256dff4fcaddfe40c946541513', style: this.styles, class: this.getClasses() }, hAsync("slot", { key: '38ed6316d7882ba14a1e1710091be8d12158cd74' }))));
|
|
12575
13012
|
}
|
|
12576
13013
|
get host() { return getElement(this); }
|
|
12577
13014
|
static get watchers() { return {
|
|
@@ -12618,7 +13055,7 @@ class CuraLoaderBar {
|
|
|
12618
13055
|
this.setProgress();
|
|
12619
13056
|
}
|
|
12620
13057
|
render() {
|
|
12621
|
-
return (hAsync(Host, { key: '
|
|
13058
|
+
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" }))));
|
|
12622
13059
|
}
|
|
12623
13060
|
setColor() {
|
|
12624
13061
|
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) });
|
|
@@ -12670,7 +13107,7 @@ class CuraLoaderCircle {
|
|
|
12670
13107
|
};
|
|
12671
13108
|
}
|
|
12672
13109
|
render() {
|
|
12673
|
-
return (hAsync(Host, { key: '
|
|
13110
|
+
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" }))))));
|
|
12674
13111
|
}
|
|
12675
13112
|
static get style() { return CuraLoaderCircleStyle0; }
|
|
12676
13113
|
static get cmpMeta() { return {
|
|
@@ -12705,7 +13142,7 @@ class CuraPageTemplate {
|
|
|
12705
13142
|
return classes;
|
|
12706
13143
|
}
|
|
12707
13144
|
render() {
|
|
12708
|
-
return (hAsync(Host, { key: '
|
|
13145
|
+
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' })))));
|
|
12709
13146
|
}
|
|
12710
13147
|
get host() { return getElement(this); }
|
|
12711
13148
|
static get style() { return CuraPageTemplateStyle0; }
|
|
@@ -12721,7 +13158,7 @@ class CuraPageTemplate {
|
|
|
12721
13158
|
}; }
|
|
12722
13159
|
}
|
|
12723
13160
|
|
|
12724
|
-
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}";
|
|
13161
|
+
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}";
|
|
12725
13162
|
var CuraParagraphStyle0 = curaParagraphCss;
|
|
12726
13163
|
|
|
12727
13164
|
class CuraParagraph {
|
|
@@ -12771,7 +13208,7 @@ class CuraParagraph {
|
|
|
12771
13208
|
};
|
|
12772
13209
|
}
|
|
12773
13210
|
render() {
|
|
12774
|
-
return (hAsync(Host, { key: '
|
|
13211
|
+
return (hAsync(Host, { key: '0ee9f41b45e758b509a18ab8ff216482d9c83af4', style: this.hostCSSProperties() }, hAsync("p", { key: '02edfbf600b0cb372e49ee8b6fc7192f19108997', style: this.styles, class: this.setsizeClass() }, hAsync("slot", { key: '0b2bd3c94a190999cc8a8dec94b14aae2af2fa09' }))));
|
|
12775
13212
|
}
|
|
12776
13213
|
get host() { return getElement(this); }
|
|
12777
13214
|
static get watchers() { return {
|
|
@@ -12928,7 +13365,7 @@ class CuraRadio {
|
|
|
12928
13365
|
return statusColors[this.status][type];
|
|
12929
13366
|
}
|
|
12930
13367
|
render() {
|
|
12931
|
-
return (hAsync(Host, { key: '
|
|
13368
|
+
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 }))));
|
|
12932
13369
|
}
|
|
12933
13370
|
static get formAssociated() { return true; }
|
|
12934
13371
|
get host() { return getElement(this); }
|
|
@@ -12962,7 +13399,7 @@ class CuraRadio {
|
|
|
12962
13399
|
}; }
|
|
12963
13400
|
}
|
|
12964
13401
|
|
|
12965
|
-
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}";
|
|
13402
|
+
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}";
|
|
12966
13403
|
var CuraSelectStyle0 = curaSelectCss;
|
|
12967
13404
|
|
|
12968
13405
|
class CuraSelect {
|
|
@@ -13048,6 +13485,7 @@ class CuraSelect {
|
|
|
13048
13485
|
this.status = 'default';
|
|
13049
13486
|
this.disabled = false;
|
|
13050
13487
|
this.required = false;
|
|
13488
|
+
this.searchBehavior = false;
|
|
13051
13489
|
this.isHovered = false;
|
|
13052
13490
|
this.isFocused = false;
|
|
13053
13491
|
this.isOpen = false;
|
|
@@ -13062,7 +13500,7 @@ class CuraSelect {
|
|
|
13062
13500
|
* Filters the options based on the current input value.
|
|
13063
13501
|
*/
|
|
13064
13502
|
filterOptions(newText) {
|
|
13065
|
-
if (!this.isOpen) {
|
|
13503
|
+
if (!this.isOpen || !this.searchBehavior) {
|
|
13066
13504
|
return;
|
|
13067
13505
|
}
|
|
13068
13506
|
this.options.forEach(option => {
|
|
@@ -13239,13 +13677,13 @@ class CuraSelect {
|
|
|
13239
13677
|
return (hAsync("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
|
|
13240
13678
|
}
|
|
13241
13679
|
render() {
|
|
13242
|
-
return (hAsync(Host, { key: '
|
|
13680
|
+
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: {
|
|
13243
13681
|
'cura-input-field': true,
|
|
13244
13682
|
'open': this.isOpen
|
|
13245
|
-
} }, this.renderIcon(), hAsync("input", { key: '
|
|
13683
|
+
} }, 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: {
|
|
13246
13684
|
'menu': true,
|
|
13247
13685
|
'open': this.isOpen
|
|
13248
|
-
} }, hAsync("slot", { key: '
|
|
13686
|
+
} }, hAsync("slot", { key: '3414977f685fd5f7692e1b5fbcf8b8af11992fba', name: 'option' }))))));
|
|
13249
13687
|
}
|
|
13250
13688
|
static get formAssociated() { return true; }
|
|
13251
13689
|
get host() { return getElement(this); }
|
|
@@ -13267,6 +13705,7 @@ class CuraSelect {
|
|
|
13267
13705
|
"status": [1537],
|
|
13268
13706
|
"disabled": [516],
|
|
13269
13707
|
"required": [516],
|
|
13708
|
+
"searchBehavior": [516, "search-behavior"],
|
|
13270
13709
|
"isHovered": [32],
|
|
13271
13710
|
"isFocused": [32],
|
|
13272
13711
|
"isOpen": [32],
|
|
@@ -13276,7 +13715,7 @@ class CuraSelect {
|
|
|
13276
13715
|
},
|
|
13277
13716
|
"$listeners$": undefined,
|
|
13278
13717
|
"$lazyBundleId$": "-",
|
|
13279
|
-
"$attrsToReflect$": [["label", "label"], ["placeholder", "placeholder"], ["value", "value"], ["mode", "mode"], ["size", "size"], ["status", "status"], ["disabled", "disabled"], ["required", "required"]]
|
|
13718
|
+
"$attrsToReflect$": [["label", "label"], ["placeholder", "placeholder"], ["value", "value"], ["mode", "mode"], ["size", "size"], ["status", "status"], ["disabled", "disabled"], ["required", "required"], ["searchBehavior", "search-behavior"]]
|
|
13280
13719
|
}; }
|
|
13281
13720
|
}
|
|
13282
13721
|
|
|
@@ -13318,7 +13757,7 @@ class CuraSelectOption {
|
|
|
13318
13757
|
};
|
|
13319
13758
|
}
|
|
13320
13759
|
render() {
|
|
13321
|
-
return (hAsync(Host, { key: '
|
|
13760
|
+
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" }))));
|
|
13322
13761
|
}
|
|
13323
13762
|
get host() { return getElement(this); }
|
|
13324
13763
|
static get watchers() { return {
|
|
@@ -13445,7 +13884,7 @@ class CuraSwitch {
|
|
|
13445
13884
|
return classes;
|
|
13446
13885
|
}
|
|
13447
13886
|
render() {
|
|
13448
|
-
return (hAsync(Host, { key: '
|
|
13887
|
+
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 }))))));
|
|
13449
13888
|
}
|
|
13450
13889
|
static get formAssociated() { return true; }
|
|
13451
13890
|
static get watchers() { return {
|
|
@@ -13501,7 +13940,7 @@ class CuraToast {
|
|
|
13501
13940
|
this.setStyle();
|
|
13502
13941
|
}
|
|
13503
13942
|
render() {
|
|
13504
|
-
return (hAsync(Host, { key: '
|
|
13943
|
+
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 }))));
|
|
13505
13944
|
}
|
|
13506
13945
|
componentDidLoad() {
|
|
13507
13946
|
this.openContainer();
|
|
@@ -13589,14 +14028,255 @@ class CuraToast {
|
|
|
13589
14028
|
}; }
|
|
13590
14029
|
}
|
|
13591
14030
|
|
|
14031
|
+
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}";
|
|
14032
|
+
var CuraTooltipStyle0 = curaTooltipCss;
|
|
14033
|
+
|
|
14034
|
+
const BREAKPOINT_SMALL_MAX = 768;
|
|
14035
|
+
class CuraTooltip {
|
|
14036
|
+
constructor(hostRef) {
|
|
14037
|
+
registerInstance(this, hostRef);
|
|
14038
|
+
this.tooltipClosed = createEvent(this, "tooltipClosed", 7);
|
|
14039
|
+
this.styles = {};
|
|
14040
|
+
this.handleClose = () => {
|
|
14041
|
+
this.closeContainer();
|
|
14042
|
+
};
|
|
14043
|
+
this.elementId = '';
|
|
14044
|
+
this.interactive = true;
|
|
14045
|
+
this.delay = 250;
|
|
14046
|
+
this.maxWidth = '280px';
|
|
14047
|
+
this.position = 'top';
|
|
14048
|
+
this.label = undefined;
|
|
14049
|
+
this.closeButton = false;
|
|
14050
|
+
this.isMobile = false;
|
|
14051
|
+
}
|
|
14052
|
+
onWindowResize() {
|
|
14053
|
+
this.setPosition(this.targetElement);
|
|
14054
|
+
}
|
|
14055
|
+
onWindowScroll() {
|
|
14056
|
+
this.setPosition(this.targetElement);
|
|
14057
|
+
}
|
|
14058
|
+
connectedCallback() {
|
|
14059
|
+
this.setStyle();
|
|
14060
|
+
}
|
|
14061
|
+
render() {
|
|
14062
|
+
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."))));
|
|
14063
|
+
}
|
|
14064
|
+
componentDidLoad() {
|
|
14065
|
+
this.targetElement = document.querySelector(`[aria-labelledby="${this.elementId}"]`);
|
|
14066
|
+
if (!this.interactive) {
|
|
14067
|
+
this.host.style.visibility = 'visible';
|
|
14068
|
+
}
|
|
14069
|
+
else {
|
|
14070
|
+
this.host.style.visibility = 'hidden';
|
|
14071
|
+
let openTimeoutID = null;
|
|
14072
|
+
let closeTimeoutID = null;
|
|
14073
|
+
this.targetElement.addEventListener('mouseenter', () => {
|
|
14074
|
+
clearTimeout(closeTimeoutID);
|
|
14075
|
+
openTimeoutID = setTimeout(() => {
|
|
14076
|
+
this.host.style.visibility = 'visible';
|
|
14077
|
+
}, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);
|
|
14078
|
+
});
|
|
14079
|
+
this.targetElement.addEventListener('mouseleave', () => {
|
|
14080
|
+
clearTimeout(openTimeoutID);
|
|
14081
|
+
closeTimeoutID = setTimeout(() => {
|
|
14082
|
+
this.handleClose();
|
|
14083
|
+
}, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);
|
|
14084
|
+
});
|
|
14085
|
+
this.host.addEventListener('mouseenter', () => {
|
|
14086
|
+
if (window.getComputedStyle(this.host).visibility === 'visible') {
|
|
14087
|
+
clearTimeout(closeTimeoutID);
|
|
14088
|
+
}
|
|
14089
|
+
});
|
|
14090
|
+
this.host.addEventListener('mouseleave', () => {
|
|
14091
|
+
clearTimeout(openTimeoutID);
|
|
14092
|
+
this.handleClose();
|
|
14093
|
+
});
|
|
14094
|
+
this.targetElement.addEventListener('click', () => {
|
|
14095
|
+
if (window.getComputedStyle(this.host).visibility === 'hidden') {
|
|
14096
|
+
openTimeoutID = setTimeout(() => {
|
|
14097
|
+
this.host.style.visibility = 'visible';
|
|
14098
|
+
}, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);
|
|
14099
|
+
}
|
|
14100
|
+
else {
|
|
14101
|
+
clearTimeout(openTimeoutID);
|
|
14102
|
+
this.handleClose();
|
|
14103
|
+
}
|
|
14104
|
+
});
|
|
14105
|
+
document.addEventListener('click', (event) => {
|
|
14106
|
+
if (!this.targetElement.contains(event.target) && !this.host.contains(event.target)) {
|
|
14107
|
+
clearTimeout(openTimeoutID);
|
|
14108
|
+
this.handleClose();
|
|
14109
|
+
}
|
|
14110
|
+
});
|
|
14111
|
+
}
|
|
14112
|
+
setTimeout(() => {
|
|
14113
|
+
this.setPosition(this.targetElement);
|
|
14114
|
+
}, 100);
|
|
14115
|
+
}
|
|
14116
|
+
setStyle() {
|
|
14117
|
+
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) });
|
|
14118
|
+
}
|
|
14119
|
+
getClasses() {
|
|
14120
|
+
const [firstPosition, secondPosition] = this.position.split('-');
|
|
14121
|
+
const classes = {};
|
|
14122
|
+
classes['container'] = true;
|
|
14123
|
+
if (firstPosition) {
|
|
14124
|
+
classes[firstPosition] = true;
|
|
14125
|
+
}
|
|
14126
|
+
if (secondPosition) {
|
|
14127
|
+
classes[secondPosition] = true;
|
|
14128
|
+
}
|
|
14129
|
+
return classes;
|
|
14130
|
+
}
|
|
14131
|
+
setPosition(element) {
|
|
14132
|
+
const windowWidth = window.innerWidth;
|
|
14133
|
+
const windowHeight = window.innerHeight;
|
|
14134
|
+
const container = this.host.shadowRoot.querySelector('.container');
|
|
14135
|
+
this.isMobile = windowWidth <= BREAKPOINT_SMALL_MAX;
|
|
14136
|
+
this.host.style.position = this.isMobile ? 'fixed' : 'absolute';
|
|
14137
|
+
this.host.style.bottom = this.isMobile ? '0' : 'unset';
|
|
14138
|
+
container.style.flexDirection = this.isMobile ? 'column' : 'row';
|
|
14139
|
+
if (this.isMobile) {
|
|
14140
|
+
this.host.style.left = 'unset';
|
|
14141
|
+
this.host.style.top = 'unset';
|
|
14142
|
+
return;
|
|
14143
|
+
}
|
|
14144
|
+
const elementRect = {
|
|
14145
|
+
top: element.offsetTop,
|
|
14146
|
+
left: element.offsetLeft,
|
|
14147
|
+
width: element.offsetWidth,
|
|
14148
|
+
height: element.offsetHeight
|
|
14149
|
+
};
|
|
14150
|
+
const tooltipRect = this.host.getBoundingClientRect();
|
|
14151
|
+
const SCREEN_LIMIT = 10;
|
|
14152
|
+
const SPACE_TO_ELEMENT = 10;
|
|
14153
|
+
const ARROW_HORIZONTAL_ADJUSTMENT = (elementRect.width * 0.5) + 18;
|
|
14154
|
+
const ARROW_VERTICAL_ADJUSTMENT = (elementRect.height * 0.5) + 18;
|
|
14155
|
+
const BORDER_COLOR = this.styles['--neutral-light'];
|
|
14156
|
+
let left = 0;
|
|
14157
|
+
let top = 0;
|
|
14158
|
+
const positions = Object.keys(this.getClasses()).filter((p) => ['top', 'left', 'bottom', 'right', 'start', 'end'].includes(p));
|
|
14159
|
+
const setArrowProperties = ({ arrowTop = '', arrowLeft = '', translate = '', borderColor = '' }) => {
|
|
14160
|
+
if (arrowLeft)
|
|
14161
|
+
this.host.style.setProperty('--arrow-left', arrowLeft);
|
|
14162
|
+
if (arrowTop)
|
|
14163
|
+
this.host.style.setProperty('--arrow-top', arrowTop);
|
|
14164
|
+
if (translate)
|
|
14165
|
+
this.host.style.setProperty('--arrow-translate', translate);
|
|
14166
|
+
if (borderColor)
|
|
14167
|
+
this.host.style.setProperty('--arrow-border-color', borderColor);
|
|
14168
|
+
};
|
|
14169
|
+
//Posicionamento vertical
|
|
14170
|
+
if (positions.includes('top') || positions.includes('bottom')) {
|
|
14171
|
+
setArrowProperties({ arrowLeft: '50%', translate: 'translateX(-50%)' });
|
|
14172
|
+
if (positions.includes('top')) {
|
|
14173
|
+
top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;
|
|
14174
|
+
setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });
|
|
14175
|
+
if (top < SCREEN_LIMIT) {
|
|
14176
|
+
top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;
|
|
14177
|
+
setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });
|
|
14178
|
+
}
|
|
14179
|
+
}
|
|
14180
|
+
if (positions.includes('bottom')) {
|
|
14181
|
+
top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;
|
|
14182
|
+
setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });
|
|
14183
|
+
if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {
|
|
14184
|
+
top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;
|
|
14185
|
+
setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });
|
|
14186
|
+
}
|
|
14187
|
+
}
|
|
14188
|
+
left = elementRect.left + (elementRect.width - tooltipRect.width) / 2;
|
|
14189
|
+
if (positions.includes('start')) {
|
|
14190
|
+
left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;
|
|
14191
|
+
setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });
|
|
14192
|
+
if (left < SCREEN_LIMIT) {
|
|
14193
|
+
left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;
|
|
14194
|
+
setArrowProperties({ arrowLeft: '18px' });
|
|
14195
|
+
}
|
|
14196
|
+
}
|
|
14197
|
+
if (positions.includes('end')) {
|
|
14198
|
+
left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;
|
|
14199
|
+
setArrowProperties({ arrowLeft: '18px' });
|
|
14200
|
+
if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {
|
|
14201
|
+
left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;
|
|
14202
|
+
setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });
|
|
14203
|
+
}
|
|
14204
|
+
}
|
|
14205
|
+
}
|
|
14206
|
+
//Posicionamento horizontal
|
|
14207
|
+
if (positions.includes('right') || positions.includes('left')) {
|
|
14208
|
+
setArrowProperties({ arrowTop: '50%', translate: 'translateY(-50%)' });
|
|
14209
|
+
if (positions.includes('right')) {
|
|
14210
|
+
left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;
|
|
14211
|
+
setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });
|
|
14212
|
+
if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {
|
|
14213
|
+
left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;
|
|
14214
|
+
setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });
|
|
14215
|
+
}
|
|
14216
|
+
}
|
|
14217
|
+
if (positions.includes('left')) {
|
|
14218
|
+
left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;
|
|
14219
|
+
setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });
|
|
14220
|
+
if (left < SCREEN_LIMIT) {
|
|
14221
|
+
left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;
|
|
14222
|
+
setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });
|
|
14223
|
+
}
|
|
14224
|
+
}
|
|
14225
|
+
top = elementRect.top + (elementRect.height - tooltipRect.height) / 2;
|
|
14226
|
+
if (positions.includes('start')) {
|
|
14227
|
+
top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;
|
|
14228
|
+
setArrowProperties({ arrowTop: 'calc(100% - 18px)' });
|
|
14229
|
+
if (top < SCREEN_LIMIT) {
|
|
14230
|
+
top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;
|
|
14231
|
+
setArrowProperties({ arrowTop: '18px' });
|
|
14232
|
+
}
|
|
14233
|
+
}
|
|
14234
|
+
if (positions.includes('end')) {
|
|
14235
|
+
top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;
|
|
14236
|
+
setArrowProperties({ arrowTop: '18px' });
|
|
14237
|
+
if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {
|
|
14238
|
+
top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;
|
|
14239
|
+
setArrowProperties({ arrowTop: 'calc(100% - 18px)' });
|
|
14240
|
+
}
|
|
14241
|
+
}
|
|
14242
|
+
}
|
|
14243
|
+
this.host.style.left = `${left}px`;
|
|
14244
|
+
this.host.style.top = `${top}px`;
|
|
14245
|
+
}
|
|
14246
|
+
closeContainer() {
|
|
14247
|
+
this.host.style.visibility = 'hidden';
|
|
14248
|
+
this.tooltipClosed.emit();
|
|
14249
|
+
}
|
|
14250
|
+
get host() { return getElement(this); }
|
|
14251
|
+
static get style() { return CuraTooltipStyle0; }
|
|
14252
|
+
static get cmpMeta() { return {
|
|
14253
|
+
"$flags$": 9,
|
|
14254
|
+
"$tagName$": "cura-tooltip",
|
|
14255
|
+
"$members$": {
|
|
14256
|
+
"elementId": [1, "element-id"],
|
|
14257
|
+
"interactive": [4],
|
|
14258
|
+
"delay": [2],
|
|
14259
|
+
"maxWidth": [1, "max-width"],
|
|
14260
|
+
"position": [513],
|
|
14261
|
+
"label": [513],
|
|
14262
|
+
"closeButton": [516, "close-button"],
|
|
14263
|
+
"isMobile": [32]
|
|
14264
|
+
},
|
|
14265
|
+
"$listeners$": [[9, "resize", "onWindowResize"], [9, "scroll", "onWindowScroll"]],
|
|
14266
|
+
"$lazyBundleId$": "-",
|
|
14267
|
+
"$attrsToReflect$": [["position", "position"], ["label", "label"], ["closeButton", "close-button"]]
|
|
14268
|
+
}; }
|
|
14269
|
+
}
|
|
14270
|
+
|
|
13592
14271
|
registerComponents([
|
|
13593
14272
|
CuraAccordion,
|
|
13594
14273
|
CuraAccordionItem,
|
|
13595
14274
|
CuraAlert,
|
|
13596
14275
|
CuraAvatar,
|
|
14276
|
+
CuraBadgeNumber,
|
|
13597
14277
|
CuraButton,
|
|
13598
|
-
CuraButtonOutline$1,
|
|
13599
14278
|
CuraButtonOutline,
|
|
14279
|
+
CuraButtonSelect,
|
|
13600
14280
|
CuraButtonTransparent,
|
|
13601
14281
|
CuraCalendar,
|
|
13602
14282
|
CuraCard,
|
|
@@ -13609,6 +14289,7 @@ registerComponents([
|
|
|
13609
14289
|
CuraHeading,
|
|
13610
14290
|
CuraIcon,
|
|
13611
14291
|
CuraIconsView,
|
|
14292
|
+
CuraInputDate,
|
|
13612
14293
|
CuraInputText,
|
|
13613
14294
|
CuraLabel,
|
|
13614
14295
|
CuraLoaderBar,
|
|
@@ -13620,6 +14301,7 @@ registerComponents([
|
|
|
13620
14301
|
CuraSelectOption,
|
|
13621
14302
|
CuraSwitch,
|
|
13622
14303
|
CuraToast,
|
|
14304
|
+
CuraTooltip,
|
|
13623
14305
|
]);
|
|
13624
14306
|
|
|
13625
14307
|
exports.hydrateApp = hydrateApp;
|