@scania/tegel 0.0.4 → 0.0.6

package/dist/types/components/message/message.stories.d.ts

@@ -9,15 +9,20 @@ declare const _default: {
     }[];
   };
   argTypes: {
-    messageType: {
+    modeVariant: {
       name: string;
       description: string;
       control: {
         type: string;
       };
       options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
-    modeVariant: {
+    messageType: {
       name: string;
       description: string;
       control: {
@@ -30,39 +35,54 @@ declare const _default: {
         };
       };
     };
-    icon: {
+    showExtendedMessage: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
     };
-    iconType: {
+    noIcon: {
       name: string;
       description: string;
       control: {
         type: string;
       };
-      options: string[];
-      if: {
-        arg: string;
-        eq: boolean;
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
       };
     };
-    showExtendedMessage: {
+    iconType: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      options: string[];
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
   };
   args: {
-    messageType: string;
     modeVariant: string;
-    icon: boolean;
-    iconType: string;
+    messageType: string;
     showExtendedMessage: boolean;
+    noIcon: boolean;
+    iconType: string;
   };
 };
 export default _default;

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

@@ -10,7 +10,7 @@ declare const _default: {
     }[];
   };
   argTypes: {
-    messageType: {
+    modeVariant: {
       name: string;
       description: string;
       control: {
@@ -23,7 +23,7 @@ declare const _default: {
         };
       };
     };
-    modeVariant: {
+    messageType: {
       name: string;
       description: string;
       control: {
@@ -45,11 +45,12 @@ declare const _default: {
     };
     extendedMessage: {
       name: string;
+      description: string;
       control: {
         type: string;
       };
     };
-    noIcon: {
+    minimal: {
       name: string;
       description: string;
       control: {
@@ -57,11 +58,11 @@ declare const _default: {
       };
       table: {
         defaultValue: {
-          summary: string;
+          summary: boolean;
         };
       };
     };
-    minimal: {
+    noIcon: {
       name: string;
       description: string;
       control: {
@@ -69,18 +70,18 @@ declare const _default: {
       };
       table: {
         defaultValue: {
-          summary: string;
+          summary: boolean;
         };
       };
     };
   };
   args: {
-    messageType: string;
     modeVariant: string;
+    messageType: string;
     header: string;
-    noIcon: boolean;
     extendedMessage: string;
     minimal: boolean;
+    noIcon: boolean;
   };
 };
 export default _default;

package/dist/types/components/modal/modal-native.stories.d.ts

@@ -9,49 +9,64 @@ declare const _default: {
     }[];
   };
   argTypes: {
-    size: {
+    actions: {
       name: string;
       description: string;
       control: {
         type: string;
       };
       options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
-    showModal: {
+    size: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
-    actions: {
+    headline: {
       name: string;
       description: string;
       control: {
         type: string;
       };
-      options: string[];
     };
-    headline: {
+    bodyText: {
       name: string;
       description: string;
       control: {
         type: string;
       };
     };
-    bodyText: {
+    showModal: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
     };
   };
   args: {
-    headline: string;
-    bodyText: string;
     actions: string;
     size: string;
+    headline: string;
+    bodyText: string;
     showModal: boolean;
   };
 };

package/dist/types/components/modal/modal-webcomponent.stories.d.ts

@@ -10,21 +10,31 @@ declare const _default: {
     }[];
   };
   argTypes: {
-    size: {
+    actions: {
       name: string;
       description: string;
       control: {
         type: string;
       };
       options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
-    actions: {
+    size: {
       name: string;
       description: string;
       control: {
         type: string;
       };
       options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
     headline: {
       name: string;
@@ -40,12 +50,20 @@ declare const _default: {
         type: string;
       };
     };
+    showModal: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
   };
   args: {
-    headline: string;
-    bodyText: string;
     actions: string;
     size: string;
+    headline: string;
+    bodyText: string;
+    showModal: boolean;
   };
 };
 export default _default;

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

@@ -1,17 +1,37 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class Modal {
+  host: HTMLElement;
   /** Disables closing modal on clicking on overlay area. */
   prevent: boolean;
   /** Size of modal  */
   size: 'xs' | 'sm' | 'md' | 'lg';
   /** Sticky or Static Actions  */
   actions: 'sticky' | 'static';
-  open: boolean;
-  el: HTMLElement;
-  closeButtonEl: HTMLElement;
-  /** Shows the modal  */
-  openModal(): Promise<void>;
+  /** CSS selector for the element that will show the modal. */
+  selector: string;
+  /** Element that will show the modal (takes priority over selector) */
+  referenceEl: HTMLElement;
+  /** Controls whether the modal is shown or not. If this is set hiding and showing
+   * will be decided by this prop and will need to be controlled from the outside. */
+  show: boolean;
+  isShown: boolean;
+  /** Shows the modal.  */
+  showModal(): Promise<void>;
+  /** Closes the modal. */
+  closeModal(): Promise<void>;
+  /** Emitts when the modal is closed. */
+  sddsClose: EventEmitter<any>;
+  connectedCallback(): void;
+  /** Emits a close event and then close the modal if it is not prevented. */
+  handleClose: (event?: any) => void;
+  handleShow: () => void;
+  /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */
+  handleOverlayClick(event: any): void;
+  /** Adds an event listener to the reference element that shows/closes the modal. */
+  initializeReferenceElement: (referenceEl: any) => void;
+  /** Check if there is a referenceElement or selector and adds event listener to them if so. */
+  setShowButton: () => void;
+  /** Adds an event listener to the dismiss buttons that closes the modal. */
   setDissmissButtons(): void;
-  handleClick(e: any): void;
-  componentDidRender(): void;
   render(): any;
 }

package/dist/types/components/popover-canvas/popover-canvas.d.ts

@@ -1,22 +1,31 @@
 import type { Placement, Instance } from '@popperjs/core';
 export declare class PopoverCanvas {
-  popoverCanvasElement: HTMLElement;
+  host: HTMLSddsPopoverCanvasElement;
   /** The CSS-selector for an element that will trigger the popover */
   selector: string;
   /** Element that will trigger the popover (takes priority over selector) */
   referenceEl: HTMLElement;
-  /** Decides if the Popover Canvas should be visible from the start */
+  /** Controls wether the popover is shown or not. If this is set hiding and showing
+   * will be decided by this prop and will need to be controlled from the outside.
+   */
   show: boolean;
-  /** Decides the placement of the Popover Canvas */
+  /** Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement */
   placement: Placement;
   /** Sets the offset skidding */
   offsetSkidding: number;
   /** Sets the offset distance */
   offsetDistance: number;
+  /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */
+  modifiers: Object[];
   renderedShowValue: boolean;
   popperInstance: Instance;
   target: any;
-  handleOutsideClick(): void;
+  isShown: boolean;
+  onShowChange(newValue: boolean): void;
+  onReferenceElChange(newValue: HTMLElement, oldValue: HTMLElement): void;
+  onAnyClick(event: MouseEvent): void;
+  initialize: (referenceEl: any) => void;
+  connectedCallback(): void;
   componentDidLoad(): void;
   componentDidRender(): void;
   disconnectedCallback(): void;

package/dist/types/components/popover-canvas/popover-canvas.stories.d.ts

@@ -8,13 +8,15 @@ declare const _default: {
     canvasPosition: {
       name: string;
       description: string;
-      type: {
-        summary: string;
-      };
       control: {
         type: string;
       };
       options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
   };
   args: {

package/dist/types/components/popover-menu/popover-menu-icons.stories.d.ts

@@ -17,6 +17,11 @@ declare const _default: {
         type: string;
       };
       options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
   };
   args: {

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

@@ -17,6 +17,11 @@ declare const _default: {
         type: string;
       };
       options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
   };
   args: {

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

@@ -25,7 +25,7 @@ declare const _default: {
       };
       table: {
         defaultValue: {
-          summary: string;
+          summary: 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/radio-button/radio-button.stories.d.ts

@@ -12,7 +12,7 @@ declare const _default: {
     label: {
       name: string;
       description: string;
-      controls: {
+      control: {
         type: string;
       };
     };
@@ -22,6 +22,11 @@ declare const _default: {
       control: {
         type: string;
       };
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
   };
   args: {

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;
+}