npm - @rededor/cura - Versions diffs - 0.5.3 → 0.5.5 - Mend

@rededor/cura 0.5.3 → 0.5.5

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 (115) hide show

package/dist/esm-es5/cura-accordion_8.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["curaAccordionCss","CuraAccordion","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","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","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","sizeHandler","microIcons","includes","console","warn","scaledStroke","iconSizes","stroke","setHostProperty","colorHandler","assetsPath","localAssetsPath","prop","value","setProperty","version","viewBox","preserveAspectRatio","xmlns","xlinkHref","curaLoaderCircleCss","CuraLoaderCircle","sizes","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';\nimport { microIcons, iconSizes } from './cura-icon.definitions';\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 @Watch('size')\n sizeHandler(size: string \| number) {\n if (size === 'micro' && !microIcons.includes(this.name) ) {\n size = 16;\n console.warn(`Icon ${this.name} doesn't support micro size. Minimum size of 16 was applied instead.`);\n }\n const scaledStroke = (iconSize: string \| number) => {\n return `${iconSizes[iconSize].stroke (iconSizes.default.size / iconSizes[iconSize].size)}px`;\n }\n this.setHostProperty('--size', iconSizes[`${size}`] ? `${iconSizes[size].size}px` : `${iconSizes.default.size}px`);\n this.setHostProperty('--stroke', iconSizes[`${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 \|\| 'neutral'));\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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"}
1	+ {"version":3,"names":["curaAccordionCss","CuraAccordion","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","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","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","sizeHandler","microIcons","includes","console","warn","scaledStroke","iconSizes","stroke","setHostProperty","colorHandler","assetsPath","localAssetsPath","prop","value","setProperty","version","viewBox","preserveAspectRatio","xmlns","xlinkHref","curaLoaderCircleCss","CuraLoaderCircle","sizes","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';\nimport { microIcons, iconSizes } from './cura-icon.definitions';\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 @Watch('size')\n sizeHandler(size: string \| number) {\n if (size === 'micro' && !microIcons.includes(this.name) ) {\n size = 16;\n console.warn(`Icon ${this.name} doesn't support micro size. Minimum size of 16 was applied instead.`);\n }\n const scaledStroke = (iconSize: string \| number) => {\n return `${iconSizes[iconSize].stroke (iconSizes.default.size / iconSizes[iconSize].size)}px`;\n }\n this.setHostProperty('--size', iconSizes[`${size}`] ? `${iconSizes[size].size}px` : `${iconSizes.default.size}px`);\n this.setHostProperty('--stroke', iconSizes[`${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 \|\| 'neutral'));\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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"}

package/dist/esm-es5/cura-button-outline.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,H as Host}from"./index-81f1a268.js";var curaButtonOutlineCss=':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 CuraButtonOutline=function(){function t(t){registerInstance(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 h("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 h(Host,null,this.href?h("a",{href:this.disabled?"":this.href,target:this.target,class:this.getClasses(),style:this.styles,onClick:function(o){return t.handleClick(o)}},h("span",{class:"button-container"},this.getIcon(),h("span",{class:{label:true,inverted:this.fontColor==="light"}},h("slot",null))),h("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})):h("button",{class:this.getClasses(),style:this.styles,disabled:this.disabled||null,onClick:function(o){return t.handleClick(o)}},h("span",{class:"button-container"},this.getIcon(),h("span",{class:{label:true,inverted:this.fontColor==="light"}},h("slot",null))),h("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})))};Object.defineProperty(t,"watchers",{get:function(){return{color:["handleChangeColor"]}},enumerable:false,configurable:true});return t}();CuraButtonOutline.style=curaButtonOutlineCss;export{CuraButtonOutline as cura_button_outline};
+import{r as registerInstance,h,H as Host}from"./index-81f1a268.js";var curaButtonOutlineCss=':host{--border-radius:4px;display:inline-block;vertical-align:middle;position:relative}: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);position:relative;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;position:relative}: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 CuraButtonOutline=function(){function t(t){registerInstance(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 h("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 h(Host,null,this.href?h("a",{href:this.disabled?"":this.href,target:this.target,class:this.getClasses(),style:this.styles,onClick:function(o){return t.handleClick(o)}},h("span",{class:"button-container"},this.getIcon(),h("span",{class:{label:true,inverted:this.fontColor==="light"}},h("slot",null))),h("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})):h("button",{class:this.getClasses(),style:this.styles,disabled:this.disabled||null,onClick:function(o){return t.handleClick(o)}},h("span",{class:"button-container"},this.getIcon(),h("span",{class:{label:true,inverted:this.fontColor==="light"}},h("slot",null))),h("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})))};Object.defineProperty(t,"watchers",{get:function(){return{color:["handleChangeColor"]}},enumerable:false,configurable:true});return t}();CuraButtonOutline.style=curaButtonOutlineCss;export{CuraButtonOutline as cura_button_outline};
 //# sourceMappingURL=cura-button-outline.entry.js.map

