@scania/tegel 0.0.5 → 0.0.6

package/dist/components/sdds-link2.js

@@ -1,46 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const sddsLinkCss = "a{cursor:pointer;outline:none;color:var(--sdds-link)}a:active{color:var(--sdds-link);text-decoration:underline;text-decoration-color:var(--sdds-link)}a:hover{color:var(--sdds-link-hover);text-decoration:underline;text-decoration-color:var(--sdds-link-hover)}a:visited{color:var(--sdds-link-visited);text-decoration-color:var(--sdds-link-visited)}a:focus{color:var(--sdds-link-focus);text-decoration:none;outline:2px solid var(--sdds-link-focus);outline-offset:-2px}a.disabled{color:var(--sdds-link-disabled);text-decoration-color:var(--sdds-link-disabled);pointer-events:none}a.no-underline{text-decoration:none}a.no-underline:hover{text-decoration:none}";
-
-const SddsLink = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.href = undefined;
-    this.target = '_self';
-    this.disabled = false;
-    this.underline = true;
-    this.rel = 'noopener';
-  }
-  render() {
-    return (h("a", { class: `
-        ${this.disabled ? 'disabled' : ''}
-        ${this.underline ? '' : 'no-underline'}
-        
-        `, href: this.href, target: this.target, rel: this.rel }, h("slot", null)));
-  }
-  static get style() { return sddsLinkCss; }
-}, [4, "sdds-link", {
-    "href": [1],
-    "target": [1],
-    "disabled": [4],
-    "underline": [4],
-    "rel": [1]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-link"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-link":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsLink);
-      }
-      break;
-  } });
-}
-
-export { SddsLink as S, defineCustomElement as d };
-
-//# sourceMappingURL=sdds-link2.js.map

package/dist/components/sdds-link2.js.map

@@ -1 +0,0 @@
-{"file":"sdds-link2.js","mappings":";;AAAA,MAAM,WAAW,GAAG,gpBAAgpB;;MCOvpB,QAAQ;;;;;kBAKuC,OAAO;oBAGrC,KAAK;qBAGJ,IAAI;eAGX,UAAU;;EAEhC,MAAM;IACJ,QACE,SACE,KAAK,EAAE;UACL,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,cAAc;;SAErC,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,IAEb,eAAa,CACX,EACJ;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/link/sdds-link.scss?tag=sdds-link","./src/components/link/sdds-link.tsx"],"sourcesContent":["a {\n  cursor: pointer;\n  outline: none;\n  color: var(--sdds-link);\n\n  &:active {\n    color: var(--sdds-link);\n    text-decoration: underline;\n    text-decoration-color: var(--sdds-link);\n  }\n\n  &:hover {\n    color: var(--sdds-link-hover);\n    text-decoration: underline;\n    text-decoration-color: var(--sdds-link-hover);\n  }\n\n  &:visited {\n    color: var(--sdds-link-visited);\n    text-decoration-color: var(--sdds-link-visited);\n  }\n\n  &:focus {\n    color: var(--sdds-link-focus);\n    text-decoration: none;\n    outline: 2px solid var(--sdds-link-focus);\n    outline-offset: -2px;\n  }\n\n  &.disabled {\n    color: var(--sdds-link-disabled);\n    text-decoration-color: var(--sdds-link-disabled);\n    pointer-events: none;\n  }\n\n  &.no-underline {\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: none;\n    }\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-link',\n  styleUrl: 'sdds-link.scss',\n  shadow: false,\n})\nexport class SddsLink {\n  /** URL for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** Disables the link */\n  @Prop() disabled: boolean = false;\n\n  /** Displays the link with an underline. */\n  @Prop() underline: boolean = true;\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() rel: string = 'noopener';\n\n  render() {\n    return (\n      <a\n        class={`\n        ${this.disabled ? 'disabled' : ''}\n        ${this.underline ? '' : 'no-underline'}\n        \n        `}\n        href={this.href}\n        target={this.target}\n        rel={this.rel}\n      >\n        <slot></slot>\n      </a>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-navigation-tabs-button.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface SddsNavigationTabsButton extends Components.SddsNavigationTabsButton, HTMLElement {}
-export const SddsNavigationTabsButton: {
-  prototype: SddsNavigationTabsButton;
-  new (): SddsNavigationTabsButton;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/sdds-navigation-tabs-button.js

@@ -1,41 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const sddsNavigationTabsButtonCss = ":host{box-sizing:border-box}:host *{box-sizing:border-box}:host button{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);padding:18px 0;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out;white-space:nowrap;background-color:transparent;border:0}:host button.selected{color:var(--sdds-navigation-tabs-tab-color-selected)}:host button.selected::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}:host button .label{padding:8px 4px}:host button:focus-visible{outline:none}:host button:focus-visible .label{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host button:hover{color:var(--sdds-navigation-tabs-tab-color-hover);opacity:1}:host button:hover::after{width:100%}:host button.disabled{color:var(--sdds-navigation-tabs-tab-color-disabled);pointer-events:none}:host button.disabled .label{opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled)}:host button::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-navigation-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out;z-index:1}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
-
-const SddsNavigationTabsButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.disabled = false;
-    this.selected = false;
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("button", { class: `${this.selected ? 'selected' : ''}
-         ${this.disabled ? 'disabled' : ''}`, disabled: this.disabled }, h("div", { class: "label" }, h("slot", null)))));
-  }
-  static get style() { return sddsNavigationTabsButtonCss; }
-}, [1, "sdds-navigation-tabs-button", {
-    "disabled": [4],
-    "selected": [4]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-navigation-tabs-button"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-navigation-tabs-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsNavigationTabsButton$1);
-      }
-      break;
-  } });
-}
-
-const SddsNavigationTabsButton = SddsNavigationTabsButton$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SddsNavigationTabsButton, defineCustomElement };
-
-//# sourceMappingURL=sdds-navigation-tabs-button.js.map

