@scania/tegel 0.0.34 → 0.0.52

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.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/slider/slider.d.ts

@@ -27,7 +27,7 @@ export declare class Slider {
   /** Name property (will be inherited by the native slider component) */
   name: string;
   /** Sets the size of the scrubber */
-  size: 'sm' | '';
+  scrubberSize: 'sm' | 'lg';
   /** Snap to the ticks grid */
   snap: boolean;
   /** Id for the sliders input element, randomly generated if not specified. */
@@ -55,7 +55,7 @@ export declare class Slider {
   supposedValueSlot: number;
   eventListenersAdded: boolean;
   resizeObserverAdded: boolean;
-  /** Sends unique checkbox identifier and value when the slider has a change in value. */
+  /** Sends the value of the slider when changed. */
   sddsChange: EventEmitter<{
     value: string;
   }>;

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

@@ -1,26 +1,41 @@
 declare const _default: {
   title: string;
   argTypes: {
-    initialValue: {
+    min: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      table: {
+        defaultValue: {
+          summary: number;
+        };
+      };
     };
-    min: {
+    max: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      table: {
+        defaultValue: {
+          summary: number;
+        };
+      };
     };
-    max: {
+    initialValue: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      table: {
+        defaultValue: {
+          summary: number;
+        };
+      };
     };
     showLabel: {
       name: string;
@@ -37,24 +52,33 @@ declare const _default: {
       };
       if: {
         arg: string;
-        truthy: boolean;
+        eq: boolean;
       };
     };
-    showTooltip: {
+    showTicks: {
       name: string;
       description: string;
       control: {
         type: string;
       };
     };
-    showTicks: {
+    numTicks: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+      table: {
+        defaultValue: {
+          summary: number;
+        };
+      };
     };
-    numTicks: {
+    showTickNumbers: {
       name: string;
       description: string;
       control: {
@@ -62,7 +86,12 @@ declare const _default: {
       };
       if: {
         arg: string;
-        truthy: boolean;
+        eq: boolean;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
       };
     };
     snapToTicks: {
@@ -73,18 +102,24 @@ declare const _default: {
       };
       if: {
         arg: string;
-        truthy: boolean;
+        eq: boolean;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
       };
     };
-    showTickNumbers: {
+    showTooltip: {
       name: string;
       description: string;
       control: {
         type: string;
       };
-      if: {
-        arg: string;
-        truthy: boolean;
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
       };
     };
     showControls: {
@@ -93,6 +128,11 @@ declare const _default: {
       control: {
         type: string;
       };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
     };
     step: {
       name: string;
@@ -102,7 +142,12 @@ declare const _default: {
       };
       if: {
         arg: string;
-        truthy: boolean;
+        eq: boolean;
+      };
+      table: {
+        defaultValue: {
+          summary: number;
+        };
       };
     };
     showInput: {
@@ -113,15 +158,26 @@ declare const _default: {
       };
       if: {
         arg: string;
-        truthy: boolean;
+        eq: boolean;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
       };
     };
-    disabled: {
+    scrubberSize: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
     readonly: {
       name: string;
@@ -129,13 +185,23 @@ declare const _default: {
       control: {
         type: string;
       };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
     };
-    small: {
+    disabled: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
     };
   };
   parameters: {
@@ -147,22 +213,22 @@ declare const _default: {
     }[];
   };
   args: {
+    min: string;
+    max: string;
     initialValue: string;
     showLabel: boolean;
     labelText: string;
-    showTooltip: boolean;
     showTicks: boolean;
     numTicks: string;
     showTickNumbers: boolean;
+    snapToTicks: boolean;
+    showTooltip: boolean;
     showControls: boolean;
-    showInput: boolean;
-    min: string;
-    max: string;
     step: string;
-    disabled: boolean;
-    small: boolean;
-    snapToTicks: boolean;
+    showInput: boolean;
+    scrubberSize: string;
     readonly: boolean;
+    disabled: boolean;
   };
 };
 export default _default;

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

@@ -12,19 +12,29 @@ declare const _default: {
   argTypes: {
     variant: {
       name: string;
+      description: string;
       control: {
         type: string;
       };
       options: string[];
-      description: string;
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
     size: {
       name: string;
+      description: string;
       control: {
         type: string;
       };
       options: string[];
-      description: string;
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
   };
   args: {

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

@@ -0,0 +1,17 @@
+import { HostElement } from '../../stencil-public-runtime';
+export declare class SddsStepper {
+  /** The direction the children are layed out. */
+  direction: '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>;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1,17 @@
+export declare class SddsStepper {
+  /** Label text for the stepper-item. */
+  labelText: string;
+  /** State of the stepper-item */
+  state: 'current' | 'error' | 'success' | 'upcoming';
+  hideLabel: boolean;
+  size: string;
+  iconSize: string;
+  direction: string;
+  labelPosition: string;
+  el: HTMLElement;
+  stepperEl: HTMLSddsStepperElement;
+  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>;
+  render(): any;
+}

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

@@ -16,6 +16,11 @@ declare const _default: {
         type: string;
       };
       options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
     style: {
       name: string;
@@ -24,33 +29,44 @@ declare const _default: {
         type: string;
       };
       options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
-    showLabel: {
+    iconType: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
-    iconType: {
+    hideLabels: {
       name: string;
       description: string;
       control: {
         type: string;
       };
-      options: string[];
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
     };
   };
   args: {
     size: string;
     style: string;
-    showLabel: boolean;
     iconType: string;
+    hideLabels: boolean;
   };
 };
 export default _default;
-export declare const Default: any;
-export declare const Small: any;
-export declare const TextOnSide: any;
-export declare const Vertical: any;
-export declare const HideLabel: any;
+export declare const Native: any;

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

@@ -0,0 +1,10 @@
+export declare class SddsFolderTabsButton {
+  /** 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>;
+  render(): any;
+}

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

@@ -0,0 +1,16 @@
+export declare class SddsFolderTabsLink {
+  /** Disables the tab. */
+  disabled: boolean;
+  /** Marks the tab as the selected one. */
+  selected: boolean;
+  /** Href for the link */
+  href: string;
+  /** Where to open the linked URL */
+  target: '_self' | '_blank' | '_parent' | '_top';
+  /** '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;
+  tabWidth: number;
+  /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */
+  setTabWidth(width: number): Promise<void>;
+  render(): any;
+}

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

@@ -0,0 +1,38 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare class InlineTabs {
+  /** Variant of the tabs, primary= on white, secondary= on grey50 */
+  modeVariant: 'primary' | 'secondary';
+  buttonWidth: number;
+  showLeftScroll: boolean;
+  showRightScroll: boolean;
+  selectedTab: string;
+  selectedTabIndex: number;
+  host: HTMLElement;
+  navWrapperElement: HTMLElement;
+  componentWidth: number;
+  buttonsWidth: number;
+  scrollWidth: number;
+  children: Array<HTMLSddsFolderTabsLinkElement | HTMLSddsFolderTabsButtonElement>;
+  calculateButtonWidth(): void;
+  scrollRight(): void;
+  scrollLeft(): void;
+  evaluateScrollButtons(): void;
+  addResizeObserver: () => 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;
+}