package/dist/esm-es5/cura-button-outline.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["curaButtonOutlineCss","CuraButtonOutline","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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"}
1	+ {"version":3,"names":["curaButtonOutlineCss","CuraButtonOutline","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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"}

package/dist/esm-es5/cura-button-select.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host}from"./index-81f1a268.js";var curaButtonSelectCss=':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(--neutral-purewhite);border:none;-webkit-box-shadow:inset 0px 0px 0px 2px var(--primary-base);box-shadow:inset 0px 0px 0px 2px var(--primary-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):hover,:host a:not(.disabled):hover{background-color:var(--color-lighter);-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-base);box-shadow:inset 0px 0px 0px 2px var(--color-base)}:host button:not(.disabled):hover .label,:host a:not(.disabled):hover .label{color:var(--neutral-purewhite-black)}:host button:focus,:host a:focus{-webkit-box-shadow:inset 0px 0px 0px 2px var(--info-base) !important;box-shadow:inset 0px 0px 0px 2px var(--info-base) !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 .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(--primary-base)}: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 .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;gap:5px}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button.selected,:host a.selected{cursor:pointer;background-color:var(--color-base);-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-darker);box-shadow:inset 0px 0px 0px 2px var(--color-darker)}:host button.selected .label,:host a.selected .label{color:var(--neutral-purewhite-black)}:host button.disabled,:host a.disabled{cursor:not-allowed;background-color:var(--neutral-white-primary-darker);-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-medium-primary-base);box-shadow:inset 0px 0px 0px 2px var(--neutral-medium-primary-base)}:host button.disabled .label,:host a.disabled .label{color:var(--neutral-medium-primary-base)}';var CuraButtonOutline=function(){function e(e){registerInstance(this,e);this.onclick=createEvent(this,"onclick",7);this.theme=window.CuraAPI.theme;this.size="medium";this.disabled=false;this.selected=false;this.iconPosition="right";this.color="accent";this.background="light";this.fontcolor="dark";this.hovered=false;this.styles={}}e.prototype.setColors=function(){var e=this;var t=[{name:"--color-base",theme:"".concat(this.color,"-base")},{name:"--color-darker",theme:"".concat(this.color,"-darker")},{name:"--color-lighter",theme:"".concat(this.color,"-lighter")},{name:"--neutral-purewhite-black",theme:this.fontcolor==="light"?"neutral-purewhite":"neutral-black"},{name:"--neutral-white-primary-darker",theme:this.background==="light"?"neutral-white":"primary-darker"},{name:"--neutral-medium-primary-base",theme:this.background==="light"?"neutral-medium":"primary-base"}];t.forEach((function(t){var o;e.styles=Object.assign(Object.assign({},e.styles),(o={},o[t.name]=e.theme.colors.getColor(t.theme),o))}))};e.prototype.setStyles=function(){this.weights=this.theme.fonts.getWeights();this.styles["--base-spacing"]=this.theme.spacing.getSpacing();this.styles["--font-size"]=this.theme.fonts.getSize();this.styles["--font-family"]=this.theme.fonts.getFamily();this.styles["--font-weight-medium"]=this.weights.medium;this.styles["--neutral-purewhite"]=this.theme.colors.getColor("neutral-purewhite");this.styles["--neutral-black"]=this.theme.colors.getColor("neutral-black");this.styles["--primary-base"]=this.theme.colors.getColor("primary-base");this.styles["--info-base"]=this.theme.colors.getColor("info-base")};e.prototype.connectedCallback=function(){this.setStyles();this.setColors()};e.prototype.handleMouseEnter=function(){if(this.disabled)return;this.hovered=true};e.prototype.handleMouseLeave=function(){this.hovered=false};e.prototype.getIcon=function(){if(!this.selected)return"";var e=this.size==="small"?16:this.size==="medium"?20:24;var t=this.hovered?"closeCircle":"checkCircle";var o=this.disabled?this.background==="light"?"neutral-medium":"primary-base":this.selected&&this.fontcolor==="dark"?"neutral-black":"neutral-purewhite";return h("cura-icon",{class:"button-icon",name:t,size:e,color:o})};e.prototype.handleClick=function(e){if(this.disabled)e.preventDefault();this.selected=!this.selected;this.onclick.emit({selected:this.selected})};e.prototype.getClasses=function(){var e={};e["".concat(this.size.toLowerCase())]=true;e["icon-".concat(this.iconPosition.toLowerCase())]=true;e["disabled"]=this.disabled;e["selected"]=this.selected;return e};e.prototype.render=function(){var e=this;return h(Host,null,h("button",{class:this.getClasses(),style:this.styles,disabled:this.disabled,onClick:function(t){return e.handleClick(t)},onMouseEnter:function(){return e.handleMouseEnter()},onMouseLeave:function(){return e.handleMouseLeave()}},h("div",{class:"button-container"},this.getIcon(),h("span",{class:"label"},h("slot",null)))))};Object.defineProperty(e,"watchers",{get:function(){return{background:["setColors","getIcon"],color:["setColors"],fontcolor:["setColors","getIcon"]}},enumerable:false,configurable:true});return e}();CuraButtonOutline.style=curaButtonSelectCss;export{CuraButtonOutline as cura_button_select};
+import{r as registerInstance,c as createEvent,h,H as Host}from"./index-81f1a268.js";var curaButtonSelectCss=':host{--border-radius:4px;display:inline-block;vertical-align:middle;position:relative}: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);position:relative;background-color:var(--neutral-purewhite);border:none;-webkit-box-shadow:inset 0px 0px 0px 2px var(--primary-base);box-shadow:inset 0px 0px 0px 2px var(--primary-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):hover,:host a:not(.disabled):hover{background-color:var(--color-lighter);-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-base);box-shadow:inset 0px 0px 0px 2px var(--color-base)}:host button:not(.disabled):hover .label,:host a:not(.disabled):hover .label{color:var(--neutral-purewhite-black)}:host button:focus,:host a:focus{-webkit-box-shadow:inset 0px 0px 0px 2px var(--info-base) !important;box-shadow:inset 0px 0px 0px 2px var(--info-base) !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 .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(--primary-base)}: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 .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;position:relative;gap:5px}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button.selected,:host a.selected{cursor:pointer;background-color:var(--color-base);-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-darker);box-shadow:inset 0px 0px 0px 2px var(--color-darker)}:host button.selected .label,:host a.selected .label{color:var(--neutral-purewhite-black)}:host button.disabled,:host a.disabled{cursor:not-allowed;background-color:var(--neutral-white-primary-darker);-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-medium-primary-base);box-shadow:inset 0px 0px 0px 2px var(--neutral-medium-primary-base)}:host button.disabled .label,:host a.disabled .label{color:var(--neutral-medium-primary-base)}';var CuraButtonOutline=function(){function e(e){registerInstance(this,e);this.onclick=createEvent(this,"onclick",7);this.theme=window.CuraAPI.theme;this.size="medium";this.disabled=false;this.selected=false;this.iconPosition="right";this.color="accent";this.background="light";this.fontcolor="dark";this.hovered=false;this.styles={}}e.prototype.setColors=function(){var e=this;var t=[{name:"--color-base",theme:"".concat(this.color,"-base")},{name:"--color-darker",theme:"".concat(this.color,"-darker")},{name:"--color-lighter",theme:"".concat(this.color,"-lighter")},{name:"--neutral-purewhite-black",theme:this.fontcolor==="light"?"neutral-purewhite":"neutral-black"},{name:"--neutral-white-primary-darker",theme:this.background==="light"?"neutral-white":"primary-darker"},{name:"--neutral-medium-primary-base",theme:this.background==="light"?"neutral-medium":"primary-base"}];t.forEach((function(t){var o;e.styles=Object.assign(Object.assign({},e.styles),(o={},o[t.name]=e.theme.colors.getColor(t.theme),o))}))};e.prototype.setStyles=function(){this.weights=this.theme.fonts.getWeights();this.styles["--base-spacing"]=this.theme.spacing.getSpacing();this.styles["--font-size"]=this.theme.fonts.getSize();this.styles["--font-family"]=this.theme.fonts.getFamily();this.styles["--font-weight-medium"]=this.weights.medium;this.styles["--neutral-purewhite"]=this.theme.colors.getColor("neutral-purewhite");this.styles["--neutral-black"]=this.theme.colors.getColor("neutral-black");this.styles["--primary-base"]=this.theme.colors.getColor("primary-base");this.styles["--info-base"]=this.theme.colors.getColor("info-base")};e.prototype.connectedCallback=function(){this.setStyles();this.setColors()};e.prototype.handleMouseEnter=function(){if(this.disabled)return;this.hovered=true};e.prototype.handleMouseLeave=function(){this.hovered=false};e.prototype.getIcon=function(){if(!this.selected)return"";var e=this.size==="small"?16:this.size==="medium"?20:24;var t=this.hovered?"closeCircle":"checkCircle";var o=this.disabled?this.background==="light"?"neutral-medium":"primary-base":this.selected&&this.fontcolor==="dark"?"neutral-black":"neutral-purewhite";return h("cura-icon",{class:"button-icon",name:t,size:e,color:o})};e.prototype.handleClick=function(e){if(this.disabled)e.preventDefault();this.selected=!this.selected;this.onclick.emit({selected:this.selected})};e.prototype.getClasses=function(){var e={};e["".concat(this.size.toLowerCase())]=true;e["icon-".concat(this.iconPosition.toLowerCase())]=true;e["disabled"]=this.disabled;e["selected"]=this.selected;return e};e.prototype.render=function(){var e=this;return h(Host,null,h("button",{class:this.getClasses(),style:this.styles,disabled:this.disabled,onClick:function(t){return e.handleClick(t)},onMouseEnter:function(){return e.handleMouseEnter()},onMouseLeave:function(){return e.handleMouseLeave()}},h("div",{class:"button-container"},this.getIcon(),h("span",{class:"label"},h("slot",null)))))};Object.defineProperty(e,"watchers",{get:function(){return{background:["setColors","getIcon"],color:["setColors"],fontcolor:["setColors","getIcon"]}},enumerable:false,configurable:true});return e}();CuraButtonOutline.style=curaButtonSelectCss;export{CuraButtonOutline as cura_button_select};
 //# sourceMappingURL=cura-button-select.entry.js.map

