@dubai-design-system/components-js 4.1.0 → 5.0.0

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

@@ -10,7 +10,7 @@ export class DdaToggle {
             this.custom_class ? `${this.custom_class}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '839197a1c33886efde1102208b257edb8420337f' }, h("label", { key: 'dd80b1c4a85b26160be117e834ae856f1aeb32fb', class: toggleClass, htmlFor: this.input_id }, h("input", { key: 'd50e8756c622434d899af99331220c1660c6e047', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: 'b17d0a6815bf807c3a68c6eaf917479c6918df9b', class: "toggle" }), h("p", { key: '903f6877dd279f7d3b409ec622ae68b7302f50f1' }, h("span", { key: '4932e23add5c57861cc86cc43342dee3baf36b6b', class: "toggle-title" }, "Radio Button Title"), h("span", { key: 'a3dbfee84de4c78d56ee5e053e8dfe296ce414db', class: "toggle-supporting" }, "Supporting Text")))));
+        return (h(Host, { key: 'f01e62cab63407de5a460bea59d60be7baef9b96' }, h("label", { key: '42494c1ace83b7b0af66116e6fa263f2abe4a647', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '77e61b283527b562bbac7b1577bb27aaab285913', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: '469818087720955164d61897c2d9e31a5d2f082c', class: "toggle" }), h("p", { key: 'a2866cc3ebfde7f3216b0713e725b085099be974' }, h("span", { key: 'd19a8c1a9cc7b252326dce41b0a3dd1577457825', class: "toggle-title" }, "Radio Button Title"), h("span", { key: '667b7febf89ff08e3749dbd95478120c3b4ff091', class: "toggle-supporting" }, "Supporting Text")))));
     }
     static get is() { return "dda-toggle"; }
     static get originalStyleUrls() {
@@ -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,10 +156,9 @@ export class DdaToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria_label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria_label"
             }
         };
     }
 }
-//# 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

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

@@ -1,131 +1,147 @@
-.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%;
-  right: 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%;
-  left: 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;
+.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;
+}
+/*
+ * F-011 (WCAG 1.4.13, 2.1.1): showing the tooltip only on :hover left it
+ * entirely unreachable by keyboard. :focus-within reveals it as soon as the
+ * slotted trigger (or anything inside the tooltip) is focused - matching
+ * `:hover`'s existing "hoverable" and "persistent" behaviour for free,
+ * since the box is a DOM descendant of this same container either way.
+ * Escape-driven dismissal (the third 1.4.13 sub-criterion, and the one
+ * this selector alone can't satisfy) is handled in dda-tooltip.tsx via the
+ * .dismissed class below.
+ */
+.dda-tooltip-container:hover .dda-tooltip-box,
+.dda-tooltip-container:focus-within .dda-tooltip-box {
+  visibility: visible;
+  opacity: 1;
+}
+
+.dda-tooltip-container.dismissed .dda-tooltip-box {
+  visibility: hidden !important;
+  opacity: 0 !important;
+}
+.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

@@ -3,9 +3,33 @@ export class DdaTooltip {
     constructor() {
         this.position = 'top'; // Default to top position
         this.custom_class = '';
+        // F-011 (WCAG 1.4.13 dismissible): Escape hides the tooltip without
+        // moving the pointer or focus. Losing hover/focus (mouseleave/focusout)
+        // resets it so the next hover or focus shows it again, instead of
+        // suppressing it permanently.
+        this.dismissed = false;
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Escape' || event.key === 'Esc') {
+                this.dismissed = true;
+            }
+        };
+        this.resetDismissed = () => {
+            if (this.dismissed)
+                this.dismissed = false;
+        };
+    }
+    connectedCallback() {
+        this.el.addEventListener('keydown', this.handleKeyDown);
+        this.el.addEventListener('focusout', this.resetDismissed);
+        this.el.addEventListener('mouseleave', this.resetDismissed);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('keydown', this.handleKeyDown);
+        this.el.removeEventListener('focusout', this.resetDismissed);
+        this.el.removeEventListener('mouseleave', this.resetDismissed);
     }
     render() {
-        return (h(Host, { key: '2e76a0b8025bfb097ccf11158856fa096a5a5afb' }, h("div", { key: '56613b3292abbbdac26074ddab4dabd7f1205aea', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode}` }, h("slot", { key: '0d2c18e043e166343f59f6b63c0a8f39c7a1d200' }), h("div", { key: '1e1c5909084485aa3080f17465d069d3d5c04a8e', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: '519de7fce1509bc964246b4ba94a12d659f2bfd9' }, this.title_text), h("p", { key: 'b36c1852805fe12e03329c215f7fb2b43e46137a' }, this.description)))));
+        return (h(Host, { key: '1cdf4f709c81572379fffdfb63832ce42345aceb' }, h("div", { key: '4a02d6eda15fd3e97b56b6eb6e58566164f250ec', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode} ${this.dismissed ? 'dismissed' : ''}` }, h("slot", { key: 'f18f7b1d729b310b8c5467c4766f675dfedaaea9' }), h("div", { key: 'b21175526d8510415920b09a0993b3bd92387046', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: '2571076616dcd823da28a14a9aa3c39b42ef6b1c' }, this.title_text), h("p", { key: '8d1c7abbc7fb5a2d66df13b5abb1a9280495ab07' }, this.description)))));
     }
     static get is() { return "dda-tooltip"; }
     static get originalStyleUrls() {
@@ -36,8 +60,8 @@ export class DdaTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "title_text",
-                "reflect": false
+                "reflect": false,
+                "attribute": "title_text"
             },
             "description": {
                 "type": "string",
@@ -55,8 +79,8 @@ export class DdaTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "description",
-                "reflect": false
+                "reflect": false,
+                "attribute": "description"
             },
             "position": {
                 "type": "string",
@@ -74,8 +98,8 @@ export class DdaTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": false,
+                "attribute": "position",
                 "defaultValue": "'top'"
             },
             "custom_class": {
@@ -94,8 +118,8 @@ export class DdaTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -114,10 +138,15 @@ export class DdaTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             }
         };
     }
+    static get states() {
+        return {
+            "dismissed": {}
+        };
+    }
+    static get elementRef() { return "el"; }
 }
-//# 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;
+}