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

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,21 +79,23 @@ 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. */
+    /** Image URL of the location icon. Takes precedence over `locationButtonIcon`. */
     locationLogoSrc: string;
     /** Tooltip text and alternative text of the location icon. */
     locationButtonText: string;
-    /** Not used: the current markup does not render it. */
+    /** Material Symbols icon name of the location link, shown when `locationLogoSrc` is not set. */
     locationButtonIcon: string;
     /** Link URL of the news icon (right section). */
     newsButtonHref: string;
-    /** Image URL of the news icon. */
+    /** Image URL of the news icon. Takes precedence over `newsButtonIcon`. */
     newsButtonSrc: string;
     /** Tooltip text and alternative text of the news icon. */
     newsButtonText: string;
-    /** Not used: the current markup does not render it. */
+    /** Material Symbols icon name of the news link, shown when `newsButtonSrc` is not set. */
     newsButtonIcon: string;
     /** Link URL of the AI assistant icon (right section). */
     aiIconHref: string;
@@ -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,16 +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

@@ -8,6 +8,18 @@ declare const _default: {
             };
             description: string;
         };
+        locationButtonIcon: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        newsButtonIcon: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
     };
     component: string;
     parameters: {
@@ -20,3 +32,8 @@ 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;
+};