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

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

@@ -57,10 +57,6 @@ export default {
             control: { type: 'text' },
             description: 'Aria label for the textarea field'
         },
-        show_info_icon: {
-            control: 'boolean',
-            description: 'Whether to show a Information icon with the helper text or error text',
-        },
         onchange: {
             control: { type: 'text' },
             description: 'onchange event for the textarea field',
@@ -73,26 +69,25 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-textarea\` component, pass the following props:
-
-  \`\`\`html
-<dda-textarea
-    placeholder="Enter description"
-    label="Description"
-    max_characters="200"
-    value=""
-    helper_text="This is a helper text"
-    error_message=""
-    show_info_icon=""
-    custom_class=""
-    component_mode=""
-    input_id="input"
-    aria_label="textarea"
-    onchange="console.log('changed')"
-    textarea_name="textarea-name"
-></dda-textarea>
-  \`\`\`
+                component: `
+  To use the \`dda-textarea\` component, pass the following props:
+
+  \`\`\`html
+<dda-textarea
+    placeholder="Enter description"
+    label="Description"
+    max_characters="200"
+    value=""
+    helper_text="This is a helper text"
+    error_message=""
+    custom_class=""
+    component_mode=""
+    input_id="input"
+    aria_label="textarea"
+    onchange="console.log('changed')"
+    textarea_name="textarea-name"
+></dda-textarea>
+  \`\`\`
   `,
             },
         },
@@ -107,82 +102,61 @@ const Template = (args) => {
 };
 export const Default = Template.bind({});
 Default.args = {
-    label: 'Description',
     placeholder: 'Enter description',
+    label: 'Description',
     max_characters: 200,
     value: '',
-    input_id: 'input',
-    textarea_name: "textarea-name",
-    aria_label: 'textarea',
     helper_text: 'This is a helper text',
-    error_message: 'This is an error message',
-    show_info_icon: 'true',
-    validation_type: 'normal',
-    validation_id: '',
-    input_status: '',
-    enable_rich_editor: false,
+    error_message: '',
     custom_class: '',
     component_mode: '',
+    input_id: 'input',
+    aria_label: 'textarea',
     onchange: '',
+    textarea_name: "textarea-name",
 };
 export const WithErrorMessage = Template.bind({});
 WithErrorMessage.args = {
-    label: 'Description',
     placeholder: 'Enter description',
+    label: 'Description',
     max_characters: 200,
     value: '',
-    input_id: 'input',
-    textarea_name: "textarea-name",
-    aria_label: 'textarea',
-    helper_text: '',
     error_message: 'This is an error message',
-    show_info_icon: 'true',
     validation_type: 'error',
-    validation_id: '',
-    input_status: '',
-    enable_rich_editor: false,
     custom_class: '',
     component_mode: '',
+    input_id: 'input',
+    aria_label: 'textarea',
     onchange: '',
+    textarea_name: "textarea-name",
 };
 export const Disabled = Template.bind({});
 Disabled.args = {
-    label: 'Description',
     placeholder: 'Enter description',
+    label: 'Description',
     max_characters: 200,
     value: '',
-    input_id: 'input',
-    textarea_name: "textarea-name",
-    aria_label: 'textarea',
-    helper_text: 'This is a helper text',
-    error_message: '',
-    show_info_icon: 'true',
-    validation_type: '',
-    validation_id: '',
     input_status: 'disabled',
-    enable_rich_editor: false,
+    helper_text: 'This is a helper text',
     custom_class: '',
     component_mode: '',
+    input_id: 'input',
+    aria_label: 'textarea',
     onchange: '',
+    textarea_name: "textarea-name",
 };
 export const RichEditorEnabled = Template.bind({});
 RichEditorEnabled.args = {
-    label: 'Rich Text Editor',
     placeholder: 'Enter rich text',
+    label: 'Rich Text Editor',
     max_characters: 200,
     value: '',
-    input_id: 'input',
-    textarea_name: "textarea-name",
-    aria_label: 'textarea',
     helper_text: 'This is a helper text',
-    error_message: '',
-    show_info_icon: 'true',
-    validation_type: '',
-    validation_id: '',
-    input_status: '',
     enable_rich_editor: true,
     custom_class: '',
     component_mode: '',
+    input_id: 'input',
+    aria_label: 'textarea',
     onchange: '',
+    textarea_name: "textarea-name",
 };
