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

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

@@ -0,0 +1,209 @@
+import { h, Host } from "@stencil/core";
+export class DdaUiCard {
+    constructor() {
+        this.type = 'default';
+        this.icon = '';
+        this.image = '';
+        this.maintitle = '';
+        this.subtitle = '';
+        this.link = '';
+        this.linktext = '';
+        this.linkicon = 'arrow_forward';
+    }
+    render() {
+        return (h(Host, { key: '23b67e77b8cb78795a684ad15030ac31918853e7' }, h("div", { key: 'abee006879a59559d7154c95c4d88ad1513c75b5', class: 'dda-card' }, h("div", { key: '33732334dafbc7bcaa4a0e24f972e8f04e62c46e', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: '626c85266899eeef3690113f51ff06f330f3cf60' }, !!this.icon && (h("span", { key: 'e6a6ddb2ba041b3942f63967b6cce2d618e1a4ba', class: 'dda-card-icon' }, h("i", { key: '340c651b6fbf945d22b9b6405d2077996dcea0e5', class: 'material-icons' }, this.icon))), !!this.image && (h("span", { key: 'aa79e723ca9995cf8e71d33e480418a77ab44e9d', class: 'dda-card-icon' }, h("img", { key: 'c366fdb9f184680b0f94f0f05e7c102f5cf5daeb', src: this.image, alt: this.maintitle }))), !!this.maintitle && h("h1", { key: 'ad686e57e270a8bd12bdb5a98e49e0918a460dfc', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: '57dcc9ea2918b7075cd329d8a37ef87ada70fd31', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: 'f823984df47c3e48570e76c1cd67804d622626ae', href: this.link, class: 'dda-card-link' }, this.linktext, ' ', this.linkicon && (h("span", { key: '5a41b73f4c7b40d15bfeb47e756eabe70ccd49a4' }, h("i", { key: '6be0795bcde440b7274b7bb1d2314f7d453b403c', class: 'material-icons' }, this.linkicon))))))), h("slot", { key: '83e3e779ff67cadae63c41f36f1862a68093d24c' })))));
+    }
+    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 properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'custom'",
+                    "resolved": "\"custom\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
+            },
+            "image": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image",
+                "defaultValue": "''"
+            },
+            "maintitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "maintitle",
+                "defaultValue": "''"
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subtitle",
+                "defaultValue": "''"
+            },
+            "link": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "link",
+                "defaultValue": "''"
+            },
+            "linktext": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "linktext",
+                "defaultValue": "''"
+            },
+            "linkicon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": 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": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/segmented-groups/dda-segmented-tabs/dda-segmented-tabs.css

