@dubai-design-system/components-js 3.12.10 → 3.12.12

package/dist/collection/components/dda-tooltip/dda-tooltip.css

@@ -1,139 +1,131 @@
-.dda-tooltip-container {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-.dda-tooltip-box {
-  position: absolute;
-  visibility: hidden;
-  background-color: var(--dda-neutral-100);
-  border: solid 1px var(--dda-neutral-90);
-  color: var(--dda-neutral-0);
-  text-align: center;
-  padding: 5px 12px;
-  border-radius: 6px;
-  z-index: 1;
-  opacity: 0;
-  /* transition: opacity 0.3s; */
-}
-.dda-tooltip-container:hover .dda-tooltip-box {
-  visibility: visible;
-  opacity: 1;
-}
-.dda-tooltip-box strong{
-  font-size: 16px;
-  color: var(--dda-neutral-0);
-  font-weight: var(--dda-fw-400);
-  white-space: nowrap;
-}
-
-.dda-tooltip-box p{
-  font-size: 14px;
-  color: var(--dda-neutral-variant-30);
-  white-space: nowrap;
-  margin: 0;
-}
-
-.dda-tooltip-box.top {
-  bottom: 100%;
-  left: 50%;
-  transform: translate(-50%);
-  margin-bottom: 7px;
-}
-.dda-tooltip-box.top::before, .dda-tooltip-box.top::after {
-  content: "";
-  border-left: 10px solid transparent;
-  border-right: 10px solid transparent;
-  position: absolute;
-  left: 50%;
-  margin-inline-start: -10px;
-}
-.dda-tooltip-box.top::before {
-  top: 100%;
-  border-top: 8px solid var(--dda-neutral-90);
-  margin-top: 0px;
-}
-.dda-tooltip-box.top::after {
-  top: 100%;
-  border-top: 8px solid var(--dda-neutral-100);
-  margin-top: -2px;
-  z-index: 1;
-}
-
-
-.dda-tooltip-box.bottom {
-  top: 100%;
-  left: 50%;
-  transform: translate(-50%);
-  margin-top: 7px;
-}
-.dda-tooltip-box.bottom::before, .dda-tooltip-box.bottom::after {
-  content: "";
-  border-left: 10px solid transparent;
-  border-right: 10px solid transparent;
-  position: absolute;
-  left: 50%;
-  margin-inline-start: -10px;
-}
-.dda-tooltip-box.bottom::before {
-  bottom: 100%;
-  border-bottom: 8px solid var(--dda-neutral-90);
-  margin-bottom: 0px;
-}
-.dda-tooltip-box.bottom::after {
-  bottom: 100%;
-  border-bottom: 8px solid var(--dda-neutral-100);
-  margin-bottom: -2px;
-  z-index: 1;
-}
-
-.dda-tooltip-box.left {
-  top: 50%;
-  inset-inline-end: 100%;
-  margin-inline-end: 13px;
-  transform: translate(0%, -50%);
-}
-.dda-tooltip-box.left::before, .dda-tooltip-box.left::after,
-.dda-tooltip-box.right::before, .dda-tooltip-box.right::after {
-  content: "";
-  border-top: 10px solid transparent;
-  border-bottom: 10px solid transparent;
-  position: absolute;
-  top: 50%;
-  transform: translate(0%, -50%);
-}
-.dda-tooltip-box.left::before {
-  bottom: 100%;
-  border-left: 8px solid var(--dda-neutral-90);
-  right: -9px;
-}
-.dda-tooltip-box.left::after {
-  bottom: 100%;
-  border-left: 8px solid var(--dda-neutral-100);
-  z-index: 1;
-  right: -8px;
-}
-
-.dda-tooltip-box.right {
-  top: 50%;
-  inset-inline-start: 100%;
-  margin-inline-start: 13px;
-  transform: translate(0%, -50%);
-}
-.dda-tooltip-box.right::before {
-  bottom: 100%;
-  border-right: 8px solid var(--dda-neutral-90);
-  left: -9px;
-}
-.dda-tooltip-box.right::after {
-  bottom: 100%;
-  border-right: 8px solid var(--dda-neutral-100);
-  z-index: 1;
-  left: -8px;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .dda-tooltip-box {
-    transition: opacity 0.3s;
-  }
+.dda-tooltip-container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.dda-tooltip-box {
+  position: absolute;
+  visibility: hidden;
+  background-color: var(--dda-neutral-100);
+  border: solid 1px var(--dda-neutral-90);
+  color: var(--dda-neutral-0);
+  text-align: center;
+  padding: 5px 12px;
+  border-radius: 6px;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+.dda-tooltip-container:hover .dda-tooltip-box {
+  visibility: visible;
+  opacity: 1;
+}
+.dda-tooltip-box strong{
+  font-size: 16px;
+  color: var(--dda-neutral-0);
+  white-space: nowrap;
+}
+.dda-tooltip-box p{
+  font-size: 14px;
+  color: var(--dda-neutral-variant-30);
+  white-space: nowrap;
+  margin: 0;
+}
+
+.dda-tooltip-box.top {
+  bottom: 100%;
+  left: 50%;
+  transform: translate(-50%);
+  margin-bottom: 7px;
+}
+.dda-tooltip-box.top::before, .dda-tooltip-box.top::after {
+  content: "";
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  position: absolute;
+  left: 50%;
+  margin-inline-start: -10px;
+}
+.dda-tooltip-box.top::before {
+  top: 100%;
+  border-top: 8px solid var(--dda-neutral-90);
+  margin-top: 0px;
+}
+.dda-tooltip-box.top::after {
+  top: 100%;
+  border-top: 8px solid var(--dda-neutral-100);
+  margin-top: -2px;
+  z-index: 1;
+}
+
+
+.dda-tooltip-box.bottom {
+  top: 100%;
+  left: 50%;
+  transform: translate(-50%);
+  margin-top: 7px;
+}
+.dda-tooltip-box.bottom::before, .dda-tooltip-box.bottom::after {
+  content: "";
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  position: absolute;
+  left: 50%;
+  margin-inline-start: -10px;
+}
+.dda-tooltip-box.bottom::before {
+  bottom: 100%;
+  border-bottom: 8px solid var(--dda-neutral-90);
+  margin-bottom: 0px;
+}
+.dda-tooltip-box.bottom::after {
+  bottom: 100%;
+  border-bottom: 8px solid var(--dda-neutral-100);
+  margin-bottom: -2px;
+  z-index: 1;
+}
+
+.dda-tooltip-box.left {
+  top: 50%;
+  inset-inline-end: 100%;
+  margin-inline-end: 13px;
+  transform: translate(0%, -50%);
+}
+.dda-tooltip-box.left::before, .dda-tooltip-box.left::after,
+.dda-tooltip-box.right::before, .dda-tooltip-box.right::after {
+  content: "";
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  position: absolute;
+  top: 50%;
+  transform: translate(0%, -50%);
+}
+.dda-tooltip-box.left::before {
+  bottom: 100%;
+  border-left: 8px solid var(--dda-neutral-90);
+  right: -9px;
+}
+.dda-tooltip-box.left::after {
+  bottom: 100%;
+  border-left: 8px solid var(--dda-neutral-100);
+  z-index: 1;
+  right: -8px;
+}
+
+.dda-tooltip-box.right {
+  top: 50%;
+  inset-inline-start: 100%;
+  margin-inline-start: 13px;
+  transform: translate(0%, -50%);
+}
+.dda-tooltip-box.right::before {
+  bottom: 100%;
+  border-right: 8px solid var(--dda-neutral-90);
+  left: -9px;
+}
+.dda-tooltip-box.right::after {
+  bottom: 100%;
+  border-right: 8px solid var(--dda-neutral-100);
+  z-index: 1;
+  left: -8px;
 }

package/dist/collection/components/dda-tooltip/dda-tooltip.js

@@ -5,17 +5,17 @@ export class DdaTooltip {
         this.custom_class = '';
     }
     render() {
-        return (h(Host, { key: 'e8c8e7633072d59f7c0e922f943931c861db06de' }, h("div", { key: '6508bae5ac4df0f433d875648f360a3fadd933e2', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode}` }, h("slot", { key: 'dc75cd5b276b9d90ec37eb71cf008364c977ab96' }), h("div", { key: '84339f13bf811a0e7f42df8a7c89a848a311eb80', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: 'ef9abb2b5387fd09d16ac7827b77dc6d605d892e' }, this.title_text), h("p", { key: '00d3089ee74ed19ebed6edaf8913c372af38df42' }, this.description)))));
+        return (h(Host, { key: '4494c13e629622514b5c4e5dcfe3d6cba25c3793' }, h("div", { key: 'f5fd919624dcfd05986e7c80a2832f4af8f2d9d1', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode}` }, h("slot", { key: '8c45f3ccf747a7f801b43e19ac0f136c3ac73588' }), h("div", { key: '409fe05bf41db260aa130540c9e9c2439a03083d', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: '7df6fbe29044ec091334ea5752f4b8819307a3fa' }, this.title_text), h("p", { key: 'a39656c6e995732b0fd876990a25628372d14dac' }, this.description)))));
     }
     static get is() { return "dda-tooltip"; }
     static get originalStyleUrls() {
         return {
-            "$": ["dda-tooltip.css"]
+            "$": ["../../global/global.css", "dda-tooltip.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["dda-tooltip.css"]
+            "$": ["../../global/global.css", "dda-tooltip.css"]
         };
     }
     static get properties() {
@@ -36,8 +36,8 @@ export class DdaTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "title_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "title_text"
             },
             "description": {
                 "type": "string",
@@ -55,8 +55,8 @@ export class DdaTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "description",
-                "reflect": false
+                "reflect": false,
+                "attribute": "description"
             },
             "position": {
                 "type": "string",
@@ -74,8 +74,8 @@ export class DdaTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": false,
+                "attribute": "position",
                 "defaultValue": "'top'"
             },
             "custom_class": {
@@ -94,8 +94,8 @@ export class DdaTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -114,10 +114,9 @@ export class DdaTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             }
         };
     }
 }
