@scania/tegel 0.0.5 → 0.0.6

package/dist/types/components/header/webcomponent/header-item/header-item.d.ts

@@ -0,0 +1,16 @@
+export declare class HeaderItem {
+  host: HTMLElement;
+  /** If the button should appear active. Can be used when the button is
+   * triggering a dropdown, and the dropdown is open, for example. */
+  active: boolean;
+  /** If the button should appear selected. */
+  selected: boolean;
+  private slotEl;
+  updateSlotted(searchPredicate: (element: HTMLElement) => boolean, mutationCallback: (element: HTMLElement) => void): void;
+  /**
+   * This function is needed because we can't use CSS selectors to style something in the light dom
+   */
+  updateSlottedElements(): void;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components/header/webcomponent/header-launcher/header-launcher.d.ts

@@ -0,0 +1,12 @@
+export declare class HeaderLauncher {
+  host: HTMLElement;
+  open: boolean;
+  buttonEl?: HTMLSddsHeaderLauncherButtonElement;
+  hasListTypeMenu: boolean;
+  private uuid;
+  private ariaAttributes;
+  onAnyClick(event: MouseEvent): void;
+  componentDidLoad(): void;
+  toggleLauncher(): void;
+  render(): any;
+}

package/dist/types/components/header/webcomponent/header-launcher-button/header-launcher-button.d.ts

@@ -0,0 +1,8 @@
+export declare class HeaderLauncherButton {
+  host: HTMLElement;
+  /** If the button should appear active. Can be used when the button is
+   * triggering a dropdown, and the dropdown is open, for example. */
+  active: boolean;
+  private ariaAttributes;
+  render(): any;
+}

package/dist/types/components/header/webcomponent/header-launcher-grid/header-launcher-grid.d.ts

@@ -0,0 +1,6 @@
+export declare class HeaderLauncherGrid {
+  host: HTMLElement;
+  headingElement: HTMLElement;
+  componentWillLoad(): void;
+  render(): any;
+}

package/dist/types/components/header/webcomponent/header-launcher-grid-item/header-launcher-grid-item.d.ts

@@ -0,0 +1,3 @@
+export declare class HeaderLauncherGridItem {
+  render(): any;
+}

package/dist/types/components/header/webcomponent/header-launcher-grid-title/header-launcher-grid-title.d.ts

@@ -0,0 +1,4 @@
+export declare class HeaderLauncherGridTitle {
+  private uuid;
+  render(): any;
+}

package/dist/types/components/header/webcomponent/header-launcher-list/header-launcher-list.d.ts

@@ -0,0 +1,4 @@
+export declare class HeaderLauncherList {
+  uuid: string;
+  render(): any;
+}

package/dist/types/components/header/webcomponent/header-launcher-list-item/header-launcher-list-item.d.ts

@@ -0,0 +1,3 @@
+export declare class HeaderLauncherListItem {
+  render(): any;
+}

package/dist/types/components/header/webcomponent/header-launcher-list-title/header-launcher-list-title.d.ts

@@ -0,0 +1,5 @@
+export declare class HeaderLauncherListTitle {
+  host: HTMLElement;
+  private uuid;
+  render(): any;
+}

package/dist/types/components/header/webcomponent/header-title/header-title.d.ts

@@ -0,0 +1,3 @@
+export declare class HeaderTitle {
+  render(): any;
+}

package/dist/types/components/link/sdds-link.d.ts

@@ -1,13 +1,10 @@
+import { HostElement } from '../../stencil-public-runtime';
 export declare class SddsLink {
-  /** URL for the link */
-  href: string;
-  /** Where to open the linked URL */
-  target: '_self' | '_blank' | '_parent' | '_top';
   /** Disables the link */
   disabled: boolean;
   /** Displays the link with an underline. */
   underline: boolean;
-  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */
-  rel: string;
+  host: HostElement;
+  connectedCallback(): void;
   render(): any;
 }

package/dist/types/components/link/sdds-link.stories.d.ts

@@ -22,19 +22,6 @@ declare const _default: {
         };
       };
     };
-    target: {
-      name: string;
-      description: string;
-      control: {
-        type: string;
-      };
-      options: string[];
-      table: {
-        defaultValue: {
-          summary: string;
-        };
-      };
-    };
     disabled: {
       name: string;
       description: string;
@@ -50,7 +37,6 @@ declare const _default: {
   };
   args: {
     underline: boolean;
-    target: string;
     disabled: boolean;
   };
 };

