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

package/dist/collection/components/dda-creditcard-field/dda-creditcard-field.js

@@ -2,62 +2,24 @@ import { h, Host } from "@stencil/core";
 export class DdaCreditCardField {
     constructor() {
         this.value = '';
-        this.validation_id = 'text';
         this.disabled = false;
         this.custom_class = '';
         this.restrict_input = false;
         this.formattedValue = '';
     }
-    // handleInput(event: Event) {
-    //   const inputElement = event.target as HTMLInputElement;
-    //   const inputValue = inputElement.value.replace(/[^0-9-]/g, '');
-    //   const maxLength = this.restrict_input ? 100 : 25;
-    //   if (inputValue.length <= maxLength) {
-    //     this.value = inputValue;
-    //     this.formatCardNumber(this.value);
-    //     inputElement.value = this.formattedValue;
-    //   } else {
-    //     inputElement.value = this.formattedValue;
-    //   }
-    // }
     handleInput(event) {
         const inputElement = event.target;
-        const inputValue = inputElement.value.replace(/[^0-9]/g, ''); // remove all non-numeric chars
+        const inputValue = inputElement.value.replace(/[^0-9-]/g, '');
         const maxLength = this.restrict_input ? 100 : 25;
         if (inputValue.length <= maxLength) {
             this.value = inputValue;
             this.formatCardNumber(this.value);
             inputElement.value = this.formattedValue;
-            // Emit validity status to parent
-            const isValid = /^\d{16}$/.test(this.value);
-            this.cardValidChanged.emit({ name: this.input_name || '', isValid });
         }
         else {
             inputElement.value = this.formattedValue;
         }
     }
-    // handleBlur(event: FocusEvent) {
-    //   const inputElement = event.target as HTMLInputElement;
-    //   this.inputBlurred.emit({
-    //     name: this.input_name || '',
-    //     value: inputElement.value,
-    //   });
-    // }
-    handleBlur(event) {
-        const inputElement = event.target;
-        const rawValue = inputElement.value.replace(/[^0-9]/g, '');
-        // Emit onBlur event (existing functionality)
-        this.inputBlurred.emit({
-            name: this.input_name || '',
-            value: inputElement.value,
-        });
-        // Emit card validation status
-        const isValid = /^\d{16}$/.test(rawValue);
-        this.cardValidChanged.emit({
-            name: this.input_name || '',
-            isValid,
-        });
-    }
     formatCardNumber(value) {
         const cleaned = value.replace(/\D/g, '');
         const matched = cleaned.match(/.{1,4}/g);
@@ -82,14 +44,19 @@ export class DdaCreditCardField {
             this.custom_class ? `${this.custom_class}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        const describedByIds = [];
-        if (this.helper_text)
-            describedByIds.push(`${this.validation_id}-helper`);
-        if (this.validation_type === 'error' && this.error_message)
-            describedByIds.push(`${this.validation_id}-error`);
-        return (h(Host, { key: '82c28c9fed81ae2cb4ede49a857b7c6f95cde950' }, h("div", { key: 'f367768d62332e6b8e2f093afb1c6a17ab1d009c', class: inputClass }, this.label && h("label", { key: 'ab01e87150efc0f225e2312b74792906a7910061', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: '3508b277bf16a4bd7bb71f6a55ac7181da2a9560', class: "dda-input-field-wrapper" }, this.card_icon && h("img", { key: '27c86c38bb645a517a08a2ede936530a7fd87371', src: this.card_icon, alt: "Card Icon", class: "dda-creditcard-icon" }), h("input", { key: '418fa1bc027f101be98968f30d0af66ccb80d042', "aria-label": this.aria_label, id: this.input_id, name: this.input_name, type: "text", inputmode: "numeric", placeholder: this.placeholder, value: this.formattedValue, class: "dda-input-field", disabled: this.disabled, maxlength: this.restrict_input ? 100 : 25, onInput: (event) => this.handleInput(event), onBlur: (event) => this.handleBlur(event) })), this.validation_type === 'error' && this.error_message ? (h("span", { class: "dda-error-message", id: this.validation_id, role: "alert" }, this.error_message)) : (this.helper_text && (h("span", { class: "dda-helper-text", id: this.validation_id }, this.helper_text))))));
+        return (h(Host, { key: 'fafe6ba30b4126789535d418564c152e21b988fa' }, h("div", { key: '785aa57958c2ac438835c4e722616896e4f41184', class: inputClass }, this.label && h("label", { key: '19a2f3102b329b66f0b9383e96401357d15c62b8', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: 'dd8090f7b4c4ea38417346094a21fec12dc8dafb', class: "dda-input-field-wrapper" }, this.card_icon && h("img", { key: '47170ed250126e7961936c6f998c60318c90948f', src: this.card_icon, alt: "Card Icon", class: "dda-creditcard-icon" }), h("input", { key: '0fe09c4ead1b7e6473f837f06136a2de75365c61', "aria-label": this.aria_label, id: this.input_id, name: this.input_name, type: "text", inputmode: "numeric", placeholder: this.placeholder, value: this.formattedValue, onInput: (event) => this.handleInput(event), class: "dda-input-field", disabled: this.disabled, maxlength: this.restrict_input ? 100 : 25 })), this.helper_text && h("span", { key: '0d0c912c16d9bada005483d27198b52a4c7fde4b', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '3c85a9c09b4388a30d1e5000a59c1a29c9faa24b', class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-creditcard-field"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../global/input.css", "../../global/global.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../global/input.css", "../../global/global.css"]
+        };
+    }
     static get properties() {
         return {
             "placeholder": {
@@ -108,8 +75,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
-                "reflect": false
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "label": {
                 "type": "string",
@@ -127,8 +94,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "value": {
                 "type": "string",
@@ -146,8 +113,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "''"
             },
             "card_icon": {
@@ -166,8 +133,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "card_icon",
-                "reflect": false
+                "reflect": false,
+                "attribute": "card_icon"
             },
             "error_message": {
                 "type": "string",
@@ -185,8 +152,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error_message",
-                "reflect": false
+                "reflect": false,
+                "attribute": "error_message"
             },
             "validation_type": {
                 "type": "string",
@@ -204,28 +171,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validation_type",
-                "reflect": false
-            },
-            "validation_id": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "validation_id",
                 "reflect": false,
-                "defaultValue": "'text'"
+                "attribute": "validation_type"
             },
             "size": {
                 "type": "string",
@@ -243,8 +190,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "input_type": {
                 "type": "string",
@@ -262,8 +209,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_type",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_type"
             },
             "helper_text": {
                 "type": "string",
@@ -281,8 +228,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper_text"
             },
             "disabled": {
                 "type": "boolean",
@@ -300,8 +247,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "custom_class": {
@@ -320,8 +267,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "restrict_input": {
@@ -340,8 +287,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "restrict_input",
                 "reflect": false,
+                "attribute": "restrict_input",
                 "defaultValue": "false"
             },
             "component_mode": {
@@ -360,8 +307,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "input_id": {
                 "type": "string",
@@ -379,8 +326,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_id"
             },
             "aria_label": {
                 "type": "string",
@@ -398,8 +345,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
             },
             "input_name": {
                 "type": "string",
@@ -417,8 +364,8 @@ export class DdaCreditCardField {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_name"
             }
         };
     }
@@ -427,38 +374,4 @@ export class DdaCreditCardField {
             "formattedValue": {}
         };
     }
-    static get events() {
-        return [{
-                "method": "inputBlurred",
-                "name": "inputBlurred",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ name: string; value: string }",
-                    "resolved": "{ name: string; value: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "cardValidChanged",
-                "name": "cardValidChanged",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ name: string; isValid: boolean }",
-                    "resolved": "{ name: string; isValid: boolean; }",
-                    "references": {}
-                }
-            }];
-    }
 }
-//# sourceMappingURL=dda-creditcard-field.js.map

package/dist/collection/components/dda-creditcard-field/dda-creditcard-field.stories.js

@@ -1,4 +1,3 @@
-import master_card from "../../../src/assets/img/icn/icn-master-card.svg";
 export default {
     title: 'Components/Credit Card Field',
     tags: ['autodocs'],
@@ -32,10 +31,6 @@ export default {
             options: ['normal', 'error'],
             description: 'Validation type of the input field',
         },
-        validation_id: {
-            control: 'text',
-            description: 'Validation ID of helper text and error text',
-        },
         size: {
             control: { type: 'select' },
             options: ['default', 'small',],
@@ -83,28 +78,28 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-credit-card-field\` component, pass the following props:
-  
-  \`\`\`html
-<dda-creditcard-field
-    placeholder="0000 - 0000 - 0000 - 0000"
-    label="Card Number"
-    restrict_input="false"
-    value=""
-    card_icon= master_card
-    size="default"
-    helper_text="Helper or footer text"
-    error_message=""
-    validation_type="normal"
-    custom_class=""
-    component_mode=""
-    input_id="input"
-    aria_label="credit-card-field"
-    onchange="console.log('changed')"
-    input_name="input"
-></dda-creditcard-field>
-    \`\`\`
+                component: `
+  To use the \`dda-credit-card-field\` component, pass the following props:
+  
+  \`\`\`html
+<dda-creditcard-field
+    placeholder="0000 - 0000 - 0000 - 0000"
+    label="Card Number"
+    restrict_input="false"
+    value=""
+    card_icon="https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg"
+    size="default"
+    helper_text="Helper or footer text"
+    error_message=""
+    validation_type="normal"
+    custom_class=""
+    component_mode=""
+    input_id="input"
+    aria_label="credit-card-field"
+    onchange="console.log('changed')"
+    input_name="input"
+></dda-creditcard-field>
+    \`\`\`
   `,
             },
         },
@@ -123,12 +118,11 @@ Default.args = {
     label: 'Card Number',
     restrict_input: false,
     value: '',
-    card_icon: master_card,
+    card_icon: 'https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg',
     size: 'default',
     helper_text: 'Helper or footer text',
-    error_message: 'This is an error message',
+    error_message: '',
     validation_type: 'normal',
-    validation_id: 'validationId',
     custom_class: '',
     component_mode: '',
     input_id: 'input',
@@ -142,12 +136,11 @@ SmallSize.args = {
     label: 'Card Number',
     restrict_input: false,
     value: '',
-    card_icon: master_card,
+    card_icon: 'https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg',
     size: 'small',
     helper_text: 'Helper or footer text',
-    error_message: 'This is an error message',
+    error_message: '',
     validation_type: 'normal',
-    validation_id: 'validationId',
     custom_class: '',
     component_mode: '',
     input_id: 'input',
@@ -161,12 +154,11 @@ WithErrorMessage.args = {
     label: 'Card Number',
     restrict_input: false,
     value: '5464 - 5363 - 5363 - 6363',
-    card_icon: master_card,
+    card_icon: 'https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg',
     size: 'default',
-    helper_text: 'Helper or footer text',
+    helper_text: '',
     error_message: 'This is an error message',
     validation_type: 'error',
-    validation_id: 'validationId',
     custom_class: '',
     component_mode: '',
     input_id: 'input',
@@ -180,12 +172,11 @@ Disabled.args = {
     label: 'Card Number',
     restrict_input: false,
     value: '',
-    card_icon: master_card,
+    card_icon: 'https://www.mastercard.com/content/dam/public/brandcenter/assets/images/logos/mclogo-for-footer.svg',
     size: 'default',
     helper_text: 'Helper or footer text',
-    error_message: 'This is an error message',
+    error_message: '',
     validation_type: 'normal',
-    validation_id: 'validationId',
     disabled: true,
     custom_class: '',
     component_mode: '',
@@ -194,4 +185,3 @@ Disabled.args = {
     onchange: '',
     input_name: 'input',
 };
-//# sourceMappingURL=dda-creditcard-field.stories.js.map