@rededor/cura-hydrate 0.4.4 → 0.5.1

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.
Files changed (2) hide show
  1. package/index.js +321 -115
  2. package/package.json +2 -2
package/index.js CHANGED
@@ -4948,7 +4948,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
4948
4948
 
4949
4949
 
4950
4950
  const NAMESPACE = 'cura';
4951
- const BUILD = /* cura */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, cssVarShim: false, devTools: false, disconnectedCallback: false, dynamicImportShim: false, element: false, event: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: false, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, safari10: false, scoped: 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: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
4951
+ const BUILD = /* cura */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, cssVarShim: false, devTools: false, disconnectedCallback: true, dynamicImportShim: false, element: false, event: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: 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, safari10: false, scoped: 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: false, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
4952
4952
 
4953
4953
  /**
4954
4954
  * Cura Default Theme
@@ -4957,25 +4957,25 @@ const ThemeDefault = {
4957
4957
  /* Colors */
4958
4958
  color: {
4959
4959
  primary: {
4960
- '100': '#71C5E8',
4961
- '300': '#449CD5',
4962
- '500': '#005EB8',
4963
- '700': '#004890',
4964
- '900': '#002855'
4960
+ '100': '113,197,232',
4961
+ '300': '68,142,205',
4962
+ '500': '0,61,165',
4963
+ '700': '0,48,117',
4964
+ '900': '0,40,85'
4965
4965
  },
4966
4966
  secondary: {
4967
- '100': '#F5ECE3',
4968
- '300': '#DDC0A2',
4969
- '500': '#CCA074',
4970
- '700': '#886B4D',
4971
- '900': '#292017'
4967
+ '100': '245,236,227',
4968
+ '300': '221,192,162',
4969
+ '500': '204,160,116',
4970
+ '700': '136,107,77',
4971
+ '900': '41,32,23'
4972
4972
  },
4973
4973
  accent: {
4974
- '100': '#FFC27B',
4975
- '300': '#FFA84A',
4976
- '500': '#FF8200',
4977
- '700': '#D7720A',
4978
- '900': '#9B5A1A'
4974
+ '100': '255,194,123',
4975
+ '300': '255,168,74',
4976
+ '500': '255,130,0',
4977
+ '700': '215,114,10',
4978
+ '900': '155,90,26'
4979
4979
  }
4980
4980
  },
4981
4981
  /* Spacing */
