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

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

@@ -1,133 +1,148 @@
-.dda-alert{
-  padding: 24px;
-  border-radius: 10px; 
-  position: relative;
-}
-.dda-alert-inner{
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-}
-.dda-alert-icon-wrap{
-  padding-top: 2px; 
-}
-.dda-alert .alert-content{
-  width: 100%;
-  display: grid;
-  row-gap: 16px;
-}
-.dda-alert .alert-title{
-  margin: 0; 
-  font-size: var(--font-h6);
-  font-weight: var(--font-weight-regular);
-  line-height: 24px;
-}
-.dda-alert .alert-description{
-  margin: 0;
-}
-.alert-btn-wrap{
-  display: flex;
-  align-items: center;
-  justify-content: end;
-  gap: 15px;
-}
-.dda-alert-close{
-  position: absolute;
-  inset-inline-end: 24px;
-  inset-block-start: 24px;
-  width: 20px;
-  height: 2px;
-  background: transparent;
-  border: transparent;
-  font-size: 18px;
-}
-
-
-/**/
-.dda-alert-info{
-  background: var(--dda-primary-variant-95);
-  border: solid 1px var(--dda-color-primary-30);
-}
-.dda-alert-secondary.dda-alert-info .material-icons,
-.dda-alert-secondary.dda-alert-info .alert-title{
-  color: var(--dda-primary-40);
-}
-.light-mode.dda-alert-info{
-  background: var(--dda-info-95);
-  border: solid 1px var(--dda-info-40);
-  color: var(--dda-info-40);
-}
-
-/**/
-.dda-alert-warning{
-  background: var(--dda-warning-variant-95);
-  border: solid 1px var(--dda-color-warning-30);
-}
-.dda-alert-secondary.dda-alert-warning .material-icons,
-.dda-alert-secondary.dda-alert-warning .alert-title{
-  color: var(--dda-warning-40);
-}
-.light-mode.dda-alert-warning{
-  background: var(--dda-warning-95);
-  border: solid 1px var(--dda-warning-40);
-  color: var(--dda-warning-40);
-}
-.dda-alert-warning .alert-primary-warning{
-  background-color: var(--dda-warning-40);
-  border: solid 1px var(--dda-warning-40);
-}
-
-/**/
-.dda-alert-error{
-  background: var(--dda-error-variant-95);
-  border: solid 1px var(--dda-color-error-30);
-}
-.dda-alert-secondary.dda-alert-error .material-icons,
-.dda-alert-secondary.dda-alert-error .alert-title{
-  color: var(--dda-error-40);
-}
-.light-mode.dda-alert-error{
-  background: var(--dda-error-95);
-  border: solid 1px var(--dda-error-40);
-  color: var(--dda-error-40);
-}
-.dda-alert-error .alert-primary-error{
-  background-color: var(--dda-error-40);
-  border: solid 1px var(--dda-error-40);
-}
-
-/**/
-.dda-alert-success{
-  background: var(--dda-success-variant-95);
-  border: solid 1px var(--dda-color-success-30);
-}
-.dda-alert-secondary.dda-alert-success .material-icons,
-.dda-alert-secondary.dda-alert-success .alert-title{
-  color: var(--dda-success-40);
-}
-.light-mode.dda-alert-success{
-  background: var(--dda-success-95);
-  border: solid 1px var(--dda-success-40);
-  color: var(--dda-success-40);
-}
-.dda-alert-success .alert-primary-success{
-  background-color: var(--dda-success-40);
-  border: solid 1px var(--dda-success-40);
-}
-
-/**/
-
-
-.dda-alert-secondary{
-  background-color: var(--dda-surface-100);
-  border: solid 1px var(--dda-surface-90);
-  color: var(--dda-on-surface-0);
-  box-shadow: 0px 1px 2px 0px #1018280A;
-}
-.dda-alert .alert-secondary-button{
-  border: solid 1px var(--dda-surface-100);
-}
-.dda-alert-secondary .alert-secondary-button{
-  border: solid 1px var(--dda-surface-90);
-}
-/**/
+.dda-alert{
+  padding: 24px;
+  border-radius: 10px;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px
+}
+.dda-alert .alert-content{
+  width: 100%;
+  display: grid;
+  row-gap: 10px;
+}
+.dda-alert .alert-title{
+  margin: 0; 
+  font-size: 24px;
+  line-height: 24px;
+}
+.dda-alert .alert-description{
+  margin: 0;
+}
+.dda-alert .info-icon{
+  font-size: 20px;
+  padding-top: 2px;
+}
+.alert-btn-wrap{
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  gap: 15px;
+}
+.alert-btn-wrap a{
+  font-size: 16px;
+  font-weight: 500;
+}
+.dda-alert-close{
+  width: 20px;
+  height: 2px;
+  background: transparent;
+  border: transparent;
+  font-size: 18px;
+}
+
+.dda-alert-info{
+  background: var(--dda-primary-variant-95);
+  border: solid 1px var(--dda-color-primary-40);
+  color: var(--dda-color-primary-40);
+}
+.light-mode.dda-alert-info{
+  background: var(--dda-primary-95);
+  border: solid 1px var(--dda-primary-40);
+  color: var(--dda-primary-40);
+}
+/**/
+.dda-alert-warning{
+  background: var(--dda-warning-variant-95);
+  border: solid 1px var(--dda-color-warning-40);
+  color: var(--dda-color-warning-40);
+}
+.light-mode.dda-alert-warning{
+  background: var(--dda-warning-95);
+  border: solid 1px var(--dda-warning-40);
+  color: var(--dda-warning-40);
+}
+/**/
+.dda-alert-error{
+  background: var(--dda-error-variant-95);
+  border: solid 1px var(--dda-color-error-40);
+  color: var(--dda-color-error-40);
+}
+.light-mode.dda-alert-error{
+  background: var(--dda-error-95);
+  border: solid 1px var(--dda-error-40);
+  color: var(--dda-error-40);
+}
+/**/
+.dda-alert-success{
+  background: var(--dda-success-variant-95);
+  border: solid 1px var(--dda-color-success-40);
+  color: var(--dda-color-success-40);
+}
+.light-mode.dda-alert-success{
+  background: var(--dda-success-95);
+  border: solid 1px var(--dda-success-40);
+  color: var(--dda-success-40);
+}
+/**/
+.dda-alert-secondary{
+  background-color: var(--dda-surface-100);
+  border: solid 1px var(--dda-surface-90);
+  color: var(--dda-on-surface-0);
+  box-shadow: 0px 1px 2px 0px #1018280A;
+}
+.light-mode.dda-alert-secondary{
+  background-color: var(--dda-neutral-100);
+  border: solid 1px var(--dda-neutral-90);
+  color: var(--dda-neutral-0);
+}
+/**/
+.dda-alert-info.dda-alert-secondary .info-icon,
+.dda-alert-info .alert-btn-wrap a,
+.dda-alert-info .dda-alert-close{
+  color: var(--dda-color-primary-40);
+}
+.light-mode.dda-alert-info.dda-alert-secondary .info-icon,
+.light-mode.dda-alert-info .alert-btn-wrap a,
+.light-mode.dda-alert-info .dda-alert-close{
+  color: var(--dda-primary-40);
+}
+/**/
+.dda-alert-warning.dda-alert-secondary .info-icon,
+.dda-alert-warning .alert-btn-wrap a,
+.dda-alert-warning .dda-alert-close{
+  color: var(--dda-color-warning-40);
+}
+.light-mode.dda-alert-warning.dda-alert-secondary .info-icon,
+.light-mode.dda-alert-warning .alert-btn-wrap a,
+.light-mode.dda-alert-warning .dda-alert-close{
+  color: var(--dda-warning-40);
+}
+/**/
+.dda-alert-error.dda-alert-secondary .info-icon,
+.dda-alert-error .alert-btn-wrap a,
+.dda-alert-error .dda-alert-close{
+  color: var(--dda-color-error-40);
+}
+.light-mode.dda-alert-error.dda-alert-secondary .info-icon,
+.light-mode.dda-alert-error .alert-btn-wrap a,
+.light-mode.dda-alert-error .dda-alert-close{
+  color: var(--dda-error-40);
+}
+/**/
+.dda-alert-success.dda-alert-secondary .info-icon,
+.dda-alert-success .alert-btn-wrap a,
+.dda-alert-success .dda-alert-close{
+  color: var(--dda-color-success-40);
+}
+.light-mode.dda-alert-success.dda-alert-secondary .info-icon,
+.light-mode.dda-alert-success .alert-btn-wrap a,
+.light-mode.dda-alert-success .dda-alert-close{
+  color: var(--dda-success-40);
+}
+/**/
+
+
+.dda-alert-secondary .alert-btn-wrap a,
+.dda-alert-secondary .dda-alert-close{
+  color: var(--dda-color-neutral-0) !important;
+}

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