package/dist/esm-es5/cura-button-select.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["curaButtonSelectCss","CuraButtonOutline","this","theme","window","CuraAPI","prototype","setColors","_this","colors","name","concat","color","fontcolor","background","forEach","styles","Object","assign","_a","getColor","setStyles","weights","fonts","getWeights","spacing","getSpacing","getSize","getFamily","medium","connectedCallback","handleMouseEnter","disabled","hovered","handleMouseLeave","getIcon","selected","iconSize","size","iconName","h","class","handleClick","e","preventDefault","onclick","emit","getClasses","classes","toLowerCase","iconPosition","render","Host","style","onClick","onMouseEnter","onMouseLeave"],"sources":["src/components/buttons/cura-button-select/cura-button-select.scss?tag=cura-button-select&encapsulation=shadow","src/components/buttons/cura-button-select/cura-button-select.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: var(--neutral-purewhite);\n border: none;\n box-shadow: inset 0px 0px 0px 2px var(--primary-base);\n\n &:not(.disabled):hover {\n background-color: var(--color-lighter);\n box-shadow: inset 0px 0px 0px 2px var(--color-base);\n .label {\n color: var(--neutral-purewhite-black);\n }\n }\n\n &:focus {\n box-shadow: inset 0px 0px 0px 2px var(--info-base) !important;\n }\n }\n\n @include button-sizes();\n\n @include button-label() {\n color: var(--primary-base);\n }\n\n // Children Elements\n @include button-container() {\n gap: 5px;\n }\n\n @mixin button-icon() {\n margin: 0;\n }\n\n // selected state\n @include button-selected() {\n background-color: var(--color-base);\n box-shadow: inset 0px 0px 0px 2px var(--color-darker);\n .label {\n color: var(--neutral-purewhite-black);\n }\n }\n\n // Disabled state\n @include button-disabled() {\n background-color: var(--neutral-white-primary-darker);\n box-shadow: inset 0px 0px 0px 2px var(--neutral-medium-primary-base);\n .label {\n color: var(--neutral-medium-primary-base);\n }\n }\n\n }\n}\n","import { Component, Host, h, Prop, Watch, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'cura-button-select',\n styleUrl: 'cura-button-select.scss',\n shadow: true,\n})\n\nexport class CuraButtonOutline {\n /*\n Button size: small \| medium (default) \| large = medium\n /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n /\n Disabled state. Boolean.\n /\n @Prop({ reflect: true }) disabled = false;\n /\n selected state. Boolean.\n /\n @Prop({ reflect: true }) selected = false;\n /\n Icon position: left (default) \| right.\n /\n @Prop({ reflect: true }) iconPosition: 'left' \| 'right' = 'right';\n /\n Color base from color scheme. Default: accent.\n /\n @Prop() color = 'accent';\n /\n Set the font color to dark or light.\n /\n @Prop() background: 'dark' \| 'light' = 'light';\n /\n fontcolor theme of the checkbox.\n * Can be 'dark' or 'light'.\n /\n @Prop() fontcolor: 'dark' \| 'light' = 'dark';\n /\n hovered state. Boolean.\n */\n @State() hovered = false;\n\n @State() styles = {};\n\n @Event({ eventName: \"onclick\" }) onclick: EventEmitter<{ selected: boolean; }>;\n\n theme = window.CuraAPI.theme\n\n weights;\n\n @Watch('background')\n @Watch('color')\n @Watch('fontcolor')\n setColors() {\n const colors = [\n { name: '--color-base', theme: `${this.color}-base` },\n { name: '--color-darker', theme: `${this.color}-darker` },\n { name: '--color-lighter', theme: `${this.color}-lighter` },\n { name: '--neutral-purewhite-black', theme: this.fontcolor === 'light' ? 'neutral-purewhite' : 'neutral-black' },\n { name: '--neutral-white-primary-darker', theme: this.background === 'light' ? 'neutral-white' : 'primary-darker' },\n { name: '--neutral-medium-primary-base', theme: this.background === 'light' ? 'neutral-medium' : 'primary-base' },\n ];\n\n colors.forEach(color => {\n this.styles = {\n ...this.styles,\n [color.name]: this.theme.colors.getColor(color.theme)\n };\n });\n }\n\n setStyles() {\n this.weights = this.theme.fonts.getWeights();\n this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n this.styles['--font-size'] = this.theme.fonts.getSize();\n this.styles['--font-family'] = this.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n this.styles['--neutral-purewhite'] = this.theme.colors.getColor(\"neutral-purewhite\");\n this.styles['--neutral-black'] = this.theme.colors.getColor(\"neutral-black\");\n this.styles['--primary-base'] = this.theme.colors.getColor(\"primary-base\");\n this.styles['--info-base'] = this.theme.colors.getColor(\"info-base\");\n }\n\n connectedCallback() {\n this.setStyles()\n this.setColors();\n }\n\n handleMouseEnter() {\n if (this.disabled) return;\n this.hovered = true;\n }\n\n handleMouseLeave() {\n this.hovered = false;\n }\n\n @Watch('background')\n @Watch('fontcolor')\n getIcon() {\n if (!this.selected) return '';\n\n const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n const iconName = this.hovered ? 'closeCircle' : 'checkCircle';\n const fontcolor =\n this.disabled\n ? (this.background === 'light' ? 'neutral-medium' : 'primary-base')\n : this.selected && this.fontcolor === \"dark\" ? 'neutral-black' : \"neutral-purewhite\";\n\n return <cura-icon class=\"button-icon\" name={iconName} size={iconSize} color={fontcolor}></cura-icon>;\n }\n\n\n handleClick(e: Event) {\n if (this.disabled) e.preventDefault();\n this.selected = !this.selected;\n this.onclick.emit({ selected: this.selected });\n }\n\n\n getClasses() {\n const classes = {};\n classes[`${this.size.toLowerCase()}`] = true;\n classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n classes['disabled'] = this.disabled;\n classes['selected'] = this.selected;\n return classes;\n }\n\n render() {\n return (\n <Host>\n <button class={this.getClasses()}\n style={this.styles}\n disabled={this.disabled}\n onClick={(e) => this.handleClick(e)}\n onMouseEnter={() => this.handleMouseEnter()}\n onMouseLeave={() => this.handleMouseLeave()}>\n <div class=\"button-container\">\n {this.getIcon()}\n <span class=\"label\"><slot></slot></span>\n </div>\n </button>\n </Host>\n );\n }\n\n}\n"],"mappings":"oFAAA,IAAMA,oBAAsB,~~w1G~~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"}
1	+ {"version":3,"names":["curaButtonSelectCss","CuraButtonOutline","this","theme","window","CuraAPI","prototype","setColors","_this","colors","name","concat","color","fontcolor","background","forEach","styles","Object","assign","_a","getColor","setStyles","weights","fonts","getWeights","spacing","getSpacing","getSize","getFamily","medium","connectedCallback","handleMouseEnter","disabled","hovered","handleMouseLeave","getIcon","selected","iconSize","size","iconName","h","class","handleClick","e","preventDefault","onclick","emit","getClasses","classes","toLowerCase","iconPosition","render","Host","style","onClick","onMouseEnter","onMouseLeave"],"sources":["src/components/buttons/cura-button-select/cura-button-select.scss?tag=cura-button-select&encapsulation=shadow","src/components/buttons/cura-button-select/cura-button-select.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: var(--neutral-purewhite);\n border: none;\n box-shadow: inset 0px 0px 0px 2px var(--primary-base);\n\n &:not(.disabled):hover {\n background-color: var(--color-lighter);\n box-shadow: inset 0px 0px 0px 2px var(--color-base);\n .label {\n color: var(--neutral-purewhite-black);\n }\n }\n\n &:focus {\n box-shadow: inset 0px 0px 0px 2px var(--info-base) !important;\n }\n }\n\n @include button-sizes();\n\n @include button-label() {\n color: var(--primary-base);\n }\n\n // Children Elements\n @include button-container() {\n gap: 5px;\n }\n\n @mixin button-icon() {\n margin: 0;\n }\n\n // selected state\n @include button-selected() {\n background-color: var(--color-base);\n box-shadow: inset 0px 0px 0px 2px var(--color-darker);\n .label {\n color: var(--neutral-purewhite-black);\n }\n }\n\n // Disabled state\n @include button-disabled() {\n background-color: var(--neutral-white-primary-darker);\n box-shadow: inset 0px 0px 0px 2px var(--neutral-medium-primary-base);\n .label {\n color: var(--neutral-medium-primary-base);\n }\n }\n\n }\n}\n","import { Component, Host, h, Prop, Watch, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'cura-button-select',\n styleUrl: 'cura-button-select.scss',\n shadow: true,\n})\n\nexport class CuraButtonOutline {\n /*\n Button size: small \| medium (default) \| large = medium\n /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n /\n Disabled state. Boolean.\n /\n @Prop({ reflect: true }) disabled = false;\n /\n selected state. Boolean.\n /\n @Prop({ reflect: true }) selected = false;\n /\n Icon position: left (default) \| right.\n /\n @Prop({ reflect: true }) iconPosition: 'left' \| 'right' = 'right';\n /\n Color base from color scheme. Default: accent.\n /\n @Prop() color = 'accent';\n /\n Set the font color to dark or light.\n /\n @Prop() background: 'dark' \| 'light' = 'light';\n /\n fontcolor theme of the checkbox.\n * Can be 'dark' or 'light'.\n /\n @Prop() fontcolor: 'dark' \| 'light' = 'dark';\n /\n hovered state. Boolean.\n */\n @State() hovered = false;\n\n @State() styles = {};\n\n @Event({ eventName: \"onclick\" }) onclick: EventEmitter<{ selected: boolean; }>;\n\n theme = window.CuraAPI.theme\n\n weights;\n\n @Watch('background')\n @Watch('color')\n @Watch('fontcolor')\n setColors() {\n const colors = [\n { name: '--color-base', theme: `${this.color}-base` },\n { name: '--color-darker', theme: `${this.color}-darker` },\n { name: '--color-lighter', theme: `${this.color}-lighter` },\n { name: '--neutral-purewhite-black', theme: this.fontcolor === 'light' ? 'neutral-purewhite' : 'neutral-black' },\n { name: '--neutral-white-primary-darker', theme: this.background === 'light' ? 'neutral-white' : 'primary-darker' },\n { name: '--neutral-medium-primary-base', theme: this.background === 'light' ? 'neutral-medium' : 'primary-base' },\n ];\n\n colors.forEach(color => {\n this.styles = {\n ...this.styles,\n [color.name]: this.theme.colors.getColor(color.theme)\n };\n });\n }\n\n setStyles() {\n this.weights = this.theme.fonts.getWeights();\n this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n this.styles['--font-size'] = this.theme.fonts.getSize();\n this.styles['--font-family'] = this.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n this.styles['--neutral-purewhite'] = this.theme.colors.getColor(\"neutral-purewhite\");\n this.styles['--neutral-black'] = this.theme.colors.getColor(\"neutral-black\");\n this.styles['--primary-base'] = this.theme.colors.getColor(\"primary-base\");\n this.styles['--info-base'] = this.theme.colors.getColor(\"info-base\");\n }\n\n connectedCallback() {\n this.setStyles()\n this.setColors();\n }\n\n handleMouseEnter() {\n if (this.disabled) return;\n this.hovered = true;\n }\n\n handleMouseLeave() {\n this.hovered = false;\n }\n\n @Watch('background')\n @Watch('fontcolor')\n getIcon() {\n if (!this.selected) return '';\n\n const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n const iconName = this.hovered ? 'closeCircle' : 'checkCircle';\n const fontcolor =\n this.disabled\n ? (this.background === 'light' ? 'neutral-medium' : 'primary-base')\n : this.selected && this.fontcolor === \"dark\" ? 'neutral-black' : \"neutral-purewhite\";\n\n return <cura-icon class=\"button-icon\" name={iconName} size={iconSize} color={fontcolor}></cura-icon>;\n }\n\n\n handleClick(e: Event) {\n if (this.disabled) e.preventDefault();\n this.selected = !this.selected;\n this.onclick.emit({ selected: this.selected });\n }\n\n\n getClasses() {\n const classes = {};\n classes[`${this.size.toLowerCase()}`] = true;\n classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n classes['disabled'] = this.disabled;\n classes['selected'] = this.selected;\n return classes;\n }\n\n render() {\n return (\n <Host>\n <button class={this.getClasses()}\n style={this.styles}\n disabled={this.disabled}\n onClick={(e) => this.handleClick(e)}\n onMouseEnter={() => this.handleMouseEnter()}\n onMouseLeave={() => this.handleMouseLeave()}>\n <div class=\"button-container\">\n {this.getIcon()}\n <span class=\"label\"><slot></slot></span>\n </div>\n </button>\n </Host>\n );\n }\n\n}\n"],"mappings":"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"}

