@dubai-design-system/components-js 5.1.0 → 5.2.0

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

@@ -1 +1,71 @@
-import{t as a,p as d,H as e,d as s,h as t,c}from"./p-B4nkZ15I.js";const i=d(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.linkClick=s(this,"linkClick"),this.type="default",this.icon="",this.image="",this.maintitle="",this.subtitle="",this.link="",this.linktext="",this.linkicon="arrow_forward",this.heading_level=3}get headingTag(){const a=Math.round(Number(this.heading_level));return"h"+(Number.isFinite(a)?Math.min(6,Math.max(1,a)):3)}render(){const a=this.headingTag;return t(c,{key:"f2a0d78609b1432f94a712b2d69690ed10c422b3"},t("div",{key:"bc36fddf6be566d97d23530740e5de9f32bb192e",class:"dda-card"},t("div",{key:"55b2f3a35669305d0dcf5c3fe9bdd3dd70a444a1",class:"dda-card-body"},"custom"!==this.type&&t("div",{key:"e6298ad703d39c3ed69ab64070db7d2580529d33"},!!this.icon&&t("span",{key:"2f1b9f7570d5ab46f857cebb594a1d71cf83a341",class:"dda-card-icon"},t("i",{key:"efda1c1873e48cae86bbd9feb5a90c7529f3db49",class:"material-icons","aria-hidden":"true"},this.icon)),!!this.image&&t("span",{key:"802a4ca867e351b24af54b4da78ec12c2d18b890",class:"dda-card-icon"},t("img",{key:"ff6975cf36520a9c3ddbecc16252bcc0769a1597",src:this.image,alt:this.maintitle})),!!this.maintitle&&t(a,{key:"d769a32b303d689217aa77973804347fb3488b02",class:"dda-card-title"},this.maintitle),!!this.subtitle&&t("p",{key:"0bdaa58c5ea5db75c20c7b0031dad48ce7d1ed96",class:"dda-card-text-muted"},this.subtitle),!!this.link&&t("a",{key:"87d11b05cef8ab0b01de355d22b1ef9297a80302",href:this.link,class:"dda-card-link",onClick:a=>this.linkClick.emit(a)},this.linktext," ",this.linkicon&&t("span",{key:"8cb9e3c6e51769fca7fa47d22d61a98164209002"},t("i",{key:"ba556e79ad6176ee2b79097a78ad826d9c02ecee",class:"material-icons","aria-hidden":"true"},this.linkicon)))),t("slot",{key:"11921fac820a992ed35e0dab39bcd36a39b2244f"}))))}static get style(){return":host{display:block}"}},[260,"dda-ui-card",{type:[1],icon:[1],image:[1],maintitle:[1],subtitle:[1],link:[1],linktext:[1],linkicon:[1],heading_level:[2]}]);function b(){"undefined"!=typeof customElements&&["dda-ui-card"].forEach((d=>{"dda-ui-card"===d&&(customElements.get(a(d))||customElements.define(a(d),i))}))}b();const h=i,n=b;export{h as DdaUiCard,n as defineCustomElement}
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host, t as transformTag } from './index2.js';
+
+const ddaUiCardCss = () => `:host{display:block}`;
+
+const DdaUiCard$1 = /*@__PURE__*/ proxyCustomElement(class DdaUiCard extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.linkClick = createEvent(this, "linkClick", 7);
+        /** `default` renders the icon, image, title, subtitle and link from props before the slot; `custom` renders only the slot. */
+        this.type = 'default';
+        /** Material Icons name shown at the top of the card, e.g. `description`. */
+        this.icon = '';
+        /** URL of an image shown at the top of the card. Its alt text is `maintitle`. */
+        this.image = '';
+        /** Card title, rendered as a heading at `heading_level`. */
+        this.maintitle = '';
+        /** Muted text shown below the title. */
+        this.subtitle = '';
+        /** URL of the card link. The link shows only when this is set. */
+        this.link = '';
+        /** Text of the card link. */
+        this.linktext = '';
+        /** Material Icons name shown after the link text. Set it to an empty string to hide the icon. */
+        this.linkicon = 'arrow_forward';
+        /** Heading level (1–6) of the title; pick the level that fits the page outline. */
+        this.heading_level = 3;
+    }
+    // The title was always an <h1>, so a page of cards had many h1s.
+    // Clamp to a valid heading level; anything unparsable falls back to 3.
+    get headingTag() {
+        const level = Math.round(Number(this.heading_level));
+        return `h${Number.isFinite(level) ? Math.min(6, Math.max(1, level)) : 3}`;
+    }
+    render() {
+        const HeadingTag = this.headingTag;
+        return (h(Host, { key: '4657e8ea3f7a5782eff6d4d004afc15030a9d89d' }, h("div", { key: '929b59ee6a676e9ee95441907bea8d98a7f62bcb', class: 'dda-card' }, h("div", { key: 'c7a7a115aef102e726f3232bcc7c75cfac9b676c', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: '50e93eb07a7bf279af39d8af5536292b41fef9f8' }, !!this.icon && (h("span", { key: 'f449d9a299d8cb5a534277babe0e413c43b091af', class: 'dda-card-icon' }, h("i", { key: '5d51449ce164db38f3d6540e9fae2dbade609b10', class: 'material-icons', "aria-hidden": "true" }, this.icon))), !!this.image && (h("span", { key: '55d39ea5df2decaf84062e4149a8a690c34801f4', class: 'dda-card-icon' }, h("img", { key: '9cf6e418dbfd5a69f3b745abf57cd9e5ad3fcd54', src: this.image, alt: this.maintitle }))), !!this.maintitle && h(HeadingTag, { key: 'ba558f13bba45d63e1940fdf5bc3e8501ee3d2f0', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: 'a03f8484f9de87dd5de5df7d86ef16348f35544e', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: 'f64d0dc6f8940ef81a789a056fdb280bedf2b95e', href: this.link, class: 'dda-card-link', onClick: (event) => this.linkClick.emit(event) }, this.linktext, ' ', this.linkicon && (h("span", { key: '743465002d7738b4d8aa0145689c14e814f99ffe' }, h("i", { key: '6812c7e5e69512ea16a2a6a61f47990c4f80900c', class: 'material-icons', "aria-hidden": "true" }, this.linkicon))))))), h("slot", { key: '684fe104483ca674eb0ce801a484ca7307a39f48' })))));
+    }
+    static get style() { return ddaUiCardCss(); }
+}, [260, "dda-ui-card", {
+        "type": [1],
+        "icon": [1],
+        "image": [1],
+        "maintitle": [1],
+        "subtitle": [1],
+        "link": [1],
+        "linktext": [1],
+        "linkicon": [1],
+        "heading_level": [2]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dda-ui-card"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dda-ui-card":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), DdaUiCard$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1(DdaUiCard$1);
+
+const DdaUiCard = DdaUiCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DdaUiCard, defineCustomElement };