-//# sourceMappingURL=dda-textarea.stories.js.map

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

@@ -1,130 +1,120 @@
-.dda-toggle-btn {
-  display: inline-flex;
-  align-items: flex-start;
-  cursor: pointer;
-  position: relative;
-  gap: 10px;
-}
-.dda-toggle-btn p{
-  margin: 0;
-}
-.dda-toggle-btn .toggle {
-  width: 35px;
-  height: 20px;
-  vertical-align: sub;
-  display: inline-block;
-  background: var(--dda-neutral-variant-90);
-  border-radius: 60px;
-  cursor: pointer;
-  margin: 0px;
-  position: relative;
-}
-.dda-toggle-btn input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-.dda-toggle-btn .toggle::after {
-  content: "";
-  position: absolute;
-  display: block;
-  /* -moz-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
-  -o-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
-  -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
-  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1); */
-  background: var(--dda-neutral-100);
-  height: 16px;
-  width: 16px;
-  top: 2px;
-  left: 2px;
-  border-radius: 60px;
-}
-.dda-toggle-btn input:checked~.toggle{
-  background: var(--dda-color-primary-40);
-  -webkit-box-shadow: 0px 0px 0px 3px var(--dda-primary-95);
-  -moz-box-shadow: 0px 0px 0px 3px var(--dda-primary-95);
-  box-shadow: 0px 0px 0px 3px var(--dda-primary-95);
-}
-.light-mode.dda-toggle-btn input:checked~.toggle{
-  background: var(--dda-primary-40);
-}
-.dda-toggle-btn input:checked~.toggle::after {
-  left: 17px;
-}
-
-.dda-toggle-sm .toggle{
-  width: 27px;
-  height: 16px;
-}
-.dda-toggle-sm .toggle::after{
-  width: 12px;
-  height: 12px;
-}
-.dda-toggle-sm input:checked~.toggle::after {
-  left: 13px;
-}
-
-.dda-toggle-md .toggle{
-  width: 35px;
-  height: 20px;
-}
-.dda-toggle-md .toggle::after{
-  height: 16px;
-  width: 16px;
-}
-.dda-toggle-md input:checked~.toggle::after {
-  left: 17px;
-}
-
-.dda-toggle-lg .toggle{
-  width: 45px;
-  height: 24px;
-}
-.dda-toggle-lg .toggle::after{
-  height: 20px;
-  width: 20px;
-}
-.dda-toggle-lg input:checked~.toggle::after {
-  left: 23px;
-}
-
-.toggle-title{
-  color: var(--dda-on-surface-0);
-  font-weight: var(--dda-fw-500);
-  display: block;
-}
-.light-mode .toggle-title{
-  color: var(--dda-neutral-0);
-}
-.toggle-supporting{
-  display: block;
-  color: var(--dda-on-surface-variant-30);
-}
-.light-mode .toggle-supporting{
-  color: var(--dda-neutral-variant-30);
-}
-.dda-toggle-sm .toggle-title, .dda-toggle-md .toggle-title{
-  font-size: var(--font-caption);
-}
-.dda-toggle-sm .toggle-supporting {
-  font-size: var(--dda-fs-label-lg);
-}
-.dda-toggle-lg .toggle-title {
-  font-size: var(--dda-fs-title-sm);
-}
-.dda-toggle-md .toggle-supporting,
-.dda-toggle-lg .toggle-supporting{
-  font-size: var(--font-caption);
-}
-
-
-@media (prefers-reduced-motion: no-preference) {
-  .dda-toggle-btn .toggle::after {
-    -moz-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
-    -o-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
-    -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
-    transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
-  } 
+.dda-toggle-btn {
+  display: inline-flex;
+  align-items: flex-start;
+  cursor: pointer;
+  position: relative;
+  gap: 10px;
+}
+.dda-toggle-btn p{
+  margin: 0;
+}
+.dda-toggle-btn .toggle {
+  width: 35px;
+  height: 20px;
+  vertical-align: sub;
+  display: inline-block;
+  background: var(--dda-neutral-variant-90);
+  border-radius: 60px;
+  cursor: pointer;
+  margin: 0px;
+  position: relative;
+}
+.dda-toggle-btn input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+.dda-toggle-btn .toggle::after {
+  content: "";
+  position: absolute;
+  display: block;
+  -moz-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
+  -o-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
+  -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
+  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
+  background: var(--dda-neutral-100);
+  height: 16px;
+  width: 16px;
+  top: 2px;
+  left: 2px;
+  border-radius: 60px;
+}
+.dda-toggle-btn input:checked~.toggle{
+  background: var(--dda-color-primary-40);
+  -webkit-box-shadow: 0px 0px 0px 3px var(--dda-primary-95);
+  -moz-box-shadow: 0px 0px 0px 3px var(--dda-primary-95);
+  box-shadow: 0px 0px 0px 3px var(--dda-primary-95);
+}
+.light-mode.dda-toggle-btn input:checked~.toggle{
+  background: var(--dda-primary-40);
+}
+.dda-toggle-btn input:checked~.toggle::after {
+  left: 17px;
+}
+
+.dda-toggle-sm .toggle{
+  width: 27px;
+  height: 16px;
+}
+.dda-toggle-sm .toggle::after{
+  width: 12px;
+  height: 12px;
+}
+.dda-toggle-sm input:checked~.toggle::after {
+  left: 13px;
+}
+
+.dda-toggle-md .toggle{
+  width: 35px;
+  height: 20px;
+}
+.dda-toggle-md .toggle::after{
+  height: 16px;
+  width: 16px;
+}
+.dda-toggle-md input:checked~.toggle::after {
+  left: 17px;
+}
+
+.dda-toggle-lg .toggle{
+  width: 45px;
+  height: 24px;
+}
+.dda-toggle-lg .toggle::after{
+  height: 20px;
+  width: 20px;
+}
+.dda-toggle-lg input:checked~.toggle::after {
+  left: 23px;
+}
+
+.toggle-title{
+  color: var(--dda-on-surface-0);
+  font-weight: var(--dda-fw-500);
+  display: block;
+}
+.light-mode .toggle-title{
+  color: var(--dda-neutral-0);
+}
+.toggle-supporting{
+  display: block;
+  color: var(--dda-on-surface-variant-30);
+}
+.light-mode .toggle-supporting{
+  color: var(--dda-neutral-variant-30);
+}
+.dda-toggle-sm .toggle-title, .dda-toggle-md .toggle-title{
+  font-size: var(--dda-fs-body-lg);
+}
+.dda-toggle-sm .toggle-supporting {
+  font-size: var(--dda-fs-label-lg);
+}
+.dda-toggle-lg .toggle-title {
+  font-size: var(--dda-fs-title-sm);
+}
+.dda-toggle-md .toggle-supporting,
+.dda-toggle-lg .toggle-supporting{
+  font-size: var(--dda-fs-body-lg);
 }

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

@@ -4,23 +4,23 @@ export class DdaToggle {
         this.custom_class = '';
     }
     render() {
-        const toggleClass = ['dda-toggle-btn', this.size ? `dda-toggle-${this.size}` : '', this.custom_class ? `${this.custom_class}` : '', this.component_mode]
-            .filter(Boolean)
-            .join(' ');
-        return (h(Host, { key: '6c80c0acd2c4743411b6de02663c8b2b4f3e4953' }, h("label", { key: 'eb945d26b4a02f6f52c2879709a78f4c35af6e0d', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '756b613958049e61c24a3e7d25fe1e6f0733bba2', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked, onChange: event => {
-                this.toggleChanged.emit(event);
-                this.onChanged.emit(event);
-            } }), h("span", { key: 'ac8b85c8cab1d456b46b5c2d02e9fa2c908582db', class: "toggle" }), h("p", { key: '3270d9ed3e3f6d6214b9a937f856d0225f92e8af' }, h("span", { key: '00aa61f8f21640f76bc224c85611bc43837b301f', class: "toggle-title" }, "Radio Button Title"), h("span", { key: '354f2f4b4aeb8279b514693c0110a5a91ca44ec7', class: "toggle-supporting" }, "Supporting Text")))));
+        const toggleClass = [
+            'dda-toggle-btn',
+            this.size ? `dda-toggle-${this.size}` : '',
+            this.custom_class ? `${this.custom_class}` : '',
+            this.component_mode,
+        ].filter(Boolean).join(' ');
+        return (h(Host, { key: 'b83f75e3b8c3d70e98018c951da5ea3ccc0c6602' }, h("label", { key: '72467061a3897dc32eab8640f67f93a4312a7bf1', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '1dd2b5c72ecc6c8ac253d08437f71363d9c6e372', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: '0d14580e223fc04916c7f5b91242e4aa37783228', class: "toggle" }), h("p", { key: '90916a148d933a1e4dbfe91568b4e6891e3bfa1f' }, h("span", { key: 'b75b05a7a391a97c703880b99ccccff53f1877f4', class: "toggle-title" }, "Radio Button Title"), h("span", { key: '2393937d711461dc0634e2cea807d16fb39da344', class: "toggle-supporting" }, "Supporting Text")))));
     }
     static get is() { return "dda-toggle"; }
     static get originalStyleUrls() {
         return {
-            "$": ["dda-toggle.css"]
+            "$": ["../../global/global.css", "dda-toggle.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["dda-toggle.css"]
+            "$": ["../../global/global.css", "dda-toggle.css"]
         };
     }
     static get properties() {
@@ -41,8 +41,8 @@ export class DdaToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
-                "reflect": false
+                "reflect": false,
+                "attribute": "checked"
             },
             "size": {
                 "type": "string",
@@ -60,8 +60,8 @@ export class DdaToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "custom_class": {
                 "type": "string",
@@ -79,8 +79,8 @@ export class DdaToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "group_name": {
@@ -99,8 +99,8 @@ export class DdaToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group_name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "group_name"
             },
             "input_id": {
                 "type": "string",
@@ -118,8 +118,8 @@ export class DdaToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input_id",
-                "reflect": false
+                "reflect": false,
+                "attribute": "input_id"
             },
             "component_mode": {
                 "type": "string",
@@ -137,8 +137,8 @@ export class DdaToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "aria_label": {
                 "type": "string",
@@ -156,43 +156,9 @@ export class DdaToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
             }
         };
     }
-    static get events() {
-        return [{
-                "method": "toggleChanged",
-                "name": "toggleChanged",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "onChanged",
-                "name": "onChanged",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
 }
-//# sourceMappingURL=dda-toggle.js.map

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

@@ -50,23 +50,23 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-toggle\` component, pass the following props:
-
-  \`\`\`html
-<dda-toggle
-    checked="false"
-    label_on="On"
-    label_off="Off"
-    size="md"
-    group_name="togglegroup1"
-    input_id="testId"
-    custom_class=""
-    component_mode=""
-    aria_label="toggle"
-    onchange="console.log('changed')"
-></dda-toggle>
-  \`\`\`
+                component: `
+  To use the \`dda-toggle\` component, pass the following props:
+
+  \`\`\`html
+<dda-toggle
+    checked="false"
+    label_on="On"
+    label_off="Off"
+    size="md"
+    group_name="togglegroup1"
+    input_id="testId"
+    custom_class=""
+    component_mode=""
+    aria_label="toggle"
+    onchange="console.log('changed')"
+></dda-toggle>
+  \`\`\`
   `,
             },
         },
@@ -106,4 +106,3 @@ Checked.args = {
     aria_label: 'toggle',
     onchange: '',
 };
-//# sourceMappingURL=dda-toggle.stories.js.map