@scania/tegel 0.0.2 → 0.0.5

package/dist/cjs/sdds-accordion.cjs.entry.js

@@ -2,20 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b98965c7.js');
+const index = require('./index-5ad19933.js');
 
 const accordionCss = ":host{display:block;box-sizing:border-box}:host *{box-sizing:border-box}:host .sdds-accordion-header-icon-start,:host .sdds-accordion-header-icon-end{position:relative}:host(:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start,:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-focus);outline:none}:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start::after,:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end::after{border-color:var(--sdds-accordion-border-focus)}:host(:focus) .disabled,:host(:focus) .disabled *{cursor:not-allowed}:host(:focus) .disabled .sdds-accordion-header-icon-start,:host(:focus) .disabled .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg);outline:none;pointer-events:none}:host(:focus) .disabled .sdds-accordion-header-icon-start::after,:host(:focus) .disabled .sdds-accordion-header-icon-end::after{border-color:transparent}:host(:active) .sdds-accordion-header-icon-start,:host(:active) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-active);outline:none}:host(:active) .disabled,:host(:active) .disabled *{cursor:not-allowed}:host(:active) .disabled .sdds-accordion-header-icon-start,:host(:active) .disabled .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg);outline:none;pointer-events:none}:host(:active) .disabled .sdds-accordion-header-icon-start::after,:host(:active) .disabled .sdds-accordion-header-icon-end::after{border-color:transparent}:host(:last-child){border-bottom:1px solid var(--sdds-accordion-border)}";
 
-const Accordion = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.divider = true;
-    this.modeVariant = null;
-  }
-  render() {
-    return (index.h(index.Host, { class: `sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, index.h("slot", null)));
-  }
-};
+const Accordion = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.modeVariant = null;
+  }
+  render() {
+    return (index.h(index.Host, { class: `sdds-accordion ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, index.h("slot", null)));
+  }
+};
 Accordion.style = accordionCss;
 
 exports.sdds_accordion = Accordion;
+
+//# sourceMappingURL=sdds-accordion.cjs.entry.js.map

