@scania/tegel 0.0.8 → 0.0.9

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/johnny/dev/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/johnny/dev/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/johnny/dev/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.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/johnny/dev/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"
-      }];
-  }
-}

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

@@ -1,198 +0,0 @@
-:host {
-  position: relative;
-  display: table-cell;
-}
-:host sdds-icon {
-  line-height: 1;
-}
-:host [role=listItem] {
-  display: flex;
-  justify-content: start;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-}
-:host [role=listItem].text-below {
-  flex-direction: column;
-}
-:host [role=listItem].lg {
-  padding: 0 20px;
-  font: var(--sdds-detail-01);
-  letter-spacing: var(--sdds-detail-01-ls);
-}
-:host [role=listItem].lg .content-container {
-  height: 30px;
-  min-width: 30px;
-}
-:host [role=listItem].lg.vertical::after {
-  content: " ";
-  position: absolute;
-  background-color: var(--sdds-stepper-icon-step-background-after);
-  opacity: 0.16;
-  height: 36px;
-  width: 1px;
-  top: 40px;
-  left: 36px;
-}
-:host [role=listItem].lg.horizontal::after {
-  content: " ";
-  position: absolute;
-  background-color: var(--sdds-stepper-icon-step-background-after);
-  opacity: 0.16;
-  height: 1px;
-  left: calc(50% + 24px);
-  right: 0;
-  top: 18px;
-}
-:host [role=listItem].lg.horizontal::before {
-  content: " ";
-  position: absolute;
-  background-color: var(--sdds-stepper-icon-step-background-after);
-  opacity: 0.16;
-  height: 1px;
-  right: calc(50% + 24px);
-  left: 0;
-  top: 18px;
-}
-:host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::after {
-  content: " ";
-  position: absolute;
-  background-color: var(--sdds-stepper-icon-step-background-after);
-  opacity: 0.16;
-  height: 1px;
-  top: 16px;
-  width: 10px;
-  left: auto;
-  right: -10px;
-}
-:host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::before {
-  content: " ";
-  position: absolute;
-  background-color: var(--sdds-stepper-icon-step-background-after);
-  opacity: 0.16;
-  height: 1px;
-  top: 16px;
-  width: 10px;
-  left: -10px;
-  right: auto;
-}
-:host [role=listItem].sm {
-  padding: 0 20px;
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
-}
-:host [role=listItem].sm .content-container {
-  height: 24px;
-  min-width: 24px;
-}
-:host [role=listItem].sm.vertical::after {
-  content: " ";
-  position: absolute;
-  background-color: var(--sdds-stepper-icon-step-background-after);
-  opacity: 0.16;
-  height: 20px;
-  width: 1px;
-  top: 34px;
-  left: 32px;
-}
-:host [role=listItem].sm.vertical::before {
-  content: " ";
-  position: absolute;
-  background-color: var(--sdds-stepper-icon-step-background-after);
-  opacity: 0.16;
-  height: 20px;
-  width: 1px;
-  top: 34px;
-  left: 32px;
-}
-:host [role=listItem].sm.horizontal::after {
-  content: " ";
-  position: absolute;
-  background-color: var(--sdds-stepper-icon-step-background-after);
-  opacity: 0.16;
-  height: 1px;
-  left: calc(50% + 16px + 8px);
-  right: 0;
-  top: 13px;
-}
-:host [role=listItem].sm.horizontal::before {
-  content: " ";
-  position: absolute;
-  background-color: var(--sdds-stepper-icon-step-background-after);
-  opacity: 0.16;
-  height: 1px;
-  left: 0;
-  right: calc(50% + 24px);
-  top: 13px;
-}
-:host [role=listItem].sm.horizontal.text-aside:not(.hide-labels)::after {
-  content: " ";
-  position: absolute;
-  background-color: var(--sdds-stepper-icon-step-background-after);
-  opacity: 0.16;
-  height: 1px;
-  top: 13px;
-  width: 10px;
-  left: auto;
-  right: -10px;
-}
-:host [role=listItem].sm.horizontal.text-aside:not(.hide-labels)::before {
-  content: " ";
-  position: absolute;
-  background-color: var(--sdds-stepper-icon-step-background-after);
-  opacity: 0.16;
-  height: 1px;
-  top: 13px;
-  width: 10px;
-  left: -10px;
-  right: auto;
-}
-:host [role=listItem] .content-container {
-  border-radius: 100px;
-  border: 1px solid var(--sdds-stepper-icon-background);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-:host [role=listItem] .content-container.error {
-  border-color: var(--sdds-negative);
-  color: var(--sdds-negative);
-}
-:host [role=listItem] .content-container.success {
-  background-color: var(--sdds-positive);
-  border-color: var(--sdds-positive);
-  color: var(--sdds-white);
-}
-:host [role=listItem] .content-container.upcoming {
-  background-color: transparent;
-  border-color: var(--sdds-stepper-label-border-color-upcoming);
-  color: var(--sdds-stepper-label-text-color-upcoming);
-  opacity: var(--sdds-stepper-label-text-opacity-upcoming);
-}
-:host [role=listItem] .label {
-  text-align: center;
-}
-:host [role=listItem] .label.lg {
-  font: var(--sdds-detail-01);
-  letter-spacing: var(--sdds-detail-01-ls);
-}
-:host [role=listItem] .label.sm {
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
-}
-:host [role=listItem] .label.upcoming {
-  color: var(--sdds-stepper-label-text-color-upcoming);
-  opacity: var(--sdds-stepper-label-text-opacity-upcoming);
-}
-
-:host(.last) [role=listItem].sm::after, :host(.last) [role=listItem].lg::after {
-  display: none;
-}
-:host(.last) [role=listItem].sm.vertical::before {
-  display: none;
-}
-
-:host(.first) [role=listItem].sm::before, :host(.first) [role=listItem].lg::before {
-  display: none;
-}