@duetds/components 8.0.6 → 8.1.0

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

@@ -5,53 +5,53 @@ export type DuetHeadingWeight = "auto" | "normal" | "semibold";
  * @part duet-heading - piercing selector for styling the heading element that should be used only in special circumstances
  */
 export declare class DuetHeading implements ThemeableComponent {
-  /**
-   * Reference to host HTML element.
-   */
-  element: HTMLElement;
-  /**
-   * The actual heading level used in the HTML markup.
-   */
-  level: DuetHeadingLevel;
-  /**
-   * Controls the margin of the component.
-   */
-  margin: DuetMargin;
-  /**
-   * Make the visual style mimic a specific heading level. This option allows
-   * you to make e.g. h1 visually look like h3, but still keep it h1 in the
-   * markup.
-   */
-  visualLevel: DuetVisualHeadingLevel;
-  /**
-   * Enable or disable the border underneath the heading, solid will darken the border
-   */
-  border: boolean | "solid";
-  /**
-   * This property allows you to set normal or semibold font weight for all sizes
-   * when needed.
-   */
-  weight: DuetHeadingWeight;
-  /**
-   * Custom color for the heading as a design token entered in camelCase or
-   * kebab-case. Example: "color-primary".
-   */
-  color: DuetColor;
-  /**
-   * Theme of the heading.
-   */
-  theme: DuetTheme;
-  /**
-   * Enable hyphenation for long titles. Useful when there is no control over content e.g. user-generated content.
-   */
-  hyphenate: boolean;
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad(): void;
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render(): any;
+    /**
+     * Reference to host HTML element.
+     */
+    element: HTMLElement;
+    /**
+     * The actual heading level used in the HTML markup.
+     */
+    level: DuetHeadingLevel;
+    /**
+     * Controls the margin of the component.
+     */
+    margin: DuetMargin;
+    /**
+     * Make the visual style mimic a specific heading level. This option allows
+     * you to make e.g. h1 visually look like h3, but still keep it h1 in the
+     * markup.
+     */
+    visualLevel: DuetVisualHeadingLevel;
+    /**
+     * Enable or disable the border underneath the heading, solid will darken the border
+     */
+    border: boolean | "solid";
+    /**
+     * This property allows you to set normal or semibold font weight for all sizes
+     * when needed.
+     */
+    weight: DuetHeadingWeight;
+    /**
+     * Custom color for the heading as a design token entered in camelCase or
+     * kebab-case. Example: "color-primary".
+     */
+    color: DuetColor;
+    /**
+     * Theme of the heading.
+     */
+    theme: DuetTheme;
+    /**
+     * Enable hyphenation for long titles. Useful when there is no control over content e.g. user-generated content.
+     */
+    hyphenate: boolean;
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad(): void;
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render(): any;
 }

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