@@ -1,52 +1,52 @@
-.dda-segmented-group {
-  display: inline-flex;
-  border: solid 1px var(--dda-surface-90);
-  border-radius: 8px;
-  overflow: hidden;
-}
-.light-mode.dda-segmented-group{
-  border: solid 1px var(--dda-neutral-90);
-}
-.dda-segmented-item {
-  display: flex;
-  height: 40px;
-  padding: 5px 16px;
-  border: transparent;
-  border-inline-start: solid 1px var(--dda-surface-90);
-  background-color: var(--dda-surface-100);
-  font-size: 16px;
-  color: var(--dda-on-surface-variant-30);
-  cursor: pointer;
-  align-items: center;
-}
-.light-mode .dda-segmented-item{
-  background-color: var(--dda-neutral-100);
-  color: var(--dda-neutral-variant-30);
-  border-inline-start: solid 1px var(--dda-neutral-90);
-}
-.dda-segmented-group .dda-segmented-item:first-child{
-  border: transparent;
-}
-.dda-segmented-group.square{
-  border-radius: 8px;
-}
-.dda-segmented-group.rounded{
-  border-radius: 40px;
-}
-.dda-segmented-item:hover {
-  color: var(--dda-color-primary-40);
-}
-.light-mode .dda-segmented-item:hover{
-  color: var(--dda-primary-40);
-}
-.dda-segmented-item.active {
-  background-color: var(--dda-color-primary-40);
-  color: var(--dda-surface-100);
-}
-.light-mode .dda-segmented-item.active {
-  background-color: var(--dda-primary-40);
-  color: var(--dda-neutral-100);
-}
-.dda-segmented-item i {
-  font-size: 18px;
+.dda-segmented-group {
+  display: inline-flex;
+  border: solid 1px var(--dda-surface-90);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.light-mode.dda-segmented-group{
+  border: solid 1px var(--dda-neutral-90);
+}
+.dda-segmented-item {
+  display: flex;
+  height: 40px;
+  padding: 5px 16px;
+  border: transparent;
+  border-inline-start: solid 1px var(--dda-surface-90);
+  background-color: var(--dda-surface-100);
+  font-size: 16px;
+  color: var(--dda-on-surface-variant-30);
+  cursor: pointer;
+  align-items: center;
+}
+.light-mode .dda-segmented-item{
+  background-color: var(--dda-neutral-100);
+  color: var(--dda-neutral-variant-30);
+  border-inline-start: solid 1px var(--dda-neutral-90);
+}
+.dda-segmented-group .dda-segmented-item:first-child{
+  border: transparent;
+}
+.dda-segmented-group.square{
+  border-radius: 8px;
+}
+.dda-segmented-group.rounded{
+  border-radius: 40px;
+}
+.dda-segmented-item:hover {
+  color: var(--dda-color-primary-40);
+}
+.light-mode .dda-segmented-item:hover{
+  color: var(--dda-primary-40);
+}
+.dda-segmented-item.active {
+  background-color: var(--dda-color-primary-40);
+  color: var(--dda-surface-100);
+}
+.light-mode .dda-segmented-item.active {
+  background-color: var(--dda-primary-40);
+  color: var(--dda-neutral-100);
+}
+.dda-segmented-item i {
+  font-size: 18px;
 }

package/dist/collection/components/segmented-groups/dda-segmented-tabs/dda-segmented-tabs.js

@@ -1,15 +1,39 @@
 import { h } from "@stencil/core";
 export class DdaSegmentedTabs {
     constructor() {
+        /** Index of the segment selected by default. Clamped to a valid item index. */
+        this.selected_index = 0;
+        /** F-004 repair: the currently-selected segment. Exactly one segment is
+         * selected at a time; this is what makes the component interactive at all. */
+        this.active_index = 0;
         this.parsedItems = [];
     }
     componentWillLoad() {
         this.parsedItems = JSON.parse(this.items);
+        this.active_index = this.clampIndex(this.selected_index);
+    }
+    clampIndex(index) {
+        if (!Array.isArray(this.parsedItems) || this.parsedItems.length === 0) {
+            return 0;
+        }
+        if (typeof index !== 'number' || index < 0 || index >= this.parsedItems.length) {
+            return 0;
+        }
+        return index;
+    }
+    selectSegment(index) {
+        if (index === this.active_index) {
+            return;
+        }
+        this.active_index = index;
+        this.segmentChange.emit(index);
     }
     render() {
-        return (h("div", { key: '07d69fcecdbf9ae2855605d12fe3ab9c121620f0', class: `dda-segmented-group ${this.custom_class} ${this.radius_type} ${this.component_mode}` }, this.parsedItems.map(item => (item.startsWith('fo') ?
-            h("button", { class: "dda-segmented-item" }, h("i", { class: "material-icons" }, item)) :
-            h("button", { class: "dda-segmented-item" }, item)))));
+        return (h("div", { key: '83b176643df1781211b5ec722d0c057002c6bc72', role: "group", "aria-label": this.aria_label, class: `dda-segmented-group ${this.custom_class} ${this.radius_type} ${this.component_mode}` }, this.parsedItems.map((item, index) => {
+            const isSelected = index === this.active_index;
+            const className = `dda-segmented-item${isSelected ? ' active' : ''}`;
+            return item.startsWith('fo') ? (h("button", { name: this.button_name, type: "button", class: className, "aria-pressed": isSelected ? 'true' : 'false', onClick: () => this.selectSegment(index) }, h("i", { class: "material-icons  material-symbols-outlined" }, item))) : (h("button", { name: this.button_name, type: "button", class: className, "aria-pressed": isSelected ? 'true' : 'false', onClick: () => this.selectSegment(index) }, item));
+        })));
     }
     static get is() { return "dda-segmented-tabs"; }
     static get originalStyleUrls() {
@@ -40,8 +64,8 @@ export class DdaSegmentedTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "items",
-                "reflect": false
+                "reflect": false,
+                "attribute": "items"
             },
             "radius_type": {
                 "type": "string",
@@ -59,8 +83,8 @@ export class DdaSegmentedTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "radius_type",
-                "reflect": false
+                "reflect": false,
+                "attribute": "radius_type"
             },
             "custom_class": {
                 "type": "string",
@@ -78,8 +102,8 @@ export class DdaSegmentedTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
-                "reflect": false
+                "reflect": false,
+                "attribute": "custom_class"
             },
             "component_mode": {
                 "type": "string",
@@ -97,10 +121,90 @@ export class DdaSegmentedTabs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
+            },
+            "button_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button_name"
+            },
+            "aria_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the group (applied as aria-label on the group container)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria_label"
+            },
+            "selected_index": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Index of the segment selected by default. Clamped to a valid item index."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected_index",
+                "defaultValue": "0"
             }
         };
     }
