@dubai-design-system/components-js 5.2.0 → 5.3.1

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

@@ -1,10 +1,21 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/** One option. 5.x string options are read as `{ id: text, text }`. */
+export interface SelectOption {
+    id: string | number;
+    text: string;
+}
+/** Internal: a parsed option plus, for an object option, the original entry (`source`), so
+ * `selectChanged` can emit it with its extra fields, as 3.x did. Never sent on `selectionChange`,
+ * and not part of the public `SelectOption` type. */
+interface ParsedOption extends SelectOption {
+    source?: SelectOption;
+}
 export declare class Ddaselect {
     /** Label shown above the field. The trigger button is named by the label and its current text. */
     label: string;
-    /** Options as a JSON array string, e.g. `'["Dubai","Abu Dhabi","Sharjah"]'`. Invalid JSON shows "No options available". */
-    options: string;
-    /** The selected option. Must match an entry in `options`. The trigger shows "Select an option" when it is empty. Updated when the user picks an option. Mutable: the component assigns it. */
+    /** Options: a JSON array, or an array property, of strings (`["Dubai","Sharjah"]`) or 3.x `{ id, text }` objects (`[{"id":1,"text":"Dubai"}]`). Other entries are ignored. Invalid JSON shows "No options available". */
+    options: string | Array<string | SelectOption>;
+    /** The selected option: its id, or its text. For string options the id is the text. Updated to the picked option's id (as a string) when the user picks one. Mutable: the component assigns it. */
     selected: string;
     /** Disables the select: the list does not open and options cannot be picked. */
     disabled: boolean;
@@ -29,9 +40,28 @@ export declare class Ddaselect {
     toggle_button_name: string;
     /** `name` of each option button in the list. */
     option_select_button_name: string;
-    /** Emitted when the user picks an option other than the selected one, by mouse or keyboard. `detail.value` is the new option. */
+    /** Text in the trigger when nothing is selected. Default: `Select an option`. */
+    placeholder: string;
+    /** `name` sent in `selectBlurred`. Falls back to `button_id`. */
+    input_name: string;
+    /** 3.x name of `aria_label`, used as the trigger's aria-label only when `label` is not set. `aria_label` wins when both are set; when `label` is set, `main_aria_label` is ignored and the trigger keeps its `aria-labelledby`. */
+    main_aria_label: string;
+    /** 3.x name of `error` (the validation state class). `error` wins when both are set. */
+    validation_type: string;
+    /** Emitted when the user picks an option other than the selected one, by mouse or keyboard. `detail.value` is the new `selected` value (the option id as a string); `detail.id` and `detail.text` are the option. */
     selectionChange: EventEmitter<{
         value: string;
+        id: string | number;
+        text: string;
+    }>;
+    /** 3.x event: emitted each time the user picks one, even if it is already selected. For a string
+     * option this is `{ id, text }`; for an object option this is the original option object, extra
+     * fields included, as 3.x did. */
+    selectChanged: EventEmitter<SelectOption>;
+    /** 3.x event: emitted when the trigger loses focus, with `{ name, value }` — `input_name` (or `button_id`) and the selected text. */
+    selectBlurred: EventEmitter<{
+        name: string;
+        value: string;
     }>;
     el: HTMLElement;
     private pendingFocusIndex;
@@ -43,15 +73,20 @@ export declare class Ddaselect {
     private get errorId();
     private get describedBy();
     private get parsedOptions();
+    private findSelected;
+    private get selectedOption();
+    private get triggerLabel();
     private focusOption;
     private currentFocusedOptionIndex;
     private initialOptionIndex;
     toggleSelect(): void;
     private closeAndReturnFocus;
     onHostClick(event: MouseEvent): void;
-    selectOption(option: string): void;
+    selectOption(option: ParsedOption): void;
+    private onTriggerBlur;
     private onTriggerKeyDown;
     private onOptionKeyDown;
     componentDidRender(): void;
     render(): any;
 }
+export {};

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

@@ -77,6 +77,30 @@ declare const _default: {
             };
             description: string;
         };
+        placeholder: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        input_name: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        main_aria_label: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        validation_type: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
     };
     parameters: {
         docs: {
@@ -91,3 +115,4 @@ export declare const Default: any;
 export declare const Small: any;
 export declare const WithError: any;
 export declare const Disabled: any;
+export declare const IdAndText: any;

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

@@ -1,3 +1,20 @@
+export interface MiddleLinkItem {
+    LogoTooltip?: string;
+    href?: string;
+    src?: string;
+    srcDark?: string;
+    alt?: string;
+}
+export interface RightLinkItem {
+    RightLinkTooltip?: string;
+    href?: string;
+    title?: string;
+    itemId?: string;
+    IconFamily?: string;
+    IconName?: string;
+    LinkText?: string;
+    ariaLabel?: string;
+}
 export declare class DdaStickyFooter {
     el: HTMLElement;
     /** Link URL of the happiness icon (left section). */
@@ -8,6 +25,10 @@ export declare class DdaStickyFooter {
     happinessIconAlt: string;
     /** Tooltip text of the happiness icon. */
     happinessIconTooltip: string;
+    /** `id` of the happiness link. */
+    happinessIconId: string;
+    /** Happiness image for `color-theme="dark"`. */
+    happinessIconSrcDark: string;
     /** Link URL of the accessibility icon, the second icon in the left section. */
     accessibilityIconHref: string;
     /** Image URL of the accessibility icon. */
@@ -16,6 +37,10 @@ export declare class DdaStickyFooter {
     accessibilityIconAlt: string;
     /** Tooltip text of the accessibility icon. */
     accessibilityIconTooltip: string;
+    /** `id` of the accessibility (04) link. */
+    accessibilityIconId: string;
+    /** Accessibility (04) image for `color-theme="dark"`. */
+    accessibilityIconSrcDark: string;
     /** Link URL of the services icon (left section). */
     servicesIconHref: string;
     /** Image URL of the services icon. */
@@ -26,6 +51,10 @@ export declare class DdaStickyFooter {
     servicesIconTooltip: string;
     /** Text shown next to the services icon. Nothing is shown when it is not set. */
     servicesIconText: string;
+    /** `id` of the services link. */
+    servicesIconId: string;
+    /** Services image for `color-theme="dark"`. */
+    servicesIconSrcDark: string;
     /** Link URL of the first logo (middle section). */
     firstLogoHref: string;
     /** Image URL of the first logo. */
@@ -50,6 +79,8 @@ export declare class DdaStickyFooter {
     thirdLogoAlt: string;
     /** Tooltip text of the third logo. */
     thirdLogoTooltip: string;
+    /** Middle logos as a list (3.x). JSON array, or array property, of `{ LogoTooltip, href, src, srcDark, alt }`. When set, it replaces the first, second and third logo props. */
+    middleLink: string | MiddleLinkItem[];
     /** Link URL of the location icon (right section). */
     locationButtonHref: string;
     /** Image URL of the location icon. Takes precedence over `locationButtonIcon`. */
@@ -74,6 +105,10 @@ export declare class DdaStickyFooter {
     aiIconAlt: string;
     /** Tooltip text of the AI assistant icon. */
     aiIconTooltip: string;
+    /** `id` of the AI assistant link. */
+    aiIconId: string;
+    /** AI assistant image for `color-theme="dark"`. */
+    aiIconSrcDark: string;
     /** Link URL of the chat icon (right section). */
     chatIconHref: string;
     /** Image URL of the chat icon. */
@@ -82,17 +117,51 @@ export declare class DdaStickyFooter {
     chatIconAlt: string;
     /** Tooltip text of the chat icon. */
     chatIconTooltip: string;
+    /** `id` of the chat link. */
+    chatIconId: string;
+    /** Chat image for `color-theme="dark"`. */
+    chatIconSrcDark: string;
+    /** Right-side text links as a list (3.x). JSON array, or array property, of `{ RightLinkTooltip, href, title, itemId, IconFamily, IconName, LinkText }`. When set, it replaces the location and news links. */
+    rightLink: string | RightLinkItem[];
+    /** Link URL of the dubai.ae link (right section). */
+    dubaiaeIconHref: string;
+    /** `id` of the dubai.ae link. */
+    dubaiaeIconId: string;
+    /** dubai.ae wordmark image, shown on desktop. The link shows only when this and `dubaiaeIconSmallSrc` are set. */
+    dubaiaeIconSrc: string;
+    /** dubai.ae wordmark for `color-theme="dark"`. */
+    dubaiaeIconSrcDark: string;
+    /** dubai.ae small icon, shown at 992px and below. */
+    dubaiaeIconSmallSrc: string;
+    /** Alternative text of both dubai.ae images. */
+    dubaiaeIconAlt: string;
+    /** Tooltip text of the dubai.ae link. */
+    dubaiaeIconTooltip: string;
+    /** Material icon name of the "more" button. When set, the right links collapse behind this button at 992px and below. */
+    moreIcon: string;
+    /** `class` of the "more" button icon. Default: `material-icons`. */
+    moreIconFamily: string;
+    /** Accessible name of the "more" button. Default, and fallback for an empty value: `More`. */
+    more_button_label: string;
+    /** `dark` uses the `*-src-dark` images; an image without a dark version keeps its light image. Default: `light`. */
+    colorTheme: 'light' | 'dark';
     /** 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`. */
+    rightOpen: boolean;
+    private readonly rightListId;
+    isMobile: boolean;
+    private mobileQuery;
+    private onMobileChange;
+    /** Hides the middle logo section. Default: `false` (the logos show when at least one is set). */
     hideMiddleSection: boolean;
     componentWillLoad(): void;
     private resizeObserver;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     private renderLinkGraphic;
+    private img;
     handleScroll(): void;
     render(): any;
 }

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

@@ -33,3 +33,7 @@ declare const _default: {
 export default _default;
 export declare const Default: any;
 export declare const MaterialIcons: any;
+export declare const Lists3x: {
+    (args: any): string;
+    args: any;
+};