package/dist/components/dda-vertical-stepper.js

@@ -1 +1,72 @@
-import{t,p as e,H as s,h as r,c as a}from"./p-B4nkZ15I.js";const i=e(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.current_Step=0,this.custom_class="",this.parsedSteps=[]}componentWillLoad(){this.parseSteps()}parseSteps(){var t;try{const e=JSON.parse(null!==(t=this.steps)&&void 0!==t?t:"[]");this.parsedSteps=Array.isArray(e)?e:[]}catch(t){this.parsedSteps=[]}}render(){var t;const e=null!==(t=this.current_step)&&void 0!==t?t:this.current_Step;return r(a,{key:"35d930b7e0eef90b1f0c6e8dce9fa49065b4fb6e"},r("div",{key:"690ea598a073d296066e661d31a769802a5bcbdf",class:`${this.custom_class} ${this.component_mode} v-stepper-container`},this.parsedSteps.map(((t,s)=>r("div",{class:"v-step "+(s<=e?"active":"")},r("div",{class:"v-step-indicator"},r("div",{class:"icon"},r("i",{class:"material-icons"},t.icon))),r("div",{class:"v-step-content"},r("div",{class:"v-step-title"},t.title),r("div",{class:"v-step-subtitle"},t.subtitle),r("div",{class:"v-step-description"},t.description)),r("div",{class:"v-step-arrow"},r("i",{class:"material-icons  material-symbols-outlined"},"chevron_right")))))))}static get watchers(){return{steps:[{parseSteps:0}]}}static get style(){return'.v-stepper-container{display:flex;flex-direction:column;align-items:flex-start;width:100%}.v-step{display:flex;flex-wrap:wrap;position:relative;width:100%;background-color:transparent;border:solid 1px transparent;border-radius:16px}.v-step.active{background-color:var(--dda-surface-100);border:solid 1px var(--dda-color-primary-40);box-shadow:0px 10px 15px -3px rgba(16, 24, 40, 0.1)}.v-step .v-step-indicator{flex:0 0 auto;align-items:center;padding:15px;position:relative}.v-step .icon{width:30px;height:30px;background:var(--dda-surface-100);border-radius:30px;display:flex;justify-content:center;align-items:center;position:relative;z-index:2}.v-step-indicator::before{content:"";width:1px;height:100%;border-right:dashed 1px var(--dda-surface-variant-80);position:absolute;top:0px;left:50%;z-index:1;transform:translate(-50%, 0%)}.v-step.active .v-step-indicator::before{border-right:solid 1px var(--dda-color-primary-40)}.v-step.active .v-step-indicator::after{content:"";width:1px;height:30px;border-right:solid 1px var(--dda-color-primary-40);position:absolute;top:100%;left:50%;z-index:2;transform:translate(-50%, 0%)}.v-step .icon i{font-size:24px;color:var(--dda-on-surface-variant-30)}.v-step.active .icon i{color:var(--dda-color-primary-40)}.v-step .v-step-content{padding:15px 15px 15px 0;display:flex;flex-direction:column;flex:1}.v-step .v-step-title{font-size:18px;font-weight:var(--dda-fw-500)}.v-step .v-step-subtitle{font-size:14px;color:var(--dda-color-primary-40)}.v-step .v-step-description{font-size:14px;color:var(--dda-on-surface-variant-30)}.v-step-arrow{padding:15px;position:relative}.v-step-arrow i{position:absolute;left:5px;top:50%;transform:translate(0%, -50%);color:var(--dda-on-surface-variant-30)}'}},[0,"dda-vertical-stepper",{steps:[1],current_step:[2],current_Step:[2,"current_-step"],custom_class:[1],component_mode:[1],parsedSteps:[32]},void 0,{steps:[{parseSteps:0}]}]);function o(){"undefined"!=typeof customElements&&["dda-vertical-stepper"].forEach((e=>{"dda-vertical-stepper"===e&&(customElements.get(t(e))||customElements.define(t(e),i))}))}o();const p=i,n=o;export{p as DdaVerticalStepper,n as defineCustomElement}
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './index2.js';
+
+const ddaVerticalStepperCss = () => `.v-stepper-container{display:flex;flex-direction:column;align-items:flex-start;width:100%}.v-step{display:flex;flex-wrap:wrap;position:relative;width:100%;background-color:transparent;border:solid 1px transparent;border-radius:16px}.v-step.active{background-color:var(--dda-surface-100);border:solid 1px var(--dda-color-primary-40);box-shadow:0px 10px 15px -3px rgba(16, 24, 40, 0.1)}.v-step .v-step-indicator{flex:0 0 auto;align-items:center;padding:15px;position:relative}.v-step .icon{width:30px;height:30px;background:var(--dda-surface-100);border-radius:30px;display:flex;justify-content:center;align-items:center;position:relative;z-index:2}.v-step-indicator::before{content:"";width:1px;height:100%;border-right:dashed 1px var(--dda-surface-variant-80);position:absolute;top:0px;left:50%;z-index:1;transform:translate(-50%, 0%)}.v-step.active .v-step-indicator::before{border-right:solid 1px var(--dda-color-primary-40)}.v-step.active .v-step-indicator::after{content:"";width:1px;height:30px;border-right:solid 1px var(--dda-color-primary-40);position:absolute;top:100%;left:50%;z-index:2;transform:translate(-50%, 0%)}.v-step .icon i{font-size:24px;color:var(--dda-on-surface-variant-30)}.v-step.active .icon i{color:var(--dda-color-primary-40)}.v-step .v-step-content{padding:15px 15px 15px 0;display:flex;flex-direction:column;flex:1}.v-step .v-step-title{font-size:18px;font-weight:var(--dda-fw-500)}.v-step .v-step-subtitle{font-size:14px;color:var(--dda-color-primary-40)}.v-step .v-step-description{font-size:14px;color:var(--dda-on-surface-variant-30)}.v-step-arrow{padding:15px;position:relative}.v-step-arrow i{position:absolute;left:5px;top:50%;transform:translate(0%, -50%);color:var(--dda-on-surface-variant-30)}`;
+
+const DdaVerticalStepper$1 = /*@__PURE__*/ proxyCustomElement(class DdaVerticalStepper extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /** @deprecated Use `current_step`. Its attribute is `current_-step`, so it never worked in HTML. */
+        this.current_Step = 0;
+        /** Extra CSS classes added to the stepper container. */
+        this.custom_class = '';
+        this.parsedSteps = [];
+    }
+    componentWillLoad() {
+        this.parseSteps();
+    }
+    /** Re-parses `steps` when it changes after load. A missing or invalid value renders no steps. */
+    parseSteps() {
+        var _a;
+        try {
+            const steps = JSON.parse((_a = this.steps) !== null && _a !== void 0 ? _a : '[]');
+            this.parsedSteps = Array.isArray(steps) ? steps : [];
+        }
+        catch (_b) {
+            this.parsedSteps = [];
+        }
+    }
+    render() {
+        var _a;
+        const current = (_a = this.current_step) !== null && _a !== void 0 ? _a : this.current_Step;
+        return (h(Host, { key: '65de2bf7a859c1deb216c9042031cde73378e622' }, h("div", { key: '38cd1783a7f3b5ba036aebace4fd3ce86b34a978', class: `${this.custom_class} ${this.component_mode} v-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `v-step ${index <= current ? 'active' : ''}` }, h("div", { class: "v-step-indicator" }, h("div", { class: "icon" }, h("i", { class: `material-icons` }, step.icon))), h("div", { class: "v-step-content" }, h("div", { class: "v-step-title" }, step.title), h("div", { class: "v-step-subtitle" }, step.subtitle), h("div", { class: "v-step-description" }, step.description)), h("div", { class: "v-step-arrow" }, h("i", { class: "material-icons  material-symbols-outlined" }, "chevron_right"))))))));
+    }
+    static get watchers() { return {
+        "steps": [{
+                "parseSteps": 0
+            }]
+    }; }
+    static get style() { return ddaVerticalStepperCss(); }
+}, [0, "dda-vertical-stepper", {
+        "steps": [1],
+        "current_step": [2],
+        "current_Step": [2, "current_-step"],
+        "custom_class": [1],
+        "component_mode": [1],
+        "parsedSteps": [32]
+    }, undefined, {
+        "steps": [{
+                "parseSteps": 0
+            }]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dda-vertical-stepper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dda-vertical-stepper":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), DdaVerticalStepper$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1(DdaVerticalStepper$1);
+
+const DdaVerticalStepper = DdaVerticalStepper$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DdaVerticalStepper, defineCustomElement };

package/dist/components/index.js

@@ -1 +1,34 @@
-export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-B4nkZ15I.js";function t(t,s,e){return(t||"")+(s?" "+s:"")+(e?" "+e:"")}function e(t){const s=document.documentElement;for(const[e,n]of Object.entries(t.colors))s.style.setProperty("--"+e,n);t.fontFamily&&s.style.setProperty("--font-family-main",t.fontFamily.main.join(", "))}export{e as applyTheme,t as format}
+import { g as globalScripts } from './index2.js';
+export { a as getAssetPath, r as render, s as setAssetPath, b as setNonce, c as setPlatformOptions } from './index2.js';
+
+function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+
+function applyTheme(theme) {
+    const root = document.documentElement;
+  
+    // Apply colors
+    for (const [key, value] of Object.entries(theme.colors)) {
+      root.style.setProperty(`--${key}`, value);
+    }
+  
+    // Apply font families
+    if (theme.fontFamily) {
+      root.style.setProperty('--font-family-main', theme.fontFamily.main.join(', '));
+    }
+  }
+
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+
+globalScripts();
+
+export { applyTheme, format };