@scania/tegel 0.0.8 → 0.0.9

package/dist/esm/sdds-side-menu-dropdown-list.entry.js

@@ -1,25 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-54c55e8d.js';
-
-const sideMenuDropdownListCss = ":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)}";
-
-const SideMenuDropdownList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.collapsed = false;
-  }
-  collapsedSideMenuEventHandler(event) {
-    this.collapsed = event.detail.collapsed;
-  }
-  connectedCallback() {
-    this.sideMenuEl = this.host.closest('sdds-side-menu');
-  }
-  render() {
-    return (h(Host, { role: "list" }, h("div", { class: {
-        'state-collapsed': this.collapsed,
-      } }, h("slot", null))));
-  }
-  get host() { return getElement(this); }
-};
-SideMenuDropdownList.style = sideMenuDropdownListCss;
-
-export { SideMenuDropdownList as sdds_side_menu_dropdown_list };

package/dist/esm/sdds-side-menu-dropdown.entry.js

@@ -1,63 +0,0 @@
-import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from './index-54c55e8d.js';
-
-const sideMenuDropdownCss = ":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}";
-
-const SideMenuDropdown = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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)))));
-  }
-  get host() { return getElement(this); }
-};
-SideMenuDropdown.style = sideMenuDropdownCss;
-
-export { SideMenuDropdown as sdds_side_menu_dropdown };

package/dist/esm/sdds-side-menu-item.entry.js

@@ -1,67 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-54c55e8d.js';
-import { h as dfs } from './utils-9ac24735.js';
-
-const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:12px;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);cursor:pointer}:host .component sdds-icon{color:red !important}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){background-color:var(--sdds-sidebar-item-state-hover)}:host .component:active ::slotted(a),:host .component:active ::slotted(button){background-color:var(--sdds-sidemenu-item-state-active)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button){border-left:4px solid var(--sdds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--sdds-sidebar-item-state-selected)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
-
-const SddsSideMenuItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.selected = false;
-    this.active = false;
-    this.collapsed = false;
-  }
-  updateSlotted(searchPredicate, mutationCallback) {
-    const assignedElements = this.slotEl.assignedElements({ flatten: true });
-    const firstSlottedElement = assignedElements[0];
-    if (firstSlottedElement) {
-      const foundElement = dfs(firstSlottedElement, searchPredicate);
-      if (foundElement) {
-        mutationCallback(foundElement);
-      }
-    }
-  }
-  /**
-   * This function is needed because we can't use CSS selectors to style something in the light dom
-   */
-  updateSlottedElements() {
-    if (this.slotEl) {
-      const isIconOrSvg = (element) => element.tagName.toLowerCase() === 'sdds-icon' || element.tagName.toLowerCase() === 'svg';
-      const addIconClass = (element) => {
-        element.classList.add('__sdds-side-menu-item-icon');
-        if (this.collapsed) {
-          element.classList.add('__sdds-side-menu-item-icon-collapsed');
-        }
-        else {
-          element.classList.remove('__sdds-side-menu-item-icon-collapsed');
-        }
-      };
-      this.updateSlotted(isIconOrSvg, addIconClass);
-    }
-  }
-  connectedCallback() {
-    // closest() will return null if side-menu-item is inside a shadowRoot that
-    // does not contain a side-menu. This is the case for the side-menu-dropdown.
-    this.sideMenuEl = this.host.closest('sdds-side-menu');
-  }
-  componentDidLoad() {
-    this.slotEl = this.host.shadowRoot.querySelector('slot');
-    this.updateSlottedElements();
-    this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
-  }
-  collapseSideMenuEventHandler(event) {
-    this.collapsed = event.detail.collapsed;
-    this.updateSlottedElements();
-  }
-  render() {
-    return (h(Host, null, h("div", { class: {
-        'component': true,
-        'component-selected': this.selected,
-        'component-active': this.active,
-        'component-collapsed': this.collapsed,
-      } }, h("slot", null))));
-  }
-  get host() { return getElement(this); }
-};
-SddsSideMenuItem.style = sideMenuItemCss;
-
-export { SddsSideMenuItem as sdds_side_menu_item };

package/dist/esm/sdds-side-menu-overlay.entry.js

@@ -1,15 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-54c55e8d.js';
-
-const sideMenuOverlayCss = ":host{position:absolute;width:100%;height:100%;background-color:black;transition:opacity 0.4s linear;opacity:0}";
-
-const SideMenuOverlay = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, null, h("div", null)));
-  }
-};
-SideMenuOverlay.style = sideMenuOverlayCss;
-
-export { SideMenuOverlay as sdds_side_menu_overlay };

package/dist/esm/sdds-side-menu-user-image_2.entry.js

@@ -1,31 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-54c55e8d.js';
-
-const sideMenuUserImageCss = ":host img,:host ::slotted(*){width:34px;height:34px;border-radius:50%}";
-
-const SideMenuUserImage = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.src = undefined;
-    this.alt = undefined;
-  }
-  render() {
-    return (h(Host, null, h("slot", null), this.src && h("img", { src: this.src, alt: this.alt })));
-  }
-};
-SideMenuUserImage.style = sideMenuUserImageCss;
-
-const sideMenuUserLabelCss = ":host{display:block;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-sidebar-side-menu-single-item-color)}:host .subheading{color:var(--sdds-grey-500)}";
-
-const SideMenuUserLabel = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.heading = undefined;
-    this.subheading = undefined;
-  }
-  render() {
-    return (h(Host, null, this.heading, this.subheading && h("div", { class: "subheading" }, this.subheading)));
-  }
-};
-SideMenuUserLabel.style = sideMenuUserLabelCss;
-
-export { SideMenuUserImage as sdds_side_menu_user_image, SideMenuUserLabel as sdds_side_menu_user_label };

package/dist/esm/sdds-side-menu-user.entry.js

@@ -1,19 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-54c55e8d.js';
-
-const sideMenuUserCss = ":host{display:flex;align-items:center;gap:12px;height:68px}:host sdds-side-menu-user-image{margin-left:-4px}";
-
-const SideMenuUser = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.heading = undefined;
-    this.subheading = undefined;
-    this.imgSrc = undefined;
-    this.imgAlt = undefined;
-  }
-  render() {
-    return (h(Host, null, h("sdds-side-menu-user-image", { src: this.imgSrc, alt: this.imgAlt }, h("slot", { name: "image" })), h("sdds-side-menu-user-label", { heading: this.heading, subheading: this.subheading })));
-  }
-};
-SideMenuUser.style = sideMenuUserCss;
-
-export { SideMenuUser as sdds_side_menu_user };

package/dist/esm/sdds-side-menu.entry.js

@@ -1,111 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-54c55e8d.js';
-import { h as dfs, j as isFocusable } from './utils-9ac24735.js';
-
-const sideMenuCss = ":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;}: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}";
-
-const GRID_LG_BREAKPOINT = '992px';
-const OPENING_ANIMATION_DURATION = 400;
-const INITIALIZE_ANIMATION_DELAY = 500;
-const SddsSideMenu = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sddsCollapse = createEvent(this, "sddsCollapse", 7);
-    this.internalSddsCollapse = createEvent(this, "internalSddsCollapse", 6);
-    this.internalSddsSideMenuPropChange = createEvent(this, "internalSddsSideMenuPropChange", 6);
-    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" })))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "open": ["onOpenChange"],
-    "collapsed": ["onCollapsedChange"],
-    "isOpening": ["onIsOpenChange"]
-  }; }
-};
-SddsSideMenu.style = sideMenuCss;
-
-export { SddsSideMenu as sdds_side_menu };