@@ -5,32 +5,32 @@ import { DuetLangObject } from "../../utils/language-utils";
 export type DuetHeroIconSize = "medium" | "large";
 export type DuetHeroVariation = "default" | "light" | "gray" | "image" | "minimal" | "campaign" | "section" | "product" | "content";
 export type DuetHeroBackData = {
-  analyticsId?: string;
-  id?: string;
-  href: string;
-  label: string;
+    analyticsId?: string;
+    id?: string;
+    href: string;
+    label: string;
 };
 export type DuetHeroClickEvent = {
-  originalEvent: Event;
-  component: "duet-hero";
-  data: any;
+    originalEvent: Event;
+    component: "duet-hero";
+    data: any;
 };
 export type DuetHeroAnalyticsEvent = DuetAnalyticsEvent<"duet-hero">;
 export type DuetHeroButtonData = {
-  analyticsId?: string;
-  [key: string]: any;
+    analyticsId?: string;
+    [key: string]: any;
 };
 export type DuetHeroListItem = {
-  label: string;
-  value: string;
+    label: string;
+    value: string;
 };
 export type DuetHeroActionItem = {
-  label: string;
-  href: string;
-  icon: string;
-  id?: string;
-  analyticsId?: string;
-  external?: boolean;
+    label: string;
+    href: string;
+    icon: string;
+    id?: string;
+    analyticsId?: string;
+    external?: boolean;
 };
 /**
  * @part duet-hero - piercing selector for styling the hero container
@@ -43,185 +43,185 @@ export type DuetHeroActionItem = {
  * @slot subheading - This is a slot for heading content inside the hero component. Only usable with campaign, section variations.
  */
 export declare class DuetHero implements ThemeableComponent {
-  /**
-   * Reference to host HTML element.
-   */
-  element: HTMLElement;
-  private hasPreHeadingSlot;
-  private hasHeadingSlot;
-  private hasSubHeadingSlot;
-  /**
-   * State() variables
-   * Inlined decorator, alphabetical order.
-   */
-  processedListItems: DuetHeroListItem[];
-  processedActions: DuetHeroActionItem[];
-  processedBack: DuetHeroBackData;
-  /**
-   * Theme of the hero area.
-   */
-  theme: DuetTheme;
-  /**
-   * @deprecated please use heading slot instead.
-   * The heading of the hero area, rendered in an H1 tag. P.S. you can control
-   * the level of the HTML heading by using “level” prop. If empty, heading
-   * will be hidden.
-   */
-  heading: string;
-  /**
-   * The headline shown before heading.
-   */
-  preHeading: string;
-  /**
-   * The level of the heading.
-   */
-  level: DuetHeadingLevel;
-  /**
-   * The level of the heading. Only usable with campaign, section variations.
-   */
-  subHeadingLevel: DuetHeadingLevel;
-  /**
-   * The description of the hero area, rendered in a P tag. If empty, description
-   * will be hidden.
-   */
-  description: string;
-  /**
-   * Icon to display to the left of the button content. If empty, icon will be hidden.
-   */
-  icon: DuetIconName;
-  /**
-   * Icon size for the button.
-   */
-  iconSize: DuetHeroIconSize;
-  /**
-   * Show icon on the right side of the button content.
-   */
-  iconRight: boolean;
-  /**
-   * Icon to display to the left of the heading in gray hero area variation. If empty, icon will be hidden.
-   */
-  categoryIcon: DuetIconName;
-  /**
-   * Icon color to use for the category icon that can be used in gray hero area variation.
-   */
-  categoryIconColor: DuetColor;
-  /**
-   * Text label shown inside the button. If empty, button will be hidden.
-   */
-  buttonLabel: string;
-  /**
-   * The currently active language. This setting changes the accessible labels to match the
-   * chosen language.
-   * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
-   * @default "fi"
-   */
-  language: DuetLanguage;
-  /**
-   * Defaults for accessibleLabelExternal
-   * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
-   */
-  accessibleLabelExternalDefaults: DuetLangObject | string;
-  /**
-   * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
-   * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
-   */
-  accessibleLabelExternal: string;
-  /**
-   * URL that the button links to.
-   */
-  buttonUrl: string;
-  /**
-   * ID for the button.
-   */
-  buttonId: string;
-  /**
-   * An object that includes any data you want to pass to the button. This data
-   * will be emitted when the button is clicked. If property analyticsId is present,
-   * then a separate duetAnalytics event will be emitted.
-   */
-  buttonData: DuetHeroButtonData;
-  /**
-   * Centers the text in hero area.
-   */
-  textCenter: boolean;
-  /**
-   * Forces all items in the header to be leftAligned
-   * This can be used on mobiles to create leftAligned hero areas that either are only leftaligned on smaller devices
-   * or allways leftAligned (you must manually switch this parameter if you need special breakpoints)
-   * this nullifies textCenter prop
-   */
-  leftAlign: boolean;
-  /**
-   * URL of the image shown inside the hero area. For normal hero areas the width of the displayed image
-   * should be 800px. Optimal aspect ratio is 3:2. When using “image” variation of
-   * Hero Area the required image size is 1200x1200px (1:1 ratio). If this
-   * property is left empty, image will be hidden.
-   */
-  image: string;
-  /**
-   * Image sizing.
-   */
-  imageSize: "auto" | "cover";
-  /**
-   * Image position.
-   */
-  imagePosition: "auto" | "center";
-  /**
-   * Style variation of the hero area.
-   */
-  variation: DuetHeroVariation;
-  /**
-   * An object that includes mandatory "label" and "href" fields for the back link.
-   * Additionally, you can pass an "id" that is added as an HTML identifier for the
-   * element. If nothing is passed, back link won’t be shown. **NOTE: The back link
-   * can be ONLY used in combination with "gray" style variation.**
-   */
-  back: any;
-  /**
-   * An array of items for the definition list inside hero. Items have to
-   * include mandatory "label" and "value" fields to work.
-   */
-  listItems: any;
-  /**
-   * An array of items for the main actions. Items have to include mandatory
-   * "label", "href" and "icon" fields to work. Additionally, you can pass an "id"
-   * that is added as an HTML identifier for the anchor tag.
-   */
-  actions: any;
-  /**
-   * Layout.
-   */
-  layout: "narrow" | "fluid";
-  /**
-   * Callback for when an user clicks the hero area's action button. You can prevent
-   * the default browser functionality by calling **event.detail.originalEvent.preventDefault()**
-   * inside your listener. Additionally, the passed data is available via
-   * **event.detail.data**.
-   */
-  duetClick: EventEmitter<DuetHeroClickEvent>;
-  /**
-   * Event raised when an items with an associated analytics ID is clicked. Analytics ID can be
-   * accessed via **event.detail.analyticsId**
-   */
-  duetAnalytics: EventEmitter<DuetHeroAnalyticsEvent>;
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad(): void;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  /**
-   * Component event handling.
-   */
-  private handleClick;
-  /**
-   * Local methods.
-   */
-  private refresh;
-  private emitChange;
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render(): any;
+    /**
+     * Reference to host HTML element.
+     */
+    element: HTMLElement;
+    private hasPreHeadingSlot;
+    private hasHeadingSlot;
+    private hasSubHeadingSlot;
+    /**
+     * State() variables
+     * Inlined decorator, alphabetical order.
+     */
+    processedListItems: DuetHeroListItem[];
+    processedActions: DuetHeroActionItem[];
+    processedBack: DuetHeroBackData;
+    /**
+     * Theme of the hero area.
+     */
+    theme: DuetTheme;
+    /**
+     * @deprecated please use heading slot instead.
+     * The heading of the hero area, rendered in an H1 tag. P.S. you can control
+     * the level of the HTML heading by using “level” prop. If empty, heading
+     * will be hidden.
+     */
+    heading: string;
+    /**
+     * The headline shown before heading.
+     */
+    preHeading: string;
+    /**
+     * The level of the heading.
+     */
+    level: DuetHeadingLevel;
+    /**
+     * The level of the heading. Only usable with campaign, section variations.
+     */
+    subHeadingLevel: DuetHeadingLevel;
+    /**
+     * The description of the hero area, rendered in a P tag. If empty, description
+     * will be hidden.
+     */
+    description: string;
+    /**
+     * Icon to display to the left of the button content. If empty, icon will be hidden.
+     */
+    icon: DuetIconName;
+    /**
+     * Icon size for the button.
+     */
+    iconSize: DuetHeroIconSize;
+    /**
+     * Show icon on the right side of the button content.
+     */
+    iconRight: boolean;
+    /**
+     * Icon to display to the left of the heading in gray hero area variation. If empty, icon will be hidden.
+     */
+    categoryIcon: DuetIconName;
+    /**
+     * Icon color to use for the category icon that can be used in gray hero area variation.
+     */
+    categoryIconColor: DuetColor;
+    /**
+     * Text label shown inside the button. If empty, button will be hidden.
+     */
+    buttonLabel: string;
+    /**
+     * The currently active language. This setting changes the accessible labels to match the
+     * chosen language.
+     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+     * @default "fi"
+     */
+    language: DuetLanguage;
+    /**
+     * Defaults for accessibleLabelExternal
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    accessibleLabelExternalDefaults: DuetLangObject | string;
+    /**
+     * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    accessibleLabelExternal: string;
+    /**
+     * URL that the button links to.
+     */
+    buttonUrl: string;
+    /**
+     * ID for the button.
+     */
+    buttonId: string;
+    /**
+     * An object that includes any data you want to pass to the button. This data
+     * will be emitted when the button is clicked. If property analyticsId is present,
+     * then a separate duetAnalytics event will be emitted.
+     */
+    buttonData: DuetHeroButtonData;
+    /**
+     * Centers the text in hero area.
+     */
+    textCenter: boolean;
+    /**
+     * Forces all items in the header to be leftAligned
+     * This can be used on mobiles to create leftAligned hero areas that either are only leftaligned on smaller devices
+     * or allways leftAligned (you must manually switch this parameter if you need special breakpoints)
+     * this nullifies textCenter prop
+     */
+    leftAlign: boolean;
+    /**
+     * URL of the image shown inside the hero area. For normal hero areas the width of the displayed image
+     * should be 800px. Optimal aspect ratio is 3:2. When using “image” variation of
+     * Hero Area the required image size is 1200x1200px (1:1 ratio). If this
+     * property is left empty, image will be hidden.
+     */
+    image: string;
+    /**
+     * Image sizing.
+     */
+    imageSize: "auto" | "cover";
+    /**
+     * Image position.
+     */
+    imagePosition: "auto" | "center";
+    /**
+     * Style variation of the hero area.
+     */
+    variation: DuetHeroVariation;
+    /**
+     * An object that includes mandatory "label" and "href" fields for the back link.
+     * Additionally, you can pass an "id" that is added as an HTML identifier for the
+     * element. If nothing is passed, back link won’t be shown. **NOTE: The back link
+     * can be ONLY used in combination with "gray" style variation.**
+     */
+    back: any;
+    /**
+     * An array of items for the definition list inside hero. Items have to
+     * include mandatory "label" and "value" fields to work.
+     */
+    listItems: any;
+    /**
+     * An array of items for the main actions. Items have to include mandatory
+     * "label", "href" and "icon" fields to work. Additionally, you can pass an "id"
+     * that is added as an HTML identifier for the anchor tag.
+     */
+    actions: any;
+    /**
+     * Layout.
+     */
+    layout: "narrow" | "fluid";
+    /**
+     * Callback for when an user clicks the hero area's action button. You can prevent
+     * the default browser functionality by calling **event.detail.originalEvent.preventDefault()**
+     * inside your listener. Additionally, the passed data is available via
+     * **event.detail.data**.
+     */
+    duetClick: EventEmitter<DuetHeroClickEvent>;
+    /**
+     * Event raised when an items with an associated analytics ID is clicked. Analytics ID can be
+     * accessed via **event.detail.analyticsId**
+     */
+    duetAnalytics: EventEmitter<DuetHeroAnalyticsEvent>;
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Component event handling.
+     */
+    private handleClick;
+    /**
+     * Local methods.
+     */
+    private refresh;
+    private emitChange;
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render(): any;
 }