+    static get states() {
+        return {
+            "active_index": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "segmentChange",
+                "name": "segmentChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the newly-selected index whenever the selection changes."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
 }
-//# sourceMappingURL=dda-segmented-tabs.js.map

package/dist/collection/components/segmented-groups/dda-segmented-tabs/dda-segmented-tabs.stories.js

@@ -19,22 +19,43 @@ export default {
             control: { type: 'check' },
             options: ['light-mode'],
             description: 'Mode of the segmented group',
-        }
+        },
+        button_name: {
+            control: { type: 'text' },
+            description: 'Button name',
+        },
+        aria_label: {
+            control: { type: 'text' },
+            description: 'Accessible name for the group (applied as aria-label on the role="group" container)',
+        },
+        selected_index: {
+            control: { type: 'number' },
+            description: 'Index of the segment selected by default (clamped to a valid item index; defaults to 0)',
+        },
     },
     parameters: {
         docs: {
             description: {
-                component: `
-  To use the \`dda-segmented-tabs\` component, pass the following props:
-
-  \`\`\`html
-<dda-segmented-tabs
-    radius_type="square"
-    custom_class=""
-    component_mode=""
-    items='["All","Recent","Saved"]'
-></dda-segmented-tabs>
-  \`\`\`
+                component: `
+  Exactly one segment is selected at a time. Clicking a segment, or focusing it with
+  Tab and activating it with Enter or Space, selects it and fires \`segmentChange\`
+  with the newly-selected index. This is a group of mutually-exclusive toggle
+  buttons (\`role="group"\` + \`aria-pressed\`), not the WAI tabs pattern — it has no
+  associated tabpanels, so it does not claim \`role="tablist"\`/\`"tab"\`.
+
+  To use the \`dda-segmented-tabs\` component, pass the following props:
+
+  \`\`\`html
+<dda-segmented-tabs
+    radius_type="square"
+    custom_class=""
+    component_mode=""
+    items='["All","Recent","Saved"]'
+    button_name="button_name"
+    aria_label="Filter results"
+    selected_index="0"
+></dda-segmented-tabs>
+  \`\`\`
   `,
             },
         },
@@ -54,6 +75,9 @@ TextItems.args = {
     radius_type: 'square',
     custom_class: '',
     component_mode: '',
+    button_name: 'button',
+    aria_label: 'Filter results',
+    selected_index: 0,
 };
 export const IconItems = Template.bind({});
 IconItems.args = {
@@ -61,5 +85,7 @@ IconItems.args = {
     radius_type: 'square',
     custom_class: '',
     component_mode: '',
+    button_name: 'button',
+    aria_label: 'Text alignment',
+    selected_index: 0,
 };
-//# sourceMappingURL=dda-segmented-tabs.stories.js.map