package/dist/esm-es5/cura-button-transparent.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,H as Host}from"./index-81f1a268.js";var curaButtonTransparentCss=':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-width:0px;border-color:transparent;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 .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 .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;border-color: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}: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:not(.isLoading):not(.disabled):hover .label,:host a.inverted:not(.isLoading):not(.disabled):hover .label{color:var(--color-lighter)}:host button.inverted:not(.isLoading):not(.disabled):hover cura-icon,:host a.inverted:not(.isLoading):not(.disabled):hover cura-icon{--color:var(--color-lighter) !important}:host button.inverted:not(.isLoading):not(.disabled):active .label,:host a.inverted:not(.isLoading):not(.disabled):active .label{color:var(--color-light)}:host button.inverted:not(.isLoading):not(.disabled):active cura-icon,:host a.inverted:not(.isLoading):not(.disabled):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 CuraButtonTransparent=function(){function t(t){registerInstance(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 h("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 h(Host,null,this.href?h("a",{href:this.disabled?"":this.href,target:this.target,class:this.getClasses(),style:this.styles,onClick:function(o){return t.handleClick(o)}},h("span",{class:"button-container"},this.getIcon(),h("span",{class:{label:true,inverted:this.fontColor==="light"}},h("slot",null))),h("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})):h("button",{class:this.getClasses(),style:this.styles,disabled:this.disabled||null,onClick:function(o){return t.handleClick(o)}},h("span",{class:"button-container"},this.getIcon(),h("span",{class:{label:true,inverted:this.fontColor==="light"}},h("slot",null))),h("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})))};Object.defineProperty(t,"watchers",{get:function(){return{color:["handleChangeColor"]}},enumerable:false,configurable:true});return t}();CuraButtonTransparent.style=curaButtonTransparentCss;export{CuraButtonTransparent as cura_button_transparent};
+import{r as registerInstance,h,H as Host}from"./index-81f1a268.js";var curaButtonTransparentCss=':host{--border-radius:4px;display:inline-block;vertical-align:middle;position:relative}: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);position:relative;background-color:transparent;border-width:0px;border-color:transparent;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 .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 .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;position:relative}: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;border-color: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}: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:not(.isLoading):not(.disabled):hover .label,:host a.inverted:not(.isLoading):not(.disabled):hover .label{color:var(--color-lighter)}:host button.inverted:not(.isLoading):not(.disabled):hover cura-icon,:host a.inverted:not(.isLoading):not(.disabled):hover cura-icon{--color:var(--color-lighter) !important}:host button.inverted:not(.isLoading):not(.disabled):active .label,:host a.inverted:not(.isLoading):not(.disabled):active .label{color:var(--color-light)}:host button.inverted:not(.isLoading):not(.disabled):active cura-icon,:host a.inverted:not(.isLoading):not(.disabled):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 CuraButtonTransparent=function(){function t(t){registerInstance(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 h("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 h(Host,null,this.href?h("a",{href:this.disabled?"":this.href,target:this.target,class:this.getClasses(),style:this.styles,onClick:function(o){return t.handleClick(o)}},h("span",{class:"button-container"},this.getIcon(),h("span",{class:{label:true,inverted:this.fontColor==="light"}},h("slot",null))),h("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})):h("button",{class:this.getClasses(),style:this.styles,disabled:this.disabled||null,onClick:function(o){return t.handleClick(o)}},h("span",{class:"button-container"},this.getIcon(),h("span",{class:{label:true,inverted:this.fontColor==="light"}},h("slot",null))),h("cura-loader-circle",{size:this.size,color:this.getSymbolColor()})))};Object.defineProperty(t,"watchers",{get:function(){return{color:["handleChangeColor"]}},enumerable:false,configurable:true});return t}();CuraButtonTransparent.style=curaButtonTransparentCss;export{CuraButtonTransparent as cura_button_transparent};
 //# sourceMappingURL=cura-button-transparent.entry.js.map