@@ -5008,25 +5008,25 @@ const ThemeMaternity = Object.assign(Object.assign({}, ThemeDefault), {
5008
5008
  /* Colors */
5009
5009
  color: {
5010
5010
  primary: {
5011
- '100': '#F8E3E2',
5012
- '300': '#FFB3AB',
5013
- '500': '#DA716F',
5014
- '700': '#914B4A',
5015
- '900': '#492625'
5011
+ '100': '248,227,226',
5012
+ '300': '255,179,171',
5013
+ '500': '218,113,111',
5014
+ '700': '145,75,74',
5015
+ '900': '73,38,37'
5016
5016
  },
5017
5017
  secondary: {
5018
- '100': '#FDFBF9',
5019
- '300': '#F7F4EE',
5020
- '500': '#F5ECE3',
5021
- '700': '#CCC5BD',
5022
- '900': '#A39D97'
5018
+ '100': '253,251,249',
5019
+ '300': '247,244,238',
5020
+ '500': '245,236,227',
5021
+ '700': '204,197,189',
5022
+ '900': '163,157,151'
5023
5023
  },
5024
5024
  accent: {
5025
- '100': '#ECEFF9',
5026
- '300': '#8599CB',
5027
- '500': '#0B1497',
5028
- '700': '#070D65',
5029
- '900': '#040732'
5025
+ '100': '236,239,249',
5026
+ '300': '133,153,203',
5027
+ '500': '11,20,151',
5028
+ '700': '7,13,101',
5029
+ '900': '4,7,50'
5030
5030
  }
5031
5031
  }, font: {
5032
5032
  size: '14px',
@@ -5052,32 +5052,32 @@ const ThemeOncology = Object.assign(Object.assign({}, ThemeDefault), {
5052
5052
  /* Colors */
5053
5053
  color: {
5054
5054
  primary: {
5055
- '100': '#AABEE1',
5056
- '300': '#557EC4',
5057
- '500': '#003DA6',
5058
- '700': '#00296F',
5059
- '900': '#000C21'
5055
+ '100': '170,190,225',
5056
+ '300': '85,126,196',
5057
+ '500': '0,61,166',
5058
+ '700': '0,41,111',
5059
+ '900': '0,12,33'
5060
5060
  },
5061
5061
  secondary: {
5062
- '100': '#CDD7E3',
5063
- '300': '#9BAFC7',
5064
- '500': '#6886AB',
5065
- '700': '#365E8F',
5066
- '900': '#043673',
5062
+ '100': '205,215,227',
5063
+ '300': '155,175,199',
5064
+ '500': '104,134,171',
5065
+ '700': '54,95,143',
5066
+ '900': '4,54,115',
5067
5067
  },
5068
5068
  accent: {
5069
- '100': '#99CFFF',
5070
- '300': '#47A9FF',
5071
- '500': '#0083F5',
5072
- '700': '#006DCC',
5073
- '900': '#0058A4',
5069
+ '100': '153,207,255',
5070
+ '300': '71,169,255',
5071
+ '500': '0,131,245',
5072
+ '700': '0,109,204',
5073
+ '900': '0,88,164',
5074
5074
  },
5075
5075
  aux: {
5076
- '100': '#DAF2EF',
5077
- '300': '#84D4CA',
5078
- '500': '#47BFB0',
5079
- '700': '#2F7F75',
5080
- '900': '#0E2623',
5076
+ '100': '218,242,239',
5077
+ '300': '132,212,202',
5078
+ '500': '71,191,176',
5079
+ '700': '33,100,92',
5080
+ '900': '14,38,35',
5081
5081
  },
5082
5082
  }, font: {
5083
5083
  size: '14px',
@@ -5095,10 +5095,41 @@ const ThemeOncology = Object.assign(Object.assign({}, ThemeDefault), {
5095
5095
  },
5096
5096
  } });
5097
5097
 
5098
+ /**
5099
+ * Legacy Default Theme
5100
+ */
5101
+ const ThemeLegacyDefault = Object.assign(Object.assign({}, ThemeDefault), {
5102
+ /* Custom */
5103
+ /* Colors */
5104
+ color: {
5105
+ primary: {
5106
+ '100': '204,217,231',
5107
+ '300': '85,128,174',
5108
+ '500': '0,65,134',
5109
+ '700': '0,43,89',
5110
+ '900': '0,13,27'
5111
+ },
5112
+ secondary: {
5113
+ '100': '238,232,206',
5114
+ '300': '198,180,92',
5115
+ '500': '170,142,11',
5116
+ '700': '113,95,7',
5117
+ '900': '34,28,2'
5118
+ },
5119
+ accent: {
5120
+ '100': '249,232,213',
5121
+ '300': '228,160,79',
5122
+ '500': '223,141,44',
5123
+ '700': '149,94,29',
5124
+ '900': '45,28,9'
5125
+ }
5126
+ } });
5127
+
5098
5128
  const ThemePresets = {
5099
5129
  'default': ThemeDefault,
5100
5130
  'maternidade': ThemeMaternity,
5101
5131
  'oncologia': ThemeOncology,
5132
+ 'legacyDefault': ThemeLegacyDefault
5102
5133
  };
5103
5134
 
5104
5135
  /**
@@ -5108,44 +5139,44 @@ const Static = {
5108
5139
  /* Colors */
5109
5140
  color: {
5110
5141
  success: {
5111
- '100': '#DFF6E9',
5112
- '300': '#94E1B5',
5113
- '500': '#5FD290',
5114
- '700': '#3F8C60',
5115
- '900': '#132A1D',
5142
+ '100': '223,246,233',
5143
+ '300': '148,225,181',
5144
+ '500': '95,210,144',
5145
+ '700': '49,115,77',
5146
+ '900': '19,42,29',
5116
5147
  },
5117
5148
  info: {
5118
- '100': '#CFE2FF',
5119
- '300': '#95BFFF',
5120
- '500': '#6EA8FF',
5121
- '700': '#517BBB',
5122
- '900': '#253855',
5149
+ '100': '207,226,255',
5150
+ '300': '149,191,255',
5151
+ '500': '110,168,255',
5152
+ '700': '66,100,153',
5153
+ '900': '37,56,85',
5123
5154
  },
5124
5155
  error: {
5125
- '100': '#FBDDDD',
5126
- '300': '#F28F8F',
5127
- '500': '#EB5757',
5128
- '700': '#9D3A3A',
5129
- '900': '#2F1111',
5156
+ '100': '251,221,221',
5157
+ '300': '242,143,143',
5158
+ '500': '235,87,87',
5159
+ '700': '157,58,58',
5160
+ '900': '47,17,17',
5130
5161
  },
5131
5162
  warning: {
5132
- '100': '#FCFAC4',
5133
- '300': '#F8F489',
5134
- '500': '#F5EF4E',
5135
- '700': '#A39F34',
5136
- '900': '#313010',
5163
+ '100': '252,250,196',
5164
+ '300': '248,244,137',
5165
+ '500': '245,239,78',
5166
+ '700': '108,106,32',
5167
+ '900': '49,48,16',
5137
5168
  },
5138
5169
  neutral: {
5139
- '0': '#FFFFFF',
5140
- '100': '#F6F6F6',
5141
- '200': '#E9E9E9',
5142
- '300': '#E2E2E2',
5143
- '400': '#D4D4D4',
5144
- '500': '#B7B7B7',
5145
- '600': '#929292',
5146
- '700': '#6E6E6E',
5147
- '800': '#4A4A4A',
5148
- '900': '#262626',
5170
+ '0': '255,255,255',
5171
+ '100': '246,246,246',
5172
+ '200': '233,233,233',
5173
+ '300': '226,226,226',
5174
+ '400': '212,212,212',
5175
+ '500': '183,183,183',
5176
+ '600': '146,146,146',
5177
+ '700': '110,110,110',
5178
+ '800': '74,74,74',
5179
+ '900': '38,38,38',
5149
5180
  },
5150
5181
  },
5151
5182
  breakpoints: {
@@ -5197,47 +5228,48 @@ class CuraThemeColorsModule {
5197
5228
  /**
5198
5229
  * Get theme color.
5199
5230
  * @param colorWithDepth string Ex.: primary-light
5200
- * @returns css color property. Color definition or related css var from the theme.
5231
+ * @returns RGBA value.
5201
5232
  */
5202
- getColor(colorWithDepth = "primary-base") {
5233
+ getColor(colorWithDepth = "primary-base", opacity = 1) {
5203
5234
  const { color, depth } = this.splitColorDepth(colorWithDepth);
5204
5235
  const staticColor = this.getStatic(color, depth);
5205
5236
  if (staticColor)
5206
5237
  return staticColor;
5207
- return this.getDynamic(color, depth);
5238
+ return this.getDynamic(color, depth, opacity);
5208
5239
  }
5209
5240
  /**
5210
5241
  * Internal: Look for static color by name and depth.
5211
5242
  * @param color Color name.
5212
5243
  * @param depth Depth number or alias.
5213
- * @returns Static color definition.
5244
+ * @returns RGBA value.
5214
5245
  */
5215
- getStatic(color, depth) {
5216
- var _a, _b, _c, _d;
5246
+ getStatic(color, depth, opacity = 1) {
5247
+ var _a, _b, _c;
5217
5248
  const colorObj = Static.color[color];
5218
5249
  if (!colorObj)
5219
5250
  return null;
5220
- return color === 'neutral'
5221
- ? ((_a = Static.color[color]) === null || _a === void 0 ? void 0 : _a[this.NeutralDepthAlias[depth]]) || ((_b = Static.color[color]) === null || _b === void 0 ? void 0 : _b[depth])
5222
- : ((_c = Static.color[color]) === null || _c === void 0 ? void 0 : _c[this.ColorDepthAlias[depth]]) || ((_d = Static.color[color]) === null || _d === void 0 ? void 0 : _d[depth]);
5251
+ const alias = color === 'neutral' ? this.NeutralDepthAlias[depth] : this.ColorDepthAlias[depth];
5252
+ return ((_a = Static.color[color]) === null || _a === void 0 ? void 0 : _a[alias])
5253
+ ? `rgba(${(_b = Static.color[color]) === null || _b === void 0 ? void 0 : _b[alias]}, ${opacity})`
5254
+ : `rgba(${(_c = Static.color[color]) === null || _c === void 0 ? void 0 : _c[depth]}, ${opacity})`;
5223
5255
  }
5224
5256
  /**
5225
5257
  * Internal: Look for theme dynamic colors.
5226
5258
  * @param color Color name.
5227
- * @param depth Depth number or alias.
5228
- * @returns Related CSS variable defined by the theme.
5259
+ * @param depth Color depth.
5260
+ * @returns RGBA value.
5229
5261
  */
5230
- getDynamic(color, depth) {
5262
+ getDynamic(color, depth, opacity) {
5231
5263
  const themeVar = this.ColorDepthAlias[depth]
5232
5264
  ? `--cura-color-${color}-${this.ColorDepthAlias[depth]}`
5233
5265
  : `--cura-color-${color}-${depth}`;
5234
- return getComputedStyle(document.body).getPropertyValue(themeVar)
5235
- ? `var(${themeVar})`
5236
- : `var(--cura-color-primary-500)`;
5266
+ return getComputedStyle(document.documentElement).getPropertyValue(themeVar)
5267
+ ? `rgba(var(${themeVar}), ${opacity})`
5268
+ : `rgba(var(--cura-color-primary-500), ${opacity})`;
5237
5269
  }
5238
5270
  /**
5239
5271
  * Internal: Split color strings
5240
- * @param colorWithDepth Color string [color]-[depth]. Ex.: primary-dark or primary-700.
5272
+ * @param colorWithDepth Color string [color]-[depth]. Ex.: primary-dark.
5241
5273
  * @returns Object { color: string, depth: string }.
5242
5274
  */
5243
5275
  splitColorDepth(colorWithDepth) {
@@ -5318,7 +5350,7 @@ class CuraThemeModule {
5318
5350
  /** Set css var based on object structure */
5319
5351
  this.setCssVar = (prop, path) => {
5320
5352
  const varName = this.groupPath(path, prop[0]);
5321
- this.body.style.setProperty(varName, prop[1]);
5353
+ this.rootElement.style.setProperty(varName, prop[1]);
5322
5354
  };
5323
5355
  this.groupPath = (a, b) => `${a}-${b}`;
5324
5356
  this.isObject = (val) => {
@@ -5348,7 +5380,7 @@ class CuraThemeModule {
5348
5380
  }
5349
5381
  }
5350
5382
  };
5351
- this.body = window.document.documentElement.querySelector('body');
5383
+ this.rootElement = window.document.documentElement;
5352
5384
  }
5353
5385
  /**
5354
5386
  * Load a theme.
@@ -5388,7 +5420,7 @@ class CuraAPI {
5388
5420
  load: function (themeTag) { themeModule.load(themeTag); },
5389
5421
  setCustom: function (customThemeDefinitions) { themeModule.setCustom(customThemeDefinitions); },
5390
5422
  colors: {
5391
- getColor: function (colorWithDepth) { return themeModule.colors.getColor(colorWithDepth); },
5423
+ getColor: function (colorWithDepth, opacity) { return themeModule.colors.getColor(colorWithDepth, opacity); },
5392
5424
  },
5393
5425
  fonts: {
5394
5426
  getFamily: function (type) { return themeModule.fonts.getFamily(type); },
@@ -5905,9 +5937,10 @@ const callRender = (e, t, o) => {
5905
5937
  }
5906
5938
  return null;
5907
5939
  }, postUpdateComponent = e => {
5908
- const t = e.$cmpMeta$.$tagName$, o = e.$hostElement$, n = createTime("postUpdate", t), l = e.$ancestorComponent$;
5940
+ const t = e.$cmpMeta$.$tagName$, o = e.$hostElement$, n = createTime("postUpdate", t), s = e.$lazyInstance$ , l = e.$ancestorComponent$;
5909
5941
  64 & e.$flags$ ? (n()) : (e.$flags$ |= 64, addHydratedFlag(o),
5910
- n(), (e.$onReadyResolve$(o), l || appDidLoad())), (e.$onRenderResolve$ && (e.$onRenderResolve$(),
5942
+ (safeCall(s, "componentDidLoad"),
5943
+ BUILD.isDev ), n(), (e.$onReadyResolve$(o), l || appDidLoad())), (e.$onRenderResolve$ && (e.$onRenderResolve$(),
5911
5944
  e.$onRenderResolve$ = void 0), 512 & e.$flags$ && nextTick((() => scheduleUpdate(e, !1))),
5912
5945
  e.$flags$ &= -517);
5913
5946
  }, appDidLoad = e => {
@@ -6181,6 +6214,166 @@ const cmpModules = new Map, getModule = e => {
6181
6214
  e["s-p"] = [], e["s-rc"] = [], hostRefs.set(e, o);
6182
6215
  }, styles = new Map;
6183
6216
 
6217
+ const curaAccordionCss = "/*!@:host*/.sc-cura-accordion-h{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)}/*!@:host::after*/.sc-cura-accordion-h::after{content:\"\";display:block;border-bottom:solid 1px var(--neutral-base);width:100%}";
6218
+
6219
+ class CuraAccordion {
6220
+ constructor(hostRef) {
6221
+ registerInstance(this, hostRef);
6222
+ this.mutationObserverCallback = (mutations, _) => {
6223
+ var _a;
6224
+ for (const mutation of mutations) {
6225
+ if (mutation.type === 'attributes' && mutation.attributeName === 'opened' && ((_a = mutation.target) === null || _a === void 0 ? void 0 : _a['opened'])) {
6226
+ if (this.behavior !== 'default')
6227
+ continue;
6228
+ this.host.querySelectorAll('cura-accordion-item').forEach(item => {
6229
+ if (item != mutation.target) {
6230
+ item.opened = false;
6231
+ }
6232
+ });
6233
+ }
6234
+ if (mutation.type === 'childList') {
6235
+ const addedNodes = Array.from(mutation.addedNodes || []);
6236
+ for (let node of addedNodes) {
6237
+ this.setChildProperties(node);
6238
+ }
6239
+ }
6240
+ }
6241
+ };
6242
+ this.mutationObserver = new MutationObserver(this.mutationObserverCallback);
6243
+ this.color = 'primary';
6244
+ this.activeColor = 'accent';
6245
+ this.colorMode = 'dark';
6246
+ this.iconSize = 32;
6247
+ this.openIcon = 'down';
6248
+ this.closeIcon = 'up';
6249
+ this.iconColor = '';
6250
+ this.iconActiveColor = '';
6251
+ this.behavior = 'default';
6252
+ this.styles = {};
6253
+ }
6254
+ handleChangeColor() {
6255
+ this.setColors();
6256
+ }
6257
+ connectedCallback() {
6258
+ const weights = window.CuraAPI.theme.fonts.getWeights();
6259
+ this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
6260
+ this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);
6261
+ this.styles['--neutral-lighter'] = window.CuraAPI.theme.colors.getColor(`neutral-lighter`);
6262
+ this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
6263
+ this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
6264
+ this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();
6265
+ this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
6266
+ this.styles['--font-weight-regular'] = weights.regular;
6267
+ this.setColors();
6268
+ }
6269
+ componentDidLoad() {
6270
+ this.host.querySelectorAll('cura-accordion-item').forEach(item => {
6271
+ this.setChildProperties(item);
6272
+ });
6273
+ const options = { childList: true, subtree: true, attributes: true };
6274
+ this.mutationObserver.observe(this.host, options);
6275
+ }
6276
+ disconnectedCallback() {
6277
+ this.mutationObserver.disconnect();
6278
+ }
6279
+ setChildProperties(item) {
6280
+ // Theme
6281
+ item.colorMode = this.colorMode;
6282
+ item.iconColor = this.iconColor || this.color;
6283
+ item.iconActiveColor = this.iconActiveColor || this.activeColor;
6284
+ // Icon
6285
+ item.iconSize = this.iconSize;
6286
+ item.openIcon = this.openIcon;
6287
+ item.closeIcon = this.closeIcon;
6288
+ }
6289
+ setColors() {
6290
+ this.styles = Object.assign(Object.assign({}, this.styles), { '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`), '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`), '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`), '--color-active-lighter': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-lighter`), '--color-active-light': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-light`), '--color-active-base': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-base`), '--color-active-dark': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-dark`), '--icon-color-lighter': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-lighter`), '--icon-color-light': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-light`), '--icon-color-base': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-base`), '--icon-color-dark': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-dark`), '--icon-color-active-lighter': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-lighter`), '--icon-color-active-light': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-light`), '--icon-color-active-base': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-base`), '--icon-color-active-dark': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-dark`) });
6291
+ }
6292
+ render() {
6293
+ return (hAsync(Host, { style: this.styles }, hAsync("slot", { name: 'accordion-item' })));
6294
+ }
6295
+ get host() { return getElement(this); }
6296
+ static get watchers() { return {
6297
+ "color": ["handleChangeColor"],
6298
+ "activeColor": ["handleChangeColor"]
6299
+ }; }
6300
+ static get style() { return curaAccordionCss; }
6301
+ static get cmpMeta() { return {
6302
+ "$flags$": 9,
6303
+ "$tagName$": "cura-accordion",
6304
+ "$members$": {
6305
+ "color": [513],
6306
+ "activeColor": [513, "active-color"],
6307
+ "colorMode": [513, "color-mode"],
6308
+ "iconSize": [514, "icon-size"],
6309
+ "openIcon": [513, "open-icon"],
6310
+ "closeIcon": [513, "close-icon"],
6311
+ "iconColor": [513, "icon-color"],
6312
+ "iconActiveColor": [513, "icon-active-color"],
6313
+ "behavior": [513],
6314
+ "styles": [32]
6315
+ },
6316
+ "$listeners$": undefined,
6317
+ "$lazyBundleId$": "-",
6318
+ "$attrsToReflect$": [["color", "color"], ["activeColor", "active-color"], ["colorMode", "color-mode"], ["iconSize", "icon-size"], ["openIcon", "open-icon"], ["closeIcon", "close-icon"], ["iconColor", "icon-color"], ["iconActiveColor", "icon-active-color"], ["behavior", "behavior"]]
6319
+ }; }
6320
+ }
6321
+
6322
+ const curaAccordionItemCss = "/*!@:host*/.sc-cura-accordion-item-h{display:block}/*!@:host .accordion-item*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item{width:100%}/*!@:host .accordion-item .label*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}/*!@:host .accordion-item .label::before*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item::before{content:\"\";display:block;border-top:solid 1px var(--neutral-base);width:100%}/*!@:host .accordion-item .label .label-container*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;gap:calc(var(--base-spacing) * 2px);min-height:40px;word-break:break-word;cursor:pointer;font-size:1.14em;font-weight:var(--font-weight-regular);color:var(--color-base);padding:0px}/*!@:host .accordion-item .label .label-container cura-icon*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item cura-icon.sc-cura-accordion-item{margin-right:4px}/*!@:host .accordion-item .label .label-container:hover*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover{color:var(--color-light)}/*!@:host .accordion-item .label .label-container:hover cura-icon*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover cura-icon.sc-cura-accordion-item{--color:var(--icon-color-light) !important}/*!@:host .accordion-item .label .label-container:active*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active{color:var(--color-dark)}/*!@:host .accordion-item .label .label-container:active cura-icon*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active cura-icon.sc-cura-accordion-item{--color:var(--icon-color-dark) !important}/*!@:host .accordion-item .content*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .content.sc-cura-accordion-item{font-size:1em;overflow:hidden;max-height:0;-webkit-transition:max-height 0.25s ease;transition:max-height 0.25s ease}/*!@:host .accordion-item .content .content-wrapper*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .content.sc-cura-accordion-item .content-wrapper.sc-cura-accordion-item{padding:calc(var(--base-spacing) * 2px) 0px;border-top:solid 1px var(--neutral-base)}/*!@:host .accordion-item.active .label .label-container*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{color:var(--color-active-base)}/*!@:host .accordion-item.active .label .label-container:hover*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover{color:var(--color-active-light)}/*!@:host .accordion-item.active .label .label-container:hover cura-icon*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover cura-icon.sc-cura-accordion-item{--color:var(--icon-color-active-light) !important}/*!@:host .accordion-item.active .label .label-container:active*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active{color:var(--color-active-dark)}/*!@:host .accordion-item.active .label .label-container:active cura-icon*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active cura-icon.sc-cura-accordion-item{--color:var(--icon-color-active-dark) !important}/*!@:host .accordion-item.active .content*/.sc-cura-accordion-item-h .accordion-item.active.sc-cura-accordion-item .content.sc-cura-accordion-item{max-height:200vh;overflow-y:auto;-webkit-transition:max-height 0.5s ease 0.14s;transition:max-height 0.5s ease 0.14s}/*!@:host .accordion-item.inverted .label .label-container*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{color:var(--neutral-lighter)}/*!@:host .accordion-item.inverted .label .label-container:hover*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover{color:var(--color-lighter)}/*!@:host .accordion-item.inverted .label .label-container:hover cura-icon*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover cura-icon.sc-cura-accordion-item{--color:var(--icon-color-lighter) !important}/*!@:host .accordion-item.inverted .label .label-container:active*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active{color:var(--color-light)}/*!@:host .accordion-item.inverted .label .label-container:active cura-icon*/.sc-cura-accordion-item-h .accordion-item.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active cura-icon.sc-cura-accordion-item{--color:var(--icon-color-light) !important}/*!@:host .accordion-item.active.inverted .label .label-container*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{color:var(--neutral-purewhite)}/*!@:host .accordion-item.active.inverted .label .label-container:hover*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover{color:var(--color-active-lighter)}/*!@:host .accordion-item.active.inverted .label .label-container:hover cura-icon*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:hover cura-icon.sc-cura-accordion-item{--color:var(--icon-color-active-lighter) !important}/*!@:host .accordion-item.active.inverted .label .label-container:active*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active{color:var(--color-active-light)}/*!@:host .accordion-item.active.inverted .label .label-container:active cura-icon*/.sc-cura-accordion-item-h .accordion-item.active.inverted.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item:active cura-icon.sc-cura-accordion-item{--color:var(--icon-color-active-light) !important}@media (min-width: 768px) and (max-width: 1365px){/*!@:host .accordion-item .label .label-container*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{font-size:1.29em}/*!@:host .accordion-item .content*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .content.sc-cura-accordion-item{font-size:1.14em}}@media (min-width: 1366px){/*!@:host .accordion-item .label .label-container*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .label.sc-cura-accordion-item .label-container.sc-cura-accordion-item{font-size:1.29em}/*!@:host .accordion-item .content*/.sc-cura-accordion-item-h .accordion-item.sc-cura-accordion-item .content.sc-cura-accordion-item{font-size:1.14em}}";
6323
+
6324
+ class CuraAccordionItem {
6325
+ constructor(hostRef) {
6326
+ registerInstance(this, hostRef);
6327
+ this.label = '';
6328
+ this.iconSize = 32;
6329
+ this.openIcon = 'down';
6330
+ this.closeIcon = 'up';
6331
+ this.iconColor = '';
6332
+ this.iconActiveColor = '';
6333
+ this.colorMode = 'dark';
6334
+ this.opened = false;
6335
+ this.styles = {};
6336
+ }
6337
+ getIconColor() {
6338
+ const inverted = this.colorMode === 'light';
6339
+ const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;
6340
+ const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;
6341
+ return this.opened ? iconActiveColor : iconColor;
6342
+ }
6343
+ getClasses() {
6344
+ const classes = {};
6345
+ classes['accordion-item'] = true;
6346
+ classes['active'] = this.opened;
6347
+ classes['inverted'] = this.colorMode === 'light';
6348
+ return classes;
6349
+ }
6350
+ accordionItemClick(_) {
6351
+ this.opened = !this.opened;
6352
+ }
6353
+ render() {
6354
+ return (hAsync(Host, { slot: "accordion-item" }, hAsync("div", { class: this.getClasses(), style: this.styles }, hAsync("div", { class: "label", onClick: e => this.accordionItemClick(e) }, hAsync("div", { class: "label-container" }, hAsync("span", null, this.label), hAsync("cura-icon", { name: this.opened ? this.closeIcon : this.openIcon, size: this.iconSize, color: this.getIconColor() }))), hAsync("div", { class: 'content' }, hAsync("div", { class: "content-wrapper" }, hAsync("slot", null))))));
6355
+ }
6356
+ static get style() { return curaAccordionItemCss; }
6357
+ static get cmpMeta() { return {
6358
+ "$flags$": 9,
6359
+ "$tagName$": "cura-accordion-item",
6360
+ "$members$": {
6361
+ "label": [513],
6362
+ "iconSize": [514, "icon-size"],
6363
+ "openIcon": [513, "open-icon"],
6364
+ "closeIcon": [513, "close-icon"],
6365
+ "iconColor": [513, "icon-color"],
6366
+ "iconActiveColor": [513, "icon-active-color"],
6367
+ "colorMode": [1, "color-mode"],
6368
+ "opened": [1540],
6369
+ "styles": [32]
6370
+ },
6371
+ "$listeners$": undefined,
6372
+ "$lazyBundleId$": "-",
6373
+ "$attrsToReflect$": [["label", "label"], ["iconSize", "icon-size"], ["openIcon", "open-icon"], ["closeIcon", "close-icon"], ["iconColor", "icon-color"], ["iconActiveColor", "icon-active-color"], ["opened", "opened"]]
6374
+ }; }
6375
+ }
6376
+
6184
6377
  const curaButtonCss = "/*!@:host*/.sc-cura-button-h{--border-radius:4px;display:inline-block;vertical-align:middle}/*!@:host button, :host a*/.sc-cura-button-h button.sc-cura-button,.sc-cura-button-h a.sc-cura-button{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);background-color:var(--color-base);border:none;padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}/*!@:host button:not(.isLoading):not(.disabled):hover, :host a:not(.isLoading):not(.disabled):hover*/.sc-cura-button-h button.sc-cura-button:not(.isLoading):not(.disabled):hover,.sc-cura-button-h a.sc-cura-button:not(.isLoading):not(.disabled):hover{background-color:var(--color-light)}/*!@:host button:not(.isLoading):not(.disabled):active, :host a:not(.isLoading):not(.disabled):active*/.sc-cura-button-h button.sc-cura-button:not(.isLoading):not(.disabled):active,.sc-cura-button-h a.sc-cura-button:not(.isLoading):not(.disabled):active{background-color:var(--color-dark)}/*!@:host button:hover, :host a:hover*/.sc-cura-button-h button.sc-cura-button:hover,.sc-cura-button-h a.sc-cura-button:hover{-webkit-box-shadow:0 4px 8px 0 rgba(38, 38, 38, 0.16);box-shadow:0 4px 8px 0 rgba(38, 38, 38, 0.16)}/*!@:host button.medium:hover, :host a.medium:hover*/.sc-cura-button-h button.medium.sc-cura-button:hover,.sc-cura-button-h a.medium.sc-cura-button:hover{-webkit-box-shadow:0 3px 6px 0 rgba(38, 38, 38, 0.16);box-shadow:0 3px 6px 0 rgba(38, 38, 38, 0.16)}/*!@:host button.small:hover, :host a.small:hover*/.sc-cura-button-h button.small.sc-cura-button:hover,.sc-cura-button-h a.small.sc-cura-button:hover{-webkit-box-shadow:0 2px 5px 0 rgba(38, 38, 38, 0.16);box-shadow:0 2px 5px 0 rgba(38, 38, 38, 0.16)}/*!@:host button:active, :host button.disabled:hover, :host button.isLoading:hover, :host a:active, :host a.disabled:hover, :host a.isLoading:hover*/.sc-cura-button-h button.sc-cura-button:active,.sc-cura-button-h button.disabled.sc-cura-button:hover,.sc-cura-button-h button.isLoading.sc-cura-button:hover,.sc-cura-button-h a.sc-cura-button:active,.sc-cura-button-h a.disabled.sc-cura-button:hover,.sc-cura-button-h a.isLoading.sc-cura-button:hover{-webkit-box-shadow:none !important;box-shadow:none !important}/*!@:host button.medium, :host a.medium*/.sc-cura-button-h button.medium.sc-cura-button,.sc-cura-button-h a.medium.sc-cura-button{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}/*!@:host button.small, :host a.small*/.sc-cura-button-h button.small.sc-cura-button,.sc-cura-button-h a.small.sc-cura-button{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}/*!@:host button .button-container, :host a .button-container*/.sc-cura-button-h button.sc-cura-button .button-container.sc-cura-button,.sc-cura-button-h a.sc-cura-button .button-container.sc-cura-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}/*!@:host button.icon-right .button-container, :host a.icon-right .button-container*/.sc-cura-button-h button.icon-right.sc-cura-button .button-container.sc-cura-button,.sc-cura-button-h a.icon-right.sc-cura-button .button-container.sc-cura-button{-ms-flex-direction:row-reverse;flex-direction:row-reverse}/*!@:host button .label, :host a .label*/.sc-cura-button-h button.sc-cura-button .label.sc-cura-button,.sc-cura-button-h a.sc-cura-button .label.sc-cura-button{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, \"left\");color:var(--neutral-black)}/*!@:host button .label.inverted, :host a .label.inverted*/.sc-cura-button-h button.sc-cura-button .label.inverted.sc-cura-button,.sc-cura-button-h a.sc-cura-button .label.inverted.sc-cura-button{color:var(--neutral-white)}/*!@:host button.medium .label, :host a.medium .label*/.sc-cura-button-h button.medium.sc-cura-button .label.sc-cura-button,.sc-cura-button-h a.medium.sc-cura-button .label.sc-cura-button{font-size:1.14em}/*!@:host button.small .label, :host a.small .label*/.sc-cura-button-h button.small.sc-cura-button .label.sc-cura-button,.sc-cura-button-h a.small.sc-cura-button .label.sc-cura-button{font-size:1em}/*!@:host button.icon-left cura-icon, :host a.icon-left cura-icon*/.sc-cura-button-h button.icon-left.sc-cura-button cura-icon.sc-cura-button,.sc-cura-button-h a.icon-left.sc-cura-button cura-icon.sc-cura-button{margin-right:calc(var(--base-spacing) * 3px)}/*!@:host button.icon-right cura-icon, :host a.icon-right cura-icon*/.sc-cura-button-h button.icon-right.sc-cura-button cura-icon.sc-cura-button,.sc-cura-button-h a.icon-right.sc-cura-button cura-icon.sc-cura-button{margin-left:calc(var(--base-spacing) * 3px)}/*!@:host button.medium.icon-left cura-icon, :host a.medium.icon-left cura-icon*/.sc-cura-button-h button.medium.icon-left.sc-cura-button cura-icon.sc-cura-button,.sc-cura-button-h a.medium.icon-left.sc-cura-button cura-icon.sc-cura-button{margin-right:calc(var(--base-spacing) * 2.7px)}/*!@:host button.medium.icon-right cura-icon, :host a.medium.icon-right cura-icon*/.sc-cura-button-h button.medium.icon-right.sc-cura-button cura-icon.sc-cura-button,.sc-cura-button-h a.medium.icon-right.sc-cura-button cura-icon.sc-cura-button{margin-left:calc(var(--base-spacing) * 2.7px)}/*!@:host button.small.icon-left cura-icon, :host a.small.icon-left cura-icon*/.sc-cura-button-h button.small.icon-left.sc-cura-button cura-icon.sc-cura-button,.sc-cura-button-h a.small.icon-left.sc-cura-button cura-icon.sc-cura-button{margin-right:calc(var(--base-spacing) * 2.5px)}/*!@:host button.small.icon-right cura-icon, :host a.small.icon-right cura-icon*/.sc-cura-button-h button.small.icon-right.sc-cura-button cura-icon.sc-cura-button,.sc-cura-button-h a.small.icon-right.sc-cura-button cura-icon.sc-cura-button{margin-left:calc(var(--base-spacing) * 2.5px)}/*!@:host button.disabled, :host a.disabled*/.sc-cura-button-h button.disabled.sc-cura-button,.sc-cura-button-h a.disabled.sc-cura-button{cursor:not-allowed;background-color:var(--neutral-light)}/*!@:host button.disabled .label, :host button.disabled .label.inverted, :host a.disabled .label, :host a.disabled .label.inverted*/.sc-cura-button-h button.disabled.sc-cura-button .label.sc-cura-button,.sc-cura-button-h button.disabled.sc-cura-button .label.inverted.sc-cura-button,.sc-cura-button-h a.disabled.sc-cura-button .label.sc-cura-button,.sc-cura-button-h a.disabled.sc-cura-button .label.inverted.sc-cura-button{color:var(--neutral-dark)}/*!@:host button.icon-only, :host a.icon-only*/.sc-cura-button-h button.icon-only.sc-cura-button,.sc-cura-button-h a.icon-only.sc-cura-button{padding:calc(var(--base-spacing) * 3.5px)}/*!@:host button.icon-only .label, :host a.icon-only .label*/.sc-cura-button-h button.icon-only.sc-cura-button .label.sc-cura-button,.sc-cura-button-h a.icon-only.sc-cura-button .label.sc-cura-button{display:none}/*!@:host button.icon-only cura-icon, :host a.icon-only cura-icon*/.sc-cura-button-h button.icon-only.sc-cura-button cura-icon.sc-cura-button,.sc-cura-button-h a.icon-only.sc-cura-button cura-icon.sc-cura-button{margin-left:0 !important;margin-right:0 !important}/*!@:host button.icon-only.medium, :host a.icon-only.medium*/.sc-cura-button-h button.icon-only.medium.sc-cura-button,.sc-cura-button-h a.icon-only.medium.sc-cura-button{padding:calc(var(--base-spacing) * 2.75px)}/*!@:host button.icon-only.small, :host a.icon-only.small*/.sc-cura-button-h button.icon-only.small.sc-cura-button,.sc-cura-button-h a.icon-only.small.sc-cura-button{padding:calc(var(--base-spacing) * 1.5px)}/*!@:host button cura-loader-circle, :host a cura-loader-circle*/.sc-cura-button-h button.sc-cura-button cura-loader-circle.sc-cura-button,.sc-cura-button-h a.sc-cura-button cura-loader-circle.sc-cura-button{position:absolute;display:none}/*!@:host button.isLoading, :host a.isLoading*/.sc-cura-button-h button.isLoading.sc-cura-button,.sc-cura-button-h a.isLoading.sc-cura-button{cursor:wait}/*!@:host button.isLoading .button-container, :host a.isLoading .button-container*/.sc-cura-button-h button.isLoading.sc-cura-button .button-container.sc-cura-button,.sc-cura-button-h a.isLoading.sc-cura-button .button-container.sc-cura-button{opacity:0.3}/*!@:host button.isLoading.icon-only .button-container, :host a.isLoading.icon-only .button-container*/.sc-cura-button-h button.isLoading.icon-only.sc-cura-button .button-container.sc-cura-button,.sc-cura-button-h a.isLoading.icon-only.sc-cura-button .button-container.sc-cura-button{opacity:0}/*!@:host button.isLoading cura-loader-circle, :host a.isLoading cura-loader-circle*/.sc-cura-button-h button.isLoading.sc-cura-button cura-loader-circle.sc-cura-button,.sc-cura-button-h a.isLoading.sc-cura-button cura-loader-circle.sc-cura-button{display:block}";
6185
6378
 
6186
6379
  class CuraButton {
@@ -6192,7 +6385,7 @@ class CuraButton {
6192
6385
  this.iconName = undefined;
6193
6386
  this.iconset = 'default';
6194
6387
  this.iconPosition = 'left';
6195
- this.iconOnly = undefined;
6388
+ this.iconOnly = false;
6196
6389
  this.href = undefined;
6197
6390
  this.target = "_self";
6198
6391
  this.color = 'accent';
@@ -6288,7 +6481,7 @@ class CuraButtonOutline {
6288
6481
  this.iconName = undefined;
6289
6482
  this.iconset = 'default';
6290
6483
  this.iconPosition = 'left';
6291
- this.iconOnly = undefined;
6484
+ this.iconOnly = false;
6292
6485
  this.href = undefined;
6293
6486
  this.target = "_self";
6294
6487
  this.color = 'accent';
@@ -6384,7 +6577,7 @@ class CuraButtonTransparent {
6384
6577
  this.iconName = undefined;
6385
6578
  this.iconset = 'default';
6386
6579
  this.iconPosition = 'left';
6387
- this.iconOnly = undefined;
6580
+ this.iconOnly = false;
6388
6581
  this.href = undefined;
6389
6582
  this.target = "_self";
6390
6583
  this.color = 'accent';
@@ -6689,7 +6882,7 @@ class CuraIcon {
6689
6882
  }; }
6690
6883
  }
6691
6884
 
6692
- var iconsetdefaulticons = ["360", "accessibility", "addUser", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "delete", "desktop", "doc", "down", "download", "duplicate", "edit", "exam", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "geotagUnity", "google", "graph", "healthPlan", "height", "height2", "home", "horizontalList", "imageUp", "infoCircle", "instagram", "key", "lamp", "language", "language2", "languageEN", "languagePT", "lattes", "left", "like", "link", "linkExternal", "linkedin", "list", "login", "logout", "mail", "medDoc", "medEspec", "medImg", "medUser", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "news", "notification", "npsDeslike", "npsHate", "npsLike", "npsLove", "npsNeutral", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profile2", "questionCircle", "questionSquare", "range", "reload", "ribbon", "right", "schedule", "scheduleHistorico", "search", "secure", "share", "sound", "soundOff", "subItem", "target", "team", "twitter", "unLink", "unSecure", "unity", "unlike", "up", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "wifiOff", "youtube", "zoomIn", "zoomOut"];
6885
+ var iconsetdefaulticons = ["360", "accessibility", "addUser", "airdrop", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "currency", "delete", "desktop", "doc", "down", "download", "duplicate", "edit", "exam", "examDoc", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "geotagUnity", "geotagUnityGroup", "google", "graph", "healthPlan", "heart", "height", "height2", "home", "horizontalList", "imageUp", "infoCircle", "instagram", "key", "lamp", "language", "language2", "languageEN", "languagePT", "lattes", "left", "like", "link", "linkExternal", "linkedin", "list", "login", "logout", "mail", "maintenance", "medDoc", "medEspec", "medImg", "medUser", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "news", "notification", "npsDeslike", "npsHate", "npsLike", "npsLove", "npsNeutral", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profileCircle", "questionCircle", "questionSquare", "range", "reload", "ribbon", "right", "schedule", "scheduleCheck", "scheduleHistorico", "search", "secure", "share", "siren", "sound", "soundOff", "subItem", "target", "team", "telegram", "twitter", "unLink", "unSecure", "unity", "unlike", "up", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "wifiOff", "youtube", "zoomIn", "zoomOut"];
6693
6886
 
6694
6887
  const curaIconsViewCss = "/*!@:host*/.sc-cura-icons-view-h{display:block;padding:24px;font-family:\"Roboto\", Arial, Helvetica, sans-serif}/*!@.iconDetail*/.iconDetail.sc-cura-icons-view{display:block}/*!@.iconSizes*/.iconSizes.sc-cura-icons-view{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@.iconSizes .size*/.iconSizes.sc-cura-icons-view .size.sc-cura-icons-view{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;text-align:center;margin-right:9px;padding:8px}/*!@.iconSizes .size:last-child*/.iconSizes.sc-cura-icons-view .size.sc-cura-icons-view:last-child{margin-right:0}/*!@.iconSizes .size span*/.iconSizes.sc-cura-icons-view .size.sc-cura-icons-view span.sc-cura-icons-view{font-size:10px}/*!@.iconSizes.invert*/.iconSizes.invert.sc-cura-icons-view{margin-top:12px}/*!@.iconSizes.invert .size*/.iconSizes.invert.sc-cura-icons-view .size.sc-cura-icons-view{background-color:#262626;color:#F6F6F6;border-radius:3px}/*!@.icons*/.icons.sc-cura-icons-view{margin-top:28px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative}/*!@.icons .icon*/.icons.sc-cura-icons-view .icon.sc-cura-icons-view{position:relative;padding:4px;cursor:pointer;opacity:0.6;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}/*!@.icons .icon span*/.icons.sc-cura-icons-view .icon.sc-cura-icons-view span.sc-cura-icons-view{font-size:12px;padding:6px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#000;color:#FFF;border-radius:2px;position:absolute;top:-2px;left:50%;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%);display:none}/*!@.icons .icon:hover*/.icons.sc-cura-icons-view .icon.sc-cura-icons-view:hover{opacity:1}/*!@.icons .icon:hover span*/.icons.sc-cura-icons-view .icon.sc-cura-icons-view:hover span.sc-cura-icons-view{display:block}";
6695
6888
 
@@ -6792,7 +6985,7 @@ class CuraPageTemplate {
6792
6985
  }; }
6793
6986
  }
6794
6987
 
6795
- const curaParagraphCss = "/*!@:host*/.sc-cura-paragraph-h{display:block;font-size:var(--font-size)}/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:140%;letter-spacing:2%;-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}/*!@:host p.large*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.21em;line-height:150%;letter-spacing:0%}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:0.85em;line-height:135%;letter-spacing:4%}/*!@:host p.caption*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph{font-size:0.71em;line-height:135%;letter-spacing:6%}@media (min-width: 768px) and (max-width: 1365px){/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-size:1.14em;line-height:145%}/*!@:host p.large*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.35em;line-height:150%}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:1em;line-height:135%}/*!@:host p.caption*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph{font-size:0.85em;line-height:135%;letter-spacing:6%}}@media (min-width: 1366px){/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-size:1.42em;line-height:150%;letter-spacing:0%}/*!@:host p.large*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.71em;line-height:160%}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:1.21em;line-height:145%;letter-spacing:0%}/*!@:host p.caption*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph{font-size:1em;line-height:145%;letter-spacing:2%}}/*!@:host ::slotted(b), :host ::slotted(strong)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>b,.sc-cura-paragraph-h .sc-cura-paragraph-s>strong{font-weight:var(--font-weight-bold)}/*!@:host ::slotted(a)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>a{font-weight:var(--font-weight-medium);color:var(--color-link);text-underline-offset:10%}/*!@:host ::slotted(abbr)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>abbr{color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
6988
+ const curaParagraphCss = "/*!@:host*/.sc-cura-paragraph-h{display:block;font-size:var(--font-size)}/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}/*!@:host p.large*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.21em;line-height:calc(var(--line-height) + 10%)}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:0.85em;line-height:calc(var(--line-height) - 5%)}/*!@:host p.caption*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph{font-size:0.71em;line-height:calc(var(--line-height) - 5%)}@media (min-width: 768px) and (max-width: 1365px){/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-size:1.14em;line-height:calc(var(--line-height) + 5%)}/*!@:host p.large*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.35em;line-height:calc(var(--line-height) + 10%)}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:1em;line-height:calc(var(--line-height) - 5%)}/*!@:host p.caption*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph{font-size:0.85em;line-height:calc(var(--line-height) - 5%)}}@media (min-width: 1366px){/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-size:1.42em;line-height:calc(var(--line-height) + 10%)}/*!@:host p.large*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.71em;line-height:calc(var(--line-height) + 20%)}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:1.21em;line-height:calc(var(--line-height) + 5%)}/*!@:host p.caption*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph{font-size:1em;line-height:calc(var(--line-height) + 5%)}}/*!@:host ::slotted(b), :host ::slotted(strong)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>b,.sc-cura-paragraph-h .sc-cura-paragraph-s>strong{font-weight:var(--font-weight-bold)}/*!@:host ::slotted(a)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>a{font-weight:var(--font-weight-medium);color:var(--color-link);text-underline-offset:10%}/*!@:host ::slotted(abbr)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>abbr{color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
6796
6989
 
6797
6990
  class CuraParagraph {
6798
6991
  constructor(hostRef) {
@@ -6800,6 +6993,11 @@ class CuraParagraph {
6800
6993
  this.size = 'regular';
6801
6994
  this.inverted = false;
6802
6995
  this.spotColor = 'primary';
6996
+ this.color = undefined;
6997
+ this.styles = {};
6998
+ }
6999
+ handleChangeColor() {
7000
+ this.setColors();
6803
7001
  }
6804
7002
  connectedCallback() {
6805
7003
  this.weights = window.CuraAPI.theme.fonts.getWeights();
@@ -6821,15 +7019,16 @@ class CuraParagraph {
6821
7019
  };
6822
7020
  this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
6823
7021
  this.setHostProperty('--block-margin', '1.25em');
7022
+ this.setHostProperty('--line-height', '140%');
6824
7023
  }
6825
7024
  setColors() {
6826
- const fontColor = this.inverted
6827
- ? window.CuraAPI.theme.colors.getColor('neutral-white')
6828
- : window.CuraAPI.theme.fonts.getColor();
6829
- this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
6830
- this.styles['--color-link'] = this.inverted
6831
- ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
6832
- : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);
7025
+ const fontColor = this.color ? window.CuraAPI.theme.colors.getColor(this.color) :
7026
+ this.inverted
7027
+ ? window.CuraAPI.theme.colors.getColor('neutral-white')
7028
+ : window.CuraAPI.theme.fonts.getColor();
7029
+ this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker'), '--color-link': this.inverted
7030
+ ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
7031
+ : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`) });
6833
7032
  }
6834
7033
  setHostProperty(prop, value) {
6835
7034
  this.host.style.setProperty(prop, value);
@@ -6838,6 +7037,9 @@ class CuraParagraph {
6838
7037
  return (hAsync(Host, null, hAsync("p", { style: this.styles, class: this.setsizeClass() }, hAsync("slot", null))));
6839
7038
  }
6840
7039
  get host() { return getElement(this); }
7040
+ static get watchers() { return {
7041
+ "color": ["handleChangeColor"]
7042
+ }; }
6841
7043
  static get style() { return curaParagraphCss; }
6842
7044
  static get cmpMeta() { return {
6843
7045
  "$flags$": 9,
@@ -6845,7 +7047,9 @@ class CuraParagraph {
6845
7047
  "$members$": {
6846
7048
  "size": [513],
6847
7049
  "inverted": [516],
6848
- "spotColor": [513, "spot-color"]
7050
+ "spotColor": [513, "spot-color"],
7051
+ "color": [8],
7052
+ "styles": [32]
6849
7053
  },
6850
7054
  "$listeners$": undefined,
6851
7055
  "$lazyBundleId$": "-",
@@ -6854,6 +7058,8 @@ class CuraParagraph {
6854
7058
  }
6855
7059
 
6856
7060
  registerComponents([
7061
+ CuraAccordion,
7062
+ CuraAccordionItem,
6857
7063
  CuraButton,
6858
7064
  CuraButtonOutline,
6859
7065
  CuraButtonTransparent,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@rededor/cura-hydrate",
3
3
  "description": "cura component hydration app.",
4
- "version": "0.4.4",
5
4
  "main": "index.js",
6
- "types": "index.d.ts"
5
+ "types": "index.d.ts",
6
+ "version": "0.5.1"
7
7
  }