@dubai-design-system/components-js 5.0.3 → 5.1.1

package/dist/types/components/dda-sticky-footer/dda-sticky-footer.d.ts

@@ -1,52 +1,95 @@
 export declare class DdaStickyFooter {
-    /** Left Section Props */
+    el: HTMLElement;
+    /** Link URL of the happiness icon (left section). */
     happinessIconHref: string;
+    /** Image URL of the happiness icon. */
     happinessIconSrc: string;
+    /** Alternative text for the happiness icon. */
     happinessIconAlt: string;
+    /** Tooltip text of the happiness icon. */
     happinessIconTooltip: string;
+    /** Link URL of the accessibility icon, the second icon in the left section. */
     accessibilityIconHref: string;
+    /** Image URL of the accessibility icon. */
     accessibilityIconSrc: string;
+    /** Alternative text for the accessibility icon. */
     accessibilityIconAlt: string;
+    /** Tooltip text of the accessibility icon. */
     accessibilityIconTooltip: string;
+    /** Link URL of the services icon (left section). */
     servicesIconHref: string;
+    /** Image URL of the services icon. */
     servicesIconSrc: string;
+    /** Alternative text for the services icon. */
     servicesIconAlt: string;
+    /** Tooltip text of the services icon. */
     servicesIconTooltip: string;
+    /** Text shown next to the services icon. Nothing is shown when it is not set. */
     servicesIconText: string;
-    /** Middle Section Props */
+    /** Link URL of the first logo (middle section). */
     firstLogoHref: string;
+    /** Image URL of the first logo. */
     firstLogoSrc: string;
+    /** Alternative text for the first logo. */
     firstLogoAlt: string;
+    /** Tooltip text of the first logo. */
     firstLogoTooltip: string;
+    /** Link URL of the second logo (middle section). */
     secondLogoHref: string;
+    /** Image URL of the second logo. */
     secondLogoSrc: string;
+    /** Alternative text for the second logo. */
     secondLogoAlt: string;
+    /** Tooltip text of the second logo. */
     secondLogoTooltip: string;
+    /** Link URL of the third logo (middle section). */
     thirdLogoHref: string;
+    /** Image URL of the third logo. */
     thirdLogoSrc: string;
+    /** Alternative text for the third logo. */
     thirdLogoAlt: string;
+    /** Tooltip text of the third logo. */
     thirdLogoTooltip: string;
-    /** Right Section Props */
+    /** Link URL of the location icon (right section). */
     locationButtonHref: string;
+    /** Image URL of the location icon. */
     locationLogoSrc: string;
+    /** Tooltip text and alternative text of the location icon. */
     locationButtonText: string;
+    /** Not used: the current markup does not render it. */
     locationButtonIcon: string;
+    /** Link URL of the news icon (right section). */
     newsButtonHref: string;
+    /** Image URL of the news icon. */
     newsButtonSrc: string;
+    /** Tooltip text and alternative text of the news icon. */
     newsButtonText: string;
+    /** Not used: the current markup does not render it. */
     newsButtonIcon: string;
+    /** Link URL of the AI assistant icon (right section). */
     aiIconHref: string;
+    /** Image URL of the AI assistant icon. */
     aiIconSrc: string;
+    /** Alternative text for the AI assistant icon. */
     aiIconAlt: string;
+    /** Tooltip text of the AI assistant icon. */
     aiIconTooltip: string;
+    /** Link URL of the chat icon (right section). */
     chatIconHref: string;
+    /** Image URL of the chat icon. */
     chatIconSrc: string;
+    /** Alternative text for the chat icon. */
     chatIconAlt: string;
+    /** Tooltip text of the chat icon. */
     chatIconTooltip: string;
+    /** Accessible name of the bar's `<aside>` landmark. Default: `Quick actions`. */
+    aria_label: string;
     isHidden: boolean;
     private lastScrollY;
+    /** Hides the middle logo section. The section shows only when this is explicitly `false`. */
     hideMiddleSection: boolean;
     componentWillLoad(): void;
+    private resizeObserver;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     handleScroll(): void;

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

@@ -1,16 +1,27 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class DdaTabs {
+    /** Tab content: `text` (label only) or `text-icon` (icon from `tab_icons` before the label). */
     type: 'text' | 'text-icon';
+    /** Style of the active and hovered tab: `dda-tab-default`, `dda-tab-filed`, `dda-tab-underline` or `dda-tab-underline-filled`. */
     hover_style: 'dda-tab-default' | 'dda-tab-filed' | 'dda-tab-underline' | 'dda-tab-underline-filled';
+    /** Not used by the component; it has no effect. */
     border_bottom: boolean;
+    /** Extra CSS classes added to the tab group. */
     custom_class?: string;
+    /** Theme override class on the tab group, e.g. `light-mode`. */
     component_mode?: string;
+    /** `id` set on every tab button. */
     button_id?: string;
+    /** Accessible name for the tab group (`aria-label` on the `role="group"` container). */
     aria_label: string;
+    /** Tab labels, as a JSON string array, e.g. `'["Details", "Documents"]'`. */
     tab_texts: string;
+    /** Material Icons names, one per tab in the same order, as a JSON string array. Shown when `type` is `text-icon`. */
     tab_icons: string;
+    /** `name` set on every tab button. */
     button_name: string;
-    tabClick?: EventEmitter<void>;
+    /** Fires when the user clicks a tab. `detail` is the tab index, a number from 0. */
+    tabClick?: EventEmitter<number>;
     private tabhandler;
     active_tab: number;
     get parsedTabs(): any;

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

@@ -47,10 +47,6 @@ declare const _default: {
             };
             description: string;
         };
-        onTabClick: {
-            action: string;
-            description: string;
-        };
         button_name: {
             control: {
                 type: string;

package/dist/types/components/dda-textarea/dda-textarea.d.ts

@@ -1,22 +1,38 @@
 import 'quill/dist/quill.snow.css';
 export declare class DdaTextarea {
+    /** Placeholder text of the textarea or the rich text editor. */
     placeholder: string;
+    /** Visible label text, linked to the field through `input_id` (or a generated id). */
     label: string;
+    /** Value of the textarea. Updates as the user types; in rich text mode it holds the editor HTML. */
     value: string;
+    /** Error text shown below the field with the character count. When set, the field gets `aria-invalid="true"`. */
     error_message: string;
+    /** Validation style. `error` shows the error colors. */
     validation_type?: string;
+    /** Status style. `disabled` shows the disabled styling only; it does not set the native `disabled` attribute. */
     input_status?: string;
+    /** Helper text shown below the field with the character count, linked with `aria-describedby`. */
     helper_text?: string;
+    /** Extra CSS classes added to the field container. */
     custom_class?: string;
+    /** Replaces the textarea with a Quill rich text editor and toolbar. */
     enable_rich_editor?: boolean;
+    /** Maximum number of characters (`maxlength` of the textarea), shown in the character count. */
     max_characters: number;
+    /** Theme override class for the field, e.g. `light-mode`. */
     component_mode?: string;
+    /** `id` of the textarea or editor. Also used for the label and the helper and error text ids. Optional: an id is generated when it is not set. */
     input_id: string;
+    /** Accessible name of the textarea. Use it when there is no visible label. */
     aria_label?: string;
+    /** `name` of the textarea, submitted with its form. */
     textarea_name: string;
     el: HTMLElement;
     characterCount: number;
     private quill;
+    private readonly fallbackId;
+    private get inputId();
     private get labelId();
     private get helperId();
     private get errorId();

package/dist/types/components/dda-textarea/dda-textarea.stories.d.ts

@@ -71,12 +71,6 @@ declare const _default: {
             };
             description: string;
         };
-        onchange: {
-            control: {
-                type: string;
-            };
-            description: string;
-        };
         textarea_name: {
             control: {
                 type: string;

package/dist/types/components/dda-toggle/dda-toggle.d.ts

@@ -1,10 +1,21 @@
 export declare class DdaToggle {
+    /** Checked (on) state of the inner input. Read the current state from the input or its `change` event. */
     checked: boolean;
+    /** Size: `sm`, `md` or `lg`. */
     size?: string;
+    /** Extra CSS classes added to the toggle label. */
     custom_class?: string;
+    /** `name` of the inner checkbox input. */
     group_name?: string;
+    /** `id` of the inner checkbox input. */
     input_id?: string;
+    /** Theme override class for the toggle, e.g. `light-mode`. */
     component_mode?: string;
+    /** Accessible name of the inner checkbox input. Set it when there is no `title_text`. */
     aria_label: string;
+    /** Label shown next to the switch. Nothing is shown when it is not set. */
+    title_text?: string;
+    /** Secondary text shown under the title. */
+    supporting?: string;
     render(): any;
 }

package/dist/types/components/dda-toggle/dda-toggle.stories.d.ts

@@ -12,11 +12,11 @@ declare const _default: {
             control: string;
             description: string;
         };
-        label_on: {
+        title_text: {
             control: string;
             description: string;
         };
-        label_off: {
+        supporting: {
             control: string;
             description: string;
         };
@@ -24,10 +24,6 @@ declare const _default: {
             control: string;
             description: string;
         };
-        label_for: {
-            control: string;
-            description: string;
-        };
         input_id: {
             control: string;
             description: string;
@@ -50,12 +46,6 @@ declare const _default: {
             };
             description: string;
         };
-        onchange: {
-            control: {
-                type: string;
-            };
-            description: string;
-        };
     };
     parameters: {
         docs: {

package/dist/types/components/dda-tooltip/dda-tooltip.d.ts

@@ -1,9 +1,14 @@
 export declare class DdaTooltip {
     el: HTMLElement;
+    /** Bold heading shown in the tooltip box. */
     title_text: string;
+    /** Text shown below the heading in the tooltip box. */
     description: string;
+    /** Side of the trigger where the box appears: `top`, `bottom`, `left` or `right`. */
     position: 'top' | 'bottom' | 'left' | 'right';
+    /** Extra CSS classes added to the tooltip container. */
     custom_class?: string;
+    /** Theme class added to the tooltip container, e.g. `light-mode`. The tooltip styles do not change with it. */
     component_mode?: string;
     dismissed: boolean;
     private handleKeyDown;

package/dist/types/components/dda-ui-card/dda-ui-card.d.ts

@@ -1,13 +1,25 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class DdaUiCard {
+    /** `default` renders the icon, image, title, subtitle and link from props before the slot; `custom` renders only the slot. */
     type: 'default' | 'custom';
+    /** Material Icons name shown at the top of the card, e.g. `description`. */
     icon: string;
+    /** URL of an image shown at the top of the card. Its alt text is `maintitle`. */
     image: string;
+    /** Card title, rendered as a heading at `heading_level`. */
     maintitle: string;
+    /** Muted text shown below the title. */
     subtitle: string;
+    /** URL of the card link. The link shows only when this is set. */
     link: string;
+    /** Text of the card link. */
     linktext: string;
+    /** Material Icons name shown after the link text. Set it to an empty string to hide the icon. */
     linkicon: string;
-    linkClick?: EventEmitter<void>;
+    /** Heading level (1–6) of the title; pick the level that fits the page outline. */
+    heading_level: number;
+    /** Emitted when the user clicks the card link. `detail` is the original click `MouseEvent`; call `detail.preventDefault()` to stop the navigation. */
+    linkClick?: EventEmitter<MouseEvent>;
+    private get headingTag();
     render(): any;
 }

package/dist/types/components/segmented-groups/dda-segmented-tabs/dda-segmented-tabs.d.ts

@@ -1,22 +1,39 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class DdaSegmentedTabs {
+    /** Segments, as a JSON string array, e.g. `'["All", "Pending", "Approved"]'`. A missing or invalid value renders no segments. An item that starts with `fo` renders as a Material Symbols icon name (e.g. `format_align_left`). */
     items: string;
+    /** Corner shape of the group: `square` or `rounded`. */
     radius_type: string;
+    /** Extra CSS classes added to the group. */
     custom_class: string;
+    /** Theme override class on the group, e.g. `light-mode`. */
     component_mode?: string;
+    /** `name` set on every segment button. */
     button_name: string;
     /** Accessible name for the group (applied as aria-label on the group container). */
     aria_label: string;
-    /** Index of the segment selected by default. Clamped to a valid item index. */
+    /** Index of the selected segment, from 0. Changing it after load moves the selection. An out-of-range value selects the first segment. */
     selected_index: number;
+    /** Accessible names for icon-only segments, as a JSON string array in the same order as `items`, e.g. `'["Align left", "Align center"]'`. */
+    icon_labels?: string;
     /** F-004 repair: the currently-selected segment. Exactly one segment is
      * selected at a time; this is what makes the component interactive at all. */
     active_index: number;
-    /** Emits the newly-selected index whenever the selection changes. */
+    /** Fires when the user selects a different segment. `detail` is the new index, from 0. */
     segmentChange: EventEmitter<number>;
     private parsedItems;
     componentWillLoad(): void;
+    /** Re-parses `items` when it changes after load, and keeps the current
+     * selection if it is still in range (else selects the first segment). */
+    itemsChanged(): void;
+    /** Moves the selection when `selected_index` changes after load. */
+    selectedIndexChanged(): void;
+    private parseItems;
     private clampIndex;
+    private get parsedIconLabels();
+    /** Accessible name of an icon-only segment: the matching `icon_labels`
+     * entry, else the item text with underscores read as spaces. */
+    private iconLabel;
     private selectSegment;
     render(): any;
 }

package/dist/types/components/stepper/dda-horizontal-stepper/dda-horizontal-stepper.d.ts

@@ -1,7 +1,11 @@
 export declare class DdaHorizontalStepper {
+    /** Steps, as a JSON string array of `{ title, subtitle, description }` objects. */
     steps: string;
+    /** Index of the active step, from 0. Steps before it show as completed. */
     current_step: number;
+    /** Extra CSS classes added to the stepper container. */
     custom_class?: string;
+    /** Theme override class on the stepper container, e.g. `light-mode`. */
     component_mode?: string;
     parsedSteps: {
         title: string;
@@ -9,5 +13,7 @@ export declare class DdaHorizontalStepper {
         description: string;
     }[];
     componentWillLoad(): void;
+    /** Re-parses `steps` when it changes after load. A missing or invalid value renders no steps. */
+    parseSteps(): void;
     render(): any;
 }

package/dist/types/components/stepper/dda-vertical-stepper/dda-vertical-stepper.d.ts

@@ -1,7 +1,13 @@
 export declare class DdaVerticalStepper {
+    /** Steps, as a JSON string array of `{ icon, title, subtitle, description }` objects. `icon` is a Material Icons name. */
     steps: string;
+    /** Index of the current step, from 0. Steps up to and including it are active. */
+    current_step?: number;
+    /** @deprecated Use `current_step`. Its attribute is `current_-step`, so it never worked in HTML. */
     current_Step: number;
+    /** Extra CSS classes added to the stepper container. */
     custom_class?: string;
+    /** Class added to the stepper container, e.g. `light-mode`. */
     component_mode?: string;
     parsedSteps: {
         icon: string;
@@ -10,5 +16,7 @@ export declare class DdaVerticalStepper {
         description: string;
     }[];
     componentWillLoad(): void;
+    /** Re-parses `steps` when it changes after load. A missing or invalid value renders no steps. */
+    parseSteps(): void;
     render(): any;
 }