@salla.sa/twilight-components 2.14.393 → 2.14.394

package/dist/components/salla-count-down2.js

@@ -1,4 +1,274 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as t,proxyCustomElement as s,HTMLElement as e,h as i,Host as n}from"@stencil/core/internal/client";import{d as o}from"./salla-button2.js";const a=s(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.size="md",this.color="dark",this.digits="auto",this.autoSegments=!1,this.daysLabel=salla.lang.getWithDefault("pages.checkout.day","يوم"),this.hoursLabel=salla.lang.getWithDefault("pages.checkout.hour","ساعة"),this.minutesLabel=salla.lang.getWithDefault("pages.checkout.minute","دقيقة"),this.secondsLabel=salla.lang.getWithDefault("pages.checkout.second","ثانية"),this.endLabel=salla.lang.getWithDefault("pages.checkout.offer_ended","انتهت مدة العرض"),this.invalidDate=salla.lang.getWithDefault("blocks.buy_as_gift.incorrect_date","الرجاء إدخال الموعد بشكل صحيح"),this.offerEnded=!1,this.showDays=!0,this.showHours=!0,this.days=this.number(0),this.hours=this.number(0),this.minutes=this.number(0),this.seconds=this.number(0),salla.lang.onLoaded((()=>{this.daysLabel=salla.lang.getWithDefault("pages.checkout.day","يوم"),this.hoursLabel=salla.lang.getWithDefault("pages.checkout.hour","ساعة"),this.minutesLabel=salla.lang.getWithDefault("pages.checkout.minute","دقيقة"),this.invalidDate=salla.lang.getWithDefault("blocks.buy_as_gift.incorrect_date","الرجاء إدخال الموعد بشكل صحيح"),this.secondsLabel=salla.lang.getWithDefault("pages.checkout.second","ثانية"),this.endLabel=salla.lang.getWithDefault("pages.checkout.offer_ended","انتهت مدة العرض")})),this.date&&this.isValidDate(this.date)&&this.startCountDown()}async endCountDown(){clearInterval(this.countInterval),this.offerEnded=!0,this.days=this.number(0),this.hours=this.number(0),this.minutes=this.number(0),this.seconds=this.number(0)}componentWillLoad(){if("string"==typeof this.preOrder)try{this.normalizedPreOrder=JSON.parse(this.preOrder)}catch{this.normalizedPreOrder=void 0}else this.normalizedPreOrder=this.preOrder;this.normalizedPreOrder?.end_date&&(this.date=this.normalizedPreOrder.end_date,this.date&&this.isValidDate(this.date)&&this.startCountDown())}normalizeDate(t){const s=t.match(/^(\d{1,2})-(\d{1,2})-(\d{4}),(\d{1,2}):(\d{2}):(\d{2})\s*(am|pm)$/i);if(s){const[,t,e,i,n,o,a,h]=s;let l=parseInt(n,10);"pm"===h.toLowerCase()&&l<12&&(l+=12),"am"===h.toLowerCase()&&12===l&&(l=0);const r=String(l).padStart(2,"0");return`${i}-${String(t).padStart(2,"0")}-${String(e).padStart(2,"0")} ${r}:${o}:${a}`}return t}isValidDate(t){const s=this.normalizeDate(t);let e,i=s.includes("-"),n=s.split(" ");return e=i?n[0].replace(/-/g,"/"):n[0],!isNaN(Date.parse(e))}number(t){return salla.helpers.number(t,"en"===this.digits)}startCountDown(){const t=this.normalizeDate(this.date),s=t.includes("-"),e=this.endOfDay||1===t.split(" ").length;let i;if(s){const s=e?`${t.split(" ")[0]}T23:59:59+03:00`:`${t.replace(" ","T")}+03:00`;i=new Date(s).getTime()}else{const s=new Date(t);e&&s.setHours(23,59,59,999),i=s.getTime()}const n=()=>{const t=i-Date.now(),s=Math.floor(t/864e5),e=Math.floor(t%864e5/36e5);this.days=this.number(s),this.hours=this.number(e),this.minutes=this.number(Math.floor(t%36e5/6e4)),this.seconds=this.number(Math.floor(t%6e4/1e3)),this.autoSegments&&(this.showDays=s>0,this.showHours=s>0||e>0),t<0&&this.endCountDown()};this.countInterval=setInterval(n,1e3),n()}renderCountDown(){const t=this.boxTheme?`var(--color-${this.boxTheme})`:this.boxColor,s=this.boxed&&t?{backgroundColor:t}:void 0;return i("ul",{class:`s-count-down-list ${this.boxed?"s-count-down-boxed":""} ${this.offerEnded?"s-count-down-ended":""} s-count-down-${this.size} s-count-down-${this.color}`,style:this.listPadding?{paddingLeft:this.listPadding,paddingRight:this.listPadding}:void 0},i("li",{class:"s-count-down-item",style:s},i("div",{class:"s-count-down-item-value"},this.seconds),this.labeled&&i("div",{class:"s-count-down-item-label"},this.secondsLabel)),i("li",{class:"s-count-down-item",style:s},i("div",{class:"s-count-down-item-value"},this.minutes),this.labeled&&i("div",{class:"s-count-down-item-label"},this.minutesLabel)),(!this.autoSegments||this.showHours)&&i("li",{class:"s-count-down-item",style:s},i("div",{class:"s-count-down-item-value"},this.hours),this.labeled&&i("div",{class:"s-count-down-item-label"},this.hoursLabel)),(!this.autoSegments||this.showDays)&&i("li",{class:"s-count-down-item",style:s},i("div",{class:"s-count-down-item-value"},this.days),this.labeled&&i("div",{class:"s-count-down-item-label"},this.daysLabel)))}renderInvalidDate(){return i("div",{class:"s-count-down-text-center"},this.invalidDate)}renderOfferEnded(){return i("div",{class:"s-count-down-end-text"},this.endText?this.endText:this.endLabel)}renderPreOrderToBeAvailableOn(){return this.normalizedPreOrder?.availability_date&&this.isValidDate(this.normalizedPreOrder?.availability_date)?i("div",{class:"s-count-down-info-message"},i("i",{class:"sicon-info"}),i("span",null,salla.lang.getWithDefault("pages.products.expected_to_be","متوقَّع توفُّره بتاريخ:")),i("span",null,new Date(this.normalizedPreOrder?.availability_date).toLocaleDateString(salla.lang.locale,{weekday:"long",year:"numeric",month:"long",day:"numeric"}))):null}renderPreOrderCountDown(){return this.normalizedPreOrder?.activate_countdown?i("div",{class:"s-count-down-pre-order-container"},i("p",{class:"text-sm "},salla.lang.getWithDefault("pages.products.pre_order_ends_in","ينتهي الطلب المسبق خلال:")),this.renderCountDown()):null}renderPreOrder(){return i("div",null,"object"==typeof this.normalizedPreOrder&&this.normalizedPreOrder?.availability_date&&this.renderPreOrderToBeAvailableOn(),this.renderPreOrderCountDown())}renderPrefixText(){return this.prefixText?i("span",{class:"s-count-down-prefix-text"},this.prefixText):null}renderButton(){return this.withButton&&this.buttonText?i("salla-button",{color:"primary",size:"medium",href:this.buttonHref},this.buttonIcon?i("i",{class:this.buttonIcon}):null,i("span",null,this.buttonText)):null}renderContent(){return this.date?this.isValidDate(this.date)?this.preOrder?this.renderPreOrder():this.renderCountDown():this.renderInvalidDate():null}render(){return i(n,{key:"dbce8a84197d35634e2f29f7c5ae664eed9bcfce",class:`s-count-down-wrapper ${this.preOrder&&this.isValidDate(this.date)?"s-count-down-pre-order":""} ${this.horizontal?"s-count-down-horizontal":""} ${this.withButton?"s-count-down-with-button":""} ${this.offerEnded?"s-count-down-ended":""}`},this.renderPrefixText(),this.renderContent(),this.offerEnded&&this.renderOfferEnded(),this.renderButton())}static get style(){return".s-count-down-horizontal{background-color:rgba(0, 0, 0, 0.06);background-color:color-mix(in srgb, var(--color-primary) 10%, transparent)}"}},[0,"salla-count-down",{date:[1],preOrder:[1,"pre-order"],horizontal:[4],withButton:[4,"with-button"],prefixText:[1,"prefix-text"],buttonHref:[1,"button-href"],buttonText:[1,"button-text"],buttonIcon:[1,"button-icon"],boxed:[4],size:[1],color:[1],labeled:[4],endText:[1,"end-text"],boxColor:[1,"box-color"],boxTheme:[1,"box-theme"],listPadding:[1,"list-padding"],digits:[1],endOfDay:[4,"end-of-day"],autoSegments:[4,"auto-segments"],daysLabel:[32],hoursLabel:[32],minutesLabel:[32],secondsLabel:[32],endLabel:[32],invalidDate:[32],offerEnded:[32],countInterval:[32],days:[32],hours:[32],minutes:[32],seconds:[32],showDays:[32],showHours:[32],endCountDown:[64]}]);function h(){"undefined"!=typeof customElements&&["salla-count-down","salla-button"].forEach((s=>{switch(s){case"salla-count-down":customElements.get(t(s))||customElements.define(t(s),a);break;case"salla-button":customElements.get(t(s))||o()}}))}h();export{a as S,h as d}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './salla-button2.js';
+
+const sallaCountDownCss = ".s-count-down-horizontal{background-color:rgba(0, 0, 0, 0.06);background-color:color-mix(in srgb, var(--color-primary) 10%, transparent)}";
+
+const SallaCountDown = /*@__PURE__*/ proxyCustomElement(class SallaCountDown extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * The size of the count down
+         * */
+        this.size = 'md';
+        /**
+         * The color of the count down
+         * */
+        this.color = 'dark';
+        /**
+         * The digits lang to show in the count down
+         * */
+        this.digits = 'auto';
+        /**
+         * If true, hides days segment when days = 0, and hides hours segment when both days and hours = 0.
+         * Matches salla-timer behaviour. Off by default for backward compatibility.
+         * */
+        this.autoSegments = false;
+        this.daysLabel = salla.lang.getWithDefault('pages.checkout.day', 'يوم');
+        this.hoursLabel = salla.lang.getWithDefault('pages.checkout.hour', 'ساعة');
+        this.minutesLabel = salla.lang.getWithDefault('pages.checkout.minute', 'دقيقة');
+        this.secondsLabel = salla.lang.getWithDefault('pages.checkout.second', 'ثانية');
+        this.endLabel = salla.lang.getWithDefault('pages.checkout.offer_ended', 'انتهت مدة العرض');
+        this.invalidDate = salla.lang.getWithDefault('blocks.buy_as_gift.incorrect_date', 'الرجاء إدخال الموعد بشكل صحيح');
+        this.offerEnded = false;
+        this.showDays = true;
+        this.showHours = true;
+        this.days = this.number(0);
+        this.hours = this.number(0);
+        this.minutes = this.number(0);
+        this.seconds = this.number(0);
+        salla.lang.onLoaded(() => {
+            this.daysLabel = salla.lang.getWithDefault('pages.checkout.day', 'يوم');
+            this.hoursLabel = salla.lang.getWithDefault('pages.checkout.hour', 'ساعة');
+            this.minutesLabel = salla.lang.getWithDefault('pages.checkout.minute', 'دقيقة');
+            this.invalidDate = salla.lang.getWithDefault('blocks.buy_as_gift.incorrect_date', 'الرجاء إدخال الموعد بشكل صحيح');
+            this.secondsLabel = salla.lang.getWithDefault('pages.checkout.second', 'ثانية');
+            this.endLabel = salla.lang.getWithDefault('pages.checkout.offer_ended', 'انتهت مدة العرض');
+        });
+        if (this.date && this.isValidDate(this.date)) {
+            this.startCountDown();
+        }
+    }
+    /**
+     * End the count down
+     * */
+    async endCountDown() {
+        clearInterval(this.countInterval);
+        this.offerEnded = true;
+        this.days = this.number(0);
+        this.hours = this.number(0);
+        this.minutes = this.number(0);
+        this.seconds = this.number(0);
+    }
+    componentWillLoad() {
+        if (typeof this.preOrder === 'string') {
+            try {
+                this.normalizedPreOrder = JSON.parse(this.preOrder);
+            }
+            catch {
+                this.normalizedPreOrder = undefined;
+            }
+        }
+        else {
+            this.normalizedPreOrder = this.preOrder;
+        }
+        if (this.normalizedPreOrder?.end_date) {
+            this.date = this.normalizedPreOrder.end_date;
+            if (this.date && this.isValidDate(this.date)) {
+                this.startCountDown();
+            }
+        }
+    }
+    /**
+     * Normalize non-standard date formats into a consistently parseable string.
+     * Handles formats like "MM-DD-YYYY,HH:mm:ss am/pm" by converting to
+     * "MM/DD/YYYY HH:mm:ss am/pm".
+     */
+    normalizeDate(date) {
+        // Match "MM-DD-YYYY,HH:mm:ss am/pm" pattern (comma between date and time, am/pm suffix)
+        const match = date.match(/^(\d{1,2})-(\d{1,2})-(\d{4}),(\d{1,2}):(\d{2}):(\d{2})\s*(am|pm)$/i);
+        if (match) {
+            const [, month, day, year, rawHour, min, sec, period] = match;
+            let hour = parseInt(rawHour, 10);
+            if (period.toLowerCase() === 'pm' && hour < 12)
+                hour += 12;
+            if (period.toLowerCase() === 'am' && hour === 12)
+                hour = 0;
+            const hh = String(hour).padStart(2, '0');
+            const mm = String(month).padStart(2, '0');
+            const dd = String(day).padStart(2, '0');
+            return `${year}-${mm}-${dd} ${hh}:${min}:${sec}`;
+        }
+        return date;
+    }
+    isValidDate(date) {
+        const normalized = this.normalizeDate(date);
+        let dateHasDashes = normalized.includes('-'), dateParts = normalized.split(' '), testedDate;
+        if (dateHasDashes) {
+            testedDate = dateParts[0].replace(/-/g, '/');
+        }
+        else {
+            testedDate = dateParts[0];
+        }
+        return !isNaN(Date.parse(testedDate));
+    }
+    number(digit) {
+        return salla.helpers.number(digit, this.digits === 'en');
+    }
+    startCountDown() {
+        const normalized = this.normalizeDate(this.date);
+        const isIsoFormat = normalized.includes('-');
+        const isDateOnly = this.endOfDay || normalized.split(' ').length === 1;
+        let countDownTime;
+        if (isIsoFormat) {
+            // Backend KSA date — parse as UTC+3 explicitly
+            const dateStr = isDateOnly
+                ? `${normalized.split(' ')[0]}T23:59:59+03:00`
+                : `${normalized.replace(' ', 'T')}+03:00`;
+            countDownTime = new Date(dateStr).getTime();
+        }
+        else {
+            // "MMM DD, YYYY HH:mm:ss" or "MM/DD/YYYY HH:mm:ss am/pm" format
+            const countDownDate = new Date(normalized);
+            if (isDateOnly) {
+                countDownDate.setHours(23, 59, 59, 999);
+            }
+            countDownTime = countDownDate.getTime();
+        }
+        const tick = () => {
+            const distance = countDownTime - Date.now();
+            const dRaw = Math.floor(distance / (1000 * 60 * 60 * 24));
+            const hRaw = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            this.days = this.number(dRaw);
+            this.hours = this.number(hRaw);
+            this.minutes = this.number(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)));
+            this.seconds = this.number(Math.floor((distance % (1000 * 60)) / 1000));
+            if (this.autoSegments) {
+                this.showDays = dRaw > 0;
+                this.showHours = dRaw > 0 || hRaw > 0;
+            }
+            if (distance < 0) {
+                this.endCountDown();
+            }
+        };
+        this.countInterval = setInterval(tick, 1000);
+        tick();
+    }
+    renderCountDown() {
+        const listStyle = this.listPadding ? { paddingLeft: this.listPadding, paddingRight: this.listPadding } : undefined;
+        const resolvedBoxColor = this.boxTheme ? `var(--color-${this.boxTheme})` : this.boxColor;
+        const boxStyle = this.boxed && resolvedBoxColor ? { backgroundColor: resolvedBoxColor } : undefined;
+        return (h("ul", { class: `s-count-down-list ${this.boxed ? 's-count-down-boxed' : ''} ${this.offerEnded ? 's-count-down-ended' : ''} s-count-down-${this.size} s-count-down-${this.color}`, style: listStyle }, h("li", { class: "s-count-down-item", style: boxStyle }, h("div", { class: "s-count-down-item-value" }, this.seconds), this.labeled && h("div", { class: "s-count-down-item-label" }, this.secondsLabel)), h("li", { class: "s-count-down-item", style: boxStyle }, h("div", { class: "s-count-down-item-value" }, this.minutes), this.labeled && h("div", { class: "s-count-down-item-label" }, this.minutesLabel)), (!this.autoSegments || this.showHours) && (h("li", { class: "s-count-down-item", style: boxStyle }, h("div", { class: "s-count-down-item-value" }, this.hours), this.labeled && h("div", { class: "s-count-down-item-label" }, this.hoursLabel))), (!this.autoSegments || this.showDays) && (h("li", { class: "s-count-down-item", style: boxStyle }, h("div", { class: "s-count-down-item-value" }, this.days), this.labeled && h("div", { class: "s-count-down-item-label" }, this.daysLabel)))));
+    }
+    renderInvalidDate() {
+        return h("div", { class: "s-count-down-text-center" }, this.invalidDate);
+    }
+    renderOfferEnded() {
+        return h("div", { class: "s-count-down-end-text" }, !!this.endText ? this.endText : this.endLabel);
+    }
+    renderPreOrderToBeAvailableOn() {
+        if (!this.normalizedPreOrder?.availability_date ||
+            !this.isValidDate(this.normalizedPreOrder?.availability_date))
+            return null;
+        return (h("div", { class: "s-count-down-info-message" }, h("i", { class: "sicon-info" }), h("span", null, salla.lang.getWithDefault('pages.products.expected_to_be', 'متوقَّع توفُّره بتاريخ:')), h("span", null, new Date(this.normalizedPreOrder?.availability_date).toLocaleDateString(salla.lang.locale, {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        }))));
+    }
+    renderPreOrderCountDown() {
+        if (!this.normalizedPreOrder?.activate_countdown)
+            return null;
+        return (h("div", { class: "s-count-down-pre-order-container" }, h("p", { class: "text-sm " }, salla.lang.getWithDefault('pages.products.pre_order_ends_in', 'ينتهي الطلب المسبق خلال:')), this.renderCountDown()));
+    }
+    renderPreOrder() {
+        return (h("div", null, typeof this.normalizedPreOrder === 'object' &&
+            this.normalizedPreOrder?.availability_date &&
+            this.renderPreOrderToBeAvailableOn(), this.renderPreOrderCountDown()));
+    }
+    renderPrefixText() {
+        if (!this.prefixText)
+            return null;
+        return h("span", { class: "s-count-down-prefix-text" }, this.prefixText);
+    }
+    renderButton() {
+        if (!this.withButton || !this.buttonText)
+            return null;
+        return h("salla-button", { color: "primary", size: "medium", href: this.buttonHref }, this.buttonIcon ? h("i", { class: this.buttonIcon }) : null, h("span", null, this.buttonText));
+    }
+    renderContent() {
+        if (!this.date)
+            return null;
+        if (!this.isValidDate(this.date)) {
+            return this.renderInvalidDate();
+        }
+        if (this.preOrder) {
+            return this.renderPreOrder();
+        }
+        return this.renderCountDown();
+    }
+    render() {
+        return (h(Host, { key: 'dbce8a84197d35634e2f29f7c5ae664eed9bcfce', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''} ${this.offerEnded ? 's-count-down-ended' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
+    }
+    static get style() { return sallaCountDownCss; }
+}, [0, "salla-count-down", {
+        "date": [1],
+        "preOrder": [1, "pre-order"],
+        "horizontal": [4],
+        "withButton": [4, "with-button"],
+        "prefixText": [1, "prefix-text"],
+        "buttonHref": [1, "button-href"],
+        "buttonText": [1, "button-text"],
+        "buttonIcon": [1, "button-icon"],
+        "boxed": [4],
+        "size": [1],
+        "color": [1],
+        "labeled": [4],
+        "endText": [1, "end-text"],
+        "boxColor": [1, "box-color"],
+        "boxTheme": [1, "box-theme"],
+        "listPadding": [1, "list-padding"],
+        "digits": [1],
+        "endOfDay": [4, "end-of-day"],
+        "autoSegments": [4, "auto-segments"],
+        "daysLabel": [32],
+        "hoursLabel": [32],
+        "minutesLabel": [32],
+        "secondsLabel": [32],
+        "endLabel": [32],
+        "invalidDate": [32],
+        "offerEnded": [32],
+        "countInterval": [32],
+        "days": [32],
+        "hours": [32],
+        "minutes": [32],
+        "seconds": [32],
+        "showDays": [32],
+        "showHours": [32],
+        "endCountDown": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-count-down", "salla-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-count-down":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaCountDown);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaCountDown as S, defineCustomElement as d };

package/dist/components/salla-custom-fields.js

@@ -1,4 +1,178 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as e,HTMLElement as l,createEvent as t,h as i}from"@stencil/core/internal/client";import{C as a}from"./camera.js";import{F as d}from"./interfaces.js";import{d as o}from"./salla-button2.js";import{d as r}from"./salla-file-upload2.js";const n=e(class extends l{constructor(s){super(),!1!==s&&this.__registerHost(),this.fieldChanged=t(this,"fieldChanged",7),this.fileUploaded=t(this,"fileUploaded",7),this.isEditable=!0,this.fieldErrors={},this.isSubmitting=!1}get dragAndDropText(){return salla.lang.get("common.uploader.drag_and_drop")}get browseText(){return salla.lang.get("common.uploader.browse")}get saveButtonText(){return salla.lang.get("common.elements.save")}async setFields(s){this.parsedFields=s}async getFieldValues(){return this.parsedFields?.reduce(((s,e)=>(s[`custom_fields[${e.id}]`]=e.value,s)),{})||{}}async validateFields(){if(!this.parsedFields)return!0;const s=this.parsedFields.reduce(((s,e)=>(!e.required||e.value&&""!==e.value||(s[""+e.id]=e.label+" is required"),s)),{});return this.fieldErrors=s,0===Object.keys(s).length}handleFieldChange(s,e){const l=e.target.value;s.value=l,this.clearFieldError(s.id);const t=!(s.required&&!l);t||this.setFieldError(s.id,s.label+" is required"),this.fieldChanged.emit({fieldId:s.id,value:l,isValid:t})}handleFileUpload(s,e){const{error:l,file:t}=e.detail,i=!l;this.clearFieldError(s.id),i?s.value=t:this.setFieldError(s.id,"File upload failed"),this.fileUploaded.emit({fieldId:s.id,file:t,isValid:i})}clearFieldError(s){this.fieldErrors={...this.fieldErrors},delete this.fieldErrors[s]}setFieldError(s,e){this.fieldErrors={...this.fieldErrors,[s]:e}}renderTextField(s){return i("input",{disabled:!this.isEditable,type:s.type,id:"custom-field-"+s.id,value:s.value?.toString()||"",onChange:e=>this.handleFieldChange(s,e),name:""+s.id,class:"form-input",required:s.required})}renderFileField(s){return i("salla-file-upload",{url:salla.url.api("upload"),id:"custom-field-"+s.id,name:""+s.id,type:"registration",value:s.value,height:"120px",onAdded:e=>this.handleFileUpload(s,e),required:s.required,disabled:!this.isEditable,onUploaded:s=>{s.target.value=s.target.value?.url},allowRemove:!0,onRemoved:e=>{e.preventDefault(),e.stopPropagation(),s.value="",e.target.value=""},payloadName:"files[]",payloadParams:{type:"registration"},"instant-upload":!0},i("div",{class:"s-custom-fields-filepond-placeholder"},i("span",{class:"s-custom-fields-filepond-placeholder-icon"},i("i",{innerHTML:a})),i("p",{class:"s-custom-fields-filepond-placeholder-text"},this.dragAndDropText),i("span",{class:"filepond--label-action"},this.browseText)))}renderField(s){return i("div",{class:"s-custom-fields-field",key:s.id},i("label",{class:"s-custom-fields-field-label",htmlFor:"custom-field-"+s.id},s.label,s.required&&i("span",{class:"s-custom-fields-required"},"*")),i("div",null,s.type===d.Photo?this.renderFileField(s):this.renderTextField(s),this.fieldErrors[s.id]&&i("p",{class:"s-custom-fields-error"},this.fieldErrors[s.id])))}componentWillLoad(){this.parsedFields=this.parseFields(this.fields)}parseFields(s){return s?"string"==typeof s?JSON.parse(s):Array.isArray(s)?s:[]:[]}async handleSubmit(s){s.preventDefault(),this.isSubmitting=!0;try{const e={},l=s.target.elements;for(let s=0;s<l.length;s++){const t=l[s];t.name&&!t.name.startsWith("hidden")&&t.value&&(e[t.name]=t.value)}await salla.api.profile.updateCustomFields({id:salla.config.get("store.id"),fields:e})}finally{this.isSubmitting=!1}}render(){return this.parsedFields?.length?i("form",{class:"s-custom-fields-wrapper",onSubmit:this.handleSubmit},this.parsedFields.map((s=>this.renderField(s))),i("salla-button",{type:"submit",loading:this.isSubmitting,disabled:this.isSubmitting||!this.isEditable,"loader-position":"end",class:"s-custom-fields-submit-btn"},this.saveButtonText)):null}static get style(){return":host{display:block}"}},[0,"salla-custom-fields",{fields:[1],isEditable:[4,"is-editable"],fileUploadUrl:[1,"file-upload-url"],parsedFields:[32],fieldErrors:[32],isSubmitting:[32],setFields:[64],getFieldValues:[64],validateFields:[64]}]);function u(){"undefined"!=typeof customElements&&["salla-custom-fields","salla-button","salla-file-upload"].forEach((e=>{switch(e){case"salla-custom-fields":customElements.get(s(e))||customElements.define(s(e),n);break;case"salla-button":customElements.get(s(e))||o();break;case"salla-file-upload":customElements.get(s(e))||r()}}))}u();const c=n,h=u;export{c as SallaCustomFields,h as defineCustomElement}
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { C as CameraIcon } from './camera.js';
+import { F as FormFieldTypes } from './interfaces.js';
+import { d as defineCustomElement$3 } from './salla-button2.js';
+import { d as defineCustomElement$2 } from './salla-file-upload2.js';
+
+const sallaCustomFieldsCss = ":host{display:block}";
+
+const SallaCustomFields$1 = /*@__PURE__*/ proxyCustomElement(class SallaCustomFields extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.fieldChanged = createEvent(this, "fieldChanged", 7);
+        this.fileUploaded = createEvent(this, "fileUploaded", 7);
+        /** Whether the fields can be edited by the user. */
+        this.isEditable = true;
+        this.fieldErrors = {};
+        this.isSubmitting = false;
+    }
+    get dragAndDropText() {
+        return salla.lang.get("common.uploader.drag_and_drop");
+    }
+    get browseText() {
+        return salla.lang.get("common.uploader.browse");
+    }
+    get saveButtonText() {
+        return salla.lang.get("common.elements.save");
+    }
+    /** Update the displayed fields programmatically. */
+    async setFields(fields) {
+        this.parsedFields = fields;
+    }
+    /** Gets the current values of all fields, formatted for submission. */
+    async getFieldValues() {
+        return this.parsedFields?.reduce((values, field) => {
+            values[`custom_fields[${field.id}]`] = field.value;
+            return values;
+        }, {}) || {};
+    }
+    /** Validates all required fields and updates the error state. Returns true if valid. */
+    async validateFields() {
+        if (!this.parsedFields)
+            return true;
+        const errors = this.parsedFields.reduce((acc, field) => {
+            if (field.required && (!field.value || field.value === "")) {
+                acc[field.id.toString()] = `${field.label} is required`;
+            }
+            return acc;
+        }, {});
+        this.fieldErrors = errors;
+        return Object.keys(errors).length === 0;
+    }
+    handleFieldChange(field, event) {
+        const value = event.target.value;
+        field.value = value;
+        this.clearFieldError(field.id);
+        const isValid = !(field.required && !value);
+        if (!isValid) {
+            this.setFieldError(field.id, `${field.label} is required`);
+        }
+        this.fieldChanged.emit({ fieldId: field.id, value, isValid });
+    }
+    handleFileUpload(field, event) {
+        const { error, file } = event.detail;
+        const isValid = !error;
+        this.clearFieldError(field.id);
+        if (isValid) {
+            field.value = file;
+        }
+        else {
+            this.setFieldError(field.id, "File upload failed");
+        }
+        this.fileUploaded.emit({ fieldId: field.id, file, isValid });
+    }
+    clearFieldError(fieldId) {
+        this.fieldErrors = { ...this.fieldErrors };
+        delete this.fieldErrors[fieldId];
+    }
+    setFieldError(fieldId, message) {
+        this.fieldErrors = { ...this.fieldErrors, [fieldId]: message };
+    }
+    renderTextField(field) {
+        return (h("input", { disabled: !this.isEditable, type: field.type, id: `custom-field-${field.id}`, value: field.value?.toString() || "", onChange: (e) => this.handleFieldChange(field, e), name: `${field.id}`, class: "form-input", required: field.required }));
+    }
+    renderFileField(field) {
+        return (h("salla-file-upload", { url: salla.url.api('upload'), id: `custom-field-${field.id}`, name: `${field.id}`, type: "registration", value: field.value, height: "120px", onAdded: (e) => this.handleFileUpload(field, e), required: field.required, disabled: !this.isEditable, onUploaded: e => { e.target.value = e.target.value?.url; }, allowRemove: true, onRemoved: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                field.value = "";
+                e.target.value = "";
+            }, payloadName: "files[]", payloadParams: { type: 'registration' }, "instant-upload": true }, h("div", { class: "s-custom-fields-filepond-placeholder" }, h("span", { class: "s-custom-fields-filepond-placeholder-icon" }, h("i", { innerHTML: CameraIcon })), h("p", { class: "s-custom-fields-filepond-placeholder-text" }, this.dragAndDropText), h("span", { class: "filepond--label-action" }, this.browseText))));
+    }
+    renderField(field) {
+        return (h("div", { class: "s-custom-fields-field", key: field.id }, h("label", { class: "s-custom-fields-field-label", htmlFor: `custom-field-${field.id}` }, field.label, field.required && h("span", { class: "s-custom-fields-required" }, "*")), h("div", null, field.type === FormFieldTypes.Photo
+            ? this.renderFileField(field)
+            : this.renderTextField(field), this.fieldErrors[field.id] && (h("p", { class: "s-custom-fields-error" }, this.fieldErrors[field.id])))));
+    }
+    componentWillLoad() {
+        this.parsedFields = this.parseFields(this.fields);
+    }
+    parseFields(fields) {
+        if (!fields)
+            return [];
+        return typeof fields === "string"
+            ? JSON.parse(fields)
+            : Array.isArray(fields) ? fields : [];
+    }
+    async handleSubmit(e) {
+        e.preventDefault();
+        this.isSubmitting = true;
+        try {
+            const payload = {};
+            const form = e.target;
+            const elements = form.elements;
+            for (let i = 0; i < elements.length; i++) {
+                const element = elements[i];
+                if (element.name && !element.name.startsWith("hidden") && element.value) {
+                    payload[element.name] = element.value;
+                }
+            }
+            await salla.api.profile.updateCustomFields({
+                id: salla.config.get("store.id"),
+                fields: payload,
+            });
+        }
+        finally {
+            this.isSubmitting = false;
+        }
+    }
+    render() {
+        if (!this.parsedFields?.length)
+            return null;
+        return (h("form", { class: "s-custom-fields-wrapper", onSubmit: this.handleSubmit }, this.parsedFields.map(field => this.renderField(field)), h("salla-button", { type: "submit", loading: this.isSubmitting, disabled: this.isSubmitting || !this.isEditable, "loader-position": "end", class: "s-custom-fields-submit-btn" }, this.saveButtonText)));
+    }
+    static get style() { return sallaCustomFieldsCss; }
+}, [0, "salla-custom-fields", {
+        "fields": [1],
+        "isEditable": [4, "is-editable"],
+        "fileUploadUrl": [1, "file-upload-url"],
+        "parsedFields": [32],
+        "fieldErrors": [32],
+        "isSubmitting": [32],
+        "setFields": [64],
+        "getFieldValues": [64],
+        "validateFields": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-custom-fields", "salla-button", "salla-file-upload"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-custom-fields":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaCustomFields$1);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-file-upload":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaCustomFields = SallaCustomFields$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaCustomFields, defineCustomElement };

package/dist/components/salla-datetime-picker.js

@@ -1,4 +1,9 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{S as a,d as s}from"./salla-datetime-picker2.js";const t=a,e=s;export{t as SallaDatetimePicker,e as defineCustomElement}
+import { S as SallaDatetimePicker$1, d as defineCustomElement$1 } from './salla-datetime-picker2.js';
+
+const SallaDatetimePicker = SallaDatetimePicker$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaDatetimePicker, defineCustomElement };