package/dist/components/sdds-navigation-tabs-button.js.map

@@ -1 +0,0 @@
-{"file":"sdds-navigation-tabs-button.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,+zCAA+zC;;MCOt1CA,0BAAwB;;;;;oBAEP,KAAK;oBAGL,KAAK;;EAEjC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,cACE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;WACxC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,WAAK,KAAK,EAAC,OAAO,IAChB,eAAa,CACT,CACC,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsNavigationTabsButton"],"sources":["./src/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.scss?tag=sdds-navigation-tabs-button&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  button {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-navigation-tabs-tab-color);\n    padding: 18px 0;\n    margin-right: 32px;\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out;\n    white-space: nowrap;\n    background-color: transparent;\n    border: 0;\n\n    &.selected {\n      color: var(--sdds-navigation-tabs-tab-color-selected);\n\n      &::after {\n        width: 100%;\n        background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);\n      }\n    }\n\n    .label {\n      padding: 8px 4px;\n    }\n\n    &:focus-visible {\n      outline: none;\n\n      .label {\n        @include sdds-focus-state;\n      }\n    }\n\n    &:hover {\n      color: var(--sdds-navigation-tabs-tab-color-hover);\n      opacity: 1;\n\n      &::after {\n        width: 100%;\n      }\n    }\n\n    &.disabled {\n      color: var(--sdds-navigation-tabs-tab-color-disabled);\n      pointer-events: none;\n\n      .label {\n        opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);\n      }\n    }\n\n    &::after {\n      content: ' ';\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      margin-left: auto;\n      width: 0;\n      margin-right: auto;\n      height: 2px;\n      background-color: var(--sdds-navigation-tabs-tab-indicator-background-hover);\n      transition: width 0.15s ease-in-out;\n      z-index: 1;\n    }\n  }\n}\n\n:host(.first) {\n  margin-left: 32px;\n}\n\n:host(.last) {\n  margin-right: 32px;\n}","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-navigation-tabs-button',\n  styleUrl: 'sdds-navigation-tabs-button.scss',\n  shadow: true,\n})\nexport class SddsNavigationTabsButton {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  /** Marks the tab as the selected one. */\n  @Prop() selected: boolean = false;\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <button\n          class={`${this.selected ? 'selected' : ''}\n         ${this.disabled ? 'disabled' : ''}`}\n          disabled={this.disabled}\n        >\n          <div class=\"label\">\n            <slot></slot>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-navigation-tabs-link.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface SddsNavigationTabsLink extends Components.SddsNavigationTabsLink, HTMLElement {}
-export const SddsNavigationTabsLink: {
-  prototype: SddsNavigationTabsLink;
-  new (): SddsNavigationTabsLink;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/sdds-navigation-tabs-link.js

@@ -1,49 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const sddsNavigationTabsLinkCss = ":host{box-sizing:border-box}:host *{box-sizing:border-box}:host a{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);padding:18px 0;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out;white-space:nowrap;background-color:transparent;border:0}:host a.selected{color:var(--sdds-navigation-tabs-tab-color-selected)}:host a.selected::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}:host a .label{padding:8px 4px}:host a:focus-visible{outline:none}:host a:focus-visible .label{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host a:hover{color:var(--sdds-navigation-tabs-tab-color-hover);opacity:1}:host a:hover::after{width:100%}:host a.disabled{color:var(--sdds-navigation-tabs-tab-color-disabled);pointer-events:none}:host a.disabled .label{opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled)}:host a::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-navigation-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out;z-index:1}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
-
-const SddsNavigationTabsLink$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.disabled = false;
-    this.selected = false;
-    this.href = undefined;
-    this.target = '_self';
-    this.rel = 'noopener';
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("a", { class: `
-        ${this.selected ? 'selected' : ''}
-        ${this.disabled ? 'disabled' : ''}
-        `, href: this.href, target: this.target, rel: this.rel }, h("div", { class: "label" }, h("slot", null)))));
-  }
-  static get style() { return sddsNavigationTabsLinkCss; }
-}, [1, "sdds-navigation-tabs-link", {
-    "disabled": [4],
-    "selected": [4],
-    "href": [1],
-    "target": [1],
-    "rel": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-navigation-tabs-link"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-navigation-tabs-link":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsNavigationTabsLink$1);
-      }
-      break;
-  } });
-}
-
-const SddsNavigationTabsLink = SddsNavigationTabsLink$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SddsNavigationTabsLink, defineCustomElement };
-
-//# sourceMappingURL=sdds-navigation-tabs-link.js.map