package/dist/cjs/sdds-accordion.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-accordion.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,grDAAgrD;;MCOxrD,SAAS;;;uBAE2B,IAAI;;EAEnD,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,KAAK,EAAE,kBAAkB,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IAElGD,qBAAa,CACR,EACP;GACH;;;;;;","names":["h","Host"],"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  /** 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.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/sdds-badges.cjs.entry.js

@@ -2,53 +2,55 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b98965c7.js');
+const index = require('./index-5ad19933.js');
 
 const badgesCss = ":host{--sdds-badges-background-color:var(--sdds-negative);--sdds-badges-color-text:var(--sdds-white);box-sizing:border-box;display:block}:host *{box-sizing:border-box}.sdds-badges{display:block;border-radius:12px;background-color:var(--sdds-badges-background-color);text-align:center}.sdds-badges.sdds-badges-sm{height:8px;width:8px;line-height:8px}.sdds-badges.sdds-badges-lg{height:20px;line-height:20px;width:20px}.sdds-badges.sdds-badges-pill{display:inline-block;width:unset;padding-left:8px;padding-right:8px}.sdds-badges.sdds-badges-hidden{display:none}.sdds-badges-text{font-family:var(--sdds-font-family-semi-condensed-bold);font-size:12px;color:var(--sdds-badges-color-text);font-weight:bold}";
 
-const SddsBadges = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.value = '';
-    this.hidden = false;
-    this.isSmall = false;
-    this.size = 'lg';
-    this.shape = '';
-    this.text = '';
-  }
-  watchProps() {
-    this.checkProps();
-  }
-  componentWillLoad() {
-    this.checkProps();
-    if (this.isSmall) {
-      this.size = 'sm';
-      console.warn('Prop isSmall is deprecated. Use size"small" instead');
-    }
-  }
-  checkProps() {
-    const valueAsNumber = parseInt(this.value);
-    if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {
-      this.shape = this.value.toString().length >= 2 ? 'pill' : '';
-      this.size = 'lg';
-      this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();
-    }
-    else {
-      // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
-      this.value !== '' && this.size !== 'sm'
-        ? console.warn('The provided value is either empty or string, please provide value as number.')
-        : '';
-    }
-  }
-  render() {
-    return (index.h("host", { class: `sdds-badges sdds-badges-${this.size} ${this.shape === 'pill' ? 'sdds-badges-pill' : ''} ${this.hidden ? 'sdds-badges-hidden' : ''}` }, index.h("div", { class: "sdds-badges-text" }, this.text)));
-  }
-  static get watchers() { return {
-    "value": ["watchProps"],
-    "isSmall": ["watchProps"],
-    "size": ["watchProps"]
-  }; }
-};
+const SddsBadges = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.value = '';
+    this.hidden = false;
+    this.isSmall = false;
+    this.size = 'lg';
+    this.shape = '';
+    this.text = '';
+  }
+  watchProps() {
+    this.checkProps();
+  }
+  componentWillLoad() {
+    this.checkProps();
+    if (this.isSmall) {
+      this.size = 'sm';
+      console.warn('Prop isSmall is deprecated. Use size"small" instead');
+    }
+  }
+  checkProps() {
+    const valueAsNumber = parseInt(this.value);
+    if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {
+      this.shape = this.value.toString().length >= 2 ? 'pill' : '';
+      this.size = 'lg';
+      this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();
+    }
+    else {
+      // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
+      this.value !== '' && this.size !== 'sm'
+        ? console.warn('The provided value is either empty or string, please provide value as number.')
+        : '';
+    }
+  }
+  render() {
+    return (index.h("host", { class: `sdds-badges sdds-badges-${this.size} ${this.shape === 'pill' ? 'sdds-badges-pill' : ''} ${this.hidden ? 'sdds-badges-hidden' : ''}` }, index.h("div", { class: "sdds-badges-text" }, this.text)));
+  }
+  static get watchers() { return {
+    "value": ["watchProps"],
+    "isSmall": ["watchProps"],
+    "size": ["watchProps"]
+  }; }
+};
 SddsBadges.style = badgesCss;
 
 exports.sdds_badges = SddsBadges;
+
+//# sourceMappingURL=sdds-badges.cjs.entry.js.map

package/dist/cjs/sdds-badges.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-badges.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,gsBAAgsB;;MCOrsB,UAAU;;;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,QACEA,kBACE,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,IAE7CA,iBAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAO,CAC1C,EACP;GACH;;;;;;;;;;;","names":["h"],"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/cjs/sdds-banner.cjs.entry.js

@@ -2,78 +2,80 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b98965c7.js');
+const index = require('./index-5ad19933.js');
 
-const sddsBannerCss = ":root,.sdds-mode-light{--sdds-link:var(--sdds-blue-500);--sdds-link-hover:var(--sdds-blue-400);--sdds-link-focus:var(--sdds-blue-400);--sdds-link-visited:var(--sdds-grey-900);--sdds-link-disabled:var(--sdds-grey-400)}.sdds-mode-dark{--sdds-link:var(--sdds-blue-300);--sdds-link-hover:var(--sdds-blue-400);--sdds-link-focus:var(--sdds-blue-400);--sdds-link-visited:var(--sdds-blue-400);--sdds-link-disabled:var(--sdds-grey-800)}:host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--sdds-banner-background-error)}:host(.information){background-color:var(--sdds-banner-background-info)}:host{display:flex;background-color:var(--sdds-banner-background-default);z-index:400}:host .banner-icon{padding-left:20px;padding-top:14px;padding-right:12px;color:var(--sdds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--sdds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--sdds-banner-prefix-info-color)}:host .banner-content{color:var(--sdds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .banner-content.no-icon{padding-left:16px}:host .banner-content .banner-header{font:var(--sdds-headline-06);letter-spacing:var(--sdds-headline-06-ls)}:host .banner-content .banner-subheader{margin-top:4px;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .banner-content sdds-link{width:fit-content;margin-top:16px}:host .banner-close{color:var(--sdds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus{outline:none}:host .banner-close button:focus sdds-icon{outline:2px solid var(--sdds-link-focus)}";
+const sddsBannerCss = ":root,.sdds-mode-light{--sdds-link:var(--sdds-blue-500);--sdds-link-hover:var(--sdds-blue-400);--sdds-link-focus:var(--sdds-blue-400);--sdds-link-visited:var(--sdds-grey-900);--sdds-link-disabled:var(--sdds-grey-400)}.sdds-mode-dark{--sdds-link:var(--sdds-blue-300);--sdds-link-hover:var(--sdds-blue-400);--sdds-link-focus:var(--sdds-blue-400);--sdds-link-visited:var(--sdds-blue-400);--sdds-link-disabled:var(--sdds-grey-800)}:host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--sdds-banner-background-error)}:host(.information){background-color:var(--sdds-banner-background-info)}:host{display:flex;background-color:var(--sdds-banner-background-default);z-index:400}:host .banner-icon{padding-left:20px;padding-top:14px;padding-right:12px;color:var(--sdds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--sdds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--sdds-banner-prefix-info-color)}:host .banner-content{color:var(--sdds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .banner-content.no-icon{padding-left:16px}:host .banner-content .banner-header{font:var(--sdds-headline-06);letter-spacing:var(--sdds-headline-06-ls)}:host .banner-content .banner-subheader{margin-top:4px;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .banner-content sdds-link{width:fit-content;margin-top:16px}:host .banner-close{color:var(--sdds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none;color:var(--sdds-banner-x-color)}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus{outline:none}:host .banner-close button:focus sdds-icon{outline:2px solid var(--sdds-link-focus)}";
 
-const SddsBanner = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sddsClose = index.createEvent(this, "sddsClose", 7);
-    this.handleClose = () => {
-      const sddsCloseEvent = this.sddsClose.emit({
-        bannerId: this.bannerId,
-        hidden: this.hidden,
-      });
-      if (!sddsCloseEvent.defaultPrevented) {
-        this.hidden = true;
-      }
-    };
-    this.icon = undefined;
-    this.header = undefined;
-    this.subheader = undefined;
-    this.linkText = undefined;
-    this.href = undefined;
-    this.linkTarget = '_self';
-    this.linkRel = 'noopener';
-    this.type = 'none';
-    this.bannerId = crypto.randomUUID();
-    this.persistent = false;
-    this.hidden = false;
-  }
-  /** Hides the banner. */
-  async hideBanner() {
-    const sddsCloseEvent = this.sddsClose.emit({
-      bannerId: this.bannerId,
-      hidden: this.hidden,
-    });
-    if (!sddsCloseEvent.defaultPrevented) {
-      this.hidden = true;
-    }
-    return {
-      bannerId: this.bannerId,
-      hidden: true,
-    };
-  }
-  /** Shows the banner */
-  async showBanner() {
-    const sddsCloseEvent = this.sddsClose.emit({
-      bannerId: this.bannerId,
-      hidden: this.hidden,
-    });
-    if (!sddsCloseEvent.defaultPrevented) {
-      this.hidden = false;
-    }
-    return {
-      bannerId: this.bannerId,
-      hidden: false,
-    };
-  }
-  connectedCallback() {
-    if (this.type === 'error') {
-      this.icon = 'error';
-    }
-    else if (this.type === 'information') {
-      this.icon = 'info';
-    }
-  }
-  render() {
-    return (index.h(index.Host, { role: "banner", "aria-hidden": `${this.hidden}`, "aria-live": this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: `${this.type} ${this.hidden ? 'hide' : 'show'}` }, this.icon && (index.h("div", { class: `banner-icon ${this.type}` }, index.h("sdds-icon", { name: this.icon, size: "20px" }))), index.h("div", { class: `banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}` }, this.header && index.h("span", { class: `banner-header` }, this.header), this.subheader && index.h("span", { class: `banner-subheader` }, this.subheader), this.linkText && this.href && (index.h("sdds-link", { "link-href": this.href, rel: this.linkRel, "link-target": this.linkTarget }, this.linkText))), !this.persistent && (index.h("div", { class: `banner-close` }, index.h("button", { onClick: () => {
-        this.handleClose();
-      } }, index.h("sdds-icon", { name: "cross", size: "20px" }))))));
-  }
-  get host() { return index.getElement(this); }
-};
+const SddsBanner = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sddsClose = index.createEvent(this, "sddsClose", 7);
+    this.handleClose = () => {
+      const sddsCloseEvent = this.sddsClose.emit({
+        bannerId: this.bannerId,
+        hidden: this.hidden,
+      });
+      if (!sddsCloseEvent.defaultPrevented) {
+        this.hidden = true;
+      }
+    };
+    this.icon = undefined;
+    this.header = undefined;
+    this.subheader = undefined;
+    this.linkText = undefined;
+    this.href = undefined;
+    this.linkTarget = '_self';
+    this.linkRel = 'noopener';
+    this.type = 'none';
+    this.bannerId = crypto.randomUUID();
+    this.persistent = false;
+    this.hidden = false;
+  }
+  /** Hides the banner. */
+  async hideBanner() {
+    const sddsCloseEvent = this.sddsClose.emit({
+      bannerId: this.bannerId,
+      hidden: this.hidden,
+    });
+    if (!sddsCloseEvent.defaultPrevented) {
+      this.hidden = true;
+    }
+    return {
+      bannerId: this.bannerId,
+      hidden: true,
+    };
+  }
+  /** Shows the banner */
+  async showBanner() {
+    const sddsCloseEvent = this.sddsClose.emit({
+      bannerId: this.bannerId,
+      hidden: this.hidden,
+    });
+    if (!sddsCloseEvent.defaultPrevented) {
+      this.hidden = false;
+    }
+    return {
+      bannerId: this.bannerId,
+      hidden: false,
+    };
+  }
+  connectedCallback() {
+    if (this.type === 'error') {
+      this.icon = 'error';
+    }
+    else if (this.type === 'information') {
+      this.icon = 'info';
+    }
+  }
+  render() {
+    return (index.h(index.Host, { role: "banner", "aria-hidden": `${this.hidden}`, "aria-live": this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: `${this.type} ${this.hidden ? 'hide' : 'show'}` }, this.icon && (index.h("div", { class: `banner-icon ${this.type}` }, index.h("sdds-icon", { name: this.icon, size: "20px" }))), index.h("div", { class: `banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}` }, this.header && index.h("span", { class: `banner-header` }, this.header), this.subheader && index.h("span", { class: `banner-subheader` }, this.subheader), this.linkText && this.href && (index.h("sdds-link", { "link-href": this.href, rel: this.linkRel, "link-target": this.linkTarget }, this.linkText))), !this.persistent && (index.h("div", { class: `banner-close` }, index.h("button", { onClick: () => {
+        this.handleClose();
+      } }, index.h("sdds-icon", { name: "cross", size: "20px" }))))));
+  }
+  get host() { return index.getElement(this); }
+};
 SddsBanner.style = sddsBannerCss;
 
 exports.sdds_banner = SddsBanner;