package/dist/esm-es5/cura-button-transparent.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["curaButtonTransparentCss","CuraButtonTransparent","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-transparent/cura-button-transparent.scss?tag=cura-button-transparent&encapsulation=shadow","src/components/buttons/cura-button-transparent/cura-button-transparent.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-width: 0px;\n border-color: transparent;\n\n &:not(.disabled):not(.isLoading):hover {\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 .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 border-color: var(--neutral-base);\n .label, .label.inverted { color: var(--neutral-dark); }\n &.inverted {\n opacity: 0.6;\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 &.inverted {\n &:not(.isLoading):not(.disabled):hover { \n .label { color: var(--color-lighter); }\n cura-icon { --color: var(--color-lighter) !important; }\n }\n &:not(.isLoading):not(.disabled):active {\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","import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-button-transparent',\n styleUrl: 'cura-button-transparent.scss',\n shadow: true,\n})\nexport class CuraButtonTransparent {\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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"}
1	+ {"version":3,"names":["curaButtonTransparentCss","CuraButtonTransparent","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-transparent/cura-button-transparent.scss?tag=cura-button-transparent&encapsulation=shadow","src/components/buttons/cura-button-transparent/cura-button-transparent.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-width: 0px;\n border-color: transparent;\n\n &:not(.disabled):not(.isLoading):hover {\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 .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 border-color: var(--neutral-base);\n .label, .label.inverted { color: var(--neutral-dark); }\n &.inverted {\n opacity: 0.6;\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 &.inverted {\n &:not(.isLoading):not(.disabled):hover { \n .label { color: var(--color-lighter); }\n cura-icon { --color: var(--color-lighter) !important; }\n }\n &:not(.isLoading):not(.disabled):active {\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","import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-button-transparent',\n styleUrl: 'cura-button-transparent.scss',\n shadow: true,\n})\nexport class CuraButtonTransparent {\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":"mEAAA,IAAMA,yBAA2B,mzL,ICOpBC,sBAAqB,W,iDAK6B,Q,cAK1B,M,eAIC,M,qCASF,U,kBAIuB,O,cAItB,M,gCASF,Q,WAKhB,S,eAQqC,O,eAKW,O,YAG9C,E,CAdlBA,EAAAC,UAAAC,kBAAA,WACEC,KAAKC,W,EAiBPJ,EAAAC,UAAAI,kBAAA,WACEF,KAAKG,QAAUC,OAAOC,QAAQC,MAAMC,MAAMC,aAC1CR,KAAKS,OAAO,kBAAoBL,OAAOC,QAAQC,MAAMI,QAAQC,aAC7DX,KAAKS,OAAO,mBAAqBL,OAAOC,QAAQC,MAAMM,OAAOC,SAAS,iBACtEb,KAAKS,OAAO,kBAAoBL,OAAOC,QAAQC,MAAMM,OAAOC,SAAS,gBACrEb,KAAKS,OAAO,kBAAoBL,OAAOC,QAAQC,MAAMM,OAAOC,SAAS,gBACrEb,KAAKS,OAAO,eAAiBL,OAAOC,QAAQC,MAAMC,MAAMO,UACxDd,KAAKS,OAAO,iBAAmBL,OAAOC,QAAQC,MAAMC,MAAMQ,YAC1Df,KAAKS,OAAO,wBAA0BT,KAAKG,QAAQa,OACnDhB,KAAKS,OAAO,gBAAkBT,KAAKiB,UACnCjB,KAAKC,W,EAGPJ,EAAAC,UAAAoB,WAAA,WACE,IAAMC,EAAU,GAChBA,EAAQ,GAAAC,OAAGpB,KAAKqB,KAAKC,gBAAmB,KACxCH,EAAQ,QAAAC,OAAQpB,KAAKuB,aAAaD,gBAAmB,KACrDH,EAAQ,aAAenB,KAAKwB,SAC5BL,EAAQ,YAAcnB,KAAKyB,YAAc,QACzCN,EAAQ,YAAcnB,KAAK0B,SAC3BP,EAAQ,aAAenB,KAAK2B,UAC5B,OAAOR,C,EAGTtB,EAAAC,UAAAG,UAAA,WACED,KAAKS,OAAMmB,OAAAC,OAAAD,OAAAC,OAAA,GACN7B,KAAKS,QAAM,CACd,kBAAmBL,OAAOC,QAAQC,MAAMM,OAAOC,SAAS,GAAAO,OAAGpB,KAAK8B,MAAK,aACrE,gBAAiB1B,OAAOC,QAAQC,MAAMM,OAAOC,SAAS,GAAAO,OAAGpB,KAAK8B,MAAK,WACnE,eAAgB1B,OAAOC,QAAQC,MAAMM,OAAOC,SAAS,GAAAO,OAAGpB,KAAK8B,MAAK,UAClE,eAAgB1B,OAAOC,QAAQC,MAAMM,OAAOC,SAAS,GAAAO,OAAGpB,KAAK8B,MAAK,W,EAItEjC,EAAAC,UAAAiC,QAAA,WACE,IAAK/B,KAAKgC,SAAU,MAAO,GAC3B,IAAMC,EAAWjC,KAAKqB,OAAS,QAAU,GAAKrB,KAAKqB,OAAS,SAAW,GAAK,GAC5E,IAAMS,EAAQ9B,KAAKkC,iBACnB,OAAOC,EAAA,aAAWC,KAAMpC,KAAKgC,SAAUK,QAASrC,KAAKqC,QAAShB,KAAMY,EAAUH,MAAOA,G,EAGvFjC,EAAAC,UAAAoC,eAAA,WACE,OAAOlC,KAAK0B,SACR,eACA1B,KAAKyB,YAAc,QACjB,gBACA,GAAAL,OAAGpB,KAAK8B,MAAK,Q,EAGrBjC,EAAAC,UAAAwC,YAAA,SAAYC,GACV,GAAIvC,KAAK0B,UAAY1B,KAAK2B,UAAWY,EAAEC,gB,EAGzC3C,EAAAC,UAAA2C,OAAA,eAAAC,EAAA1C,KACE,OACEmC,EAACQ,KAAI,KACH3C,KAAK4C,KACLT,EAAA,KAAGS,KAAM5C,KAAK0B,SAAW,GAAK1B,KAAK4C,KACjCC,OAAQ7C,KAAK6C,OACbC,MAAO9C,KAAKkB,aACZ6B,MAAO/C,KAAKS,OACZuC,QAAS,SAACT,GAAM,OAAAG,EAAKJ,YAAYC,EAAjB,GAChBJ,EAAA,QAAMW,MAAM,oBACR9C,KAAK+B,UACPI,EAAA,QAAMW,MAAO,CAACG,MAAO,KAAMC,SAAUlD,KAAKyB,YAAc,UAAUU,EAAA,eAEpEA,EAAA,sBAAoBd,KAAMrB,KAAKqB,KAAMS,MAAO9B,KAAKkC,oBAGnDC,EAAA,UAAQW,MAAO9C,KAAKkB,aAClB6B,MAAO/C,KAAKS,OACZiB,SAAU1B,KAAK0B,UAAY,KAC3BsB,QAAS,SAACT,GAAM,OAAAG,EAAKJ,YAAYC,EAAjB,GAChBJ,EAAA,QAAMW,MAAM,oBACR9C,KAAK+B,UACPI,EAAA,QAAMW,MAAO,CAACG,MAAO,KAAMC,SAAUlD,KAAKyB,YAAc,UAAUU,EAAA,eAEpEA,EAAA,sBAAoBd,KAAMrB,KAAKqB,KAAMS,MAAO9B,KAAKkC,oB,wIA9I1B,G"}