@@ -7,9 +7,6 @@ export class DdaAlert {
         this.description = '';
         this.button_text = '';
         this.custom_class = '';
-        this.onCloseClick = () => {
-            this.closeClick.emit();
-        };
         this.firstClickHandler = () => {
             this.firstClick.emit();
         };
@@ -18,17 +15,17 @@ export class DdaAlert {
         };
     }
     render() {
-        return (h("div", { key: 'fa6a6d35249f828138b8e15123810f1da78110ce', class: `dda-alert dda-alert-${this.type} dda-alert-${this.variation} ${this.custom_class} ${this.component_mode}` }, h("div", { key: '3b9d19d5f989141de074ca38bbd5fadafcc92459', class: "dda-alert-inner" }, h("div", { key: '08b733b6fa30cee2ee47d597662b0321a36c28fe', class: "dda-alert-icon-wrap" }, h("i", { key: '9ba44e4b86442a4e9000b3198bdb418da16b25e9', class: "info-icon material-icons material-symbols-outlined", "aria-hidden": "true" }, "info")), h("div", { key: 'bc928946868d7d5e69d300b39466cc6034c8cb03', class: "alert-content" }, h("h4", { key: '919c92dfaecec735d9aa7d52e72427bed690969f', class: "alert-title" }, this.title_text), h("p", { key: 'af52ff93663b48f7a0a5743b3bfa884922d8b41e', class: "alert-description" }, this.description), h("div", { key: '4ea78d2b12f91119b27232fc51b444854f0cdd37', class: "alert-btn-wrap" }, this.secondary_button ? h("dda-button", { button_color: "default-tertiary", onClick: () => this.firstClickHandler(), custom_class: "alert-secondary-button", component_mode: "", size: "sm", button_id: "button", aria_label: "button", button_name: "button", button_text: this.secondary_button }) : null, this.primary_button ? h("dda-button", { button_color: "default-primary", onClick: () => this.secondClickHandler(), custom_class: `alert-primary-${this.variation}`, component_mode: "", size: "sm", button_id: "button", aria_label: "button", button_name: "button", button_text: this.primary_button }) : null))), h("button", { key: '27f876beffa50e047cabe82e609c1db3b2fa0719', type: 'button', name: this.close_button_name, class: "dda-alert-close", onClick: this.onCloseClick }, h("i", { key: '034a909b890b04bd919df384344cfae0cef94577', class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "close"))));
+        return (h("div", { key: '98ea67f782cdb170ef4440da12a3fced54483638', class: `dda-alert dda-alert-${this.type} dda-alert-${this.variation} ${this.custom_class} ${this.component_mode}` }, h("i", { key: 'f28043d93ea48b85396990cf7c9ba1820188c193', class: "material-icons  material-symbols-outlined" }, "info"), h("div", { key: 'b3c85ca4f95d41a9f1c4fbcc8516ecd2f35e16e4', class: "alert-content" }, h("h4", { key: 'ec1d4c17aa370ac496a6c956f6c1a51a9255cef0', class: "alert-title" }, this.title_text), h("p", { key: '0d98c6ad7bfc320164ba5308b8f1f8f5557eccf2', class: "alert-description" }, this.description), h("div", { key: 'ed77c41ae05b7d83bb6036931d08d972a491b1b5', class: "alert-btn-wrap" }, !!this.first_button && (h("a", { key: 'c484530a7323856ad63d8fa15d7efb71667dc5e3', href: this.first_link, onClick: () => this.firstClickHandler() }, this.first_button)), !!this.second_button && (h("a", { key: '63bea825f34ce715c6afb69c1199f81fea19bbe4', href: this.second_link, onClick: () => this.secondClickHandler() }, this.second_button)))), h("button", { key: '787968ad8cc740508907442fa513c2a076b7a68a', name: this.button_name, class: "dda-alert-close", onClick: this.clickHandler }, h("i", { key: '3d50cf338701a55809895b51cf7beace2730a403', class: "material-icons  material-symbols-outlined" }, "close"))));
     }
     static get is() { return "dda-alert"; }
     static get originalStyleUrls() {
         return {
-            "$": ["dda-alert.css"]
+            "$": ["dda-alert.css", "../../global/global.css", "../../global/dda-button.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["dda-alert.css"]
+            "$": ["dda-alert.css", "../../global/global.css", "../../global/dda-button.css"]
         };
     }
     static get properties() {
@@ -49,8 +46,8 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'primary'"
             },
             "variation": {
@@ -69,8 +66,8 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
+                "attribute": "variation",
                 "defaultValue": "'info'"
             },
             "title_text": {
@@ -89,8 +86,8 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "title_text",
                 "reflect": false,
+                "attribute": "title_text",
                 "defaultValue": "''"
             },
             "description": {
@@ -109,8 +106,8 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "description",
                 "reflect": false,
+                "attribute": "description",
                 "defaultValue": "''"
             },
             "button_text": {
@@ -129,8 +126,8 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button_text",
                 "reflect": false,
+                "attribute": "button_text",
                 "defaultValue": "''"
             },
             "custom_class": {
@@ -149,8 +146,8 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -169,8 +166,8 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "component_id": {
                 "type": "string",
@@ -188,10 +185,10 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_id"
             },
-            "secondary_button": {
+            "first_link": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -207,10 +204,10 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "secondary_button",
-                "reflect": false
+                "reflect": false,
+                "attribute": "first_link"
             },
-            "secondary_button_link": {
+            "second_link": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -226,10 +223,10 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "secondary_button_link",
-                "reflect": false
+                "reflect": false,
+                "attribute": "second_link"
             },
-            "primary_button": {
+            "first_button": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -245,10 +242,10 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "primary_button",
-                "reflect": false
+                "reflect": false,
+                "attribute": "first_button"
             },
-            "primary_button_link": {
+            "second_button": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -264,10 +261,10 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "primary_button_link",
-                "reflect": false
+                "reflect": false,
+                "attribute": "second_button"
             },
-            "close_button_name": {
+            "button_name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -283,28 +280,35 @@ export class DdaAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close_button_name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "button_name"
+            },
+            "clickHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: MouseEvent) => void",
+                    "resolved": "(event: MouseEvent) => void",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }
     static get events() {
         return [{
-                "method": "closeClick",
-                "name": "closeClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
                 "method": "firstClick",
                 "name": "firstClick",
                 "bubbles": true,
@@ -337,4 +341,3 @@ export class DdaAlert {
             }];
     }
 }
-//# sourceMappingURL=dda-alert.js.map