@scania/tegel 0.0.8 → 0.0.10

package/dist/collection/components/footer/webcomponent/sdds-footer-group/sdds-footer-group.css

@@ -1,76 +0,0 @@
-:host {
-  display: block;
-}
-:host .footer-top-title {
-  font: var(--sdds-headline-07);
-  letter-spacing: var(--sdds-headline-07-ls);
-  opacity: var(--sdds-footer-top-title-opacity);
-  color: var(--sdds-footer-top-links);
-  padding-bottom: 8px;
-}
-:host button.footer-top-title-button {
-  display: none;
-  border: none;
-  width: 100%;
-  font: var(--sdds-headline-07);
-  letter-spacing: var(--sdds-headline-07-ls);
-  color: var(--sdds-footer-top-links);
-  background-color: transparent;
-  text-align: left;
-  padding: 19px 24px;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--sdds-footer-top-divider);
-}
-:host button.footer-top-title-button.expanded {
-  border-bottom: none;
-}
-:host button.footer-top-title-button.expanded sdds-icon {
-  transform: rotateZ(180deg);
-}
-:host button.footer-top-title-button:hover {
-  cursor: pointer;
-}
-:host button.footer-top-title-button:active {
-  background-color: var(--sdds-footer-top-button-active);
-}
-:host button.footer-top-title-button:focus-visible {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
-}
-:host button.footer-top-title-button sdds-icon {
-  transition: transform 0.2s ease-in-out;
-}
-:host [role=list] {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  gap: 8px;
-}
-:host [role=list].left, :host [role=list].right {
-  gap: 24px;
-}
-:host [role=list].top-part-child {
-  flex-direction: column;
-}
-@media all and (max-width: 992px) {
-  :host [role=list].left:not(.top-part-child) {
-    flex-direction: column;
-  }
-  :host [role=list].left:not(.top-part-child).left, :host [role=list].left:not(.top-part-child).right {
-    gap: 8px;
-  }
-  :host [role=list].top-part-child.closed {
-    display: none;
-  }
-  :host [role=list].top-part-child {
-    gap: 0;
-  }
-  :host .footer-top-title {
-    display: none;
-  }
-  :host button.footer-top-title-button {
-    display: flex;
-    align-items: center;
-  }
-}

package/dist/collection/components/footer/webcomponent/sdds-footer-group/sdds-footer-group.js