package/dist/components/sdds-navigation-tabs-link.js.map

@@ -1 +0,0 @@
-{"file":"sdds-navigation-tabs-link.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,wwCAAwwC;;MCO7xCA,wBAAsB;;;;;oBAEL,KAAK;oBAGL,KAAK;;kBAMyB,OAAO;eAG3C,UAAU;;EAEhC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,SACE,KAAK,EAAE;UACP,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;SAChC,EACC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,IAEb,WAAK,KAAK,EAAC,OAAO,IAChB,eAAa,CACT,CACJ,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsNavigationTabsLink"],"sources":["./src/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.scss?tag=sdds-navigation-tabs-link&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  a {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-navigation-tabs-tab-color);\n    padding: 18px 0;\n    margin-right: 32px;\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out;\n    white-space: nowrap;\n    background-color: transparent;\n    border: 0;\n\n    &.selected {\n      color: var(--sdds-navigation-tabs-tab-color-selected);\n\n      &::after {\n        width: 100%;\n        background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);\n      }\n    }\n\n    .label {\n      padding: 8px 4px;\n    }\n\n    &:focus-visible {\n      outline: none;\n\n      .label {\n        @include sdds-focus-state;\n      }\n    }\n\n    &:hover {\n      color: var(--sdds-navigation-tabs-tab-color-hover);\n      opacity: 1;\n\n      &::after {\n        width: 100%;\n      }\n    }\n\n    &.disabled {\n      color: var(--sdds-navigation-tabs-tab-color-disabled);\n      pointer-events: none;\n\n      .label {\n        opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);\n      }\n    }\n\n    &::after {\n      content: ' ';\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      margin-left: auto;\n      width: 0;\n      margin-right: auto;\n      height: 2px;\n      background-color: var(--sdds-navigation-tabs-tab-indicator-background-hover);\n      transition: width 0.15s ease-in-out;\n      z-index: 1;\n    }\n  }\n}\n\n:host(.first) {\n  margin-left: 32px;\n}\n\n:host(.last) {\n  margin-right: 32px;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-navigation-tabs-link',\n  styleUrl: 'sdds-navigation-tabs-link.scss',\n  shadow: true,\n})\nexport class SddsNavigationTabsLink {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  /** Marks the tab as the selected one. */\n  @Prop() selected: boolean = false;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_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() rel: string = 'noopener';\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <a\n          class={`\n        ${this.selected ? 'selected' : ''}\n        ${this.disabled ? 'disabled' : ''}\n        `}\n          href={this.href}\n          target={this.target}\n          rel={this.rel}\n        >\n          <div class=\"label\">\n            <slot></slot>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}