@rededor/cura 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.
Files changed (174) hide show
  1. package/dist/cjs/{app-globals-0e3b7fc6.js → app-globals-2988084b.js} +5 -5
  2. package/dist/cjs/app-globals-2988084b.js.map +1 -0
  3. package/dist/cjs/cura-accordion_8.cjs.entry.js +452 -0
  4. package/dist/cjs/cura-accordion_8.cjs.entry.js.map +1 -0
  5. package/dist/cjs/cura-button-outline.cjs.entry.js +83 -0
  6. package/dist/cjs/cura-button-outline.cjs.entry.js.map +1 -0
  7. package/dist/cjs/cura-button-transparent.cjs.entry.js +83 -0
  8. package/dist/cjs/cura-button-transparent.cjs.entry.js.map +1 -0
  9. package/dist/cjs/cura-display.cjs.entry.js +74 -0
  10. package/dist/cjs/cura-display.cjs.entry.js.map +1 -0
  11. package/dist/cjs/cura-icons-view.cjs.entry.js +29 -0
  12. package/dist/cjs/cura-icons-view.cjs.entry.js.map +1 -0
  13. package/dist/cjs/cura-label.cjs.entry.js +69 -0
  14. package/dist/cjs/cura-label.cjs.entry.js.map +1 -0
  15. package/dist/cjs/cura.cjs.js +2 -2
  16. package/dist/cjs/index.cjs.js +7 -0
  17. package/dist/cjs/index.cjs.js.map +1 -1
  18. package/dist/cjs/loader.cjs.js +2 -2
  19. package/dist/collection/api/cura-api.type.js.map +1 -1
  20. package/dist/collection/api/modules/cura-theme-breakpoints-module.js +1 -1
  21. package/dist/collection/api/modules/cura-theme-breakpoints-module.js.map +1 -1
  22. package/dist/collection/api/modules/cura-theme-colors-module.js +1 -1
  23. package/dist/collection/api/modules/cura-theme-colors-module.js.map +1 -1
  24. package/dist/collection/api/theme-presets/static.js +2 -2
  25. package/dist/collection/api/theme-presets/static.js.map +1 -1
  26. package/dist/collection/collection-manifest.json +1 -0
  27. package/dist/collection/components/accordion/cura-accordion-item/cura-accordion-item.css +10 -6
  28. package/dist/collection/components/cura-page-template/cura-page-template.css +13 -9
  29. package/dist/collection/components/forms/cura-label/cura-label.css +70 -0
  30. package/dist/collection/components/forms/cura-label/cura-label.js +190 -0
  31. package/dist/collection/components/forms/cura-label/cura-label.js.map +1 -0
  32. package/dist/collection/components/forms/cura-label/cura-label.stories.js +137 -0
  33. package/dist/collection/components/forms/cura-label/cura-label.stories.js.map +1 -0
  34. package/dist/collection/components/text/cura-display/cura-display.css +21 -38
  35. package/dist/collection/components/text/cura-display/cura-display.js +80 -49
  36. package/dist/collection/components/text/cura-display/cura-display.js.map +1 -1
  37. package/dist/collection/components/text/cura-display/cura-display.stories.js +78 -33
  38. package/dist/collection/components/text/cura-display/cura-display.stories.js.map +1 -1
  39. package/dist/collection/components/text/cura-heading/cura-heading.css +50 -24
  40. package/dist/collection/components/text/cura-heading/cura-heading.js +94 -39
  41. package/dist/collection/components/text/cura-heading/cura-heading.js.map +1 -1
  42. package/dist/collection/components/text/cura-heading/cura-heading.stories.js +92 -36
  43. package/dist/collection/components/text/cura-heading/cura-heading.stories.js.map +1 -1
  44. package/dist/collection/components/text/cura-paragraph/cura-paragraph.css +37 -38
  45. package/dist/collection/components/text/cura-paragraph/cura-paragraph.js +62 -41
  46. package/dist/collection/components/text/cura-paragraph/cura-paragraph.js.map +1 -1
  47. package/dist/collection/components/text/cura-paragraph/cura-paragraph.stories.js +78 -46
  48. package/dist/collection/components/text/cura-paragraph/cura-paragraph.stories.js.map +1 -1
  49. package/dist/collection/index.js +3 -1
  50. package/dist/collection/index.js.map +1 -1
  51. package/dist/components/cura-accordion-item.js +1 -1
  52. package/dist/components/cura-accordion-item.js.map +1 -1
  53. package/dist/components/cura-display.js +41 -35
  54. package/dist/components/cura-display.js.map +1 -1
  55. package/dist/components/cura-heading.js +34 -21
  56. package/dist/components/cura-heading.js.map +1 -1
  57. package/dist/components/cura-label.d.ts +11 -0
  58. package/dist/components/cura-label.js +91 -0
  59. package/dist/components/cura-label.js.map +1 -0
  60. package/dist/components/cura-page-template.js +1 -1
  61. package/dist/components/cura-page-template.js.map +1 -1
  62. package/dist/components/cura-paragraph.js +25 -23
  63. package/dist/components/cura-paragraph.js.map +1 -1
  64. package/dist/components/index.js +11 -5
  65. package/dist/components/index.js.map +1 -1
  66. package/dist/cura/cura.esm.js +1 -1
  67. package/dist/cura/cura.esm.js.map +1 -1
  68. package/dist/cura/cura.js +1 -1
  69. package/dist/cura/index.esm.js +1 -1
  70. package/dist/cura/index.esm.js.map +1 -1
  71. package/dist/cura/p-03047b3e.entry.js +2 -0
  72. package/dist/cura/p-03047b3e.entry.js.map +1 -0
  73. package/dist/cura/p-0c79c54e.entry.js +2 -0
  74. package/dist/cura/p-0c79c54e.entry.js.map +1 -0
  75. package/dist/cura/p-120926c5.system.js +2 -0
  76. package/dist/cura/p-120926c5.system.js.map +1 -0
  77. package/dist/cura/p-223924fb.system.entry.js +2 -0
  78. package/dist/cura/p-223924fb.system.entry.js.map +1 -0
  79. package/dist/cura/p-48426f60.system.js +2 -0
  80. package/dist/cura/p-48426f60.system.js.map +1 -0
  81. package/dist/cura/p-49813052.entry.js +2 -0
  82. package/dist/cura/p-49813052.entry.js.map +1 -0
  83. package/dist/cura/p-4bdbcdf0.system.entry.js +2 -0
  84. package/dist/cura/p-4bdbcdf0.system.entry.js.map +1 -0
  85. package/dist/cura/p-7c8f3c77.system.entry.js +2 -0
  86. package/dist/cura/p-7c8f3c77.system.entry.js.map +1 -0
  87. package/dist/cura/p-8b18b5f7.system.js +2 -0
  88. package/dist/cura/p-8b18b5f7.system.js.map +1 -0
  89. package/dist/cura/p-91b0f78e.entry.js +2 -0
  90. package/dist/cura/p-91b0f78e.entry.js.map +1 -0
  91. package/dist/cura/p-a0395f90.entry.js +2 -0
  92. package/dist/cura/p-a0395f90.entry.js.map +1 -0
  93. package/dist/cura/p-a7ef255f.entry.js +2 -0
  94. package/dist/cura/p-a7ef255f.entry.js.map +1 -0
  95. package/dist/cura/p-ca054b07.system.entry.js +2 -0
  96. package/dist/cura/p-ca054b07.system.entry.js.map +1 -0
  97. package/dist/cura/p-d47b9cfe.system.entry.js +2 -0
  98. package/dist/cura/p-d47b9cfe.system.entry.js.map +1 -0
  99. package/dist/cura/p-f8fffdc1.js +2 -0
  100. package/dist/cura/p-f8fffdc1.js.map +1 -0
  101. package/dist/cura/p-fc77814b.system.entry.js +2 -0
  102. package/dist/cura/p-fc77814b.system.entry.js.map +1 -0
  103. package/dist/esm/{app-globals-cc003eaf.js → app-globals-29001758.js} +5 -5
  104. package/dist/esm/app-globals-29001758.js.map +1 -0
  105. package/dist/esm/cura-accordion_8.entry.js +441 -0
  106. package/dist/esm/cura-accordion_8.entry.js.map +1 -0
  107. package/dist/esm/cura-button-outline.entry.js +79 -0
  108. package/dist/esm/cura-button-outline.entry.js.map +1 -0
  109. package/dist/esm/cura-button-transparent.entry.js +79 -0
  110. package/dist/esm/cura-button-transparent.entry.js.map +1 -0
  111. package/dist/esm/cura-display.entry.js +70 -0
  112. package/dist/esm/cura-display.entry.js.map +1 -0
  113. package/dist/esm/cura-icons-view.entry.js +25 -0
  114. package/dist/esm/cura-icons-view.entry.js.map +1 -0
  115. package/dist/esm/cura-label.entry.js +65 -0
  116. package/dist/esm/cura-label.entry.js.map +1 -0
  117. package/dist/esm/cura.js +2 -2
  118. package/dist/esm/index.js +4 -0
  119. package/dist/esm/index.js.map +1 -1
  120. package/dist/esm/loader.js +2 -2
  121. package/dist/esm-es5/app-globals-29001758.js +2 -0
  122. package/dist/esm-es5/app-globals-29001758.js.map +1 -0
  123. package/dist/esm-es5/cura-accordion_8.entry.js +2 -0
  124. package/dist/esm-es5/cura-accordion_8.entry.js.map +1 -0
  125. package/dist/esm-es5/cura-button-outline.entry.js +2 -0
  126. package/dist/esm-es5/cura-button-outline.entry.js.map +1 -0
  127. package/dist/esm-es5/cura-button-transparent.entry.js +2 -0
  128. package/dist/esm-es5/cura-button-transparent.entry.js.map +1 -0
  129. package/dist/esm-es5/cura-display.entry.js +2 -0
  130. package/dist/esm-es5/cura-display.entry.js.map +1 -0
  131. package/dist/esm-es5/cura-icons-view.entry.js +2 -0
  132. package/dist/esm-es5/cura-icons-view.entry.js.map +1 -0
  133. package/dist/esm-es5/cura-label.entry.js +2 -0
  134. package/dist/esm-es5/cura-label.entry.js.map +1 -0
  135. package/dist/esm-es5/cura.js +1 -1
  136. package/dist/esm-es5/cura.js.map +1 -1
  137. package/dist/esm-es5/index.js +1 -1
  138. package/dist/esm-es5/index.js.map +1 -1
  139. package/dist/esm-es5/loader.js +1 -1
  140. package/dist/esm-es5/loader.js.map +1 -1
  141. package/dist/types/api/cura-api.type.d.ts +1 -0
  142. package/dist/types/components/forms/cura-label/cura-label.d.ts +54 -0
  143. package/dist/types/components/forms/cura-label/cura-label.stories.d.ts +126 -0
  144. package/dist/types/components/text/cura-display/cura-display.d.ts +29 -18
  145. package/dist/types/components/text/cura-display/cura-display.stories.d.ts +52 -14
  146. package/dist/types/components/text/cura-heading/cura-heading.d.ts +34 -17
  147. package/dist/types/components/text/cura-heading/cura-heading.stories.d.ts +58 -6
  148. package/dist/types/components/text/cura-paragraph/cura-paragraph.d.ts +24 -12
  149. package/dist/types/components/text/cura-paragraph/cura-paragraph.stories.d.ts +47 -9
  150. package/dist/types/components.d.ts +139 -46
  151. package/dist/types/index.d.ts +9 -0
  152. package/package.json +2 -4
  153. package/dist/cjs/app-globals-0e3b7fc6.js.map +0 -1
  154. package/dist/cjs/cura-accordion_12.cjs.entry.js +0 -674
  155. package/dist/cjs/cura-accordion_12.cjs.entry.js.map +0 -1
  156. package/dist/cura/p-319699df.entry.js +0 -2
  157. package/dist/cura/p-319699df.entry.js.map +0 -1
  158. package/dist/cura/p-50ea2036.system.js +0 -2
  159. package/dist/cura/p-50ea2036.system.js.map +0 -1
  160. package/dist/cura/p-5250cb43.system.js +0 -2
  161. package/dist/cura/p-5250cb43.system.js.map +0 -1
  162. package/dist/cura/p-5cc3c8bd.system.entry.js +0 -2
  163. package/dist/cura/p-5cc3c8bd.system.entry.js.map +0 -1
  164. package/dist/cura/p-788e035b.system.js +0 -2
  165. package/dist/cura/p-788e035b.system.js.map +0 -1
  166. package/dist/cura/p-d5c64a5f.js +0 -2
  167. package/dist/cura/p-d5c64a5f.js.map +0 -1
  168. package/dist/esm/app-globals-cc003eaf.js.map +0 -1
  169. package/dist/esm/cura-accordion_12.entry.js +0 -659
  170. package/dist/esm/cura-accordion_12.entry.js.map +0 -1
  171. package/dist/esm-es5/app-globals-cc003eaf.js +0 -2
  172. package/dist/esm-es5/app-globals-cc003eaf.js.map +0 -1
  173. package/dist/esm-es5/cura-accordion_12.entry.js +0 -2
  174. package/dist/esm-es5/cura-accordion_12.entry.js.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"names":["curaAccordionCss","CuraAccordion","exports","this","mutationObserverCallback","mutations","_","mutation","type","attributeName","_a","target","_this","behavior","host","querySelectorAll","forEach","item","opened","addedNodes","Array","from","_b","addedNodes_1","length","node","setChildProperties","_i","mutations_1","mutationObserver","MutationObserver","class_1","prototype","handleChangeColor","setColors","connectedCallback","weights","window","CuraAPI","theme","fonts","getWeights","styles","spacing","getSpacing","colors","getColor","getSize","getFamily","regular","componentDidLoad","options","childList","subtree","attributes","observe","disconnectedCallback","disconnect","colorMode","iconColor","color","iconActiveColor","activeColor","iconSize","openIcon","closeIcon","Object","assign","concat","render","h","Host","style","name","curaAccordionItemCss","CuraAccordionItem","class_2","getIconColor","inverted","getClasses","classes","accordionItemClick","slot","class","onClick","e","label","size","curaButtonCss","CuraButton","class_3","medium","textAlign","toLowerCase","iconPosition","iconOnly","fontColor","disabled","isLoading","getIcon","iconName","getSymbolColor","iconset","handleClick","preventDefault","href","curaHeadingCss","CuraHeading","class_4","setFontProperties","weight","fontSizeBase","bold","black","hostCSSProperties","marginBlock","lineHeight","spotColor","getHeadingTag","tags","default","level","curaIconCss","CuraIcon","sizes","stroke","class_5","sizeHandler","scaledStroke","setHostProperty","colorHandler","assetsPath","localAssetsPath","prop","value","setProperty","version","viewBox","preserveAspectRatio","xmlns","xlinkHref","curaLoaderCircleCss","CuraLoaderCircle","xlarge","large","small","getPxSize","class_6","getStyles","fill","cx","cy","r","d","id","x1","y1","x2","y2","gradientUnits","offset","curaPageTemplateCss","CuraPageTemplate","class_7","contentwidth","curaParagraphCss","CuraParagraph","class_8","setsizeClass","sizeclass"],"sources":["src/components/accordion/cura-accordion/cura-accordion.scss?tag=cura-accordion&encapsulation=shadow","src/components/accordion/cura-accordion/cura-accordion.tsx","src/components/accordion/cura-accordion-item/cura-accordion-item.scss?tag=cura-accordion-item&encapsulation=shadow","src/components/accordion/cura-accordion-item/cura-accordion-item.tsx","src/components/buttons/cura-button/cura-button.scss?tag=cura-button&encapsulation=shadow","src/components/buttons/cura-button/cura-button.tsx","src/components/text/cura-heading/cura-heading.scss?tag=cura-heading&encapsulation=shadow","src/components/text/cura-heading/cura-heading.tsx","src/components/cura-icon/cura-icon.scss?tag=cura-icon&encapsulation=shadow","src/components/cura-icon/cura-icon.tsx","src/components/loaders/cura-loader-circle/cura-loader-circle.scss?tag=cura-loader-circle&encapsulation=shadow","src/components/loaders/cura-loader-circle/cura-loader-circle.tsx","src/components/cura-page-template/cura-page-template.scss?tag=cura-page-template&encapsulation=shadow","src/components/cura-page-template/cura-page-template.tsx","src/components/text/cura-paragraph/cura-paragraph.scss?tag=cura-paragraph&encapsulation=shadow","src/components/text/cura-paragraph/cura-paragraph.tsx"],"sourcesContent":[":host {\n display: block;\n color: var(--font-color);\n font-size: var(--font-size);\n font-size: var(--font-size);\n font-family: var(--font-family);\n font-weight: var(--font-weight-regular);\n\n &::after {\n content: \"\";\n display: block;\n border-bottom: solid 1px var(--neutral-base);\n width: 100%;\n }\n}\n\n","import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-accordion',\n styleUrl: 'cura-accordion.scss',\n shadow: true,\n})\nexport class CuraAccordion {\n\n @Element() host: HTMLElement;\n\n /**\n * Color scheme base color\n */\n @Prop({reflect: true}) color = 'primary';\n @Prop({reflect: true}) activeColor = 'accent';\n @Watch('color')\n @Watch('activeColor')\n handleChangeColor() {\n this.setColors();\n }\n\n /**\n * Set the color mode to dark or light\n */\n @Prop({reflect: true}) colorMode: 'dark' | 'light' = 'dark';\n\n /**\n * Accordion items icons\n */\n @Prop({reflect: true}) iconSize = 32;\n @Prop({reflect: true}) openIcon = 'down';\n @Prop({reflect: true}) closeIcon = 'up';\n\n /**\n * Color scheme base color\n * (By default, the icon will use the same color of 'color' and 'activeColor')\n */\n @Prop({reflect: true}) iconColor = '';\n @Prop({reflect: true}) iconActiveColor = '';\n\n /**\n * Accordion behavior when item is clicked\n * (The default will close all items except the current one)\n */\n @Prop({reflect: true}) behavior: 'default' | 'keep-open' = 'default';\n\n mutationObserverCallback = (mutations: MutationRecord[], _: MutationObserver) => {\n for (const mutation of mutations) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'opened' && mutation.target?.['opened']) {\n if (this.behavior !== 'default') continue;\n this.host.querySelectorAll('cura-accordion-item').forEach(item => {\n if (item != mutation.target) {\n item.opened = false;\n }\n });\n }\n if (mutation.type === 'childList') {\n const addedNodes = Array.from(mutation.addedNodes || []);\n for(let node of addedNodes) {\n this.setChildProperties(node as HTMLCuraAccordionItemElement);\n }\n }\n }\n }\n mutationObserver: MutationObserver = new MutationObserver(this.mutationObserverCallback);\n\n @State() styles = {};\n\n connectedCallback() {\n const weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);\n this.styles['--neutral-lighter'] = window.CuraAPI.theme.colors.getColor(`neutral-lighter`);\n this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-regular'] = weights.regular;\n this.setColors();\n }\n\n componentDidLoad() {\n this.host.querySelectorAll('cura-accordion-item').forEach(item => {\n this.setChildProperties(item);\n });\n const options: MutationObserverInit = {childList: true, subtree: true, attributes: true}\n this.mutationObserver.observe(this.host, options)\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n }\n\n setChildProperties(item: HTMLCuraAccordionItemElement) {\n // Theme\n item.colorMode = this.colorMode;\n item.iconColor = this.iconColor || this.color;\n item.iconActiveColor = this.iconActiveColor || this.activeColor;\n // Icon\n item.iconSize = this.iconSize;\n item.openIcon = this.openIcon;\n item.closeIcon = this.closeIcon;\n }\n\n setColors() {\n this.styles = {\n ...this.styles,\n '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),\n '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`),\n '--color-active-lighter': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-lighter`),\n '--color-active-light': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-light`),\n '--color-active-base': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-base`),\n '--color-active-dark': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-dark`),\n\n '--icon-color-lighter': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-lighter`),\n '--icon-color-light': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-light`),\n '--icon-color-base': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-base`),\n '--icon-color-dark': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-dark`),\n '--icon-color-active-lighter': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-lighter`),\n '--icon-color-active-light': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-light`),\n '--icon-color-active-base': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-base`),\n '--icon-color-active-dark': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-dark`),\n };\n }\n\n render() {\n return (\n <Host style={this.styles}>\n <slot name='accordion-item'></slot>\n </Host>\n );\n }\n\n}\n","@import '../../../scss/mixins/responsive.scss';\n\n:host {\n display: block;\n\n .accordion-item {\n width: 100%;\n\n .label {\n display: flex;\n flex-direction: column;\n &::before {\n content: \"\";\n display: block;\n border-top: solid 1px var(--neutral-base);\n width: 100%;\n }\n .label-container {\n display: flex;\n flex-grow: 1;\n justify-content: space-between;\n align-items: center;\n gap: calc(var(--base-spacing) * 2px);\n min-height: 40px;\n word-break: break-word;\n cursor: pointer;\n font-size: 1.14em;\n font-weight: var(--font-weight-regular);\n color: var(--color-base);\n padding: 0px;\n\n cura-icon {\n margin-right: 4px;\n }\n\n &:hover {\n color: var(--color-light);\n cura-icon {\n --color: var(--icon-color-light) !important;\n }\n }\n &:active {\n color: var(--color-dark);\n cura-icon {\n --color: var(--icon-color-dark) !important;\n }\n }\n }\n }\n\n .content {\n font-size: 1em;\n overflow: hidden;\n max-height: 0;\n transition: max-height .25s ease;\n .content-wrapper {\n padding: calc(var(--base-spacing) * 2px) 0px;\n border-top: solid 1px var(--neutral-base);\n }\n }\n\n &.active {\n .label .label-container {\n color: var(--color-active-base);\n &:hover {\n color: var(--color-active-light);\n cura-icon {\n --color: var(--icon-color-active-light) !important;\n }\n }\n &:active {\n color: var(--color-active-dark);\n cura-icon {\n --color: var(--icon-color-active-dark) !important;\n }\n }\n }\n\n .content {\n max-height: 200vh;\n overflow-y: auto;\n transition: max-height .5s ease .14s;\n }\n }\n\n &.inverted {\n .label .label-container {\n color: var(--neutral-lighter);\n &:hover {\n color: var(--color-lighter);\n cura-icon {\n --color: var(--icon-color-lighter) !important;\n }\n }\n &:active {\n color: var(--color-light);\n cura-icon {\n --color: var(--icon-color-light) !important;\n }\n }\n }\n }\n\n &.active.inverted {\n .label .label-container {\n color: var(--neutral-purewhite);\n &:hover {\n color: var(--color-active-lighter);\n cura-icon {\n --color: var(--icon-color-active-lighter) !important;\n }\n }\n &:active {\n color: var(--color-active-light);\n cura-icon {\n --color: var(--icon-color-active-light) !important;\n }\n }\n }\n }\n }\n\n @include medium-only() {\n .accordion-item {\n .label .label-container {\n font-size: 1.29em;\n }\n\n .content {\n font-size: 1.14em;\n }\n }\n }\n\n @include large-up() {\n .accordion-item {\n .label .label-container {\n font-size: 1.29em;\n }\n\n .content {\n font-size: 1.14em;\n }\n }\n }\n}\n","import { Component, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-accordion-item',\n styleUrl: 'cura-accordion-item.scss',\n shadow: true,\n})\nexport class CuraAccordionItem {\n\n /**\n * Text label for accordion item\n */\n @Prop({reflect: true}) label: string = '';\n\n /** ***Properties below are inherited from the cura-accordion*** */\n /**\n * Accordion items icons\n */\n @Prop({reflect: true}) iconSize = 32;\n @Prop({reflect: true}) openIcon = 'down';\n @Prop({reflect: true}) closeIcon = 'up';\n\n /**\n * Color scheme base color\n * (By default, the icon will use the same color of 'color' and 'activeColor')\n */\n @Prop({reflect: true}) iconColor = '';\n @Prop({reflect: true}) iconActiveColor = '';\n\n /**\n * Set the color mode to dark or light\n */\n @Prop() colorMode: 'dark' | 'light' = 'dark';\n\n @Prop({ reflect: true, mutable: true }) opened: boolean = false;\n\n @State() styles = {};\n\n getIconColor() {\n const inverted = this.colorMode === 'light';\n const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;\n const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;\n return this.opened ? iconActiveColor : iconColor;\n }\n\n getClasses() {\n const classes = {};\n classes['accordion-item'] = true;\n classes['active'] = this.opened;\n classes['inverted'] = this.colorMode === 'light';\n return classes;\n }\n\n accordionItemClick(_: Event) {\n this.opened = !this.opened;\n }\n\n render() {\n return (\n <Host slot=\"accordion-item\">\n <div class={this.getClasses()} style={this.styles}>\n <div class=\"label\" onClick={e => this.accordionItemClick(e)}>\n <div class=\"label-container\">\n <span>{this.label}</span>\n <cura-icon name={this.opened ? this.closeIcon : this.openIcon} size={this.iconSize} color={this.getIconColor()}></cura-icon>\n </div>\n </div>\n <div class='content'>\n <div class=\"content-wrapper\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n}\n","@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n @include button-host();\n\n button, a {\n @include button-element() {\n background-color: var(--color-base);\n border: none;\n &:not(.isLoading):not(.disabled):hover { background-color: var(--color-light); }\n &:not(.isLoading):not(.disabled):active { background-color: var(--color-dark); }\n };\n @include button-shadow-behavior();\n @include button-sizes();\n\n // Children Elements\n @include button-container();\n @include button-label() {\n color: var(--neutral-black);\n &.inverted { color: var(--neutral-white); }\n }\n @include button-icon();\n\n // Disabled state\n @include button-disabled() {\n background-color: var(--neutral-light); \n .label, .label.inverted { color: var(--neutral-dark); }\n };\n\n // FAB / Icon-only\n @include button-icon-only-behavior();\n\n // Loading State\n @include button-loading();\n\n }\n}\n","import { Component, Host, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n tag: 'cura-button',\n styleUrl: 'cura-button.scss',\n shadow: true,\n})\nexport class CuraButton {\n\n /**\n * Button size: small | medium | large (default)\n */\n @Prop({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Disabled state. Boolean.\n */\n @Prop({reflect: true}) disabled = false;\n /**\n * Loading state. Boolean.\n */\n @Prop({reflect: true}) isLoading = false;\n\n /**\n * Name of the icon to be used from iconset.\n */\n @Prop({reflect: true}) iconName: string;\n /**\n * Custom iconset if needed.\n */\n @Prop({reflect: true}) iconset = 'default';\n /**\n * Icon position: left (default) | right.\n */\n @Prop({reflect: true}) iconPosition: 'left' | 'right' = 'left';\n /**\n * Set button to FAB/icon only.\n */\n @Prop({reflect: true}) iconOnly = false;\n\n /**\n * Property href switch button to link.\n */\n @Prop({reflect: true}) href: string;\n /**\n * Set target if link.\n */\n @Prop({reflect: true}) target = \"_self\";\n\n /**\n * Color base from color scheme. Default: accent.\n */\n @Prop() color = 'accent';\n @Watch('color')\n handleChangeColor() {\n this.setColors();\n }\n /**\n * Set the font color to dark or light.\n */\n @Prop({reflect: true}) fontColor: 'dark' | 'light' = 'dark';\n /**\n * Set text aligment for the button label.\n * Vales: left (default) | center | right.\n */\n @Prop({reflect: true}) textAlign: 'left' | 'center' | 'right' = 'left';\n\n\n @State() styles = {};\n\n weights;\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n this.styles['--text-align'] = this.textAlign;\n this.setColors();\n }\n\n getClasses() {\n const classes = {};\n classes[`${this.size.toLowerCase()}`] = true;\n classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n classes[`icon-only`] = this.iconOnly;\n classes['inverted'] = this.fontColor === 'light';\n classes['disabled'] = this.disabled;\n classes['isLoading'] = this.isLoading;\n return classes;\n }\n\n setColors() {\n this.styles = {\n ...this.styles,\n '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)\n };\n }\n\n getIcon() {\n if (!this.iconName) return '';\n const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n const color = this.getSymbolColor();\n return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n }\n\n getSymbolColor() {\n return this.disabled\n ? 'neutral-dark'\n : this.fontColor === 'light'\n ? 'neutral-white'\n : 'neutral-black';\n }\n\n handleClick(e: Event) {\n if (this.disabled || this.isLoading) e.preventDefault();\n }\n\n render() {\n return (\n <Host>\n { this.href ? (\n <a href={this.disabled ? '' : this.href}\n target={this.target}\n class={this.getClasses()}\n style={this.styles}\n onClick={(e) => this.handleClick(e)}>\n <span class=\"button-container\">\n { this.getIcon() }\n <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n </span>\n <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n </a>\n ) : (\n <button class={this.getClasses()}\n style={this.styles}\n disabled={this.disabled || null}\n onClick={(e) => this.handleClick(e)}>\n <span class=\"button-container\">\n { this.getIcon() }\n <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n </span>\n <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n </button>\n )}\n </Host>\n );\n }\n\n}\n","@import '../../../scss/mixins/responsive.scss';\n\n:host {\n display: block;\n font-size: var(--font-size-base);\n\n h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-family);\n font-size: 1.714em;\n font-weight: var(--font-weight-regular);\n color: var(--color-body);\n line-height: var(--line-height);\n margin-block: var(--margin-block);\n letter-spacing: 0px;\n\n &.bold-weight {\n font-weight: var(--font-weight-medium);\n }\n\n &.large {\n font-size: 2.071em;\n letter-spacing: -0.58px;\n }\n\n &.small {\n font-size: 1.214em;\n line-height: calc(var(--line-height) + 20%);\n\n &.bold-weight, ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-bold);\n }\n }\n\n &.xsmall {\n font-size: 0.714em;\n font-weight: var(--font-weight-medium);\n letter-spacing: 0.6px;\n\n &.bold-weight, ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-bold);\n }\n }\n\n }\n\n @include medium-large() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 2em;\n\n &.large {\n font-size: 2.357em;\n letter-spacing: -0.66px;\n }\n\n &.small {\n font-size: 1.357em;\n }\n\n &.xsmall {\n font-size: 0.857em;\n line-height: calc(var(--line-height) + 3%);\n letter-spacing: 0.72px;\n }\n\n }\n }\n\n @include xlarge-only() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 2.5em;\n line-height: calc(var(--line-height) + 5%);\n letter-spacing: -0.82px;\n\n &.large {\n font-size: 2.929em;\n }\n\n &.small {\n font-size: 1.714em;\n line-height: calc(var(--line-height) + 30%);\n letter-spacing: 0%;\n }\n\n &.xsmall {\n font-size: 1em;\n line-height: calc(var(--line-height) + 12.857%);\n letter-spacing: 0.28px;\n }\n }\n }\n\n ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-medium);\n }\n\n ::slotted(a) {\n font-weight: var(--font-weight-bold);\n color: var(--color-link);\n text-underline-offset: 10%;\n cursor: pointer;\n }\n\n ::slotted(u) {\n text-underline-offset: 10%;\n }\n\n ::slotted(abbr) {\n color: var(--color-link);\n text-decoration: underline dashed 1px var(--color-link);\n text-underline-offset: 10%;\n cursor: default;\n }\n\n ::slotted(i), ::slotted(em) {\n font-weight: var(--font-weight-medium);\n }\n\n}\n","import { Component, Host, h, Prop, Element, Watch, State } from '@stencil/core';\n\n@Component({\n tag: 'cura-heading',\n styleUrl: 'cura-heading.scss',\n shadow: true,\n})\nexport class CuraHeading {\n\n /**\n * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n * Values: 1(default) to 6.\n */\n @Prop({reflect: true}) level: 1 | 2 | 3 | 4 | 5 | 6 = 1;\n\n /**\n * Heading style size.\n * Values: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall.\n */\n @Prop({reflect: true}) size: 'regular' | 'medium' | 'large' | 'small' | 'caption' | 'xsmall' = 'medium';\n\n /**\n * Heading font weight. It is possible to use regular HTML tags like <b> or <strong> as well.\n * Values: regular (default) | bold.\n */\n @Prop({reflect: true}) weight: 'regular' | 'bold' = 'regular';\n\n /**\n * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n * Values: Color from design system scheme. Default to 'accent-dark'.\n */\n @Prop({reflect: true}) spotColor = 'accent-dark';\n\n /**\n * Text color.\n * Values: Color from design system scheme. Default to the font color from the theme.\n */\n @Prop() color: string;\n @Watch('color')\n @Watch('spotColor')\n handleChangeColor() {\n this.setColors();\n }\n\n /**\n * CSS margin-block property values.\n * Default to 1.25em\n */\n @Prop({reflect: true}) marginBlock = '1.25em';\n\n /**\n * CSS line-height property values.\n * Default to 140%\n */\n @Prop({reflect: true}) lineHeight = '130%';\n\n /**\n * Host element <cura-heading>\n */\n @Element() host: HTMLElement;\n\n /**\n * Internal Props\n */\n weights: any;\n fontSizeBase: string;\n @State() styles = {};\n theme = window.CuraAPI.theme;\n\n connectedCallback() {\n this.setFontProperties();\n this.setColors();\n }\n\n getClasses() {\n const classes = {};\n classes[this.size.toLowerCase()] = true;\n classes[`${this.weight.toLowerCase()}-weight`] = true;\n return classes;\n }\n\n setFontProperties() {\n this.weights = this.theme.fonts.getWeights();\n this.fontSizeBase = this.theme.fonts.getSize();\n this.styles = {\n '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),\n '--font-weight-regular': this.weights.regular,\n '--font-weight-medium': this.weights.medium,\n '--font-weight-bold': this.weights.bold,\n '--font-weight-black': this.weights.black\n }\n }\n\n hostCSSProperties() {\n return {\n '--margin-block': this.marginBlock,\n '--font-size-base': this.fontSizeBase,\n '--line-height': this.lineHeight\n };\n }\n\n setColors() {\n const fontColor = this.color\n ? this.theme.colors.getColor(this.color)\n : this.theme.fonts.getColor();\n this.styles = {\n ...this.styles,\n '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n };\n }\n\n getHeadingTag() {\n const tags = {\n '1': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>,\n '2': <h2 style={this.styles} class={this.getClasses()}><slot></slot></h2>,\n '3': <h3 style={this.styles} class={this.getClasses()}><slot></slot></h3>,\n '4': <h4 style={this.styles} class={this.getClasses()}><slot></slot></h4>,\n '5': <h5 style={this.styles} class={this.getClasses()}><slot></slot></h5>,\n '6': <h6 style={this.styles} class={this.getClasses()}><slot></slot></h6>,\n 'default': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>\n };\n return tags[`${this.level}`] || tags['default'];\n }\n\n render() {\n return (\n <Host style={this.hostCSSProperties()}>\n { this.getHeadingTag() }\n </Host>\n );\n }\n\n}\n",":host {\n width: var(--size);\n height: var(--size);\n svg {\n display: inline-block;\n stroke: var(--color);\n width: var(--size);\n height: var(--size);\n stroke-width: var(--stroke);\n fill: none;\n }\n}\n","import { Component, Host, h, Prop, Element, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-icon',\n styleUrl: 'cura-icon.scss',\n shadow: true\n})\nexport class CuraIcon {\n\n @Prop({reflect: true}) name = '';\n @Prop() color = 'neutral-base';\n @Prop() size: string | number;\n @Prop({reflect: true}) iconset = 'default';\n @Prop() disabled = false;\n\n @Element() host: HTMLElement;\n\n sizes = {\n \"128\": {size: 128, stroke: 5.25},\n \"72\": {size: 72, stroke: 3.5},\n \"64\": {size: 64, stroke: 3.25},\n \"48\": {size: 48, stroke: 2.75},\n \"40\": {size: 40, stroke: 2.5},\n \"32\": {size: 32, stroke: 2.25},\n \"24\": {size: 24, stroke: 2},\n \"20\": {size: 20, stroke: 1.75},\n \"16\": {size: 16, stroke: 1.5},\n \"default\": {size: 24, stroke: 2}\n };\n\n @Watch('size')\n sizeHandler(size: string | number) {\n const scaledStroke = (iconSize: string | number) => {\n return `${this.sizes[iconSize].stroke * (this.sizes.default.size / this.sizes[iconSize].size)}px`;\n }\n this.setHostProperty('--size', this.sizes[`${size}`] ? `${this.sizes[size].size}px` : `${this.sizes.default.size}px`);\n this.setHostProperty('--stroke', this.sizes[`${size}`] ? scaledStroke(size) : scaledStroke(\"default\"));\n }\n\n @Watch('color')\n @Watch('disabled')\n colorHandler() {\n this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color));\n }\n\n assetsPath: string;\n\n connectedCallback() {\n this.assetsPath = window.CuraAPI.localAssetsPath;\n this.sizeHandler(this.size);\n this.colorHandler();\n }\n\n setHostProperty(prop: string, value: string) {\n this.host.style.setProperty(prop, value);\n }\n\n render() {\n return (\n <Host>\n <svg\n version=\"1.1\"\n viewBox=\"0 0 24 24\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <use\n xlinkHref={`${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}`}>\n </use>\n </svg>\n </Host>\n );\n }\n\n}\n","@import '../../../scss/mixins/animations.scss';\n\n:host {\n display: inline-block;\n width: var(--size);\n height: var(--size);\n \n svg {\n width: var(--size);\n height: var(--size);\n animation: rotate .7s linear infinite;\n }\n\n circle, path {\n stroke-miterlimit: 10;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n path { stroke: var(--color); }\n\n stop { stop-color: var(--color); }\n linearGradient stop:first-child {\n stop-opacity: 0.14;\n }\n}\n\n@include rotate();\n\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'cura-loader-circle',\n styleUrl: 'cura-loader-circle.scss',\n shadow: true,\n})\nexport class CuraLoaderCircle {\n\n /**\n * Loader size. Values: small, medium or large.\n */\n @Prop({reflect: true}) size: 'small' | 'medium' | 'large' | 'xlarge' = 'medium';\n /**\n * One from color scheme. Default: neutral-white.\n */\n @Prop({reflect: true}) color = 'neutral-white';\n\n sizes = {\n xlarge: 32,\n large: 24,\n medium: 20,\n small: 16,\n default: 16,\n };\n\n getPxSize = () => this.sizes[this.size] || this.sizes['default'];\n\n getStyles() {\n return {\n '--size': `${this.getPxSize()}px`,\n '--color': window.CuraAPI.theme.colors.getColor(this.color)\n }\n }\n\n render() {\n return (\n <Host style={this.getStyles()}>\n <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"url(#paint0_linear_13485_11488)\" stroke-width=\"2\"/>\n <path d=\"M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5\" stroke-width=\"2\"/>\n </g>\n <defs>\n <linearGradient id=\"paint0_linear_13485_11488\" x1=\"15.7\" y1=\"4.5\" x2=\"4.15\" y2=\"11.5\" gradientUnits=\"userSpaceOnUse\">\n <stop/>\n <stop offset=\"1\"/>\n </linearGradient>\n </defs>\n </svg>\n </Host>\n );\n }\n\n}\n","@import '../../scss/mixins/responsive.scss';\n\n@mixin template-spacing($spacing-scale: 0px, $large-device: false) {\n $spacing-px: calc(var(--spacing) * $spacing-scale);\n padding: 0px;\n @if $large-device {\n #content-container {\n #sidebar-left ::slotted(div[slot=\"sidebar-left\"]) {\n margin-right: $spacing-px;\n }\n #sidebar-right ::slotted(div[slot=\"sidebar-right\"]) {\n margin-left: $spacing-px;\n }\n }\n }\n}\n\n:host {\n display: block;\n\n .grid-template {\n display: grid;\n grid-template-rows: auto;\n grid-template-columns: auto;\n grid-template-areas:\n 'sub-header'\n 'header'\n 'pre-content'\n 'content-container'\n 'post-body'\n 'footer'\n 'sub-footer';\n\n #sub-header {\n grid-area: sub-header;\n }\n\n #header {\n grid-area: header;\n }\n\n #pre-content {\n grid-area: pre-content;\n }\n\n #content-container {\n grid-area: content-container;\n }\n\n #post-body {\n grid-area: post-body;\n }\n\n #footer {\n grid-area: footer;\n }\n\n #sub-footer {\n grid-area: sub-footer;\n }\n\n @include mobile-only() {\n $spacing-scale: 4px;\n @include template-spacing($spacing-scale);\n }\n\n @include medium-only() {\n $spacing-scale: 5px;\n @include template-spacing($spacing-scale);\n }\n\n @include large-only() {\n $spacing-scale: 5px;\n @include template-spacing($spacing-scale, true);\n #content-container {\n display: flex;\n #content {\n flex-grow: 1;\n }\n #sidebar-left, #sidebar-right {\n max-width: 20%;\n }\n }\n }\n\n @include xlarge-only() {\n $spacing-scale: 7px;\n @include template-spacing($spacing-scale, true);\n #content-container {\n display: flex;\n #content {\n flex-grow: 1;\n }\n #sidebar-left, #sidebar-right {\n max-width: 20%;\n }\n &.centered {\n max-width: $breakpoint-xlarge-min;\n justify-self: center;\n }\n }\n }\n }\n}\n","import { Component, Element, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-page-template',\n styleUrl: 'cura-page-template.scss',\n shadow: true,\n})\nexport class CuraPageTemplate {\n\n @Prop({reflect: true}) contentwidth: 'default' | 'centered' = 'default';\n\n @Element() host: HTMLElement;\n\n styles: any;\n\n connectedCallback() {\n this.styles = {\n '--spacing': window.CuraAPI.theme.spacing.getSpacing(),\n }\n }\n\n getClasses() {\n const classes = {};\n classes[this.contentwidth.toLowerCase()] = true;\n return classes;\n }\n\n render() {\n return (\n <Host>\n <div style={this.styles} class=\"grid-template\">\n <div id=\"sub-header\">\n <slot name='sub-header'></slot>\n </div>\n <div id=\"header\">\n <slot name='header'></slot>\n </div>\n <div id=\"pre-content\">\n <slot name='pre-content'></slot>\n </div>\n <div id=\"content-container\" class={this.getClasses()}>\n <div id=\"sidebar-left\">\n <slot name='sidebar-left'></slot>\n </div>\n <div id=\"content\">\n <slot name=\"content\"></slot>\n <slot></slot>\n </div>\n <div id=\"sidebar-right\">\n <slot name='sidebar-right'></slot>\n </div>\n </div>\n <div id=\"post-body\">\n <slot name='post-body'></slot>\n </div>\n <div id=\"footer\">\n <slot name='footer'></slot>\n </div>\n <div id=\"sub-footer\">\n <slot name='sub-footer'></slot>\n </div>\n </div>\n </Host>\n );\n }\n\n}\n","@import '../../../scss/mixins/responsive.scss';\n\n:host {\n display: block;\n font-size: var(--font-size-base);\n\n p {\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-regular);\n color: var(--color-body);\n line-height: var(--line-height);\n margin-block: var(--margin-block);\n letter-spacing: 0.28px;\n\n &.large {\n font-size: 1.214em;\n line-height: calc(var(--line-height) + 10%);\n letter-spacing: 0px;\n }\n\n &.small {\n font-size: 0.85em;\n line-height: calc(var(--line-height) - 5%);\n letter-spacing: 0.48px;\n }\n\n &.caption, &.xsmall {\n font-size: 0.714em;\n line-height: calc(var(--line-height) - 5%);\n letter-spacing: 0.6px;\n }\n }\n\n @include medium-large() {\n p {\n font-size: 1.143em;\n line-height: calc(var(--line-height) + 5%);\n letter-spacing: 0.32px;\n\n &.large {\n font-size: 1.357em;\n line-height: calc(var(--line-height) + 10%);\n letter-spacing: 0px;\n }\n\n &.small {\n font-size: 1em;\n line-height: calc(var(--line-height) - 5%);\n letter-spacing: 0.56px;\n }\n\n &.caption, &.xsmall {\n font-size: 0.85em;\n line-height: calc(var(--line-height) - 5%);\n letter-spacing: 0.72px;\n }\n }\n }\n\n @include xlarge-only() {\n p {\n font-size: 1.429em;\n line-height: calc(var(--line-height) + 10%);\n letter-spacing: 0px;\n\n &.large {\n font-size: 1.714em;\n line-height: calc(var(--line-height) + 20%);\n }\n\n &.small {\n font-size: 1.21em;\n line-height: calc(var(--line-height) + 5%);\n letter-spacing: 0px;\n }\n\n &.caption, &.xsmall {\n font-size: 1em;\n line-height: calc(var(--line-height) + 5%);\n letter-spacing: 0.28px;\n }\n }\n }\n\n ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-bold);\n }\n\n ::slotted(a) {\n font-weight: var(--font-weight-medium);\n color: var(--color-link);\n text-underline-offset: 10%;\n }\n\n ::slotted(u) {\n font-weight: var(--font-weight-medium);\n text-underline-offset: 10%;\n }\n\n ::slotted(abbr) {\n color: var(--color-link);\n text-decoration: underline dashed 1px var(--color-link);\n text-underline-offset: 10%;\n cursor: default;\n }\n\n}\n\n","import { Component, Host, Prop, h, Element, Watch, State } from '@stencil/core';\n\n@Component({\n tag: 'cura-paragraph',\n styleUrl: 'cura-paragraph.scss',\n shadow: true,\n})\nexport class CuraParagraph {\n\n /**\n * Set size of body text.\n * Values: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall.\n */\n @Prop({reflect: true}) size: 'regular' | 'medium' | 'large' | 'small' | 'caption' | 'xsmall' = 'medium';\n\n /**\n * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n * Values: Color from design system scheme. Default to 'accent-dark'.\n */\n @Prop({reflect: true}) spotColor = 'accent-dark';\n\n /**\n * Text color.\n * Values: Color from design system scheme. Default to the font color from the theme.\n */\n @Prop() color: string;\n @Watch('color')\n @Watch('spotColor')\n handleChangeColor() {\n this.setColors();\n }\n\n /**\n * CSS margin-block property values.\n * Default to 1.25em\n */\n @Prop({reflect: true}) marginBlock = '1.25em';\n\n /**\n * CSS line-height property values.\n * Default to 140%\n */\n @Prop({reflect: true}) lineHeight = '140%';\n\n /**\n * Host element <cura-paragraph>\n */\n @Element() host: HTMLElement;\n\n /**\n * Internal Props\n */\n weights: any;\n fontSizeBase: string;\n @State() styles = {};\n theme = window.CuraAPI.theme;\n\n connectedCallback() {\n this.setFontProperties();\n this.setColors();\n }\n\n setsizeClass() {\n const sizeclass = {};\n sizeclass[this.size.toLowerCase()] = true;\n return sizeclass;\n }\n\n setFontProperties() {\n this.weights = this.theme.fonts.getWeights();\n this.fontSizeBase = this.theme.fonts.getSize();\n this.styles = {\n '--font-family': this.theme.fonts.getFamily('body'),\n '--font-weight-regular': this.weights.regular,\n '--font-weight-medium': this.weights.medium,\n '--font-weight-bold': this.weights.bold\n };\n }\n\n setColors() {\n const fontColor = this.color\n ? this.theme.colors.getColor(this.color)\n : this.theme.fonts.getColor();\n this.styles = {\n ...this.styles,\n '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n };\n }\n\n hostCSSProperties() {\n return {\n '--margin-block': this.marginBlock,\n '--font-size-base': this.fontSizeBase,\n '--line-height': this.lineHeight\n };\n }\n\n render() {\n return (\n <Host style={this.hostCSSProperties()}>\n <p style={this.styles} class={this.setsizeClass()}>\n <slot></slot>\n </p>\n </Host>\n );\n }\n\n}\n"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ System.register(["./p-c0c00396.system.js"],(function(t){"use strict";var o,i,e;return{setters:[function(t){o=t.r;i=t.h;e=t.H}],execute:function(){var a=':host{--border-radius:4px;display:inline-block;vertical-align:middle}:host button,:host a{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:transparent;border:none;-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-base);box-shadow:inset 0px 0px 0px 2px var(--color-base);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(.disabled):not(.isLoading):hover,:host a:not(.disabled):not(.isLoading):hover{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-light);box-shadow:inset 0px 0px 0px 2px var(--color-light)}:host button:not(.disabled):not(.isLoading):hover .label,:host a:not(.disabled):not(.isLoading):hover .label{color:var(--color-light)}:host button:not(.disabled):not(.isLoading):hover cura-icon,:host a:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-light) !important}:host button:not(.disabled):not(.inverted):not(.isLoading):active,:host a:not(.disabled):not(.inverted):not(.isLoading):active{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-dark);box-shadow:inset 0px 0px 0px 2px var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active .label,:host a:not(.disabled):not(.inverted):not(.isLoading):active .label{color:var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active cura-icon,:host a:not(.disabled):not(.inverted):not(.isLoading):active cura-icon{--color:var(--color-dark) !important}:host button.medium,:host a.medium{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{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{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{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button .label,:host a .label{-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(--color-base)}:host button .label.inverted,:host a .label.inverted{color:var(--neutral-white)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host a.medium.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.7px)}:host button.medium.icon-right cura-icon,:host a.medium.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.7px)}:host button.small.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.5px)}:host button.small.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.5px)}:host button.disabled,:host a.disabled{cursor:not-allowed;-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-base);box-shadow:inset 0px 0px 0px 2px var(--neutral-base)}:host button.disabled .label,:host button.disabled .label.inverted,:host a.disabled .label,:host a.disabled .label.inverted{color:var(--neutral-dark)}:host button.disabled.inverted,:host a.disabled.inverted{opacity:0.6;-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-white);box-shadow:inset 0px 0px 0px 2px var(--neutral-white)}:host button.disabled.inverted .label,:host button.disabled.inverted .label.inverted,:host a.disabled.inverted .label,:host a.disabled.inverted .label.inverted{color:var(--neutral-white)}:host button.disabled.inverted cura-icon,:host a.disabled.inverted cura-icon{--color:var(--neutral-white) !important}:host button.disabled.inverted cura-loader-circle,:host a.disabled.inverted cura-loader-circle{--color:var(--neutral-white) !important}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3.5px)}:host button.icon-only .label,:host a.icon-only .label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 2.75px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 1.5px)}:host button.inverted,:host a.inverted{-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-white);box-shadow:inset 0px 0px 0px 2px var(--neutral-white)}:host button.inverted:not(.disabled):not(.isLoading):hover,:host a.inverted:not(.disabled):not(.isLoading):hover{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-lighter);box-shadow:inset 0px 0px 0px 2px var(--color-lighter)}:host button.inverted:not(.disabled):not(.isLoading):hover .label,:host a.inverted:not(.disabled):not(.isLoading):hover .label{color:var(--color-lighter)}:host button.inverted:not(.disabled):not(.isLoading):hover cura-icon,:host a.inverted:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-lighter) !important}:host button.inverted:not(.disabled):not(.isLoading):active,:host a.inverted:not(.disabled):not(.isLoading):active{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-light);box-shadow:inset 0px 0px 0px 2px var(--color-light)}:host button.inverted:not(.disabled):not(.isLoading):active .label,:host a.inverted:not(.disabled):not(.isLoading):active .label{color:var(--color-light)}:host button.inverted:not(.disabled):not(.isLoading):active cura-icon,:host a.inverted:not(.disabled):not(.isLoading):active cura-icon{--color:var(--color-light) !important}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0.3}:host button.isLoading.icon-only .button-container,:host a.isLoading.icon-only .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}';var n=t("cura_button_outline",function(){function t(t){o(this,t);this.size="large";this.disabled=false;this.isLoading=false;this.iconName=undefined;this.iconset="default";this.iconPosition="left";this.iconOnly=false;this.href=undefined;this.target="_self";this.color="accent";this.fontColor="dark";this.textAlign="left";this.styles={}}t.prototype.handleChangeColor=function(){this.setColors()};t.prototype.connectedCallback=function(){this.weights=window.CuraAPI.theme.fonts.getWeights();this.styles["--base-spacing"]=window.CuraAPI.theme.spacing.getSpacing();this.styles["--neutral-white"]=window.CuraAPI.theme.colors.getColor("neutral-white");this.styles["--neutral-base"]=window.CuraAPI.theme.colors.getColor("neutral-base");this.styles["--neutral-dark"]=window.CuraAPI.theme.colors.getColor("neutral-dark");this.styles["--font-size"]=window.CuraAPI.theme.fonts.getSize();this.styles["--font-family"]=window.CuraAPI.theme.fonts.getFamily();this.styles["--font-weight-medium"]=this.weights.medium;this.styles["--text-align"]=this.textAlign;this.setColors()};t.prototype.getClasses=function(){var t={};t["".concat(this.size.toLowerCase())]=true;t["icon-".concat(this.iconPosition.toLowerCase())]=true;t["icon-only"]=this.iconOnly;t["inverted"]=this.fontColor==="light";t["disabled"]=this.disabled;t["isLoading"]=this.isLoading;return t};t.prototype.setColors=function(){this.styles=Object.assign(Object.assign({},this.styles),{"--color-lighter":window.CuraAPI.theme.colors.getColor("".concat(this.color,"-lighter")),"--color-light":window.CuraAPI.theme.colors.getColor("".concat(this.color,"-light")),"--color-base":window.CuraAPI.theme.colors.getColor("".concat(this.color,"-base")),"--color-dark":window.CuraAPI.theme.colors.getColor("".concat(this.color,"-dark"))})};t.prototype.getIcon=function(){if(!this.iconName)return"";var t=this.size==="small"?16:this.size==="medium"?20:24;var o=this.getSymbolColor();return i("cura-icon",{name:this.iconName,iconset:this.iconset,size:t,color:o})};t.prototype.getSymbolColor=function(){return this.disabled?"neutral-dark":this.fontColor==="light"?"neutral-white":"".concat(this.color,"-base")};t.prototype.handleClick=function(t){if(this.disabled||this.isLoading)t.preventDefault()};t.prototype.render=function(){var t=this;return i(e,null,this.href?i("a",{href:this.disabled?"":this.href,target:this.target,class:this.getClasses(),style:this.styles,onClick:function(o){return t.handleClick(o)}},i("span",{class:"button-container"},this.getIcon(),i("span",{class:{label:true,inverted:this.fontColor==="light"}},i("slot",null))),i("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})):i("button",{class:this.getClasses(),style:this.styles,disabled:this.disabled||null,onClick:function(o){return t.handleClick(o)}},i("span",{class:"button-container"},this.getIcon(),i("span",{class:{label:true,inverted:this.fontColor==="light"}},i("slot",null))),i("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})))};Object.defineProperty(t,"watchers",{get:function(){return{color:["handleChangeColor"]}},enumerable:false,configurable:true});return t}());n.style=a}}}));
2
+ //# sourceMappingURL=p-7c8f3c77.system.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["curaButtonOutlineCss","CuraButtonOutline","exports","class_1","prototype","handleChangeColor","this","setColors","connectedCallback","weights","window","CuraAPI","theme","fonts","getWeights","styles","spacing","getSpacing","colors","getColor","getSize","getFamily","medium","textAlign","getClasses","classes","concat","size","toLowerCase","iconPosition","iconOnly","fontColor","disabled","isLoading","Object","assign","color","getIcon","iconName","iconSize","getSymbolColor","h","name","iconset","handleClick","e","preventDefault","render","_this","Host","href","target","class","style","onClick","label","inverted"],"sources":["src/components/buttons/cura-button-outline/cura-button-outline.scss?tag=cura-button-outline&encapsulation=shadow","src/components/buttons/cura-button-outline/cura-button-outline.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n @include button-host();\n\n button, a {\n @include button-element() {\n background-color: transparent;\n border: none;\n box-shadow: inset 0px 0px 0px 2px var(--color-base);\n\n &:not(.disabled):not(.isLoading):hover {\n box-shadow: inset 0px 0px 0px 2px var(--color-light);\n .label { color: var(--color-light); }\n cura-icon { --color: var(--color-light) !important; }\n }\n\n &:not(.disabled):not(.inverted):not(.isLoading):active { \n box-shadow: inset 0px 0px 0px 2px var(--color-dark);\n .label { color: var(--color-dark); }\n cura-icon { --color: var(--color-dark) !important; }\n }\n };\n\n @include button-sizes();\n\n // Children Elements\n @include button-container();\n @include button-label() {\n color: var(--color-base);\n &.inverted { color: var(--neutral-white); }\n }\n @include button-icon();\n\n // Disabled state\n @include button-disabled() {\n box-shadow: inset 0px 0px 0px 2px var(--neutral-base);\n .label, .label.inverted { color: var(--neutral-dark); }\n &.inverted {\n opacity: 0.6;\n box-shadow: inset 0px 0px 0px 2px var(--neutral-white);\n .label, .label.inverted { color: var(--neutral-white); }\n cura-icon { --color: var(--neutral-white) !important; }\n cura-loader-circle { --color: var(--neutral-white) !important; }\n }\n };\n\n // FAB / Icon-only\n @include button-icon-only-behavior();\n\n // Light version, inverted.\n &.inverted {\n box-shadow: inset 0px 0px 0px 2px var(--neutral-white);\n &:not(.disabled):not(.isLoading):hover { \n box-shadow: inset 0px 0px 0px 2px var(--color-lighter);\n .label { color: var(--color-lighter); }\n cura-icon { --color: var(--color-lighter) !important; }\n }\n &:not(.disabled):not(.isLoading):active {\n box-shadow: inset 0px 0px 0px 2px var(--color-light);\n .label { color: var(--color-light); }\n cura-icon { --color: var(--color-light) !important; }\n }\n }\n\n // Loading State\n @include button-loading();\n\n }\n\n}\n","import { Component, Host, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n tag: 'cura-button-outline',\n styleUrl: 'cura-button-outline.scss',\n shadow: true,\n})\nexport class CuraButtonOutline {\n\n /**\n * Button size: small | medium | large (default)\n */\n @Prop({reflect: true}) size: 'small' | 'medium' | 'large' = 'large';\n\n /**\n * Disabled state. Boolean.\n */\n @Prop({reflect: true}) disabled = false;\n /**\n * Loading state. Boolean.\n */\n @Prop({reflect: true}) isLoading = false;\n\n /**\n * Name of the icon to be used from iconset.\n */\n @Prop({reflect: true}) iconName: string;\n /**\n * Custom iconset if needed.\n */\n @Prop({reflect: true}) iconset = 'default';\n /**\n * Icon position: left (default) | right.\n */\n @Prop({reflect: true}) iconPosition: 'left' | 'right' = 'left';\n /**\n * Set button to FAB/icon only.\n */\n @Prop({reflect: true}) iconOnly = false;\n\n /**\n * Property href switch button to link.\n */\n @Prop({reflect: true}) href: string;\n /**\n * Set target if link.\n */\n @Prop({reflect: true}) target = \"_self\";\n\n /**\n * Color base from color scheme. Default: accent.\n */\n @Prop() color = 'accent';\n @Watch('color')\n handleChangeColor() {\n this.setColors();\n }\n /**\n * Set the font color to dark or light.\n */\n @Prop({reflect: true}) fontColor: 'dark' | 'light' = 'dark';\n /**\n * Set text aligment for the button label.\n * Vales: left (default) | center | right.\n */\n @Prop({reflect: true}) textAlign: 'left' | 'center' | 'right' = 'left';\n\n\n @State() styles = {};\n\n weights;\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n this.styles['--text-align'] = this.textAlign;\n this.setColors();\n }\n\n getClasses() {\n const classes = {};\n classes[`${this.size.toLowerCase()}`] = true;\n classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n classes[`icon-only`] = this.iconOnly;\n classes['inverted'] = this.fontColor === 'light';\n classes['disabled'] = this.disabled;\n classes['isLoading'] = this.isLoading;\n return classes;\n }\n\n setColors() {\n this.styles = {\n ...this.styles,\n '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),\n '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)\n };\n }\n\n getIcon() {\n if (!this.iconName) return '';\n const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n const color = this.getSymbolColor();\n return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n }\n\n getSymbolColor() {\n return this.disabled\n ? 'neutral-dark'\n : this.fontColor === 'light'\n ? 'neutral-white'\n : `${this.color}-base`;\n }\n\n handleClick(e: Event) {\n if (this.disabled || this.isLoading) e.preventDefault();\n }\n\n render() {\n return (\n <Host>\n { this.href ? (\n <a href={this.disabled ? '' : this.href}\n target={this.target}\n class={this.getClasses()}\n style={this.styles}\n onClick={(e) => this.handleClick(e)}>\n <span class=\"button-container\">\n { this.getIcon() }\n <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n </span>\n <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n </a>\n ) : (\n <button class={this.getClasses()}\n style={this.styles}\n disabled={this.disabled || null}\n onClick={(e) => this.handleClick(e)}>\n <span class=\"button-container\">\n { this.getIcon() }\n <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n </span>\n <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n </button>\n )}\n </Host>\n );\n }\n\n}\n"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ System.register(["./p-c0c00396.system.js","./p-48426f60.system.js"],(function(o,i){"use strict";var e,c,n,t,l;return{setters:[function(i){e=i.p;c=i.w;n=i.a;t=i.b;o("setNonce",i.s)},function(o){l=o.g}],execute:function(){var o=function(){{e.$cssShim$=c.__cssshim}var o=i.meta.url;var t={};if(o!==""){t.resourcesUrl=new URL(".",o).href}return n(t)};o().then((function(o){l();return t([["p-4bdbcdf0.system",[[1,"cura-button",{size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],fontColor:[513,"font-color"],textAlign:[513,"text-align"],styles:[32]}],[1,"cura-accordion-item",{label:[513],iconSize:[514,"icon-size"],openIcon:[513,"open-icon"],closeIcon:[513,"close-icon"],iconColor:[513,"icon-color"],iconActiveColor:[513,"icon-active-color"],colorMode:[1,"color-mode"],opened:[1540],styles:[32]}],[1,"cura-accordion",{color:[513],activeColor:[513,"active-color"],colorMode:[513,"color-mode"],iconSize:[514,"icon-size"],openIcon:[513,"open-icon"],closeIcon:[513,"close-icon"],iconColor:[513,"icon-color"],iconActiveColor:[513,"icon-active-color"],behavior:[513],styles:[32]}],[1,"cura-heading",{level:[514],size:[513],weight:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}],[1,"cura-page-template",{contentwidth:[513]}],[1,"cura-paragraph",{size:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}],[1,"cura-loader-circle",{size:[513],color:[513]}],[1,"cura-icon",{name:[513],color:[1],size:[8],iconset:[513],disabled:[4]}]]],["p-7c8f3c77.system",[[1,"cura-button-outline",{size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],fontColor:[513,"font-color"],textAlign:[513,"text-align"],styles:[32]}]]],["p-223924fb.system",[[1,"cura-button-transparent",{size:[513],disabled:[516],isLoading:[516,"is-loading"],iconName:[513,"icon-name"],iconset:[513],iconPosition:[513,"icon-position"],iconOnly:[516,"icon-only"],href:[513],target:[513],color:[1],fontColor:[513,"font-color"],textAlign:[513,"text-align"],styles:[32]}]]],["p-fc77814b.system",[[1,"cura-icons-view",{selected:[32]}]]],["p-ca054b07.system",[[1,"cura-display",{level:[514],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}]]],["p-d47b9cfe.system",[[1,"cura-label",{size:[513],weight:[513],spotColor:[513,"spot-color"],color:[1],marginBlock:[513,"margin-block"],lineHeight:[513,"line-height"],styles:[32]}]]]],o)}))}}}));
2
+ //# sourceMappingURL=p-8b18b5f7.system.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["patchBrowser","plt","$cssShim$","win","__cssshim","importMeta","module","meta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","globalScripts","bootstrapLazy","size","disabled","isLoading","iconName","iconset","iconPosition","iconOnly","target","color","fontColor","textAlign","styles","label","iconSize","openIcon","closeIcon","iconColor","iconActiveColor","colorMode","opened","activeColor","behavior","level","weight","spotColor","marginBlock","lineHeight","contentwidth","name","selected"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.3.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n var _a, _b, _c;\n return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n if (BUILD.cssVarShim) {\n // shim css vars\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n plt.$cssShim$ = win.__cssshim;\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n if (BUILD.profile && !performance.mark) {\n // not all browsers support performance.mark/measure (Safari 10)\n // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n // simply stub the implementations out.\n // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n // @ts-ignore\n performance.mark = performance.measure = () => {\n /*noop*/\n };\n performance.getEntriesByName = () => [];\n }\n // @ts-ignore\n const scriptElm = \n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n // Safari < v11 support: This IF is true if it's Safari below v11.\n // This fn cannot use async/await since Safari didn't support it until v11,\n // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n // so both the ESM file and nomodule file would get downloaded. Only Safari\n // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n return {\n then() {\n /* promise noop */\n },\n };\n }\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n if (!BUILD.safari10 && importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n }\n else if (BUILD.dynamicImportShim || BUILD.safari10) {\n opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n if (BUILD.dynamicImportShim) {\n patchDynamicImport(opts.resourcesUrl, scriptElm);\n }\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n if (BUILD.dynamicImportShim && !win.customElements) {\n // module support, but no custom elements support (Old Edge)\n // @ts-ignore\n return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n }\n }\n return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n const importFunctionName = getDynamicImportFunction(NAMESPACE);\n try {\n // test if this browser supports dynamic imports\n // There is a caching issue in V8, that breaks using import() in Function\n // By generating a random string, we can workaround it\n // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n }\n catch (e) {\n // this shim is specifically for browsers that do support \"esm\" imports\n // however, they do NOT support \"dynamic\" imports\n // basically this code is for old Edge, v18 and below\n const moduleMap = new Map();\n win[importFunctionName] = (src) => {\n var _a;\n const url = new URL(src, base).href;\n let mod = moduleMap.get(url);\n if (!mod) {\n const script = doc.createElement('script');\n script.type = 'module';\n script.crossOrigin = orgScriptElm.crossOrigin;\n script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n type: 'application/javascript',\n }));\n // Apply CSP nonce to the script tag if it exists\n const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n if (nonce != null) {\n script.setAttribute('nonce', nonce);\n }\n mod = new Promise((resolve) => {\n script.onload = () => {\n resolve(win[importFunctionName].m);\n script.remove();\n };\n });\n moduleMap.set(url, mod);\n doc.head.appendChild(script);\n }\n return mod;\n };\n }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"4NAmBA,IAAMA,EAAe,WAMK,CAGlBC,EAAIC,UAAYC,EAAIC,S,CAyBxB,IAAMC,EAAaC,EAAAC,KAAAC,IACnB,IAAMC,EAAqE,GAiB3E,GAAuBJ,IAAe,GAAI,CACtCI,EAAKC,aAAe,IAAIC,IAAI,IAAKN,GAAYO,I,CAiBjD,OAAOC,EAAeJ,EAC1B,ECtFAT,IAAec,MAAK,SAAAC,GAClBC,IACA,OAAOC,EAAc,wCAAuC,CAAAC,KAAA,MAAAC,SAAA,MAAAC,UAAA,mBAAAC,SAAA,kBAAAC,QAAA,MAAAC,aAAA,sBAAAC,SAAA,kBAAAZ,KAAA,MAAAa,OAAA,MAAAC,MAAA,IAAAC,UAAA,mBAAAC,UAAA,mBAAAC,OAAA,iCAAAC,MAAA,MAAAC,SAAA,kBAAAC,SAAA,kBAAAC,UAAA,mBAAAC,UAAA,mBAAAC,gBAAA,0BAAAC,UAAA,iBAAAC,OAAA,OAAAR,OAAA,4BAAAH,MAAA,MAAAY,YAAA,qBAAAF,UAAA,mBAAAL,SAAA,kBAAAC,SAAA,kBAAAC,UAAA,mBAAAC,UAAA,mBAAAC,gBAAA,0BAAAI,SAAA,MAAAV,OAAA,0BAAAW,MAAA,MAAAtB,KAAA,MAAAuB,OAAA,MAAAC,UAAA,mBAAAhB,MAAA,IAAAiB,YAAA,qBAAAC,WAAA,oBAAAf,OAAA,gCAAAgB,aAAA,6BAAA3B,KAAA,MAAAwB,UAAA,mBAAAhB,MAAA,IAAAiB,YAAA,qBAAAC,WAAA,oBAAAf,OAAA,gCAAAX,KAAA,MAAAQ,MAAA,wBAAAoB,KAAA,MAAApB,MAAA,IAAAR,KAAA,IAAAI,QAAA,MAAAH,SAAA,wDAAAD,KAAA,MAAAC,SAAA,MAAAC,UAAA,mBAAAC,SAAA,kBAAAC,QAAA,MAAAC,aAAA,sBAAAC,SAAA,kBAAAZ,KAAA,MAAAa,OAAA,MAAAC,MAAA,IAAAC,UAAA,mBAAAC,UAAA,mBAAAC,OAAA,6DAAAX,KAAA,MAAAC,SAAA,MAAAC,UAAA,mBAAAC,SAAA,kBAAAC,QAAA,MAAAC,aAAA,sBAAAC,SAAA,kBAAAZ,KAAA,MAAAa,OAAA,MAAAC,MAAA,IAAAC,UAAA,mBAAAC,UAAA,mBAAAC,OAAA,qDAAAkB,SAAA,kDAAAP,MAAA,MAAAE,UAAA,mBAAAhB,MAAA,IAAAiB,YAAA,qBAAAC,WAAA,oBAAAf,OAAA,gDAAAX,KAAA,MAAAuB,OAAA,MAAAC,UAAA,mBAAAhB,MAAA,IAAAiB,YAAA,qBAAAC,WAAA,oBAAAf,OAAA,UAAAd,EAC9D,G"}
@@ -0,0 +1,2 @@
1
+ import{r as t,h as e,H as s,g as i}from"./p-46d20db3.js";const o=":host{display:block;font-size:var(--font-size-base)}:host p{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){font-weight:var(--font-weight-bold)}:host p.large{font-size:1.357em;line-height:calc(var(--line-height) - 4%);letter-spacing:0px}:host p.small{font-size:1em;line-height:calc(var(--line-height) - 4%);letter-spacing:0.56px}:host p.xsmall{font-size:0.857em;line-height:calc(var(--line-height) - 17%);letter-spacing:0.72px}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(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}";const h=class{constructor(e){t(this,e);this.theme=window.CuraAPI.theme;this.size="medium";this.weight="regular";this.spotColor="accent-dark";this.color=undefined;this.marginBlock="0";this.lineHeight="125%";this.styles={}}handleChangeColor(){this.setColors()}connectedCallback(){this.setFontProperties();this.setColors()}getClasses(){const t={};t[this.size.toLowerCase()]=true;t[`${this.weight.toLowerCase()}-weight`]=true;return t}setFontProperties(){this.weights=this.theme.fonts.getWeights();this.fontSizeBase=this.theme.fonts.getSize();this.styles={"--font-family":this.theme.fonts.getFamily("body"),"--font-weight-medium":this.weights.medium,"--font-weight-bold":this.weights.bold}}setColors(){const t=this.color?this.theme.colors.getColor(this.color):this.theme.fonts.getColor();this.styles=Object.assign(Object.assign({},this.styles),{"--color-body":t||this.theme.colors.getColor("neutral-darker"),"--color-link":this.theme.colors.getColor(`${this.spotColor}`)})}hostCSSProperties(){return{"--margin-block":this.marginBlock,"--font-size-base":this.fontSizeBase,"--line-height":this.lineHeight}}render(){return e(s,{style:this.hostCSSProperties()},e("p",{style:this.styles,class:this.getClasses()},e("slot",null)))}get host(){return i(this)}static get watchers(){return{color:["handleChangeColor"],spotColor:["handleChangeColor"]}}};h.style=o;export{h as cura_label};
2
+ //# sourceMappingURL=p-91b0f78e.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["curaLabelCss","CuraLabel","this","theme","window","CuraAPI","handleChangeColor","setColors","connectedCallback","setFontProperties","getClasses","sizeclass","size","toLowerCase","weight","weights","fonts","getWeights","fontSizeBase","getSize","styles","getFamily","medium","bold","fontColor","color","colors","getColor","Object","assign","spotColor","hostCSSProperties","marginBlock","lineHeight","render","h","Host","style","class"],"sources":["./src/components/forms/cura-label/cura-label.scss?tag=cura-label&encapsulation=shadow","./src/components/forms/cura-label/cura-label.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n display: block;\n font-size: var(--font-size-base);\n\n p {\n font-family: var(--font-family);\n font-size: 1.143em;\n font-weight: var(--font-weight-medium);\n color: var(--color-body);\n line-height: var(--line-height);\n margin-block: var(--margin-block);\n letter-spacing: 0.32px;\n\n &.bold-weight, ::slotted(b), ::slotted(strong), ::slotted(u) {\n font-weight: var(--font-weight-bold);\n }\n\n &.large {\n font-size: 1.357em;\n line-height: calc(var(--line-height) - 4%);\n letter-spacing: 0px;\n }\n\n &.small {\n font-size: 1em;\n line-height: calc(var(--line-height) - 4%);\n letter-spacing: 0.56px;\n }\n\n &.xsmall {\n font-size: 0.857em;\n line-height: calc(var(--line-height) - 17%);\n letter-spacing: 0.72px;\n }\n }\n\n ::slotted(a) {\n font-weight: var(--font-weight-bold);\n color: var(--color-link);\n text-underline-offset: 10%;\n }\n\n ::slotted(u) {\n text-underline-offset: 10%;\n }\n\n ::slotted(abbr) {\n color: var(--color-link);\n text-decoration: underline dashed 1px var(--color-link);\n text-underline-offset: 10%;\n cursor: default;\n }\n\n}\n\n","import { Component, Host, Prop, h, Element, Watch, State } from '@stencil/core';\n\n@Component({\n tag: 'cura-label',\n styleUrl: 'cura-label.scss',\n shadow: true,\n})\nexport class CuraLabel {\n\n /**\n * Set size of body text.\n * Values: medium (default) | large | small | xsmall.\n */\n @Prop({reflect: true}) size: 'medium' | 'large' | 'small' | 'xsmall' = 'medium';\n\n /**\n * Label font weight. It is possible to use regular HTML tags like <b> or <strong> as well.\n * Values: regular (default) | bold.\n */\n @Prop({reflect: true}) weight: 'regular' | 'bold' = 'regular';\n\n /**\n * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n * Values: Color from design system scheme. Default to 'accent-dark'.\n */\n @Prop({reflect: true}) spotColor = 'accent-dark';\n\n /**\n * Text color.\n * Values: Color from design system scheme. Default to the font color from the theme.\n */\n @Prop() color: string;\n @Watch('color')\n @Watch('spotColor')\n handleChangeColor() {\n this.setColors();\n }\n\n /**\n * CSS margin-block property values.\n * Default to 1.25em\n */\n @Prop({reflect: true}) marginBlock = '0';\n\n /**\n * CSS line-height property values.\n * Default to 140%\n */\n @Prop({reflect: true}) lineHeight = '125%';\n\n /**\n * Host element <cura-label>\n */\n @Element() host: HTMLElement;\n\n /**\n * Internal Props\n */\n weights: any;\n fontSizeBase: string;\n @State() styles = {};\n theme = window.CuraAPI.theme;\n\n connectedCallback() {\n this.setFontProperties();\n this.setColors();\n }\n\n getClasses() {\n const sizeclass = {};\n sizeclass[this.size.toLowerCase()] = true;\n sizeclass[`${this.weight.toLowerCase()}-weight`] = true;\n return sizeclass;\n }\n\n setFontProperties() {\n this.weights = this.theme.fonts.getWeights();\n this.fontSizeBase = this.theme.fonts.getSize();\n this.styles = {\n '--font-family': this.theme.fonts.getFamily('body'),\n '--font-weight-medium': this.weights.medium,\n '--font-weight-bold': this.weights.bold\n };\n }\n\n setColors() {\n const fontColor = this.color\n ? this.theme.colors.getColor(this.color)\n : this.theme.fonts.getColor();\n this.styles = {\n ...this.styles,\n '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n };\n }\n\n hostCSSProperties() {\n return {\n '--margin-block': this.marginBlock,\n '--font-size-base': this.fontSizeBase,\n '--line-height': this.lineHeight\n };\n }\n\n render() {\n return (\n <Host style={this.hostCSSProperties()}>\n <p style={this.styles} class={this.getClasses()}>\n <slot></slot>\n </p>\n </Host>\n );\n }\n\n}\n"],"mappings":"yDAAA,MAAMA,EAAe,8/B,MCORC,EAAS,M,yBAsDpBC,KAAAC,MAAQC,OAAOC,QAAQF,M,UAhDgD,S,YAMnB,U,eAMjB,c,sCAiBE,I,gBAMD,O,YAYlB,E,CA1BlBG,oBACEJ,KAAKK,W,CA4BPC,oBACEN,KAAKO,oBACLP,KAAKK,W,CAGPG,aACE,MAAMC,EAAY,GAClBA,EAAUT,KAAKU,KAAKC,eAAiB,KACrCF,EAAU,GAAGT,KAAKY,OAAOD,wBAA0B,KACnD,OAAOF,C,CAGTF,oBACEP,KAAKa,QAAUb,KAAKC,MAAMa,MAAMC,aAChCf,KAAKgB,aAAehB,KAAKC,MAAMa,MAAMG,UACrCjB,KAAKkB,OAAS,CACZ,gBAAiBlB,KAAKC,MAAMa,MAAMK,UAAU,QAC5C,uBAAwBnB,KAAKa,QAAQO,OACrC,qBAAsBpB,KAAKa,QAAQQ,K,CAIvChB,YACE,MAAMiB,EAAYtB,KAAKuB,MACnBvB,KAAKC,MAAMuB,OAAOC,SAASzB,KAAKuB,OAChCvB,KAAKC,MAAMa,MAAMW,WACrBzB,KAAKkB,OAAMQ,OAAAC,OAAAD,OAAAC,OAAA,GACN3B,KAAKkB,QAAM,CACd,eAAgBI,GAAatB,KAAKC,MAAMuB,OAAOC,SAAS,kBACxD,eAAgBzB,KAAKC,MAAMuB,OAAOC,SAAS,GAAGzB,KAAK4B,c,CAIvDC,oBACE,MAAO,CACL,iBAAkB7B,KAAK8B,YACvB,mBAAoB9B,KAAKgB,aACzB,gBAAiBhB,KAAK+B,W,CAI1BC,SACE,OACEC,EAACC,EAAI,CAACC,MAAOnC,KAAK6B,qBAChBI,EAAA,KAAGE,MAAOnC,KAAKkB,OAAQkB,MAAOpC,KAAKQ,cACjCyB,EAAA,c"}
@@ -0,0 +1,2 @@
1
+ import{r as i,h as e,H as a}from"./p-46d20db3.js";const s=["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"];const n=':host{display:block;padding:24px;font-family:"Roboto", Arial, Helvetica, sans-serif}.iconDetail{display:block}.iconSizes{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.iconSizes .size{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;text-align:center;margin-right:9px;padding:8px}.iconSizes .size:last-child{margin-right:0}.iconSizes .size span{font-size:10px}.iconSizes.invert{margin-top:12px}.iconSizes.invert .size{background-color:#262626;color:#F6F6F6;border-radius:3px}.icons{margin-top:28px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative}.icons .icon{position:relative;padding:4px;cursor:pointer;opacity:0.6;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.icons .icon span{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{opacity:1}.icons .icon:hover span{display:block}';const o=class{constructor(e){i(this,e);this.sizes=[16,20,24,32,40,48,64,72,128];this.colors=["primary","secondary","accent","info","warning","error","success","neutral"];this.setSelected=i=>{this.selected=i};this.selected="360"}render(){return e(a,null,e("div",{class:"iconDetail"},e("h4",null,this.selected),e("div",{class:"iconSizes"},this.sizes.map((i=>e("div",{class:"size"},e("cura-icon",{name:this.selected,size:i}),e("span",null,i))))),e("div",{class:"iconSizes invert"},this.sizes.map((i=>e("div",{class:"size"},e("cura-icon",{name:this.selected,size:i,color:"neutral-white"}),e("span",null,i))))),e("div",{class:"iconSizes"},this.colors.map((i=>e("div",{class:"size"},e("cura-icon",{name:this.selected,color:i}),e("span",null,i)))),e("div",{class:"size"},e("cura-icon",{name:this.selected,disabled:true}),e("span",null,"Disabled")))),e("div",{class:"icons"},s.map((i=>e("div",{class:"icon",onClick:()=>this.setSelected(i)},e("cura-icon",{name:i}),e("span",null,i))))))}};o.style=n;export{o as cura_icons_view};
2
+ //# sourceMappingURL=p-a0395f90.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["iconsetdefaulticons","curaIconsViewCss","CuraIconsView","this","sizes","colors","setSelected","icon","selected","render","h","Host","class","map","size","name","color","disabled","onClick"],"sources":["./src/assets/icons/iconset-default-list.ts","./src/components/cura-icons-view/cura-icons-view.scss?tag=cura-icons-view&encapsulation=shadow","./src/components/cura-icons-view/cura-icons-view.tsx"],"sourcesContent":["export default [\"360\",\"accessibility\",\"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\"];",":host {\n display: block;\n padding: 24px;\n font-family: 'Roboto', Arial, Helvetica, sans-serif;\n}\n\n.iconDetail {\n display: block;\n}\n\n.iconSizes {\n display: flex;\n align-items: center;\n\n\n .size {\n display: flex;\n flex-direction: column;\n text-align: center;\n margin-right: 9px;\n padding: 8px;\n\n &:last-child { margin-right: 0; }\n span {\n font-size: 10px;\n }\n }\n\n &.invert {\n margin-top: 12px;\n\n .size {\n background-color: #262626;\n color: #F6F6F6;\n border-radius: 3px;\n }\n }\n}\n\n.icons {\n margin-top: 28px;\n display: flex;\n flex-wrap: wrap;\n position: relative;\n\n .icon {\n position: relative;\n padding: 4px;\n cursor: pointer;\n opacity: .6;\n transition: opacity .2s linear;\n span {\n font-size: 12px;\n padding: 6px;\n box-sizing: border-box;\n background: #000;\n color: #FFF;\n border-radius: 2px;\n position: absolute;\n top: -2px;\n left: 50%;\n transform: translateX(-50%) translateY(-100%);\n display: none;\n }\n\n &:hover {\n opacity: 1;\n\n span { display: block; }\n }\n }\n}\n\n","import { Component, Host, h, State } from '@stencil/core';\nimport iconsetdefaulticons from '../../assets/icons/iconset-default-list';\n\n@Component({\n tag: 'cura-icons-view',\n styleUrl: 'cura-icons-view.scss',\n shadow: true,\n})\nexport class CuraIconsView {\n\n sizes = [16, 20, 24, 32, 40, 48, 64, 72, 128];\n colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];\n @State() selected = '360';\n\n setSelected = (icon) => {\n this.selected = icon;\n }\n\n render() {\n return (\n <Host>\n <div class=\"iconDetail\">\n <h4>{ this.selected }</h4>\n <div class=\"iconSizes\">\n { this.sizes.map( size =>\n\n <div class=\"size\">\n <cura-icon name={this.selected} size={size}></cura-icon>\n <span>{ size }</span>\n </div>\n )}\n </div>\n <div class=\"iconSizes invert\">\n { this.sizes.map( size =>\n\n <div class=\"size\">\n <cura-icon name={this.selected} size={size} color=\"neutral-white\"></cura-icon>\n <span>{ size }</span>\n </div>\n )}\n </div>\n <div class=\"iconSizes\">\n { this.colors.map( color =>\n <div class=\"size\">\n <cura-icon name={this.selected} color={color}></cura-icon>\n <span>{ color }</span>\n </div>\n )}\n <div class=\"size\">\n <cura-icon name={this.selected} disabled></cura-icon>\n <span>Disabled</span>\n </div>\n </div>\n </div>\n <div class=\"icons\">\n { iconsetdefaulticons.map(icon =>\n <div class=\"icon\" onClick={() => this.setSelected(icon)}>\n <cura-icon name={icon}></cura-icon>\n <span>{icon}</span>\n </div>\n )}\n </div>\n </Host>\n );\n }\n\n}\n"],"mappings":"kDAAA,MAAAA,EAAe,CAAC,MAAM,gBAAgB,UAAU,UAAU,cAAc,gBAAgB,YAAY,kBAAkB,YAAY,kBAAkB,aAAa,mBAAmB,UAAU,gBAAgB,SAAS,UAAU,UAAU,WAAW,aAAa,WAAW,MAAM,SAAS,UAAU,aAAa,QAAQ,aAAa,cAAc,cAAc,QAAQ,QAAQ,cAAc,WAAW,SAAS,WAAW,SAAS,UAAU,MAAM,OAAO,WAAW,YAAY,OAAO,OAAO,UAAU,SAAS,WAAW,UAAU,UAAU,UAAU,UAAU,aAAa,UAAU,SAAS,aAAa,UAAU,SAAS,cAAc,mBAAmB,SAAS,QAAQ,aAAa,QAAQ,SAAS,UAAU,OAAO,iBAAiB,UAAU,aAAa,YAAY,MAAM,OAAO,WAAW,YAAY,aAAa,aAAa,SAAS,OAAO,OAAO,OAAO,eAAe,WAAW,OAAO,QAAQ,SAAS,OAAO,cAAc,SAAS,WAAW,SAAS,UAAU,UAAU,iBAAiB,YAAY,gBAAgB,MAAM,SAAS,QAAQ,cAAc,cAAc,SAAS,OAAO,eAAe,aAAa,UAAU,UAAU,UAAU,aAAa,QAAQ,UAAU,QAAQ,OAAO,OAAO,aAAa,aAAa,QAAQ,UAAU,gBAAgB,iBAAiB,iBAAiB,QAAQ,SAAS,SAAS,QAAQ,WAAW,gBAAgB,oBAAoB,SAAS,SAAS,QAAQ,QAAQ,QAAQ,WAAW,UAAU,SAAS,OAAO,WAAW,UAAU,SAAS,WAAW,QAAQ,SAAS,KAAK,SAAS,eAAe,YAAY,WAAW,SAAS,WAAW,OAAO,UAAU,UAAU,SAAS,WCAzlD,MAAMC,EAAmB,snC,MCQZC,EAAa,M,yBAExBC,KAAAC,MAAQ,CAAC,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,KACzCD,KAAAE,OAAS,CAAC,UAAW,YAAa,SAAU,OAAQ,UAAW,QAAS,UAAW,WAGnFF,KAAAG,YAAeC,IACbJ,KAAKK,SAAWD,CAAI,E,cAHF,K,CAMpBE,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,cACTF,EAAA,UAAMP,KAAKK,UACXE,EAAA,OAAKE,MAAM,aACPT,KAAKC,MAAMS,KAAKC,GAEhBJ,EAAA,OAAKE,MAAM,QACTF,EAAA,aAAWK,KAAMZ,KAAKK,SAAUM,KAAMA,IACtCJ,EAAA,YAAQI,OAIdJ,EAAA,OAAKE,MAAM,oBACPT,KAAKC,MAAMS,KAAKC,GAEhBJ,EAAA,OAAKE,MAAM,QACTF,EAAA,aAAWK,KAAMZ,KAAKK,SAAUM,KAAMA,EAAME,MAAM,kBAClDN,EAAA,YAAQI,OAIdJ,EAAA,OAAKE,MAAM,aACPT,KAAKE,OAAOQ,KAAKG,GACjBN,EAAA,OAAKE,MAAM,QACTF,EAAA,aAAWK,KAAMZ,KAAKK,SAAUQ,MAAOA,IACvCN,EAAA,YAAQM,MAGZN,EAAA,OAAKE,MAAM,QACTF,EAAA,aAAWK,KAAMZ,KAAKK,SAAUS,SAAQ,OACxCP,EAAA,2BAINA,EAAA,OAAKE,MAAM,SACPZ,EAAoBa,KAAIN,GACxBG,EAAA,OAAKE,MAAM,OAAOM,QAAS,IAAMf,KAAKG,YAAYC,IAChDG,EAAA,aAAWK,KAAMR,IACjBG,EAAA,YAAOH,O"}
@@ -0,0 +1,2 @@
1
+ import{r as t,h as o,H as e,g as i}from"./p-46d20db3.js";const s=':host{display:block;color:var(--font-color);font-size:var(--font-size);font-size:var(--font-size);font-family:var(--font-family);font-weight:var(--font-weight-regular)}:host::after{content:"";display:block;border-bottom:solid 1px var(--neutral-base);width:100%}';const a=class{constructor(o){t(this,o);this.mutationObserverCallback=(t,o)=>{var e;for(const o of t){if(o.type==="attributes"&&o.attributeName==="opened"&&((e=o.target)===null||e===void 0?void 0:e["opened"])){if(this.behavior!=="default")continue;this.host.querySelectorAll("cura-accordion-item").forEach((t=>{if(t!=o.target){t.opened=false}}))}if(o.type==="childList"){const t=Array.from(o.addedNodes||[]);for(let o of t){this.setChildProperties(o)}}}};this.mutationObserver=new MutationObserver(this.mutationObserverCallback);this.color="primary";this.activeColor="accent";this.colorMode="dark";this.iconSize=32;this.openIcon="down";this.closeIcon="up";this.iconColor="";this.iconActiveColor="";this.behavior="default";this.styles={}}handleChangeColor(){this.setColors()}connectedCallback(){const t=window.CuraAPI.theme.fonts.getWeights();this.styles["--base-spacing"]=window.CuraAPI.theme.spacing.getSpacing();this.styles["--neutral-purewhite"]=window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);this.styles["--neutral-lighter"]=window.CuraAPI.theme.colors.getColor(`neutral-lighter`);this.styles["--neutral-base"]=window.CuraAPI.theme.colors.getColor(`neutral-base`);this.styles["--font-size"]=window.CuraAPI.theme.fonts.getSize();this.styles["--font-color"]=window.CuraAPI.theme.fonts.getColor();this.styles["--font-family"]=window.CuraAPI.theme.fonts.getFamily();this.styles["--font-weight-regular"]=t.regular;this.setColors()}componentDidLoad(){this.host.querySelectorAll("cura-accordion-item").forEach((t=>{this.setChildProperties(t)}));const t={childList:true,subtree:true,attributes:true};this.mutationObserver.observe(this.host,t)}disconnectedCallback(){this.mutationObserver.disconnect()}setChildProperties(t){t.colorMode=this.colorMode;t.iconColor=this.iconColor||this.color;t.iconActiveColor=this.iconActiveColor||this.activeColor;t.iconSize=this.iconSize;t.openIcon=this.openIcon;t.closeIcon=this.closeIcon}setColors(){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`)})}render(){return o(e,{style:this.styles},o("slot",{name:"accordion-item"}))}get host(){return i(this)}static get watchers(){return{color:["handleChangeColor"],activeColor:["handleChangeColor"]}}};a.style=s;const l=':host{display:block}:host .accordion-item{width:100%}:host .accordion-item .label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .accordion-item .label::before{content:"";display:block;border-top:solid 1px var(--neutral-base);width:100%}:host .accordion-item .label .label-container{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{margin-right:4px}:host .accordion-item .label .label-container:hover{color:var(--color-light)}:host .accordion-item .label .label-container:hover cura-icon{--color:var(--icon-color-light) !important}:host .accordion-item .label .label-container:active{color:var(--color-dark)}:host .accordion-item .label .label-container:active cura-icon{--color:var(--icon-color-dark) !important}:host .accordion-item .content{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{padding:calc(var(--base-spacing) * 2px) 0px;border-top:solid 1px var(--neutral-base)}:host .accordion-item.active .label .label-container{color:var(--color-active-base)}:host .accordion-item.active .label .label-container:hover{color:var(--color-active-light)}:host .accordion-item.active .label .label-container:hover cura-icon{--color:var(--icon-color-active-light) !important}:host .accordion-item.active .label .label-container:active{color:var(--color-active-dark)}:host .accordion-item.active .label .label-container:active cura-icon{--color:var(--icon-color-active-dark) !important}:host .accordion-item.active .content{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{color:var(--neutral-lighter)}:host .accordion-item.inverted .label .label-container:hover{color:var(--color-lighter)}:host .accordion-item.inverted .label .label-container:hover cura-icon{--color:var(--icon-color-lighter) !important}:host .accordion-item.inverted .label .label-container:active{color:var(--color-light)}:host .accordion-item.inverted .label .label-container:active cura-icon{--color:var(--icon-color-light) !important}:host .accordion-item.active.inverted .label .label-container{color:var(--neutral-purewhite)}:host .accordion-item.active.inverted .label .label-container:hover{color:var(--color-active-lighter)}:host .accordion-item.active.inverted .label .label-container:hover cura-icon{--color:var(--icon-color-active-lighter) !important}:host .accordion-item.active.inverted .label .label-container:active{color:var(--color-active-light)}:host .accordion-item.active.inverted .label .label-container:active cura-icon{--color:var(--icon-color-active-light) !important}@media (min-width: 769px) and (max-width: 992px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}@media (min-width: 993px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}';const n=class{constructor(o){t(this,o);this.label="";this.iconSize=32;this.openIcon="down";this.closeIcon="up";this.iconColor="";this.iconActiveColor="";this.colorMode="dark";this.opened=false;this.styles={}}getIconColor(){const t=this.colorMode==="light";const o=t?"neutral-lighter":`${this.iconColor}-base`;const e=t?"neutral-purewhite":`${this.iconActiveColor}-base`;return this.opened?e:o}getClasses(){const t={};t["accordion-item"]=true;t["active"]=this.opened;t["inverted"]=this.colorMode==="light";return t}accordionItemClick(t){this.opened=!this.opened}render(){return o(e,{slot:"accordion-item"},o("div",{class:this.getClasses(),style:this.styles},o("div",{class:"label",onClick:t=>this.accordionItemClick(t)},o("div",{class:"label-container"},o("span",null,this.label),o("cura-icon",{name:this.opened?this.closeIcon:this.openIcon,size:this.iconSize,color:this.getIconColor()}))),o("div",{class:"content"},o("div",{class:"content-wrapper"},o("slot",null)))))}};n.style=l;const r=':host{--border-radius:4px;display:inline-block;vertical-align:middle}:host button,:host a{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{background-color:var(--color-light)}:host button:not(.isLoading):not(.disabled):active,:host a:not(.isLoading):not(.disabled):active{background-color:var(--color-dark)}:host button:hover,:host a: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{-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{-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{-webkit-box-shadow:none !important;box-shadow:none !important}:host button.medium,:host a.medium{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{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{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{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button .label,:host a .label{-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{color:var(--neutral-white)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host a.medium.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.7px)}:host button.medium.icon-right cura-icon,:host a.medium.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.7px)}:host button.small.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.5px)}:host button.small.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.5px)}:host button.disabled,:host a.disabled{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{color:var(--neutral-dark)}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3.5px)}:host button.icon-only .label,:host a.icon-only .label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 2.75px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 1.5px)}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0.3}:host button.isLoading.icon-only .button-container,:host a.isLoading.icon-only .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}';const h=class{constructor(o){t(this,o);this.size="medium";this.disabled=false;this.isLoading=false;this.iconName=undefined;this.iconset="default";this.iconPosition="left";this.iconOnly=false;this.href=undefined;this.target="_self";this.color="accent";this.fontColor="dark";this.textAlign="left";this.styles={}}handleChangeColor(){this.setColors()}connectedCallback(){this.weights=window.CuraAPI.theme.fonts.getWeights();this.styles["--base-spacing"]=window.CuraAPI.theme.spacing.getSpacing();this.styles["--neutral-white"]=window.CuraAPI.theme.colors.getColor(`neutral-white`);this.styles["--neutral-light"]=window.CuraAPI.theme.colors.getColor(`neutral-light`);this.styles["--neutral-dark"]=window.CuraAPI.theme.colors.getColor(`neutral-dark`);this.styles["--font-size"]=window.CuraAPI.theme.fonts.getSize();this.styles["--font-family"]=window.CuraAPI.theme.fonts.getFamily();this.styles["--font-weight-medium"]=this.weights.medium;this.styles["--text-align"]=this.textAlign;this.setColors()}getClasses(){const t={};t[`${this.size.toLowerCase()}`]=true;t[`icon-${this.iconPosition.toLowerCase()}`]=true;t[`icon-only`]=this.iconOnly;t["inverted"]=this.fontColor==="light";t["disabled"]=this.disabled;t["isLoading"]=this.isLoading;return t}setColors(){this.styles=Object.assign(Object.assign({},this.styles),{"--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`)})}getIcon(){if(!this.iconName)return"";const t=this.size==="small"?16:this.size==="medium"?20:24;const e=this.getSymbolColor();return o("cura-icon",{name:this.iconName,iconset:this.iconset,size:t,color:e})}getSymbolColor(){return this.disabled?"neutral-dark":this.fontColor==="light"?"neutral-white":"neutral-black"}handleClick(t){if(this.disabled||this.isLoading)t.preventDefault()}render(){return o(e,null,this.href?o("a",{href:this.disabled?"":this.href,target:this.target,class:this.getClasses(),style:this.styles,onClick:t=>this.handleClick(t)},o("span",{class:"button-container"},this.getIcon(),o("span",{class:{label:true,inverted:this.fontColor==="light"}},o("slot",null))),o("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})):o("button",{class:this.getClasses(),style:this.styles,disabled:this.disabled||null,onClick:t=>this.handleClick(t)},o("span",{class:"button-container"},this.getIcon(),o("span",{class:{label:true,inverted:this.fontColor==="light"}},o("slot",null))),o("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})))}static get watchers(){return{color:["handleChangeColor"]}}};h.style=r;const c=":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:1.714em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}:host h1.bold-weight,:host h2.bold-weight,:host h3.bold-weight,:host h4.bold-weight,:host h5.bold-weight,:host h6.bold-weight{font-weight:var(--font-weight-medium)}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.071em;letter-spacing:-0.58px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.214em;line-height:calc(var(--line-height) + 20%)}:host h1.small.bold-weight,:host h1.small ::slotted(b),:host h1.small ::slotted(strong),:host h2.small.bold-weight,:host h2.small ::slotted(b),:host h2.small ::slotted(strong),:host h3.small.bold-weight,:host h3.small ::slotted(b),:host h3.small ::slotted(strong),:host h4.small.bold-weight,:host h4.small ::slotted(b),:host h4.small ::slotted(strong),:host h5.small.bold-weight,:host h5.small ::slotted(b),:host h5.small ::slotted(strong),:host h6.small.bold-weight,:host h6.small ::slotted(b),:host h6.small ::slotted(strong){font-weight:var(--font-weight-bold)}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.714em;font-weight:var(--font-weight-medium);letter-spacing:0.6px}:host h1.xsmall.bold-weight,:host h1.xsmall ::slotted(b),:host h1.xsmall ::slotted(strong),:host h2.xsmall.bold-weight,:host h2.xsmall ::slotted(b),:host h2.xsmall ::slotted(strong),:host h3.xsmall.bold-weight,:host h3.xsmall ::slotted(b),:host h3.xsmall ::slotted(strong),:host h4.xsmall.bold-weight,:host h4.xsmall ::slotted(b),:host h4.xsmall ::slotted(strong),:host h5.xsmall.bold-weight,:host h5.xsmall ::slotted(b),:host h5.xsmall ::slotted(strong),:host h6.xsmall.bold-weight,:host h6.xsmall ::slotted(b),:host h6.xsmall ::slotted(strong){font-weight:var(--font-weight-bold)}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.357em;letter-spacing:-0.66px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.357em}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.857em;line-height:calc(var(--line-height) + 3%);letter-spacing:0.72px}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2.5em;line-height:calc(var(--line-height) + 5%);letter-spacing:-0.82px}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.929em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.714em;line-height:calc(var(--line-height) + 30%);letter-spacing:0%}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:1em;line-height:calc(var(--line-height) + 12.857%);letter-spacing:0.28px}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-medium)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(abbr){color:var(--color-link);-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){font-weight:var(--font-weight-medium)}";const d=class{constructor(o){t(this,o);this.theme=window.CuraAPI.theme;this.level=1;this.size="medium";this.weight="regular";this.spotColor="accent-dark";this.color=undefined;this.marginBlock="1.25em";this.lineHeight="130%";this.styles={}}handleChangeColor(){this.setColors()}connectedCallback(){this.setFontProperties();this.setColors()}getClasses(){const t={};t[this.size.toLowerCase()]=true;t[`${this.weight.toLowerCase()}-weight`]=true;return t}setFontProperties(){this.weights=this.theme.fonts.getWeights();this.fontSizeBase=this.theme.fonts.getSize();this.styles={"--font-family":window.CuraAPI.theme.fonts.getFamily("heading"),"--font-weight-regular":this.weights.regular,"--font-weight-medium":this.weights.medium,"--font-weight-bold":this.weights.bold,"--font-weight-black":this.weights.black}}hostCSSProperties(){return{"--margin-block":this.marginBlock,"--font-size-base":this.fontSizeBase,"--line-height":this.lineHeight}}setColors(){const t=this.color?this.theme.colors.getColor(this.color):this.theme.fonts.getColor();this.styles=Object.assign(Object.assign({},this.styles),{"--color-body":t||this.theme.colors.getColor("neutral-darker"),"--color-link":this.theme.colors.getColor(`${this.spotColor}`)})}getHeadingTag(){const t={1:o("h1",{style:this.styles,class:this.getClasses()},o("slot",null)),2:o("h2",{style:this.styles,class:this.getClasses()},o("slot",null)),3:o("h3",{style:this.styles,class:this.getClasses()},o("slot",null)),4:o("h4",{style:this.styles,class:this.getClasses()},o("slot",null)),5:o("h5",{style:this.styles,class:this.getClasses()},o("slot",null)),6:o("h6",{style:this.styles,class:this.getClasses()},o("slot",null)),default:o("h1",{style:this.styles,class:this.getClasses()},o("slot",null))};return t[`${this.level}`]||t["default"]}render(){return o(e,{style:this.hostCSSProperties()},this.getHeadingTag())}get host(){return i(this)}static get watchers(){return{color:["handleChangeColor"],spotColor:["handleChangeColor"]}}};d.style=c;const g=":host{width:var(--size);height:var(--size)}:host svg{display:inline-block;stroke:var(--color);width:var(--size);height:var(--size);stroke-width:var(--stroke);fill:none}";const m=class{constructor(o){t(this,o);this.sizes={128:{size:128,stroke:5.25},72:{size:72,stroke:3.5},64:{size:64,stroke:3.25},48:{size:48,stroke:2.75},40:{size:40,stroke:2.5},32:{size:32,stroke:2.25},24:{size:24,stroke:2},20:{size:20,stroke:1.75},16:{size:16,stroke:1.5},default:{size:24,stroke:2}};this.name="";this.color="neutral-base";this.size=undefined;this.iconset="default";this.disabled=false}sizeHandler(t){const o=t=>`${this.sizes[t].stroke*(this.sizes.default.size/this.sizes[t].size)}px`;this.setHostProperty("--size",this.sizes[`${t}`]?`${this.sizes[t].size}px`:`${this.sizes.default.size}px`);this.setHostProperty("--stroke",this.sizes[`${t}`]?o(t):o("default"))}colorHandler(){this.setHostProperty("--color",window.CuraAPI.theme.colors.getColor(this.disabled?"neutral-light":this.color))}connectedCallback(){this.assetsPath=window.CuraAPI.localAssetsPath;this.sizeHandler(this.size);this.colorHandler()}setHostProperty(t,o){this.host.style.setProperty(t,o)}render(){return o(e,null,o("svg",{version:"1.1",viewBox:"0 0 24 24",preserveAspectRatio:"xMidYMid meet",xmlns:"http://www.w3.org/2000/svg"},o("use",{xlinkHref:`${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}`})))}get host(){return i(this)}static get watchers(){return{size:["sizeHandler"],color:["colorHandler"],disabled:["colorHandler"]}}};m.style=g;const b=":host{display:inline-block;width:var(--size);height:var(--size)}:host svg{width:var(--size);height:var(--size);-webkit-animation:rotate 0.7s linear infinite;animation:rotate 0.7s linear infinite}:host circle,:host path{stroke-miterlimit:10;stroke-linecap:round;stroke-linejoin:round}:host path{stroke:var(--color)}:host stop{stop-color:var(--color)}:host linearGradient stop: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)}}";const p=class{constructor(o){t(this,o);this.sizes={xlarge:32,large:24,medium:20,small:16,default:16};this.getPxSize=()=>this.sizes[this.size]||this.sizes["default"];this.size="medium";this.color="neutral-white"}getStyles(){return{"--size":`${this.getPxSize()}px`,"--color":window.CuraAPI.theme.colors.getColor(this.color)}}render(){return o(e,{style:this.getStyles()},o("svg",{viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("g",null,o("circle",{cx:"8",cy:"8",r:"7",stroke:"url(#paint0_linear_13485_11488)","stroke-width":"2"}),o("path",{d:"M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5","stroke-width":"2"})),o("defs",null,o("linearGradient",{id:"paint0_linear_13485_11488",x1:"15.7",y1:"4.5",x2:"4.15",y2:"11.5",gradientUnits:"userSpaceOnUse"},o("stop",null),o("stop",{offset:"1"})))))}};p.style=b;const u=':host{display:block}:host .grid-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{grid-area:sub-header}:host .grid-template #header{grid-area:header}:host .grid-template #pre-content{grid-area:pre-content}:host .grid-template #content-container{grid-area:content-container}:host .grid-template #post-body{grid-area:post-body}:host .grid-template #footer{grid-area:footer}:host .grid-template #sub-footer{grid-area:sub-footer}@media (max-width: 768px){:host .grid-template{padding:0px}}@media (min-width: 769px) and (max-width: 992px){:host .grid-template{padding:0px}}@media (min-width: 993px) and (max-width: 1920px){:host .grid-template{padding:0px}:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]){margin-right:calc(var(--spacing) * 5px)}:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]){margin-left:calc(var(--spacing) * 5px)}:host .grid-template #content-container{display:-ms-flexbox;display:flex}:host .grid-template #content-container #content{-ms-flex-positive:1;flex-grow:1}:host .grid-template #content-container #sidebar-left,:host .grid-template #content-container #sidebar-right{max-width:20%}}@media (min-width: 1921px){:host .grid-template{padding:0px}:host .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]){margin-right:calc(var(--spacing) * 7px)}:host .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]){margin-left:calc(var(--spacing) * 7px)}:host .grid-template #content-container{display:-ms-flexbox;display:flex}:host .grid-template #content-container #content{-ms-flex-positive:1;flex-grow:1}:host .grid-template #content-container #sidebar-left,:host .grid-template #content-container #sidebar-right{max-width:20%}:host .grid-template #content-container.centered{max-width:1921px;justify-self:center}}';const v=class{constructor(o){t(this,o);this.contentwidth="default"}connectedCallback(){this.styles={"--spacing":window.CuraAPI.theme.spacing.getSpacing()}}getClasses(){const t={};t[this.contentwidth.toLowerCase()]=true;return t}render(){return o(e,null,o("div",{style:this.styles,class:"grid-template"},o("div",{id:"sub-header"},o("slot",{name:"sub-header"})),o("div",{id:"header"},o("slot",{name:"header"})),o("div",{id:"pre-content"},o("slot",{name:"pre-content"})),o("div",{id:"content-container",class:this.getClasses()},o("div",{id:"sidebar-left"},o("slot",{name:"sidebar-left"})),o("div",{id:"content"},o("slot",{name:"content"}),o("slot",null)),o("div",{id:"sidebar-right"},o("slot",{name:"sidebar-right"}))),o("div",{id:"post-body"},o("slot",{name:"post-body"})),o("div",{id:"footer"},o("slot",{name:"footer"})),o("div",{id:"sub-footer"},o("slot",{name:"sub-footer"}))))}get host(){return i(this)}};v.style=u;const w=":host{display:block;font-size:var(--font-size-base)}:host p{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0.28px}:host p.large{font-size:1.214em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.small{font-size:0.85em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.48px}:host p.caption,:host p.xsmall{font-size:0.714em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.6px}@media (min-width: 769px) and (max-width: 1920px){:host p{font-size:1.143em;line-height:calc(var(--line-height) + 5%);letter-spacing:0.32px}:host p.large{font-size:1.357em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.small{font-size:1em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.56px}:host p.caption,:host p.xsmall{font-size:0.85em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.72px}}@media (min-width: 1921px){:host p{font-size:1.429em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.large{font-size:1.714em;line-height:calc(var(--line-height) + 20%)}:host p.small{font-size:1.21em;line-height:calc(var(--line-height) + 5%);letter-spacing:0px}:host p.caption,:host p.xsmall{font-size:1em;line-height:calc(var(--line-height) + 5%);letter-spacing:0.28px}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-medium);color:var(--color-link);text-underline-offset:10%}:host ::slotted(u){font-weight:var(--font-weight-medium);text-underline-offset:10%}:host ::slotted(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}";const f=class{constructor(o){t(this,o);this.theme=window.CuraAPI.theme;this.size="medium";this.spotColor="accent-dark";this.color=undefined;this.marginBlock="1.25em";this.lineHeight="140%";this.styles={}}handleChangeColor(){this.setColors()}connectedCallback(){this.setFontProperties();this.setColors()}setsizeClass(){const t={};t[this.size.toLowerCase()]=true;return t}setFontProperties(){this.weights=this.theme.fonts.getWeights();this.fontSizeBase=this.theme.fonts.getSize();this.styles={"--font-family":this.theme.fonts.getFamily("body"),"--font-weight-regular":this.weights.regular,"--font-weight-medium":this.weights.medium,"--font-weight-bold":this.weights.bold}}setColors(){const t=this.color?this.theme.colors.getColor(this.color):this.theme.fonts.getColor();this.styles=Object.assign(Object.assign({},this.styles),{"--color-body":t||this.theme.colors.getColor("neutral-darker"),"--color-link":this.theme.colors.getColor(`${this.spotColor}`)})}hostCSSProperties(){return{"--margin-block":this.marginBlock,"--font-size-base":this.fontSizeBase,"--line-height":this.lineHeight}}render(){return o(e,{style:this.hostCSSProperties()},o("p",{style:this.styles,class:this.setsizeClass()},o("slot",null)))}get host(){return i(this)}static get watchers(){return{color:["handleChangeColor"],spotColor:["handleChangeColor"]}}};f.style=w;export{a as cura_accordion,n as cura_accordion_item,h as cura_button,d as cura_heading,m as cura_icon,p as cura_loader_circle,v as cura_page_template,f as cura_paragraph};
2
+ //# sourceMappingURL=p-a7ef255f.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["curaAccordionCss","CuraAccordion","this","mutationObserverCallback","mutations","_","mutation","type","attributeName","_a","target","behavior","host","querySelectorAll","forEach","item","opened","addedNodes","Array","from","node","setChildProperties","mutationObserver","MutationObserver","handleChangeColor","setColors","connectedCallback","weights","window","CuraAPI","theme","fonts","getWeights","styles","spacing","getSpacing","colors","getColor","getSize","getFamily","regular","componentDidLoad","options","childList","subtree","attributes","observe","disconnectedCallback","disconnect","colorMode","iconColor","color","iconActiveColor","activeColor","iconSize","openIcon","closeIcon","Object","assign","render","h","Host","style","name","curaAccordionItemCss","CuraAccordionItem","getIconColor","inverted","getClasses","classes","accordionItemClick","slot","class","onClick","e","label","size","curaButtonCss","CuraButton","medium","textAlign","toLowerCase","iconPosition","iconOnly","fontColor","disabled","isLoading","getIcon","iconName","getSymbolColor","iconset","handleClick","preventDefault","href","curaHeadingCss","CuraHeading","setFontProperties","weight","fontSizeBase","bold","black","hostCSSProperties","marginBlock","lineHeight","spotColor","getHeadingTag","tags","default","level","curaIconCss","CuraIcon","sizes","stroke","sizeHandler","scaledStroke","setHostProperty","colorHandler","assetsPath","localAssetsPath","prop","value","setProperty","version","viewBox","preserveAspectRatio","xmlns","xlinkHref","curaLoaderCircleCss","CuraLoaderCircle","xlarge","large","small","getPxSize","getStyles","fill","cx","cy","r","d","id","x1","y1","x2","y2","gradientUnits","offset","curaPageTemplateCss","CuraPageTemplate","contentwidth","curaParagraphCss","CuraParagraph","setsizeClass","sizeclass"],"sources":["./src/components/accordion/cura-accordion/cura-accordion.scss?tag=cura-accordion&encapsulation=shadow","./src/components/accordion/cura-accordion/cura-accordion.tsx","./src/components/accordion/cura-accordion-item/cura-accordion-item.scss?tag=cura-accordion-item&encapsulation=shadow","./src/components/accordion/cura-accordion-item/cura-accordion-item.tsx","./src/components/buttons/cura-button/cura-button.scss?tag=cura-button&encapsulation=shadow","./src/components/buttons/cura-button/cura-button.tsx","./src/components/text/cura-heading/cura-heading.scss?tag=cura-heading&encapsulation=shadow","./src/components/text/cura-heading/cura-heading.tsx","./src/components/cura-icon/cura-icon.scss?tag=cura-icon&encapsulation=shadow","./src/components/cura-icon/cura-icon.tsx","./src/components/loaders/cura-loader-circle/cura-loader-circle.scss?tag=cura-loader-circle&encapsulation=shadow","./src/components/loaders/cura-loader-circle/cura-loader-circle.tsx","./src/components/cura-page-template/cura-page-template.scss?tag=cura-page-template&encapsulation=shadow","./src/components/cura-page-template/cura-page-template.tsx","./src/components/text/cura-paragraph/cura-paragraph.scss?tag=cura-paragraph&encapsulation=shadow","./src/components/text/cura-paragraph/cura-paragraph.tsx"],"sourcesContent":[":host {\n display: block;\n color: var(--font-color);\n font-size: var(--font-size);\n font-size: var(--font-size);\n font-family: var(--font-family);\n font-weight: var(--font-weight-regular);\n\n &::after {\n content: \"\";\n display: block;\n border-bottom: solid 1px var(--neutral-base);\n width: 100%;\n }\n}\n\n","import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-accordion',\n styleUrl: 'cura-accordion.scss',\n shadow: true,\n})\nexport class CuraAccordion {\n\n @Element() host: HTMLElement;\n\n /**\n * Color scheme base color\n */\n @Prop({reflect: true}) color = 'primary';\n @Prop({reflect: true}) activeColor = 'accent';\n @Watch('color')\n @Watch('activeColor')\n handleChangeColor() {\n this.setColors();\n }\n\n /**\n * Set the color mode to dark or light\n */\n @Prop({reflect: true}) colorMode: 'dark' | 'light' = 'dark';\n\n /**\n * Accordion items icons\n */\n @Prop({reflect: true}) iconSize = 32;\n @Prop({reflect: true}) openIcon = 'down';\n @Prop({reflect: true}) closeIcon = 'up';\n\n /**\n * Color scheme base color\n * (By default, the icon will use the same color of 'color' and 'activeColor')\n */\n @Prop({reflect: true}) iconColor = '';\n @Prop({reflect: true}) iconActiveColor = '';\n\n /**\n * Accordion behavior when item is clicked\n * (The default will close all items except the current one)\n */\n @Prop({reflect: true}) behavior: 'default' | 'keep-open' = 'default';\n\n mutationObserverCallback = (mutations: MutationRecord[], _: MutationObserver) => {\n for (const mutation of mutations) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'opened' && mutation.target?.['opened']) {\n if (this.behavior !== 'default') continue;\n this.host.querySelectorAll('cura-accordion-item').forEach(item => {\n if (item != mutation.target) {\n item.opened = false;\n }\n });\n }\n if (mutation.type === 'childList') {\n const addedNodes = Array.from(mutation.addedNodes || []);\n for(let node of addedNodes) {\n this.setChildProperties(node as HTMLCuraAccordionItemElement);\n }\n }\n }\n }\n mutationObserver: MutationObserver = new MutationObserver(this.mutationObserverCallback);\n\n @State() styles = {};\n\n connectedCallback() {\n const weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);\n this.styles['--neutral-lighter'] = window.CuraAPI.theme.colors.getColor(`neutral-lighter`);\n this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-regular'] = weights.regular;\n this.setColors();\n }\n\n componentDidLoad() {\n this.host.querySelectorAll('cura-accordion-item').forEach(item => {\n this.setChildProperties(item);\n });\n const options: MutationObserverInit = {childList: true, subtree: true, attributes: true}\n this.mutationObserver.observe(this.host, options)\n }\n\n disconnectedCallback() {\n this.mutationObserver.disconnect();\n }\n\n setChildProperties(item: HTMLCuraAccordionItemElement) {\n // Theme\n item.colorMode = this.colorMode;\n item.iconColor = this.iconColor || this.color;\n item.iconActiveColor = this.iconActiveColor || this.activeColor;\n // Icon\n item.iconSize = this.iconSize;\n item.openIcon = this.openIcon;\n item.closeIcon = this.closeIcon;\n }\n\n setColors() {\n this.styles = {\n ...this.styles,\n '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),\n '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`),\n '--color-active-lighter': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-lighter`),\n '--color-active-light': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-light`),\n '--color-active-base': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-base`),\n '--color-active-dark': window.CuraAPI.theme.colors.getColor(`${this.activeColor}-dark`),\n\n '--icon-color-lighter': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-lighter`),\n '--icon-color-light': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-light`),\n '--icon-color-base': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-base`),\n '--icon-color-dark': window.CuraAPI.theme.colors.getColor(`${this.iconColor || this.color}-dark`),\n '--icon-color-active-lighter': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-lighter`),\n '--icon-color-active-light': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-light`),\n '--icon-color-active-base': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-base`),\n '--icon-color-active-dark': window.CuraAPI.theme.colors.getColor(`${this.iconActiveColor || this.activeColor}-dark`),\n };\n }\n\n render() {\n return (\n <Host style={this.styles}>\n <slot name='accordion-item'></slot>\n </Host>\n );\n }\n\n}\n","@import '../../../scss/mixins/responsive.scss';\n\n:host {\n display: block;\n\n .accordion-item {\n width: 100%;\n\n .label {\n display: flex;\n flex-direction: column;\n &::before {\n content: \"\";\n display: block;\n border-top: solid 1px var(--neutral-base);\n width: 100%;\n }\n .label-container {\n display: flex;\n flex-grow: 1;\n justify-content: space-between;\n align-items: center;\n gap: calc(var(--base-spacing) * 2px);\n min-height: 40px;\n word-break: break-word;\n cursor: pointer;\n font-size: 1.14em;\n font-weight: var(--font-weight-regular);\n color: var(--color-base);\n padding: 0px;\n\n cura-icon {\n margin-right: 4px;\n }\n\n &:hover {\n color: var(--color-light);\n cura-icon {\n --color: var(--icon-color-light) !important;\n }\n }\n &:active {\n color: var(--color-dark);\n cura-icon {\n --color: var(--icon-color-dark) !important;\n }\n }\n }\n }\n\n .content {\n font-size: 1em;\n overflow: hidden;\n max-height: 0;\n transition: max-height .25s ease;\n .content-wrapper {\n padding: calc(var(--base-spacing) * 2px) 0px;\n border-top: solid 1px var(--neutral-base);\n }\n }\n\n &.active {\n .label .label-container {\n color: var(--color-active-base);\n &:hover {\n color: var(--color-active-light);\n cura-icon {\n --color: var(--icon-color-active-light) !important;\n }\n }\n &:active {\n color: var(--color-active-dark);\n cura-icon {\n --color: var(--icon-color-active-dark) !important;\n }\n }\n }\n\n .content {\n max-height: 200vh;\n overflow-y: auto;\n transition: max-height .5s ease .14s;\n }\n }\n\n &.inverted {\n .label .label-container {\n color: var(--neutral-lighter);\n &:hover {\n color: var(--color-lighter);\n cura-icon {\n --color: var(--icon-color-lighter) !important;\n }\n }\n &:active {\n color: var(--color-light);\n cura-icon {\n --color: var(--icon-color-light) !important;\n }\n }\n }\n }\n\n &.active.inverted {\n .label .label-container {\n color: var(--neutral-purewhite);\n &:hover {\n color: var(--color-active-lighter);\n cura-icon {\n --color: var(--icon-color-active-lighter) !important;\n }\n }\n &:active {\n color: var(--color-active-light);\n cura-icon {\n --color: var(--icon-color-active-light) !important;\n }\n }\n }\n }\n }\n\n @include medium-only() {\n .accordion-item {\n .label .label-container {\n font-size: 1.29em;\n }\n\n .content {\n font-size: 1.14em;\n }\n }\n }\n\n @include large-up() {\n .accordion-item {\n .label .label-container {\n font-size: 1.29em;\n }\n\n .content {\n font-size: 1.14em;\n }\n }\n }\n}\n","import { Component, Host, Prop, State, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-accordion-item',\n styleUrl: 'cura-accordion-item.scss',\n shadow: true,\n})\nexport class CuraAccordionItem {\n\n /**\n * Text label for accordion item\n */\n @Prop({reflect: true}) label: string = '';\n\n /** ***Properties below are inherited from the cura-accordion*** */\n /**\n * Accordion items icons\n */\n @Prop({reflect: true}) iconSize = 32;\n @Prop({reflect: true}) openIcon = 'down';\n @Prop({reflect: true}) closeIcon = 'up';\n\n /**\n * Color scheme base color\n * (By default, the icon will use the same color of 'color' and 'activeColor')\n */\n @Prop({reflect: true}) iconColor = '';\n @Prop({reflect: true}) iconActiveColor = '';\n\n /**\n * Set the color mode to dark or light\n */\n @Prop() colorMode: 'dark' | 'light' = 'dark';\n\n @Prop({ reflect: true, mutable: true }) opened: boolean = false;\n\n @State() styles = {};\n\n getIconColor() {\n const inverted = this.colorMode === 'light';\n const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;\n const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;\n return this.opened ? iconActiveColor : iconColor;\n }\n\n getClasses() {\n const classes = {};\n classes['accordion-item'] = true;\n classes['active'] = this.opened;\n classes['inverted'] = this.colorMode === 'light';\n return classes;\n }\n\n accordionItemClick(_: Event) {\n this.opened = !this.opened;\n }\n\n render() {\n return (\n <Host slot=\"accordion-item\">\n <div class={this.getClasses()} style={this.styles}>\n <div class=\"label\" onClick={e => this.accordionItemClick(e)}>\n <div class=\"label-container\">\n <span>{this.label}</span>\n <cura-icon name={this.opened ? this.closeIcon : this.openIcon} size={this.iconSize} color={this.getIconColor()}></cura-icon>\n </div>\n </div>\n <div class='content'>\n <div class=\"content-wrapper\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n}\n","@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n @include button-host();\n\n button, a {\n @include button-element() {\n background-color: var(--color-base);\n border: none;\n &:not(.isLoading):not(.disabled):hover { background-color: var(--color-light); }\n &:not(.isLoading):not(.disabled):active { background-color: var(--color-dark); }\n };\n @include button-shadow-behavior();\n @include button-sizes();\n\n // Children Elements\n @include button-container();\n @include button-label() {\n color: var(--neutral-black);\n &.inverted { color: var(--neutral-white); }\n }\n @include button-icon();\n\n // Disabled state\n @include button-disabled() {\n background-color: var(--neutral-light); \n .label, .label.inverted { color: var(--neutral-dark); }\n };\n\n // FAB / Icon-only\n @include button-icon-only-behavior();\n\n // Loading State\n @include button-loading();\n\n }\n}\n","import { Component, Host, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n tag: 'cura-button',\n styleUrl: 'cura-button.scss',\n shadow: true,\n})\nexport class CuraButton {\n\n /**\n * Button size: small | medium | large (default)\n */\n @Prop({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Disabled state. Boolean.\n */\n @Prop({reflect: true}) disabled = false;\n /**\n * Loading state. Boolean.\n */\n @Prop({reflect: true}) isLoading = false;\n\n /**\n * Name of the icon to be used from iconset.\n */\n @Prop({reflect: true}) iconName: string;\n /**\n * Custom iconset if needed.\n */\n @Prop({reflect: true}) iconset = 'default';\n /**\n * Icon position: left (default) | right.\n */\n @Prop({reflect: true}) iconPosition: 'left' | 'right' = 'left';\n /**\n * Set button to FAB/icon only.\n */\n @Prop({reflect: true}) iconOnly = false;\n\n /**\n * Property href switch button to link.\n */\n @Prop({reflect: true}) href: string;\n /**\n * Set target if link.\n */\n @Prop({reflect: true}) target = \"_self\";\n\n /**\n * Color base from color scheme. Default: accent.\n */\n @Prop() color = 'accent';\n @Watch('color')\n handleChangeColor() {\n this.setColors();\n }\n /**\n * Set the font color to dark or light.\n */\n @Prop({reflect: true}) fontColor: 'dark' | 'light' = 'dark';\n /**\n * Set text aligment for the button label.\n * Vales: left (default) | center | right.\n */\n @Prop({reflect: true}) textAlign: 'left' | 'center' | 'right' = 'left';\n\n\n @State() styles = {};\n\n weights;\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n this.styles['--text-align'] = this.textAlign;\n this.setColors();\n }\n\n getClasses() {\n const classes = {};\n classes[`${this.size.toLowerCase()}`] = true;\n classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n classes[`icon-only`] = this.iconOnly;\n classes['inverted'] = this.fontColor === 'light';\n classes['disabled'] = this.disabled;\n classes['isLoading'] = this.isLoading;\n return classes;\n }\n\n setColors() {\n this.styles = {\n ...this.styles,\n '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)\n };\n }\n\n getIcon() {\n if (!this.iconName) return '';\n const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n const color = this.getSymbolColor();\n return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n }\n\n getSymbolColor() {\n return this.disabled\n ? 'neutral-dark'\n : this.fontColor === 'light'\n ? 'neutral-white'\n : 'neutral-black';\n }\n\n handleClick(e: Event) {\n if (this.disabled || this.isLoading) e.preventDefault();\n }\n\n render() {\n return (\n <Host>\n { this.href ? (\n <a href={this.disabled ? '' : this.href}\n target={this.target}\n class={this.getClasses()}\n style={this.styles}\n onClick={(e) => this.handleClick(e)}>\n <span class=\"button-container\">\n { this.getIcon() }\n <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n </span>\n <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n </a>\n ) : (\n <button class={this.getClasses()}\n style={this.styles}\n disabled={this.disabled || null}\n onClick={(e) => this.handleClick(e)}>\n <span class=\"button-container\">\n { this.getIcon() }\n <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n </span>\n <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n </button>\n )}\n </Host>\n );\n }\n\n}\n","@import '../../../scss/mixins/responsive.scss';\n\n:host {\n display: block;\n font-size: var(--font-size-base);\n\n h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-family);\n font-size: 1.714em;\n font-weight: var(--font-weight-regular);\n color: var(--color-body);\n line-height: var(--line-height);\n margin-block: var(--margin-block);\n letter-spacing: 0px;\n\n &.bold-weight {\n font-weight: var(--font-weight-medium);\n }\n\n &.large {\n font-size: 2.071em;\n letter-spacing: -0.58px;\n }\n\n &.small {\n font-size: 1.214em;\n line-height: calc(var(--line-height) + 20%);\n\n &.bold-weight, ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-bold);\n }\n }\n\n &.xsmall {\n font-size: 0.714em;\n font-weight: var(--font-weight-medium);\n letter-spacing: 0.6px;\n\n &.bold-weight, ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-bold);\n }\n }\n\n }\n\n @include medium-large() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 2em;\n\n &.large {\n font-size: 2.357em;\n letter-spacing: -0.66px;\n }\n\n &.small {\n font-size: 1.357em;\n }\n\n &.xsmall {\n font-size: 0.857em;\n line-height: calc(var(--line-height) + 3%);\n letter-spacing: 0.72px;\n }\n\n }\n }\n\n @include xlarge-only() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 2.5em;\n line-height: calc(var(--line-height) + 5%);\n letter-spacing: -0.82px;\n\n &.large {\n font-size: 2.929em;\n }\n\n &.small {\n font-size: 1.714em;\n line-height: calc(var(--line-height) + 30%);\n letter-spacing: 0%;\n }\n\n &.xsmall {\n font-size: 1em;\n line-height: calc(var(--line-height) + 12.857%);\n letter-spacing: 0.28px;\n }\n }\n }\n\n ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-medium);\n }\n\n ::slotted(a) {\n font-weight: var(--font-weight-bold);\n color: var(--color-link);\n text-underline-offset: 10%;\n cursor: pointer;\n }\n\n ::slotted(u) {\n text-underline-offset: 10%;\n }\n\n ::slotted(abbr) {\n color: var(--color-link);\n text-decoration: underline dashed 1px var(--color-link);\n text-underline-offset: 10%;\n cursor: default;\n }\n\n ::slotted(i), ::slotted(em) {\n font-weight: var(--font-weight-medium);\n }\n\n}\n","import { Component, Host, h, Prop, Element, Watch, State } from '@stencil/core';\n\n@Component({\n tag: 'cura-heading',\n styleUrl: 'cura-heading.scss',\n shadow: true,\n})\nexport class CuraHeading {\n\n /**\n * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n * Values: 1(default) to 6.\n */\n @Prop({reflect: true}) level: 1 | 2 | 3 | 4 | 5 | 6 = 1;\n\n /**\n * Heading style size.\n * Values: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall.\n */\n @Prop({reflect: true}) size: 'regular' | 'medium' | 'large' | 'small' | 'caption' | 'xsmall' = 'medium';\n\n /**\n * Heading font weight. It is possible to use regular HTML tags like <b> or <strong> as well.\n * Values: regular (default) | bold.\n */\n @Prop({reflect: true}) weight: 'regular' | 'bold' = 'regular';\n\n /**\n * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n * Values: Color from design system scheme. Default to 'accent-dark'.\n */\n @Prop({reflect: true}) spotColor = 'accent-dark';\n\n /**\n * Text color.\n * Values: Color from design system scheme. Default to the font color from the theme.\n */\n @Prop() color: string;\n @Watch('color')\n @Watch('spotColor')\n handleChangeColor() {\n this.setColors();\n }\n\n /**\n * CSS margin-block property values.\n * Default to 1.25em\n */\n @Prop({reflect: true}) marginBlock = '1.25em';\n\n /**\n * CSS line-height property values.\n * Default to 140%\n */\n @Prop({reflect: true}) lineHeight = '130%';\n\n /**\n * Host element <cura-heading>\n */\n @Element() host: HTMLElement;\n\n /**\n * Internal Props\n */\n weights: any;\n fontSizeBase: string;\n @State() styles = {};\n theme = window.CuraAPI.theme;\n\n connectedCallback() {\n this.setFontProperties();\n this.setColors();\n }\n\n getClasses() {\n const classes = {};\n classes[this.size.toLowerCase()] = true;\n classes[`${this.weight.toLowerCase()}-weight`] = true;\n return classes;\n }\n\n setFontProperties() {\n this.weights = this.theme.fonts.getWeights();\n this.fontSizeBase = this.theme.fonts.getSize();\n this.styles = {\n '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),\n '--font-weight-regular': this.weights.regular,\n '--font-weight-medium': this.weights.medium,\n '--font-weight-bold': this.weights.bold,\n '--font-weight-black': this.weights.black\n }\n }\n\n hostCSSProperties() {\n return {\n '--margin-block': this.marginBlock,\n '--font-size-base': this.fontSizeBase,\n '--line-height': this.lineHeight\n };\n }\n\n setColors() {\n const fontColor = this.color\n ? this.theme.colors.getColor(this.color)\n : this.theme.fonts.getColor();\n this.styles = {\n ...this.styles,\n '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n };\n }\n\n getHeadingTag() {\n const tags = {\n '1': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>,\n '2': <h2 style={this.styles} class={this.getClasses()}><slot></slot></h2>,\n '3': <h3 style={this.styles} class={this.getClasses()}><slot></slot></h3>,\n '4': <h4 style={this.styles} class={this.getClasses()}><slot></slot></h4>,\n '5': <h5 style={this.styles} class={this.getClasses()}><slot></slot></h5>,\n '6': <h6 style={this.styles} class={this.getClasses()}><slot></slot></h6>,\n 'default': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>\n };\n return tags[`${this.level}`] || tags['default'];\n }\n\n render() {\n return (\n <Host style={this.hostCSSProperties()}>\n { this.getHeadingTag() }\n </Host>\n );\n }\n\n}\n",":host {\n width: var(--size);\n height: var(--size);\n svg {\n display: inline-block;\n stroke: var(--color);\n width: var(--size);\n height: var(--size);\n stroke-width: var(--stroke);\n fill: none;\n }\n}\n","import { Component, Host, h, Prop, Element, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-icon',\n styleUrl: 'cura-icon.scss',\n shadow: true\n})\nexport class CuraIcon {\n\n @Prop({reflect: true}) name = '';\n @Prop() color = 'neutral-base';\n @Prop() size: string | number;\n @Prop({reflect: true}) iconset = 'default';\n @Prop() disabled = false;\n\n @Element() host: HTMLElement;\n\n sizes = {\n \"128\": {size: 128, stroke: 5.25},\n \"72\": {size: 72, stroke: 3.5},\n \"64\": {size: 64, stroke: 3.25},\n \"48\": {size: 48, stroke: 2.75},\n \"40\": {size: 40, stroke: 2.5},\n \"32\": {size: 32, stroke: 2.25},\n \"24\": {size: 24, stroke: 2},\n \"20\": {size: 20, stroke: 1.75},\n \"16\": {size: 16, stroke: 1.5},\n \"default\": {size: 24, stroke: 2}\n };\n\n @Watch('size')\n sizeHandler(size: string | number) {\n const scaledStroke = (iconSize: string | number) => {\n return `${this.sizes[iconSize].stroke * (this.sizes.default.size / this.sizes[iconSize].size)}px`;\n }\n this.setHostProperty('--size', this.sizes[`${size}`] ? `${this.sizes[size].size}px` : `${this.sizes.default.size}px`);\n this.setHostProperty('--stroke', this.sizes[`${size}`] ? scaledStroke(size) : scaledStroke(\"default\"));\n }\n\n @Watch('color')\n @Watch('disabled')\n colorHandler() {\n this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color));\n }\n\n assetsPath: string;\n\n connectedCallback() {\n this.assetsPath = window.CuraAPI.localAssetsPath;\n this.sizeHandler(this.size);\n this.colorHandler();\n }\n\n setHostProperty(prop: string, value: string) {\n this.host.style.setProperty(prop, value);\n }\n\n render() {\n return (\n <Host>\n <svg\n version=\"1.1\"\n viewBox=\"0 0 24 24\"\n preserveAspectRatio=\"xMidYMid meet\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <use\n xlinkHref={`${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}`}>\n </use>\n </svg>\n </Host>\n );\n }\n\n}\n","@import '../../../scss/mixins/animations.scss';\n\n:host {\n display: inline-block;\n width: var(--size);\n height: var(--size);\n \n svg {\n width: var(--size);\n height: var(--size);\n animation: rotate .7s linear infinite;\n }\n\n circle, path {\n stroke-miterlimit: 10;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n path { stroke: var(--color); }\n\n stop { stop-color: var(--color); }\n linearGradient stop:first-child {\n stop-opacity: 0.14;\n }\n}\n\n@include rotate();\n\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'cura-loader-circle',\n styleUrl: 'cura-loader-circle.scss',\n shadow: true,\n})\nexport class CuraLoaderCircle {\n\n /**\n * Loader size. Values: small, medium or large.\n */\n @Prop({reflect: true}) size: 'small' | 'medium' | 'large' | 'xlarge' = 'medium';\n /**\n * One from color scheme. Default: neutral-white.\n */\n @Prop({reflect: true}) color = 'neutral-white';\n\n sizes = {\n xlarge: 32,\n large: 24,\n medium: 20,\n small: 16,\n default: 16,\n };\n\n getPxSize = () => this.sizes[this.size] || this.sizes['default'];\n\n getStyles() {\n return {\n '--size': `${this.getPxSize()}px`,\n '--color': window.CuraAPI.theme.colors.getColor(this.color)\n }\n }\n\n render() {\n return (\n <Host style={this.getStyles()}>\n <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g>\n <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"url(#paint0_linear_13485_11488)\" stroke-width=\"2\"/>\n <path d=\"M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5\" stroke-width=\"2\"/>\n </g>\n <defs>\n <linearGradient id=\"paint0_linear_13485_11488\" x1=\"15.7\" y1=\"4.5\" x2=\"4.15\" y2=\"11.5\" gradientUnits=\"userSpaceOnUse\">\n <stop/>\n <stop offset=\"1\"/>\n </linearGradient>\n </defs>\n </svg>\n </Host>\n );\n }\n\n}\n","@import '../../scss/mixins/responsive.scss';\n\n@mixin template-spacing($spacing-scale: 0px, $large-device: false) {\n $spacing-px: calc(var(--spacing) * $spacing-scale);\n padding: 0px;\n @if $large-device {\n #content-container {\n #sidebar-left ::slotted(div[slot=\"sidebar-left\"]) {\n margin-right: $spacing-px;\n }\n #sidebar-right ::slotted(div[slot=\"sidebar-right\"]) {\n margin-left: $spacing-px;\n }\n }\n }\n}\n\n:host {\n display: block;\n\n .grid-template {\n display: grid;\n grid-template-rows: auto;\n grid-template-columns: auto;\n grid-template-areas:\n 'sub-header'\n 'header'\n 'pre-content'\n 'content-container'\n 'post-body'\n 'footer'\n 'sub-footer';\n\n #sub-header {\n grid-area: sub-header;\n }\n\n #header {\n grid-area: header;\n }\n\n #pre-content {\n grid-area: pre-content;\n }\n\n #content-container {\n grid-area: content-container;\n }\n\n #post-body {\n grid-area: post-body;\n }\n\n #footer {\n grid-area: footer;\n }\n\n #sub-footer {\n grid-area: sub-footer;\n }\n\n @include mobile-only() {\n $spacing-scale: 4px;\n @include template-spacing($spacing-scale);\n }\n\n @include medium-only() {\n $spacing-scale: 5px;\n @include template-spacing($spacing-scale);\n }\n\n @include large-only() {\n $spacing-scale: 5px;\n @include template-spacing($spacing-scale, true);\n #content-container {\n display: flex;\n #content {\n flex-grow: 1;\n }\n #sidebar-left, #sidebar-right {\n max-width: 20%;\n }\n }\n }\n\n @include xlarge-only() {\n $spacing-scale: 7px;\n @include template-spacing($spacing-scale, true);\n #content-container {\n display: flex;\n #content {\n flex-grow: 1;\n }\n #sidebar-left, #sidebar-right {\n max-width: 20%;\n }\n &.centered {\n max-width: $breakpoint-xlarge-min;\n justify-self: center;\n }\n }\n }\n }\n}\n","import { Component, Element, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-page-template',\n styleUrl: 'cura-page-template.scss',\n shadow: true,\n})\nexport class CuraPageTemplate {\n\n @Prop({reflect: true}) contentwidth: 'default' | 'centered' = 'default';\n\n @Element() host: HTMLElement;\n\n styles: any;\n\n connectedCallback() {\n this.styles = {\n '--spacing': window.CuraAPI.theme.spacing.getSpacing(),\n }\n }\n\n getClasses() {\n const classes = {};\n classes[this.contentwidth.toLowerCase()] = true;\n return classes;\n }\n\n render() {\n return (\n <Host>\n <div style={this.styles} class=\"grid-template\">\n <div id=\"sub-header\">\n <slot name='sub-header'></slot>\n </div>\n <div id=\"header\">\n <slot name='header'></slot>\n </div>\n <div id=\"pre-content\">\n <slot name='pre-content'></slot>\n </div>\n <div id=\"content-container\" class={this.getClasses()}>\n <div id=\"sidebar-left\">\n <slot name='sidebar-left'></slot>\n </div>\n <div id=\"content\">\n <slot name=\"content\"></slot>\n <slot></slot>\n </div>\n <div id=\"sidebar-right\">\n <slot name='sidebar-right'></slot>\n </div>\n </div>\n <div id=\"post-body\">\n <slot name='post-body'></slot>\n </div>\n <div id=\"footer\">\n <slot name='footer'></slot>\n </div>\n <div id=\"sub-footer\">\n <slot name='sub-footer'></slot>\n </div>\n </div>\n </Host>\n );\n }\n\n}\n","@import '../../../scss/mixins/responsive.scss';\n\n:host {\n display: block;\n font-size: var(--font-size-base);\n\n p {\n font-family: var(--font-family);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-regular);\n color: var(--color-body);\n line-height: var(--line-height);\n margin-block: var(--margin-block);\n letter-spacing: 0.28px;\n\n &.large {\n font-size: 1.214em;\n line-height: calc(var(--line-height) + 10%);\n letter-spacing: 0px;\n }\n\n &.small {\n font-size: 0.85em;\n line-height: calc(var(--line-height) - 5%);\n letter-spacing: 0.48px;\n }\n\n &.caption, &.xsmall {\n font-size: 0.714em;\n line-height: calc(var(--line-height) - 5%);\n letter-spacing: 0.6px;\n }\n }\n\n @include medium-large() {\n p {\n font-size: 1.143em;\n line-height: calc(var(--line-height) + 5%);\n letter-spacing: 0.32px;\n\n &.large {\n font-size: 1.357em;\n line-height: calc(var(--line-height) + 10%);\n letter-spacing: 0px;\n }\n\n &.small {\n font-size: 1em;\n line-height: calc(var(--line-height) - 5%);\n letter-spacing: 0.56px;\n }\n\n &.caption, &.xsmall {\n font-size: 0.85em;\n line-height: calc(var(--line-height) - 5%);\n letter-spacing: 0.72px;\n }\n }\n }\n\n @include xlarge-only() {\n p {\n font-size: 1.429em;\n line-height: calc(var(--line-height) + 10%);\n letter-spacing: 0px;\n\n &.large {\n font-size: 1.714em;\n line-height: calc(var(--line-height) + 20%);\n }\n\n &.small {\n font-size: 1.21em;\n line-height: calc(var(--line-height) + 5%);\n letter-spacing: 0px;\n }\n\n &.caption, &.xsmall {\n font-size: 1em;\n line-height: calc(var(--line-height) + 5%);\n letter-spacing: 0.28px;\n }\n }\n }\n\n ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-bold);\n }\n\n ::slotted(a) {\n font-weight: var(--font-weight-medium);\n color: var(--color-link);\n text-underline-offset: 10%;\n }\n\n ::slotted(u) {\n font-weight: var(--font-weight-medium);\n text-underline-offset: 10%;\n }\n\n ::slotted(abbr) {\n color: var(--color-link);\n text-decoration: underline dashed 1px var(--color-link);\n text-underline-offset: 10%;\n cursor: default;\n }\n\n}\n\n","import { Component, Host, Prop, h, Element, Watch, State } from '@stencil/core';\n\n@Component({\n tag: 'cura-paragraph',\n styleUrl: 'cura-paragraph.scss',\n shadow: true,\n})\nexport class CuraParagraph {\n\n /**\n * Set size of body text.\n * Values: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall.\n */\n @Prop({reflect: true}) size: 'regular' | 'medium' | 'large' | 'small' | 'caption' | 'xsmall' = 'medium';\n\n /**\n * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n * Values: Color from design system scheme. Default to 'accent-dark'.\n */\n @Prop({reflect: true}) spotColor = 'accent-dark';\n\n /**\n * Text color.\n * Values: Color from design system scheme. Default to the font color from the theme.\n */\n @Prop() color: string;\n @Watch('color')\n @Watch('spotColor')\n handleChangeColor() {\n this.setColors();\n }\n\n /**\n * CSS margin-block property values.\n * Default to 1.25em\n */\n @Prop({reflect: true}) marginBlock = '1.25em';\n\n /**\n * CSS line-height property values.\n * Default to 140%\n */\n @Prop({reflect: true}) lineHeight = '140%';\n\n /**\n * Host element <cura-paragraph>\n */\n @Element() host: HTMLElement;\n\n /**\n * Internal Props\n */\n weights: any;\n fontSizeBase: string;\n @State() styles = {};\n theme = window.CuraAPI.theme;\n\n connectedCallback() {\n this.setFontProperties();\n this.setColors();\n }\n\n setsizeClass() {\n const sizeclass = {};\n sizeclass[this.size.toLowerCase()] = true;\n return sizeclass;\n }\n\n setFontProperties() {\n this.weights = this.theme.fonts.getWeights();\n this.fontSizeBase = this.theme.fonts.getSize();\n this.styles = {\n '--font-family': this.theme.fonts.getFamily('body'),\n '--font-weight-regular': this.weights.regular,\n '--font-weight-medium': this.weights.medium,\n '--font-weight-bold': this.weights.bold\n };\n }\n\n setColors() {\n const fontColor = this.color\n ? this.theme.colors.getColor(this.color)\n : this.theme.fonts.getColor();\n this.styles = {\n ...this.styles,\n '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n };\n }\n\n hostCSSProperties() {\n return {\n '--margin-block': this.marginBlock,\n '--font-size-base': this.fontSizeBase,\n '--line-height': this.lineHeight\n };\n }\n\n render() {\n return (\n <Host style={this.hostCSSProperties()}>\n <p style={this.styles} class={this.setsizeClass()}>\n <slot></slot>\n </p>\n </Host>\n );\n }\n\n}\n"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ System.register(["./p-c0c00396.system.js"],(function(t){"use strict";var e,o,s,i;return{setters:[function(t){e=t.r;o=t.h;s=t.H;i=t.g}],execute:function(){var h=":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size: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{font-size:3.429em}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:4.286em;line-height:calc(var(--line-height) + 5%)}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(abbr){color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";var l=t("cura_display",function(){function t(t){e(this,t);this.theme=window.CuraAPI.theme;this.level=1;this.spotColor="accent-dark";this.color=undefined;this.marginBlock="1.25em";this.lineHeight="120%";this.styles={}}t.prototype.handleChangeColor=function(){this.setColors()};t.prototype.connectedCallback=function(){this.setFontProperties();this.setColors()};t.prototype.setFontProperties=function(){this.weights=this.theme.fonts.getWeights();this.fontSizeBase=this.theme.fonts.getSize();this.styles={"--font-family":window.CuraAPI.theme.fonts.getFamily("display"),"--font-size":window.CuraAPI.theme.fonts.getSize(),"--font-weight-bold":this.weights.bold}};t.prototype.hostCSSProperties=function(){return{"--margin-block":this.marginBlock,"--font-size-base":this.fontSizeBase,"--line-height":this.lineHeight}};t.prototype.setColors=function(){var t=this.color?this.theme.colors.getColor(this.color):this.theme.fonts.getColor();this.styles=Object.assign(Object.assign({},this.styles),{"--color-body":t||this.theme.colors.getColor("neutral-darker"),"--color-link":this.theme.colors.getColor("".concat(this.spotColor))})};t.prototype.getHeadingTag=function(){var t={1:o("h1",{style:this.styles},o("slot",null)),2:o("h2",{style:this.styles},o("slot",null)),3:o("h3",{style:this.styles},o("slot",null)),4:o("h4",{style:this.styles},o("slot",null)),5:o("h5",{style:this.styles},o("slot",null)),6:o("h6",{style:this.styles},o("slot",null)),default:o("h1",{style:this.styles},o("slot",null))};return t["".concat(this.level)]||t["default"]};t.prototype.render=function(){return o(s,{style:this.hostCSSProperties()},this.getHeadingTag())};Object.defineProperty(t.prototype,"host",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{color:["handleChangeColor"],spotColor:["handleChangeColor"]}},enumerable:false,configurable:true});return t}());l.style=h}}}));
2
+ //# sourceMappingURL=p-ca054b07.system.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["curaDisplayCss","CuraDisplay","exports","this","theme","window","CuraAPI","class_1","prototype","handleChangeColor","setColors","connectedCallback","setFontProperties","weights","fonts","getWeights","fontSizeBase","getSize","styles","getFamily","bold","hostCSSProperties","marginBlock","lineHeight","fontColor","color","colors","getColor","Object","assign","concat","spotColor","getHeadingTag","tags","h","style","default","level","render","Host"],"sources":["src/components/text/cura-display/cura-display.scss?tag=cura-display&encapsulation=shadow","src/components/text/cura-display/cura-display.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n display: block;\n font-size: var(--font-size-base);\n\n h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-family);\n font-size: 3em;\n font-weight: var(--font-weight-bold);\n color: var(--color-body);\n line-height: var(--line-height);\n margin-block: var(--margin-block);\n letter-spacing: 0px;\n }\n\n @include medium-large() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 3.429em;\n }\n }\n\n @include xlarge-only() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 4.286em;\n line-height: calc(var(--line-height) + 5%);\n }\n }\n\n ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-bold);\n }\n\n ::slotted(a) {\n font-weight: var(--font-weight-bold);\n color: var(--color-link);\n text-underline-offset: 10%;\n cursor: pointer;\n }\n\n ::slotted(u) {\n text-underline-offset: 10%;\n }\n\n ::slotted(abbr) {\n color: var(--color-link);\n text-decoration: underline dashed 1px var(--color-link);\n text-underline-offset: 10%;\n cursor: default;\n }\n\n}\n","import { Component, Host, h, Element, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-display',\n styleUrl: 'cura-display.scss',\n shadow: true,\n})\nexport class CuraDisplay {\n\n /**\n * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n * Values: 1(default) to 6.\n */\n @Prop({reflect: true}) level: 1 | 2 | 3 | 4 | 5 | 6 = 1;\n\n /**\n * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n * Values: Color from design system scheme. Default to 'accent-dark'.\n */\n @Prop({reflect: true}) spotColor = 'accent-dark';\n\n /**\n * Text color.\n * Values: Color from design system scheme. Default to the font color from the theme.\n */\n @Prop() color: string;\n @Watch('color')\n @Watch('spotColor')\n handleChangeColor() {\n this.setColors();\n }\n\n /**\n * CSS margin-block property values.\n * Default to 1.25em\n */\n @Prop({reflect: true}) marginBlock = '1.25em';\n\n /**\n * CSS line-height property values.\n * Default to 140%\n */\n @Prop({reflect: true}) lineHeight = '120%';\n\n /**\n * Host element <cura-display>\n */\n @Element() host: HTMLElement;\n\n /**\n * Internal Props\n */\n weights: any;\n fontSizeBase: string;\n theme = window.CuraAPI.theme;\n @State() styles = {};\n\n connectedCallback() {\n this.setFontProperties();\n this.setColors();\n }\n\n setFontProperties() {\n this.weights = this.theme.fonts.getWeights();\n this.fontSizeBase = this.theme.fonts.getSize();\n this.styles = {\n '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),\n '--font-size': window.CuraAPI.theme.fonts.getSize(),\n '--font-weight-bold': this.weights.bold\n };\n }\n\n hostCSSProperties() {\n return {\n '--margin-block': this.marginBlock,\n '--font-size-base': this.fontSizeBase,\n '--line-height': this.lineHeight\n };\n }\n\n setColors() {\n const fontColor = this.color\n ? this.theme.colors.getColor(this.color)\n : this.theme.fonts.getColor();\n this.styles = {\n ...this.styles,\n '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n };\n }\n\n getHeadingTag() {\n const tags = {\n '1': <h1 style={this.styles}><slot></slot></h1>,\n '2': <h2 style={this.styles}><slot></slot></h2>,\n '3': <h3 style={this.styles}><slot></slot></h3>,\n '4': <h4 style={this.styles}><slot></slot></h4>,\n '5': <h5 style={this.styles}><slot></slot></h5>,\n '6': <h6 style={this.styles}><slot></slot></h6>,\n 'default': <h1 style={this.styles}><slot></slot></h1>\n };\n return tags[`${this.level}`] || tags['default'];\n }\n\n render() {\n return (\n <Host style={this.hostCSSProperties()}>\n { this.getHeadingTag() }\n </Host>\n );\n }\n\n}\n"],"mappings":"0JAAA,IAAMA,EAAiB,m/B,ICOVC,EAAWC,EAAA,0B,wBA+CtBC,KAAAC,MAAQC,OAAOC,QAAQF,M,WAzC+B,E,eAMnB,c,sCAiBE,S,gBAMD,O,YAalB,E,CA3BlBG,EAAAC,UAAAC,kBAAA,WACEN,KAAKO,W,EA4BPH,EAAAC,UAAAG,kBAAA,WACER,KAAKS,oBACLT,KAAKO,W,EAGPH,EAAAC,UAAAI,kBAAA,WACET,KAAKU,QAAUV,KAAKC,MAAMU,MAAMC,aAChCZ,KAAKa,aAAeb,KAAKC,MAAMU,MAAMG,UACrCd,KAAKe,OAAS,CACZ,gBAAiBb,OAAOC,QAAQF,MAAMU,MAAMK,UAAU,WACtD,cAAed,OAAOC,QAAQF,MAAMU,MAAMG,UAC1C,qBAAsBd,KAAKU,QAAQO,K,EAIvCb,EAAAC,UAAAa,kBAAA,WACE,MAAO,CACL,iBAAkBlB,KAAKmB,YACvB,mBAAoBnB,KAAKa,aACzB,gBAAiBb,KAAKoB,W,EAI1BhB,EAAAC,UAAAE,UAAA,WACE,IAAMc,EAAYrB,KAAKsB,MACnBtB,KAAKC,MAAMsB,OAAOC,SAASxB,KAAKsB,OAChCtB,KAAKC,MAAMU,MAAMa,WACrBxB,KAAKe,OAAMU,OAAAC,OAAAD,OAAAC,OAAA,GACN1B,KAAKe,QAAM,CACd,eAAgBM,GAAarB,KAAKC,MAAMsB,OAAOC,SAAS,kBACxD,eAAgBxB,KAAKC,MAAMsB,OAAOC,SAAS,GAAAG,OAAG3B,KAAK4B,a,EAIvDxB,EAAAC,UAAAwB,cAAA,WACE,IAAMC,EAAO,CACX,EAAKC,EAAA,MAAIC,MAAOhC,KAAKe,QAAQgB,EAAA,cAC7B,EAAKA,EAAA,MAAIC,MAAOhC,KAAKe,QAAQgB,EAAA,cAC7B,EAAKA,EAAA,MAAIC,MAAOhC,KAAKe,QAAQgB,EAAA,cAC7B,EAAKA,EAAA,MAAIC,MAAOhC,KAAKe,QAAQgB,EAAA,cAC7B,EAAKA,EAAA,MAAIC,MAAOhC,KAAKe,QAAQgB,EAAA,cAC7B,EAAKA,EAAA,MAAIC,MAAOhC,KAAKe,QAAQgB,EAAA,cAC7BE,QAAWF,EAAA,MAAIC,MAAOhC,KAAKe,QAAQgB,EAAA,eAErC,OAAOD,EAAK,GAAAH,OAAG3B,KAAKkC,SAAYJ,EAAK,U,EAGvC1B,EAAAC,UAAA8B,OAAA,WACE,OACEJ,EAACK,EAAI,CAACJ,MAAOhC,KAAKkB,qBACdlB,KAAK6B,gB,sRApGS,I"}
@@ -0,0 +1,2 @@
1
+ System.register(["./p-c0c00396.system.js"],(function(t){"use strict";var e,o,s,i;return{setters:[function(t){e=t.r;o=t.h;s=t.H;i=t.g}],execute:function(){var r=":host{display:block;font-size:var(--font-size-base)}:host p{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){font-weight:var(--font-weight-bold)}:host p.large{font-size:1.357em;line-height:calc(var(--line-height) - 4%);letter-spacing:0px}:host p.small{font-size:1em;line-height:calc(var(--line-height) - 4%);letter-spacing:0.56px}:host p.xsmall{font-size:0.857em;line-height:calc(var(--line-height) - 17%);letter-spacing:0.72px}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(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}";var n=t("cura_label",function(){function t(t){e(this,t);this.theme=window.CuraAPI.theme;this.size="medium";this.weight="regular";this.spotColor="accent-dark";this.color=undefined;this.marginBlock="0";this.lineHeight="125%";this.styles={}}t.prototype.handleChangeColor=function(){this.setColors()};t.prototype.connectedCallback=function(){this.setFontProperties();this.setColors()};t.prototype.getClasses=function(){var t={};t[this.size.toLowerCase()]=true;t["".concat(this.weight.toLowerCase(),"-weight")]=true;return t};t.prototype.setFontProperties=function(){this.weights=this.theme.fonts.getWeights();this.fontSizeBase=this.theme.fonts.getSize();this.styles={"--font-family":this.theme.fonts.getFamily("body"),"--font-weight-medium":this.weights.medium,"--font-weight-bold":this.weights.bold}};t.prototype.setColors=function(){var t=this.color?this.theme.colors.getColor(this.color):this.theme.fonts.getColor();this.styles=Object.assign(Object.assign({},this.styles),{"--color-body":t||this.theme.colors.getColor("neutral-darker"),"--color-link":this.theme.colors.getColor("".concat(this.spotColor))})};t.prototype.hostCSSProperties=function(){return{"--margin-block":this.marginBlock,"--font-size-base":this.fontSizeBase,"--line-height":this.lineHeight}};t.prototype.render=function(){return o(s,{style:this.hostCSSProperties()},o("p",{style:this.styles,class:this.getClasses()},o("slot",null)))};Object.defineProperty(t.prototype,"host",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{color:["handleChangeColor"],spotColor:["handleChangeColor"]}},enumerable:false,configurable:true});return t}());n.style=r}}}));
2
+ //# sourceMappingURL=p-d47b9cfe.system.entry.js.map