-//# sourceMappingURL=dda-tooltip.js.map

package/dist/collection/components/dda-tooltip/dda-tooltip.stories.js

@@ -28,20 +28,20 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-tooltip\` component, pass the following props:
-
-  \`\`\`html
-<dda-tooltip
-    title_text="Tooltip"
-    description="This is a tooltip description."
-    position="top"
-    custom_class=""
-    component_mode=""
-    ><!---->
-    <button>Hover me</button>
-</dda-tooltip>
-  \`\`\`
+                component: `
+  To use the \`dda-tooltip\` component, pass the following props:
+
+  \`\`\`html
+<dda-tooltip
+    title_text="Tooltip"
+    description="This is a tooltip description."
+    position="top"
+    custom_class=""
+    component_mode=""
+    ><!---->
+    <button>Hover me</button>
+</dda-tooltip>
+  \`\`\`
   `,
             },
         },
@@ -52,8 +52,8 @@ const Template = (args) => {
         .filter(([key, value]) => value !== undefined && key !== 'text')
         .map(([key, value]) => `${key}="${value}"`)
         .join(' ');
-    return `<dda-tooltip ${attributes}>
-            <button>Hover me</button>
+    return `<dda-tooltip ${attributes}>
+            <button>Hover me</button>
           </dda-tooltip>`;
 };
 export const Top = Template.bind({});
@@ -85,4 +85,3 @@ Right.args = {
     position: 'right',
     component_mode: '',
 };
-//# sourceMappingURL=dda-tooltip.stories.js.map

package/dist/collection/components/dda-ui-card/dda-ui-card.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/{dda-cards/dda-banner-card/dda-banner-card.js → dda-ui-card/dda-ui-card.js}

@@ -1,48 +1,37 @@
 import { h, Host } from "@stencil/core";
-export class DdaBannerCard {
+export class DdaUiCard {
     constructor() {
-        this.custom_class = '';
-        this.banner_card_value = '';
-        this.banner_card_name = '';
+        this.type = 'default';
+        this.icon = '';
+        this.image = '';
+        this.maintitle = '';
+        this.subtitle = '';
+        this.link = '';
+        this.linktext = '';
+        this.linkicon = 'arrow_forward';
     }
     render() {
-        const cardClass = [
-            'dda-banner-card',
-            this.custom_class,
-            this.component_mode,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        return (h(Host, { key: '28cc4eda203b1c117c7453f3dc55f4d7a15e51c6' }, h("button", { key: '45fd82bafc340a0b6f50738ae2ddd316b44e057a', id: this.banner_card_id, name: this.banner_card_name, value: this.banner_card_value, class: cardClass, type: "button", role: "button", "aria-labelledby": `${this.banner_card_id}-title ${this.banner_card_id}-desc` }, h("img", { key: 'bcb302aa1114d5b9f548060e2d8453364dda42cf', class: "dda-banner-card-icon", src: this.image_src, alt: this.image_alt || this.banner_card_title || 'Banner card image', "aria-hidden": !this.image_alt && !this.banner_card_title }), h("span", { key: '9497d70bafe960c447a089cbd2711d09ecf7c927', class: "dda-d-flex dda-flex-column" }, h("span", { key: 'd2d601371cd1a875a86368beee011af77554828e', id: `${this.banner_card_id}-title`, class: "dda-banner-card-title", role: "heading", "aria-level": 2 }, this.banner_card_title), h("span", { key: 'a03f1653cf3f9f3711ad31a01ab5339b590e4ee7', id: `${this.banner_card_id}-desc`, class: "dda-banner-card-description" }, this.banner_card_description)))));
+        return (h(Host, { key: '30c63ed62e73c8cc2450bf87e68696fa75d2ffa9' }, h("div", { key: '84b0ee5cd11c08b8ce4f255984686522d18a0e21', class: 'dda-card' }, h("div", { key: '8dbd4052cf9f65ecbee0564f3053451b51f97f4c', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: '4d19b37ed54d7750502d0d887e8f3e176e29032e' }, !!this.icon && (h("span", { key: '57208d2990bedd1a9f2aee6bb98d92bce8040705', class: 'dda-card-icon' }, h("i", { key: 'e75ebb8cbfb0c6f01b671578b506b2f0f28643d5', class: 'material-icons' }, this.icon))), !!this.image && (h("span", { key: 'dc779d3cff58242aee5d793f891e6690976729e9', class: 'dda-card-icon' }, h("img", { key: '00412adf49dbdb05f82fb8ae84b211325b2716e3', src: this.image, alt: this.maintitle }))), !!this.maintitle && h("h1", { key: 'fff43c9f0ef550aac34817bed2712e1fa570ed01', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: 'a9e3e53004c78dae194808dad1611d0267860ef1', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: '2d16d8feab0e3162eecabeb0b52048a0a6251281', href: this.link, class: 'dda-card-link' }, this.linktext, ' ', this.linkicon && (h("span", { key: '9d99219b356886256f5e2c81cb9b393d2fea4626' }, h("i", { key: '4a54cfe82b308866a7b6dfab353035da852c6d0a', class: 'material-icons' }, this.linkicon))))))), h("slot", { key: 'b8861e92d81fcb83f2dd4a5eb1eaed2726dd5932' })))));
+    }
+    static get is() { return "dda-ui-card"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dda-ui-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dda-ui-card.css"]
+        };
     }
-    static get is() { return "dda-banner-card"; }
     static get properties() {
         return {
-            "banner_card_type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "banner_card_type",
-                "reflect": false
-            },
-            "banner_card_id": {
+            "type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'default' | 'custom'",
+                    "resolved": "\"custom\" | \"default\"",
                     "references": {}
                 },
                 "required": false,
@@ -53,10 +42,11 @@ export class DdaBannerCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "banner_card_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'default'"
             },
-            "banner_card_url": {
+            "icon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -72,10 +62,11 @@ export class DdaBannerCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "banner_card_url",
-                "reflect": false
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
             },
-            "image_src": {
+            "image": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -91,10 +82,11 @@ export class DdaBannerCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "image_src",
-                "reflect": false
+                "reflect": false,
+                "attribute": "image",
+                "defaultValue": "''"
             },
-            "image_alt": {
+            "maintitle": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -110,10 +102,11 @@ export class DdaBannerCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "image_alt",
-                "reflect": false
+                "reflect": false,
+                "attribute": "maintitle",
+                "defaultValue": "''"
             },
-            "banner_card_title": {
+            "subtitle": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -129,10 +122,11 @@ export class DdaBannerCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "banner_card_title",
-                "reflect": false
+                "reflect": false,
+                "attribute": "subtitle",
+                "defaultValue": "''"
             },
-            "banner_card_description": {
+            "link": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -148,10 +142,11 @@ export class DdaBannerCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "banner_card_description",
-                "reflect": false
+                "reflect": false,
+                "attribute": "link",
+                "defaultValue": "''"
             },
-            "custom_class": {
+            "linktext": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -167,11 +162,11 @@ export class DdaBannerCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
-                "reflect": true,
+                "reflect": false,
+                "attribute": "linktext",
                 "defaultValue": "''"
             },
-            "banner_card_value": {
+            "linkicon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -187,50 +182,28 @@ export class DdaBannerCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "banner_card_value",
-                "reflect": true,
-                "defaultValue": "''"
-            },
-            "banner_card_name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
+                "reflect": false,
+                "attribute": "linkicon",
+                "defaultValue": "'arrow_forward'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "linkClick",
+                "name": "linkClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
-                "attribute": "banner_card_name",
-                "reflect": true,
-                "defaultValue": "''"
-            },
-            "component_mode": {
-                "type": "string",
-                "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "void",
+                    "resolved": "void",
                     "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
-            }
-        };
+                }
+            }];
     }
 }
-//# sourceMappingURL=dda-banner-card.js.map