@scania/tegel 0.0.71-beta → 1.0.0

package/dist/collection/components/message/sdds-message.js

@@ -1,135 +0,0 @@
-import { Host, h } from '@stencil/core';
-export class SddsMessage {
-  constructor() {
-    this.getIconName = () => {
-      switch (this.type) {
-        case 'information':
-          return 'info';
-        case 'error':
-          return 'error';
-        case 'warning':
-          return 'warning';
-        case 'success':
-          return 'tick';
-        default:
-          return 'info';
-      }
-    };
-    this.header = undefined;
-    this.modeVariant = null;
-    this.type = 'information';
-    this.noIcon = false;
-    this.minimal = false;
-  }
-  render() {
-    return (h(Host, null, h("div", { class: `
-        message-wrapper ${this.type}
-        ${this.minimal ? 'message-minimal' : ''}
-        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("sdds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `message-content` }, this.header && h("div", { class: "message-header" }, this.header), !this.minimal && (h("div", { class: "message-extended-message" }, h("slot", null)))))));
-  }
-  static get is() { return "sdds-message"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sdds-message.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sdds-message.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "header": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Header text for the component."
-        },
-        "attribute": "header",
-        "reflect": false
-      },
-      "modeVariant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary'",
-          "resolved": "\"primary\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Variant of the component, based on current mode."
-        },
-        "attribute": "mode-variant",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'information' | 'error' | 'warning' | 'success'",
-          "resolved": "\"error\" | \"information\" | \"success\" | \"warning\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Type of message."
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'information'"
-      },
-      "noIcon": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Removes the icon in the message."
-        },
-        "attribute": "no-icon",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "minimal": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Minimal message styling."
-        },
-        "attribute": "minimal",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-}

package/dist/collection/components/radio-button/radio-button-component.css

@@ -1,125 +0,0 @@
-:root,
-.sdds-mode-light {
-  --sdds-radio-button-color: var(--sdds-grey-958);
-  --sdds-radio-button-interaction-01: var(--sdds-blue-800);
-  --sdds-radio-button-interaction-02: var(--sdds-white);
-  --sdds-radio-button-background-hover: var(--sdds-blue-800);
-  --sdds-radio-button-background-focus: var(--sdds-blue-800);
-  --sdds-radio-button-disabled: var(--sdds-grey-600);
-  --sdds-radio-button-border-color-disabled-after: var(--sdds-grey-700);
-  --sdds-radio-button-color-disabled-after: var(--sdds-grey-700);
-  --sdds-radio-button-color-disabled-before: var(--sdds-grey-700);
-}
-
-.sdds-mode-dark {
-  --sdds-radio-button-color: var(--sdds-white);
-  --sdds-radio-button-interaction-01: var(--sdds-white);
-  --sdds-radio-button-interaction-02: var(--sdds-grey-958);
-  --sdds-radio-button-background-hover: var(--sdds-white);
-  --sdds-radio-button-background-focus: var(--sdds-white);
-  --sdds-radio-button-disabled: var(--sdds-grey-600);
-  --sdds-radio-button-border-color-disabled-after: var(--sdds-grey-700);
-  --sdds-radio-button-color-disabled-after: var(--sdds-grey-700);
-}
-
-.sdds-radio-button {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  margin-left: -4px;
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-radio-button-color);
-}
-.sdds-radio-button * {
-  box-sizing: border-box;
-}
-.sdds-radio-button .sdds-form-input[type=radio] {
-  appearance: none;
-  outline: none;
-  margin: 0;
-  border: 0;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  position: relative;
-  cursor: pointer;
-  flex-shrink: 0;
-  align-self: flex-start;
-}
-.sdds-radio-button .sdds-form-input[type=radio] + label {
-  padding: var(--sdds-spacing-element-4) 0 var(--sdds-spacing-element-4) var(--sdds-spacing-element-4);
-  cursor: pointer;
-}
-.sdds-radio-button .sdds-form-input[type=radio]::before, .sdds-radio-button .sdds-form-input[type=radio]::after {
-  content: "";
-  position: absolute;
-  border-radius: 50%;
-  box-sizing: border-box;
-}
-.sdds-radio-button .sdds-form-input[type=radio]::before {
-  width: 24px;
-  height: 24px;
-  left: 0;
-  top: 0;
-}
-.sdds-radio-button .sdds-form-input[type=radio]::after {
-  border: 1px solid var(--sdds-radio-button-interaction-01);
-  background-color: var(--sdds-radio-button-interaction-02);
-  width: 16px;
-  height: 16px;
-  left: 4px;
-  top: 4px;
-}
-.sdds-radio-button .sdds-form-input[type=radio]:hover::before {
-  background-color: var(--sdds-radio-button-background-hover);
-  opacity: 0.12;
-}
-.sdds-radio-button .sdds-form-input[type=radio]:focus::before {
-  background-color: var(--sdds-radio-button-background-focus);
-  opacity: 0.24;
-  animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;
-}
-.sdds-radio-button .sdds-form-input[type=radio]:disabled, .sdds-radio-button .sdds-form-input[type=radio].disabled {
-  cursor: not-allowed;
-}
-.sdds-radio-button .sdds-form-input[type=radio]:disabled::after, .sdds-radio-button .sdds-form-input[type=radio].disabled::after {
-  border-color: var(--sdds-radio-button-border-color-disabled-after);
-  background-color: var(--sdds-radio-button-interaction-02);
-}
-.sdds-radio-button .sdds-form-input[type=radio]:disabled + label, .sdds-radio-button .sdds-form-input[type=radio].disabled + label {
-  color: var(--sdds-radio-button-disabled);
-  cursor: not-allowed;
-}
-.sdds-radio-button .sdds-form-input[type=radio]:disabled:hover::before, .sdds-radio-button .sdds-form-input[type=radio].disabled:hover::before {
-  display: none;
-  opacity: 1;
-}
-.sdds-radio-button .sdds-form-input[type=radio]:checked::after {
-  border: 4px solid var(--sdds-radio-button-interaction-01);
-}
-.sdds-radio-button .sdds-form-input[type=radio]:checked:disabled:hover::before, .sdds-radio-button .sdds-form-input[type=radio]:checked:disabled::before, .sdds-radio-button .sdds-form-input[type=radio]:checked.disabled:hover::before, .sdds-radio-button .sdds-form-input[type=radio]:checked.disabled::before {
-  display: block;
-  width: 16px;
-  height: 16px;
-  left: 4px;
-  top: 4px;
-  border: 1px solid var(--sdds-radio-button-color-disabled-before);
-  box-sizing: content-box;
-}
-.sdds-radio-button .sdds-form-input[type=radio]:checked:disabled::after, .sdds-radio-button .sdds-form-input[type=radio]:checked.disabled::after {
-  border: 4px solid var(--sdds-radio-button-interaction-02);
-  background-color: var(--sdds-radio-button-color-disabled-after);
-  left: 5px;
-  top: 5px;
-}
-@keyframes rb-focus {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0.24;
-  }
-}

package/dist/collection/components/side-menu/webcomponent/side-menu-close-button/side-menu-close-button.css

@@ -1,26 +0,0 @@
-:host {
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-:host button {
-  height: 64px;
-  width: 100%;
-  text-align: left;
-  padding: 0 24px;
-  border: none;
-  background-color: var(--sdds-sidebar-side-menu-background-cover);
-  font: var(--sdds-headline-07);
-  letter-spacing: var(--sdds-headline-07-ls);
-  color: var(--sdds-sidebar-side-menu-single-item-color);
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
-}
-:host button:hover {
-  cursor: pointer;
-  background-color: var(--sdds-sidebar-item-state-hover);
-}
-:host button:focus-visible {
-  cursor: pointer;
-  border: 1px solid var(--sdds-sidebar-side-menu-single-subitem-selected-border-color);
-}

package/dist/collection/components/side-menu/webcomponent/side-menu-close-button/side-menu-close-button.js

@@ -1,21 +0,0 @@
-import { h, Host } from '@stencil/core';
-import { inheritAriaAttributes } from '../../../../utils/utils';
-export class SideMenuCloseButton {
-  render() {
-    const buttonProps = Object.assign({ 'aria-label': 'Close' }, inheritAriaAttributes(this.host));
-    return (h(Host, null, h("button", Object.assign({}, buttonProps), h("sdds-icon", { name: "cross", size: "20px" }))));
-  }
-  static get is() { return "sdds-side-menu-close-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["side-menu-close-button.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["side-menu-close-button.css"]
-    };
-  }
-  static get elementRef() { return "host"; }
-}

package/dist/collection/components/side-menu/webcomponent/side-menu-collapse-button/side-menu-collapse-button.css

@@ -1,30 +0,0 @@
-/*
-  Contains spacing variables for the layout
-*/
-/** The breakpoint at which the layout changes from fixed size to full-width. */
-:host {
-  position: sticky;
-  bottom: 0;
-  display: none;
-  height: 68px;
-  border-top: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
-}
-:host .icon {
-  transform: rotateZ(90deg);
-  transition: all 0.2s ease-in-out;
-  width: 20px;
-  height: 20px;
-}
-:host .state-collapsed .icon {
-  transform: translateX(-50%) rotateZ(90deg) rotateX(180deg);
-  color: var(--sdds-sidebar-side-menu-single-item-color);
-  margin-left: 0;
-  position: absolute;
-  left: 50%;
-}
-
-@media (min-width: 992px) {
-  :host {
-    display: block;
-  }
-}

package/dist/collection/components/side-menu/webcomponent/side-menu-collapse-button/side-menu-collapse-button.js

@@ -1,110 +0,0 @@
-import { h, Host } from '@stencil/core';
-export class SideMenuCollapseButton {
-  constructor() {
-    this.handleClick = () => {
-      /** Emit public event that the user can prevent. */
-      const sddsCollapseEvent = this.sddsCollapse.emit({
-        collapsed: !this.collapsed,
-      });
-      /** If the public event was not prevented. */
-      if (!sddsCollapseEvent.defaultPrevented) {
-        /** Emit internal event that is listened to by other side-menu components */
-        this.collapsed = !this.collapsed;
-        this.internalSddsCollapse.emit({
-          collapsed: this.collapsed,
-        });
-      }
-    };
-    this.collapsed = false;
-  }
-  collapseSideMenuEventHandler(event) {
-    this.collapsed = event.detail.collapsed;
-  }
-  connectedCallback() {
-    this.sideMenuEl = this.host.closest('sdds-side-menu');
-    this.collapsed = this.sideMenuEl.collapsed;
-  }
-  render() {
-    return (h(Host, { role: "button", tabindex: "0", onClick: () => {
-        this.handleClick();
-      } }, h("div", { class: {
-        'wrapper': true,
-        'state-collapsed': this.collapsed,
-      } }, h("sdds-side-menu-item", { class: {
-        button: true,
-      } }, h("a", null, h("svg", { class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), h("slot", null))))));
-  }
-  static get is() { return "sdds-side-menu-collapse-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["side-menu-collapse-button.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["side-menu-collapse-button.css"]
-    };
-  }
-  static get states() {
-    return {
-      "collapsed": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sddsCollapse",
-        "name": "sddsCollapse",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event that is broadcasted when the collapse button is clicked.\nPrevent it to disable automatic collapsing, and set the collapsed prop on the side menu yourself."
-        },
-        "complexType": {
-          "original": "CollapseEvent",
-          "resolved": "{ collapsed: boolean; }",
-          "references": {
-            "CollapseEvent": {
-              "location": "import",
-              "path": "../side-menu"
-            }
-          }
-        }
-      }, {
-        "method": "internalSddsCollapse",
-        "name": "internalSddsCollapse",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Event that is broadcasted when the internal collapse state changes. Contains the future of the collapse state."
-            }],
-          "text": ""
-        },
-        "complexType": {
-          "original": "CollapseEvent",
-          "resolved": "{ collapsed: boolean; }",
-          "references": {
-            "CollapseEvent": {
-              "location": "import",
-              "path": "../side-menu"
-            }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get listeners() {
-    return [{
-        "name": "internalSddsSideMenuPropChange",
-        "method": "collapseSideMenuEventHandler",
-        "target": "body",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}

package/dist/collection/components/side-menu/webcomponent/side-menu-dropdown/side-menu-dropdown.css

@@ -1,42 +0,0 @@
-:host {
-  display: block;
-}
-:host .wrapper {
-  display: flex;
-  flex-direction: column;
-}
-:host .dropdown-icon {
-  margin-left: auto;
-  transition: all 0.2s ease-in-out;
-}
-:host .state-open .dropdown-icon {
-  transform: rotateZ(180deg);
-}
-:host .state-open .menu {
-  display: block;
-}
-:host .state-collapsed .menu {
-  --side-menu-width: 68px;
-  position: absolute;
-  left: var(--side-menu-width);
-  box-shadow: var(--sdds-nav-dropdown-menu-box);
-  background-color: var(--sdds-grey-958);
-}
-:host .state-collapsed .menu .heading-collapsed {
-  all: unset;
-  box-sizing: border-box;
-  padding: 16px 24px 15px;
-  min-height: 48px;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
-  font: var(--sdds-headline-07);
-  letter-spacing: var(--sdds-headline-07-ls);
-}
-:host :not(.state-collapsed) .menu ::slotted(sdds-side-menu-dropdown-list) {
-  width: 100%;
-}
-:host .menu {
-  display: none;
-  flex-direction: column;
-}

package/dist/collection/components/side-menu/webcomponent/side-menu-dropdown/side-menu-dropdown.js

@@ -1,165 +0,0 @@
-import { Fragment, h, Host } from '@stencil/core';
-export class SideMenuDropdown {
-  constructor() {
-    this.defaultOpen = false;
-    this.buttonLabel = undefined;
-    this.selected = false;
-    this.open = false;
-    this.hoverState = undefined;
-    this.collapsed = false;
-  }
-  collapsedSideMenuEventHandler(event) {
-    this.collapsed = event.detail.collapsed;
-  }
-  onEventPointerEnter() {
-    this.setHoverStateOpen();
-  }
-  onEventFocus() {
-    this.setHoverStateOpen();
-  }
-  onEventPointerLeave() {
-    this.setHoverStateClosed();
-  }
-  onEventBlur() {
-    this.setHoverStateClosed();
-  }
-  setHoverStateOpen() {
-    this.hoverState = { isHovered: true, updatedAt: Date.now() };
-  }
-  setHoverStateClosed() {
-    const leftAt = Date.now();
-    const toleranceInMilliseconds = 150;
-    setTimeout(() => {
-      if (this.hoverState.isHovered && this.hoverState.updatedAt < leftAt) {
-        this.hoverState = { isHovered: false, updatedAt: Date.now() };
-      }
-    }, toleranceInMilliseconds);
-  }
-  getIsOpenState() {
-    var _a;
-    return this.collapsed ? (_a = this.hoverState) === null || _a === void 0 ? void 0 : _a.isHovered : this.open;
-  }
-  connectedCallback() {
-    this.sideMenuEl = this.host.closest('sdds-side-menu');
-    this.open = this.defaultOpen;
-  }
-  render() {
-    return (h(Host, null, h("div", { class: {
-        'wrapper': true,
-        'state-open': this.getIsOpenState(),
-        'state-collapsed': this.collapsed,
-      } }, h("sdds-side-menu-item", { class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
-        this.open = !this.open;
-      } }, h("button", null, h("slot", { name: "button-icon" }), !this.collapsed && (h(Fragment, null, this.buttonLabel, h("slot", { name: "button-label" }), h("sdds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), h("div", { class: "menu" }, this.collapsed && (h("h3", { class: "heading-collapsed" }, this.buttonLabel, h("slot", { name: "button-label" }))), h("slot", null)))));
-  }
-  static get is() { return "sdds-side-menu-dropdown"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["side-menu-dropdown.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["side-menu-dropdown.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "defaultOpen": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If the dropdown should be open from the start."
-        },
-        "attribute": "default-open",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "buttonLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label of the button that opens the dropdown.\nThis is an alternative to the button-label slot."
-        },
-        "attribute": "button-label",
-        "reflect": false
-      },
-      "selected": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If the button that opens the dropdown should appear selected."
-        },
-        "attribute": "selected",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "open": {},
-      "hoverState": {},
-      "collapsed": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get listeners() {
-    return [{
-        "name": "internalSddsSideMenuPropChange",
-        "method": "collapsedSideMenuEventHandler",
-        "target": "body",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "pointerenter",
-        "method": "onEventPointerEnter",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "focusin",
-        "method": "onEventFocus",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "pointerleave",
-        "method": "onEventPointerLeave",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "focusout",
-        "method": "onEventBlur",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}

package/dist/collection/components/side-menu/webcomponent/side-menu-dropdown-list/side-menu-dropdown-list.css

@@ -1,14 +0,0 @@
-:host {
-  display: block;
-  width: 190px;
-}
-:host [role=list] {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  border-radius: none;
-  background-color: var(--sdds-header-app-launcher-menu-bg);
-}
-:host .state-collapsed ::slotted(*) {
-  border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
-}