npm - @scania/tegel - Versions diffs - 0.0.33 → 0.0.34 - Mend

@scania/tegel 0.0.33 → 0.0.34

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

package/dist/components/sdds-accordion-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-accordion-item.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,g8LAAg8L;;MCO58L,aAAa;;;;;;kBAEC,EAAE;8BAGmB,KAAK;oBAGvB,KAAK;oBAGL,KAAK;wBAGD,KAAK;;EAWrC,aAAa;IACX,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACrC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;UACP,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;SAChC,IAEC,cACE,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,EAC5B,KAAK,EAAE,8BAA8B,IAAI,CAAC,kBAAkB,EAAE,EAC9D,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,MAAM,CAAO,EACrD,WAAK,KAAK,EAAC,qBAAqB,IAC9B,iBAAW,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CACnD,CACC,EACT,WACE,KAAK,EAAE;cACL,IAAI,CAAC,YAAY,GAAG,sCAAsC,GAAG,EAAE;aAChE,IAED,eAAa,CACT,CACF,CACD,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/accordion/accordion-item/accordion-item.scss?tag=sdds-accordion-item&encapsulation=shadow","./src/components/accordion/accordion-item/accordion-item.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/disabled-style';\n@import '../../../mixins/box-sizing';\n\n.sdds-accordion-item {\n @include sdds-box-sizing;\n\n list-style: none;\n color: var(--sdds-accordion-color);\n position: relative;\n\n button.sdds-accordion-header-icon-start,\n button.sdds-accordion-header-icon-end {\n all: unset;\n }\n\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end,\n button.sdds-accordion-header-icon-start,\n button.sdds-accordion-header-icon-end {\n @include sdds-box-sizing;\n\n cursor: pointer;\n display: flex;\n align-items: center;\n width: 100%;\n\n // fixme: wrong line-height compared to production\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n padding: var(--sdds-spacing-element-16);\n background-color: var(--sdds-accordion-background);\n\n .sdds-accordion-icon {\n transform-origin: center;\n transition: transform 0.15s ease-in-out;\n color: var(--sdds-accordion-color);\n\n & > sdds-icon {\n display: block;\n }\n }\n }\n\n .sdds-accordion-title {\n flex-grow: 2;\n }\n\n .sdds-accordion-panel {\n cursor: default;\n padding: var(--sdds-spacing-element-8) var(--sdds-spacing-layout-64)\n var(--sdds-spacing-element-32) var(--sdds-spacing-element-16);\n display: none;\n font: var(--sdds-detail-03);\n letter-spacing: var(--sdds-detail-03-ls);\n\n p {\n margin: 0;\n padding: 0;\n }\n\n &--padding-reset {\n padding-right: var(--sdds-spacing-element-16);\n }\n }\n\n .sdds-accordion-header-icon-end {\n .sdds-accordion-icon {\n margin: 0 0 0 var(--sdds-spacing-element-32);\n }\n }\n\n .sdds-accordion-header-icon-start {\n .sdds-accordion-title {\n order: 1;\n }\n\n .sdds-accordion-icon {\n order: 0;\n margin: 0 var(--sdds-spacing-element-16) 0 0;\n }\n }\n\n &.disabled {\n &,\n .sdds-accordion-header-icon-end,\n .sdds-accordion-header-icon-start,\n .sdds-accordion-panel {\n color: var(--sdds-accordion-color-disabled);\n cursor: not-allowed;\n\n .sdds-accordion-icon {\n color: var(--sdds-accordion-color-disabled);\n }\n }\n\n &:hover,\n &:focus,\n &:active,\n &.active {\n @include disabledStyle;\n }\n }\n\n &.expanded {\n .sdds-accordion-panel {\n display: block;\n padding-bottom: 31px;\n }\n\n .sdds-accordion-icon {\n transform: rotate(180deg);\n }\n\n .sdds-accordion-header-icon-end {\n .sdds-accordion-icon {\n margin-right: 0;\n margin-left: var(--sdds-spacing-element-32);\n }\n }\n\n .sdds-accordion-header-icon-start {\n .sdds-accordion-icon {\n margin-left: 0;\n margin-right: var(--sdds-spacing-element-16);\n }\n }\n }\n\n border-top: 1px solid var(--sdds-accordion-border);\n\n &:focus {\n border-top: 1px solid var(--sdds-accordion-border-focus);\n }\n\n &[disabled='true']:focus {\n border-color: var(--sdds-accordion-border);\n }\n}\n\n:host(:focus) {\n .sdds-accordion-item {\n @include sdds-focus-state;\n\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n background-color: var(--sdds-accordion-background-focus);\n outline: none;\n }\n }\n}\n\n:host(:hover) {\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n background-color: var(--sdds-accordion-background-hover);\n }\n}\n\n:host(:active) {\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n background-color: var(--sdds-accordion-background-active);\n outline: none;\n }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-accordion-item',\n styleUrl: 'accordion-item.scss',\n shadow: true,\n})\nexport class AccordionItem {\n /** The header gives users the context about the additional information available inside the panel /\n @Prop() header: string = '';\n\n /* Changes where the expand icon is placed. /\n @Prop() expandIconPosition: 'start' \| 'end' = 'end';\n\n /* Disabled option in `boolean`. /\n @Prop() disabled: boolean = false;\n\n /* Set to true to expand panel open /\n @Prop() expanded: boolean = false;\n\n /* When true 16px on right padding instead of 64px /\n @Prop() paddingReset: boolean = false;\n\n /* Fires after the accordion item is closed or opened, emitting the value (as boolean) of the current state of the accordion */\n @Event({\n eventName: 'sddsToggle',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsToggle: EventEmitter<boolean>;\n\n openAccordion() {\n this.expanded = !this.expanded;\n this.sddsToggle.emit(this.expanded);\n }\n\n render() {\n return (\n <Host>\n <div\n class={`sdds-accordion-item\n ${this.disabled ? 'disabled' : ''}\n ${this.expanded ? 'expanded' : ''}\n `}\n >\n <button\n type=\"button\"\n aria-expanded={this.expanded}\n class={`sdds-accordion-header-icon-${this.expandIconPosition}`}\n onClick={() => this.openAccordion()}\n disabled={this.disabled}\n >\n <div class=\"sdds-accordion-title\">{this.header}</div>\n <div class=\"sdds-accordion-icon\">\n <sdds-icon name=\"chevron_down\" size=\"16px\"></sdds-icon>\n </div>\n </button>\n <div\n class={`sdds-accordion-panel\n ${this.paddingReset ? 'sdds-accordion-panel--padding-reset ' : ''}\n `}\n >\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-accordion-item.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,g8LAAg8L;;MCO58L,aAAa;;;;;;kBAEC,EAAE;8BAGmB,KAAK;oBAGvB,KAAK;oBAGL,KAAK;wBAGD,KAAK;;EAWrC,aAAa;IACX,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACrC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;UACP,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;SAChC,IAEC,cACE,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,EAC5B,KAAK,EAAE,8BAA8B,IAAI,CAAC,kBAAkB,EAAE,EAC9D,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,MAAM,CAAO,EACrD,WAAK,KAAK,EAAC,qBAAqB,IAC9B,iBAAW,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CACnD,CACC,EACT,WACE,KAAK,EAAE;cACL,IAAI,CAAC,YAAY,GAAG,sCAAsC,GAAG,EAAE;aAChE,IAED,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/accordion/accordion-item/accordion-item.scss?tag=sdds-accordion-item&encapsulation=shadow","./src/components/accordion/accordion-item/accordion-item.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/disabled-style';\n@import '../../../mixins/box-sizing';\n\n.sdds-accordion-item {\n @include sdds-box-sizing;\n\n list-style: none;\n color: var(--sdds-accordion-color);\n position: relative;\n\n button.sdds-accordion-header-icon-start,\n button.sdds-accordion-header-icon-end {\n all: unset;\n }\n\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end,\n button.sdds-accordion-header-icon-start,\n button.sdds-accordion-header-icon-end {\n @include sdds-box-sizing;\n\n cursor: pointer;\n display: flex;\n align-items: center;\n width: 100%;\n\n // fixme: wrong line-height compared to production\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n padding: var(--sdds-spacing-element-16);\n background-color: var(--sdds-accordion-background);\n\n .sdds-accordion-icon {\n transform-origin: center;\n transition: transform 0.15s ease-in-out;\n color: var(--sdds-accordion-color);\n\n & > sdds-icon {\n display: block;\n }\n }\n }\n\n .sdds-accordion-title {\n flex-grow: 2;\n }\n\n .sdds-accordion-panel {\n cursor: default;\n padding: var(--sdds-spacing-element-8) var(--sdds-spacing-layout-64)\n var(--sdds-spacing-element-32) var(--sdds-spacing-element-16);\n display: none;\n font: var(--sdds-detail-03);\n letter-spacing: var(--sdds-detail-03-ls);\n\n p {\n margin: 0;\n padding: 0;\n }\n\n &--padding-reset {\n padding-right: var(--sdds-spacing-element-16);\n }\n }\n\n .sdds-accordion-header-icon-end {\n .sdds-accordion-icon {\n margin: 0 0 0 var(--sdds-spacing-element-32);\n }\n }\n\n .sdds-accordion-header-icon-start {\n .sdds-accordion-title {\n order: 1;\n }\n\n .sdds-accordion-icon {\n order: 0;\n margin: 0 var(--sdds-spacing-element-16) 0 0;\n }\n }\n\n &.disabled {\n &,\n .sdds-accordion-header-icon-end,\n .sdds-accordion-header-icon-start,\n .sdds-accordion-panel {\n color: var(--sdds-accordion-color-disabled);\n cursor: not-allowed;\n\n .sdds-accordion-icon {\n color: var(--sdds-accordion-color-disabled);\n }\n }\n\n &:hover,\n &:focus,\n &:active,\n &.active {\n @include disabledStyle;\n }\n }\n\n &.expanded {\n .sdds-accordion-panel {\n display: block;\n padding-bottom: 31px;\n }\n\n .sdds-accordion-icon {\n transform: rotate(180deg);\n }\n\n .sdds-accordion-header-icon-end {\n .sdds-accordion-icon {\n margin-right: 0;\n margin-left: var(--sdds-spacing-element-32);\n }\n }\n\n .sdds-accordion-header-icon-start {\n .sdds-accordion-icon {\n margin-left: 0;\n margin-right: var(--sdds-spacing-element-16);\n }\n }\n }\n\n border-top: 1px solid var(--sdds-accordion-border);\n\n &:focus {\n border-top: 1px solid var(--sdds-accordion-border-focus);\n }\n\n &[disabled='true']:focus {\n border-color: var(--sdds-accordion-border);\n }\n}\n\n:host(:focus) {\n .sdds-accordion-item {\n @include sdds-focus-state;\n\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n background-color: var(--sdds-accordion-background-focus);\n outline: none;\n }\n }\n}\n\n:host(:hover) {\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n background-color: var(--sdds-accordion-background-hover);\n }\n}\n\n:host(:active) {\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n background-color: var(--sdds-accordion-background-active);\n outline: none;\n }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-accordion-item',\n styleUrl: 'accordion-item.scss',\n shadow: true,\n})\nexport class AccordionItem {\n /** The header gives users the context about the additional information available inside the panel /\n @Prop() header: string = '';\n\n /* Changes where the expand icon is placed. /\n @Prop() expandIconPosition: 'start' \| 'end' = 'end';\n\n /* Disabled option in `boolean`. /\n @Prop() disabled: boolean = false;\n\n /* Set to true to expand panel open /\n @Prop() expanded: boolean = false;\n\n /* When true 16px on right padding instead of 64px /\n @Prop() paddingReset: boolean = false;\n\n /* Fires after the accordion item is closed or opened, emitting the value (as boolean) of the current state of the accordion */\n @Event({\n eventName: 'sddsToggle',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsToggle: EventEmitter<boolean>;\n\n openAccordion() {\n this.expanded = !this.expanded;\n this.sddsToggle.emit(this.expanded);\n }\n\n render() {\n return (\n <Host>\n <div\n class={`sdds-accordion-item\n ${this.disabled ? 'disabled' : ''}\n ${this.expanded ? 'expanded' : ''}\n `}\n >\n <button\n type=\"button\"\n aria-expanded={this.expanded}\n class={`sdds-accordion-header-icon-${this.expandIconPosition}`}\n onClick={() => this.openAccordion()}\n disabled={this.disabled}\n >\n <div class=\"sdds-accordion-title\">{this.header}</div>\n <div class=\"sdds-accordion-icon\">\n <sdds-icon name=\"chevron_down\" size=\"16px\"></sdds-icon>\n </div>\n </button>\n <div\n class={`sdds-accordion-panel\n ${this.paddingReset ? 'sdds-accordion-panel--padding-reset ' : ''}\n `}\n >\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-accordion.js CHANGED Viewed

@@ -31,7 +31,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const SddsAccordion = Accordion;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-accordion.js","mappings":";;AAAA,MAAM,YAAY,GAAG,grDAAgrD;;MCOxrD,SAAS;;;;;mBAEO,IAAI;uBAGgB,IAAI;;EAEnD,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE,kBAAkB,IAAI,CAAC,OAAO,GAAG,wBAAwB,GAAG,EAAE,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IAElJ,eAAa,CACR,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/accordion/accordion.scss?tag=sdds-accordion&encapsulation=shadow","./src/components/accordion/accordion.tsx"],"sourcesContent":["@import '../../mixins/focus-state';\n@import '../../mixins/disabled-style';\n@import '../../mixins/box-sizing';\n\n:host {\n display: block;\n @include sdds-box-sizing;\n\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n position: relative;\n }\n}\n\n:host(:focus) {\n @include sdds-focus-state;\n\n .sdds-accordion-item {\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n background-color: var(--sdds-accordion-background-focus);\n outline: none;\n\n &::after {\n border-color: var(--sdds-accordion-border-focus);\n }\n }\n }\n\n .disabled {\n @include disabledStyle;\n }\n}\n\n:host(:active) {\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n background-color: var(--sdds-accordion-background-active);\n outline: none;\n }\n\n .disabled {\n @include disabledStyle;\n }\n}\n\n:host(:last-child) {\n border-bottom: 1px solid var(--sdds-accordion-border);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-accordion',\n styleUrl: 'accordion.scss',\n shadow: true,\n})\nexport class Accordion {\n /** Enable or disable divider lines between items /\n @Prop() divider: boolean = true;\n\n /* Set the variant of the the accordion. */\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n render() {\n return (\n <Host\n class={`sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-accordion.js","mappings":";;AAAA,MAAM,YAAY,GAAG,grDAAgrD;;MCOxrD,SAAS;;;;;mBAEO,IAAI;uBAGgB,IAAI;;EAEnD,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE,kBAAkB,IAAI,CAAC,OAAO,GAAG,wBAAwB,GAAG,EAAE,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IAElJ,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/accordion/accordion.scss?tag=sdds-accordion&encapsulation=shadow","./src/components/accordion/accordion.tsx"],"sourcesContent":["@import '../../mixins/focus-state';\n@import '../../mixins/disabled-style';\n@import '../../mixins/box-sizing';\n\n:host {\n display: block;\n @include sdds-box-sizing;\n\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n position: relative;\n }\n}\n\n:host(:focus) {\n @include sdds-focus-state;\n\n .sdds-accordion-item {\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n background-color: var(--sdds-accordion-background-focus);\n outline: none;\n\n &::after {\n border-color: var(--sdds-accordion-border-focus);\n }\n }\n }\n\n .disabled {\n @include disabledStyle;\n }\n}\n\n:host(:active) {\n .sdds-accordion-header-icon-start,\n .sdds-accordion-header-icon-end {\n background-color: var(--sdds-accordion-background-active);\n outline: none;\n }\n\n .disabled {\n @include disabledStyle;\n }\n}\n\n:host(:last-child) {\n border-bottom: 1px solid var(--sdds-accordion-border);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-accordion',\n styleUrl: 'accordion.scss',\n shadow: true,\n})\nexport class Accordion {\n /** Enable or disable divider lines between items /\n @Prop() divider: boolean = true;\n\n /* Set the variant of the the accordion. */\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n render() {\n return (\n <Host\n class={`sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-badges.js CHANGED Viewed

@@ -68,7 +68,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const SddsBadges = SddsBadges$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-badges.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-badges.js","mappings":";;AAAA,MAAM,SAAS,GAAG,gsBAAgsB;;MCOrsBA,YAAU;;;;;iBAEG,EAAE;kBAIA,KAAK;mBAGJ,KAAK;gBAGJ,IAAI;iBAEP,EAAE;gBAEH,EAAE;;EAK1B,UAAU;IACR,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,EAAE,CAAC;IAClB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,OAAO,CAAC,IAAI,CAAC,qDAAqD,CAAC,CAAC;KACrE;GACF;EAED,UAAU;IACR,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE;MACtD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,MAAM,GAAG,EAAE,CAAC;MAC7D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,KAAK,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC;KACrF;SAAM;;MAEL,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;UACnC,OAAO,CAAC,IAAI,CACV,+EAA+E,CAChF;UACD,EAAE,CAAC;KACR;GACF;EAED,MAAM;IACJ,QACE,YACE,KAAK,EAAE,2BAA2B,IAAI,CAAC,IAAI,IACzC,IAAI,CAAC,KAAK,KAAK,MAAM,GAAG,kBAAkB,GAAG,EAC/C,IAAI,IAAI,CAAC,MAAM,GAAG,oBAAoB,GAAG,EAAE,EAAE,IAE7C,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAO,CAC1C,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["SddsBadges"],"sources":["./src/components/badge/badges.scss?tag=sdds-badges&encapsulation=shadow","./src/components/badge/badges.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n// This component does not have dark version so all css is in this file\n\n:host {\n // Variables\n --sdds-badges-background-color: var(--sdds-negative);\n --sdds-badges-color-text: var(--sdds-white);\n\n // Styling\n @include sdds-box-sizing;\n\n display: block;\n}\n\n.sdds-badges {\n display: block;\n border-radius: 12px;\n background-color: var(--sdds-badges-background-color);\n text-align: center;\n\n &.sdds-badges-sm {\n height: 8px;\n width: 8px;\n line-height: 8px;\n }\n\n &.sdds-badges-lg {\n height: 20px;\n line-height: 20px;\n width: 20px;\n }\n\n &.sdds-badges-pill {\n display: inline-block;\n width: unset;\n padding-left: 8px;\n padding-right: 8px;\n }\n\n &.sdds-badges-hidden {\n display: none;\n }\n}\n\n.sdds-badges-text {\n font-family: var(--sdds-font-family-semi-condensed-bold);\n font-size: 12px;\n color: var(--sdds-badges-color-text);\n font-weight: bold;\n}\n","import { Component, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n tag: 'sdds-badges',\n styleUrl: 'badges.scss',\n shadow: true,\n})\nexport class SddsBadges {\n /** Value shown in badge /\n @Prop() value: string = '';\n // TODO: Make upper prop accepts numbers too ?\n\n /* Changes visibility of badge /\n @Prop() hidden: boolean = false;\n\n /* @deprecated Use size prop instead. Changes badge from large to small size /\n @Prop() isSmall: boolean = false;\n\n /* Sets component size. */\n @Prop() size: 'lg' \| 'sm' = 'lg';\n\n @State() shape: string = '';\n\n @State() text: string = '';\n\n @Watch('value')\n @Watch('isSmall')\n @Watch('size')\n watchProps() {\n this.checkProps();\n }\n\n componentWillLoad() {\n this.checkProps();\n if (this.isSmall) {\n this.size = 'sm';\n console.warn('Prop isSmall is deprecated. Use size\"small\" instead');\n }\n }\n\n checkProps() {\n const valueAsNumber = parseInt(this.value);\n if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {\n this.shape = this.value.toString().length >= 2 ? 'pill' : '';\n this.size = 'lg';\n this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();\n } else {\n // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions\n this.value !== '' && this.size !== 'sm'\n ? console.warn(\n 'The provided value is either empty or string, please provide value as number.',\n )\n : '';\n }\n }\n\n render() {\n return (\n <host\n class={`sdds-badges sdds-badges-${this.size} ${\n this.shape === 'pill' ? 'sdds-badges-pill' : ''\n } ${this.hidden ? 'sdds-badges-hidden' : ''}`}\n >\n <div class=\"sdds-badges-text\">{this.text}</div>\n </host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-badges.js","mappings":";;AAAA,MAAM,SAAS,GAAG,gsBAAgsB;;MCOrsBA,YAAU;;;;;iBAEG,EAAE;kBAIA,KAAK;mBAGJ,KAAK;gBAGJ,IAAI;iBAEP,EAAE;gBAEH,EAAE;;EAK1B,UAAU;IACR,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,EAAE,CAAC;IAClB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,OAAO,CAAC,IAAI,CAAC,qDAAqD,CAAC,CAAC;KACrE;GACF;EAED,UAAU;IACR,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE;MACtD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,MAAM,GAAG,EAAE,CAAC;MAC7D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,KAAK,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC;KACrF;SAAM;;MAEL,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;UACnC,OAAO,CAAC,IAAI,CACV,+EAA+E,CAChF;UACD,EAAE,CAAC;KACR;GACF;EAED,MAAM;IACJ,QACE,YACE,KAAK,EAAE,2BAA2B,IAAI,CAAC,IAAI,IACzC,IAAI,CAAC,KAAK,KAAK,MAAM,GAAG,kBAAkB,GAAG,EAC/C,IAAI,IAAI,CAAC,MAAM,GAAG,oBAAoB,GAAG,EAAE,EAAE,IAE7C,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAO,CAC1C,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsBadges"],"sources":["./src/components/badge/badges.scss?tag=sdds-badges&encapsulation=shadow","./src/components/badge/badges.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n// This component does not have dark version so all css is in this file\n\n:host {\n // Variables\n --sdds-badges-background-color: var(--sdds-negative);\n --sdds-badges-color-text: var(--sdds-white);\n\n // Styling\n @include sdds-box-sizing;\n\n display: block;\n}\n\n.sdds-badges {\n display: block;\n border-radius: 12px;\n background-color: var(--sdds-badges-background-color);\n text-align: center;\n\n &.sdds-badges-sm {\n height: 8px;\n width: 8px;\n line-height: 8px;\n }\n\n &.sdds-badges-lg {\n height: 20px;\n line-height: 20px;\n width: 20px;\n }\n\n &.sdds-badges-pill {\n display: inline-block;\n width: unset;\n padding-left: 8px;\n padding-right: 8px;\n }\n\n &.sdds-badges-hidden {\n display: none;\n }\n}\n\n.sdds-badges-text {\n font-family: var(--sdds-font-family-semi-condensed-bold);\n font-size: 12px;\n color: var(--sdds-badges-color-text);\n font-weight: bold;\n}\n","import { Component, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n tag: 'sdds-badges',\n styleUrl: 'badges.scss',\n shadow: true,\n})\nexport class SddsBadges {\n /** Value shown in badge /\n @Prop() value: string = '';\n // TODO: Make upper prop accepts numbers too ?\n\n /* Changes visibility of badge /\n @Prop() hidden: boolean = false;\n\n /* @deprecated Use size prop instead. Changes badge from large to small size /\n @Prop() isSmall: boolean = false;\n\n /* Sets component size. */\n @Prop() size: 'lg' \| 'sm' = 'lg';\n\n @State() shape: string = '';\n\n @State() text: string = '';\n\n @Watch('value')\n @Watch('isSmall')\n @Watch('size')\n watchProps() {\n this.checkProps();\n }\n\n componentWillLoad() {\n this.checkProps();\n if (this.isSmall) {\n this.size = 'sm';\n console.warn('Prop isSmall is deprecated. Use size\"small\" instead');\n }\n }\n\n checkProps() {\n const valueAsNumber = parseInt(this.value);\n if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {\n this.shape = this.value.toString().length >= 2 ? 'pill' : '';\n this.size = 'lg';\n this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();\n } else {\n // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions\n this.value !== '' && this.size !== 'sm'\n ? console.warn(\n 'The provided value is either empty or string, please provide value as number.',\n )\n : '';\n }\n }\n\n render() {\n return (\n <host\n class={`sdds-badges sdds-badges-${this.size} ${\n this.shape === 'pill' ? 'sdds-badges-pill' : ''\n } ${this.hidden ? 'sdds-badges-hidden' : ''}`}\n >\n <div class=\"sdds-badges-text\">{this.text}</div>\n </host>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-banner.js CHANGED Viewed

@@ -112,7 +112,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const SddsBanner = SddsBanner$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-banner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-banner.js","mappings":"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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["SddsBanner"],"sources":["./src/components/banner/sdds-banner.scss?tag=sdds-banner&encapsulation=shadow","./src/components/banner/sdds-banner.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import '../../mixins/box-sizing';\n@import '../link/link-theme-vars.scss';\n\n:host(.hide) {\n display: none;\n visibility: hidden;\n}\n\n:host(.error) {\n background-color: var(--sdds-banner-background-error);\n}\n\n:host(.information) {\n background-color: var(--sdds-banner-background-info);\n}\n\n:host {\n display: flex;\n background-color: var(--sdds-banner-background-default);\n z-index: z(banner);\n\n .banner-icon {\n padding-left: 20px;\n padding-top: 14px;\n padding-right: 12px;\n color: var(--sdds-banner-prefix-default-color);\n\n &.error {\n color: var(--sdds-banner-prefix-error-color);\n }\n\n &.information {\n color: var(--sdds-banner-prefix-info-color);\n }\n }\n\n .banner-content {\n color: var(--sdds-banner-text-color);\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n padding: 16px 0;\n\n &.no-icon {\n padding-left: 16px;\n }\n\n .banner-header {\n font: var(--sdds-headline-06);\n letter-spacing: var(--sdds-headline-06-ls);\n }\n\n .banner-subheader {\n margin-top: 4px;\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n }\n\n sdds-link {\n width: fit-content;\n margin-top: 16px;\n }\n }\n\n .banner-close {\n color: var(--sdds-banner-x-color);\n\n button {\n padding-right: 16px;\n padding-top: 14px;\n background-color: transparent;\n border: none;\n\n &:hover {\n cursor: pointer;\n }\n\n &:focus {\n outline: none;\n\n sdds-icon {\n outline: 2px solid var(--sdds-link-focus);\n }\n }\n }\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-banner',\n styleUrl: 'sdds-banner.scss',\n shadow: true,\n})\nexport class SddsBanner {\n /** Name of the icon for the component. For error and information type the icon is predefined. /\n @Prop() icon: string;\n\n /* Header text. /\n @Prop() header: string;\n\n /* Subheader text. /\n @Prop() subheader: string;\n\n /* Link text. /\n @Prop() linkText: string;\n\n /* Href for the link /\n @Prop() href: string;\n\n /* Where to open the linked URL /\n @Prop() linkTarget: '_self' \| '_blank' \| '_parent' \| '_top' = '_self';\n\n /* 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. /\n @Prop() linkRel: string = 'noopener';\n\n /* Type of banner /\n @Prop() type: 'error' \| 'information' \| 'none' = 'none';\n\n /* ID used for internal table functionality and events, must be unique.\n \n NOTE: If you're listening for banner close events you need to set this ID yourself to identify the banner, as the default ID is random and will be different every time.\n /\n @Prop() bannerId: string = crypto.randomUUID();\n\n /* Removes the close button on the banner. /\n @Prop() persistent: boolean = false;\n\n /* Hides the banner /\n @Prop() hidden = false;\n\n @Element() host: HostElement;\n\n /* Sends unique banner identifier when the close button is pressed. /\n @Event({\n eventName: 'sddsClose',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsClose: EventEmitter<{\n bannerId: string;\n hidden: boolean;\n }>;\n\n /* Hides the banner. /\n @Method()\n async hideBanner() {\n const sddsCloseEvent = this.sddsClose.emit({\n bannerId: this.bannerId,\n hidden: this.hidden,\n });\n if (!sddsCloseEvent.defaultPrevented) {\n this.hidden = true;\n }\n return {\n bannerId: this.bannerId,\n hidden: true,\n };\n }\n\n /* Shows the banner */\n @Method()\n async showBanner() {\n const sddsCloseEvent = this.sddsClose.emit({\n bannerId: this.bannerId,\n hidden: this.hidden,\n });\n if (!sddsCloseEvent.defaultPrevented) {\n this.hidden = false;\n }\n return {\n bannerId: this.bannerId,\n hidden: false,\n };\n }\n\n connectedCallback() {\n if (this.type === 'error') {\n this.icon = 'error';\n } else if (this.type === 'information') {\n this.icon = 'info';\n }\n }\n\n handleClose = () => {\n const sddsCloseEvent = this.sddsClose.emit({\n bannerId: this.bannerId,\n hidden: this.hidden,\n });\n if (!sddsCloseEvent.defaultPrevented) {\n this.hidden = true;\n }\n };\n\n render() {\n return (\n <Host\n role=\"banner\"\n aria-hidden={`${this.hidden}`}\n aria-live={\n this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite'\n }\n aria-atomic={this.host.getAttribute('aria-atomic')}\n class={`${this.type} ${this.hidden ? 'hide' : 'show'}`}\n >\n {this.icon && (\n <div class={`banner-icon ${this.type}`}>\n <sdds-icon name={this.icon} size=\"20px\"></sdds-icon>\n </div>\n )}\n <div class={`banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}`}>\n {this.header && <span class={`banner-header`}>{this.header}</span>}\n {this.subheader && <span class={`banner-subheader`}>{this.subheader}</span>}\n {this.linkText && this.href && (\n <sdds-link link-href={this.href} rel={this.linkRel} link-target={this.linkTarget}>\n {this.linkText}\n </sdds-link>\n )}\n </div>\n {!this.persistent && (\n <div class={`banner-close`}>\n <button\n onClick={() => {\n this.handleClose();\n }}\n >\n <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n </button>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-banner.js","mappings":"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","names":["SddsBanner"],"sources":["./src/components/banner/sdds-banner.scss?tag=sdds-banner&encapsulation=shadow","./src/components/banner/sdds-banner.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import '../../mixins/box-sizing';\n@import '../link/link-theme-vars.scss';\n\n:host(.hide) {\n display: none;\n visibility: hidden;\n}\n\n:host(.error) {\n background-color: var(--sdds-banner-background-error);\n}\n\n:host(.information) {\n background-color: var(--sdds-banner-background-info);\n}\n\n:host {\n display: flex;\n background-color: var(--sdds-banner-background-default);\n z-index: z(banner);\n\n .banner-icon {\n padding-left: 20px;\n padding-top: 14px;\n padding-right: 12px;\n color: var(--sdds-banner-prefix-default-color);\n\n &.error {\n color: var(--sdds-banner-prefix-error-color);\n }\n\n &.information {\n color: var(--sdds-banner-prefix-info-color);\n }\n }\n\n .banner-content {\n color: var(--sdds-banner-text-color);\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n padding: 16px 0;\n\n &.no-icon {\n padding-left: 16px;\n }\n\n .banner-header {\n font: var(--sdds-headline-06);\n letter-spacing: var(--sdds-headline-06-ls);\n }\n\n .banner-subheader {\n margin-top: 4px;\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n }\n\n sdds-link {\n width: fit-content;\n margin-top: 16px;\n }\n }\n\n .banner-close {\n color: var(--sdds-banner-x-color);\n\n button {\n padding-right: 16px;\n padding-top: 14px;\n background-color: transparent;\n border: none;\n\n &:hover {\n cursor: pointer;\n }\n\n &:focus {\n outline: none;\n\n sdds-icon {\n outline: 2px solid var(--sdds-link-focus);\n }\n }\n }\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-banner',\n styleUrl: 'sdds-banner.scss',\n shadow: true,\n})\nexport class SddsBanner {\n /** Name of the icon for the component. For error and information type the icon is predefined. /\n @Prop() icon: string;\n\n /* Header text. /\n @Prop() header: string;\n\n /* Subheader text. /\n @Prop() subheader: string;\n\n /* Link text. /\n @Prop() linkText: string;\n\n /* Href for the link /\n @Prop() href: string;\n\n /* Where to open the linked URL /\n @Prop() linkTarget: '_self' \| '_blank' \| '_parent' \| '_top' = '_self';\n\n /* 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. /\n @Prop() linkRel: string = 'noopener';\n\n /* Type of banner /\n @Prop() type: 'error' \| 'information' \| 'none' = 'none';\n\n /* ID used for internal table functionality and events, must be unique.\n \n NOTE: If you're listening for banner close events you need to set this ID yourself to identify the banner, as the default ID is random and will be different every time.\n /\n @Prop() bannerId: string = crypto.randomUUID();\n\n /* Removes the close button on the banner. /\n @Prop() persistent: boolean = false;\n\n /* Hides the banner /\n @Prop() hidden = false;\n\n @Element() host: HostElement;\n\n /* Sends unique banner identifier when the close button is pressed. /\n @Event({\n eventName: 'sddsClose',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsClose: EventEmitter<{\n bannerId: string;\n hidden: boolean;\n }>;\n\n /* Hides the banner. /\n @Method()\n async hideBanner() {\n const sddsCloseEvent = this.sddsClose.emit({\n bannerId: this.bannerId,\n hidden: this.hidden,\n });\n if (!sddsCloseEvent.defaultPrevented) {\n this.hidden = true;\n }\n return {\n bannerId: this.bannerId,\n hidden: true,\n };\n }\n\n /* Shows the banner */\n @Method()\n async showBanner() {\n const sddsCloseEvent = this.sddsClose.emit({\n bannerId: this.bannerId,\n hidden: this.hidden,\n });\n if (!sddsCloseEvent.defaultPrevented) {\n this.hidden = false;\n }\n return {\n bannerId: this.bannerId,\n hidden: false,\n };\n }\n\n connectedCallback() {\n if (this.type === 'error') {\n this.icon = 'error';\n } else if (this.type === 'information') {\n this.icon = 'info';\n }\n }\n\n handleClose = () => {\n const sddsCloseEvent = this.sddsClose.emit({\n bannerId: this.bannerId,\n hidden: this.hidden,\n });\n if (!sddsCloseEvent.defaultPrevented) {\n this.hidden = true;\n }\n };\n\n render() {\n return (\n <Host\n role=\"banner\"\n aria-hidden={`${this.hidden}`}\n aria-live={\n this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite'\n }\n aria-atomic={this.host.getAttribute('aria-atomic')}\n class={`${this.type} ${this.hidden ? 'hide' : 'show'}`}\n >\n {this.icon && (\n <div class={`banner-icon ${this.type}`}>\n <sdds-icon name={this.icon} size=\"20px\"></sdds-icon>\n </div>\n )}\n <div class={`banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}`}>\n {this.header && <span class={`banner-header`}>{this.header}</span>}\n {this.subheader && <span class={`banner-subheader`}>{this.subheader}</span>}\n {this.linkText && this.href && (\n <sdds-link link-href={this.href} rel={this.linkRel} link-target={this.linkTarget}>\n {this.linkText}\n </sdds-link>\n )}\n </div>\n {!this.persistent && (\n <div class={`banner-close`}>\n <button\n onClick={() => {\n this.handleClose();\n }}\n >\n <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n </button>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-block.js CHANGED Viewed

@@ -41,7 +41,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const SddsBlock = SddsBlock$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-block.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-block.js","mappings":";;AAAA,MAAM,YAAY,GAAG,wlBAAwlB;;MCQhmBA,WAAS;;;;;uBAE2B,IAAI;;EAMnD,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CACnD,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,KAAK,YAAY,CACd,CAAC;IAC5B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI;MACzB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACrB,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;OAChD;WAAM;QACL,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,KAAK,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,CAAC;OAC7F;KACF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,WACE,KAAK,EAAE,2BAA2B,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IAE3G,eAAa,CACT,EACN;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["SddsBlock"],"sources":["./src/components/block/sdds-block.scss?tag=sdds-block&encapsulation=shadow","./src/components/block/sdds-block.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n.sdds-block-webcomponent {\n @include sdds-box-sizing;\n\n color: var(--sdds-block-color);\n border-radius: 4px;\n padding: 16px;\n font: var(--sdds-body-01);\n letter-spacing: var(--sdds-body-01-ls);\n background-color: var(--sdds-block-background);\n\n}\n.sdds-mode-variant-primary {\n --sdds-block-background: var(--sdds-block-background-primary);\n --sdds-block-background-nested: var(--sdds-block-background-nested-primary);\n}\n.sdds-mode-variant-secondary {\n --sdds-block-background: var(--sdds-block-background-secondary);\n --sdds-block-background-nested: var(--sdds-block-background-nested-secondary);\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-block',\n styleUrl: 'sdds-block.scss',\n shadow: true,\n})\nexport class SddsBlock {\n /** Mode variant of the component, based on current mode. */\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n @Element() host: HostElement;\n\n children: Array<HTMLSddsBlockElement>;\n\n connectedCallback() {\n this.children = Array.from(this.host.children).filter(\n (item) => item.tagName === 'SDDS-BLOCK',\n ) as HTMLSddsBlockElement[];\n this.children.forEach((item) => {\n if (!this.modeVariant) {\n item.setAttribute('mode-variant', 'secondary');\n } else {\n item.setAttribute('mode-variant', this.modeVariant === 'primary' ? 'secondary' : 'primary');\n }\n });\n }\n\n render() {\n return (\n <div\n class={`sdds-block-webcomponent ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n >\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-block.js","mappings":";;AAAA,MAAM,YAAY,GAAG,wlBAAwlB;;MCQhmBA,WAAS;;;;;uBAE2B,IAAI;;EAMnD,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CACnD,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,KAAK,YAAY,CACd,CAAC;IAC5B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI;MACzB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACrB,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;OAChD;WAAM;QACL,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,KAAK,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,CAAC;OAC7F;KACF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,WACE,KAAK,EAAE,2BAA2B,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IAE3G,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsBlock"],"sources":["./src/components/block/sdds-block.scss?tag=sdds-block&encapsulation=shadow","./src/components/block/sdds-block.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n.sdds-block-webcomponent {\n @include sdds-box-sizing;\n\n color: var(--sdds-block-color);\n border-radius: 4px;\n padding: 16px;\n font: var(--sdds-body-01);\n letter-spacing: var(--sdds-body-01-ls);\n background-color: var(--sdds-block-background);\n\n}\n.sdds-mode-variant-primary {\n --sdds-block-background: var(--sdds-block-background-primary);\n --sdds-block-background-nested: var(--sdds-block-background-nested-primary);\n}\n.sdds-mode-variant-secondary {\n --sdds-block-background: var(--sdds-block-background-secondary);\n --sdds-block-background-nested: var(--sdds-block-background-nested-secondary);\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-block',\n styleUrl: 'sdds-block.scss',\n shadow: true,\n})\nexport class SddsBlock {\n /** Mode variant of the component, based on current mode. */\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n @Element() host: HostElement;\n\n children: Array<HTMLSddsBlockElement>;\n\n connectedCallback() {\n this.children = Array.from(this.host.children).filter(\n (item) => item.tagName === 'SDDS-BLOCK',\n ) as HTMLSddsBlockElement[];\n this.children.forEach((item) => {\n if (!this.modeVariant) {\n item.setAttribute('mode-variant', 'secondary');\n } else {\n item.setAttribute('mode-variant', this.modeVariant === 'primary' ? 'secondary' : 'primary');\n }\n });\n }\n\n render() {\n return (\n <div\n class={`sdds-block-webcomponent ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n >\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-breadcrumb-item.js CHANGED Viewed

@@ -36,7 +36,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const SddsBreadcrumbItem = SddsBreadcrumbItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-breadcrumb-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-breadcrumb-item.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0yBAA0yB;;MCOvzBA,oBAAkB;;;;;mBAEF,KAAK;;oBAMJ,KAAK;;EAEjC,MAAM;IACJ,QACE,UACE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,GAAG,8BAA8B,GAAG,EAAE;UAC1D,IAAI,CAAC,QAAQ,GAAG,+BAA+B,GAAG,EAAE,EAAE,IAExD,yBACgB,IAAI,CAAC,OAAO,IAAI,MAAM;;MAEpC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,IAAI,CAAC,IAAI,IAEtD,eAAa,CACX,CACD,EACL;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["SddsBreadcrumbItem"],"sources":["./src/components/breadcrumb/breadcrumb-item/breadcrumb-item.scss?tag=sdds-breadcrumb-item&encapsulation=shadow","./src/components/breadcrumb/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n\nli {\n display: flex;\n align-items: center;\n color: var(--sdds-breadcrumb-color);\n\n a {\n color: var(--sdds-breadcrumb-color);\n text-decoration: none;\n }\n\n &:hover {\n a {\n color: var(--sdds-breadcrumb-color-hover);\n text-decoration: underline;\n }\n\n cursor: pointer;\n }\n\n &.sdds-breadcrumb-item-disabled,\n &.sdds-breadcrumb-item-current,\n [aria-current='page'] {\n a {\n cursor: default;\n color: var(--sdds-breadcrumb-color-disabled);\n }\n\n &:hover {\n a {\n color: var(--sdds-breadcrumb-color-disabled);\n text-decoration: none;\n }\n }\n }\n\n a::after {\n content: '\\203A';\n color: var(--sdds-breadcrumb-separator-color);\n margin-right: 4px;\n margin-left: 4px;\n display: inline-block;\n width: 4px;\n height: 8px;\n }\n\n &:last-child {\n color: red;\n }\n}\n\n:host(.sdds-breadcrumb-item-last) {\n a::after {\n display: none;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n shadow: true,\n})\nexport class SddsBreadcrumbItem {\n /** Boolean for the current link /\n @Prop() current: boolean = false;\n\n /* Href for the link /\n @Prop() href: string;\n\n /* Toggle the disabled state for the breadcrumb */\n @Prop() disabled: boolean = false;\n\n render() {\n return (\n <li\n class={`${this.current ? 'sdds-breadcrumb-item-current' : ''} \n ${this.disabled ? 'sdds-breadcrumb-item-disabled' : ''}`}\n >\n <a\n aria-current={this.current && 'page'}\n // eslint-disable-next-line no-script-url\n href={this.disabled ? 'javascript:void(0)' : this.href}\n >\n <slot></slot>\n </a>\n </li>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-breadcrumb-item.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0yBAA0yB;;MCOvzBA,oBAAkB;;;;;mBAEF,KAAK;;oBAMJ,KAAK;;EAEjC,MAAM;IACJ,QACE,UACE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,GAAG,8BAA8B,GAAG,EAAE;UAC1D,IAAI,CAAC,QAAQ,GAAG,+BAA+B,GAAG,EAAE,EAAE,IAExD,yBACgB,IAAI,CAAC,OAAO,IAAI,MAAM;;MAEpC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,IAAI,CAAC,IAAI,IAEtD,eAAa,CACX,CACD,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsBreadcrumbItem"],"sources":["./src/components/breadcrumb/breadcrumb-item/breadcrumb-item.scss?tag=sdds-breadcrumb-item&encapsulation=shadow","./src/components/breadcrumb/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n\nli {\n display: flex;\n align-items: center;\n color: var(--sdds-breadcrumb-color);\n\n a {\n color: var(--sdds-breadcrumb-color);\n text-decoration: none;\n }\n\n &:hover {\n a {\n color: var(--sdds-breadcrumb-color-hover);\n text-decoration: underline;\n }\n\n cursor: pointer;\n }\n\n &.sdds-breadcrumb-item-disabled,\n &.sdds-breadcrumb-item-current,\n [aria-current='page'] {\n a {\n cursor: default;\n color: var(--sdds-breadcrumb-color-disabled);\n }\n\n &:hover {\n a {\n color: var(--sdds-breadcrumb-color-disabled);\n text-decoration: none;\n }\n }\n }\n\n a::after {\n content: '\\203A';\n color: var(--sdds-breadcrumb-separator-color);\n margin-right: 4px;\n margin-left: 4px;\n display: inline-block;\n width: 4px;\n height: 8px;\n }\n\n &:last-child {\n color: red;\n }\n}\n\n:host(.sdds-breadcrumb-item-last) {\n a::after {\n display: none;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n shadow: true,\n})\nexport class SddsBreadcrumbItem {\n /** Boolean for the current link /\n @Prop() current: boolean = false;\n\n /* Href for the link /\n @Prop() href: string;\n\n /* Toggle the disabled state for the breadcrumb */\n @Prop() disabled: boolean = false;\n\n render() {\n return (\n <li\n class={`${this.current ? 'sdds-breadcrumb-item-current' : ''} \n ${this.disabled ? 'sdds-breadcrumb-item-disabled' : ''}`}\n >\n <a\n aria-current={this.current && 'page'}\n // eslint-disable-next-line no-script-url\n href={this.disabled ? 'javascript:void(0)' : this.href}\n >\n <slot></slot>\n </a>\n </li>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-breadcrumb.js CHANGED Viewed

@@ -30,7 +30,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const SddsBreadcrumb = SddsBreadcrumb$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-breadcrumb.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,4wBAA4wB;;MCO9xBA,gBAAc;;;;;;EAGzB,iBAAiB;IACf,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;GAC1F;EAED,MAAM;IACJ,QACE,eACE,UAAI,KAAK,EAAE,iBAAiB,IAC1B,eAAa,CACV,CACD,EACN;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["SddsBreadcrumb"],"sources":["./src/components/breadcrumb/breadcrumb-component.scss?tag=sdds-breadcrumb&encapsulation=shadow","./src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@import 'breadcrumb-theme-vars';\n@import '../../mixins/box-sizing';\n\nnav ol.sdds-breadcrumb {\n @include sdds-box-sizing;\n\n padding: 0;\n margin: 0;\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n display: flex;\n flex-wrap: wrap;\n list-style-type: none;\n}\n","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'sdds-breadcrumb',\n styleUrl: 'breadcrumb-component.scss',\n shadow: true,\n})\nexport class SddsBreadcrumb {\n @Element() el: HTMLElement;\n\n connectedCallback() {\n this.el.children[this.el.children.length - 1].classList.add('sdds-breadcrumb-item-last');\n }\n\n render() {\n return (\n <nav>\n <ol class={'sdds-breadcrumb'}>\n <slot></slot>\n </ol>\n </nav>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-breadcrumb.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,4wBAA4wB;;MCO9xBA,gBAAc;;;;;;EAGzB,iBAAiB;IACf,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;GAC1F;EAED,MAAM;IACJ,QACE,eACE,UAAI,KAAK,EAAE,iBAAiB,IAC1B,eAAa,CACV,CACD,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsBreadcrumb"],"sources":["./src/components/breadcrumb/breadcrumb-component.scss?tag=sdds-breadcrumb&encapsulation=shadow","./src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@import 'breadcrumb-theme-vars';\n@import '../../mixins/box-sizing';\n\nnav ol.sdds-breadcrumb {\n @include sdds-box-sizing;\n\n padding: 0;\n margin: 0;\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n display: flex;\n flex-wrap: wrap;\n list-style-type: none;\n}\n","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'sdds-breadcrumb',\n styleUrl: 'breadcrumb-component.scss',\n shadow: true,\n})\nexport class SddsBreadcrumb {\n @Element() el: HTMLElement;\n\n connectedCallback() {\n this.el.children[this.el.children.length - 1].classList.add('sdds-breadcrumb-item-last');\n }\n\n render() {\n return (\n <nav>\n <ol class={'sdds-breadcrumb'}>\n <slot></slot>\n </ol>\n </nav>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-button.js CHANGED Viewed

@@ -52,7 +52,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const SddsButton = SddsButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-button.js","mappings":";;AAAA,MAAM,SAAS,GAAG,w1yBAAw1yB;;MCQ71yBA,YAAU;;;;;gBAGE,EAAE;gBAGoC,SAAS;gBAE5B,IAAI;oBAGlB,KAAK;qBAGJ,KAAK;uBAGa,IAAI;oBAEtB,KAAK;;EAIlC,iBAAiB;IACf,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,EAAE;MACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MACrB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;KACzC;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IACzF,cACE,KAAK,EAAE,qBAAqB,IAAI,CAAC,IAAI;UACnC,YAAY,IAAI,CAAC,IAAI,EAAE;UACvB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,SAAS,GAAG,oBAAoB,GAAG,EAAE;UAC1C,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EAAE,IAE7C,YAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,IAAI,CAAQ,EAC9C,YAAM,IAAI,EAAC,MAAM,GAAG,CACb,CACF,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsButton"],"sources":["./src/components/button/button.scss?tag=sdds-button&encapsulation=shadow","./src/components/button/button-component.tsx"],"sourcesContent":["@import './button-theme-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-on-white-bg {\n --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-secondary-disabled);\n --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-secondary-disabled);\n}\n\n$btn-lg-height: 56px;\n$btn-md-height: 48px;\n$btn-sm-height: 40px;\n$btn-xs-height: 24px;\n$btn-sm-only-icon-padding: 11px;\n$btn-md-only-icon-padding: 13px;\n$btn-lg-only-icon-padding: 17px;\n$types: (primary, secondary, ghost, danger);\n$props: (background, border-color, color, outline-color);\n$iconProps: (fill, color);\n\n@mixin button-base {\n @include sdds-box-sizing;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n display: flex;\n align-items: center;\n border-radius: 4px;\n border: none;\n box-shadow: none;\n position: relative;\n text-decoration: none;\n cursor: pointer;\n}\n\n.sdds-btn-lg {\n &:not(.sdds-btn-only-icon) {\n i.sdds-btn-icon {\n position: relative;\n\n &::before {\n font-size: 20px;\n line-height: 1;\n position: absolute;\n right: 0;\n }\n }\n }\n\n &.sdds-btn-only-icon {\n i.sdds-btn-icon::before {\n font-size: 20px;\n line-height: 1.25;\n }\n }\n}\n\n.sdds-btn-md {\n &:not(.sdds-btn-only-icon) {\n i.sdds-btn-icon {\n position: relative;\n\n &::before {\n font-size: 20px;\n line-height: 1;\n position: absolute;\n right: 0;\n }\n }\n }\n\n &.sdds-btn-only-icon {\n i.sdds-btn-icon::before {\n font-size: 20px;\n line-height: 1.25;\n }\n }\n}\n\n.sdds-btn-sm {\n &:not(.sdds-btn-only-icon) {\n i.sdds-btn-icon {\n position: relative;\n\n &::before {\n font-size: 16px;\n line-height: 1;\n position: absolute;\n right: 0;\n }\n }\n }\n\n &.sdds-btn-only-icon {\n i.sdds-btn-icon::before {\n font-size: 16px;\n line-height: 1.25;\n }\n }\n}\n\n.sdds-btn.sdds-btn-primary .sdds-btn-icon {\n fill: var(--sdds-btn-primary-icon-fill);\n color: var(--sdds-btn-primary-icon-color);\n font-size: 16px;\n}\n\n.sdds-btn {\n @include button-base;\n\n height: $btn-lg-height;\n padding: var(--sdds-spacing-element-20);\n border: 1px solid;\n\n &:disabled,\n &.disabled {\n cursor: unset;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-16);\n width: 20px;\n height: 20px;\n line-height: 0;\n }\n\n &.sdds-btn-xs {\n padding: var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);\n height: $btn-xs-height;\n font-size: 12px;\n border-radius: 2px;\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n }\n\n &.sdds-btn-sm {\n padding: var(--sdds-spacing-element-12);\n height: $btn-sm-height;\n\n &.sdds-btn-only-icon {\n padding: $btn-sm-only-icon-padding;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: var(--sdds-spacing-element-24);\n width: 16px;\n height: 16px;\n }\n\n &.sdds-btn-fullbleed {\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: var(--sdds-spacing-element-12);\n }\n }\n }\n\n &.sdds-btn-md {\n padding: var(--sdds-spacing-element-16);\n height: $btn-md-height;\n\n &.sdds-btn-only-icon {\n padding: $btn-md-only-icon-padding;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: var(--sdds-spacing-element-20);\n }\n\n &.sdds-btn-fullbleed {\n span.sdds-btn-text + .sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n\n &.sdds-btn-lg {\n padding: var(--sdds-spacing-element-20);\n height: $btn-lg-height;\n\n &.sdds-btn-only-icon {\n padding: $btn-lg-only-icon-padding;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: 28px;\n }\n\n &.sdds-btn-fullbleed {\n span.sdds-btn-text + .sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n\n &.sdds-btn-fullbleed {\n width: inherit;\n display: flex;\n justify-content: center;\n\n .sdds-btn-icon,\n &.sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-8);\n }\n }\n\n span.sdds-btn-text {\n align-self: baseline;\n }\n\n @each $type in $types {\n &.sdds-btn-#{$type} {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop});\n }\n\n .sdds-btn-icon {\n @each $prop in $iconProps {\n fill: var(--sdds-btn-icon-#{$type}-#{$prop});\n color: var(--sdds-btn-icon-#{$type}-#{$prop});\n }\n\n font-size: 16px; //16px\n }\n\n &:hover {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-hover);\n }\n\n .sdds-btn-icon {\n @each $prop in $iconProps {\n fill: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n color: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n }\n }\n }\n\n &:focus {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-focus);\n }\n\n .sdds-btn-icon {\n @each $prop in $iconProps {\n fill: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n color: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n }\n }\n }\n\n &:active,\n &.active {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-active);\n }\n }\n\n &.disabled,\n &:disabled {\n @each $prop in $props {\n cursor: not-allowed;\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-disabled);\n\n .sdds-btn-icon,\n &.sdds-btn-icon {\n color: var(--sdds-grey-300);\n }\n }\n }\n }\n }\n}\n\ni.sdds-btn-icon[slot='icon'] {\n line-height: 1;\n}\n\n:host(sdds-button) {\n display: flex;\n align-items: center;\n\n ::slotted([slot='icon']) {\n width: var(--sdds-spacing-element-20);\n height: var(--sdds-spacing-element-20);\n }\n\n .sdds-btn-sm {\n ::slotted([slot='icon']) {\n width: var(--sdds-spacing-element-16);\n height: var(--sdds-spacing-element-16);\n }\n }\n}\n\n:host(sdds-button[fullbleed]) {\n width: inherit;\n justify-content: center;\n}\n\n:host(sdds-button[only-icon]) {\n .sdds-btn-sm {\n padding: $btn-sm-only-icon-padding;\n }\n\n .sdds-btn-md {\n padding: $btn-md-only-icon-padding;\n }\n\n .sdds-btn-lg {\n padding: $btn-lg-only-icon-padding;\n }\n}\n\n:host(sdds-button:not([only-icon])) {\n display: flex;\n align-items: center;\n\n .sdds-btn-sm {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-24);\n width: var(--sdds-spacing-element-16);\n height: var(--sdds-spacing-element-16);\n }\n\n &.sdds-btn-fullbleed {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-12);\n }\n }\n }\n\n .sdds-btn-md {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-20);\n width: var(--sdds-spacing-element-20);\n height: var(--sdds-spacing-element-20);\n }\n\n &.sdds-btn-fullbleed {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n\n .sdds-btn-lg {\n ::slotted([slot='icon']) {\n // TODO - This should be a var value\n margin-left: 28px;\n width: var(--sdds-spacing-element-20);\n height: var(--sdds-spacing-element-20);\n }\n\n &.sdds-btn-fullbleed {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-button',\n styleUrl: 'button.scss',\n shadow: true,\n})\nexport class SddsButton {\n // TODO: Make this mandatory prop. Send warning to user if empty and it is not icon only version of button.\n /** Text inside a button /\n @Prop() text: string = '';\n\n /* Type of button /\n @Prop() type: 'primary' \| 'secondary' \| 'ghost' \| 'danger' = 'primary';\n\n @Prop() size: 'xs' \| 'sm' \| 'md' \| 'lg' = 'lg';\n\n /* Control for disabled state of component /\n @Prop() disabled: boolean = false;\n\n /* When enabled, makes button take 100% width /\n @Prop() fullbleed: boolean = false;\n\n /* Set the mode variant of the the button. */\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n @State() onlyIcon: boolean = false;\n\n @Element() host: HostElement;\n\n componentWillLoad() {\n if (this.text === '') {\n this.onlyIcon = true;\n this.host.setAttribute('only-icon', '');\n }\n }\n\n render() {\n return (\n <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n <button\n class={`sdds-btn sdds-btn-${this.type} \n ${`sdds-btn-${this.size}`}\n ${this.disabled ? 'disabled' : ''}\n ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}\n ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}`}\n >\n <span class=\"sdds-btn-text\">{this.text}</span>\n <slot name=\"icon\" />\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-button.js","mappings":";;AAAA,MAAM,SAAS,GAAG,w1yBAAw1yB;;MCQ71yBA,YAAU;;;;;gBAGE,EAAE;gBAGoC,SAAS;gBAE5B,IAAI;oBAGlB,KAAK;qBAGJ,KAAK;uBAGa,IAAI;oBAEtB,KAAK;;EAIlC,iBAAiB;IACf,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,EAAE;MACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MACrB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;KACzC;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IACzF,cACE,KAAK,EAAE,qBAAqB,IAAI,CAAC,IAAI;UACnC,YAAY,IAAI,CAAC,IAAI,EAAE;UACvB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,SAAS,GAAG,oBAAoB,GAAG,EAAE;UAC1C,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EAAE,IAE7C,YAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,IAAI,CAAQ,EAC9C,YAAM,IAAI,EAAC,MAAM,GAAG,CACb,CACF,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsButton"],"sources":["./src/components/button/button.scss?tag=sdds-button&encapsulation=shadow","./src/components/button/button-component.tsx"],"sourcesContent":["@import './button-theme-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-on-white-bg {\n --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-secondary-disabled);\n --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-secondary-disabled);\n}\n\n$btn-lg-height: 56px;\n$btn-md-height: 48px;\n$btn-sm-height: 40px;\n$btn-xs-height: 24px;\n$btn-sm-only-icon-padding: 11px;\n$btn-md-only-icon-padding: 13px;\n$btn-lg-only-icon-padding: 17px;\n$types: (primary, secondary, ghost, danger);\n$props: (background, border-color, color, outline-color);\n$iconProps: (fill, color);\n\n@mixin button-base {\n @include sdds-box-sizing;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n display: flex;\n align-items: center;\n border-radius: 4px;\n border: none;\n box-shadow: none;\n position: relative;\n text-decoration: none;\n cursor: pointer;\n}\n\n.sdds-btn-lg {\n &:not(.sdds-btn-only-icon) {\n i.sdds-btn-icon {\n position: relative;\n\n &::before {\n font-size: 20px;\n line-height: 1;\n position: absolute;\n right: 0;\n }\n }\n }\n\n &.sdds-btn-only-icon {\n i.sdds-btn-icon::before {\n font-size: 20px;\n line-height: 1.25;\n }\n }\n}\n\n.sdds-btn-md {\n &:not(.sdds-btn-only-icon) {\n i.sdds-btn-icon {\n position: relative;\n\n &::before {\n font-size: 20px;\n line-height: 1;\n position: absolute;\n right: 0;\n }\n }\n }\n\n &.sdds-btn-only-icon {\n i.sdds-btn-icon::before {\n font-size: 20px;\n line-height: 1.25;\n }\n }\n}\n\n.sdds-btn-sm {\n &:not(.sdds-btn-only-icon) {\n i.sdds-btn-icon {\n position: relative;\n\n &::before {\n font-size: 16px;\n line-height: 1;\n position: absolute;\n right: 0;\n }\n }\n }\n\n &.sdds-btn-only-icon {\n i.sdds-btn-icon::before {\n font-size: 16px;\n line-height: 1.25;\n }\n }\n}\n\n.sdds-btn.sdds-btn-primary .sdds-btn-icon {\n fill: var(--sdds-btn-primary-icon-fill);\n color: var(--sdds-btn-primary-icon-color);\n font-size: 16px;\n}\n\n.sdds-btn {\n @include button-base;\n\n height: $btn-lg-height;\n padding: var(--sdds-spacing-element-20);\n border: 1px solid;\n\n &:disabled,\n &.disabled {\n cursor: unset;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-16);\n width: 20px;\n height: 20px;\n line-height: 0;\n }\n\n &.sdds-btn-xs {\n padding: var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);\n height: $btn-xs-height;\n font-size: 12px;\n border-radius: 2px;\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n }\n\n &.sdds-btn-sm {\n padding: var(--sdds-spacing-element-12);\n height: $btn-sm-height;\n\n &.sdds-btn-only-icon {\n padding: $btn-sm-only-icon-padding;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: var(--sdds-spacing-element-24);\n width: 16px;\n height: 16px;\n }\n\n &.sdds-btn-fullbleed {\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: var(--sdds-spacing-element-12);\n }\n }\n }\n\n &.sdds-btn-md {\n padding: var(--sdds-spacing-element-16);\n height: $btn-md-height;\n\n &.sdds-btn-only-icon {\n padding: $btn-md-only-icon-padding;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: var(--sdds-spacing-element-20);\n }\n\n &.sdds-btn-fullbleed {\n span.sdds-btn-text + .sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n\n &.sdds-btn-lg {\n padding: var(--sdds-spacing-element-20);\n height: $btn-lg-height;\n\n &.sdds-btn-only-icon {\n padding: $btn-lg-only-icon-padding;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: 28px;\n }\n\n &.sdds-btn-fullbleed {\n span.sdds-btn-text + .sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n\n &.sdds-btn-fullbleed {\n width: inherit;\n display: flex;\n justify-content: center;\n\n .sdds-btn-icon,\n &.sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-8);\n }\n }\n\n span.sdds-btn-text {\n align-self: baseline;\n }\n\n @each $type in $types {\n &.sdds-btn-#{$type} {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop});\n }\n\n .sdds-btn-icon {\n @each $prop in $iconProps {\n fill: var(--sdds-btn-icon-#{$type}-#{$prop});\n color: var(--sdds-btn-icon-#{$type}-#{$prop});\n }\n\n font-size: 16px; //16px\n }\n\n &:hover {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-hover);\n }\n\n .sdds-btn-icon {\n @each $prop in $iconProps {\n fill: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n color: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n }\n }\n }\n\n &:focus {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-focus);\n }\n\n .sdds-btn-icon {\n @each $prop in $iconProps {\n fill: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n color: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n }\n }\n }\n\n &:active,\n &.active {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-active);\n }\n }\n\n &.disabled,\n &:disabled {\n @each $prop in $props {\n cursor: not-allowed;\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-disabled);\n\n .sdds-btn-icon,\n &.sdds-btn-icon {\n color: var(--sdds-grey-300);\n }\n }\n }\n }\n }\n}\n\ni.sdds-btn-icon[slot='icon'] {\n line-height: 1;\n}\n\n:host(sdds-button) {\n display: flex;\n align-items: center;\n\n ::slotted([slot='icon']) {\n width: var(--sdds-spacing-element-20);\n height: var(--sdds-spacing-element-20);\n }\n\n .sdds-btn-sm {\n ::slotted([slot='icon']) {\n width: var(--sdds-spacing-element-16);\n height: var(--sdds-spacing-element-16);\n }\n }\n}\n\n:host(sdds-button[fullbleed]) {\n width: inherit;\n justify-content: center;\n}\n\n:host(sdds-button[only-icon]) {\n .sdds-btn-sm {\n padding: $btn-sm-only-icon-padding;\n }\n\n .sdds-btn-md {\n padding: $btn-md-only-icon-padding;\n }\n\n .sdds-btn-lg {\n padding: $btn-lg-only-icon-padding;\n }\n}\n\n:host(sdds-button:not([only-icon])) {\n display: flex;\n align-items: center;\n\n .sdds-btn-sm {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-24);\n width: var(--sdds-spacing-element-16);\n height: var(--sdds-spacing-element-16);\n }\n\n &.sdds-btn-fullbleed {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-12);\n }\n }\n }\n\n .sdds-btn-md {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-20);\n width: var(--sdds-spacing-element-20);\n height: var(--sdds-spacing-element-20);\n }\n\n &.sdds-btn-fullbleed {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n\n .sdds-btn-lg {\n ::slotted([slot='icon']) {\n // TODO - This should be a var value\n margin-left: 28px;\n width: var(--sdds-spacing-element-20);\n height: var(--sdds-spacing-element-20);\n }\n\n &.sdds-btn-fullbleed {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-button',\n styleUrl: 'button.scss',\n shadow: true,\n})\nexport class SddsButton {\n // TODO: Make this mandatory prop. Send warning to user if empty and it is not icon only version of button.\n /** Text inside a button /\n @Prop() text: string = '';\n\n /* Type of button /\n @Prop() type: 'primary' \| 'secondary' \| 'ghost' \| 'danger' = 'primary';\n\n @Prop() size: 'xs' \| 'sm' \| 'md' \| 'lg' = 'lg';\n\n /* Control for disabled state of component /\n @Prop() disabled: boolean = false;\n\n /* When enabled, makes button take 100% width /\n @Prop() fullbleed: boolean = false;\n\n /* Set the mode variant of the the button. */\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n @State() onlyIcon: boolean = false;\n\n @Element() host: HostElement;\n\n componentWillLoad() {\n if (this.text === '') {\n this.onlyIcon = true;\n this.host.setAttribute('only-icon', '');\n }\n }\n\n render() {\n return (\n <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n <button\n class={`sdds-btn sdds-btn-${this.type} \n ${`sdds-btn-${this.size}`}\n ${this.disabled ? 'disabled' : ''}\n ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}\n ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}`}\n >\n <span class=\"sdds-btn-text\">{this.text}</span>\n <slot name=\"icon\" />\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-card.js CHANGED Viewed

@@ -77,7 +77,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const SddsCard = SddsCard$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-card.js","mappings":";;AAAA,MAAM,WAAW,GAAG,20CAA20C;;MCOl1CA,UAAQ;;;;;;IA2DnB,gBAAW,GAAG;MACZ,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,CAAC,CAAC;KACJ,CAAC;IAEF,mBAAc,GAAG,OACf,eACG,IAAI,CAAC,eAAe,KAAK,OAAO,KAC/B,WAAK,KAAK,EAAE,YAAY,IAAI,CAAC,eAAe,EAAE,IAC3C,IAAI,CAAC,SAAS,KACb,WAAK,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CAC9E,EAAE,GAAG,EACN,WACE,KAAK,EAAE;;YAEP,CAAC,IAAI,CAAC,SAAS,GAAG,eAAe,GAAG,EAAE;YACtC,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAoB,GAAG,EAAE;WAC5D,IAEC,YAAM,KAAK,EAAE,aAAa,IAAG,IAAI,CAAC,MAAM,CAAQ,EAChD,YAAM,KAAK,EAAE,gBAAgB,IAAG,IAAI,CAAC,SAAS,CAAQ,CAClD,CACF,CACP,EACD,WAAK,KAAK,EAAE,WAAW,IACpB,IAAI,CAAC,OAAO,IAAI,WAAK,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,GAAI,EACxF,IAAI,CAAC,eAAe,KAAK,OAAO,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,CAAC,KACpF,WAAK,KAAK,EAAE,YAAY,IAAI,CAAC,eAAe,EAAE,IAC3C,IAAI,CAAC,SAAS,KACb,WAAK,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CAC9E,EACD,WACE,KAAK,EAAE;;cAEP,CAAC,IAAI,CAAC,SAAS,GAAG,eAAe,GAAG,EAAE;cACtC,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAoB,GAAG,EAAE;aAC5D,IAEC,YAAM,KAAK,EAAE,aAAa,IAAG,IAAI,CAAC,MAAM,CAAQ,EAChD,YAAM,KAAK,EAAE,gBAAgB,IAAG,IAAI,CAAC,SAAS,CAAQ,CAClD,CACF,CACP,EACA,IAAI,CAAC,WAAW,IAAI,WAAK,KAAK,EAAE,cAAc,GAAQ,EACvD,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,WAAK,KAAK,EAAE,aAAa,IACtB,IAAI,CAAC,iBAAiB,IAAI,YAAM,IAAI,EAAE,aAAa,GAAS,CACzD,CACF,CACP,CAAC;uBA5G6C,IAAI;2BAGN,OAAO;;;;;;;uBAqBrB,KAAK;qBAGP,KAAK;kBAMT,MAAM,CAAC,UAAU,EAAE;6BAeN,KAAK;2BAEP,KAAK;;EAEzC,iBAAiB;IACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAClF,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;GAC/E;EAuDD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,WAAW,IAAI,qBAAqB,IAAI,CAAC,WAAW,EAAE,IACrE,IAAI,CAAC,SAAS,IACb,cACE,KAAK,EAAE,QAAQ,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE,EAC1E,OAAO,EAAE;QACP,IAAI,IAAI,CAAC,SAAS,EAAE;UAClB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;OACF,IAEA,IAAI,CAAC,cAAc,EAAE,CACf,KAET,WAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE,IAC5E,IAAI,CAAC,cAAc,EAAE,CAClB,CACP,CACI,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["SddsCard"],"sources":["./src/components/card/sdds-card.scss?tag=sdds-card&encapsulation=shadow","./src/components/card/sdds-card.tsx"],"sourcesContent":[".card {\n box-shadow: var(--sdds-card-box);\n background-color: var(--sdds-card-background);\n display: block;\n border-radius: 4px;\n max-width: 368px;\n overflow: hidden;\n\n &.clickable {\n &:hover {\n box-shadow: var(--sdds-card-box-hover);\n cursor: pointer;\n }\n }\n\n .card-top {\n font: var(--sdds-headline-06);\n letter-spacing: var(--sdds-headline-06-ls);\n padding: 16px;\n display: flex;\n align-items: center;\n\n img.card-top-image {\n width: 36px;\n height: 36px;\n border-radius: 100%;\n }\n\n .card-top-header {\n padding-left: 16px;\n display: flex;\n flex-direction: column;\n row-gap: 4px;\n\n &.no-header-img {\n padding-left: 0;\n }\n\n &.single-line-header {\n row-gap: 0;\n }\n }\n\n &.below {\n padding-top: 16px;\n }\n }\n\n .card-header {\n color: var(--sdds-card-headline);\n }\n\n .card-subheader {\n color: var(--sdds-card-sub-headline);\n }\n\n .card-body-img {\n width: 100%;\n }\n\n .sdds-divider {\n margin: 16px 16px 0;\n background-color: var(--sdds-card-divider);\n height: 1px;\n }\n\n slot[name='card-body']::slotted() {\n font: var(--sdds-detail-03);\n letter-spacing: var(--sdds-detail-03-ls);\n color: var(--sdds-card-body-color);\n padding: 0 16px;\n margin-bottom: 16px;\n margin-top: 16px;\n }\n\n slot[name='card-bottom']::slotted() {\n display: flex;\n padding: 16px;\n }\n}\n\nbutton {\n border: none;\n text-align: left;\n padding: 0;\n\n &:focus {\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n &:active {\n box-shadow: var(--sdds-card-box-pressed);\n }\n}\n","import { Component, h, Prop, Event, EventEmitter, Element, State, Host } from '@stencil/core';\n\n@Component({\n tag: 'sdds-card',\n styleUrl: 'sdds-card.scss',\n shadow: true,\n})\nexport class SddsCard {\n /** Variant of the card based on the theme used. /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* Placement of the header /\n @Prop() headerPlacement: 'above' \| 'below' = 'above';\n\n /* Text in the header /\n @Prop() header: string;\n\n /* Subheader text in the header /\n @Prop() subheader: string;\n\n /* Header image src /\n @Prop() headerImg: string;\n\n /* Alt text for the header image /\n @Prop() headerImgAlt: string;\n\n /* Body image src /\n @Prop() bodyImg: string;\n\n /* Alt text for the body image /\n @Prop() bodyImgAlt: string;\n\n /* Divider for the body /\n @Prop() bodyDivider: boolean = false;\n\n /* Makes the card clickable. /\n @Prop() clickable: boolean = false;\n\n /* ID for the card, must be unique.\n \n NOTE: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time.\n /\n @Prop() cardId: string = crypto.randomUUID();\n\n /* Sends unique card identifier when the card is clicked, if clickable=true */\n @Event({\n eventName: 'sddsClick',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsClick: EventEmitter<{\n cardId: string;\n }>;\n\n @Element() hostElement: HTMLSddsCardElement;\n\n @State() hasCardBottomSlot: boolean = false;\n\n @State() hasCardBodySlot: boolean = false;\n\n connectedCallback() {\n this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot=\"card-bottom\"]');\n this.hasCardBodySlot = !!this.hostElement.querySelector('[slot=\"card-body\"]');\n }\n\n handleClick = () => {\n this.sddsClick.emit({\n cardId: this.cardId,\n });\n };\n\n getCardContent = () => (\n <div>\n {this.headerPlacement === 'above' && (\n <div class={`card-top ${this.headerPlacement}`}>\n {this.headerImg && (\n <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n )}{' '}\n <div\n class={`\n card-top-header\n ${!this.headerImg ? 'no-header-img' : ''}\n ${!this.header \|\| !this.subheader ? 'single-line-header' : ''}\n `}\n >\n <span class={`card-header`}>{this.header}</span>\n <span class={`card-subheader`}>{this.subheader}</span>\n </div>\n </div>\n )}\n <div class={`card-body`}>\n {this.bodyImg && <img class={`card-body-img`} src={this.bodyImg} alt={this.bodyImgAlt} />}\n {this.headerPlacement === 'below' && (this.headerImg \|\| this.header \|\| this.subheader) && (\n <div class={`card-top ${this.headerPlacement}`}>\n {this.headerImg && (\n <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n )}\n <div\n class={`\n card-top-header\n ${!this.headerImg ? 'no-header-img' : ''}\n ${!this.header \|\| !this.subheader ? 'single-line-header' : ''}\n `}\n >\n <span class={`card-header`}>{this.header}</span>\n <span class={`card-subheader`}>{this.subheader}</span>\n </div>\n </div>\n )}\n {this.bodyDivider && <div class={`sdds-divider`}></div>}\n <slot name=\"card-body\"></slot>\n </div>\n <div class={`card-bottom`}>\n {this.hasCardBottomSlot && <slot name={`card-bottom`}></slot>}\n </div>\n </div>\n );\n\n render() {\n return (\n <Host class={this.modeVariant && `sdds-mode-variant-${this.modeVariant}`}>\n {this.clickable ? (\n <button\n class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}\n onClick={() => {\n if (this.clickable) {\n this.handleClick();\n }\n }}\n >\n {this.getCardContent()}\n </button>\n ) : (\n <div class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}>\n {this.getCardContent()}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-card.js","mappings":"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","names":["SddsCard"],"sources":["./src/components/card/sdds-card.scss?tag=sdds-card&encapsulation=shadow","./src/components/card/sdds-card.tsx"],"sourcesContent":[".card {\n box-shadow: var(--sdds-card-box);\n background-color: var(--sdds-card-background);\n display: block;\n border-radius: 4px;\n max-width: 368px;\n overflow: hidden;\n\n &.clickable {\n &:hover {\n box-shadow: var(--sdds-card-box-hover);\n cursor: pointer;\n }\n }\n\n .card-top {\n font: var(--sdds-headline-06);\n letter-spacing: var(--sdds-headline-06-ls);\n padding: 16px;\n display: flex;\n align-items: center;\n\n img.card-top-image {\n width: 36px;\n height: 36px;\n border-radius: 100%;\n }\n\n .card-top-header {\n padding-left: 16px;\n display: flex;\n flex-direction: column;\n row-gap: 4px;\n\n &.no-header-img {\n padding-left: 0;\n }\n\n &.single-line-header {\n row-gap: 0;\n }\n }\n\n &.below {\n padding-top: 16px;\n }\n }\n\n .card-header {\n color: var(--sdds-card-headline);\n }\n\n .card-subheader {\n color: var(--sdds-card-sub-headline);\n }\n\n .card-body-img {\n width: 100%;\n }\n\n .sdds-divider {\n margin: 16px 16px 0;\n background-color: var(--sdds-card-divider);\n height: 1px;\n }\n\n slot[name='card-body']::slotted() {\n font: var(--sdds-detail-03);\n letter-spacing: var(--sdds-detail-03-ls);\n color: var(--sdds-card-body-color);\n padding: 0 16px;\n margin-bottom: 16px;\n margin-top: 16px;\n }\n\n slot[name='card-bottom']::slotted() {\n display: flex;\n padding: 16px;\n }\n}\n\nbutton {\n border: none;\n text-align: left;\n padding: 0;\n\n &:focus {\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n &:active {\n box-shadow: var(--sdds-card-box-pressed);\n }\n}\n","import { Component, h, Prop, Event, EventEmitter, Element, State, Host } from '@stencil/core';\n\n@Component({\n tag: 'sdds-card',\n styleUrl: 'sdds-card.scss',\n shadow: true,\n})\nexport class SddsCard {\n /** Variant of the card based on the theme used. /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* Placement of the header /\n @Prop() headerPlacement: 'above' \| 'below' = 'above';\n\n /* Text in the header /\n @Prop() header: string;\n\n /* Subheader text in the header /\n @Prop() subheader: string;\n\n /* Header image src /\n @Prop() headerImg: string;\n\n /* Alt text for the header image /\n @Prop() headerImgAlt: string;\n\n /* Body image src /\n @Prop() bodyImg: string;\n\n /* Alt text for the body image /\n @Prop() bodyImgAlt: string;\n\n /* Divider for the body /\n @Prop() bodyDivider: boolean = false;\n\n /* Makes the card clickable. /\n @Prop() clickable: boolean = false;\n\n /* ID for the card, must be unique.\n \n NOTE: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time.\n /\n @Prop() cardId: string = crypto.randomUUID();\n\n /* Sends unique card identifier when the card is clicked, if clickable=true */\n @Event({\n eventName: 'sddsClick',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsClick: EventEmitter<{\n cardId: string;\n }>;\n\n @Element() hostElement: HTMLSddsCardElement;\n\n @State() hasCardBottomSlot: boolean = false;\n\n @State() hasCardBodySlot: boolean = false;\n\n connectedCallback() {\n this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot=\"card-bottom\"]');\n this.hasCardBodySlot = !!this.hostElement.querySelector('[slot=\"card-body\"]');\n }\n\n handleClick = () => {\n this.sddsClick.emit({\n cardId: this.cardId,\n });\n };\n\n getCardContent = () => (\n <div>\n {this.headerPlacement === 'above' && (\n <div class={`card-top ${this.headerPlacement}`}>\n {this.headerImg && (\n <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n )}{' '}\n <div\n class={`\n card-top-header\n ${!this.headerImg ? 'no-header-img' : ''}\n ${!this.header \|\| !this.subheader ? 'single-line-header' : ''}\n `}\n >\n <span class={`card-header`}>{this.header}</span>\n <span class={`card-subheader`}>{this.subheader}</span>\n </div>\n </div>\n )}\n <div class={`card-body`}>\n {this.bodyImg && <img class={`card-body-img`} src={this.bodyImg} alt={this.bodyImgAlt} />}\n {this.headerPlacement === 'below' && (this.headerImg \|\| this.header \|\| this.subheader) && (\n <div class={`card-top ${this.headerPlacement}`}>\n {this.headerImg && (\n <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n )}\n <div\n class={`\n card-top-header\n ${!this.headerImg ? 'no-header-img' : ''}\n ${!this.header \|\| !this.subheader ? 'single-line-header' : ''}\n `}\n >\n <span class={`card-header`}>{this.header}</span>\n <span class={`card-subheader`}>{this.subheader}</span>\n </div>\n </div>\n )}\n {this.bodyDivider && <div class={`sdds-divider`}></div>}\n <slot name=\"card-body\"></slot>\n </div>\n <div class={`card-bottom`}>\n {this.hasCardBottomSlot && <slot name={`card-bottom`}></slot>}\n </div>\n </div>\n );\n\n render() {\n return (\n <Host class={this.modeVariant && `sdds-mode-variant-${this.modeVariant}`}>\n {this.clickable ? (\n <button\n class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}\n onClick={() => {\n if (this.clickable) {\n this.handleClick();\n }\n }}\n >\n {this.getCardContent()}\n </button>\n ) : (\n <div class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}>\n {this.getCardContent()}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-checkbox.js CHANGED Viewed

@@ -69,7 +69,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const SddsCheckbox = SddsCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-checkbox.js","mappings":";;AAAA,MAAM,eAAe,GAAG,o+HAAo+H;;MCS/+HA,cAAY;;;;;;;IA4CvB,iBAAY,GAAG;MACb,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,UAAU,EAAE,IAAI,CAAC,UAAU;QAC3B,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAC;;sBA9C2B,MAAM,CAAC,UAAU,EAAE;oBAGpB,KAAK;oBAGL,KAAK;mBAGW,KAAK;;;;EASjD,MAAM,cAAc;IAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,OAAO;MACL,UAAU,EAAE,IAAI,CAAC,UAAU;MAC3B,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;;EAkCD,WAAW,CAAC,KAAK;IACf,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC5B;;EAYD,UAAU,CAAC,KAAK;IACd,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC3B;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,4BAA4B,IACrC,6BACgB,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,QAAQ,sBACV,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,qBAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAC1D,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACzC,QAAQ,EAAE;QACR,IAAI,CAAC,YAAY,EAAE,CAAC;OACrB,GACD,EACF,aAAO,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7B,eAAa,CACP,CACJ,EACN;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["SddsCheckbox"],"sources":["./src/components/checkbox/sdds-checkbox.scss?tag=sdds-checkbox&encapsulation=scoped","./src/components/checkbox/sdds-checkbox.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n.sdds-checkbox-webcomponent {\n @include sdds-box-sizing;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-checkbox-text);\n display: flex;\n align-items: center;\n margin-left: -4px;\n\n input[type='checkbox'] {\n appearance: none;\n outline: none;\n margin: 0;\n border: 0;\n border-radius: 2px;\n width: 24px;\n height: 24px;\n position: relative;\n cursor: pointer;\n\n + label {\n color: var(--sdds-checkbox-color);\n padding-left: var(--sdds-spacing-element-4);\n padding-top: var(--sdds-spacing-element-4);\n padding-bottom: var(--sdds-spacing-element-4);\n cursor: pointer;\n }\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n box-sizing: border-box;\n border-radius: 2px;\n }\n\n &::before {\n width: 24px;\n height: 24px;\n left: 0;\n top: 0;\n }\n\n &::after {\n border: 1px solid var(--sdds-checkbox-interaction-01);\n background-color: var(--sdds-checkbox-interaction-02);\n width: 16px;\n height: 16px;\n left: 4px;\n top: 4px;\n }\n\n &:hover {\n &::before {\n background-color: var(--sdds-checkbox-background-hover);\n opacity: 0.12;\n }\n }\n\n &:focus {\n &::before {\n background-color: var(--sdds-checkbox-background-focus);\n opacity: 0.24;\n transition: opacity 0.2s ease-in-out;\n }\n }\n\n &:disabled,\n &.disabled {\n cursor: not-allowed;\n\n &::after {\n border-color: var(--sdds-checkbox-border-color-disabled-after);\n }\n\n + label {\n color: var(--sdds-grey-600);\n cursor: not-allowed;\n }\n\n &:hover {\n &::before {\n display: none;\n }\n }\n }\n\n &:checked {\n &::after {\n background-image: var(--sdds-checkbox-background-img);\n background-color: var(--sdds-checkbox-interaction-01);\n background-repeat: no-repeat;\n background-position: center;\n }\n\n &:hover {\n &::before {\n background-color: var(--sdds-checkbox-background-hover);\n opacity: 0.12;\n }\n }\n\n &:disabled,\n &.disabled {\n &:hover::before,\n &::before {\n display: block;\n width: 16px;\n height: 16px;\n left: 4px;\n top: 4px;\n border: 1px solid #b0b7c4;\n }\n\n &::after {\n background-image: var(--sdds-checkbox-background-img-disabled);\n background-color: var(--sdds-checkbox-interaction-02);\n color: var(--sdds-checkbox-color-disabled-after);\n }\n }\n }\n }\n}\n","import { Component, h, Prop, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-checkbox',\n styleUrl: 'sdds-checkbox.scss',\n shadow: false,\n scoped: true,\n})\nexport class SddsCheckbox {\n /** Name for the checkbox's input element. /\n @Prop() name: string;\n\n /* ID for the checkbox's input element. Randomly generated if not specified. /\n @Prop() checkboxId: string = crypto.randomUUID();\n\n /* Sets the checkbox in a disabled state /\n @Prop() disabled: boolean = false;\n\n /* Make the checkbox required /\n @Prop() required: boolean = false;\n\n /* Sets the checkbox as checked /\n @Prop({ reflect: true }) checked: boolean = false;\n\n /* Value for the checkbox /\n @Prop() value: string;\n\n @Element() host: HostElement;\n\n /* Toggles the checked value of the component. /\n @Method()\n async toggleCheckbox() {\n this.checked = !this.checked;\n return {\n checkboxId: this.checkboxId,\n checked: this.checked,\n };\n }\n\n /* Sends unique checkbox identifier and checked status when it is checked/unchecked. /\n @Event({\n eventName: 'sddsChange',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n sddsChange: EventEmitter<{\n checkboxId: string;\n checked: boolean;\n value?: string;\n }>;\n\n handleChange = () => {\n this.checked = !this.checked;\n this.sddsChange.emit({\n checkboxId: this.checkboxId,\n checked: this.checked,\n value: this.value,\n });\n };\n\n /* Focus event for the checkbox /\n @Event({\n eventName: 'sddsFocus',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsFocus: EventEmitter<FocusEvent>;\n\n /* Set the input as focus when clicking the whole textfield with suffix/prefix /\n handleFocus(event): void {\n this.sddsFocus.emit(event);\n }\n\n /* Blur event for the checkbox /\n @Event({\n eventName: 'sddsBlur',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsBlur: EventEmitter<FocusEvent>;\n\n /* Set the input as focus when clicking the whole textfield with suffix/prefix */\n handleBlur(event): void {\n this.sddsBlur.emit(event);\n }\n\n render() {\n return (\n <div class=\"sdds-checkbox-webcomponent\">\n <input\n aria-checked={this.checked}\n aria-required={this.required}\n aria-describedby={this.host.getAttribute('aria-describedby')}\n aria-labelledby={this.host.getAttribute('aria-labelledby')}\n required={this.required}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n id={this.checkboxId}\n checked={this.checked}\n disabled={this.disabled}\n onFocus={(event) => this.handleFocus(event)}\n onBlur={(event) => this.handleBlur(event)}\n onChange={() => {\n this.handleChange();\n }}\n />\n <label htmlFor={this.checkboxId}>\n <slot></slot>\n </label>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-checkbox.js","mappings":";;AAAA,MAAM,eAAe,GAAG,o+HAAo+H;;MCS/+HA,cAAY;;;;;;;IA4CvB,iBAAY,GAAG;MACb,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,UAAU,EAAE,IAAI,CAAC,UAAU;QAC3B,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAC;;sBA9C2B,MAAM,CAAC,UAAU,EAAE;oBAGpB,KAAK;oBAGL,KAAK;mBAGW,KAAK;;;;EASjD,MAAM,cAAc;IAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,OAAO;MACL,UAAU,EAAE,IAAI,CAAC,UAAU;MAC3B,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;;EAkCD,WAAW,CAAC,KAAK;IACf,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC5B;;EAYD,UAAU,CAAC,KAAK;IACd,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC3B;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,4BAA4B,IACrC,6BACgB,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,QAAQ,sBACV,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,qBAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAC1D,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACzC,QAAQ,EAAE;QACR,IAAI,CAAC,YAAY,EAAE,CAAC;OACrB,GACD,EACF,aAAO,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7B,eAAa,CACP,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsCheckbox"],"sources":["./src/components/checkbox/sdds-checkbox.scss?tag=sdds-checkbox&encapsulation=scoped","./src/components/checkbox/sdds-checkbox.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n.sdds-checkbox-webcomponent {\n @include sdds-box-sizing;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-checkbox-text);\n display: flex;\n align-items: center;\n margin-left: -4px;\n\n input[type='checkbox'] {\n appearance: none;\n outline: none;\n margin: 0;\n border: 0;\n border-radius: 2px;\n width: 24px;\n height: 24px;\n position: relative;\n cursor: pointer;\n\n + label {\n color: var(--sdds-checkbox-color);\n padding-left: var(--sdds-spacing-element-4);\n padding-top: var(--sdds-spacing-element-4);\n padding-bottom: var(--sdds-spacing-element-4);\n cursor: pointer;\n }\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n box-sizing: border-box;\n border-radius: 2px;\n }\n\n &::before {\n width: 24px;\n height: 24px;\n left: 0;\n top: 0;\n }\n\n &::after {\n border: 1px solid var(--sdds-checkbox-interaction-01);\n background-color: var(--sdds-checkbox-interaction-02);\n width: 16px;\n height: 16px;\n left: 4px;\n top: 4px;\n }\n\n &:hover {\n &::before {\n background-color: var(--sdds-checkbox-background-hover);\n opacity: 0.12;\n }\n }\n\n &:focus {\n &::before {\n background-color: var(--sdds-checkbox-background-focus);\n opacity: 0.24;\n transition: opacity 0.2s ease-in-out;\n }\n }\n\n &:disabled,\n &.disabled {\n cursor: not-allowed;\n\n &::after {\n border-color: var(--sdds-checkbox-border-color-disabled-after);\n }\n\n + label {\n color: var(--sdds-grey-600);\n cursor: not-allowed;\n }\n\n &:hover {\n &::before {\n display: none;\n }\n }\n }\n\n &:checked {\n &::after {\n background-image: var(--sdds-checkbox-background-img);\n background-color: var(--sdds-checkbox-interaction-01);\n background-repeat: no-repeat;\n background-position: center;\n }\n\n &:hover {\n &::before {\n background-color: var(--sdds-checkbox-background-hover);\n opacity: 0.12;\n }\n }\n\n &:disabled,\n &.disabled {\n &:hover::before,\n &::before {\n display: block;\n width: 16px;\n height: 16px;\n left: 4px;\n top: 4px;\n border: 1px solid #b0b7c4;\n }\n\n &::after {\n background-image: var(--sdds-checkbox-background-img-disabled);\n background-color: var(--sdds-checkbox-interaction-02);\n color: var(--sdds-checkbox-color-disabled-after);\n }\n }\n }\n }\n}\n","import { Component, h, Prop, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-checkbox',\n styleUrl: 'sdds-checkbox.scss',\n shadow: false,\n scoped: true,\n})\nexport class SddsCheckbox {\n /** Name for the checkbox's input element. /\n @Prop() name: string;\n\n /* ID for the checkbox's input element. Randomly generated if not specified. /\n @Prop() checkboxId: string = crypto.randomUUID();\n\n /* Sets the checkbox in a disabled state /\n @Prop() disabled: boolean = false;\n\n /* Make the checkbox required /\n @Prop() required: boolean = false;\n\n /* Sets the checkbox as checked /\n @Prop({ reflect: true }) checked: boolean = false;\n\n /* Value for the checkbox /\n @Prop() value: string;\n\n @Element() host: HostElement;\n\n /* Toggles the checked value of the component. /\n @Method()\n async toggleCheckbox() {\n this.checked = !this.checked;\n return {\n checkboxId: this.checkboxId,\n checked: this.checked,\n };\n }\n\n /* Sends unique checkbox identifier and checked status when it is checked/unchecked. /\n @Event({\n eventName: 'sddsChange',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n sddsChange: EventEmitter<{\n checkboxId: string;\n checked: boolean;\n value?: string;\n }>;\n\n handleChange = () => {\n this.checked = !this.checked;\n this.sddsChange.emit({\n checkboxId: this.checkboxId,\n checked: this.checked,\n value: this.value,\n });\n };\n\n /* Focus event for the checkbox /\n @Event({\n eventName: 'sddsFocus',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsFocus: EventEmitter<FocusEvent>;\n\n /* Set the input as focus when clicking the whole textfield with suffix/prefix /\n handleFocus(event): void {\n this.sddsFocus.emit(event);\n }\n\n /* Blur event for the checkbox /\n @Event({\n eventName: 'sddsBlur',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsBlur: EventEmitter<FocusEvent>;\n\n /* Set the input as focus when clicking the whole textfield with suffix/prefix */\n handleBlur(event): void {\n this.sddsBlur.emit(event);\n }\n\n render() {\n return (\n <div class=\"sdds-checkbox-webcomponent\">\n <input\n aria-checked={this.checked}\n aria-required={this.required}\n aria-describedby={this.host.getAttribute('aria-describedby')}\n aria-labelledby={this.host.getAttribute('aria-labelledby')}\n required={this.required}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n id={this.checkboxId}\n checked={this.checked}\n disabled={this.disabled}\n onFocus={(event) => this.handleFocus(event)}\n onBlur={(event) => this.handleBlur(event)}\n onChange={() => {\n this.handleChange();\n }}\n />\n <label htmlFor={this.checkboxId}>\n <slot></slot>\n </label>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-datetime.js CHANGED Viewed

@@ -122,7 +122,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const SddsDatetime = Datetime;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-datetime.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-datetime.js","mappings":"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","names":[],"sources":["./src/components/datetime/datetime.scss?tag=sdds-datetime&encapsulation=shadow","./src/components/datetime/datetime.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@mixin datetime-base {\n @include sdds-box-sizing;\n\n border-radius: 4px 4px 0 0;\n width: 100%;\n box-sizing: border-box;\n margin: 0;\n border: none;\n outline: none;\n height: 100%;\n color: var(--sdds-datetime-color);\n background-color: var(--sdds-datetime-background);\n\n &::placeholder {\n opacity: 1;\n color: var(--sdds-datetime-placeholder);\n }\n\n &:focus::placeholder {\n color: var(--sdds-datetime-placeholder-color-focus);\n }\n\n &:disabled {\n background-color: var(--sdds-datetime-background-disabled);\n color: var(--sdds-datetime-color-disabled);\n cursor: not-allowed;\n\n &::placeholder {\n color: var(--sdds-datetime-placeholder-disabled);\n }\n\n ~ .sdds-datetime-label-inside {\n color: var(--sdds-datetime-label-disabled);\n }\n }\n}\n\n// icons\n\n.sdds-datetime-input,\n.sdds-datetime-input-md,\n.sdds-datetime-input-sm {\n &[type='datetime-local'] {\n ~ .icon-time {\n display: none;\n }\n }\n\n &[type='date'] {\n ~ .icon-time {\n display: none;\n }\n }\n\n &[type='time'] {\n ~ .icon-datetime-local {\n display: none;\n }\n }\n}\n\n//Sizes\n.sdds-datetime-input {\n @include datetime-base;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n}\n\n.sdds-datetime-input-md {\n @include datetime-base;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding: var(--sdds-spacing-element-16);\n}\n\n.sdds-datetime-input-sm {\n @include datetime-base;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding: var(--sdds-spacing-element-16);\n}\n\n//Container for input field and prefix/suffix\n.sdds-datetime-container {\n border-radius: 4px 4px 0 0;\n display: flex;\n position: relative;\n height: 56px;\n box-sizing: border-box;\n background-color: var(--sdds-datetime-background);\n border-bottom: 1px solid var(--sdds-datetime-border-bottom);\n transition: border-bottom-color 200ms ease;\n\n &:hover {\n border-bottom-color: var(--sdds-datetime-border-bottom-hover);\n }\n\n .sdds-form-datetime-md & {\n height: 48px;\n }\n\n .sdds-form-datetime-sm & {\n height: 40px;\n }\n}\n\n.sdds-datetime-input-container {\n position: relative;\n width: 100%;\n\n .datetime-icon {\n height: 20px;\n width: 20px;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n right: 18px;\n pointer-events: none;\n\n path {\n fill: var(--sdds-datetime-icon);\n }\n }\n}\n\n.sdds-datetime-label {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n display: block;\n margin-bottom: var(--sdds-spacing-element-8);\n color: var(--sdds-datetime-label-color);\n}\n\n.sdds-datetime-label-inside {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n position: absolute;\n pointer-events: none;\n color: var(--sdds-datetime-label-inside-color);\n left: 16px;\n}\n\n@mixin placeholder-label {\n &::placeholder {\n color: transparent;\n }\n\n &::input-placeholder {\n color: transparent;\n }\n\n &:placeholder {\n color: transparent;\n }\n\n ::placeholder {\n color: transparent;\n }\n\n //Input field in focus\n &:focus::placeholder {\n transition: color 0.35s ease;\n color: var(--sdds-datetime-placeholder-color-focus);\n }\n}\n\n@mixin label-inside-transition {\n transition: 0.1s ease all;\n}\n\n//Form control\n.sdds-form-datetime {\n display: block;\n min-width: 208px;\n\n &-nomin {\n min-width: auto;\n }\n}\n\n//datetime container with label inside\n//Handling position, focus and transition for label inside\n.sdds-form-datetime.sdds-datetime-container-label-inside {\n .sdds-datetime-input {\n padding-top: var(--sdds-spacing-element-24);\n padding-bottom: 15px;\n\n ~ .sdds-datetime-label-inside {\n top: 20px;\n }\n\n @include placeholder-label;\n }\n\n .sdds-datetime-input-md {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .sdds-datetime-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n .sdds-datetime-input-sm {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .sdds-datetime-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n &.sdds-datetime-focus,\n &.sdds-datetime-data {\n .sdds-datetime-input-sm ~ .sdds-datetime-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n @include label-inside-transition;\n\n top: 8px;\n }\n\n .sdds-datetime-input-md ~ .sdds-datetime-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n @include label-inside-transition;\n\n top: 8px;\n }\n\n .sdds-datetime-input ~ .sdds-datetime-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n @include label-inside-transition;\n\n top: 12px;\n }\n }\n}\n\n//datetime bottom bar when in focus\n.sdds-datetime-bar {\n position: absolute;\n width: 100%;\n\n &::before,\n &::after {\n content: '';\n height: 2px;\n top: 54px;\n width: 0;\n position: absolute;\n background: var(--sdds-datetime-bar);\n transition: 0.35s ease all;\n\n .sdds-form-datetime-md & {\n top: 46px;\n }\n\n .sdds-form-datetime-sm & {\n top: 40px;\n }\n }\n\n &::before {\n left: 50%;\n }\n\n &::after {\n right: 50%;\n }\n\n .sdds-datetime-focus &::before,\n .sdds-datetime-focus &::after {\n width: 50%;\n }\n}\n\n//Helper text\n.sdds-datetime-helper {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n display: block;\n flex-basis: 100%;\n padding-top: var(--sdds-spacing-element-4);\n color: var(--sdds-datetime-helper);\n\n .sdds-helper {\n display: inline-flex;\n gap: 8px;\n }\n}\n\n//Disabled state\n.sdds-form-datetime-disabled {\n .sdds-datetime-container {\n border-bottom-color: transparent;\n }\n\n .datetime-icon {\n svg {\n path {\n fill: var(--sdds-datetime-icon-disabled);\n }\n }\n }\n\n .sdds-datetime-label {\n color: var(--sdds-datetime-label-disabled);\n cursor: not-allowed;\n }\n}\n\n//Success state\n.sdds-form-datetime-success {\n .sdds-datetime-container {\n border-bottom-color: var(--sdds-datetime-border-bottom-success);\n color: var(--sdds-datetime-color-success);\n }\n\n .sdds-datetime-bar {\n &::before,\n &::after {\n background: var(--sdds-datetime-bar-sucess);\n }\n }\n}\n\n//Error State\n.sdds-form-datetime-error {\n .sdds-datetime-helper {\n color: var(--sdds-datetime-helper-error);\n }\n\n .sdds-datetime-container {\n border-bottom-color: var(--sdds-datetime-border-bottom-error);\n }\n\n .sdds-datetime-bar {\n &::before,\n &::after {\n background: var(--sdds-datetime-bar-error);\n }\n }\n .datetime-icon path {\n fill: var(--sdds-datetime-icon-error);\n }\n}\n\n.sdds-datetime-textcounter {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n color: var(--sdds-datetime-textcounter);\n float: right;\n\n & .sdds-datetime-textcounter-divider {\n // font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n color: var(--sdds-datetime-textcounter-divider);\n }\n}\n\n/* datetime picker icon remove testing /\n\ninput[type='datetime-local']::-webkit-inner-spin-button,\ninput[type='datetime-local']::-webkit-calendar-picker-indicator {\n opacity: 0;\n}\n\ninput[type='date']::-webkit-inner-spin-button,\ninput[type='date']::-webkit-calendar-picker-indicator {\n opacity: 0;\n}\n\ninput[type='time']::-webkit-inner-spin-button,\ninput[type='time']::-webkit-calendar-picker-indicator {\n opacity: 0;\n}\n.sdds-mode-variant-primary {\n --sdds-datetime-background: var(--sdds-datetime-background-primary);\n}\n.sdds-mode-variant-secondary {\n --sdds-datetime-background: var(--sdds-datetime-background-secondary);\n}\n","import { Component, State, h, Prop, Listen, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sdds-datetime',\n styleUrl: 'datetime.scss',\n shadow: true,\n})\nexport class Datetime {\n /* Textinput for focus state /\n textInput?: HTMLInputElement;\n\n /* Which input type, text, password or similar /\n @Prop({ reflect: true }) type: 'datetime-local' \| 'date' \| 'time' = 'datetime-local';\n\n /* Value of the input text /\n @Prop({ reflect: true }) value = '';\n\n /* Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM /\n @Prop() defaultValue: string \| 'none' = 'none';\n\n /* Set input in disabled state /\n @Prop() disabled: boolean = false;\n\n /* Size of the input /\n @Prop() size: 'sm' \| 'md' \| '' = '';\n\n /* With setting /\n @Prop() noMinWidth: boolean = false;\n\n /* Set the variant of the the datetime component. /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* Name property /\n @Prop() name = '';\n\n /* Error state of input /\n @Prop() state: string;\n\n /* Autofocus for input /\n @Prop() autofocus: boolean = false;\n\n /* Label text for the component /\n @Prop() label: string = '';\n\n /* Helper text for the component /\n @Prop() helper: string = '';\n\n /* Listen to the focus state of the input /\n @State() focusInput: boolean;\n\n /* Change event for the datetime /\n @Event({\n composed: true,\n bubbles: true,\n cancelable: true,\n })\n customChange: EventEmitter;\n\n getDefaultValue = () => {\n const dateTimeObj = {\n year: this.defaultValue.slice(0, 4),\n month: this.defaultValue.slice(5, 7),\n day: this.defaultValue.slice(8, 10),\n hours: this.defaultValue.slice(11, 13),\n minutes: this.defaultValue.slice(14, 16),\n };\n switch (this.type) {\n case 'datetime-local':\n return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}T${dateTimeObj.hours}:${dateTimeObj.minutes}`;\n case 'date':\n return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}`;\n case 'time':\n return `${this.defaultValue.slice(0, 2)}:${this.defaultValue.slice(3, 5)}`;\n default:\n throw new Error('Invalid type.');\n }\n };\n\n componentWillLoad() {\n if (this.defaultValue !== 'none') {\n this.value = this.getDefaultValue();\n }\n }\n\n // Listener if input enters focus state\n @Listen('focus')\n handleFocusIn() {\n this.focusInput = true;\n }\n\n // Listener if input leaves focus state\n @Listen('focusout')\n handleFocusOut() {\n this.focusInput = false;\n }\n\n // Data input event in value prop\n handleInput(e): void {\n this.value = e.target.value;\n }\n\n // Change event isn't a composed:true by default in for input\n handleChange(e: Event): void {\n this.customChange.emit(e);\n }\n\n /* Set the input as focus when clicking the whole datetime with suffix/prefix */\n handleFocusClick(): void {\n this.textInput.focus();\n }\n\n render() {\n let className = ' sdds-datetime-input';\n if (this.size === 'md') {\n className += `${className}-md`;\n }\n if (this.size === 'sm') {\n className += `${className}-sm`;\n }\n return (\n <div\n class={`\n ${this.noMinWidth ? 'sdds-form-datetime-nomin' : ''}\n ${this.focusInput ? 'sdds-form-datetime sdds-datetime-focus' : ' sdds-form-datetime'}\n ${this.value.length > 0 ? 'sdds-datetime-data' : ''}\n ${this.disabled ? 'sdds-form-datetime-disabled' : ''}\n ${this.size === 'md' ? 'sdds-form-datetime-md' : ''}\n ${this.size === 'sm' ? 'sdds-form-datetime-sm' : ''}\n ${\n this.state === 'error' \|\| this.state === 'success'\n ? `sdds-form-datetime-${this.state}`\n : ''\n }\n ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}\n `}\n >\n {this.label && <div class=\"sdds-datetime-label\">{this.label}</div>}\n <div\n onClick={() => this.handleFocusClick()}\n class=\"sdds-datetime-container sdds-datetime-container\"\n >\n <div class=\"sdds-datetime-input-container\">\n <input\n ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n class={className}\n type={this.type}\n disabled={this.disabled}\n value={this.value}\n autofocus={this.autofocus}\n name={this.name}\n onInput={(e) => this.handleInput(e)}\n onChange={(e) => this.handleChange(e)}\n />\n\n <div class=\"datetime-icon icon-datetime-local\">\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M23.625 2.977a1 1 0 1 0-2 0v2.985l-11.344.01V2.99a1 1 0 1 0-2 0v2.985H6.25a4.2 4.2 0 0 0-4.2 4.2V25.77a4.2 4.2 0 0 0 4.2 4.2h19.54a4.2 4.2 0 0 0 4.2-4.2V10.167a4.2 4.2 0 0 0-4.191-4.2l-2.174-.004V2.977ZM4.05 10.174a2.2 2.2 0 0 1 2.2-2.2l16.376-.013 3.17.006a2.2 2.2 0 0 1 2.195 2.2v1.847H4.05l-.001-1.84Zm0 3.84V25.77a2.2 2.2 0 0 0 2.2 2.2h19.54a2.2 2.2 0 0 0 2.2-2.2V14.014H4.05Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n\n <div class=\"datetime-icon icon-time\">\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path\n d=\"M17 7a1 1 0 1 0-2 0v8a2 2 0 0 0 2 2h6a1 1 0 1 0 0-2h-6V7Z\"\n fill=\"currentColor\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2ZM4 16C4 9.373 9.373 4 16 4s12 5.373 12 12-5.373 12-12 12S4 22.627 4 16Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n </div>\n <div class=\"sdds-datetime-bar\"></div>\n </div>\n\n <div class=\"sdds-datetime-helper\">\n {this.helper && (\n <div class=\"sdds-helper\">\n {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n {this.helper}\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-datetime.js","mappings":"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","names":[],"sources":["./src/components/datetime/datetime.scss?tag=sdds-datetime&encapsulation=shadow","./src/components/datetime/datetime.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@mixin datetime-base {\n @include sdds-box-sizing;\n\n border-radius: 4px 4px 0 0;\n width: 100%;\n box-sizing: border-box;\n margin: 0;\n border: none;\n outline: none;\n height: 100%;\n color: var(--sdds-datetime-color);\n background-color: var(--sdds-datetime-background);\n\n &::placeholder {\n opacity: 1;\n color: var(--sdds-datetime-placeholder);\n }\n\n &:focus::placeholder {\n color: var(--sdds-datetime-placeholder-color-focus);\n }\n\n &:disabled {\n background-color: var(--sdds-datetime-background-disabled);\n color: var(--sdds-datetime-color-disabled);\n cursor: not-allowed;\n\n &::placeholder {\n color: var(--sdds-datetime-placeholder-disabled);\n }\n\n ~ .sdds-datetime-label-inside {\n color: var(--sdds-datetime-label-disabled);\n }\n }\n}\n\n// icons\n\n.sdds-datetime-input,\n.sdds-datetime-input-md,\n.sdds-datetime-input-sm {\n &[type='datetime-local'] {\n ~ .icon-time {\n display: none;\n }\n }\n\n &[type='date'] {\n ~ .icon-time {\n display: none;\n }\n }\n\n &[type='time'] {\n ~ .icon-datetime-local {\n display: none;\n }\n }\n}\n\n//Sizes\n.sdds-datetime-input {\n @include datetime-base;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n}\n\n.sdds-datetime-input-md {\n @include datetime-base;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding: var(--sdds-spacing-element-16);\n}\n\n.sdds-datetime-input-sm {\n @include datetime-base;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding: var(--sdds-spacing-element-16);\n}\n\n//Container for input field and prefix/suffix\n.sdds-datetime-container {\n border-radius: 4px 4px 0 0;\n display: flex;\n position: relative;\n height: 56px;\n box-sizing: border-box;\n background-color: var(--sdds-datetime-background);\n border-bottom: 1px solid var(--sdds-datetime-border-bottom);\n transition: border-bottom-color 200ms ease;\n\n &:hover {\n border-bottom-color: var(--sdds-datetime-border-bottom-hover);\n }\n\n .sdds-form-datetime-md & {\n height: 48px;\n }\n\n .sdds-form-datetime-sm & {\n height: 40px;\n }\n}\n\n.sdds-datetime-input-container {\n position: relative;\n width: 100%;\n\n .datetime-icon {\n height: 20px;\n width: 20px;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n right: 18px;\n pointer-events: none;\n\n path {\n fill: var(--sdds-datetime-icon);\n }\n }\n}\n\n.sdds-datetime-label {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n display: block;\n margin-bottom: var(--sdds-spacing-element-8);\n color: var(--sdds-datetime-label-color);\n}\n\n.sdds-datetime-label-inside {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n position: absolute;\n pointer-events: none;\n color: var(--sdds-datetime-label-inside-color);\n left: 16px;\n}\n\n@mixin placeholder-label {\n &::placeholder {\n color: transparent;\n }\n\n &::input-placeholder {\n color: transparent;\n }\n\n &:placeholder {\n color: transparent;\n }\n\n ::placeholder {\n color: transparent;\n }\n\n //Input field in focus\n &:focus::placeholder {\n transition: color 0.35s ease;\n color: var(--sdds-datetime-placeholder-color-focus);\n }\n}\n\n@mixin label-inside-transition {\n transition: 0.1s ease all;\n}\n\n//Form control\n.sdds-form-datetime {\n display: block;\n min-width: 208px;\n\n &-nomin {\n min-width: auto;\n }\n}\n\n//datetime container with label inside\n//Handling position, focus and transition for label inside\n.sdds-form-datetime.sdds-datetime-container-label-inside {\n .sdds-datetime-input {\n padding-top: var(--sdds-spacing-element-24);\n padding-bottom: 15px;\n\n ~ .sdds-datetime-label-inside {\n top: 20px;\n }\n\n @include placeholder-label;\n }\n\n .sdds-datetime-input-md {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .sdds-datetime-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n .sdds-datetime-input-sm {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .sdds-datetime-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n &.sdds-datetime-focus,\n &.sdds-datetime-data {\n .sdds-datetime-input-sm ~ .sdds-datetime-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n @include label-inside-transition;\n\n top: 8px;\n }\n\n .sdds-datetime-input-md ~ .sdds-datetime-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n @include label-inside-transition;\n\n top: 8px;\n }\n\n .sdds-datetime-input ~ .sdds-datetime-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n @include label-inside-transition;\n\n top: 12px;\n }\n }\n}\n\n//datetime bottom bar when in focus\n.sdds-datetime-bar {\n position: absolute;\n width: 100%;\n\n &::before,\n &::after {\n content: '';\n height: 2px;\n top: 54px;\n width: 0;\n position: absolute;\n background: var(--sdds-datetime-bar);\n transition: 0.35s ease all;\n\n .sdds-form-datetime-md & {\n top: 46px;\n }\n\n .sdds-form-datetime-sm & {\n top: 40px;\n }\n }\n\n &::before {\n left: 50%;\n }\n\n &::after {\n right: 50%;\n }\n\n .sdds-datetime-focus &::before,\n .sdds-datetime-focus &::after {\n width: 50%;\n }\n}\n\n//Helper text\n.sdds-datetime-helper {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n display: block;\n flex-basis: 100%;\n padding-top: var(--sdds-spacing-element-4);\n color: var(--sdds-datetime-helper);\n\n .sdds-helper {\n display: inline-flex;\n gap: 8px;\n }\n}\n\n//Disabled state\n.sdds-form-datetime-disabled {\n .sdds-datetime-container {\n border-bottom-color: transparent;\n }\n\n .datetime-icon {\n svg {\n path {\n fill: var(--sdds-datetime-icon-disabled);\n }\n }\n }\n\n .sdds-datetime-label {\n color: var(--sdds-datetime-label-disabled);\n cursor: not-allowed;\n }\n}\n\n//Success state\n.sdds-form-datetime-success {\n .sdds-datetime-container {\n border-bottom-color: var(--sdds-datetime-border-bottom-success);\n color: var(--sdds-datetime-color-success);\n }\n\n .sdds-datetime-bar {\n &::before,\n &::after {\n background: var(--sdds-datetime-bar-sucess);\n }\n }\n}\n\n//Error State\n.sdds-form-datetime-error {\n .sdds-datetime-helper {\n color: var(--sdds-datetime-helper-error);\n }\n\n .sdds-datetime-container {\n border-bottom-color: var(--sdds-datetime-border-bottom-error);\n }\n\n .sdds-datetime-bar {\n &::before,\n &::after {\n background: var(--sdds-datetime-bar-error);\n }\n }\n .datetime-icon path {\n fill: var(--sdds-datetime-icon-error);\n }\n}\n\n.sdds-datetime-textcounter {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n color: var(--sdds-datetime-textcounter);\n float: right;\n\n & .sdds-datetime-textcounter-divider {\n // font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n color: var(--sdds-datetime-textcounter-divider);\n }\n}\n\n/* datetime picker icon remove testing /\n\ninput[type='datetime-local']::-webkit-inner-spin-button,\ninput[type='datetime-local']::-webkit-calendar-picker-indicator {\n opacity: 0;\n}\n\ninput[type='date']::-webkit-inner-spin-button,\ninput[type='date']::-webkit-calendar-picker-indicator {\n opacity: 0;\n}\n\ninput[type='time']::-webkit-inner-spin-button,\ninput[type='time']::-webkit-calendar-picker-indicator {\n opacity: 0;\n}\n.sdds-mode-variant-primary {\n --sdds-datetime-background: var(--sdds-datetime-background-primary);\n}\n.sdds-mode-variant-secondary {\n --sdds-datetime-background: var(--sdds-datetime-background-secondary);\n}\n","import { Component, State, h, Prop, Listen, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sdds-datetime',\n styleUrl: 'datetime.scss',\n shadow: true,\n})\nexport class Datetime {\n /* Textinput for focus state /\n textInput?: HTMLInputElement;\n\n /* Which input type, text, password or similar /\n @Prop({ reflect: true }) type: 'datetime-local' \| 'date' \| 'time' = 'datetime-local';\n\n /* Value of the input text /\n @Prop({ reflect: true }) value = '';\n\n /* Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM /\n @Prop() defaultValue: string \| 'none' = 'none';\n\n /* Set input in disabled state /\n @Prop() disabled: boolean = false;\n\n /* Size of the input /\n @Prop() size: 'sm' \| 'md' \| '' = '';\n\n /* With setting /\n @Prop() noMinWidth: boolean = false;\n\n /* Set the variant of the the datetime component. /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* Name property /\n @Prop() name = '';\n\n /* Error state of input /\n @Prop() state: string;\n\n /* Autofocus for input /\n @Prop() autofocus: boolean = false;\n\n /* Label text for the component /\n @Prop() label: string = '';\n\n /* Helper text for the component /\n @Prop() helper: string = '';\n\n /* Listen to the focus state of the input /\n @State() focusInput: boolean;\n\n /* Change event for the datetime /\n @Event({\n composed: true,\n bubbles: true,\n cancelable: true,\n })\n customChange: EventEmitter;\n\n getDefaultValue = () => {\n const dateTimeObj = {\n year: this.defaultValue.slice(0, 4),\n month: this.defaultValue.slice(5, 7),\n day: this.defaultValue.slice(8, 10),\n hours: this.defaultValue.slice(11, 13),\n minutes: this.defaultValue.slice(14, 16),\n };\n switch (this.type) {\n case 'datetime-local':\n return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}T${dateTimeObj.hours}:${dateTimeObj.minutes}`;\n case 'date':\n return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}`;\n case 'time':\n return `${this.defaultValue.slice(0, 2)}:${this.defaultValue.slice(3, 5)}`;\n default:\n throw new Error('Invalid type.');\n }\n };\n\n componentWillLoad() {\n if (this.defaultValue !== 'none') {\n this.value = this.getDefaultValue();\n }\n }\n\n // Listener if input enters focus state\n @Listen('focus')\n handleFocusIn() {\n this.focusInput = true;\n }\n\n // Listener if input leaves focus state\n @Listen('focusout')\n handleFocusOut() {\n this.focusInput = false;\n }\n\n // Data input event in value prop\n handleInput(e): void {\n this.value = e.target.value;\n }\n\n // Change event isn't a composed:true by default in for input\n handleChange(e: Event): void {\n this.customChange.emit(e);\n }\n\n /* Set the input as focus when clicking the whole datetime with suffix/prefix */\n handleFocusClick(): void {\n this.textInput.focus();\n }\n\n render() {\n let className = ' sdds-datetime-input';\n if (this.size === 'md') {\n className += `${className}-md`;\n }\n if (this.size === 'sm') {\n className += `${className}-sm`;\n }\n return (\n <div\n class={`\n ${this.noMinWidth ? 'sdds-form-datetime-nomin' : ''}\n ${this.focusInput ? 'sdds-form-datetime sdds-datetime-focus' : ' sdds-form-datetime'}\n ${this.value.length > 0 ? 'sdds-datetime-data' : ''}\n ${this.disabled ? 'sdds-form-datetime-disabled' : ''}\n ${this.size === 'md' ? 'sdds-form-datetime-md' : ''}\n ${this.size === 'sm' ? 'sdds-form-datetime-sm' : ''}\n ${\n this.state === 'error' \|\| this.state === 'success'\n ? `sdds-form-datetime-${this.state}`\n : ''\n }\n ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}\n `}\n >\n {this.label && <div class=\"sdds-datetime-label\">{this.label}</div>}\n <div\n onClick={() => this.handleFocusClick()}\n class=\"sdds-datetime-container sdds-datetime-container\"\n >\n <div class=\"sdds-datetime-input-container\">\n <input\n ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n class={className}\n type={this.type}\n disabled={this.disabled}\n value={this.value}\n autofocus={this.autofocus}\n name={this.name}\n onInput={(e) => this.handleInput(e)}\n onChange={(e) => this.handleChange(e)}\n />\n\n <div class=\"datetime-icon icon-datetime-local\">\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M23.625 2.977a1 1 0 1 0-2 0v2.985l-11.344.01V2.99a1 1 0 1 0-2 0v2.985H6.25a4.2 4.2 0 0 0-4.2 4.2V25.77a4.2 4.2 0 0 0 4.2 4.2h19.54a4.2 4.2 0 0 0 4.2-4.2V10.167a4.2 4.2 0 0 0-4.191-4.2l-2.174-.004V2.977ZM4.05 10.174a2.2 2.2 0 0 1 2.2-2.2l16.376-.013 3.17.006a2.2 2.2 0 0 1 2.195 2.2v1.847H4.05l-.001-1.84Zm0 3.84V25.77a2.2 2.2 0 0 0 2.2 2.2h19.54a2.2 2.2 0 0 0 2.2-2.2V14.014H4.05Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n\n <div class=\"datetime-icon icon-time\">\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path\n d=\"M17 7a1 1 0 1 0-2 0v8a2 2 0 0 0 2 2h6a1 1 0 1 0 0-2h-6V7Z\"\n fill=\"currentColor\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2ZM4 16C4 9.373 9.373 4 16 4s12 5.373 12 12-5.373 12-12 12S4 22.627 4 16Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n </div>\n <div class=\"sdds-datetime-bar\"></div>\n </div>\n\n <div class=\"sdds-datetime-helper\">\n {this.helper && (\n <div class=\"sdds-helper\">\n {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n {this.helper}\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/sdds-dropdown-filter.js CHANGED Viewed

@@ -131,7 +131,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 const SddsDropdownFilter = DropdownFilter;
 const defineCustomElement = defineCustomElement$1;