@@ -1,63 +0,0 @@
-import { Host, h } from '@stencil/core';
-export class SddsFooterGroup {
-  constructor() {
-    /** If the group is placed in the main part of the footer it can have either left or right as a slot position otherwise undefined. */
-    this.slotPostion = null;
-    /** Indicates the if group is part of the top part of the footer. */
-    this.topPartGroup = false;
-    this.titleText = undefined;
-    this.open = false;
-  }
-  connectedCallback() {
-    this.topPartGroup = this.host.parentElement.slot === 'top';
-    if (!this.topPartGroup) {
-      this.slotPostion = this.host.parentElement.slot === 'main-right' ? 'right' : 'left';
-    }
-  }
-  render() {
-    return (h(Host, null, this.titleText && this.topPartGroup && (h("div", { class: "footer-top-title" }, this.titleText)), this.titleText && this.topPartGroup && (h("button", { onClick: () => {
-        this.open = !this.open;
-      }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, h("sdds-icon", { name: "chevron_down", size: "20px" }))), h("div", { role: "list", class: `${this.slotPostion ? this.slotPostion : ''}
-            ${this.topPartGroup ? 'top-part-child' : ''}
-            ${this.open ? 'expanded' : 'closed'}` }, h("slot", null))));
-  }
-  static get is() { return "sdds-footer-group"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sdds-footer-group.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sdds-footer-group.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "titleText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Title text for the link group, only valid on top part of footer."
-        },
-        "attribute": "title-text",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "open": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-}

package/dist/collection/components/footer/webcomponent/sdds-footer-item/sdds-footer-item.css

@@ -1,45 +0,0 @@
-[role=listitem] ::slotted(*) {
-  font: var(--sdds-headline-06);
-  letter-spacing: var(--sdds-headline-06-ls);
-  color: var(--sdds-footer-main-links);
-  opacity: var(--sdds-footer-main-links-opacity);
-  text-decoration: none;
-}
-[role=listitem] ::slotted(*:focus-visible) {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
-}
-[role=listitem] ::slotted(*:hover) {
-  text-decoration: underline;
-}
-[role=listitem].top-part-child ::slotted(*) {
-  color: var(--sdds-footer-top-links);
-  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 18px;
-}
-[role=listitem].top-part-child ::slotted(*:focus-visible) {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
-}
-
-@media all and (max-width: 992px) {
-  [role=listitem].top-part-child {
-    border-bottom: 1px solid var(--sdds-footer-top-divider);
-  }
-  [role=listitem].top-part-child ::slotted(*) {
-    display: block;
-    height: 100%;
-    padding: 19px 40px;
-    font-weight: normal;
-  }
-  [role=listitem].top-part-child ::slotted(*:hover) {
-    text-decoration: underline;
-    background-color: var(--sdds-footer-top-links-background-hover);
-  }
-  [role=listitem].top-part-child ::slotted(*:focus-visible) {
-    outline: 2px solid var(--sdds-blue-400);
-    outline-offset: -2px;
-  }
-}

package/dist/collection/components/footer/webcomponent/sdds-footer-item/sdds-footer-item.js

@@ -1,25 +0,0 @@
-import { h } from '@stencil/core';
-export class SddsFooterItem {
-  constructor() {
-    this.parentIsTopPart = false;
-  }
-  connectedCallback() {
-    this.parentIsTopPart = this.host.closest('sdds-footer-group').parentElement.slot === 'top';
-  }
-  render() {
-    return (h("div", { role: "listitem", class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", null)));
-  }
-  static get is() { return "sdds-footer-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sdds-footer-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sdds-footer-item.css"]
-    };
-  }
-  static get elementRef() { return "host"; }
-}

package/dist/collection/components/footer/webcomponent/sdds-footer.css

@@ -1,85 +0,0 @@
-:host {
-  display: block;
-}
-:host .footer-top {
-  background-color: var(--sdds-footer-top-background);
-  padding: 40px;
-}
-:host .footer-top ::slotted(*) {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  row-gap: 40px;
-  width: 100%;
-}
-:host .footer-main {
-  background-color: var(--sdds-footer-main-background);
-  padding: 0 40px;
-}
-:host .footer-main-top {
-  padding: 40px 0;
-  display: flex;
-  justify-content: space-between;
-}
-:host .footer-bottom-right ::slotted(*),
-:host .footer-bottom-left ::slotted(*) {
-  display: flex;
-  column-gap: 24px;
-}
-:host .footer-main-bottom {
-  padding: 40px 0;
-  display: flex;
-  justify-content: space-between;
-  border-top: 1px solid var(--sdds-footer-main-divider);
-}
-:host .footer-main-bottom small.copyright {
-  margin: 0;
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-footer-main-copyright);
-}
-:host .footer-main-bottom .brand {
-  background-image: var(--sdds-background-image-scania-wordmark-white-svg);
-  background-repeat: no-repeat;
-  background-size: 117px;
-  background-position: right;
-  width: 117px;
-  height: 20px;
-}
-:host .footer-main-bottom .brand p {
-  color: transparent;
-  padding: 0;
-  margin: 0;
-  height: 100%;
-  visibility: hidden;
-}
-@media all and (max-width: 992px) {
-  :host .footer-top {
-    padding: 0;
-  }
-  :host .footer-top ::slotted(*) {
-    display: block;
-    width: 100%;
-  }
-  :host .footer-main {
-    padding: 0 24px;
-  }
-  :host .footer-main-top {
-    flex-direction: column;
-    row-gap: 48px;
-    padding: 24px 0;
-  }
-  :host .footer-bottom-left ::slotted(*) {
-    flex-direction: column;
-    gap: 8px;
-  }
-  :host .footer-main-bottom {
-    flex-direction: column;
-    padding-bottom: 32px;
-  }
-  :host .footer-main-bottom p.copyright {
-    padding-bottom: 96px;
-  }
-  :host .footer-main-bottom .brand {
-    width: 100%;
-  }
-}

package/dist/collection/components/footer/webcomponent/sdds-footer.js

@@ -1,54 +0,0 @@
-import { h } from '@stencil/core';
-import { Host } from '@stencil/core/internal';
-export class SddsFooter {
-  constructor() {
-    this.modeVariant = null;
-    this.hasTopPart = undefined;
-  }
-  connectedCallback() {
-    this.hasTopPart = Array.from(this.host.children).some((element) => element.slot === 'top');
-  }
-  render() {
-    return (h(Host, { class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("footer", null, this.hasTopPart && (h("div", { class: "footer-top" }, h("slot", { name: "top" }))), h("div", { class: "footer-main" }, h("div", { class: "footer-main-top" }, h("div", { class: "footer-bottom-left" }, h("slot", { name: "main-left" })), h("div", { class: "footer-bottom-right" }, h("slot", { name: "main-right" }))), h("div", { class: "footer-main-bottom" }, h("small", { class: "copyright" }, "Copyright \u00A9 ", new Date().getFullYear(), " Scania"), h("div", { class: "brand" }, h("p", null, "Scania")))))));
-  }
-  static get is() { return "sdds-footer"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sdds-footer.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sdds-footer.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "modeVariant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary'",
-          "resolved": "\"primary\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Mode variant of the component, based on current mode."
-        },
-        "attribute": "mode-variant",
-        "reflect": false,
-        "defaultValue": "null"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasTopPart": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-}

package/dist/collection/components/header/webcomponent/core-header-item/core-header-item.css

@@ -1,24 +0,0 @@
-:host {
-  font: var(--sdds-headline-07);
-  letter-spacing: var(--sdds-headline-07-ls);
-  color: var(--sdds-header-nav-item-color);
-}
-:host .item {
-  all: unset;
-  box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: var(--sdds-header-height);
-  height: var(--sdds-header-height);
-  margin: 0;
-}
-:host .item * {
-  box-sizing: border-box;
-}
-:host slot {
-  white-space: nowrap;
-}
-:host ::slotted(svg) {
-  font-size: 20px;
-}

package/dist/collection/components/header/webcomponent/core-header-item/core-header-item.js

@@ -1,18 +0,0 @@
-import { h, Host } from '@stencil/core';
-export class CoreHeaderItem {
-  render() {
-    return (h(Host, null, h("div", { class: "item" }, h("slot", null))));
-  }
-  static get is() { return "sdds-core-header-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["core-header-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["core-header-item.css"]
-    };
-  }
-}

package/dist/collection/components/header/webcomponent/header-brand-symbol/header-brand-symbol.css

@@ -1,14 +0,0 @@
-:host sdds-header-item {
-  display: none;
-}
-:host sdds-header-item a {
-  background-image: var(--sdds-background-image-scania-symbol-svg), var(--sdds-background-image-scania-symbol-png);
-  background-size: 30px auto;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-@media (min-width: 992px) {
-  :host sdds-header-item {
-    display: block;
-  }
-}

package/dist/collection/components/header/webcomponent/header-brand-symbol/header-brand-symbol.js

@@ -1,46 +0,0 @@
-import { h, Host } from '@stencil/core';
-import { inheritAriaAttributes } from '../../../../utils/utils';
-export class HeaderBrandSymbol {
-  constructor() {
-    this.linkHref = 'https://www.scania.com';
-  }
-  render() {
-    const inheritedLinkProps = Object.assign({}, inheritAriaAttributes(this.host));
-    return (h(Host, null, h("sdds-header-item", null, h("a", Object.assign({}, inheritedLinkProps, { href: this.linkHref })))));
-  }
-  static get is() { return "sdds-header-brand-symbol"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["header-brand-symbol.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["header-brand-symbol.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "linkHref": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The href for the logo link."
-        },
-        "attribute": "link-href",
-        "reflect": false,
-        "defaultValue": "'https://www.scania.com'"
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-}

package/dist/collection/components/header/webcomponent/header-component.css

@@ -1,56 +0,0 @@
-/*
-  Contains spacing variables for the layout
-*/
-html,
-:root {
-  --sdds-nav-dropdown-menu-box: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
-  --sdds-nav-dropdown-item-border-radius: 0 0 4px 4px;
-  --sdds-font-family-headline: "Scania Sans Headline", arial, helvetica, sans-serif;
-}
-
-sdds-header {
-  display: block;
-  height: var(--sdds-header-height);
-  background-color: var(--sdds-header-background);
-  width: 100%;
-  z-index: 300;
-}
-
-nav {
-  box-sizing: border-box;
-  background-color: var(--sdds-header-background);
-  width: 100%;
-  display: block;
-}
-nav * {
-  box-sizing: border-box;
-}
-nav .sdds-header-component-list {
-  height: var(--sdds-header-height);
-  all: unset;
-  display: flex;
-  justify-content: start;
-  align-items: center;
-}
-nav sdds-header-dropdown,
-nav sdds-header-item {
-  display: none;
-}
-nav .sdds-header-middle-spacer {
-  all: unset;
-  display: block;
-  flex-grow: 1;
-  height: var(--sdds-header-height);
-  border-right: 1px solid var(--sdds-header--basic-element-border);
-}
-@media screen and (min-width: 992px) {
-  nav sdds-header-dropdown,
-nav sdds-header-item {
-    display: block;
-  }
-}
-nav sdds-header-item:nth-child(3),
-nav sdds-header-dropdown:nth-child(3) {
-  /* Adds a left border to the button after the title, if any */
-  border-left: 1px solid var(--sdds-header--basic-element-border);
-}

package/dist/collection/components/header/webcomponent/header-component.js

@@ -1,42 +0,0 @@
-import { h, Host } from '@stencil/core';
-import { inheritAriaAttributes, updateListChildrenRoles } from '../../../utils/utils';
-export class SddsHeader {
-  constructor() {
-    const callback = (mutationsList) => {
-      mutationsList.forEach((mutation) => {
-        if (mutation.type === 'childList') {
-          updateListChildrenRoles(mutation.target);
-        }
-      });
-    };
-    this.observer = new MutationObserver(callback);
-  }
-  componentDidLoad() {
-    const hostElement = this.host;
-    const navElement = hostElement.querySelector('.sdds-header-component-list');
-    this.observer.observe(navElement, {
-      childList: true,
-      subtree: false,
-    });
-    updateListChildrenRoles(navElement);
-  }
-  disconnectedCallback() {
-    this.observer.disconnect();
-  }
-  render() {
-    const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
-    return (h(Host, null, h("slot", { name: "hamburger" }), h("slot", { name: "title" }), h("nav", Object.assign({}, navAttributes), h("ul", { class: "sdds-header-component-list" }, h("slot", null), h("li", { class: "sdds-header-middle-spacer" }), h("slot", { name: "end" })))));
-  }
-  static get is() { return "sdds-header"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["header-component.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["header-component.css"]
-    };
-  }
-  static get elementRef() { return "host"; }
-}

package/dist/collection/components/header/webcomponent/header-dropdown/header-dropdown.css

@@ -1,31 +0,0 @@
-:host {
-  height: var(--sdds-header-height);
-  position: relative;
-}
-:host .menu {
-  flex-direction: column;
-  overflow-y: auto;
-  max-height: calc(100vh - var(--sdds-header-height));
-  box-shadow: var(--sdds-nav-dropdown-menu-box);
-  background-color: var(--sdds-header-app-launcher-menu-background);
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-}
-:host .menu::-webkit-scrollbar {
-  width: 4px;
-  background-color: inherit;
-}
-:host .menu::-webkit-scrollbar-thumb {
-  background-color: var(--sdds-grey-300);
-}
-:host .menu ::-webkit-scrollbar-button {
-  height: 0;
-  width: 0;
-}
-:host .state-open .dropdown-icon {
-  transform: rotateZ(180deg);
-}
-:host .state-open .button {
-  position: relative;
-  z-index: 801;
-}