+
+//# sourceMappingURL=sdds-banner.cjs.entry.js.map

package/dist/cjs/sdds-banner.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-banner.entry.cjs.js","mappings":"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","names":["h","Host"],"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-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      color: var(--sdds-banner-x-color);\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/cjs/sdds-block.cjs.entry.js

@@ -2,31 +2,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b98965c7.js');
+const index = require('./index-5ad19933.js');
 
 const sddsBlockCss = ".sdds-block-webcomponent{box-sizing:border-box;color:var(--sdds-block-color);border-radius:4px;padding:16px;font:var(--sdds-body-01);letter-spacing:var(--sdds-body-01-ls);background-color:var(--sdds-block-background)}.sdds-block-webcomponent *{box-sizing:border-box}.sdds-mode-variant-primary{--sdds-block-background:var(--sdds-block-background-primary);--sdds-block-background-nested:var(--sdds-block-background-nested-primary)}.sdds-mode-variant-secondary{--sdds-block-background:var(--sdds-block-background-secondary);--sdds-block-background-nested:var(--sdds-block-background-nested-secondary)}";
 
-const SddsBlock = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.modeVariant = null;
-  }
-  connectedCallback() {
-    this.children = Array.from(this.host.children).filter((item) => item.tagName === 'SDDS-BLOCK');
-    this.children.forEach((item) => {
-      if (!this.modeVariant) {
-        item.setAttribute('mode-variant', 'secondary');
-      }
-      else {
-        item.setAttribute('mode-variant', this.modeVariant === 'primary' ? 'secondary' : 'primary');
-      }
-    });
-  }
-  render() {
-    return (index.h("div", { class: `sdds-block-webcomponent ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, index.h("slot", null)));
-  }
-  get host() { return index.getElement(this); }
-};
+const SddsBlock = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.modeVariant = null;
+  }
+  connectedCallback() {
+    this.children = Array.from(this.host.children).filter((item) => item.tagName === 'SDDS-BLOCK');
+    this.children.forEach((item) => {
+      if (!this.modeVariant) {
+        item.setAttribute('mode-variant', 'secondary');
+      }
+      else {
+        item.setAttribute('mode-variant', this.modeVariant === 'primary' ? 'secondary' : 'primary');
+      }
+    });
+  }
+  render() {
+    return (index.h("div", { class: `sdds-block-webcomponent ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, index.h("slot", null)));
+  }
+  get host() { return index.getElement(this); }
+};
 SddsBlock.style = sddsBlockCss;
 
 exports.sdds_block = SddsBlock;
+
+//# sourceMappingURL=sdds-block.cjs.entry.js.map

package/dist/cjs/sdds-block.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-block.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,wlBAAwlB;;MCQhmB,SAAS;;;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,QACEA,iBACE,KAAK,EAAE,2BAA2B,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IAE3GA,qBAAa,CACT,EACN;GACH;;;;;;;","names":["h"],"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}