@scania/tegel 0.0.4 → 0.0.5

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,28 +29,43 @@ 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;

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

package/dist/types/components/tabs/{inline-tabs-default/inline-tabs.stories.d.ts → folder-tabs/folder-tabs.stories.d.ts}

@@ -2,8 +2,9 @@ declare const _default: {
   title: string;
   parameters: {
     notes: {
-      'Inline Tabs': any;
-      'Inline Tab': any;
+      'Folder tabs': any;
+      'Folder tabs button': any;
+      'Folder tabs link': any;
     };
     backgrounds: {
       default: string;
@@ -15,15 +16,9 @@ declare const _default: {
     }[];
   };
   argTypes: {
-    autoHeight: {
-      name: string;
-      description: string;
-      control: {
-        type: string;
-      };
-    };
     modeVariant: {
       name: string;
+      description: string;
       control: {
         type: string;
       };
@@ -34,6 +29,14 @@ declare const _default: {
         };
       };
     };
+    tabType: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+    };
     backgrounds: {
       table: {
         disable: boolean;
@@ -41,9 +44,9 @@ declare const _default: {
     };
   };
   args: {
-    autoHeight: boolean;
     modeVariant: string;
+    tabType: string;
   };
 };
 export default _default;
-export declare const InlineTabs: any;
+export declare const FolderTabs: any;

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

@@ -0,0 +1,7 @@
+export declare class SddsInlineTabsButton {
+  /** Disables the tab. */
+  disabled: boolean;
+  /** Marks the tab as the selected one. */
+  selected: boolean;
+  render(): any;
+}

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

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

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

@@ -0,0 +1,40 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { HostElement } from '../../../stencil-public-runtime';
+export declare class InlineTabsFullbleed {
+  /** Variant of the tabs, primary= on white, secondary= on grey50 */
+  modeVariant: 'primary' | 'secondary';
+  host: HostElement;
+  showLeftScroll: boolean;
+  showRightScroll: boolean;
+  selectedTab: {
+    tab: string;
+    tabIndex: number;
+  };
+  buttonWidth: number;
+  private navWrapperElement;
+  private componentWidth;
+  private buttonsWidth;
+  private scrollWidth;
+  private children;
+  /** Selects a tab based on tabindex, will not select a disabled tab. */
+  selectTab(tabIndex: number): Promise<{
+    selectedTab: string;
+    selectedTabIndex: number;
+  }>;
+  sddsChange: EventEmitter<{
+    selectedTab: {
+      tab: string;
+      tabIndex: number;
+    };
+  }>;
+  handleSelectedTabChange(): void;
+  connectedCallback(): void;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  componentDidRender(): void;
+  scrollRight(): void;
+  scrollLeft(): void;
+  evaluateScrollButtons(): void;
+  addResizeObserver: () => void;
+  render(): any;
+}

package/dist/types/components/tabs/{inline-tabs-fullbleed/inline-tabs-fullbleed.stories.d.ts → inline-tabs/inline-tabs.stories.d.ts}

@@ -1,7 +1,11 @@
 declare const _default: {
   title: string;
   parameters: {
-    notes: any;
+    notes: {
+      'Inline tabs': any;
+      'Inline tabs button': any;
+      'Inline tabs link': any;
+    };
     design: {
       name: string;
       type: string;
@@ -11,6 +15,7 @@ declare const _default: {
   argTypes: {
     modeVariant: {
       name: string;
+      description: string;
       control: {
         type: string;
       };
@@ -21,10 +26,19 @@ declare const _default: {
         };
       };
     };
+    tabType: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+    };
   };
   args: {
     modeVariant: string;
+    tabType: string;
   };
 };
 export default _default;
-export declare const InlineTabsFullbleed: any;
+export declare const InlineTabs: any;

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

@@ -0,0 +1,7 @@
+export declare class SddsNavigationTabsButton {
+  /** Disables the tab. */
+  disabled: boolean;
+  /** Marks the tab as the selected one. */
+  selected: boolean;
+  render(): any;
+}

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

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

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

@@ -1,18 +1,33 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class NavigationTabs {
+  /** Variant of the tabs, primary= on white, secondary= on grey50 */
+  modeVariant: 'primary' | 'secondary';
   host: HTMLElement;
-  tabs: Array<any>;
   showLeftScroll: boolean;
   showRightScroll: boolean;
-  /** Variant of the tabs, primary= on white, secondary= on grey50 */
-  modeVariant: 'primary' | 'secondary';
-  navWrapperElement: HTMLElement;
-  componentWidth: number;
-  buttonsWidth: number;
-  scrollWidth: number;
-  buttonWidth: number;
-  componentDidRender(): void;
+  selectedTab: {
+    tab: string;
+    tabIndex: number;
+  };
+  private navWrapperElement;
+  private componentWidth;
+  private buttonsWidth;
+  private scrollWidth;
+  private children;
+  /** Selects a tab based on tabindex, will not select a disabled tab. */
+  selectTab(tabIndex: number): Promise<{
+    selectedTab: string;
+    selectedTabIndex: number;
+  }>;
+  sddsChange: EventEmitter<{
+    selectedTab: {
+      tab: string;
+      tabIndex: number;
+    };
+  }>;
+  handleSelectedTabChange(): void;
+  connectedCallback(): void;
   componentDidLoad(): void;
-  calculateButtonWidth(): void;
   scrollRight(): void;
   scrollLeft(): void;
   evaluateScrollButtons(): void;