@scania/tegel 0.0.71-beta → 1.0.0

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

@@ -1,129 +0,0 @@
-/*
-  Contains spacing variables for the layout
-*/
-/** The breakpoint at which the layout changes from fixed size to full-width. */
-:host([open]) {
-  pointer-events: auto;
-  z-index: 301;
-}
-
-:host {
-  pointer-events: none;
-  display: block;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-:host .wrapper {
-  height: inherit;
-  /* default slot */
-  /* 'end' slot */
-}
-:host .wrapper slot:not([name])::slotted(*) {
-  border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
-}
-:host .wrapper ::slotted([slot=end]) {
-  border-top: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
-}
-:host .wrapper .sdds-side-menu-list-end {
-  margin-top: 68px;
-}
-:host .state-closed {
-  display: none;
-}
-:host .state-open slot[name=overlay]::slotted(sdds-side-menu-overlay) {
-  opacity: 0.4;
-}
-:host .state-open slot[name=close-button]::slotted(sdds-side-menu-close-button) {
-  opacity: 1;
-}
-:host .state-open .sdds-side-menu-wrapper {
-  transform: scaleY(1);
-}
-:host .state-upper-slot-empty .sdds-side-menu-list-upper {
-  display: none;
-}
-:host .state-upper-slot-empty .sdds-side-menu-list-end {
-  margin-top: 0;
-}
-:host .state-upper-slot-empty ::slotted([slot=end]) {
-  border-top: none;
-  border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
-}
-
-@media (min-width: 992px) {
-  :host([persistent]) {
-    pointer-events: auto;
-    position: static;
-    width: 272px;
-    height: auto;
-    border-right: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
-  }
-  :host([persistent]) .wrapper slot[name=overlay]::slotted(sdds-side-menu-overlay) {
-    display: none;
-  }
-  :host([persistent]) .wrapper slot[name=close-button]::slotted(sdds-side-menu-close-button) {
-    display: none;
-  }
-  :host([persistent]) .wrapper .sdds-side-menu-wrapper {
-    transform: none;
-  }
-  :host([persistent]) .menu {
-    width: 272px;
-  }
-  :host([persistent]) .state-closed {
-    display: block;
-  }
-  :host([persistent]):host([collapsed]) {
-    width: 69px;
-  }
-  :host([persistent]):host([collapsed]) .menu {
-    width: 68px;
-  }
-  :host([persistent]) slot[name=end]::slotted(*) {
-    display: none;
-  }
-}
-.menu {
-  width: 80%;
-  height: inherit;
-  position: relative;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-.menu * {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-
-@media (max-width: 384px) {
-  .menu {
-    width: 100%;
-  }
-}
-aside .sdds-side-menu-wrapper {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  flex-grow: 1;
-  background-color: var(--sdds-sidebar-side-menu-background-cover);
-  transition: transform 250ms ease;
-  transform-origin: top;
-  transform: scaleY(0);
-  overflow-y: auto;
-}
-aside .sdds-side-menu-wrapper::-webkit-scrollbar {
-  width: 4px;
-  background-color: inherit;
-}
-aside .sdds-side-menu-wrapper::-webkit-scrollbar-thumb {
-  background-color: var(--sdds-grey-300);
-}
-aside .sdds-side-menu-wrapper ::-webkit-scrollbar-button {
-  height: 0;
-  width: 0;
-}

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

@@ -1,266 +0,0 @@
-import { h, Host, } from '@stencil/core';
-import { dfs, isFocusable } from '../../../utils/utils';
-const GRID_LG_BREAKPOINT = '992px';
-const OPENING_ANIMATION_DURATION = 400;
-const INITIALIZE_ANIMATION_DELAY = 500;
-export class SddsSideMenu {
-  constructor() {
-    this.handleMatchesLgBreakpointChange = (e) => {
-      const isBelowLg = !e.matches;
-      if (isBelowLg) {
-        this.collapsed = false;
-      }
-    };
-    this.open = false;
-    this.persistent = false;
-    this.collapsed = false;
-    this.isUpperSlotEmpty = false;
-    this.isClosed = true;
-    this.isOpen = false;
-    this.isClosing = false;
-    this.isCollapsed = false;
-    this.isOpening = false;
-  }
-  connectedCallback() {
-    this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT})`);
-    this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);
-    this.isCollapsed = this.collapsed;
-  }
-  componentDidLoad() {
-    setTimeout(() => this.onOpenChange(this.open), INITIALIZE_ANIMATION_DELAY);
-    const upperSlot = this.host.shadowRoot.querySelector('slot:not([name])');
-    const upperSlotElements = upperSlot.assignedElements();
-    const hasUpperSlotElements = (upperSlotElements === null || upperSlotElements === void 0 ? void 0 : upperSlotElements.length) > 0;
-    if (!hasUpperSlotElements) {
-      this.isUpperSlotEmpty = true;
-    }
-  }
-  disconnectedCallback() {
-    this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);
-  }
-  onOpenChange(newVal, oldVal) {
-    if (newVal && !oldVal) {
-      this.setOpening();
-    }
-    if (!newVal && oldVal) {
-      this.setClosing();
-    }
-  }
-  onCollapsedChange(newVal) {
-    /** Emits the internal collapse event when the prop has changed. */
-    this.internalSddsSideMenuPropChange.emit({
-      changed: ['collapsed'],
-      collapsed: newVal,
-    });
-    this.isCollapsed = newVal;
-  }
-  onIsOpenChange(newVal) {
-    if (newVal) {
-      const firstFocusableElement = dfs(this.host, isFocusable, true);
-      firstFocusableElement.focus();
-    }
-  }
-  collapsedSideMenuEventHandler(event) {
-    this.collapsed = event.detail.collapsed;
-  }
-  async setOpening() {
-    this.isClosed = false;
-    await new Promise((resolve) => {
-      setTimeout(resolve, 0);
-    });
-    this.isOpening = true;
-    await new Promise((resolve) => {
-      setTimeout(resolve, OPENING_ANIMATION_DURATION);
-    });
-    this.isOpening = false;
-    this.isOpen = true;
-  }
-  async setClosing() {
-    this.isOpen = false;
-    this.isClosing = true;
-    await new Promise((resolve) => {
-      setTimeout(resolve, OPENING_ANIMATION_DURATION);
-    });
-    this.isClosing = false;
-    this.isClosed = true;
-  }
-  render() {
-    return (h(Host, { role: "navigation" }, h("div", { class: {
-        'wrapper': true,
-        'state-upper-slot-empty': this.isUpperSlotEmpty,
-        'state-open': this.isOpen || this.isOpening,
-        'state-closed': this.isClosed,
-      } }, h("slot", { name: "overlay" }), h("aside", { class: `menu` }, h("slot", { name: "close-button" }), h("div", { class: "sdds-side-menu-wrapper" }, h("ul", { class: `sdds-side-menu-list sdds-side-menu-list-upper` }, h("slot", null)), h("ul", { class: `sdds-side-menu-list sdds-side-menu-list-end` }, h("slot", { name: "end" }))), h("slot", { name: "sticky-end" })))));
-  }
-  static get is() { return "sdds-side-menu"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["side-menu.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["side-menu.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "open": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Applicable only for mobile. If the side menu is open or not."
-        },
-        "attribute": "open",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "persistent": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Applicable only for desktop. If the side menu should always be shown."
-        },
-        "attribute": "persistent",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "collapsed": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If the side menu is collapsed. Only a persistent desktop menu can be collapsed.\nNOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the sddsCollapse event."
-        },
-        "attribute": "collapsed",
-        "reflect": true,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isUpperSlotEmpty": {},
-      "isClosed": {},
-      "isOpen": {},
-      "isClosing": {},
-      "isCollapsed": {},
-      "isOpening": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sddsCollapse",
-        "name": "sddsCollapse",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event that is emitted when the side menu is collapsed."
-        },
-        "complexType": {
-          "original": "CollapseEvent",
-          "resolved": "{ collapsed: boolean; }",
-          "references": {
-            "CollapseEvent": {
-              "location": "local",
-              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/side-menu/webcomponent/side-menu.tsx"
-            }
-          }
-        }
-      }, {
-        "method": "internalSddsCollapse",
-        "name": "internalSddsCollapse",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Broadcasts collapsed state to child components."
-            }],
-          "text": ""
-        },
-        "complexType": {
-          "original": "CollapseEvent",
-          "resolved": "{ collapsed: boolean; }",
-          "references": {
-            "CollapseEvent": {
-              "location": "local",
-              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/side-menu/webcomponent/side-menu.tsx"
-            }
-          }
-        }
-      }, {
-        "method": "internalSddsSideMenuPropChange",
-        "name": "internalSddsSideMenuPropChange",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Broadcasts collapsed state to child components."
-            }],
-          "text": ""
-        },
-        "complexType": {
-          "original": "InternalSddsSideMenuPropChange",
-          "resolved": "{ changed: \"collapsed\"[]; } & Partial<Props>",
-          "references": {
-            "InternalSddsSideMenuPropChange": {
-              "location": "local",
-              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/side-menu/webcomponent/side-menu.tsx"
-            }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "open",
-        "methodName": "onOpenChange"
-      }, {
-        "propName": "collapsed",
-        "methodName": "onCollapsedChange"
-      }, {
-        "propName": "isOpening",
-        "methodName": "onIsOpenChange"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "internalSddsCollapse",
-        "method": "collapsedSideMenuEventHandler",
-        "target": "body",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}

package/dist/collection/components/stepper/sdds-stepper.css

@@ -1,21 +0,0 @@
-:host [role=list] {
-  display: flex;
-  justify-content: space-evenly;
-  min-width: 100%;
-}
-:host [role=list]:not(.text-position-aside) {
-  display: table;
-  table-layout: fixed;
-  width: 100%;
-  list-style: none;
-}
-:host [role=list].vertical {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: unset;
-  gap: 52px;
-}
-:host [role=list].vertical.sm {
-  gap: 36px;
-}

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

@@ -1,193 +0,0 @@
-import { Host, h } from '@stencil/core';
-export class SddsStepper {
-  constructor() {
-    this.orientation = 'horizontal';
-    this.labelPosition = 'below';
-    this.size = 'lg';
-    this.hideLabels = false;
-    this.stepperId = crypto.randomUUID();
-  }
-  componentWillLoad() {
-    this.host.children[0].classList.add('first');
-    this.host.children[this.host.children.length - 1].classList.add('last');
-    if (this.orientation === 'vertical') {
-      this.labelPosition = 'aside';
-    }
-  }
-  handleDirectionChange() {
-    this.internalSddsPropsChange.emit({
-      stepperId: this.stepperId,
-      changed: ['orientation'],
-      orientation: this.orientation,
-    });
-  }
-  handleLabelPositionChange() {
-    this.internalSddsPropsChange.emit({
-      stepperId: this.stepperId,
-      changed: ['labelPosition'],
-      labelPosition: this.labelPosition,
-    });
-  }
-  handleSizeChange() {
-    this.internalSddsPropsChange.emit({
-      stepperId: this.stepperId,
-      changed: ['size'],
-      size: this.size,
-    });
-  }
-  handleHideLabelsChange() {
-    this.internalSddsPropsChange.emit({
-      stepperId: this.stepperId,
-      changed: ['hideLabels'],
-      hideLabels: this.hideLabels,
-    });
-  }
-  render() {
-    return (h(Host, null, h("div", { role: "list", class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", null))));
-  }
-  static get is() { return "sdds-stepper"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sdds-stepper.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sdds-stepper.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "orientation": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'horizontal' | 'vertical'",
-          "resolved": "\"horizontal\" | \"vertical\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The orientation the children are layed out."
-        },
-        "attribute": "orientation",
-        "reflect": false,
-        "defaultValue": "'horizontal'"
-      },
-      "labelPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'aside' | 'below'",
-          "resolved": "\"aside\" | \"below\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Text position, only available on direction:horizontal"
-        },
-        "attribute": "label-position",
-        "reflect": false,
-        "defaultValue": "'below'"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'sm' | 'lg'",
-          "resolved": "\"lg\" | \"sm\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Size of the component and it's children."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'lg'"
-      },
-      "hideLabels": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Hides the label for the child components if true."
-        },
-        "attribute": "hide-labels",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "stepperId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "ID used for internal stepper functionality and events, must be unique.\n\n**NOTE**: If you're listening for stepper events you need to set this ID yourself to identify the stepper, as the default ID is random and will be different every time."
-        },
-        "attribute": "stepper-id",
-        "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "internalSddsPropsChange",
-        "name": "internalSddsPropsChange",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "InternalSddsStepperPropChange",
-          "resolved": "{ stepperId: string; changed: (keyof SddsStepperProps)[]; } & Partial<SddsStepperProps>",
-          "references": {
-            "InternalSddsStepperPropChange": {
-              "location": "local",
-              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/stepper/sdds-stepper.tsx"
-            }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "orientation",
-        "methodName": "handleDirectionChange"
-      }, {
-        "propName": "labelPosition",
-        "methodName": "handleLabelPositionChange"
-      }, {
-        "propName": "size",
-        "methodName": "handleSizeChange"
-      }, {
-        "propName": "hideLabels",
-        "methodName": "handleHideLabelsChange"
-      }];
-  }
-}