@scania/tegel 0.0.4 → 0.0.6

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

@@ -27,35 +27,32 @@ 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. */
+  /** 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/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,35 @@
+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 {
+  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;
+  /** 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;
+  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

@@ -0,0 +1,17 @@
+import { InternalSddsStepperPropChange } from '../sdds-stepper';
+export declare class SddsStepper {
+  /** 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: 'sm' | 'lg';
+  orientation: 'horizontal' | 'vertical';
+  labelPosition: 'aside' | 'below';
+  el: HTMLElement;
+  private stepperEl;
+  private stepperId;
+  componentWillLoad(): void;
+  handlePropsChange(event: CustomEvent<InternalSddsStepperPropChange>): 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-tab/sdds-folder-tab.d.ts

@@ -0,0 +1,11 @@
+export declare class SddsFolderTab {
+  /** Disables the tab. */
+  disabled: boolean;
+  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

@@ -0,0 +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;
+  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;
+  componentDidRender(): void;
+  render(): any;
+}

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

@@ -0,0 +1,69 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: {
+      'Folder tabs': any;
+      'Folder tabs item': any;
+    };
+    backgrounds: {
+      default: string;
+    };
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    modeVariant: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    defaultSelectedIndex: {
+      name: string;
+      description: string;
+      control: {
+        type: 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: {
+        disable: boolean;
+      };
+    };
+  };
+  args: {
+    modeVariant: string;
+    defaultSelectedIndex: string;
+    selectedIndex: string;
+  };
+};
+export default _default;
+export declare const FolderTabs: any;

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

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

@@ -0,0 +1,36 @@
+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';
+  /** 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;
+  host: HostElement;
+  showLeftScroll: boolean;
+  showRightScroll: boolean;
+  buttonWidth: number;
+  private navWrapperElement;
+  private componentWidth;
+  private buttonsWidth;
+  private scrollWidth;
+  private children;
+  sddsChange: EventEmitter<{
+    selectedTabIndex: number;
+  }>;
+  /** Selects a tab based on tabindex, will not select a disabled tab. */
+  selectTab(tabIndex: number): Promise<{
+    selectedTabIndex: number;
+  }>;
+  scrollRight(): void;
+  scrollLeft(): void;
+  evaluateScrollButtons(): void;
+  addResizeObserver: () => void;
+  addEventListenerToTabs: () => void;
+  connectedCallback(): void;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  render(): any;
+}

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

@@ -2,11 +2,8 @@ declare const _default: {
   title: string;
   parameters: {
     notes: {
-      'Inline Tabs': any;
-      'Inline Tab': any;
-    };
-    backgrounds: {
-      default: string;
+      'Inline tabs': any;
+      'Inline tab': any;
     };
     design: {
       name: string;
@@ -15,34 +12,49 @@ declare const _default: {
     }[];
   };
   argTypes: {
-    autoHeight: {
+    modeVariant: {
       name: string;
       description: string;
       control: {
         type: string;
       };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
-    modeVariant: {
+    defaultSelectedIndex: {
       name: string;
+      description: string;
       control: {
         type: string;
       };
-      options: string[];
+      options: (string | number)[];
       table: {
         defaultValue: {
           summary: string;
         };
       };
     };
-    backgrounds: {
-      table: {
-        disable: boolean;
+    selectedIndex: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: (string | number)[];
+      if: {
+        arg: string;
+        eq: string;
       };
     };
   };
   args: {
-    autoHeight: boolean;
     modeVariant: string;
+    defaultSelectedIndex: string;
+    selectedIndex: string;
   };
 };
 export default _default;