@rededor/cura-hydrate 0.5.1 → 0.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +186 -88
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -5194,10 +5194,10 @@ const Static = {
|
|
|
5194
5194
|
},
|
|
5195
5195
|
large: {
|
|
5196
5196
|
min: 993,
|
|
5197
|
-
max:
|
|
5197
|
+
max: 1920
|
|
5198
5198
|
},
|
|
5199
5199
|
xlarge: {
|
|
5200
|
-
min:
|
|
5200
|
+
min: 1921,
|
|
5201
5201
|
max: 4096
|
|
5202
5202
|
}
|
|
5203
5203
|
}
|
|
@@ -5232,7 +5232,7 @@ class CuraThemeColorsModule {
|
|
|
5232
5232
|
*/
|
|
5233
5233
|
getColor(colorWithDepth = "primary-base", opacity = 1) {
|
|
5234
5234
|
const { color, depth } = this.splitColorDepth(colorWithDepth);
|
|
5235
|
-
const staticColor = this.getStatic(color, depth);
|
|
5235
|
+
const staticColor = this.getStatic(color, depth, opacity);
|
|
5236
5236
|
if (staticColor)
|
|
5237
5237
|
return staticColor;
|
|
5238
5238
|
return this.getDynamic(color, depth, opacity);
|
|
@@ -5332,7 +5332,7 @@ class CuraThemeBreakpointsModule {
|
|
|
5332
5332
|
get(size = null, position = null) {
|
|
5333
5333
|
if (size) {
|
|
5334
5334
|
const breakpoint = position ? Static.breakpoints[size][position] : Static.breakpoints[size];
|
|
5335
|
-
if (breakpoint)
|
|
5335
|
+
if (breakpoint || breakpoint === 0)
|
|
5336
5336
|
return breakpoint;
|
|
5337
5337
|
}
|
|
5338
5338
|
return Static.breakpoints;
|
|
@@ -6319,7 +6319,7 @@ class CuraAccordion {
|
|
|
6319
6319
|
}; }
|
|
6320
6320
|
}
|
|
6321
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:
|
|
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: 769px) and (max-width: 992px){/*!@: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: 993px){/*!@: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
6323
|
|
|
6324
6324
|
class CuraAccordionItem {
|
|
6325
6325
|
constructor(hostRef) {
|
|
@@ -6662,93 +6662,105 @@ class CuraButtonTransparent {
|
|
|
6662
6662
|
}; }
|
|
6663
6663
|
}
|
|
6664
6664
|
|
|
6665
|
-
const curaDisplayCss = "/*!@:host*/.sc-cura-display-h{display:block;font-size:var(--font-size)
|
|
6665
|
+
const curaDisplayCss = "/*!@:host*/.sc-cura-display-h{display:block;font-size:var(--font-size-base)}/*!@:host h1, :host h2, :host h3, :host h4, :host h5, :host h6*/.sc-cura-display-h h1.sc-cura-display,.sc-cura-display-h h2.sc-cura-display,.sc-cura-display-h h3.sc-cura-display,.sc-cura-display-h h4.sc-cura-display,.sc-cura-display-h h5.sc-cura-display,.sc-cura-display-h h6.sc-cura-display{font-family:var(--font-family);font-size:3em;font-weight:var(--font-weight-bold);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}@media (min-width: 769px) and (max-width: 1920px){/*!@:host h1, :host h2, :host h3, :host h4, :host h5, :host h6*/.sc-cura-display-h h1.sc-cura-display,.sc-cura-display-h h2.sc-cura-display,.sc-cura-display-h h3.sc-cura-display,.sc-cura-display-h h4.sc-cura-display,.sc-cura-display-h h5.sc-cura-display,.sc-cura-display-h h6.sc-cura-display{font-size:3.429em}}@media (min-width: 1921px){/*!@:host h1, :host h2, :host h3, :host h4, :host h5, :host h6*/.sc-cura-display-h h1.sc-cura-display,.sc-cura-display-h h2.sc-cura-display,.sc-cura-display-h h3.sc-cura-display,.sc-cura-display-h h4.sc-cura-display,.sc-cura-display-h h5.sc-cura-display,.sc-cura-display-h h6.sc-cura-display{font-size:4.286em;line-height:calc(var(--line-height) + 5%)}}/*!@:host ::slotted(b), :host ::slotted(strong)*/.sc-cura-display-h .sc-cura-display-s>b,.sc-cura-display-h .sc-cura-display-s>strong{font-weight:var(--font-weight-bold)}/*!@:host ::slotted(a)*/.sc-cura-display-h .sc-cura-display-s>a{font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}/*!@:host ::slotted(u)*/.sc-cura-display-h .sc-cura-display-s>u{text-underline-offset:10%}/*!@:host ::slotted(abbr)*/.sc-cura-display-h .sc-cura-display-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}";
|
|
6666
6666
|
|
|
6667
6667
|
class CuraDisplay {
|
|
6668
6668
|
constructor(hostRef) {
|
|
6669
6669
|
registerInstance(this, hostRef);
|
|
6670
|
+
this.theme = window.CuraAPI.theme;
|
|
6670
6671
|
this.level = 1;
|
|
6671
|
-
this.
|
|
6672
|
-
this.
|
|
6673
|
-
this.
|
|
6672
|
+
this.spotColor = 'accent-dark';
|
|
6673
|
+
this.color = undefined;
|
|
6674
|
+
this.marginBlock = '1.25em';
|
|
6675
|
+
this.lineHeight = '120%';
|
|
6676
|
+
this.styles = {};
|
|
6677
|
+
}
|
|
6678
|
+
handleChangeColor() {
|
|
6679
|
+
this.setColors();
|
|
6674
6680
|
}
|
|
6675
6681
|
connectedCallback() {
|
|
6676
|
-
this.weights = window.CuraAPI.theme.fonts.getWeights();
|
|
6677
6682
|
this.setFontProperties();
|
|
6678
6683
|
this.setColors();
|
|
6679
6684
|
}
|
|
6680
|
-
getClasses() {
|
|
6681
|
-
const classes = {};
|
|
6682
|
-
classes[this.size.toLowerCase()] = true;
|
|
6683
|
-
return classes;
|
|
6684
|
-
}
|
|
6685
6685
|
setFontProperties() {
|
|
6686
|
+
this.weights = this.theme.fonts.getWeights();
|
|
6687
|
+
this.fontSizeBase = this.theme.fonts.getSize();
|
|
6686
6688
|
this.styles = {
|
|
6687
6689
|
'--font-family': window.CuraAPI.theme.fonts.getFamily('display'),
|
|
6688
6690
|
'--font-size': window.CuraAPI.theme.fonts.getSize(),
|
|
6689
|
-
'--font-weight-bold': this.weights.bold
|
|
6690
|
-
'--font-weight-black': this.weights.black
|
|
6691
|
+
'--font-weight-bold': this.weights.bold
|
|
6691
6692
|
};
|
|
6692
|
-
this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
|
|
6693
|
-
this.setHostProperty('--block-margin', '0.5em');
|
|
6694
6693
|
}
|
|
6695
|
-
|
|
6696
|
-
|
|
6697
|
-
|
|
6698
|
-
:
|
|
6699
|
-
|
|
6700
|
-
|
|
6701
|
-
? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
|
|
6702
|
-
: window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);
|
|
6694
|
+
hostCSSProperties() {
|
|
6695
|
+
return {
|
|
6696
|
+
'--margin-block': this.marginBlock,
|
|
6697
|
+
'--font-size-base': this.fontSizeBase,
|
|
6698
|
+
'--line-height': this.lineHeight
|
|
6699
|
+
};
|
|
6703
6700
|
}
|
|
6704
|
-
|
|
6705
|
-
this.
|
|
6701
|
+
setColors() {
|
|
6702
|
+
const fontColor = this.color
|
|
6703
|
+
? this.theme.colors.getColor(this.color)
|
|
6704
|
+
: this.theme.fonts.getColor();
|
|
6705
|
+
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}`) });
|
|
6706
6706
|
}
|
|
6707
6707
|
getHeadingTag() {
|
|
6708
6708
|
const tags = {
|
|
6709
|
-
'1': hAsync("h1", { style: this.styles
|
|
6710
|
-
'2': hAsync("h2", { style: this.styles
|
|
6711
|
-
'3': hAsync("h3", { style: this.styles
|
|
6712
|
-
'4': hAsync("h4", { style: this.styles
|
|
6713
|
-
'5': hAsync("h5", { style: this.styles
|
|
6714
|
-
'6': hAsync("h6", { style: this.styles
|
|
6715
|
-
'default': hAsync("h1", { style: this.styles
|
|
6709
|
+
'1': hAsync("h1", { style: this.styles }, hAsync("slot", null)),
|
|
6710
|
+
'2': hAsync("h2", { style: this.styles }, hAsync("slot", null)),
|
|
6711
|
+
'3': hAsync("h3", { style: this.styles }, hAsync("slot", null)),
|
|
6712
|
+
'4': hAsync("h4", { style: this.styles }, hAsync("slot", null)),
|
|
6713
|
+
'5': hAsync("h5", { style: this.styles }, hAsync("slot", null)),
|
|
6714
|
+
'6': hAsync("h6", { style: this.styles }, hAsync("slot", null)),
|
|
6715
|
+
'default': hAsync("h1", { style: this.styles }, hAsync("slot", null))
|
|
6716
6716
|
};
|
|
6717
6717
|
return tags[`${this.level}`] || tags['default'];
|
|
6718
6718
|
}
|
|
6719
6719
|
render() {
|
|
6720
|
-
return (hAsync(Host,
|
|
6720
|
+
return (hAsync(Host, { style: this.hostCSSProperties() }, this.getHeadingTag()));
|
|
6721
6721
|
}
|
|
6722
6722
|
get host() { return getElement(this); }
|
|
6723
|
+
static get watchers() { return {
|
|
6724
|
+
"color": ["handleChangeColor"],
|
|
6725
|
+
"spotColor": ["handleChangeColor"]
|
|
6726
|
+
}; }
|
|
6723
6727
|
static get style() { return curaDisplayCss; }
|
|
6724
6728
|
static get cmpMeta() { return {
|
|
6725
6729
|
"$flags$": 9,
|
|
6726
6730
|
"$tagName$": "cura-display",
|
|
6727
6731
|
"$members$": {
|
|
6728
6732
|
"level": [514],
|
|
6729
|
-
"
|
|
6730
|
-
"
|
|
6731
|
-
"
|
|
6733
|
+
"spotColor": [513, "spot-color"],
|
|
6734
|
+
"color": [1],
|
|
6735
|
+
"marginBlock": [513, "margin-block"],
|
|
6736
|
+
"lineHeight": [513, "line-height"],
|
|
6737
|
+
"styles": [32]
|
|
6732
6738
|
},
|
|
6733
6739
|
"$listeners$": undefined,
|
|
6734
6740
|
"$lazyBundleId$": "-",
|
|
6735
|
-
"$attrsToReflect$": [["level", "level"], ["
|
|
6741
|
+
"$attrsToReflect$": [["level", "level"], ["spotColor", "spot-color"], ["marginBlock", "margin-block"], ["lineHeight", "line-height"]]
|
|
6736
6742
|
}; }
|
|
6737
6743
|
}
|
|
6738
6744
|
|
|
6739
|
-
const curaHeadingCss = "/*!@:host*/.sc-cura-heading-h{display:block;font-size:var(--font-size)}/*!@:host h1, :host h2, :host h3, :host h4, :host h5, :host h6*/.sc-cura-heading-h h1.sc-cura-heading,.sc-cura-heading-h h2.sc-cura-heading,.sc-cura-heading-h h3.sc-cura-heading,.sc-cura-heading-h h4.sc-cura-heading,.sc-cura-heading-h h5.sc-cura-heading,.sc-cura-heading-h h6.sc-cura-heading{font-family:var(--font-family);font-size:1.
|
|
6745
|
+
const curaHeadingCss = "/*!@:host*/.sc-cura-heading-h{display:block;font-size:var(--font-size-base)}/*!@:host h1, :host h2, :host h3, :host h4, :host h5, :host h6*/.sc-cura-heading-h h1.sc-cura-heading,.sc-cura-heading-h h2.sc-cura-heading,.sc-cura-heading-h h3.sc-cura-heading,.sc-cura-heading-h h4.sc-cura-heading,.sc-cura-heading-h h5.sc-cura-heading,.sc-cura-heading-h h6.sc-cura-heading{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*/.sc-cura-heading-h h1.bold-weight.sc-cura-heading,.sc-cura-heading-h h2.bold-weight.sc-cura-heading,.sc-cura-heading-h h3.bold-weight.sc-cura-heading,.sc-cura-heading-h h4.bold-weight.sc-cura-heading,.sc-cura-heading-h h5.bold-weight.sc-cura-heading,.sc-cura-heading-h h6.bold-weight.sc-cura-heading{font-weight:var(--font-weight-medium)}/*!@:host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large*/.sc-cura-heading-h h1.large.sc-cura-heading,.sc-cura-heading-h h2.large.sc-cura-heading,.sc-cura-heading-h h3.large.sc-cura-heading,.sc-cura-heading-h h4.large.sc-cura-heading,.sc-cura-heading-h h5.large.sc-cura-heading,.sc-cura-heading-h h6.large.sc-cura-heading{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*/.sc-cura-heading-h h1.small.sc-cura-heading,.sc-cura-heading-h h2.small.sc-cura-heading,.sc-cura-heading-h h3.small.sc-cura-heading,.sc-cura-heading-h h4.small.sc-cura-heading,.sc-cura-heading-h h5.small.sc-cura-heading,.sc-cura-heading-h h6.small.sc-cura-heading{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)*/.sc-cura-heading-h h1.small.bold-weight.sc-cura-heading,.sc-cura-heading-h h1.small .sc-cura-heading-s>b,.sc-cura-heading-h h1.small .sc-cura-heading-s>strong,.sc-cura-heading-h h2.small.bold-weight.sc-cura-heading,.sc-cura-heading-h h2.small .sc-cura-heading-s>b,.sc-cura-heading-h h2.small .sc-cura-heading-s>strong,.sc-cura-heading-h h3.small.bold-weight.sc-cura-heading,.sc-cura-heading-h h3.small .sc-cura-heading-s>b,.sc-cura-heading-h h3.small .sc-cura-heading-s>strong,.sc-cura-heading-h h4.small.bold-weight.sc-cura-heading,.sc-cura-heading-h h4.small .sc-cura-heading-s>b,.sc-cura-heading-h h4.small .sc-cura-heading-s>strong,.sc-cura-heading-h h5.small.bold-weight.sc-cura-heading,.sc-cura-heading-h h5.small .sc-cura-heading-s>b,.sc-cura-heading-h h5.small .sc-cura-heading-s>strong,.sc-cura-heading-h h6.small.bold-weight.sc-cura-heading,.sc-cura-heading-h h6.small .sc-cura-heading-s>b,.sc-cura-heading-h h6.small .sc-cura-heading-s>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*/.sc-cura-heading-h h1.xsmall.sc-cura-heading,.sc-cura-heading-h h2.xsmall.sc-cura-heading,.sc-cura-heading-h h3.xsmall.sc-cura-heading,.sc-cura-heading-h h4.xsmall.sc-cura-heading,.sc-cura-heading-h h5.xsmall.sc-cura-heading,.sc-cura-heading-h h6.xsmall.sc-cura-heading{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)*/.sc-cura-heading-h h1.xsmall.bold-weight.sc-cura-heading,.sc-cura-heading-h h1.xsmall .sc-cura-heading-s>b,.sc-cura-heading-h h1.xsmall .sc-cura-heading-s>strong,.sc-cura-heading-h h2.xsmall.bold-weight.sc-cura-heading,.sc-cura-heading-h h2.xsmall .sc-cura-heading-s>b,.sc-cura-heading-h h2.xsmall .sc-cura-heading-s>strong,.sc-cura-heading-h h3.xsmall.bold-weight.sc-cura-heading,.sc-cura-heading-h h3.xsmall .sc-cura-heading-s>b,.sc-cura-heading-h h3.xsmall .sc-cura-heading-s>strong,.sc-cura-heading-h h4.xsmall.bold-weight.sc-cura-heading,.sc-cura-heading-h h4.xsmall .sc-cura-heading-s>b,.sc-cura-heading-h h4.xsmall .sc-cura-heading-s>strong,.sc-cura-heading-h h5.xsmall.bold-weight.sc-cura-heading,.sc-cura-heading-h h5.xsmall .sc-cura-heading-s>b,.sc-cura-heading-h h5.xsmall .sc-cura-heading-s>strong,.sc-cura-heading-h h6.xsmall.bold-weight.sc-cura-heading,.sc-cura-heading-h h6.xsmall .sc-cura-heading-s>b,.sc-cura-heading-h h6.xsmall .sc-cura-heading-s>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*/.sc-cura-heading-h h1.sc-cura-heading,.sc-cura-heading-h h2.sc-cura-heading,.sc-cura-heading-h h3.sc-cura-heading,.sc-cura-heading-h h4.sc-cura-heading,.sc-cura-heading-h h5.sc-cura-heading,.sc-cura-heading-h h6.sc-cura-heading{font-size:2em}/*!@:host h1.large, :host h2.large, :host h3.large, :host h4.large, :host h5.large, :host h6.large*/.sc-cura-heading-h h1.large.sc-cura-heading,.sc-cura-heading-h h2.large.sc-cura-heading,.sc-cura-heading-h h3.large.sc-cura-heading,.sc-cura-heading-h h4.large.sc-cura-heading,.sc-cura-heading-h h5.large.sc-cura-heading,.sc-cura-heading-h h6.large.sc-cura-heading{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*/.sc-cura-heading-h h1.small.sc-cura-heading,.sc-cura-heading-h h2.small.sc-cura-heading,.sc-cura-heading-h h3.small.sc-cura-heading,.sc-cura-heading-h h4.small.sc-cura-heading,.sc-cura-heading-h h5.small.sc-cura-heading,.sc-cura-heading-h h6.small.sc-cura-heading{font-size:1.357em}/*!@:host h1.xsmall, :host h2.xsmall, :host h3.xsmall, :host h4.xsmall, :host h5.xsmall, :host h6.xsmall*/.sc-cura-heading-h h1.xsmall.sc-cura-heading,.sc-cura-heading-h h2.xsmall.sc-cura-heading,.sc-cura-heading-h h3.xsmall.sc-cura-heading,.sc-cura-heading-h h4.xsmall.sc-cura-heading,.sc-cura-heading-h h5.xsmall.sc-cura-heading,.sc-cura-heading-h h6.xsmall.sc-cura-heading{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*/.sc-cura-heading-h h1.sc-cura-heading,.sc-cura-heading-h h2.sc-cura-heading,.sc-cura-heading-h h3.sc-cura-heading,.sc-cura-heading-h h4.sc-cura-heading,.sc-cura-heading-h h5.sc-cura-heading,.sc-cura-heading-h h6.sc-cura-heading{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*/.sc-cura-heading-h h1.large.sc-cura-heading,.sc-cura-heading-h h2.large.sc-cura-heading,.sc-cura-heading-h h3.large.sc-cura-heading,.sc-cura-heading-h h4.large.sc-cura-heading,.sc-cura-heading-h h5.large.sc-cura-heading,.sc-cura-heading-h h6.large.sc-cura-heading{font-size:2.929em}/*!@:host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small*/.sc-cura-heading-h h1.small.sc-cura-heading,.sc-cura-heading-h h2.small.sc-cura-heading,.sc-cura-heading-h h3.small.sc-cura-heading,.sc-cura-heading-h h4.small.sc-cura-heading,.sc-cura-heading-h h5.small.sc-cura-heading,.sc-cura-heading-h h6.small.sc-cura-heading{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*/.sc-cura-heading-h h1.xsmall.sc-cura-heading,.sc-cura-heading-h h2.xsmall.sc-cura-heading,.sc-cura-heading-h h3.xsmall.sc-cura-heading,.sc-cura-heading-h h4.xsmall.sc-cura-heading,.sc-cura-heading-h h5.xsmall.sc-cura-heading,.sc-cura-heading-h h6.xsmall.sc-cura-heading{font-size:1em;line-height:calc(var(--line-height) + 12.857%);letter-spacing:0.28px}}/*!@:host ::slotted(b), :host ::slotted(strong)*/.sc-cura-heading-h .sc-cura-heading-s>b,.sc-cura-heading-h .sc-cura-heading-s>strong{font-weight:var(--font-weight-medium)}/*!@:host ::slotted(a)*/.sc-cura-heading-h .sc-cura-heading-s>a{font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}/*!@:host ::slotted(u)*/.sc-cura-heading-h .sc-cura-heading-s>u{text-underline-offset:10%}/*!@:host ::slotted(abbr)*/.sc-cura-heading-h .sc-cura-heading-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}/*!@:host ::slotted(i), :host ::slotted(em)*/.sc-cura-heading-h .sc-cura-heading-s>i,.sc-cura-heading-h .sc-cura-heading-s>em{font-weight:var(--font-weight-medium)}";
|
|
6740
6746
|
|
|
6741
6747
|
class CuraHeading {
|
|
6742
6748
|
constructor(hostRef) {
|
|
6743
6749
|
registerInstance(this, hostRef);
|
|
6750
|
+
this.theme = window.CuraAPI.theme;
|
|
6744
6751
|
this.level = 1;
|
|
6745
|
-
this.size = '
|
|
6752
|
+
this.size = 'medium';
|
|
6746
6753
|
this.weight = 'regular';
|
|
6747
|
-
this.
|
|
6748
|
-
this.
|
|
6754
|
+
this.spotColor = 'accent-dark';
|
|
6755
|
+
this.color = undefined;
|
|
6756
|
+
this.marginBlock = '1.25em';
|
|
6757
|
+
this.lineHeight = '130%';
|
|
6758
|
+
this.styles = {};
|
|
6759
|
+
}
|
|
6760
|
+
handleChangeColor() {
|
|
6761
|
+
this.setColors();
|
|
6749
6762
|
}
|
|
6750
6763
|
connectedCallback() {
|
|
6751
|
-
this.weights = window.CuraAPI.theme.fonts.getWeights();
|
|
6752
6764
|
this.setFontProperties();
|
|
6753
6765
|
this.setColors();
|
|
6754
6766
|
}
|
|
@@ -6759,28 +6771,28 @@ class CuraHeading {
|
|
|
6759
6771
|
return classes;
|
|
6760
6772
|
}
|
|
6761
6773
|
setFontProperties() {
|
|
6774
|
+
this.weights = this.theme.fonts.getWeights();
|
|
6775
|
+
this.fontSizeBase = this.theme.fonts.getSize();
|
|
6762
6776
|
this.styles = {
|
|
6763
6777
|
'--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),
|
|
6764
|
-
'--font-size': window.CuraAPI.theme.fonts.getSize(),
|
|
6765
6778
|
'--font-weight-regular': this.weights.regular,
|
|
6766
6779
|
'--font-weight-medium': this.weights.medium,
|
|
6767
6780
|
'--font-weight-bold': this.weights.bold,
|
|
6768
6781
|
'--font-weight-black': this.weights.black
|
|
6769
6782
|
};
|
|
6770
|
-
this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
|
|
6771
|
-
this.setHostProperty('--block-margin', '0.5em');
|
|
6772
6783
|
}
|
|
6773
|
-
|
|
6774
|
-
|
|
6775
|
-
|
|
6776
|
-
:
|
|
6777
|
-
|
|
6778
|
-
|
|
6779
|
-
? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-lighter`)
|
|
6780
|
-
: window.CuraAPI.theme.colors.getColor(`${this.spotColor}-dark`);
|
|
6784
|
+
hostCSSProperties() {
|
|
6785
|
+
return {
|
|
6786
|
+
'--margin-block': this.marginBlock,
|
|
6787
|
+
'--font-size-base': this.fontSizeBase,
|
|
6788
|
+
'--line-height': this.lineHeight
|
|
6789
|
+
};
|
|
6781
6790
|
}
|
|
6782
|
-
|
|
6783
|
-
this.
|
|
6791
|
+
setColors() {
|
|
6792
|
+
const fontColor = this.color
|
|
6793
|
+
? this.theme.colors.getColor(this.color)
|
|
6794
|
+
: this.theme.fonts.getColor();
|
|
6795
|
+
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}`) });
|
|
6784
6796
|
}
|
|
6785
6797
|
getHeadingTag() {
|
|
6786
6798
|
const tags = {
|
|
@@ -6795,9 +6807,13 @@ class CuraHeading {
|
|
|
6795
6807
|
return tags[`${this.level}`] || tags['default'];
|
|
6796
6808
|
}
|
|
6797
6809
|
render() {
|
|
6798
|
-
return (hAsync(Host,
|
|
6810
|
+
return (hAsync(Host, { style: this.hostCSSProperties() }, this.getHeadingTag()));
|
|
6799
6811
|
}
|
|
6800
6812
|
get host() { return getElement(this); }
|
|
6813
|
+
static get watchers() { return {
|
|
6814
|
+
"color": ["handleChangeColor"],
|
|
6815
|
+
"spotColor": ["handleChangeColor"]
|
|
6816
|
+
}; }
|
|
6801
6817
|
static get style() { return curaHeadingCss; }
|
|
6802
6818
|
static get cmpMeta() { return {
|
|
6803
6819
|
"$flags$": 9,
|
|
@@ -6806,12 +6822,15 @@ class CuraHeading {
|
|
|
6806
6822
|
"level": [514],
|
|
6807
6823
|
"size": [513],
|
|
6808
6824
|
"weight": [513],
|
|
6809
|
-
"
|
|
6810
|
-
"
|
|
6825
|
+
"spotColor": [513, "spot-color"],
|
|
6826
|
+
"color": [1],
|
|
6827
|
+
"marginBlock": [513, "margin-block"],
|
|
6828
|
+
"lineHeight": [513, "line-height"],
|
|
6829
|
+
"styles": [32]
|
|
6811
6830
|
},
|
|
6812
6831
|
"$listeners$": undefined,
|
|
6813
6832
|
"$lazyBundleId$": "-",
|
|
6814
|
-
"$attrsToReflect$": [["level", "level"], ["size", "size"], ["weight", "weight"], ["
|
|
6833
|
+
"$attrsToReflect$": [["level", "level"], ["size", "size"], ["weight", "weight"], ["spotColor", "spot-color"], ["marginBlock", "margin-block"], ["lineHeight", "line-height"]]
|
|
6815
6834
|
}; }
|
|
6816
6835
|
}
|
|
6817
6836
|
|
|
@@ -6912,6 +6931,82 @@ class CuraIconsView {
|
|
|
6912
6931
|
}; }
|
|
6913
6932
|
}
|
|
6914
6933
|
|
|
6934
|
+
const curaLabelCss = "/*!@:host*/.sc-cura-label-h{display:block;font-size:var(--font-size-base)}/*!@:host p*/.sc-cura-label-h p.sc-cura-label{font-family:var(--font-family);font-size:1.143em;font-weight:var(--font-weight-medium);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0.32px}/*!@:host p.bold-weight, :host p ::slotted(b), :host p ::slotted(strong), :host p ::slotted(u)*/.sc-cura-label-h p.bold-weight.sc-cura-label,.sc-cura-label-h p .sc-cura-label-s>b,.sc-cura-label-h p .sc-cura-label-s>strong,.sc-cura-label-h p .sc-cura-label-s>u{font-weight:var(--font-weight-bold)}/*!@:host p.large*/.sc-cura-label-h p.large.sc-cura-label{font-size:1.357em;line-height:calc(var(--line-height) - 4%);letter-spacing:0px}/*!@:host p.small*/.sc-cura-label-h p.small.sc-cura-label{font-size:1em;line-height:calc(var(--line-height) - 4%);letter-spacing:0.56px}/*!@:host p.xsmall*/.sc-cura-label-h p.xsmall.sc-cura-label{font-size:0.857em;line-height:calc(var(--line-height) - 17%);letter-spacing:0.72px}/*!@:host ::slotted(a)*/.sc-cura-label-h .sc-cura-label-s>a{font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%}/*!@:host ::slotted(u)*/.sc-cura-label-h .sc-cura-label-s>u{text-underline-offset:10%}/*!@:host ::slotted(abbr)*/.sc-cura-label-h .sc-cura-label-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}";
|
|
6935
|
+
|
|
6936
|
+
class CuraLabel {
|
|
6937
|
+
constructor(hostRef) {
|
|
6938
|
+
registerInstance(this, hostRef);
|
|
6939
|
+
this.theme = window.CuraAPI.theme;
|
|
6940
|
+
this.size = 'medium';
|
|
6941
|
+
this.weight = 'regular';
|
|
6942
|
+
this.spotColor = 'accent-dark';
|
|
6943
|
+
this.color = undefined;
|
|
6944
|
+
this.marginBlock = '0';
|
|
6945
|
+
this.lineHeight = '125%';
|
|
6946
|
+
this.styles = {};
|
|
6947
|
+
}
|
|
6948
|
+
handleChangeColor() {
|
|
6949
|
+
this.setColors();
|
|
6950
|
+
}
|
|
6951
|
+
connectedCallback() {
|
|
6952
|
+
this.setFontProperties();
|
|
6953
|
+
this.setColors();
|
|
6954
|
+
}
|
|
6955
|
+
getClasses() {
|
|
6956
|
+
const sizeclass = {};
|
|
6957
|
+
sizeclass[this.size.toLowerCase()] = true;
|
|
6958
|
+
sizeclass[`${this.weight.toLowerCase()}-weight`] = true;
|
|
6959
|
+
return sizeclass;
|
|
6960
|
+
}
|
|
6961
|
+
setFontProperties() {
|
|
6962
|
+
this.weights = this.theme.fonts.getWeights();
|
|
6963
|
+
this.fontSizeBase = this.theme.fonts.getSize();
|
|
6964
|
+
this.styles = {
|
|
6965
|
+
'--font-family': this.theme.fonts.getFamily('body'),
|
|
6966
|
+
'--font-weight-medium': this.weights.medium,
|
|
6967
|
+
'--font-weight-bold': this.weights.bold
|
|
6968
|
+
};
|
|
6969
|
+
}
|
|
6970
|
+
setColors() {
|
|
6971
|
+
const fontColor = this.color
|
|
6972
|
+
? this.theme.colors.getColor(this.color)
|
|
6973
|
+
: this.theme.fonts.getColor();
|
|
6974
|
+
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}`) });
|
|
6975
|
+
}
|
|
6976
|
+
hostCSSProperties() {
|
|
6977
|
+
return {
|
|
6978
|
+
'--margin-block': this.marginBlock,
|
|
6979
|
+
'--font-size-base': this.fontSizeBase,
|
|
6980
|
+
'--line-height': this.lineHeight
|
|
6981
|
+
};
|
|
6982
|
+
}
|
|
6983
|
+
render() {
|
|
6984
|
+
return (hAsync(Host, { style: this.hostCSSProperties() }, hAsync("p", { style: this.styles, class: this.getClasses() }, hAsync("slot", null))));
|
|
6985
|
+
}
|
|
6986
|
+
get host() { return getElement(this); }
|
|
6987
|
+
static get watchers() { return {
|
|
6988
|
+
"color": ["handleChangeColor"],
|
|
6989
|
+
"spotColor": ["handleChangeColor"]
|
|
6990
|
+
}; }
|
|
6991
|
+
static get style() { return curaLabelCss; }
|
|
6992
|
+
static get cmpMeta() { return {
|
|
6993
|
+
"$flags$": 9,
|
|
6994
|
+
"$tagName$": "cura-label",
|
|
6995
|
+
"$members$": {
|
|
6996
|
+
"size": [513],
|
|
6997
|
+
"weight": [513],
|
|
6998
|
+
"spotColor": [513, "spot-color"],
|
|
6999
|
+
"color": [1],
|
|
7000
|
+
"marginBlock": [513, "margin-block"],
|
|
7001
|
+
"lineHeight": [513, "line-height"],
|
|
7002
|
+
"styles": [32]
|
|
7003
|
+
},
|
|
7004
|
+
"$listeners$": undefined,
|
|
7005
|
+
"$lazyBundleId$": "-",
|
|
7006
|
+
"$attrsToReflect$": [["size", "size"], ["weight", "weight"], ["spotColor", "spot-color"], ["marginBlock", "margin-block"], ["lineHeight", "line-height"]]
|
|
7007
|
+
}; }
|
|
7008
|
+
}
|
|
7009
|
+
|
|
6915
7010
|
const curaLoaderCircleCss = "/*!@:host*/.sc-cura-loader-circle-h{display:inline-block;width:var(--size);height:var(--size)}/*!@:host svg*/.sc-cura-loader-circle-h svg.sc-cura-loader-circle{width:var(--size);height:var(--size);-webkit-animation:rotate 0.7s linear infinite;animation:rotate 0.7s linear infinite}/*!@:host circle, :host path*/.sc-cura-loader-circle-h circle.sc-cura-loader-circle,.sc-cura-loader-circle-h path.sc-cura-loader-circle{stroke-miterlimit:10;stroke-linecap:round;stroke-linejoin:round}/*!@:host path*/.sc-cura-loader-circle-h path.sc-cura-loader-circle{stroke:var(--color)}/*!@:host stop*/.sc-cura-loader-circle-h stop.sc-cura-loader-circle{stop-color:var(--color)}/*!@:host linearGradient stop:first-child*/.sc-cura-loader-circle-h linearGradient.sc-cura-loader-circle stop.sc-cura-loader-circle:first-child{stop-opacity:0.14}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}";
|
|
6916
7011
|
|
|
6917
7012
|
class CuraLoaderCircle {
|
|
@@ -6951,7 +7046,7 @@ class CuraLoaderCircle {
|
|
|
6951
7046
|
}; }
|
|
6952
7047
|
}
|
|
6953
7048
|
|
|
6954
|
-
const curaPageTemplateCss = "/*!@:host*/.sc-cura-page-template-h{display:block}/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-template{display:grid;grid-template-rows:auto;grid-template-columns:auto;grid-template-areas:\"sub-header\" \"header\" \"pre-content\" \"content-container\" \"post-body\" \"footer\" \"sub-footer\"}/*!@:host .grid-template #sub-header*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #sub-header.sc-cura-page-template{grid-area:sub-header}/*!@:host .grid-template #header*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #header.sc-cura-page-template{grid-area:header}/*!@:host .grid-template #pre-content*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #pre-content.sc-cura-page-template{grid-area:pre-content}/*!@:host .grid-template #content-container*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template{grid-area:content-container}/*!@:host .grid-template #post-body*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #post-body.sc-cura-page-template{grid-area:post-body}/*!@:host .grid-template #footer*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #footer.sc-cura-page-template{grid-area:footer}/*!@:host .grid-template #sub-footer*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #sub-footer.sc-cura-page-template{grid-area:sub-footer}@media (max-width:
|
|
7049
|
+
const curaPageTemplateCss = "/*!@:host*/.sc-cura-page-template-h{display:block}/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-template{display:grid;grid-template-rows:auto;grid-template-columns:auto;grid-template-areas:\"sub-header\" \"header\" \"pre-content\" \"content-container\" \"post-body\" \"footer\" \"sub-footer\"}/*!@:host .grid-template #sub-header*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #sub-header.sc-cura-page-template{grid-area:sub-header}/*!@:host .grid-template #header*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #header.sc-cura-page-template{grid-area:header}/*!@:host .grid-template #pre-content*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #pre-content.sc-cura-page-template{grid-area:pre-content}/*!@:host .grid-template #content-container*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template{grid-area:content-container}/*!@:host .grid-template #post-body*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #post-body.sc-cura-page-template{grid-area:post-body}/*!@:host .grid-template #footer*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #footer.sc-cura-page-template{grid-area:footer}/*!@:host .grid-template #sub-footer*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #sub-footer.sc-cura-page-template{grid-area:sub-footer}@media (max-width: 768px){/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-template{padding:0px}}@media (min-width: 769px) and (max-width: 992px){/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-template{padding:0px}}@media (min-width: 993px) and (max-width: 1920px){/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-template{padding:0px}/*!@:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left])*/.sc-cura-page-template-h .grid-template #content-container #sidebar-left .sc-cura-page-template-s>div[slot=sidebar-left]{margin-right:calc(var(--spacing) * 5px)}/*!@:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right])*/.sc-cura-page-template-h .grid-template #content-container #sidebar-right .sc-cura-page-template-s>div[slot=sidebar-right]{margin-left:calc(var(--spacing) * 5px)}/*!@:host .grid-template #content-container*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template{display:-ms-flexbox;display:flex}/*!@:host .grid-template #content-container #content*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #content.sc-cura-page-template{-ms-flex-positive:1;flex-grow:1}/*!@:host .grid-template #content-container #sidebar-left, :host .grid-template #content-container #sidebar-right*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #sidebar-left.sc-cura-page-template,.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #sidebar-right.sc-cura-page-template{max-width:20%}}@media (min-width: 1921px){/*!@:host .grid-template*/.sc-cura-page-template-h .grid-template.sc-cura-page-template{padding:0px}/*!@:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left])*/.sc-cura-page-template-h .grid-template #content-container #sidebar-left .sc-cura-page-template-s>div[slot=sidebar-left]{margin-right:calc(var(--spacing) * 7px)}/*!@:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right])*/.sc-cura-page-template-h .grid-template #content-container #sidebar-right .sc-cura-page-template-s>div[slot=sidebar-right]{margin-left:calc(var(--spacing) * 7px)}/*!@:host .grid-template #content-container*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template{display:-ms-flexbox;display:flex}/*!@:host .grid-template #content-container #content*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #content.sc-cura-page-template{-ms-flex-positive:1;flex-grow:1}/*!@:host .grid-template #content-container #sidebar-left, :host .grid-template #content-container #sidebar-right*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #sidebar-left.sc-cura-page-template,.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.sc-cura-page-template #sidebar-right.sc-cura-page-template{max-width:20%}/*!@:host .grid-template #content-container.centered*/.sc-cura-page-template-h .grid-template.sc-cura-page-template #content-container.centered.sc-cura-page-template{max-width:1921px;justify-self:center}}";
|
|
6955
7050
|
|
|
6956
7051
|
class CuraPageTemplate {
|
|
6957
7052
|
constructor(hostRef) {
|
|
@@ -6985,22 +7080,23 @@ class CuraPageTemplate {
|
|
|
6985
7080
|
}; }
|
|
6986
7081
|
}
|
|
6987
7082
|
|
|
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)
|
|
7083
|
+
const curaParagraphCss = "/*!@:host*/.sc-cura-paragraph-h{display:block;font-size:var(--font-size-base)}/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{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*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.214em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:0.85em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.48px}/*!@:host p.caption, :host p.xsmall*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph,.sc-cura-paragraph-h p.xsmall.sc-cura-paragraph{font-size:0.714em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.6px}@media (min-width: 769px) and (max-width: 1920px){/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-size:1.143em;line-height:calc(var(--line-height) + 5%);letter-spacing:0.32px}/*!@:host p.large*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.357em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}/*!@:host p.small*/.sc-cura-paragraph-h p.small.sc-cura-paragraph{font-size:1em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.56px}/*!@:host p.caption, :host p.xsmall*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph,.sc-cura-paragraph-h p.xsmall.sc-cura-paragraph{font-size:0.85em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.72px}}@media (min-width: 1921px){/*!@:host p*/.sc-cura-paragraph-h p.sc-cura-paragraph{font-size:1.429em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}/*!@:host p.large*/.sc-cura-paragraph-h p.large.sc-cura-paragraph{font-size:1.714em;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%);letter-spacing:0px}/*!@:host p.caption, :host p.xsmall*/.sc-cura-paragraph-h p.caption.sc-cura-paragraph,.sc-cura-paragraph-h p.xsmall.sc-cura-paragraph{font-size:1em;line-height:calc(var(--line-height) + 5%);letter-spacing:0.28px}}/*!@: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(u)*/.sc-cura-paragraph-h .sc-cura-paragraph-s>u{font-weight:var(--font-weight-medium);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}";
|
|
6989
7084
|
|
|
6990
7085
|
class CuraParagraph {
|
|
6991
7086
|
constructor(hostRef) {
|
|
6992
7087
|
registerInstance(this, hostRef);
|
|
6993
|
-
this.
|
|
6994
|
-
this.
|
|
6995
|
-
this.spotColor = '
|
|
7088
|
+
this.theme = window.CuraAPI.theme;
|
|
7089
|
+
this.size = 'medium';
|
|
7090
|
+
this.spotColor = 'accent-dark';
|
|
6996
7091
|
this.color = undefined;
|
|
7092
|
+
this.marginBlock = '1.25em';
|
|
7093
|
+
this.lineHeight = '140%';
|
|
6997
7094
|
this.styles = {};
|
|
6998
7095
|
}
|
|
6999
7096
|
handleChangeColor() {
|
|
7000
7097
|
this.setColors();
|
|
7001
7098
|
}
|
|
7002
7099
|
connectedCallback() {
|
|
7003
|
-
this.weights = window.CuraAPI.theme.fonts.getWeights();
|
|
7004
7100
|
this.setFontProperties();
|
|
7005
7101
|
this.setColors();
|
|
7006
7102
|
}
|
|
@@ -7010,35 +7106,35 @@ class CuraParagraph {
|
|
|
7010
7106
|
return sizeclass;
|
|
7011
7107
|
}
|
|
7012
7108
|
setFontProperties() {
|
|
7109
|
+
this.weights = this.theme.fonts.getWeights();
|
|
7110
|
+
this.fontSizeBase = this.theme.fonts.getSize();
|
|
7013
7111
|
this.styles = {
|
|
7014
|
-
'--font-family':
|
|
7015
|
-
'--font-size': window.CuraAPI.theme.fonts.getSize(),
|
|
7112
|
+
'--font-family': this.theme.fonts.getFamily('body'),
|
|
7016
7113
|
'--font-weight-regular': this.weights.regular,
|
|
7017
7114
|
'--font-weight-medium': this.weights.medium,
|
|
7018
7115
|
'--font-weight-bold': this.weights.bold
|
|
7019
7116
|
};
|
|
7020
|
-
this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
|
|
7021
|
-
this.setHostProperty('--block-margin', '1.25em');
|
|
7022
|
-
this.setHostProperty('--line-height', '140%');
|
|
7023
7117
|
}
|
|
7024
7118
|
setColors() {
|
|
7025
|
-
const fontColor = this.color
|
|
7026
|
-
this.
|
|
7027
|
-
|
|
7028
|
-
|
|
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`) });
|
|
7119
|
+
const fontColor = this.color
|
|
7120
|
+
? this.theme.colors.getColor(this.color)
|
|
7121
|
+
: this.theme.fonts.getColor();
|
|
7122
|
+
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}`) });
|
|
7032
7123
|
}
|
|
7033
|
-
|
|
7034
|
-
|
|
7124
|
+
hostCSSProperties() {
|
|
7125
|
+
return {
|
|
7126
|
+
'--margin-block': this.marginBlock,
|
|
7127
|
+
'--font-size-base': this.fontSizeBase,
|
|
7128
|
+
'--line-height': this.lineHeight
|
|
7129
|
+
};
|
|
7035
7130
|
}
|
|
7036
7131
|
render() {
|
|
7037
|
-
return (hAsync(Host,
|
|
7132
|
+
return (hAsync(Host, { style: this.hostCSSProperties() }, hAsync("p", { style: this.styles, class: this.setsizeClass() }, hAsync("slot", null))));
|
|
7038
7133
|
}
|
|
7039
7134
|
get host() { return getElement(this); }
|
|
7040
7135
|
static get watchers() { return {
|
|
7041
|
-
"color": ["handleChangeColor"]
|
|
7136
|
+
"color": ["handleChangeColor"],
|
|
7137
|
+
"spotColor": ["handleChangeColor"]
|
|
7042
7138
|
}; }
|
|
7043
7139
|
static get style() { return curaParagraphCss; }
|
|
7044
7140
|
static get cmpMeta() { return {
|
|
@@ -7046,14 +7142,15 @@ class CuraParagraph {
|
|
|
7046
7142
|
"$tagName$": "cura-paragraph",
|
|
7047
7143
|
"$members$": {
|
|
7048
7144
|
"size": [513],
|
|
7049
|
-
"inverted": [516],
|
|
7050
7145
|
"spotColor": [513, "spot-color"],
|
|
7051
|
-
"color": [
|
|
7146
|
+
"color": [1],
|
|
7147
|
+
"marginBlock": [513, "margin-block"],
|
|
7148
|
+
"lineHeight": [513, "line-height"],
|
|
7052
7149
|
"styles": [32]
|
|
7053
7150
|
},
|
|
7054
7151
|
"$listeners$": undefined,
|
|
7055
7152
|
"$lazyBundleId$": "-",
|
|
7056
|
-
"$attrsToReflect$": [["size", "size"], ["
|
|
7153
|
+
"$attrsToReflect$": [["size", "size"], ["spotColor", "spot-color"], ["marginBlock", "margin-block"], ["lineHeight", "line-height"]]
|
|
7057
7154
|
}; }
|
|
7058
7155
|
}
|
|
7059
7156
|
|
|
@@ -7067,6 +7164,7 @@ registerComponents([
|
|
|
7067
7164
|
CuraHeading,
|
|
7068
7165
|
CuraIcon,
|
|
7069
7166
|
CuraIconsView,
|
|
7167
|
+
CuraLabel,
|
|
7070
7168
|
CuraLoaderCircle,
|
|
7071
7169
|
CuraPageTemplate,
|
|
7072
7170
|
CuraParagraph,
|
package/package.json
CHANGED