package/dist/types/components/radio-button/radio-button.d.ts

@@ -22,5 +22,6 @@ export declare class RadioButton {
     radioId: string;
     value: string;
   }>;
+  handleChange: () => void;
   render(): any;
 }

package/dist/types/components/side-menu/side-menu.stories.d.ts

@@ -39,4 +39,4 @@ declare const _default: {
   };
 };
 export default _default;
-export declare const Default: any;
+export declare const Native: any;

package/dist/types/components/side-menu/webcomponent/side-menu-close-button/side-menu-close-button.d.ts

@@ -0,0 +1,4 @@
+export declare class SideMenuCloseButton {
+  host: HTMLElement;
+  render(): any;
+}

package/dist/types/components/side-menu/webcomponent/side-menu-collapse-button/side-menu-collapse-button.d.ts

@@ -0,0 +1,9 @@
+import { CollapsedEvent } from '../side-menu';
+export declare class SideMenuCollapseButton {
+  host: HTMLElement;
+  collapsed: boolean;
+  private sideMenuEl;
+  collapsedSideMenuEventHandler(event: CustomEvent<CollapsedEvent>): void;
+  connectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/side-menu/webcomponent/side-menu-dropdown/side-menu-dropdown.d.ts

@@ -0,0 +1,28 @@
+import { CollapsedEvent } from '../side-menu';
+export declare class SideMenuDropdown {
+  host: HTMLElement;
+  /** If the dropdown should be open from the start. */
+  defaultOpen: boolean;
+  /** The label of the button that opens the dropdown.
+   * This is an alternative to the button-label slot. */
+  buttonLabel: string;
+  /** If the button that opens the dropdown should appear selected. */
+  selected: boolean;
+  open: boolean;
+  hoverState: {
+    isHovered: boolean;
+    updatedAt: number;
+  };
+  collapsed: boolean;
+  private sideMenuEl;
+  collapsedSideMenuEventHandler(event: CustomEvent<CollapsedEvent>): void;
+  onEventPointerEnter(): void;
+  onEventFocus(): void;
+  onEventPointerLeave(): void;
+  onEventBlur(): void;
+  setHoverStateOpen(): void;
+  setHoverStateClosed(): void;
+  getIsOpenState(): boolean;
+  connectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/side-menu/webcomponent/side-menu-dropdown-list/side-menu-dropdown-list.d.ts

@@ -0,0 +1,9 @@
+import { CollapsedEvent } from '../side-menu';
+export declare class SideMenuDropdownList {
+  host: HTMLElement;
+  collapsed: boolean;
+  private sideMenuEl;
+  collapsedSideMenuEventHandler(event: CustomEvent<CollapsedEvent>): void;
+  connectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/side-menu/webcomponent/side-menu-dropdown-list-item/side-menu-dropdown-list-item.d.ts

@@ -0,0 +1,13 @@
+import { CollapsedEvent } from '../side-menu';
+export declare class SideMenuDropdownListItem {
+  host: HTMLElement;
+  /** If the item should appear selected. */
+  selected: boolean;
+  dropdownHasIcon: boolean;
+  collapsed: boolean;
+  private sideMenuEl;
+  collapsedSideMenuEventHandeler(event: CustomEvent<CollapsedEvent>): void;
+  connectedCallback(): void;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components/side-menu/webcomponent/side-menu-item/side-menu-item.d.ts

@@ -0,0 +1,21 @@
+import { CollapsedEvent } from '../side-menu';
+export declare class SddsSideMenuItem {
+  host: HTMLSddsSideMenuItemElement;
+  /** If the item should appear selected. */
+  selected: boolean;
+  /** If the item should appear active. Can be used when the item is
+   * triggering a dropdown, and the dropdown is open, for example. */
+  active: boolean;
+  collapsed: boolean;
+  private sideMenuEl;
+  private slotEl;
+  updateSlotted(searchPredicate: (element: HTMLElement) => boolean, mutationCallback: (element: HTMLElement) => void): void;
+  /**
+   * This function is needed because we can't use CSS selectors to style something in the light dom
+   */
+  updateSlottedElements(): void;
+  connectedCallback(): void;
+  componentDidLoad(): void;
+  collapsedSideMenuEventHandeler(event: CustomEvent<CollapsedEvent>): void;
+  render(): any;
+}

package/dist/types/components/side-menu/webcomponent/side-menu-overlay/side-menu-overlay.d.ts

@@ -0,0 +1,3 @@
+export declare class SideMenuOverlay {
+  render(): any;
+}

package/dist/types/components/side-menu/webcomponent/side-menu-user/side-menu-user.d.ts

@@ -0,0 +1,11 @@
+export declare class SideMenuUser {
+  /** The heading text. */
+  heading: string;
+  /** The subheading text. */
+  subheading: string;
+  /** The image source. */
+  imgSrc: string;
+  /** The image alt text. */
+  imgAlt: string;
+  render(): any;
+}

package/dist/types/components/side-menu/webcomponent/side-menu-user-image/side-menu-user-image.d.ts

@@ -0,0 +1,7 @@
+export declare class SideMenuUserImage {
+  /** The image source. */
+  src: string;
+  /** The image alt text. */
+  alt: string;
+  render(): any;
+}

package/dist/types/components/side-menu/webcomponent/side-menu-user-label/side-menu-user-label.d.ts

@@ -0,0 +1,7 @@
+export declare class SideMenuUserLabel {
+  /** The heading text. */
+  heading: string;
+  /** The subheading text. */
+  subheading: string;
+  render(): any;
+}

package/dist/types/components/side-menu/webcomponent/side-menu-webcomponent.stories.d.ts

@@ -0,0 +1,50 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: {
+      'Side Menu': any;
+      'Side Menu Close Button': any;
+      'Side Menu Overlay': any;
+      'Side Menu User': any;
+      'Side Menu Collapse Button': any;
+      'Side Menu Dropdown': any;
+    };
+    layout: string;
+    docs: {
+      source: {
+        state: string;
+      };
+    };
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    persistent: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    collapsible: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      if: {
+        arg: string;
+        truthy: boolean;
+      };
+    };
+  };
+  args: {
+    persistent: boolean;
+    collapsible: boolean;
+  };
+};
+export default _default;
+export declare const WebComponent: any;

package/dist/types/components/side-menu/webcomponent/side-menu.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export interface CollapsedEvent {
+  collapsed: boolean;
+}
+export declare class SddsSideMenu {
+  host: HTMLSddsSideMenuElement;
+  /** Broadcasts collapsed state to child components. */
+  collapsedEventEmitter: EventEmitter<CollapsedEvent>;
+  /** If the side menu is open or not. */
+  open: boolean;
+  /** If the side menu should always be shown on desktop screens to the side. */
+  persistent: boolean;
+  /** If the side menu is collapsed. Only a persistent desktop menu can be collapsed. */
+  collapsed: boolean;
+  isUpperSlotEmpty: boolean;
+  isClosed: boolean;
+  isOpen: boolean;
+  isClosing: boolean;
+  isOpening: boolean;
+  private matchesLgBreakpointMq;
+  handleMatchesLgBreakpointChange: (e: MediaQueryListEvent) => void;
+  connectedCallback(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  onOpenChange(newVal: boolean, oldVal?: boolean): void;
+  onCollapsedChange(newVal: boolean): void;
+  onIsOpenChange(newVal: boolean): void;
+  setOpening(): Promise<void>;
+  setClosing(): Promise<void>;
+  render(): any;
+}

package/dist/types/components/slider/slider.d.ts

@@ -30,32 +30,29 @@ export declare class Slider {
   scrubberSize: 'sm' | 'lg';
   /** Snap to the ticks grid */
   snap: boolean;
-  /** Id for the sliders input element, randomly generated if not specified. */
+  /** ID for the sliders input element, randomly generated if not specified. */
   sliderId: string;
-  wrapperElement: HTMLElement;
-  scrubberElement: HTMLElement;
-  scrubberInnerElement: HTMLElement;
-  dividersElement: HTMLElement;
-  trackElement: HTMLElement;
-  trackFillElement: HTMLElement;
-  minusElement: HTMLElement;
-  plusElement: HTMLElement;
-  inputElement: HTMLInputElement;
-  nativeRangeInputElement: HTMLInputElement;
-  scrubberGrabPos: object;
-  scrubberGrabbed: boolean;
-  scrubberLeft: number;
-  tickValues: Array<number>;
-  disabledState: boolean;
-  readonlyState: boolean;
-  useControls: boolean;
-  useInput: boolean;
-  useSmall: boolean;
-  useSnapping: boolean;
-  supposedValueSlot: number;
-  eventListenersAdded: boolean;
-  resizeObserverAdded: boolean;
-  /** Sends unique checkbox identifier and value when the slider has a change in value. */
+  private wrapperElement;
+  private scrubberElement;
+  private scrubberInnerElement;
+  private trackElement;
+  private trackFillElement;
+  private minusElement;
+  private plusElement;
+  private inputElement;
+  private scrubberGrabbed;
+  private scrubberLeft;
+  private tickValues;
+  private disabledState;
+  private readonlyState;
+  private useControls;
+  private useInput;
+  private useSmall;
+  private useSnapping;
+  private supposedValueSlot;
+  private eventListenersAdded;
+  private resizeObserverAdded;
+  /** Sends the value of the slider when changed. */
   sddsChange: EventEmitter<{
     value: string;
   }>;
@@ -66,6 +63,7 @@ export declare class Slider {
   handleTouchEnd(): void;
   handleMouseMove(event: any): void;
   handleTouchMove(event: any): void;
+  scrubberCore(event: any): void;
   updateTrack(): void;
   dispatchChangeEvent(): void;
   updateValue(): void;
@@ -76,7 +74,7 @@ export declare class Slider {
   getTrackWidth(): number;
   calculateScrubberLeftFromValue(value: any): void;
   componentDidLoad(): void;
-  grabScrubber(xOffset: any, yOffset: any): void;
+  grabScrubber(): void;
   calculateInputSizeFromMax(): number;
   controlsStep(delta: any): void;
   stepLeft(): void;

package/dist/types/components/stepper/sdds-stepper.d.ts

@@ -1,17 +1,35 @@
-import { HostElement } from '../../stencil-public-runtime';
+import { EventEmitter, HostElement } from '../../stencil-public-runtime';
+type SddsStepperProps = {
+  orientation: 'horizontal' | 'vertical';
+  labelPosition: 'aside' | 'below';
+  size: 'sm' | 'lg';
+  hideLabels: boolean;
+};
+export type InternalSddsStepperPropChange = {
+  stepperId: string;
+  changed: Array<keyof SddsStepperProps>;
+} & Partial<SddsStepperProps>;
 export declare class SddsStepper {
-  /** The direction the children are layed out. */
-  direction: 'horizontal' | 'vertical';
+  host: HostElement;
+  /** The orientation the children are layed out. */
+  orientation: 'horizontal' | 'vertical';
   /** Text position, only available on direction:horizontal */
   labelPosition: 'aside' | 'below';
   /** Size of the component and it's children. */
   size: 'sm' | 'lg';
   /** Hides the label for the child components if true. */
   hideLabels: boolean;
-  width: number;
-  host: HostElement;
-  children: Array<HTMLSddsStepperItemElement>;
+  /** ID used for internal stepper functionality and events, must be unique.
+   *
+   * **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.
+   */
+  stepperId: string;
   componentWillLoad(): void;
-  componentDidLoad(): void;
+  internalSddsPropsChange: EventEmitter<InternalSddsStepperPropChange>;
+  handleDirectionChange(): void;
+  handleLabelPositionChange(): void;
+  handleSizeChange(): void;
+  handleHideLabelsChange(): void;
   render(): any;
 }
+export {};

package/dist/types/components/stepper/stepper-item/sdds-stepper-item.d.ts

@@ -1,17 +1,17 @@
+import { InternalSddsStepperPropChange } from '../sdds-stepper';
 export declare class SddsStepper {
-  /** Label text for the stepper-item. */
-  labelText: string;
+  /** Index of the step. Will be displayed in the step if state is current/upcoming. */
+  index: string;
   /** State of the stepper-item */
   state: 'current' | 'error' | 'success' | 'upcoming';
   hideLabel: boolean;
-  size: string;
-  iconSize: string;
-  direction: string;
-  labelPosition: string;
+  size: 'sm' | 'lg';
+  orientation: 'horizontal' | 'vertical';
+  labelPosition: 'aside' | 'below';
   el: HTMLElement;
-  stepperEl: HTMLSddsStepperElement;
+  private stepperEl;
+  private stepperId;
   componentWillLoad(): void;
-  /** Method to set the width if the stepper item based on its siblings widht, used by the parent element. */
-  setWidth(width: any): Promise<void>;
+  handlePropsChange(event: CustomEvent<InternalSddsStepperPropChange>): void;
   render(): any;
 }

package/dist/types/components/tabs/folder-tabs/{folder-tabs-button/sdds-folder-tabs-button.d.ts → folder-tab/sdds-folder-tab.d.ts}

@@ -1,10 +1,11 @@
-export declare class SddsFolderTabsButton {
+export declare class SddsFolderTab {
   /** Disables the tab. */
   disabled: boolean;
-  /** Marks the tab as the selected one. */
   selected: boolean;
   tabWidth: number;
   /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */
   setTabWidth(width: number): Promise<void>;
+  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */
+  setSelected(selected: boolean): Promise<void>;
   render(): any;
 }

package/dist/types/components/tabs/folder-tabs/folder-tabs.d.ts

@@ -1,38 +1,38 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class InlineTabs {
+  host: HTMLElement;
   /** Variant of the tabs, primary= on white, secondary= on grey50 */
   modeVariant: 'primary' | 'secondary';
+  /** Sets the default selected tab. */
+  defaultSelectedIndex: number;
+  /** Sets the selected tab.
+   * If this is set all tab changes needs to be handled by the user. */
+  selectedIndex: number;
   buttonWidth: number;
   showLeftScroll: boolean;
   showRightScroll: boolean;
-  selectedTab: string;
-  selectedTabIndex: number;
-  host: HTMLElement;
-  navWrapperElement: HTMLElement;
-  componentWidth: number;
-  buttonsWidth: number;
-  scrollWidth: number;
-  children: Array<HTMLSddsFolderTabsLinkElement | HTMLSddsFolderTabsButtonElement>;
+  private navWrapperElement;
+  private componentWidth;
+  private buttonsWidth;
+  private scrollWidth;
+  private children;
+  /** Event emitted when the selected tab is changed. */
+  sddsChange: EventEmitter<{
+    selectedTabIndex: number;
+  }>;
+  /** Sets the passed tabindex as the selected tab. */
+  selectTab(tabIndex: number): Promise<{
+    selectedTabIndex: number;
+  }>;
   calculateButtonWidth(): void;
   scrollRight(): void;
   scrollLeft(): void;
   evaluateScrollButtons(): void;
   addResizeObserver: () => void;
+  addEventListenerToTabs: () => void;
   connectedCallback(): void;
   componentDidLoad(): void;
   componentDidUpdate(): void;
-  componentWillRender(): void;
   componentDidRender(): void;
-  sddsChange: EventEmitter<{
-    selectedTab: string;
-    selectedTabIndex: number;
-  }>;
-  /** Sets the passed tabindex as the selected tab. */
-  selectTab(tabIndex: number): Promise<{
-    selectedTab: string;
-    selectedTabIndex: number;
-  }>;
-  handleSelectedTabChange(): void;
-  handleSelectedTabIndexChange(): void;
   render(): any;
 }

package/dist/types/components/tabs/folder-tabs/folder-tabs.stories.d.ts

@@ -3,8 +3,7 @@ declare const _default: {
   parameters: {
     notes: {
       'Folder tabs': any;
-      'Folder tabs button': any;
-      'Folder tabs link': any;
+      'Folder tabs item': any;
     };
     backgrounds: {
       default: string;
@@ -29,13 +28,30 @@ declare const _default: {
         };
       };
     };
-    tabType: {
+    defaultSelectedIndex: {
       name: string;
       description: string;
       control: {
         type: string;
       };
-      options: string[];
+      options: (string | number)[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    selectedIndex: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: (string | number)[];
+      if: {
+        arg: string;
+        eq: string;
+      };
     };
     backgrounds: {
       table: {
@@ -45,7 +61,8 @@ declare const _default: {
   };
   args: {
     modeVariant: string;
-    tabType: string;
+    defaultSelectedIndex: string;
+    selectedIndex: string;
   };
 };
 export default _default;

package/dist/types/components/tabs/inline-tabs/inline-tab/sdds-inline-tab.d.ts

@@ -0,0 +1,8 @@
+export declare class SddsInlineTab {
+  /** Disables the tab. */
+  disabled: boolean;
+  selected: boolean;
+  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */
+  setSelected(selected: boolean): Promise<void>;
+  render(): any;
+}