@duetds/components 4.35.3 → 4.36.1

package/lib/types/components/duet-button/duet-button.d.ts

@@ -6,6 +6,7 @@ import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetButtonVariation = "default" | "primary" | "secondary" | "negative" | "destructive" | "destructive-primary" | "destructive-secondary" | "plain";
 export declare type DuetButtonNegative = true | false | undefined;
 export declare type DuetButtonWrapping = "auto" | "none";
+export declare type DuetButtonTextCentering = true | false | undefined;
 export declare type DuetButtonIconSize = "small" | "medium-small" | "medium" | "large";
 export declare type DuetButtonSize = "small" | "medium";
 export declare class DuetButton implements ThemeableComponent, FormComponent {
@@ -77,6 +78,10 @@ export declare class DuetButton implements ThemeableComponent, FormComponent {
    * Controls the padding of the component.
    */
   padding: DuetPadding;
+  /**
+   * Centers the text of a button
+   */
+  centerText: DuetButtonTextCentering;
   /**
    * Controls the text wrapping.
    */

package/lib/types/components/duet-card/duet-card.d.ts

@@ -9,7 +9,7 @@ export declare type DuetCardToggleEvent = {
 };
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
- * @slot below-header - Below header content.
+ * @slot below-heading - Below heading content.
  * @slot footer - Footer content.
  */
 export declare class DuetCard implements ThemeableComponent {

package/lib/types/components/duet-collapsible/duet-collapsible.d.ts

@@ -9,6 +9,7 @@ export declare type DuetCollapsibleToggleEvent = {
 };
 /**
  * @part duet-collapsible-heading-content - piercing selector for styling the heading content
+ * @part duet-collapsible-content - piercing selector for styling the content
  */
 export declare class DuetCollapsible implements ThemeableComponent {
   /**

package/lib/types/components/duet-pagination/duet-pagination-utils.d.ts

@@ -0,0 +1 @@
+export declare const shouldDisplayNavigation: (visibleItems: any, total: any, take: any) => boolean;

package/lib/types/components/duet-pagination/duet-pagination.d.ts

@@ -0,0 +1,100 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { DuetTheme } from "../../common-types";
+import { DuetLangObject } from "../../utils/language-utils";
+import { ThemeableComponent } from "../../utils/themeable-component";
+export declare type DuetPaginationPageEvent = {
+  originalEvent?: Event;
+  component: "duet-pagination";
+  current: number;
+  take: number;
+  from: number;
+  to: number;
+  type: "page" | "jump";
+};
+export declare class DuetPagination implements ThemeableComponent {
+  private listId;
+  private nativeNav;
+  numbersStore: string;
+  /**
+   * Reference to host HTML element.
+   */
+  element: HTMLElement;
+  /**
+   * State() variables
+   * @internal
+   */
+  totalPages: number;
+  /**
+   * State() variables
+   * @internal
+   */
+  internalSectionIndex: number;
+  /**
+   * Theme of the pagination.
+   */
+  theme: DuetTheme;
+  /**
+   * Characters to use for the jump buttons.
+   */
+  jumpString: string;
+  /**
+   * Default pagination labels
+   */
+  ariaLabelsDefaults: DuetLangObject;
+  /**
+   * Default pagination labels
+   */
+  ariaLabels: Record<string, string>;
+  /**
+   * The size of the take, when paginating.
+   */
+  take: number;
+  /**
+   * Amount of visible page numbers to show
+   */
+  visibleItems: number;
+  /**
+   * The total size of the paginating data
+   */
+  total: number;
+  /**
+   * Used to indicate which dom element with ID this element controls
+   */
+  ariaControls: string;
+  /**
+   * The current page
+   */
+  current: number;
+  watchStateHandler(newValue: boolean, oldValue: boolean): void;
+  /**
+   * Emitted a page selection has been made
+   */
+  duetPageChange: EventEmitter<DuetPaginationPageEvent>;
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  componentDidRender(): void;
+  /**
+   * Private methods.
+   */
+  private actionChain;
+  private emitPageEvent;
+  private calculatePageTake;
+  private onMouseHandler;
+  private onKeyboardDown;
+  private getEnteredNumber;
+  private setFocus;
+  private pageClickHandler;
+  private sectionClickHandler;
+  private jumpToStart;
+  private jumpToEnd;
+  private renderPageNumbers;
+  private shouldDisplayNavigation;
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render(): any;
+}

package/lib/types/components/duet-range-stepper/duet-range-stepper.d.ts

@@ -0,0 +1,70 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { DuetTheme } from "../../common-types";
+import { DuetLangObject } from "../../utils/language-utils";
+import { ThemeableComponent } from "../../utils/themeable-component";
+export declare type DuetRangeStepperUpdateEvent = {
+  originalEvent: KeyboardEvent | MouseEvent;
+  component: "duet-range-stepper";
+  from: number;
+  to: number;
+  index: number;
+};
+export declare class DuetRangeStepper implements ThemeableComponent {
+  private leftBn;
+  private rightBn;
+  private leftBnRef;
+  private rightBnRef;
+  private: any;
+  /**
+   * Reference to host HTML element.
+   */
+  element: HTMLElement;
+  /**
+   * Theme of the component.
+   */
+  theme: DuetTheme;
+  /**
+   * Start value
+   * @default 1
+   */
+  stepIndex: number;
+  watchStateHandler(newValue: number): void;
+  /**
+   * How big is the step
+   * @default 99
+   */
+  stepSize: number;
+  /**
+   * Total of
+   * @default undefined
+   */
+  total: number;
+  /**
+   * Default range stepper labels
+   */
+  ariaLabelsDefaults: DuetLangObject;
+  /**
+   * Default pagination labels
+   */
+  ariaLabels: Record<string, string>;
+  /**
+   * Used to indicate which dom element with ID this element controls
+   */
+  ariaControls: string;
+  /**
+   * Event emitted when the step heading is clicked.
+   */
+  duetRangeStepUpdate: EventEmitter<DuetRangeStepperUpdateEvent>;
+  handleStepClick(e: KeyboardEvent | MouseEvent): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  private handleClick;
+  private increment;
+  private generateStepSize;
+  private onKeyboardDown;
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render(): any;
+}

package/lib/types/components/duet-select/duet-select.d.ts

@@ -7,6 +7,7 @@ export declare type DuetSelectOption = {
   value: string;
   disabled?: boolean;
 };
+export declare type DuetSelectVariation = "default" | "tiny";
 export declare type DuetSelectOptionGroup = {
   label: string;
   options: DuetSelectOption[];
@@ -38,6 +39,10 @@ export declare class DuetSelect implements ThemeableComponent, InputComponent {
    * Inlined decorator, alphabetical order.
    */
   processedItems: DuetSelectItems;
+  /**
+   * Variation of dropdown. -tiny is used for small numbers / tiny option ranges.
+   */
+  variation: DuetSelectVariation;
   /**
    * Indicates the id of a related component’s visually focused element.
    */

package/lib/types/components/duet-tab-group/duet-tab-group.d.ts

@@ -7,6 +7,10 @@ export declare type DuetTabGroupEvent = {
   value: number;
 };
 export declare type DuetTabVariation = "default" | "plain";
+/**
+ * @part ${identifier}-button - piercing selector for styling tab buttons
+ * @part ${identifier}-button--selected - piercing selector for styling selected tab button
+ */
 export declare class DuetTabGroup implements ThemeableComponent {
   /**
    * Own Properties.

package/lib/types/components.d.ts

@@ -8,7 +8,7 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetLocale, DuetMargin, DuetPadding, DuetStatus, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel } from "./common-types";
 import { DuetLangObject } from "./utils/language-utils";
 import { DuetAlertEvent } from "./components/duet-alert/duet-alert";
-import { DuetButtonIconSize, DuetButtonSize, DuetButtonVariation, DuetButtonWrapping } from "./components/duet-button/duet-button";
+import { DuetButtonIconSize, DuetButtonSize, DuetButtonTextCentering, DuetButtonVariation, DuetButtonWrapping } from "./components/duet-button/duet-button";
 import { DuetCaptionSize } from "./components/duet-caption/duet-caption";
 import { DuetCardPadding, DuetCardToggleEvent, DuetCardVariation } from "./components/duet-card/duet-card";
 import { DuetCheckboxEvent } from "./components/duet-checkbox/duet-checkbox";
@@ -36,10 +36,12 @@ import { DuetLogoSize } from "./components/duet-logo/duet-logo";
 import { DuetModalCloseEvent, DuetModalSize } from "./components/duet-modal/duet-modal";
 import { DuetNotificationDrawerDirection } from "./components/duet-notification-drawer/duet-notification-drawer";
 import { DuetNumberInputEvent } from "./components/duet-number-input/duet-number-input";
+import { DuetPaginationPageEvent } from "./components/duet-pagination/duet-pagination";
 import { DuetParagraphSize, DuetParagraphVariation, DuetParagraphWeight } from "./components/duet-paragraph/duet-paragraph";
 import { DuetRadioEvent } from "./components/duet-radio/duet-radio";
 import { DuetRangeChangeEvent } from "./components/duet-range-slider/duet-range-slider";
-import { DuetSelectEvent, DuetSelectItems } from "./components/duet-select/duet-select";
+import { DuetRangeStepperUpdateEvent } from "./components/duet-range-stepper/duet-range-stepper";
+import { DuetSelectEvent, DuetSelectItems, DuetSelectVariation } from "./components/duet-select/duet-select";
 import { DuetSpacerBreakpoint, DuetSpacerSize } from "./components/duet-spacer/duet-spacer";
 import { DuetSpinnerSize } from "./components/duet-spinner/duet-spinner";
 import { DuetStepClickEvent, DuetStepState } from "./components/duet-step/duet-step";
@@ -175,6 +177,10 @@ export namespace Components {
           * Tells screen reader the element is pressed.
          */
         "accessiblePressed": boolean;
+        /**
+          * Centers the text of a button
+         */
+        "centerText": DuetButtonTextCentering;
         /**
           * Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary".
          */
@@ -1848,6 +1854,44 @@ export namespace Components {
          */
         "value": string;
     }
+    interface DuetPagination {
+        /**
+          * Used to indicate which dom element with ID this element controls
+         */
+        "ariaControls": string;
+        /**
+          * Default pagination labels
+         */
+        "ariaLabels": Record<string, string>;
+        /**
+          * Default pagination labels
+         */
+        "ariaLabelsDefaults": DuetLangObject;
+        /**
+          * The current page
+         */
+        "current": number;
+        /**
+          * Characters to use for the jump buttons.
+         */
+        "jumpString": string;
+        /**
+          * The size of the take, when paginating.
+         */
+        "take": number;
+        /**
+          * Theme of the pagination.
+         */
+        "theme": DuetTheme;
+        /**
+          * The total size of the paginating data
+         */
+        "total": number;
+        /**
+          * Amount of visible page numbers to show
+         */
+        "visibleItems": number;
+    }
     interface DuetParagraph {
         /**
           * Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary".
@@ -2122,6 +2166,39 @@ export namespace Components {
          */
         "value": number;
     }
+    interface DuetRangeStepper {
+        /**
+          * Used to indicate which dom element with ID this element controls
+         */
+        "ariaControls": string;
+        /**
+          * Default pagination labels
+         */
+        "ariaLabels": Record<string, string>;
+        /**
+          * Default range stepper labels
+         */
+        "ariaLabelsDefaults": DuetLangObject;
+        /**
+          * Start value
+          * @default 1
+         */
+        "stepIndex": number;
+        /**
+          * How big is the step
+          * @default 99
+         */
+        "stepSize": number;
+        /**
+          * Theme of the component.
+         */
+        "theme": DuetTheme;
+        /**
+          * Total of
+          * @default undefined
+         */
+        "total": number;
+    }
     interface DuetScrollable {
         /**
           * Optional identifier to add to buttons in the tab group
@@ -2229,6 +2306,10 @@ export namespace Components {
           * The selected value of the select
          */
         "value": string;
+        /**
+          * Variation of dropdown. -tiny is used for small numbers / tiny option ranges.
+         */
+        "variation": DuetSelectVariation;
     }
     interface DuetSpacer {
         /**
@@ -3139,6 +3220,12 @@ declare global {
         prototype: HTMLDuetNumberInputElement;
         new (): HTMLDuetNumberInputElement;
     };
+    interface HTMLDuetPaginationElement extends Components.DuetPagination, HTMLStencilElement {
+    }
+    var HTMLDuetPaginationElement: {
+        prototype: HTMLDuetPaginationElement;
+        new (): HTMLDuetPaginationElement;
+    };
     interface HTMLDuetParagraphElement extends Components.DuetParagraph, HTMLStencilElement {
     }
     var HTMLDuetParagraphElement: {
@@ -3169,6 +3256,12 @@ declare global {
         prototype: HTMLDuetRangeSliderElement;
         new (): HTMLDuetRangeSliderElement;
     };
+    interface HTMLDuetRangeStepperElement extends Components.DuetRangeStepper, HTMLStencilElement {
+    }
+    var HTMLDuetRangeStepperElement: {
+        prototype: HTMLDuetRangeStepperElement;
+        new (): HTMLDuetRangeStepperElement;
+    };
     interface HTMLDuetScrollableElement extends Components.DuetScrollable, HTMLStencilElement {
     }
     var HTMLDuetScrollableElement: {
@@ -3303,11 +3396,13 @@ declare global {
         "duet-notification": HTMLDuetNotificationElement;
         "duet-notification-drawer": HTMLDuetNotificationDrawerElement;
         "duet-number-input": HTMLDuetNumberInputElement;
+        "duet-pagination": HTMLDuetPaginationElement;
         "duet-paragraph": HTMLDuetParagraphElement;
         "duet-progress": HTMLDuetProgressElement;
         "duet-radio": HTMLDuetRadioElement;
         "duet-radio-group": HTMLDuetRadioGroupElement;
         "duet-range-slider": HTMLDuetRangeSliderElement;
+        "duet-range-stepper": HTMLDuetRangeStepperElement;
         "duet-scrollable": HTMLDuetScrollableElement;
         "duet-select": HTMLDuetSelectElement;
         "duet-spacer": HTMLDuetSpacerElement;
@@ -3452,6 +3547,10 @@ declare namespace LocalJSX {
           * Tells screen reader the element is pressed.
          */
         "accessiblePressed"?: boolean;
+        /**
+          * Centers the text of a button
+         */
+        "centerText"?: DuetButtonTextCentering;
         /**
           * Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary".
          */
@@ -5193,6 +5292,48 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface DuetPagination {
+        /**
+          * Used to indicate which dom element with ID this element controls
+         */
+        "ariaControls"?: string;
+        /**
+          * Default pagination labels
+         */
+        "ariaLabels"?: Record<string, string>;
+        /**
+          * Default pagination labels
+         */
+        "ariaLabelsDefaults"?: DuetLangObject;
+        /**
+          * The current page
+         */
+        "current"?: number;
+        /**
+          * Characters to use for the jump buttons.
+         */
+        "jumpString"?: string;
+        /**
+          * Emitted a page selection has been made
+         */
+        "onDuetPageChange"?: (event: CustomEvent<DuetPaginationPageEvent>) => void;
+        /**
+          * The size of the take, when paginating.
+         */
+        "take"?: number;
+        /**
+          * Theme of the pagination.
+         */
+        "theme"?: DuetTheme;
+        /**
+          * The total size of the paginating data
+         */
+        "total"?: number;
+        /**
+          * Amount of visible page numbers to show
+         */
+        "visibleItems"?: number;
+    }
     interface DuetParagraph {
         /**
           * Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary".
@@ -5476,6 +5617,43 @@ declare namespace LocalJSX {
          */
         "value"?: number;
     }
+    interface DuetRangeStepper {
+        /**
+          * Used to indicate which dom element with ID this element controls
+         */
+        "ariaControls"?: string;
+        /**
+          * Default pagination labels
+         */
+        "ariaLabels"?: Record<string, string>;
+        /**
+          * Default range stepper labels
+         */
+        "ariaLabelsDefaults"?: DuetLangObject;
+        /**
+          * Event emitted when the step heading is clicked.
+         */
+        "onDuetRangeStepUpdate"?: (event: CustomEvent<DuetRangeStepperUpdateEvent>) => void;
+        /**
+          * Start value
+          * @default 1
+         */
+        "stepIndex"?: number;
+        /**
+          * How big is the step
+          * @default 99
+         */
+        "stepSize"?: number;
+        /**
+          * Theme of the component.
+         */
+        "theme"?: DuetTheme;
+        /**
+          * Total of
+          * @default undefined
+         */
+        "total"?: number;
+    }
     interface DuetScrollable {
         /**
           * Optional identifier to add to buttons in the tab group
@@ -5591,6 +5769,10 @@ declare namespace LocalJSX {
           * The selected value of the select
          */
         "value"?: string;
+        /**
+          * Variation of dropdown. -tiny is used for small numbers / tiny option ranges.
+         */
+        "variation"?: DuetSelectVariation;
     }
     interface DuetSpacer {
         /**
@@ -6341,11 +6523,13 @@ declare namespace LocalJSX {
         "duet-notification": DuetNotification;
         "duet-notification-drawer": DuetNotificationDrawer;
         "duet-number-input": DuetNumberInput;
+        "duet-pagination": DuetPagination;
         "duet-paragraph": DuetParagraph;
         "duet-progress": DuetProgress;
         "duet-radio": DuetRadio;
         "duet-radio-group": DuetRadioGroup;
         "duet-range-slider": DuetRangeSlider;
+        "duet-range-stepper": DuetRangeStepper;
         "duet-scrollable": DuetScrollable;
         "duet-select": DuetSelect;
         "duet-spacer": DuetSpacer;
@@ -6405,11 +6589,13 @@ declare module "@stencil/core" {
             "duet-notification": LocalJSX.DuetNotification & JSXBase.HTMLAttributes<HTMLDuetNotificationElement>;
             "duet-notification-drawer": LocalJSX.DuetNotificationDrawer & JSXBase.HTMLAttributes<HTMLDuetNotificationDrawerElement>;
             "duet-number-input": LocalJSX.DuetNumberInput & JSXBase.HTMLAttributes<HTMLDuetNumberInputElement>;
+            "duet-pagination": LocalJSX.DuetPagination & JSXBase.HTMLAttributes<HTMLDuetPaginationElement>;
             "duet-paragraph": LocalJSX.DuetParagraph & JSXBase.HTMLAttributes<HTMLDuetParagraphElement>;
             "duet-progress": LocalJSX.DuetProgress & JSXBase.HTMLAttributes<HTMLDuetProgressElement>;
             "duet-radio": LocalJSX.DuetRadio & JSXBase.HTMLAttributes<HTMLDuetRadioElement>;
             "duet-radio-group": LocalJSX.DuetRadioGroup & JSXBase.HTMLAttributes<HTMLDuetRadioGroupElement>;
             "duet-range-slider": LocalJSX.DuetRangeSlider & JSXBase.HTMLAttributes<HTMLDuetRangeSliderElement>;
+            "duet-range-stepper": LocalJSX.DuetRangeStepper & JSXBase.HTMLAttributes<HTMLDuetRangeStepperElement>;
             "duet-scrollable": LocalJSX.DuetScrollable & JSXBase.HTMLAttributes<HTMLDuetScrollableElement>;
             "duet-select": LocalJSX.DuetSelect & JSXBase.HTMLAttributes<HTMLDuetSelectElement>;
             "duet-spacer": LocalJSX.DuetSpacer & JSXBase.HTMLAttributes<HTMLDuetSpacerElement>;

package/lib/types/utils/keyboard-utils.d.ts

@@ -2,10 +2,14 @@ export declare const isArrowLeftKey: (e: KeyboardEvent) => boolean;
 export declare const isArrowUpKey: (e: KeyboardEvent) => boolean;
 export declare const isArrowRightKey: (e: KeyboardEvent) => boolean;
 export declare const isArrowDownKey: (e: KeyboardEvent) => boolean;
+export declare const isArrowKey: (e: KeyboardEvent) => boolean;
 export declare const isEscapeKey: (e: KeyboardEvent) => boolean;
 export declare const isTabKey: (e: KeyboardEvent) => boolean;
 export declare const isBackspaceKey: (e: KeyboardEvent) => boolean;
 export declare const isSpaceKey: (e: KeyboardEvent) => boolean;
+export declare const isPlusKey: (e: KeyboardEvent) => boolean;
+export declare const isMinusKey: (e: KeyboardEvent) => boolean;
 export declare const isQuestionKey: (e: KeyboardEvent) => boolean;
 export declare const isEnterKey: (e: KeyboardEvent) => boolean;
 export declare const isKeyboardClick: (e: KeyboardEvent) => boolean;
+export declare const isNumber: (e: KeyboardEvent) => boolean;

package/lib/types/utils/token-utils.d.ts

@@ -6,3 +6,5 @@ export declare function camelize(str?: string): string;
 export declare function getTheme(theme?: DuetTheme): DuetTheme;
 export declare function getColorByName(name: string, theme?: DuetTheme): string | undefined;
 export declare function convertToColorName(name?: string, theme?: DuetTheme): string;
+export declare function getFontSizeByName(name: string): string | undefined;
+export declare function getFontWeightByName(name: string): string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "4.35.3",
+  "version": "4.36.1",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -53,11 +53,11 @@
     "koa-colorful-logger": "0.0.3"
   },
   "devDependencies": {
-    "@duetds/fonts": "1.4.14",
-    "@duetds/icons": "2.2.14",
+    "@duetds/fonts": "1.4.17",
+    "@duetds/icons": "2.2.17",
     "@duetds/stencil-angular-output-target": "0.0.2",
     "@duetds/stencil-react-output-target": "0.0.10",
-    "@duetds/tokens": "2.4.14",
+    "@duetds/tokens": "2.5.0",
     "@koa/cors": "3.1.0",
     "@rollup/plugin-replace": "3.0.1",
     "@stencil/core": "2.12.1",
@@ -96,5 +96,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "e010002361f155b3b27f8d7b52bc3c4ebdebd2e6"
+  "gitHead": "9e5243a907ab40c6720b77cedd646cab08479680"
 }

package/lib/duet/p-04f9f1bf.js

@@ -1,4 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-const a=a=>37===a.keyCode,s=a=>38===a.keyCode,c=a=>39===a.keyCode,e=a=>40===a.keyCode,p=a=>"Escape"===a.key||"Esc"===a.key||27===a.keyCode,t=a=>8===a.keyCode,E=a=>"Space"===a.key||32===a.keyCode,n=a=>"?"===a.key,o=a=>(a=>"Enter"===a.key||13===a.keyCode)(a)||E(a);export{c as a,s as b,e as c,a as d,t as e,p as f,E as g,n as h,o as i}