{"version":3,"file":"Themes.chunk-DZOWe56E.js","sources":["../../shared/components/RichEditor/utils.ts","../../views/Web/FormEditor/FormRender.vue","../../shared/components/SelectIssueFromList.vue","../../shared/components/DesignSettings/defaultSettings.ts","../../shared/components/FontLibrary.vue","../../shared/components/RangeSliderNative.vue","../../shared/components/DesignSettings/Slider.vue","../../shared/components/ColorPickers/ColorPickerNative.vue","../../shared/components/DesignSettings/Color.vue","../../shared/components/DesignSettings/Toggle.vue","../../shared/components/FontSelector.vue","../../shared/components/DesignSettings/Font.vue","../../shared/components/DesignSettings/DesignSettings.vue","../../shared/components/Editor/PreviewButtons.vue","../../shared/components/Editor/EditorContainer.vue","../../shared/components/BSFormInputTextarea.vue","../../Themes/Themes.access.ts","../../Themes/CustomFonts.access.ts","../../Themes/Design.vue","../../Themes/Theme.vue","../../shared/components/EmptyState.vue","../../Themes/ThemesListPreview.vue","../../Themes/ThemesList.vue","../../Themes/Themes.ts"],"sourcesContent":["export const richEditorCleanup = (html: string) => {\r\n    const tag = 'div';\r\n    const pos = html.lastIndexOf('</' + tag + '>');\r\n    if (pos === -1) return html;\r\n    html = html.substring(0, pos);\r\n    html = html.replaceAll('<' + tag + '>', '');\r\n    html = html.replaceAll('</' + tag + '>', '<br/>');\r\n\r\n    return html;\r\n};\r\n","<script lang=\"ts\" setup>\r\n    import { combineUrlSegments } from '@shared/utils/combineUrlSegments';\r\n    import { Form } from './FormEditor.access';\r\n    import { type FontFaceProps } from '@shared/components/FontTypes';\r\n    import { richEditorCleanup } from '@shared/components/RichEditor/utils';\r\n\r\n    const props = defineProps<{\r\n        form: Form | null;\r\n        publicHost: string;\r\n        currentAccountId: string;\r\n        id: string;\r\n    }>();\r\n\r\n    const minifyStylesContent = (stylesContent: string) => {\r\n        return stylesContent\r\n            .replace(/([^\\)\\-0-9a-zA-Z\\[\\].#])\\s+/g, '$1')\r\n            .replace(/\\s([^\\-\\*0-9a-zA-Z\\[\\].#]+)/g, '$1')\r\n            .replace(/;}/g, '}')\r\n            .replace(/\\/\\*.*?\\*\\//g, '');\r\n    };\r\n\r\n    const transitionStyles = () => {\r\n        if (!props.form) return '';\r\n        return `\r\n            #form-container-${props.id},\r\n            #form-container-${props.id} * {\r\n                transition: all 150ms ease;\r\n            }\r\n        `;\r\n    };\r\n\r\n    const stylesContent = () => {\r\n        if (!props.form) return '';\r\n        return minifyStylesContent(`\r\n            #form-container-${props.id} * {\r\n                border: none;\r\n                background-image: none;\r\n                background-color: transparent;\r\n                -webkit-box-shadow: none;\r\n                -moz-box-shadow: none;\r\n                box-shadow: none;\r\n                padding: 0;\r\n                margin: 0;\r\n            }\r\n\r\n            #form-container-${props.id} {\r\n                ${getCssVars(props.form.cssVars)}\r\n                display: flex;\r\n                flex-direction: var(--ImageFlexDirection);\r\n                max-width: var(--FrameWidth);\r\n                width: calc(100% - calc(var(--FrameBorderWidth) * 2));\r\n                background-color: var(--FrameBackgroundColor);\r\n                border-radius: var(--FrameRadius);\r\n                margin: auto;\r\n                overflow: hidden;\r\n                color: var(--TextColor);\r\n                border: var(--FrameBorderWidth) solid var(--FrameBorderColor);\r\n            }\r\n\r\n            #form-container-${props.id} * {\r\n                box-sizing: border-box;\r\n            }\r\n\r\n            #form-container-${props.id} form {\r\n                padding: var(--FramePaddingTop) var(--FramePaddingRight) var(--FramePaddingBottom) var(--FramePaddingLeft);\r\n                flex: 1;\r\n            }\r\n\r\n            #form-container-${props.id} img {\r\n                width: 100%;\r\n                height: auto;\r\n            }\r\n\r\n            #form-container-${props.id} .img-bg {\r\n                background-repeat: no-repeat;\r\n                background-size: cover;\r\n                background-position: center center;\r\n                width: var(--ImageWidth);\r\n            }\r\n\r\n            #form-container-${props.id} h3,\r\n            #form-container-${props.id} p {\r\n                margin: 0 0 10px;\r\n            }\r\n\r\n            #form-container-${props.id} h3 {\r\n                font-family: var(--HeadingFontFamily);\r\n                font-size: var(--HeadingFontSize);\r\n                line-height: var(--HeadingLineHeight);\r\n                color: var(--HeadingColor);\r\n                font-weight: var(--HeadingFontWeight);\r\n            }\r\n\r\n            #form-container-${props.id},\r\n            #form-container-${props.id} p {\r\n                font-family: var(--TextFontFamily);\r\n                font-size: var(--TextFontSize);\r\n                line-height: var(--TextLineHeight);\r\n                color: var(--TextColor);\r\n                font-weight: var(--TextFontWeight);\r\n            }\r\n\r\n            #form-container-${props.id} a {\r\n                color: var(--TextColor);\r\n                text-decoration: underline;\r\n            }\r\n\r\n            #form-container-${props.id} .formfield {\r\n                margin: 0 0 15px;\r\n            }\r\n\r\n            #form-container-${props.id} .formfield-check label {\r\n                display: grid;\r\n                grid-template-columns: 1em auto;\r\n                gap: 5px;\r\n                align-items: baseline;\r\n                font-size: var(--TextFontSize);\r\n                font-weight: var(--TextFontWeight);\r\n            }\r\n\r\n            #form-container-${props.id} .formfield p {\r\n                margin: 5px 0 0;\r\n                font-style: italic;\r\n            }\r\n\r\n            #form-container-${props.id} legend,\r\n            #form-container-${props.id} label {\r\n                margin: 0 0 5px;\r\n                display: inline-block;\r\n                font-size: var(--LabelsFontSize);\r\n                line-height: var(--LabelsLineHeight);\r\n                font-family: var(--LabelsFontFamily);\r\n                color: var(--LabelsColor);\r\n                font-weight: var(--LabelsFontWeight);\r\n            }\r\n\r\n            #form-container-${props.id} input[type=\"text\"],\r\n            #form-container-${props.id} input[type=\"email\"],\r\n            #form-container-${props.id} input[type=\"tel\"],\r\n            #form-container-${props.id} input[type=\"number\"],\r\n            #form-container-${props.id} input[type=\"date\"],\r\n            #form-container-${props.id} select {\r\n                display: block;\r\n                width: 100%;\r\n                font-size: var(--InputsFontSize);\r\n                line-height: var(--InputsLineHeight);\r\n                font-family: var(--InputsFontFamily);\r\n                color: var(--InputsColor);\r\n                background-color: var(--InputsBackgroundColor);\r\n                padding: var(--InputsPaddingTop) var(--InputsPaddingRight) var(--InputsPaddingBottom) var(--InputsPaddingLeft);\r\n                border-width: var(--InputsBorderTopWidth) var(--InputsBorderRightWidth) var(--InputsBorderBottomWidth) var(--InputsBorderLeftWidth);\r\n                border-style: solid;\r\n                border-color: var(--InputsBorderColor);\r\n                border-radius: var(--InputsRadius);\r\n            }\r\n\r\n            #form-container-${props.id} input[type=\"radio\"],\r\n            #form-container-${props.id} input[type=\"checkbox\"] {\r\n                accent-color: var(--ButtonBackgroundColor);\r\n            }\r\n\r\n            #form-container-${props.id} input[type=\"hidden\"] + label {\r\n                display: none;\r\n            }\r\n\r\n            #form-container-${props.id} .btn-container {\r\n                display: flex;\r\n                justify-content: var(--ButtonJustifyContent);\r\n                margin-top: 20px;\r\n            }\r\n\r\n            #form-container-${props.id} button[type=\"submit\"] {\r\n                width: var(--ButtonWidth);\r\n                background-color: var(--ButtonBackgroundColor);\r\n                padding: var(--ButtonPaddingTop) var(--ButtonPaddingRight) var(--ButtonPaddingBottom) var(--ButtonPaddingLeft);\r\n                border: var(--ButtonBorderWidth) solid var(--ButtonBorderColor);\r\n                border-radius: var(--ButtonRadius);\r\n                font-family: var(--ButtonFontFamily);\r\n                font-size: var(--ButtonFontSize);\r\n                line-height: var(--ButtonLineHeight);\r\n                color: var(--ButtonColor);\r\n                font-weight: var(--ButtonFontWeight);\r\n                text-align: center;\r\n                cursor: pointer;\r\n            }\r\n\r\n            #form-container-${props.id} button[type=\"submit\"]:hover {\r\n                background-color: var(--ButtonBackgroundColorHover);\r\n                color: var(--ButtonColorHover);\r\n            }\r\n\r\n            #form-container-${props.id} legend {\r\n                margin: 0 0 5px;\r\n            }\r\n\r\n            #form-container-${props.id} legend + p {\r\n                margin: 0 0 5px;\r\n            }\r\n\r\n            #form-container-${props.id} fieldset {\r\n                margin: 0 0 5px;\r\n            }\r\n\r\n            #form-container-${props.id} .formfield-check {\r\n                margin: 0 0 10px;\r\n            }\r\n        `);\r\n    };\r\n</script>\r\n\r\n<script lang=\"ts\">\r\n    export const googleFontsImport = (googleFonts: string): string => {\r\n        return googleFonts ? '@import url(\"https://fonts.googleapis.com/css?family=' + googleFonts + '&display=swap\");' : '';\r\n    };\r\n\r\n    export const customFontsImport = (customFonts: FontFaceProps[]): string => {\r\n        let output = '';\r\n\r\n        customFonts.forEach((customFont: FontFaceProps) => {\r\n            output += '@font-face {';\r\n\r\n            for (let key in customFont) {\r\n                if (key != 'customFontId' && customFont[key].length > 0) output += key + ':' + customFont[key] + ';';\r\n            }\r\n\r\n            output += '}';\r\n        });\r\n\r\n        return output;\r\n    };\r\n\r\n    export const getCssVars = (cssVars: { [key: string]: string }, prefix?: string): string => {\r\n        let allCssVars = '';\r\n\r\n        for (let cssVar in cssVars) {\r\n            if (cssVars[cssVar]) {\r\n                allCssVars += '--' + (prefix ? prefix + cssVar : cssVar) + ':' + cssVars[cssVar] + ';';\r\n            }\r\n        }\r\n\r\n        return allCssVars;\r\n    };\r\n\r\n    export default { name: 'FormRender' };\r\n</script>\r\n\r\n<template>\r\n    <div v-if=\"props.form\" :id=\"'form-container-' + props.id\">\r\n        <div v-if=\"props.form.image.src && props.form.cssVars['ImageFlexDirection'] === 'column'\">\r\n            <img :src=\"props.form.image.src\" alt=\"\" />\r\n        </div>\r\n\r\n        <div\r\n            v-if=\"props.form.image.src && props.form.cssVars['ImageFlexDirection'] !== 'column'\"\r\n            class=\"img-bg\"\r\n            :style=\"{ 'background-image': 'url(' + props.form.image.src + ')' }\"></div>\r\n\r\n        <form\r\n            method=\"post\"\r\n            :action=\"combineUrlSegments(props.publicHost, 'Api', 'Subscriptions', '' + props.currentAccountId)\"\r\n            @submit.prevent\r\n            :id=\"'form-' + props.id\">\r\n            <input type=\"hidden\" name=\"SubscriptionConfirmedUrl\" v-if=\"props.form.subscriptionConfirmedUrl\" :value=\"props.form.subscriptionConfirmedUrl\" />\r\n            <input type=\"hidden\" name=\"SubscriptionFailedUrl\" v-if=\"props.form.subscriptionFailedUrl\" :value=\"props.form.subscriptionFailedUrl\" />\r\n            <input type=\"hidden\" name=\"DoubleOptIn[Issue][IssueId]\" v-if=\"props.form.doubleOptInIssueId\" :value=\"props.form.doubleOptInIssueId\" />\r\n            <input type=\"hidden\" name=\"DoubleOptIn[EmailSentUrl]\" v-if=\"props.form.doubleOptInUrl\" :value=\"props.form.doubleOptInUrl\" />\r\n            <input type=\"hidden\" name=\"ConfirmationIssue[IssueId]\" v-if=\"props.form.confirmationIssueId\" :value=\"props.form.confirmationIssueId\" />\r\n            <input type=\"hidden\" name=\"DefaultCountryCode\" :value=\"props.form.defaultCountryCode\" />\r\n\r\n            <template v-if=\"props.form.listsDisplay === 'hidden'\" v-for=\"list in props.form.lists\" :key=\"list.id\">\r\n                <input :type=\"props.form.listsDisplay\" name=\"ListIds\" :value=\"list.id\" :id=\"'listId-' + list.id\" />\r\n            </template>\r\n\r\n            <h3 v-if=\"props.form.title.length > 0\" v-html=\"props.form.title\"></h3>\r\n            <p v-if=\"richEditorCleanup(props.form.introduction).length > 0\" v-html=\"richEditorCleanup(props.form.introduction)\"></p>\r\n\r\n            <template v-if=\"props.form.listsDisplay !== 'hidden'\">\r\n                <fieldset>\r\n                    <legend v-if=\"props.form.listsLegend\">{{ props.form.listsLegend }}</legend>\r\n                    <TransitionGroup name=\"list\">\r\n                        <div v-for=\"list in props.form.lists\" :key=\"list.id\" class=\"formfield-check\">\r\n                            <label>\r\n                                <input :type=\"props.form.listsDisplay\" name=\"ListIds\" :value=\"list.id\" :required=\"props.form.listsDisplay === 'radio'\" />\r\n                                {{ list.label || $Resources.MissingLabel }}\r\n                            </label>\r\n                        </div>\r\n                    </TransitionGroup>\r\n                </fieldset>\r\n            </template>\r\n\r\n            <TransitionGroup tag=\"div\" name=\"list\">\r\n                <div v-for=\"formField in props.form.formFields\" :key=\"formField.contactField\">\r\n                    <template v-if=\"formField.type === 'hidden'\">\r\n                        <input :type=\"formField.type\" :name=\"'Contact[' + formField.contactField + ']'\" :value=\"formField.value\" />\r\n                    </template>\r\n                    <template v-if=\"formField.type === 'radio' || formField.type === 'checkbox'\">\r\n                        <fieldset>\r\n                            <legend>{{ formField.label || $Resources.MissingLabel }} {{ formField.required === true ? '*' : '' }}</legend>\r\n                            <p v-if=\"formField.description\">{{ formField.description }}</p>\r\n\r\n                            <div v-for=\"option in formField.options\" class=\"formfield-check\">\r\n                                <label>\r\n                                    <input\r\n                                        :type=\"formField.type\"\r\n                                        :name=\"'Contact[' + formField.contactField + ']'\"\r\n                                        :value=\"option.value\"\r\n                                        :required=\"formField.required\" />\r\n                                    {{ option.label || $Resources.MissingLabel }}\r\n                                </label>\r\n                            </div>\r\n                        </fieldset>\r\n                    </template>\r\n                    <template v-if=\"formField.type === 'select'\">\r\n                        <div class=\"formfield\">\r\n                            <label :for=\"'Contact[' + formField.contactField + ']'\">\r\n                                {{ formField.label || $Resources.MissingLabel }}\r\n                                {{ formField.required === true ? '*' : '' }}\r\n                            </label>\r\n                            <select\r\n                                :type=\"formField.type\"\r\n                                :id=\"'Contact[' + formField.contactField + ']'\"\r\n                                :name=\"'Contact[' + formField.contactField + ']'\"\r\n                                :required=\"formField.required\">\r\n                                <option value=\"\">{{ formField.placeholder }}</option>\r\n                                <option v-for=\"option in formField.options\" :value=\"option.value\">\r\n                                    {{ option.label }}\r\n                                </option>\r\n                            </select>\r\n                            <p v-if=\"formField.description\">{{ formField.description }}</p>\r\n                        </div>\r\n                    </template>\r\n                    <template\r\n                        v-if=\"\r\n                            formField.type === 'text' ||\r\n                            formField.type === 'email' ||\r\n                            formField.type === 'tel' ||\r\n                            formField.type === 'date' ||\r\n                            formField.type === 'number'\r\n                        \">\r\n                        <div class=\"formfield\">\r\n                            <label :for=\"'Contact[' + formField.contactField + ']'\">\r\n                                {{ formField.label || $Resources.MissingLabel }}\r\n                                {{ formField.required === true ? '*' : '' }}\r\n                            </label>\r\n                            <input\r\n                                :type=\"formField.type\"\r\n                                :id=\"'Contact[' + formField.contactField + ']'\"\r\n                                :name=\"'Contact[' + formField.contactField + ']'\"\r\n                                :placeholder=\"formField.placeholder\"\r\n                                :required=\"formField.required\" />\r\n                            <p v-if=\"formField.description\">{{ formField.description }}</p>\r\n                        </div>\r\n                    </template>\r\n                </div>\r\n            </TransitionGroup>\r\n\r\n            <div class=\"formfield formfield-check\" v-if=\"props.form.consent.length > 0\">\r\n                <label for=\"consentText\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        name=\"ConsentText\"\r\n                        :value=\"richEditorCleanup(props.form.consent).replaceAll('<', '[').replaceAll('>', ']')\"\r\n                        id=\"consentText\"\r\n                        required />\r\n                    <span v-html=\"richEditorCleanup(props.form.consent)\"></span>\r\n                </label>\r\n            </div>\r\n\r\n            <div class=\"btn-container\">\r\n                <button type=\"submit\">{{ props.form.button }}</button>\r\n            </div>\r\n        </form>\r\n        <span v-html=\"'<style>' + stylesContent() + '</style>'\"></span>\r\n        <span v-html=\"'<style>' + googleFontsImport(props.form.googleFonts) + '</style>'\" v-if=\"props.form.googleFonts\"></span>\r\n    </div>\r\n\r\n    <span v-html=\"'<style>' + transitionStyles() + '</style>'\"></span>\r\n</template>\r\n\r\n<style></style>\r\n\r\n<style scoped></style>\r\n","<script lang=\"ts\" setup>\r\n    import { formatDateTime } from '@cwd/Shared/utils/formatDateTime';\r\n    import { api } from '@cwd/lib/main';\r\n    import List from '@shared/components/List.vue';\r\n    import { combineUrlSegments } from '@shared/utils/combineUrlSegments';\r\n\r\n    type types = 'issues' | 'events' | 'sms' | 'surveys';\r\n\r\n    type issuesProps = {\r\n        items: any;\r\n        type: types;\r\n    };\r\n\r\n    const props = defineProps<issuesProps>();\r\n\r\n    const getItems = () => {\r\n        if (!Array.isArray(props.items)) return [];\r\n\r\n        let items = filterItems();\r\n\r\n        return items.map((item: any) => setupItem(item, props.type));\r\n    };\r\n\r\n    const filterItems = () => props.items;\r\n\r\n    const setupItem = (item: any, type: types) => {\r\n        switch (type) {\r\n            case 'events':\r\n                item._id = item.EventId;\r\n                item._name = item.Name;\r\n                item._description = item.Description;\r\n                item._lastModified = item.LastModified;\r\n                item._lastModifiedBy = item.LastModifiedBy ? item.LastModifiedBy.Name : '';\r\n                item._previewUrl = combineUrlSegments(api.settings.publicHost || '', 'Events', '' + item.EventId, '?preview=true');\r\n\r\n                return item;\r\n            case 'surveys':\r\n                item._id = item.SurveyId;\r\n                item._name = item.Title;\r\n                item._description = item.SurveyName;\r\n                item._lastModified = item.LastModified;\r\n                item._lastModifiedBy = item.LastModifiedBy ? item.LastModifiedBy.Name : '';\r\n                item._previewUrl = combineUrlSegments(api.settings.publicHost || '', 'Surveys', '' + item.SurveyId, '?preview=true');\r\n\r\n                return item;\r\n            case 'sms':\r\n                item._id = item.SmsMessageId;\r\n                item._name = item.Subject;\r\n                item._description = null;\r\n                item._lastModified = item.Modified;\r\n                item._lastModifiedBy = item.ModifiedBy.Name;\r\n                item._previewUrl = '/TextMessages/' + item.SmsMessageId + '/Statistics';\r\n\r\n                return item;\r\n            default:\r\n                item._id = item.IssueId;\r\n                item._name = item.Subject;\r\n                item._description = item.IssueName;\r\n                item._lastModified = item.LastModified;\r\n                item._lastModifiedBy = item.LastModifiedBy.Name;\r\n                item._previewUrl = combineUrlSegments(api.settings.publicHost || '', 'Issues', '' + item.IssueId, '?preview=true');\r\n\r\n                return item;\r\n        }\r\n    };\r\n</script>\r\n\r\n<template>\r\n    <List\r\n        :items=\"getItems()\"\r\n        :filterKeys=\"['_name', '_description', '[Name]']\"\r\n        :orderOptions=\"[\r\n            {\r\n                key: '_lastModified',\r\n                display: $Resources.LastModifiedLabel,\r\n            },\r\n        ]\">\r\n        <template #toolbar></template>\r\n        <template #item=\"{ item }\">\r\n            <div class=\"flex-1\">\r\n                <h4 class=\"d-flex col-gap-xs flex-wrap align-items-baseline m-0-t\">\r\n                    <a href=\"javascript:void(0)\" @click=\"$emit('update:selectedId', item._id)\">{{ item._name || $Resources.NoNamePlaceholder }}</a>\r\n                    <small v-if=\"item.Category\">{{ item.Category.Name }}</small>\r\n                    <a class=\"btn btn-subtle btn-xs\" :href=\"item._previewUrl\" target=\"_blank\" rel=\"noopener\">\r\n                        <span class=\"glyphicon glyphicon-eye-open\" aria-hidden=\"true\"></span>\r\n                        <span class=\"sr-only\">{{ $Resources.PreviewButton }}</span>\r\n                    </a>\r\n                </h4>\r\n                <p v-show=\"item._description\">{{ item._description }}</p>\r\n\r\n                <ul class=\"tag-list list-unstyled\" v-show=\"item.Tags && item.Tags.length > 0\">\r\n                    <li v-for=\"tag in item.Tags\">\r\n                        <span class=\"tag\">{{ tag.Title }}</span>\r\n                    </li>\r\n                </ul>\r\n\r\n                <p class=\"meta\">\r\n                    <span class=\"glyphicon glyphicon-time m-xs-r\"></span>\r\n                    {{ formatDateTime(item._lastModified) }}\r\n                    <span class=\"glyphicon glyphicon-user m-xs-r\"></span>\r\n                    {{ item._lastModifiedBy }}\r\n                </p>\r\n            </div>\r\n        </template>\r\n    </List>\r\n</template>\r\n\r\n<style></style>\r\n\r\n<style scoped></style>\r\n","export type ColorModes = 'hex' | 'rgb' | 'rgbValues' | null;\r\n\r\nexport type TypeDesignSettings = TypeGroup[];\r\n\r\nexport type typeSlider = {\r\n    name: string;\r\n    heading: string | null;\r\n    type: 'slider';\r\n    label: string;\r\n    min: number;\r\n    max: number;\r\n    step: number;\r\n    unit: string;\r\n    cols: TypeCols;\r\n};\r\n\r\nexport type typeColor = {\r\n    name: string;\r\n    heading: string | null;\r\n    label: string;\r\n    type: 'color';\r\n    mode: ColorModes;\r\n    cols: TypeCols;\r\n};\r\n\r\nexport type typeFont = {\r\n    name: string;\r\n    heading: string | null;\r\n    type: 'fontSelector';\r\n    cols: TypeCols;\r\n};\r\n\r\nexport type typeToggle = {\r\n    name: string;\r\n    type: 'toggle';\r\n    heading: string;\r\n    toggleOptions: { value: string; label: string }[];\r\n    cols: TypeCols;\r\n};\r\n\r\nexport type TypeGroup = {\r\n    groupName: string;\r\n    settings: TypeGroupSetting[];\r\n};\r\n\r\nexport type TypeGroupSetting = TypeUis | string;\r\n\r\nexport type TypeUis = typeSlider | typeColor | typeFont | typeToggle;\r\n\r\nexport type TypeCols = 4 | 6 | 12;\r\n\r\nconst defaultCols = 12;\r\n\r\nexport const uis = {\r\n    slider: (settings: {\r\n        name: string;\r\n        heading?: string;\r\n        label?: string;\r\n        options: { min?: number; max: number; step?: number; unit?: string; cols?: TypeCols };\r\n    }): typeSlider => {\r\n        let { min = 0, step = 0, unit = 'px', cols = defaultCols } = settings.options;\r\n\r\n        return {\r\n            name: settings.name,\r\n            label: settings.label || $Resources['FormEditorDesign' + settings.name],\r\n            heading: settings.heading || null,\r\n            type: 'slider',\r\n            min: min,\r\n            max: settings.options.max,\r\n            step: step,\r\n            unit: unit,\r\n            cols: cols,\r\n        };\r\n    },\r\n    colorPicker: (settings: { name?: string; heading?: string; label?: string; options?: { mode?: ColorModes; cols?: TypeCols } }): typeColor => {\r\n        let mode = settings.options?.mode || null;\r\n        let cols = settings.options?.cols || defaultCols;\r\n        let { name = 'Color' } = settings;\r\n\r\n        return {\r\n            name: name,\r\n            label: settings.label || $Resources['FormEditorDesign' + name],\r\n            heading: settings.heading || null,\r\n            type: 'color',\r\n            mode: mode,\r\n            cols: cols,\r\n        };\r\n    },\r\n    fontSelector: (settings?: { name?: string; heading?: string; options?: { cols?: TypeCols } }): typeFont => {\r\n        let cols = settings?.options?.cols || defaultCols;\r\n\r\n        return {\r\n            name: settings?.name || 'FontFamily',\r\n            heading: settings?.heading || null,\r\n            type: 'fontSelector',\r\n            cols: cols,\r\n        };\r\n    },\r\n    toggle: (settings: { name: string; heading: string; toggleOptions: { value: string; label: string }[]; options?: { cols?: TypeCols } }): typeToggle => {\r\n        let cols = settings.options?.cols || defaultCols;\r\n\r\n        return {\r\n            name: settings.name,\r\n            heading: settings.heading,\r\n            type: 'toggle',\r\n            toggleOptions: settings.toggleOptions,\r\n            cols: cols,\r\n        };\r\n    },\r\n};\r\n\r\n/*\r\n$Resources.FormEditorDesignPaddingTop\r\n$Resources.FormEditorDesignPaddingRight\r\n$Resources.FormEditorDesignPaddingBottom\r\n$Resources.FormEditorDesignPaddingLeft\r\n$Resources.FormEditorDesignWidth\r\n$Resources.FormEditorDesignRadius\r\n$Resources.FormEditorDesignBorderWidth\r\n$Resources.FormEditorDesignBackgroundColor\r\n$Resources.FormEditorDesignBackgroundColorHover\r\n$Resources.FormEditorDesignColor\r\n$Resources.FormEditorDesignColorHover\r\n$Resources.FormEditorDesignBorderColor\r\n$Resources.FormEditorDesignHeadingFrame\r\n$Resources.FormEditorDesignHeadingButton\r\n$Resources.FormEditorDesignHeadingText\r\n$Resources.FormEditorDesignHeadingHeading\r\n$Resources.FormEditorDesignHeadingInputs\r\n$Resources.FormEditorDesignHeadingImage\r\n$Resources.FormEditorDesignFontSize\r\n$Resources.FormEditorDesignLineHeight\r\n$Resources.FormEditorDesignBorderBottomWidth\r\n$Resources.FormEditorDesignBorderLeftWidth\r\n$Resources.FormEditorDesignBorderRightWidth\r\n$Resources.FormEditorDesignBorderTopWidth\r\n$Resources.FormEditorDesignHeadingLabels\r\n*/\r\n","<script setup lang=\"ts\">\r\n    import { reactive, ref, watch, onMounted } from 'vue';\r\n    import { api } from '@cwd/lib/main';\r\n    import BSFormInputText from '@shared/components/BSFormInputText.vue';\r\n    import BSFormSearch from '@shared/components/BSFormSearch.vue';\r\n    import Collapse from '@shared/components/Collapse.vue';\r\n    import { type FontsReference, type FontReference, type FontFaceProps } from './FontTypes';\r\n    import Tabs, { tab } from '@shared/components/Tabs.vue';\r\n    import { customFontsImport } from '@views/Web/FormEditor/FormRender.vue';\r\n    import Loading from '@shared/components/Loading.vue';\r\n\r\n    const props = defineProps<{\r\n        familyParam?: string;\r\n        show: boolean;\r\n        customFonts?: FontFaceProps[];\r\n    }>();\r\n\r\n    const state = reactive<{\r\n        fonts: FontsReference[] | null;\r\n        orderByValue: string;\r\n        orderByDirection: string;\r\n        showing: number;\r\n        filter: string;\r\n        total: number;\r\n        selectedFonts: FontReference[];\r\n    }>({\r\n        fonts: null,\r\n        orderByValue: 'family',\r\n        orderByDirection: 'asc',\r\n        showing: 36,\r\n        filter: '',\r\n        total: 0,\r\n        selectedFonts: [],\r\n    });\r\n\r\n    let toggle = ref<number | null>(null);\r\n    let customFontToggle = ref<number | null>(null);\r\n\r\n    const emit = defineEmits(['update:familyParam', 'update:availableFonts', 'get:fontFaceProps', 'update:customFont', 'addCustomFont', 'removeCustomFont']);\r\n\r\n    watch(\r\n        () => props.show,\r\n        async (newVal) => {\r\n            if (newVal === false || state.fonts !== null) return;\r\n\r\n            const result: { items: FontsReference[] } = await loadFonts();\r\n            state.fonts = result.items;\r\n\r\n            // props.familyParam && setupSelectedFonts(props.familyParam)\r\n        }\r\n    );\r\n\r\n    onMounted(async () => {\r\n        props.familyParam && setupSelectedFonts(props.familyParam);\r\n    });\r\n\r\n    watch(\r\n        () => props.familyParam,\r\n        (newVal) => {\r\n            if (typeof newVal === 'undefined') return;\r\n            setupSelectedFonts(newVal);\r\n        }\r\n    );\r\n\r\n    const showMore = () => (state.showing = state.showing + 18);\r\n\r\n    const filterFonts = (fonts: FontsReference[] | null) => {\r\n        if (!fonts) return [];\r\n\r\n        let filteredFonts = [...fonts].sort(sortComparer);\r\n\r\n        if (state.filter) {\r\n            filteredFonts = filteredFonts.filter((font: FontsReference, index: number) => {\r\n                return font.family.toLowerCase().indexOf(state.filter.toLowerCase()) > -1;\r\n            });\r\n        }\r\n\r\n        state.total = filteredFonts.length;\r\n\r\n        return filteredFonts.filter((image: FontsReference, index: number) => {\r\n            return index < state.showing;\r\n        });\r\n    };\r\n\r\n    const sortComparer = (l: any, r: any) => {\r\n        let lVal = l[state.orderByValue];\r\n        let rVal = r[state.orderByValue];\r\n        return state.orderByDirection === 'asc' ? (lVal > rVal ? 1 : -1) : lVal < rVal ? 1 : -1;\r\n    };\r\n\r\n    const fontStyle = (family: string, variants: string[]) => {\r\n        let value = family.replace(/ /g, '+');\r\n        value += variants.includes('400') ? ':400' : variants.includes('regular') ? ':regular' : variants[0];\r\n        return \"<style>@import url('https://fonts.googleapis.com/css?family=\" + value + \"');</style>\";\r\n    };\r\n\r\n    const setupSelectedFonts = (familyParam: string) => {\r\n        state.selectedFonts = [];\r\n\r\n        if (familyParam) {\r\n            let items = familyParam.split('|');\r\n\r\n            items.forEach((item) => {\r\n                let itemSplit = item.split(':');\r\n                let family = itemSplit[0];\r\n                let variants = itemSplit[1].split(',');\r\n\r\n                state.selectedFonts.push({\r\n                    family: family.replace(/\\+/g, ' '),\r\n                    encoded: family,\r\n                    variants: variants,\r\n                });\r\n            });\r\n        }\r\n\r\n        return emit('update:availableFonts', state.selectedFonts);\r\n    };\r\n\r\n    const updateFamilyParam = () => {\r\n        let newParam: string = '';\r\n\r\n        state.selectedFonts.forEach((font: FontReference, index: number) => {\r\n            newParam += font.encoded + ':' + font.variants?.toString();\r\n            if (state.selectedFonts.length !== index + 1) newParam += '|';\r\n        });\r\n\r\n        return emit('update:familyParam', newParam);\r\n    };\r\n\r\n    const findFamily = (currentFamily: string) =>\r\n        state.selectedFonts.find((font: FontReference) => {\r\n            return font.family === currentFamily;\r\n        });\r\n\r\n    const findVariant = (currentVariant: string, variants: string[]) =>\r\n        variants.find((variant: string) => {\r\n            return variant === currentVariant;\r\n        });\r\n\r\n    const toggleFont = (currentFamily: string, variant: string) => {\r\n        let foundFamily = findFamily(currentFamily);\r\n\r\n        if (foundFamily) {\r\n            let foundVariant = findVariant(variant, foundFamily.variants);\r\n\r\n            if (foundVariant) {\r\n                // remove variant\r\n                let indexToRemove = foundFamily.variants.indexOf(variant);\r\n                foundFamily.variants.splice(indexToRemove, 1);\r\n\r\n                if (foundFamily.variants.length === 0) {\r\n                    // no variants left so remove family also\r\n                    let indexToRemove = state.selectedFonts.indexOf(foundFamily);\r\n                    state.selectedFonts.splice(indexToRemove, 1);\r\n                }\r\n            } else {\r\n                // add new variant\r\n                foundFamily.variants.push(variant);\r\n            }\r\n        } else {\r\n            // add new family and variant\r\n            state.selectedFonts.push({\r\n                family: currentFamily,\r\n                encoded: currentFamily.replace(/ /g, '+'),\r\n                variants: [variant],\r\n            });\r\n        }\r\n\r\n        updateFamilyParam();\r\n        return emit('update:availableFonts', state.selectedFonts);\r\n    };\r\n\r\n    const isSelected = (currentFamily: string, variant: string) => {\r\n        let foundFamily = findFamily(currentFamily);\r\n        return foundFamily && findVariant(variant, foundFamily.variants);\r\n    };\r\n\r\n    /*\r\n\t\t   const useFont = (font: FontsReference, variant: string) => {\r\n\t\t       let file = font.files[variant]\r\n\t\t       let fontFaceProps: FontFaceProps = {\r\n\t\t           src: 'url(\"' + file + '\") format(\"woff2\")',\r\n\t\t           'font-family': font.family,\r\n\t\t           'font-style': variant.indexOf('italic') > -1 ? 'italic' : 'normal',\r\n\t\t           'font-weight': variant.replace('italic', '')\r\n\t\t       }\r\n\r\n\t\t       return emit('get:fontFaceProps', fontFaceProps, font.category)\r\n\t\t   }\r\n\t\t   */\r\n\r\n    const addCustomFont = () => {\r\n        emit('addCustomFont');\r\n        customFontToggle.value = (props.customFonts as FontFaceProps[]).length - 1;\r\n    };\r\n\r\n    const getPlaceholder = (key: string) => {\r\n        switch (key) {\r\n            case 'font-style':\r\n                return 'Normal or italic';\r\n            case 'font-family':\r\n                return 'Font name';\r\n            case 'src':\r\n                return 'url(path/to/font)';\r\n            case 'font-weight':\r\n                return 'Normal or bold';\r\n        }\r\n        return '';\r\n    };\r\n</script>\r\n\r\n<script lang=\"ts\">\r\n    async function loadFonts(): Promise<{ items: FontsReference[] }> {\r\n        return api.get('https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyB0GLUxsi4OuxfdZqyALLtvzSSJcn-RnzA&capability=WOFF2&sort=popularity');\r\n    }\r\n</script>\r\n\r\n<template>\r\n    <tabs>\r\n        <tab :title=\"$Resources.CustomFontsModalHeading\">\r\n            <BSFormSearch\r\n                :placeholder=\"$Resources.SearchCustomFontsPlaceholder\"\r\n                class=\"form-group\"\r\n                v-model=\"state.filter\"\r\n                @reset=\"state.filter = ''\"\r\n                :label=\"$Resources.SearchCustomFontsLabel\"\r\n                glyph=\"search\"></BSFormSearch>\r\n\r\n            <div class=\"alert alert-info alert-fixed-i\" v-show=\"state.total === 0 && state.fonts !== null\">\r\n                <p>\r\n                    <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\r\n                    {{ $Resources.CustomFontsAlertNoResult }}\r\n                </p>\r\n            </div>\r\n\r\n            <h5 v-show=\"state.selectedFonts.length > 0\">{{ $Resources.CustomFontsModalSelectedFontsHeading }}</h5>\r\n\r\n            <ul v-show=\"state.selectedFonts.length > 0\" class=\"tag-list list-unstyled clearfix\">\r\n                <template v-for=\"font in state.selectedFonts\" :key=\"font.family\">\r\n                    <li v-for=\"variant in font.variants\" :key=\"variant\">\r\n                        <span class=\"tag p-0-r\">\r\n                            {{ font.family }} ({{ variant }})\r\n                            <span role=\"button\" class=\"tag-remove\" @click=\"toggleFont(font.family, variant)\">\r\n                                <i class=\"glyphicon glyphicon-remove\"></i>\r\n                            </span>\r\n                        </span>\r\n                    </li>\r\n                </template>\r\n            </ul>\r\n\r\n            <ul class=\"list-unstyled list-border-divider list-item-state-hover m-lg-b\">\r\n                <li class=\"p-lg-t p-sm-b p-lg-l p-lg-r\" v-for=\"(font, index) in filterFonts(state.fonts)\" :key=\"font.family\">\r\n                    <p class=\"strong\">{{ font.family }}</p>\r\n\r\n                    <span v-html=\"fontStyle(font.family, font.variants)\"></span>\r\n                    <span\r\n                        class=\"font-preview h1 d-block m-0-t\"\r\n                        :style=\"{\r\n                            'font-family': font.family,\r\n                        }\">\r\n                        Black as midnight on a moonless night.\r\n                    </span>\r\n\r\n                    <div v-if=\"font.variants.length === 1\">\r\n                        <!--\r\n                        <div class=\"form-group m-sm-b\" v-if=\"props.familyParam === undefined\">\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"btn btn-default btn-sm\"\r\n                                :class=\"{ 'btn-primary': isSelected(font.family, font.variants[0]) }\"\r\n                                @click=\"toggleFont(font.family, font.variants[0])\">\r\n                                {{ $Resources.FontLibrarySelectFontBtn }}\r\n                            </button>\r\n                        </div>\r\n\r\n                        <div class=\"form-group m-sm-b\" v-if=\"props.familyParam !== undefined\">\r\n                            <button type=\"button\" class=\"btn btn-default btn-sm\" @click=\"useFont(font, font.variants[0])\">\r\n                                {{ $Resources.FontLibraryUseFontBtn }}\r\n                            </button>\r\n                        </div>\r\n                        -->\r\n\r\n                        <div class=\"form-group m-sm-b\">\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"btn btn-default btn-sm\"\r\n                                :class=\"{ 'btn-primary': isSelected(font.family, font.variants[0]) }\"\r\n                                @click=\"toggleFont(font.family, font.variants[0])\">\r\n                                {{ $Resources.FontLibrarySelectFontBtn }}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"form-group m-sm-b\" v-if=\"font.variants.length > 1\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"btn btn-default btn-sm collapse-toggle\"\r\n                            @click=\"() => (toggle !== index ? (toggle = index) : (toggle = null))\"\r\n                            :aria-expanded=\"toggle === index\">\r\n                            {{ $Resources.FontLibrarySelectVariantToggleBtn }}...\r\n                        </button>\r\n                    </div>\r\n\r\n                    <Collapse :open=\"toggle === index\">\r\n                        <ul class=\"list-unstyled d-flex flex-wrap gap-xs m-sm-b\">\r\n                            <li v-for=\"(variant, index) in font.variants\" :key=\"variant\">\r\n                                <button\r\n                                    v-if=\"props.familyParam !== undefined\"\r\n                                    type=\"button\"\r\n                                    class=\"btn btn-default btn-sm\"\r\n                                    :class=\"{ 'btn-primary': isSelected(font.family, variant) }\"\r\n                                    @click=\"toggleFont(font.family, variant)\">\r\n                                    {{ variant }}\r\n                                </button>\r\n\r\n                                <!--\r\n\t\t\t\t\t\t\t\t<button v-if=\"props.familyParam === undefined\" type=\"button\" class=\"btn btn-default btn-sm\" @click=\"useFont(font, variant)\">\r\n\t\t\t\t\t\t\t\t\t{{ variant }}\r\n\t\t\t\t\t\t\t\t</button>\r\n                                -->\r\n                            </li>\r\n                        </ul>\r\n                    </Collapse>\r\n                </li>\r\n            </ul>\r\n\r\n            <div class=\"form-group\">\r\n                <button type=\"button\" class=\"btn btn-default btn-block\" @click=\"showMore\" v-show=\"state.total > state.showing\">\r\n                    {{ $Resources.LoadMoreBtnText }}\r\n                </button>\r\n            </div>\r\n\r\n            <Loading :show=\"state.fonts === null\"></Loading>\r\n        </tab>\r\n        <tab :title=\"$Resources.CustomFontsLabelText\" v-if=\"props.customFonts\">\r\n            <ul class=\"list-unstyled list-border-divider list-item-state-hover m-lg-b\">\r\n                <li class=\"p-lg-t p-sm-b p-lg-l p-lg-r\" v-for=\"(customFont, index) in props.customFonts\">\r\n                    <p class=\"strong\">{{ customFont['font-family'] }}</p>\r\n\r\n                    <span v-html=\"'<style>' + customFontsImport([customFont]) + '</style>'\"></span>\r\n\r\n                    <span\r\n                        class=\"font-preview h1 d-block m-0-t\"\r\n                        v-show=\"customFont['font-family'] && customFont.src\"\r\n                        :style=\"{\r\n                            'font-family': customFont['font-family'],\r\n                        }\">\r\n                        Black as midnight on a moonless night.\r\n                    </span>\r\n\r\n                    <div class=\"d-flex m-sm-b gap-sm\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"btn btn-default btn-sm collapse-toggle\"\r\n                            @click=\"() => (customFontToggle !== index ? (customFontToggle = index) : (customFontToggle = null))\"\r\n                            :aria-expanded=\"customFontToggle === index\">\r\n                            {{ $Resources.CustomFontsEditButton }}\r\n                        </button>\r\n                        <button type=\"button\" class=\"btn btn-default btn-sm\" @click=\"$emit('removeCustomFont', index)\">\r\n                            {{ $Resources.CustomFontsRemoveButton }}\r\n                        </button>\r\n                    </div>\r\n\r\n                    <Collapse :open=\"customFontToggle === index\">\r\n                        <template v-for=\"(value, key) in customFont\">\r\n                            <template v-if=\"key != 'customFontId'\">\r\n                                <BSFormInputText\r\n                                    class=\"form-group\"\r\n                                    :modelValue=\"value\"\r\n                                    @update:modelValue=\"(newValue) => $emit('update:customFont', key, newValue, index)\"\r\n                                    :label=\"key as string\"\r\n                                    :placeholder=\"getPlaceholder(key as string)\"></BSFormInputText>\r\n                            </template>\r\n                        </template>\r\n                    </Collapse>\r\n                </li>\r\n            </ul>\r\n\r\n            <div class=\"form-group\">\r\n                <button type=\"button\" class=\"btn btn-default\" @click=\"addCustomFont\">{{ $Resources.CustomFontsAddButton }}</button>\r\n            </div>\r\n        </tab>\r\n    </tabs>\r\n</template>\r\n\r\n<style lang=\"less\">\r\n    .font-preview {\r\n        font-weight: normal;\r\n        line-height: 1;\r\n    }\r\n</style>\r\n\r\n<style scoped lang=\"less\"></style>\r\n","<script setup lang=\"ts\">\r\n    import { ref, watch, onMounted } from 'vue';\r\n    import { vPopoverInfo } from '@shared/utils/directives/popovers';\r\n\r\n    const props = defineProps<{\r\n        modelValue?: string | number;\r\n        label: string;\r\n        infoText?: string;\r\n        min: number;\r\n        max: number;\r\n        suffix?: string;\r\n        step?: number;\r\n    }>();\r\n\r\n    onMounted(async () => {\r\n        if (props.modelValue) updateSliderProgress(props.modelValue);\r\n    });\r\n\r\n    watch(\r\n        () => props.modelValue,\r\n        (newValue) => {\r\n            if (!newValue) return;\r\n            updateSliderProgress(newValue);\r\n        }\r\n    );\r\n\r\n    const input = ref<HTMLElement | null>(null);\r\n\r\n    const emit = defineEmits(['update:modelValue']);\r\n\r\n    const update = (newValue: string) => {\r\n        updateSliderProgress(newValue);\r\n        emit('update:modelValue', props.suffix ? parseInt(newValue as string) + props.suffix : newValue);\r\n    };\r\n\r\n    const updateSliderProgress = (newValue: string | number) => {\r\n        newValue = typeof (newValue === 'string') ? parseInt(newValue as string) : newValue;\r\n        let progress = (100 / (props.max - props.min)) * ((newValue as number) - props.min);\r\n        input.value && input.value.setAttribute('style', '--slider-progress:' + progress + '%');\r\n    };\r\n</script>\r\n\r\n<script lang=\"ts\"></script>\r\n\r\n<template>\r\n    <div>\r\n        <label :for=\"'range-slider-' + $.uid\">\r\n            {{ props.label }}:\r\n            <button\r\n                v-if=\"props.infoText\"\r\n                type=\"button\"\r\n                class=\"popover-trigger\"\r\n                v-popover-info.right=\"{\r\n                    heading: props.label,\r\n                    body: props.infoText,\r\n                }\">\r\n                <span class=\"glyphicon glyphicon-info-sign\" aria-hidden=\"true\"></span>\r\n            </button>\r\n        </label>\r\n\r\n        <div class=\"range-slider-container\">\r\n            <input\r\n                ref=\"input\"\r\n                type=\"range\"\r\n                :value=\"typeof (props.modelValue === 'string') ? parseInt(props.modelValue as string) : props.modelValue\"\r\n                :id=\"'range-slider-' + $.uid\"\r\n                :min=\"props.min\"\r\n                :max=\"props.max\"\r\n                :step=\"props.step\"\r\n                @input=\"update(($event.target as any).value)\" />\r\n\r\n            <input\r\n                class=\"form-control label-look\"\r\n                type=\"text\"\r\n                :value=\"props.modelValue\"\r\n                :id=\"'range-slider-helper-' + $.uid\"\r\n                @focusout=\"update(($event.target as any).value)\" />\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<style scoped></style>\r\n\r\n<style lang=\"less\"></style>\r\n","<script setup lang=\"ts\">\r\n    import RangeSliderNative from '@shared/components/RangeSliderNative.vue';\r\n    import { type typeSlider, type TypeCols } from './defaultSettings';\r\n\r\n    const props = defineProps<{\r\n        modelValue: string;\r\n        // cssVarName: string\r\n        options: typeSlider;\r\n    }>();\r\n</script>\r\n\r\n<script lang=\"ts\">\r\n    export default {\r\n        name: 'Slider',\r\n    };\r\n</script>\r\n\r\n<template>\r\n    <h5 v-if=\"props.options.heading\" class=\"m-0-t m-xs-b\">{{ props.options.heading }}</h5>\r\n\r\n    <RangeSliderNative\r\n        class=\"form-group\"\r\n        :modelValue=\"props.modelValue || ''\"\r\n        @update:modelValue=\"(newValue) => $emit('update:slider', /*props.cssVarName, */ newValue)\"\r\n        :label=\"options.label\"\r\n        :min=\"options.min\"\r\n        :max=\"options.max\"\r\n        :step=\"options.step\"\r\n        :suffix=\"options.unit\"></RangeSliderNative>\r\n</template>\r\n\r\n<style scoped></style>\r\n\r\n<style lang=\"less\"></style>\r\n","<script setup lang=\"ts\">\r\n    import { onMounted, reactive, ref, watch } from 'vue';\r\n    import { vPopoverInfo } from '@shared/utils/directives/popovers';\r\n    import { type ColorModes } from '@shared/components/DesignSettings/defaultSettings';\r\n\r\n    const props = defineProps<{\r\n        modelValue: string;\r\n        label: string;\r\n        infoText?: string;\r\n        mode?: ColorModes;\r\n    }>();\r\n\r\n    const defaultHex = '#000000';\r\n\r\n    const state = reactive<{\r\n        color: string;\r\n        colorPickerValue: string;\r\n    }>({\r\n        color: defaultHex,\r\n        colorPickerValue: defaultHex,\r\n    });\r\n\r\n    const colorInputEl = ref<HTMLInputElement | null>(null);\r\n\r\n    onMounted(async () => {\r\n        init();\r\n    });\r\n\r\n    const init = () => {\r\n        if (props.mode === 'rgbValues' && isRgb('rgb(' + props.modelValue + ')')) {\r\n            state.color = 'rgb(' + props.modelValue + ')';\r\n        } else {\r\n            state.color = props.modelValue;\r\n        }\r\n\r\n        state.colorPickerValue = toHex(state.color);\r\n    };\r\n\r\n    const regexLongHex = /^#[a-fA-F0-9]{6}$/; // #000000\r\n    const regexShortHex = /^#[a-fA-F0-9]{3}$/; // #000\r\n    const regex0to255 = '([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|2[0-5][0-5])'; // 0-255\r\n\r\n    const isHex = (color: string) => {\r\n        return (color && regexLongHex.test(color)) || (color && regexShortHex.test(color));\r\n    };\r\n\r\n    const isRgb = (color: string) => {\r\n        let regexSeparator = color.includes(',') ? '(\\\\,|\\\\,\\\\s)' : '(\\\\s)';\r\n        let regexRgb = '^rgb\\\\(' + regex0to255 + regexSeparator + regex0to255 + regexSeparator + regex0to255 + '\\\\)$';\r\n        let regexRgbObj = new RegExp(regexRgb);\r\n\r\n        return color && regexRgbObj.test(color);\r\n    };\r\n\r\n    const isValidColor = (color: string) => {\r\n        return (color && isHex(color)) || isRgb(color);\r\n    };\r\n\r\n    const toHex = (color: string) => {\r\n        if (!color) return color;\r\n        if (isHex(color)) return toLongHex(color);\r\n        if (!isRgb(color)) return color;\r\n\r\n        let separator = color.includes(',') ? ',' : ' ';\r\n        let values = color.match(/\\((.*)\\)/);\r\n\r\n        if (!values) return color; // defaultHex\r\n\r\n        let rgb = values[1].split(separator);\r\n        let r = (+rgb[0]).toString(16);\r\n        let g = (+rgb[1]).toString(16);\r\n        let b = (+rgb[2]).toString(16);\r\n\r\n        if (r.length == 1) r = '0' + r;\r\n        if (g.length == 1) g = '0' + g;\r\n        if (b.length == 1) b = '0' + b;\r\n\r\n        return '#' + r + g + b;\r\n    };\r\n\r\n    const toLongHex = (color: string) => {\r\n        if (!regexShortHex.test(color)) return color;\r\n        return color[0] + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];\r\n    };\r\n\r\n    const toRgb = (color: string) => {\r\n        if (!color) return color;\r\n        if (isRgb(color)) return color;\r\n        if (!isHex(color)) return color; // is returning invalid color here\r\n\r\n        color = toLongHex(color);\r\n\r\n        let r = parseInt(color.charAt(1) + color.charAt(2), 16);\r\n        let g = parseInt(color.charAt(3) + color.charAt(4), 16);\r\n        let b = parseInt(color.charAt(5) + color.charAt(6), 16);\r\n\r\n        return 'rgb(' + r + ', ' + g + ', ' + b + ')';\r\n    };\r\n\r\n    const valueChanged = (event: Event) => {\r\n        let target = <HTMLInputElement>event.target;\r\n        let newValue = target.value;\r\n\r\n        state.color = newValue;\r\n\r\n        if (!isValidColor(newValue)) return;\r\n\r\n        state.colorPickerValue = toHex(newValue);\r\n\r\n        triggerUpdate(newValue);\r\n    };\r\n\r\n    const pickerValueChanged = (event: Event) => {\r\n        let target = <HTMLInputElement>event.target;\r\n        let newValue = target.value;\r\n\r\n        state.colorPickerValue = newValue;\r\n        state.color = newValue;\r\n\r\n        triggerUpdate(newValue);\r\n    };\r\n\r\n    const emit = defineEmits(['update:modelValue']);\r\n\r\n    const triggerUpdate = (newValue: string) => {\r\n        if (props.mode === 'hex') newValue = toHex(newValue);\r\n        if (props.mode === 'rgb') newValue = toRgb(newValue);\r\n        if (props.mode === 'rgbValues') {\r\n            newValue = toRgb(newValue).replace('rgb(', '').replace(')', '');\r\n        }\r\n\r\n        emit('update:modelValue', newValue);\r\n    };\r\n</script>\r\n\r\n<script lang=\"ts\"></script>\r\n\r\n<template>\r\n    <div :class=\"{ 'has-error': !isValidColor(state.color) }\">\r\n        <label :for=\"'color-picker-' + $.uid\">\r\n            {{ props.label }}:\r\n            <button\r\n                v-if=\"props.infoText\"\r\n                type=\"button\"\r\n                class=\"popover-trigger\"\r\n                v-popover-info.right=\"{\r\n                    heading: props.label,\r\n                    body: props.infoText,\r\n                }\">\r\n                <span class=\"glyphicon glyphicon-info-sign\" aria-hidden=\"true\"></span>\r\n            </button>\r\n        </label>\r\n        <div class=\"color-picker-container\">\r\n            <div class=\"form-control\">\r\n                <input ref=\"colorInputEl\" type=\"color\" :id=\"'color-picker-' + $.uid\" :value=\"state.colorPickerValue\" @input=\"pickerValueChanged\" />\r\n            </div>\r\n            <label class=\"sr-only\" :id=\"'color-value-' + $.uid\">{{ $Resources.ColorPickerInputLabel }}:</label>\r\n            <input\r\n                class=\"form-control p-sm-l\"\r\n                type=\"text\"\r\n                :id=\"'color-value-' + $.uid\"\r\n                :placeholder=\"$Resources.ColorPickerInputPlaceholder\"\r\n                :value=\"state.color\"\r\n                @input=\"valueChanged\"\r\n                @focus=\"colorInputEl!.showPicker()\" />\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<style scoped></style>\r\n\r\n<style lang=\"less\">\r\n    .color-picker-container {\r\n        display: flex;\r\n\r\n        div.form-control {\r\n            position: relative;\r\n            overflow: hidden;\r\n            overflow: hidden;\r\n            width: 30px;\r\n            height: 40px;\r\n            padding: 0;\r\n            border-radius: 2px 0 0 2px;\r\n            border-right: none;\r\n\r\n            input[type='color'] {\r\n                border: none;\r\n                padding: 0;\r\n                position: absolute;\r\n                inset: -10px;\r\n                width: 60px;\r\n                height: 60px;\r\n                cursor: pointer;\r\n            }\r\n        }\r\n\r\n        input[type='text'] {\r\n            flex: 1;\r\n            border-radius: 0 2px 2px 0;\r\n        }\r\n    }\r\n</style>\r\n","<script setup lang=\"ts\">\r\n    import ColorPickerNative from '@shared/components/ColorPickers/ColorPickerNative.vue';\r\n    import { type typeColor, type TypeCols, type ColorModes } from './defaultSettings';\r\n\r\n    const props = defineProps<{\r\n        modelValue: string;\r\n        options: typeColor;\r\n    }>();\r\n</script>\r\n\r\n<script lang=\"ts\">\r\n    export default {\r\n        name: 'Color',\r\n    };\r\n</script>\r\n\r\n<template>\r\n    <h5 v-if=\"props.options.heading\" class=\"m-0-t m-xs-b\">{{ props.options.heading }}</h5>\r\n\r\n    <ColorPickerNative\r\n        class=\"form-group\"\r\n        :modelValue=\"props.modelValue || ''\"\r\n        :mode=\"options.mode\"\r\n        @update:modelValue=\"(newValue) => $emit('update:color', newValue)\"\r\n        :label=\"options.label\"></ColorPickerNative>\r\n</template>\r\n\r\n<style scoped></style>\r\n\r\n<style lang=\"less\"></style>\r\n","<script setup lang=\"ts\">\r\n    import { type typeToggle, type TypeCols } from './defaultSettings';\r\n\r\n    const props = defineProps<{\r\n        modelValue: string;\r\n        options: typeToggle;\r\n    }>();\r\n</script>\r\n\r\n<script lang=\"ts\">\r\n    export default {\r\n        name: 'Toggle',\r\n    };\r\n</script>\r\n\r\n<template>\r\n    <h5 class=\"m-0-t label-look\">{{ props.options.heading }}</h5>\r\n    <div class=\"btn-group m-lg-b d-flex\" role=\"group\">\r\n        <template v-for=\"option in props.options.toggleOptions\">\r\n            <button\r\n                :class=\"{ 'btn-primary': props.modelValue === option.value }\"\r\n                @click=\"() => $emit('update:toggle', option.value)\"\r\n                type=\"button\"\r\n                class=\"btn btn-default\">\r\n                {{ option.label }}\r\n            </button>\r\n        </template>\r\n    </div>\r\n</template>\r\n\r\n<style scoped></style>\r\n\r\n<style lang=\"less\"></style>\r\n","<script setup lang=\"ts\">\r\n    import { reactive, watch, onMounted } from 'vue';\r\n    import { vPopoverInfo } from '@shared/utils/directives/popovers';\r\n    import { type FontsReference } from './FontTypes';\r\n    import InputCheckbox from '@shared/components/InputCheckbox.vue';\r\n    import BSFormInputText from '@shared/components/BSFormInputText.vue';\r\n    import { type FontFaceProps } from '@shared/components/FontTypes';\r\n\r\n    const props = defineProps<{\r\n        fontFamily: string;\r\n        googleFonts?: FontsReference[];\r\n        // selectCustomBy?: 'select' | 'button'\r\n        customFonts?: FontFaceProps[];\r\n    }>();\r\n\r\n    const state = reactive<{\r\n        selected: string;\r\n        selectedCustom: string;\r\n        customFonts: string[];\r\n        basicFonts: string[];\r\n        fontUi: boolean;\r\n    }>({\r\n        selected: '',\r\n        selectedCustom: '',\r\n        customFonts: [],\r\n        basicFonts: [\r\n            'Helvetica, Arial, sans-serif',\r\n            'Arial, Helvetica, sans-serif',\r\n            \"Gadget, 'Arial Black', sans-serif\",\r\n            \"'Comic Sans MS', cursive\",\r\n            \"Courier, 'Courier New', monospace\",\r\n            'Georgia, serif',\r\n            'Charcoal, Impact, sans-serif',\r\n            \"Monaco, 'Lucida Console', monospace\",\r\n            \"'Lucida Grande', 'Lucida Sans Unicode', sans-serif\",\r\n            \"Palatino, 'Palatino Linotype', 'Book Antiqua', serif\",\r\n            'Tahoma, Geneva, sans-serif',\r\n            \"Times, 'Times New Roman', serif\",\r\n            \"Helvetica, 'Trebuchet MS', sans-serif\",\r\n            'Verdana, Geneva, sans-serif',\r\n            \"'MS Sans Serif', Geneva, sans-serif\",\r\n            \"'MS Serif', 'New York', serif\",\r\n            'sans-serif',\r\n            'serif',\r\n        ],\r\n        fontUi: true,\r\n    });\r\n\r\n    const splitIncoming = (newValue: string) => {\r\n        if (!state.fontUi) return;\r\n\r\n        const isBasic = state.basicFonts.find((basicFont) => basicFont === newValue);\r\n\r\n        if (isBasic) {\r\n            state.selected = newValue;\r\n            state.selectedCustom = '';\r\n        } else {\r\n            const split = props.fontFamily.split(',');\r\n            const firstFont = split[0].replaceAll(\"'\", '').trim();\r\n            const rest = split[1] ? props.fontFamily.replace(split[0] + ', ', '') : '';\r\n\r\n            !state.basicFonts.includes(rest) && state.basicFonts.push(rest);\r\n\r\n            state.selectedCustom = firstFont;\r\n            state.selected = rest;\r\n        }\r\n\r\n        getCustomFonts();\r\n    };\r\n\r\n    const getCustomFonts = () => {\r\n        let output = hasCustomSelected() ? [state.selectedCustom] : [];\r\n\r\n        props.googleFonts?.forEach((googleFont) => {\r\n            output.indexOf(googleFont.family) === -1 && output.push(googleFont.family);\r\n        });\r\n\r\n        props.customFonts?.forEach((customFont) => {\r\n            output.indexOf(customFont['font-family']) === -1 && output.push(customFont['font-family']);\r\n        });\r\n\r\n        state.customFonts = output;\r\n    };\r\n\r\n    const emit = defineEmits(['update:selected', 'update:showLibrary']);\r\n\r\n    const updateSelectedFont = () => {\r\n        let newValue = hasCustomSelected() ? \"'\" + state.selectedCustom + \"'\" : '';\r\n        newValue += hasSelected() && hasCustomSelected() ? ', ' + state.selected : state.selected;\r\n\r\n        emit('update:selected', newValue);\r\n    };\r\n\r\n    const hasSelected = () => state.selected.length > 0;\r\n    const hasCustomSelected = () => state.selectedCustom.length > 0;\r\n\r\n    onMounted(async () => {\r\n        splitIncoming(props.fontFamily);\r\n    });\r\n\r\n    watch(\r\n        () => props.fontFamily,\r\n        () => {\r\n            splitIncoming(props.fontFamily);\r\n        }\r\n    );\r\n\r\n    watch(\r\n        () => props.googleFonts,\r\n        () => {\r\n            getCustomFonts();\r\n        }\r\n    );\r\n\r\n    watch(\r\n        () => props.customFonts,\r\n        () => {\r\n            getCustomFonts();\r\n        },\r\n        { deep: true }\r\n    );\r\n\r\n    /*\r\n\tconst removeCustomFont = () => {\r\n\t\tstate.selectedCustom = ''\r\n\t\tupdateSelectedFont()\r\n\t}\r\n\r\n\tconst toggleFontUi = (newValue: boolean) => {\r\n\t\tstate.fontUi = newValue\r\n\t\tif (newValue) splitIncoming(props.fontFamily)\r\n\t}\r\n    */\r\n</script>\r\n\r\n<script lang=\"ts\"></script>\r\n\r\n<template>\r\n    <div class=\"m-sm-b\">\r\n        <div v-show=\"state.fontUi\">\r\n            <div class=\"d-flex flex-even gap-sm\">\r\n                <div class=\"form-group m-sm-b\">\r\n                    <!--\r\n\t\t\t\t\t<div v-if=\"props.selectCustomBy === 'button'\">\r\n\t\t\t\t\t\t<span class=\"label-look\">{{ $Resources.CustomFontsLabel }}:</span>\r\n\r\n\t\t\t\t\t\t<button class=\"btn btn-default btn-block\" type=\"button\" v-show=\"!state.selectedCustom\" @click=\"$emit('update:showLibrary', true)\">\r\n\t\t\t\t\t\t\t{{ $Resources.ManageCustomFontsBtn }}\r\n\t\t\t\t\t\t</button>\r\n\r\n\t\t\t\t\t\t<div v-show=\"state.selectedCustom\">\r\n\t\t\t\t\t\t\t<div class=\"d-flex gap-xs align-items-center\">\r\n\t\t\t\t\t\t\t\t<span class=\"form-control\" @click=\"$emit('update:showLibrary', true)\">\r\n\t\t\t\t\t\t\t\t\t{{ state.selectedCustom }}\r\n\t\t\t\t\t\t\t\t</span>\r\n\r\n\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\tclass=\"btn btn-default btn-sm p-absolute\"\r\n\t\t\t\t\t\t\t\t\tstyle=\"right: 6px\"\r\n\t\t\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\t\t\tv-show=\"state.selectedCustom\"\r\n\t\t\t\t\t\t\t\t\t@click=\"removeCustomFont\">\r\n\t\t\t\t\t\t\t\t\t<span aria-hidden=\"true\" style=\"transform: scale(2); display: block\">×</span>\r\n\t\t\t\t\t\t\t\t\t<span class=\"sr-only\">[Remove]</span>\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div v-else>\r\n                    -->\r\n                    <label :for=\"'custom-font-' + $.uid\">{{ $Resources.CustomFontsLabelText }}:</label>\r\n                    <select :id=\"'custom-font-' + $.uid\" class=\"form-control\" v-model=\"state.selectedCustom\" @change=\"updateSelectedFont\">\r\n                        <option value=\"\"></option>\r\n                        <option v-for=\"customFont in state.customFonts\" :value=\"customFont\">\r\n                            {{ customFont }}\r\n                        </option>\r\n                    </select>\r\n                    <button class=\"btn btn-default btn-sm m-sm-t\" type=\"button\" @click=\"$emit('update:showLibrary', true)\">\r\n                        {{ $Resources.ManageCustomFontsBtn }}\r\n                    </button>\r\n                    <!--\r\n                    </div>\r\n                    -->\r\n                </div>\r\n                <div class=\"form-group m-sm-b\" :class=\"{ 'has-error': state.selectedCustom && !state.selected }\">\r\n                    <label :for=\"'basic-font-' + $.uid\">\r\n                        <span v-show=\"!hasCustomSelected()\">{{ $Resources.FontsLabel }}:</span>\r\n                        <span v-show=\"hasCustomSelected()\">\r\n                            {{ $Resources.FallbackFontsLabel }}:\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"popover-trigger\"\r\n                                v-popover-info.left=\"{\r\n                                    heading: $Resources.FallbackFontsLabel,\r\n                                    body: $Resources.CustomFontsLabelHelpText,\r\n                                }\">\r\n                                <span class=\"glyphicon glyphicon-info-sign\" aria-hidden=\"true\"></span>\r\n                            </button>\r\n                        </span>\r\n                    </label>\r\n\r\n                    <select :id=\"'basic-font-' + $.uid\" class=\"form-control\" v-model=\"state.selected\" @change=\"updateSelectedFont\">\r\n                        <option value=\"\"></option>\r\n                        <option v-for=\"font in state.basicFonts\" :value=\"font\">{{ font }}</option>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div v-show=\"!state.fontUi\">\r\n            <BSFormInputText\r\n                class=\"form-group m-sm-b\"\r\n                :modelValue=\"props.fontFamily\"\r\n                @update:modelValue=\"(newValue) => emit('update:selected', newValue)\"\r\n                label=\"[Font-family]\"\r\n                placeholder=\"\"></BSFormInputText>\r\n        </div>\r\n\r\n        <!--\r\n\t\t<div class=\"form-group\" v-if=\"props.selectCustomBy === 'button'\">\r\n\t\t\t<InputCheckbox :checked=\"state.fontUi\" @update:checked=\"toggleFontUi\"><template #label>[Show font UI]</template></InputCheckbox>\r\n\t\t</div>\r\n        -->\r\n    </div>\r\n</template>\r\n\r\n<style scoped></style>\r\n\r\n<style lang=\"less\"></style>\r\n","<script setup lang=\"ts\">\r\n    import FontSelector from '@shared/components/FontSelector.vue';\r\n    import { type FontsReference } from '@shared/components/FontTypes';\r\n    import { type typeFont, type TypeCols } from './defaultSettings';\r\n    import { type FontFaceProps } from '@shared/components/FontTypes';\r\n\r\n    const props = defineProps<{\r\n        modelValue: string;\r\n        cssVarName?: string;\r\n        googleFonts?: FontsReference[];\r\n        options?: typeFont;\r\n        customFonts?: FontFaceProps[];\r\n    }>();\r\n</script>\r\n\r\n<script lang=\"ts\">\r\n    export default {\r\n        name: 'Font',\r\n    };\r\n</script>\r\n\r\n<template>\r\n    <h5 v-if=\"props.options && props.options.heading\" class=\"m-0-t m-xs-b\">{{ props.options.heading }}</h5>\r\n\r\n    <FontSelector\r\n        :googleFonts=\"props.googleFonts\"\r\n        :customFonts=\"props.customFonts\"\r\n        :fontFamily=\"props.modelValue || ''\"\r\n        @update:selected=\"(newValue) => $emit('update:font', newValue)\"\r\n        @update:showLibrary=\"(newValue) => $emit('update:showLibrary', newValue)\"></FontSelector>\r\n</template>\r\n\r\n<style scoped></style>\r\n\r\n<style lang=\"less\"></style>\r\n","<script setup lang=\"ts\">\r\n    import { ref } from 'vue';\r\n    import Collapse from '@shared/components/Collapse.vue';\r\n    import Modal from '@shared/components/Modal.vue';\r\n    import FontLibrary from '@shared/components/FontLibrary.vue';\r\n    import Slider from '@shared/components/DesignSettings/Slider.vue';\r\n    import Color from '@shared/components/DesignSettings/Color.vue';\r\n    import Toggle from '@shared/components/DesignSettings/Toggle.vue';\r\n    import Font from '@shared/components/DesignSettings/Font.vue';\r\n    import { type FontFaceProps } from '@shared/components/FontTypes';\r\n\r\n    const props = defineProps<{\r\n        cssVars: { [key: string]: string };\r\n        designSettings: TypeDesignSettings;\r\n        availableFonts: FontsReference[];\r\n        googleFonts: string;\r\n        customFonts?: FontFaceProps[];\r\n        skipGroupNamePrefix?: true;\r\n    }>();\r\n\r\n    let toggle = ref<string | null>(null);\r\n    let showFontLibrary = ref<boolean>(false);\r\n\r\n    const emit = defineEmits([\r\n        'update:cssVars',\r\n        'update:theme',\r\n        'update:googleFonts',\r\n        'update:availableFonts',\r\n        'update:customFont',\r\n        'addCustomFont',\r\n        'removeCustomFont',\r\n    ]);\r\n\r\n    const getCssVar = (key: string) => {\r\n        return props.cssVars[key];\r\n    };\r\n\r\n    const getKey = (setting: TypeUis, design: TypeGroup) => {\r\n        return props.skipGroupNamePrefix ? setting.name : design.groupName + setting.name;\r\n    };\r\n</script>\r\n\r\n<script lang=\"ts\">\r\n    import { type FontsReference } from '@shared/components/FontTypes';\r\n    import { type TypeDesignSettings, type TypeUis, type TypeGroup } from '@shared/components/DesignSettings/defaultSettings';\r\n</script>\r\n\r\n<template>\r\n    <ul class=\"list-unstyled list-border-divider m-neg-lg-r m-neg-lg-l m-lg-b\">\r\n        <li v-for=\"design in props.designSettings\">\r\n            <h4\r\n                :aria-expanded=\"toggle === design.groupName\"\r\n                :aria-controls=\"'design-' + design.groupName\"\r\n                :class=\"{ active: toggle === design.groupName }\"\r\n                role=\"button\"\r\n                class=\"collapse-title collapse-toggle\"\r\n                href=\"javascript:void(0)\"\r\n                @click=\"toggle = toggle === design.groupName ? null : design.groupName\">\r\n                <span>{{ $Resources['FormEditorDesignHeading' + design.groupName] || design.groupName }}</span>\r\n                <span class=\"glyphicon glyphicon-chevron-up\" aria-hidden=\"true\"></span>\r\n            </h4>\r\n\r\n            <Collapse :open=\"toggle === design.groupName\" :id=\"'design-' + design.groupName\">\r\n                <div class=\"p-lg-t p-lg-r p-lg-l\">\r\n                    <ul class=\"list-unstyled flex-row m-sm-b\">\r\n                        <template v-for=\"setting in design.settings\">\r\n                            <li v-if=\"typeof setting === 'string'\" class=\"col-12\">\r\n                                <h4 class=\"m-0-t\" v-if=\"typeof setting === 'string'\">\r\n                                    {{ setting }}\r\n                                </h4>\r\n                            </li>\r\n                            <li v-else :class=\"'col-' + (setting.cols || 12)\">\r\n                                <Slider\r\n                                    v-if=\"setting.type === 'slider'\"\r\n                                    :modelValue=\"getCssVar(getKey(setting, design))\"\r\n                                    :options=\"setting\"\r\n                                    @update:slider=\"(newValue) => $emit('update:cssVars', getKey(setting, design), newValue)\"></Slider>\r\n\r\n                                <Color\r\n                                    v-if=\"setting.type === 'color'\"\r\n                                    :modelValue=\"getCssVar(getKey(setting, design))\"\r\n                                    :options=\"setting\"\r\n                                    @update:color=\"(newValue) => $emit('update:cssVars', getKey(setting, design), newValue)\"></Color>\r\n\r\n                                <Font\r\n                                    v-if=\"setting.type === 'fontSelector'\"\r\n                                    :modelValue=\"getCssVar(getKey(setting, design))\"\r\n                                    :options=\"setting\"\r\n                                    :googleFonts=\"props.availableFonts\"\r\n                                    :customFonts=\"props.customFonts\"\r\n                                    @update:font=\"(newValue) => $emit('update:cssVars', getKey(setting, design), newValue)\"\r\n                                    @update:showLibrary=\"(newValue) => (showFontLibrary = newValue)\"></Font>\r\n\r\n                                <Toggle\r\n                                    v-if=\"setting.type === 'toggle'\"\r\n                                    :modelValue=\"getCssVar(getKey(setting, design))\"\r\n                                    :options=\"setting\"\r\n                                    @update:toggle=\"(newValue) => $emit('update:cssVars', getKey(setting, design), newValue)\"></Toggle>\r\n                            </li>\r\n                        </template>\r\n                    </ul>\r\n                </div>\r\n            </Collapse>\r\n        </li>\r\n    </ul>\r\n\r\n    <Modal :title=\"$Resources.CustomFontsLabelText\" :show=\"showFontLibrary\" @close=\"showFontLibrary = false\" size=\"lg\">\r\n        <template #content>\r\n            <FontLibrary\r\n                :familyParam=\"props.googleFonts\"\r\n                :customFonts=\"props.customFonts\"\r\n                :show=\"showFontLibrary\"\r\n                @update:availableFonts=\"(newValue) => $emit('update:availableFonts', newValue)\"\r\n                @update:familyParam=\"(newValue) => $emit('update:googleFonts', newValue)\"\r\n                @update:customFont=\"(key, newValue, index) => $emit('update:customFont', key, newValue, index)\"\r\n                @addCustomFont=\"$emit('addCustomFont')\"\r\n                @removeCustomFont=\"(index) => $emit('removeCustomFont', index)\"></FontLibrary>\r\n        </template>\r\n    </Modal>\r\n</template>\r\n\r\n<style scoped></style>\r\n\r\n<style lang=\"less\">\r\n    .collapse-title {\r\n        margin: 0;\r\n        padding: 0.938rem 1.25rem;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        transition: background-color 150ms ease-in-out;\r\n\r\n        &:hover,\r\n        &.active {\r\n            background-color: var(--brand-hover-color);\r\n        }\r\n    }\r\n\r\n    .flex-row {\r\n        --_gap: 0.938rem; // 1.25rem;\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        column-gap: var(--_gap);\r\n\r\n        /*\r\n\t\t> li {\r\n\t\t\t// display: flex;\r\n\t\t\t// flex-direction: column;\r\n\t\t\tmargin-top: auto;\r\n\t\t}\r\n        */\r\n\r\n        .col-12 {\r\n            width: 100%;\r\n        }\r\n\r\n        .col-6 {\r\n            width: calc(50% - var(--_gap) / 2);\r\n        }\r\n\r\n        .col-4 {\r\n            width: calc(33.333% - (var(--_gap) * 2) / 3);\r\n        }\r\n    }\r\n</style>\r\n","<script setup lang=\"ts\">\r\n    import { reactive } from 'vue';\r\n\r\n    // const props = defineProps<{}>()\r\n\r\n    const state = reactive<{\r\n        previewDevice: 'desktop' | 'tablet' | 'mobile';\r\n    }>({\r\n        previewDevice: 'desktop',\r\n    });\r\n</script>\r\n\r\n<script lang=\"ts\"></script>\r\n\r\n<template>\r\n    <div class=\"device-select\" :class=\"state.previewDevice\">\r\n        <span>\r\n            <i class=\"fa fa-caret-left\" aria-hidden=\"true\"></i>\r\n            {{ $Resources.PreviewChangeDeviceLabel }}\r\n            <i class=\"fa fa-caret-right\" aria-hidden=\"true\"></i>\r\n        </span>\r\n        <a href=\"javascript:void(0)\" class=\"desktop\" @click=\"state.previewDevice = 'desktop'\">\r\n            <span>\r\n                <i class=\"fa fa-desktop\"></i>\r\n                {{ $Resources.PreviewDesktopLabel }}\r\n            </span>\r\n        </a>\r\n        <a href=\"javascript:void(0)\" class=\"tablet\" @click=\"state.previewDevice = 'tablet'\">\r\n            <span>\r\n                <i class=\"fa fa-tablet\"></i>\r\n                {{ $Resources.PreviewTabletLabel }}\r\n            </span>\r\n        </a>\r\n        <a href=\"javascript:void(0)\" class=\"phone\" @click=\"state.previewDevice = 'mobile'\">\r\n            <span>\r\n                <i class=\"fa fa-mobile-phone\"></i>\r\n                {{ $Resources.PreviewPhoneLabel }}\r\n            </span>\r\n        </a>\r\n    </div>\r\n</template>\r\n\r\n<style lang=\"less\">\r\n    .canvas-container {\r\n        --_mobile-width: 375px;\r\n        --_mobile-height: 667px;\r\n        --_deviceSelectHeight: 25px;\r\n    }\r\n\r\n    .device-select {\r\n        background-color: #fff;\r\n        font-size: small;\r\n        position: sticky;\r\n        top: 0;\r\n        height: var(--_deviceSelectHeight);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);\r\n\r\n        > a > span,\r\n        > span {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 5px;\r\n            height: var(--_deviceSelectHeight);\r\n        }\r\n\r\n        > a {\r\n            position: absolute;\r\n            width: 100%;\r\n            border-width: 0 1px;\r\n            border-style: dashed;\r\n            border-color: var(--brand-primary-500);\r\n\r\n            > span {\r\n                opacity: 0;\r\n            }\r\n\r\n            &:hover {\r\n                background-color: var(--brand-primary-500);\r\n                color: #fff;\r\n\r\n                > span {\r\n                    opacity: 1;\r\n                }\r\n\r\n                &:after {\r\n                    content: '';\r\n                    background: rgba(0, 0, 0, 0.1);\r\n                    left: -1px;\r\n                    right: -1px;\r\n                    top: var(--_deviceSelectHeight);\r\n                    bottom: 0;\r\n                    position: absolute;\r\n                    height: calc(100vh - var(--_deviceSelectHeight));\r\n                    pointer-events: none;\r\n                    border-width: 0 1px;\r\n                    border-style: dashed;\r\n                    border-color: var(--brand-primary-500);\r\n                }\r\n            }\r\n\r\n            &.tablet {\r\n                width: 820px;\r\n                z-index: 1;\r\n            }\r\n\r\n            &.phone {\r\n                width: var(--_mobile-width);\r\n                z-index: 2;\r\n            }\r\n        }\r\n    }\r\n\r\n    .device-select + * {\r\n        transition:\r\n            width 300ms ease-in-out,\r\n            height 300ms ease-in-out;\r\n    }\r\n\r\n    .device-select:not(.mobile) + * {\r\n        iframe {\r\n            height: calc(100vh - var(--_deviceSelectHeight));\r\n        }\r\n    }\r\n\r\n    .device-select.mobile + * {\r\n        width: var(--_mobile-width);\r\n        height: var(--_mobile-height);\r\n        background: rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .device-select.tablet + * {\r\n        width: 820px;\r\n    }\r\n</style>\r\n\r\n<style scoped lang=\"less\"></style>\r\n","<script setup lang=\"ts\">\r\n    import PreviewButtons from './PreviewButtons.vue';\r\n    import Loading from '@shared/components/Loading.vue';\r\n\r\n    const props = defineProps<{\r\n        show: any;\r\n        loading?: any;\r\n        paneSide?: 'left' | 'right';\r\n        teleport?: true;\r\n        containerClass?: string;\r\n    }>();\r\n</script>\r\n\r\n<script lang=\"ts\"></script>\r\n\r\n<template>\r\n    <Loading :show=\"props.loading\" :fixed=\"true\"></Loading>\r\n\r\n    <Teleport to=\".main-content\" :disabled=\"!props.teleport\">\r\n        <Transition name=\"editor-appear\" :duration=\"800\">\r\n            <div v-if=\"props.show\" :class=\"[{ 'editor-fixed': props.teleport }, props.containerClass]\">\r\n                <div class=\"editor-container editor-bg d-flex\" :class=\"{ 'pane-right': props.paneSide === 'right' }\">\r\n                    <div class=\"custom-scrollbar pane-container\">\r\n                        <div class=\"container-fluid\">\r\n                            <div class=\"d-flex align-items-center gap-sm navbar-sticky p-sm-t p-sm-b\">\r\n                                <slot name=\"paneNav\"></slot>\r\n                            </div>\r\n\r\n                            <slot name=\"pane\"></slot>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"custom-scrollbar canvas-container\">\r\n                        <PreviewButtons></PreviewButtons>\r\n\r\n                        <div class=\"canvas-wrap\">\r\n                            <slot name=\"canvas\"></slot>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </Transition>\r\n    </Teleport>\r\n</template>\r\n\r\n<style lang=\"less\">\r\n    :root {\r\n        --editor-appear-transition-speed: 300ms;\r\n    }\r\n\r\n    .pane-right {\r\n        flex-direction: row-reverse;\r\n\r\n        .pane-container {\r\n            box-shadow: var(--editor-pane-right-shadow);\r\n        }\r\n    }\r\n\r\n    .editor-fixed {\r\n        position: fixed;\r\n        inset: 0;\r\n        z-index: 5;\r\n        left: var(--nav-width);\r\n    }\r\n\r\n    .editor-bg {\r\n        background-color: #f5f5f5;\r\n        background-image: radial-gradient(circle at 2px 2px, #ddd 2px, transparent 0);\r\n        background-size: 18px 18px;\r\n        height: 100vh;\r\n        overflow: hidden;\r\n    }\r\n\r\n    body:has(.editor-bg) {\r\n        overflow: hidden;\r\n    }\r\n\r\n    .pane-container {\r\n        width: var(--editor-edit-pane-width);\r\n        background-color: var(--bg-color);\r\n        box-shadow: var(--editor-pane-left-shadow);\r\n        position: relative;\r\n        z-index: 1;\r\n    }\r\n\r\n    .canvas-wrap {\r\n        display: flex;\r\n        margin: auto;\r\n        width: 100%;\r\n        height: 100%;\r\n        flex: 1 1 auto;\r\n    }\r\n\r\n    .canvas-container {\r\n        flex: 1;\r\n        display: flex;\r\n        flex-direction: column;\r\n        position: relative;\r\n        height: 100vh;\r\n\r\n        > * {\r\n            flex: 0 1 auto;\r\n        }\r\n    }\r\n\r\n    .nav-collapsed .editor-fixed {\r\n        left: var(--nav-collapsed-width);\r\n    }\r\n\r\n    .editor-appear-enter-active {\r\n        transition: opacity var(--editor-appear-transition-speed) ease-in-out !important;\r\n        overflow: hidden !important;\r\n\r\n        .canvas-container > * {\r\n            transition: opacity var(--editor-appear-transition-speed) ease-in-out var(--editor-appear-transition-speed) !important;\r\n        }\r\n\r\n        .pane-container {\r\n            transition:\r\n                opacity var(--editor-appear-transition-speed) ease-in-out,\r\n                transform var(--editor-appear-transition-speed) ease-in-out !important;\r\n        }\r\n    }\r\n\r\n    .editor-appear-leave-active {\r\n        transition: opacity var(--editor-appear-transition-speed) ease-in-out var(--editor-appear-transition-speed) !important;\r\n        overflow: hidden !important;\r\n\r\n        .canvas-container > * {\r\n            transition: opacity var(--editor-appear-transition-speed) ease-in-out !important;\r\n        }\r\n\r\n        .pane-container {\r\n            transition:\r\n                opacity var(--editor-appear-transition-speed) ease-in-out var(--editor-appear-transition-speed),\r\n                transform var(--editor-appear-transition-speed) ease-in-out var(--editor-appear-transition-speed) !important;\r\n        }\r\n    }\r\n\r\n    .editor-appear-enter-from,\r\n    .editor-appear-leave-to {\r\n        opacity: 0 !important;\r\n\r\n        .canvas-container > * {\r\n            opacity: 0 !important;\r\n        }\r\n\r\n        .pane-container {\r\n            opacity: 0 !important;\r\n            transform: translateX(-25%) !important;\r\n        }\r\n\r\n        .canvas-reversed .pane-container {\r\n            transform: translateX(75%) !important;\r\n        }\r\n    }\r\n</style>\r\n\r\n<style scoped lang=\"less\"></style>\r\n","<script setup lang=\"ts\">\r\n    import { onMounted, ref, watch } from 'vue';\r\n    import BSFormInputLabel from '@shared/components/BSFormInputLabel.vue';\r\n\r\n    const props = defineProps<{\r\n        modelValue: string;\r\n        label: string;\r\n        placeholder?: string;\r\n        infoText?: string;\r\n    }>();\r\n\r\n    const textarea = ref<HTMLInputElement | null>(null);\r\n    const emit = defineEmits(['update:modelValue']);\r\n\r\n    onMounted(async () => {\r\n        onVisible(textarea.value!, setInitHeight);\r\n    });\r\n\r\n    watch(\r\n        () => props.modelValue,\r\n        () => setInitHeight()\r\n    );\r\n\r\n    const setInitHeight = () => {\r\n        setTimeout(() => {\r\n            setHeight();\r\n        }, 0);\r\n    };\r\n\r\n    const setHeight = () => {\r\n        let scrollPos = window.scrollY;\r\n\r\n        textarea.value!.style.height = 'auto';\r\n        textarea.value!.style.height = `${textarea.value!.scrollHeight}px`;\r\n\r\n        document.documentElement.scrollTop = scrollPos; // reset scroll position\r\n    };\r\n\r\n    const update = (target: HTMLInputElement) => {\r\n        setHeight();\r\n        emit('update:modelValue', target.value);\r\n    };\r\n</script>\r\n\r\n<script lang=\"ts\">\r\n    function onVisible(element: HTMLElement, callback: Function) {\r\n        new IntersectionObserver((entries, observer) => {\r\n            entries.forEach((entry) => {\r\n                if (entry.intersectionRatio > 0) {\r\n                    callback(element);\r\n                    observer.disconnect();\r\n                }\r\n            });\r\n        }).observe(element);\r\n    }\r\n</script>\r\n\r\n<template>\r\n    <div>\r\n        <BSFormInputLabel :label=\"props.label\" :id=\"'textarea-' + $.uid\" :infoText=\"props.infoText\"></BSFormInputLabel>\r\n\r\n        <textarea\r\n            ref=\"textarea\"\r\n            class=\"form-control input-focus js-adjust-height\"\r\n            :placeholder=\"props.placeholder\"\r\n            :id=\"'textarea-' + $.uid\"\r\n            :value=\"props.modelValue\"\r\n            @input=\"($event) => update($event.target as HTMLInputElement)\"></textarea>\r\n    </div>\r\n</template>\r\n\r\n<style scoped></style>\r\n\r\n<style lang=\"less\">\r\n    textarea.js-adjust-height {\r\n        resize: none;\r\n        overflow: hidden;\r\n        transition: none !important;\r\n    }\r\n</style>\r\n","import { UserAccountReference } from '@account/Account.access';\r\nimport { api } from '@cwd/lib/main';\r\nimport { type FontFaceProps } from '@shared/components/FontTypes';\r\n\r\nexport type DesignTheme = {\r\n    DesignThemeId?: string;\r\n    Name: string;\r\n    Description: string;\r\n    ThemeCss: string;\r\n    Created?: Date;\r\n    Modified?: Date;\r\n    Settings: DesignThemeSetting[];\r\n    Deleted?: true;\r\n    Account?: UserAccountReference;\r\n};\r\n\r\nexport type DesignThemeSetting = {\r\n    Name: string;\r\n    Value: string;\r\n};\r\n\r\nexport type CssVars = {\r\n    [key: string]: string;\r\n};\r\n\r\nexport type CurrentTheme = {\r\n    Id: string;\r\n    Name: string;\r\n    Description: string;\r\n    LogoSrc: string;\r\n    CssVars: CssVars;\r\n    GoogleFonts: string;\r\n    CustomFonts: FontFaceProps[];\r\n};\r\n\r\nconst accountThemeId = crypto.randomUUID();\r\n\r\nexport const defaultSettings: CssVars = {\r\n    Color: '34, 34, 52',\r\n    BackgroundColor: '255, 255, 255',\r\n    SecondaryColor: '255, 255, 255',\r\n    SecondaryBackgroundColor: '18, 156, 163',\r\n    LinkColor: '0, 124, 131',\r\n    ButtonColor: '255, 255, 255',\r\n    ButtonBackgroundColor: '227 57 96',\r\n    ButtonRadius: '2px',\r\n    ButtonBorderWidth: '1px',\r\n    ButtonBorderColor: '227 57 96',\r\n    ButtonFontWeight: '700',\r\n    ButtonFontFamily: 'Helvetica, Arial, sans-serif',\r\n    ButtonTextTransform: 'none',\r\n    FontFamily: 'Helvetica, Arial, sans-serif',\r\n    HeadingsColor: '34, 34, 52',\r\n    HeadingsFontFamily: 'Helvetica, Arial, sans-serif',\r\n    HeadingsFontWeight: '700',\r\n    GoogleFonts: '',\r\n};\r\n\r\nexport const theme: CurrentTheme = {\r\n    Id: accountThemeId,\r\n    Name: '',\r\n    Description: '',\r\n    LogoSrc: '',\r\n    CssVars: JSON.parse(JSON.stringify(defaultSettings)),\r\n    GoogleFonts: '',\r\n    CustomFonts: [\r\n        /*\r\n        {\r\n            customFontId: '',\r\n            'font-style': 'normal',\r\n            'font-family': 'Vinge Solid',\r\n            'src': 'url(\"https://cdn.ungpd.com/af9eaec3-338f-4b47-88d2-35581b8a40c7/Documents/vinge-solid.woff2\") format(\"woff2\")',\r\n            'font-weight': '400',\r\n        },\r\n        {\r\n            customFontId: '',\r\n            'font-style': 'normal',\r\n            'font-family': 'Vinge Solid TEST',\r\n            'src': 'url(\"https://cdn.ungpd.com/af9eaec3-338f-4b47-88d2-35581b8a40c7/Documents/vinge-solid.woff2\") format(\"woff2\")',\r\n            'font-weight': '400',\r\n        }\r\n    */\r\n    ],\r\n};\r\n\r\nexport interface Event {\r\n    EventId: string;\r\n    Name: string;\r\n    Description: string;\r\n    LastModified: string;\r\n    LastModifiedBy: {\r\n        Name: string;\r\n    };\r\n    Tags: {\r\n        TagId: string;\r\n        Title: string;\r\n    }[];\r\n}\r\n\r\nexport async function loadEvents(state: 'Draft' | 'Published' | 'Ended' = 'Draft'): Promise<Event[]> {\r\n    return api.get('/Events/' + state + '?$orderby=LastModified%20desc');\r\n}\r\n\r\nexport async function getUnfilteredDesignThemes(): Promise<DesignTheme[]> {\r\n    return api.get('/DesignThemes/Unfiltered');\r\n}\r\n\r\nexport async function getDesignThemes(): Promise<DesignTheme[]> {\r\n    return api.get('/DesignThemes/');\r\n}\r\n\r\nexport async function getDesignTheme(designThemeId: string): Promise<DesignTheme> {\r\n    return api.get('/DesignThemes/' + designThemeId);\r\n}\r\n\r\nexport async function getUnfilteredDesignTheme(designThemeId: string): Promise<DesignTheme> {\r\n    return api.get('/DesignThemes/Unfiltered/' + designThemeId);\r\n}\r\n\r\nexport async function createDesignTheme(designTheme: DesignTheme): Promise<DesignTheme> {\r\n    return api.post('/DesignThemes/', designTheme);\r\n}\r\n\r\nexport async function saveDesignTheme(designTheme: DesignTheme): Promise<DesignTheme> {\r\n    return api.post('/DesignThemes/Update', designTheme);\r\n}\r\n\r\nexport async function deleteDesignTheme(designThemeId: string): Promise<void> {\r\n    return api.delete('/DesignThemes/' + designThemeId);\r\n}\r\n","import { api } from '@cwd/lib/main';\r\n\r\nexport type CustomFont = {\r\n    CustomFontId: string;\r\n    FontStyle: string;\r\n    FontFamily: string;\r\n    Source: string;\r\n    FontWeight: string;\r\n    Created?: Date;\r\n    Modified?: Date;\r\n};\r\n\r\nexport async function getCustomFonts(): Promise<CustomFont[]> {\r\n    return api.get('/CustomFonts/');\r\n}\r\n\r\nexport async function getCustomFont(customFontId: string): Promise<CustomFont> {\r\n    return api.get('/CustomFonts/' + customFontId);\r\n}\r\n\r\nexport async function createCustomFont(customFont: CustomFont): Promise<CustomFont> {\r\n    return api.post('/CustomFonts/', customFont);\r\n}\r\n\r\nexport async function saveCustomFont(customFont: CustomFont): Promise<CustomFont> {\r\n    return api.post('/CustomFonts/Update', customFont);\r\n}\r\n\r\nexport async function saveCustomFonts(customFonts: CustomFont[]): Promise<CustomFont[]> {\r\n    return api.post('/CustomFonts/Save', customFonts);\r\n}\r\n\r\nexport async function deleteCustomFont(customFontId: string): Promise<void> {\r\n    return api.delete('/CustomFonts/' + customFontId);\r\n}\r\n","<script setup lang=\"ts\">\r\n    import { ref, reactive } from 'vue';\r\n    import { type FontsReference } from '@shared/components/FontTypes';\r\n    import { type TypeDesignSettings, uis, TypeCols, ColorModes } from '@shared/components/DesignSettings/defaultSettings';\r\n    import DesignSettings from '@shared/components/DesignSettings/DesignSettings.vue';\r\n    import { CssVars } from './Themes.access';\r\n    import { type FontFaceProps } from '@shared/components/FontTypes';\r\n\r\n    const { slider, colorPicker, toggle, fontSelector } = uis;\r\n\r\n    const props = defineProps<{\r\n        cssVars: CssVars;\r\n        googleFonts: string;\r\n        customFonts: FontFaceProps[];\r\n    }>();\r\n\r\n    const state = reactive<{\r\n        designSettings: TypeDesignSettings;\r\n    }>({\r\n        designSettings: [],\r\n    });\r\n\r\n    let availableFonts = ref<FontsReference[]>([]);\r\n\r\n    const emit = defineEmits(['update:cssVars', 'update:googleFonts', 'update:customFont', 'addCustomFont', 'removeCustomFont']);\r\n\r\n    let colorOptions: {\r\n        mode: ColorModes;\r\n        cols: TypeCols;\r\n    } = {\r\n        mode: 'rgbValues',\r\n        cols: 6,\r\n    };\r\n\r\n    const designSettings: TypeDesignSettings = [\r\n        {\r\n            groupName: $Resources.ThemePrimaryColorsHeading,\r\n            settings: [\r\n                colorPicker({ name: 'Color', label: $Resources.ThemePrimaryColorLabel, options: colorOptions }),\r\n                colorPicker({ name: 'BackgroundColor', label: $Resources.ThemePrimaryBackgroundColorLabel, options: colorOptions }),\r\n                colorPicker({ name: 'SecondaryColor', label: $Resources.ThemeSecondaryColorLabel, options: colorOptions }),\r\n                colorPicker({ name: 'SecondaryBackgroundColor', label: $Resources.ThemeSecondaryBackgroundColorLabel, options: colorOptions }),\r\n                colorPicker({ name: 'HeadingsColor', label: $Resources.ThemeHeadingsColorLabel, options: colorOptions }),\r\n                colorPicker({ name: 'LinkColor', label: $Resources.ThemePrimaryLinkColorLabel, options: colorOptions }),\r\n            ],\r\n        },\r\n        {\r\n            groupName: $Resources.ThemeTextHeading,\r\n            settings: [fontSelector({ name: 'FontFamily' })],\r\n        },\r\n        {\r\n            groupName: $Resources.ThemeHeadingsHeading,\r\n            settings: [\r\n                fontSelector({ name: 'HeadingsFontFamily' }),\r\n                toggle({\r\n                    name: 'HeadingsFontWeight',\r\n                    heading: $Resources.FormEditorDesignFontWeightHeading,\r\n                    toggleOptions: [\r\n                        { value: '400', label: $Resources.FormEditorDesignFontWeightNormal },\r\n                        { value: '700', label: $Resources.FormEditorDesignFontWeightBold },\r\n                    ],\r\n                }),\r\n            ],\r\n        },\r\n        {\r\n            groupName: $Resources.ThemeButtonsHeading,\r\n            settings: [\r\n                fontSelector({ name: 'ButtonFontFamily' }),\r\n                toggle({\r\n                    name: 'ButtonFontWeight',\r\n                    heading: $Resources.FormEditorDesignFontWeightHeading,\r\n                    toggleOptions: [\r\n                        { value: '400', label: $Resources.FormEditorDesignFontWeightNormal },\r\n                        { value: '700', label: $Resources.FormEditorDesignFontWeightBold },\r\n                    ],\r\n                    options: { cols: 6 },\r\n                }),\r\n                toggle({\r\n                    name: 'ButtonTextTransform',\r\n                    heading: $Resources.ThemeEditorTextTransformLabel,\r\n                    toggleOptions: [\r\n                        { value: 'none', label: $Resources.ThemeEditorTextTransformNoneLabel },\r\n                        { value: 'uppercase', label: $Resources.ThemeEditorTextTransformUppercaseLabel },\r\n                    ],\r\n                    options: { cols: 6 },\r\n                }),\r\n                colorPicker({ name: 'ButtonColor', label: $Resources.ThemeButtonsColorLabel, options: colorOptions }),\r\n                colorPicker({ name: 'ButtonBackgroundColor', label: $Resources.ThemeButtonsBackgroundColorLabel, options: colorOptions }),\r\n                $Resources.ThemeEditorBorderLabel,\r\n                slider({ name: 'ButtonRadius', label: $Resources.ThemeButtonsRadiusLabel, options: { max: 40, cols: 4 } }),\r\n                slider({ name: 'ButtonBorderWidth', label: $Resources.ThemeButtonsBorderWidthLabel, options: { max: 6, cols: 4 } }),\r\n                colorPicker({ name: 'ButtonBorderColor', label: $Resources.ThemeButtonsBorderColorLabel, options: { ...colorOptions, ...{ cols: 4 } } }),\r\n            ],\r\n        },\r\n    ];\r\n</script>\r\n\r\n<script lang=\"ts\"></script>\r\n\r\n<template>\r\n    <DesignSettings\r\n        :designSettings=\"designSettings\"\r\n        :cssVars=\"props.cssVars\"\r\n        :googleFonts=\"props.googleFonts\"\r\n        :customFonts=\"props.customFonts\"\r\n        :availableFonts=\"availableFonts\"\r\n        :skipGroupNamePrefix=\"true\"\r\n        @update:cssVars=\"(name, newValue) => $emit('update:cssVars', name, newValue)\"\r\n        @update:googleFonts=\"(newValue) => $emit('update:googleFonts', newValue)\"\r\n        @update:availableFonts=\"(newValue) => (availableFonts = newValue)\"\r\n        @update:customFont=\"(key, newValue, index) => $emit('update:customFont', key, newValue, index)\"\r\n        @addCustomFont=\"$emit('addCustomFont')\"\r\n        @removeCustomFont=\"(index) => $emit('removeCustomFont', index)\"></DesignSettings>\r\n</template>\r\n\r\n<style scoped></style>\r\n\r\n<style lang=\"less\"></style>\r\n","<script setup lang=\"ts\">\r\n    import { reactive, ref, watch, watchEffect, onMounted, inject } from 'vue';\r\n    import {\r\n        CurrentTheme,\r\n        theme as defaultTheme,\r\n        defaultSettings,\r\n        loadEvents,\r\n        type Event,\r\n        getDesignTheme,\r\n        getUnfilteredDesignTheme,\r\n        DesignTheme,\r\n        DesignThemeSetting,\r\n        saveDesignTheme,\r\n    } from './Themes.access';\r\n    import { getCustomFonts, CustomFont, saveCustomFonts as SaveCustomFonts } from './CustomFonts.access';\r\n    import { type FontFaceProps } from '@shared/components/FontTypes';\r\n    import design from './Design.vue';\r\n    import BSFormInputText from '@shared/components/BSFormInputText.vue';\r\n    import BSFormInputTextarea from '@shared/components/BSFormInputTextarea.vue';\r\n    import EditorContainer from '@shared/components/Editor/EditorContainer.vue';\r\n    import { googleFontsImport, customFontsImport, getCssVars } from '@views/Web/FormEditor/FormRender.vue';\r\n    import Modal from '@shared/components/Modal.vue';\r\n    import SelectIssueFromList from '@shared/components/SelectIssueFromList.vue';\r\n    // import ImagePreview from '@shared/components/Images/ImagePreview.vue'\r\n    // import { ImageReference } from '@cwd/shared/components/Images/types'\r\n    import BSDropdownButton from '@shared/components/BSDropdownButton.vue';\r\n    import { tmp_uuidv4 } from '@journeys/Journeys.viewmodel';\r\n    import { bsAlert } from '@shared/components/bsAlerts';\r\n    import Tabs, { tab } from '@shared/components/Tabs.vue';\r\n    import { injectorAccessInjectionKey } from '@cwd/lib/provider-keys';\r\n    import { ContextAccess } from '@shared/Root/Context.access';\r\n    import { combineUrlSegments } from '@shared/utils/combineUrlSegments';\r\n\r\n    const injectorAccess = inject(injectorAccessInjectionKey)!;\r\n    const contextAccess: ContextAccess = injectorAccess.injector.get(ContextAccess);\r\n\r\n    const props = defineProps<{\r\n        themeId: string | null;\r\n        eventId?: string;\r\n        backoffice: boolean;\r\n    }>();\r\n\r\n    const state = reactive<{\r\n        showEditor: boolean;\r\n        currentTheme: CurrentTheme | null;\r\n        newTheme: DesignTheme | null;\r\n        customFonts: CustomFont[] | null;\r\n        iframeSrc: string; //  | null\r\n        draftEvents: Event[];\r\n        publishedEvents: Event[];\r\n        endedEvents: Event[];\r\n        previewSource: 'default' | 'eventLandingPage';\r\n        showEventModal: boolean;\r\n        isLoading: boolean;\r\n    }>({\r\n        showEditor: false,\r\n        currentTheme: null,\r\n        newTheme: null,\r\n        customFonts: null,\r\n        iframeSrc: '', // null,\r\n        draftEvents: [],\r\n        publishedEvents: [],\r\n        endedEvents: [],\r\n        previewSource: 'default',\r\n        showEventModal: false,\r\n        isLoading: false,\r\n    });\r\n\r\n    onMounted(async () => {\r\n        props.eventId && updateIframeSrc(props.eventId);\r\n    });\r\n\r\n    let iframe = ref<HTMLIFrameElement | null>(null);\r\n\r\n    watch(\r\n        () => props.themeId,\r\n        (designThemeId) => {\r\n            if (designThemeId) getTheme(designThemeId);\r\n\r\n            state.currentTheme = designThemeId === null ? null : defaultTheme;\r\n\r\n            getFonts();\r\n        }\r\n    );\r\n\r\n    watchEffect(() => {\r\n        if (!iframe.value) return;\r\n\r\n        iframe.value.addEventListener('load', function () {\r\n            sendToIframe();\r\n        });\r\n    });\r\n\r\n    const getFonts = async () => {\r\n        await getCustomFonts().then(async (customFonts) => {\r\n            state.customFonts = customFonts;\r\n\r\n            if (state.currentTheme == null) return;\r\n\r\n            state.currentTheme.CustomFonts = [];\r\n\r\n            state.customFonts.forEach((font) => {\r\n                let fontFaceProp: FontFaceProps = {\r\n                    customFontId: font.CustomFontId,\r\n                    'font-style': font.FontStyle,\r\n                    'font-family': font.FontFamily,\r\n                    src: font.Source,\r\n                    'font-weight': font.FontWeight,\r\n                };\r\n                state.currentTheme?.CustomFonts.push(fontFaceProp);\r\n            });\r\n        });\r\n        // .catch(() => {\r\n        // \tbsAlert({ title: $Resources., content: $Resources., type: 'danger' })\r\n        // })\r\n        // .finally(() => (state.isLoading = false))\r\n    };\r\n\r\n    const getTheme = async (designThemeId: string) => {\r\n        if (state.isLoading) return;\r\n        state.isLoading = true;\r\n\r\n        if (props.backoffice) {\r\n            await getUnfilteredDesignTheme(designThemeId)\r\n                .then(async (theme) => {\r\n                    themeLoaded(theme);\r\n                })\r\n                .finally(() => (state.isLoading = false));\r\n        } else {\r\n            await getDesignTheme(designThemeId)\r\n                .then(async (theme) => {\r\n                    themeLoaded(theme);\r\n                })\r\n                .finally(() => (state.isLoading = false));\r\n        }\r\n    };\r\n\r\n    const themeLoaded = (theme: DesignTheme) => {\r\n        for (const [key, value] of Object.entries(defaultSettings)) {\r\n            let valFromTheme = theme.Settings.find((setting) => setting.Name == key);\r\n\r\n            let setting: DesignThemeSetting = {\r\n                Name: key,\r\n                Value: valFromTheme?.Value || value,\r\n            };\r\n\r\n            theme.Settings.push(setting);\r\n\r\n            if (!state.currentTheme) return;\r\n            state.currentTheme.CssVars[setting.Name] = setting.Value;\r\n\r\n            if (setting.Name === 'GoogleFonts') state.currentTheme.GoogleFonts = setting.Value;\r\n        }\r\n\r\n        if (state.currentTheme) {\r\n            state.currentTheme.GoogleFonts = state.currentTheme.CssVars['GoogleFonts'];\r\n        }\r\n\r\n        state.newTheme = theme;\r\n    };\r\n\r\n    const saveTheme = async () => {\r\n        if (!state.newTheme || !state.currentTheme) return;\r\n\r\n        state.isLoading = true;\r\n        state.newTheme.Settings = [];\r\n\r\n        for (const [key, value] of Object.entries(state.currentTheme.CssVars)) {\r\n            let setting: DesignThemeSetting = {\r\n                Name: key,\r\n                Value: value,\r\n            };\r\n            state.newTheme.Settings.push(setting);\r\n        }\r\n\r\n        let themeCss =\r\n            googleFontsImport(state.currentTheme.GoogleFonts) +\r\n            ':root {' +\r\n            // '.landing-page {' +\r\n            getCssVars(state.currentTheme.CssVars, 'theme') +\r\n            '}' +\r\n            customFontsImport(usedCustomFonts());\r\n\r\n        state.newTheme.ThemeCss = themeCss;\r\n\r\n        await saveDesignTheme(state.newTheme)\r\n            .then(async (theme) => {\r\n                state.newTheme = theme;\r\n                bsAlert({ title: $Resources.ThemeSavedAlertHeading, content: $Resources.ThemeSavedAlertBody });\r\n            })\r\n            // .catch(() => {\r\n            // \tbsAlert({ title: $Resources., content: $Resources., type: 'danger' })\r\n            // })\r\n            .finally(() => (state.isLoading = false));\r\n\r\n        await saveCustomFonts();\r\n    };\r\n\r\n    const saveCustomFonts = async () => {\r\n        if (!state.newTheme || !state.currentTheme) return;\r\n\r\n        state.customFonts = [];\r\n\r\n        state.currentTheme?.CustomFonts.forEach((font) => {\r\n            let customFont: CustomFont = {\r\n                CustomFontId: font.customFontId,\r\n                FontStyle: font['font-style'],\r\n                FontFamily: font['font-family'],\r\n                FontWeight: font['font-weight'],\r\n                Source: font.src,\r\n            };\r\n            state.customFonts?.push(customFont);\r\n        });\r\n\r\n        await SaveCustomFonts(state.customFonts).then(async (fonts) => {});\r\n        // .catch(() => {\r\n        // \tbsAlert({ title: $Resources., content: $Resources., type: 'danger' })\r\n        // })\r\n        // .finally(() => (state.isLoading = false))\r\n    };\r\n\r\n    const updateCssVars = (name: string, newValue: string) => {\r\n        if (!state.currentTheme) return;\r\n        state.currentTheme.CssVars[name] = newValue;\r\n\r\n        sendToIframe('cssVars');\r\n    };\r\n\r\n    const updateGoogleFonts = (newValue: string) => {\r\n        if (!state.currentTheme) return;\r\n        state.currentTheme.GoogleFonts = newValue;\r\n        state.currentTheme.CssVars['GoogleFonts'] = newValue;\r\n\r\n        sendToIframe('fonts');\r\n    };\r\n\r\n    const sendToIframe = (update?: 'cssVars' | 'fonts') => {\r\n        if (!iframe.value || !state.currentTheme) return;\r\n\r\n        let contentWindow = iframe.value.contentWindow;\r\n\r\n        let data = {\r\n            cssVars: !update || update === 'cssVars' ? getCssVars(state.currentTheme.CssVars, 'theme') : null,\r\n            googleFontsImport: !update || update === 'fonts' ? googleFontsImport(state.currentTheme.GoogleFonts) : null,\r\n        };\r\n\r\n        contentWindow && contentWindow.postMessage(data, '*');\r\n    };\r\n\r\n    const getEventsWithStatus = async (status: 'Draft' | 'Published' | 'Ended' = 'Draft') => {\r\n        !state.showEventModal && (state.showEventModal = true);\r\n\r\n        switch (status) {\r\n            case 'Published':\r\n                if (state.publishedEvents.length === 0) state.publishedEvents = await loadEvents(status);\r\n                break;\r\n            case 'Ended':\r\n                if (state.endedEvents.length === 0) state.endedEvents = await loadEvents(status);\r\n                break;\r\n            default:\r\n                if (state.draftEvents.length === 0) state.draftEvents = await loadEvents(status);\r\n        }\r\n    };\r\n\r\n    const updateIframeSrc = (eventId: string) => {\r\n        state.showEventModal = false;\r\n        state.previewSource = 'eventLandingPage';\r\n        let src = combineUrlSegments(contextAccess.state.currentAccount!.PublicEventUrl.PublicHost, 'Events', '' + eventId, '?preview=true');\r\n        // state.iframeSrc = 'http://localhost:52893/Events/' + eventId + '?preview=true'\r\n        state.iframeSrc = src;\r\n    };\r\n\r\n    const updateCustomFont = (key: string, newValue: string, index: number) => {\r\n        if (!state.currentTheme) return;\r\n        state.currentTheme.CustomFonts[index][key] = newValue;\r\n    };\r\n\r\n    const addCustomFont = (customFontToggle: number) => {\r\n        if (!state.currentTheme) return;\r\n        state.currentTheme.CustomFonts.push({\r\n            customFontId: tmp_uuidv4(),\r\n            'font-style': '',\r\n            'font-family': '',\r\n            src: '',\r\n            'font-weight': '',\r\n        });\r\n\r\n        customFontToggle = state.currentTheme.CustomFonts.length - 1;\r\n    };\r\n\r\n    const removeCustomFont = (index: number) => {\r\n        if (!state.currentTheme) return;\r\n        state.currentTheme.CustomFonts.splice(index, 1);\r\n    };\r\n\r\n    const usedCustomFonts = () => {\r\n        let usedCustomFont: FontFaceProps[] = [];\r\n        let cssVars = state.currentTheme?.CssVars;\r\n\r\n        state.currentTheme?.CustomFonts.forEach((customFont) => {\r\n            for (const key in cssVars) {\r\n                if (key.indexOf('FontFamily') > -1 && cssVars[key].indexOf(customFont['font-family']) > -1) usedCustomFont.push(customFont);\r\n            }\r\n        });\r\n\r\n        return usedCustomFont;\r\n    };\r\n\r\n    const emit = defineEmits(['update:showEditor']);\r\n\r\n    const close = () => {\r\n        emit('update:showEditor', props.backoffice);\r\n        state.currentTheme = null;\r\n        state.newTheme = null;\r\n    };\r\n</script>\r\n\r\n<script lang=\"ts\"></script>\r\n\r\n<template>\r\n    <EditorContainer :show=\"state.currentTheme\" :teleport=\"true\" :container-class=\"props.backoffice ? 'navbar-offset' : ''\">\r\n        <template #paneNav>\r\n            <button type=\"button\" class=\"btn btn-subtle\" @click=\"close\">\r\n                <span class=\"glyphicon glyphicon-chevron-left\"></span>\r\n                <span class=\"sr-only\">{{ $Resources.ThemeEditorCloseButton }}</span>\r\n            </button>\r\n            <h2 class=\"h4 m-0-all strong c-light m-auto-r\">{{ $Resources.ThemeEditorHeading }}</h2>\r\n\r\n            <BSDropdownButton menuClass=\"dropdown-menu-right\" :closeOnClickInside=\"false\">\r\n                <template #toggle>\r\n                    {{ $Resources.ThemeEditorPreviewButton }}\r\n                    <span class=\"caret m-sm-l\"></span>\r\n                </template>\r\n                <template #content>\r\n                    <li role=\"presentation\" class=\"dropdown-header\">{{ $Resources.ThemeEditorPreviewDropdownHeading }}:</li>\r\n                    <li>\r\n                        <a href=\"javascript:void(0)\" @click=\"state.previewSource = 'default'\">\r\n                            <span v-show=\"state.previewSource === 'default'\" class=\"glyphicon glyphicon-ok\" aria-hidden=\"true\"></span>\r\n                            {{ $Resources.ThemeEditorPreviewDefault }}\r\n                        </a>\r\n                    </li>\r\n                    <li>\r\n                        <a href=\"javascript:void(0)\" @click=\"getEventsWithStatus()\">\r\n                            <span v-show=\"state.previewSource === 'eventLandingPage'\" class=\"glyphicon glyphicon-ok\" aria-hidden=\"true\"></span>\r\n                            {{ $Resources.ThemeEditorPreviewEvent }}\r\n                        </a>\r\n                    </li>\r\n                </template>\r\n            </BSDropdownButton>\r\n\r\n            <button v-if=\"!props.backoffice\" type=\"button\" class=\"btn btn-primary\" @click=\"saveTheme\" :disabled=\"state.isLoading\">\r\n                {{ $Resources.ThemeEditorSaveButton }}\r\n            </button>\r\n        </template>\r\n        <template #pane>\r\n            <div v-if=\"state.currentTheme && state.newTheme\">\r\n                <BSFormInputText\r\n                    class=\"form-group\"\r\n                    v-model=\"state.newTheme.Name\"\r\n                    :label=\"$Resources.ThemeEditorNameLabel\"\r\n                    :placeholder=\"$Resources.ThemeEditorNamePlaceholder\"></BSFormInputText>\r\n                <BSFormInputTextarea\r\n                    class=\"form-group\"\r\n                    v-model=\"state.newTheme.Description\"\r\n                    :label=\"$Resources.ThemeEditorDescriptionLabel\"\r\n                    :placeholder=\"$Resources.ThemeEditorDescriptionPlaceholder\"></BSFormInputTextarea>\r\n\r\n                <!-- <h4>[Logotyp]</h4>\r\n\t\t\t\t<ImagePreview :image=\"{ src: state.currentTheme.LogoSrc, alt: '' }\"> </ImagePreview> -->\r\n\r\n                <design\r\n                    :cssVars=\"state.currentTheme.CssVars\"\r\n                    :googleFonts=\"state.currentTheme.GoogleFonts\"\r\n                    :customFonts=\"state.currentTheme.CustomFonts\"\r\n                    @update:googleFonts=\"updateGoogleFonts\"\r\n                    @update:cssVars=\"updateCssVars\"\r\n                    @update:customFont=\"updateCustomFont\"\r\n                    @addCustomFont=\"addCustomFont\"\r\n                    @removeCustomFont=\"removeCustomFont\"></design>\r\n            </div>\r\n        </template>\r\n        <template #canvas>\r\n            <div class=\"theme-container\" v-if=\"state.previewSource === 'default'\">\r\n                <div class=\"theme\">\r\n                    <!-- <img :src=\"state.currentTheme?.LogoSrc\" style=\"max-width: 240px\" /> -->\r\n\r\n                    <h1 class=\"m-0-t\">{{ $Resources.ThemeEditorPlaceholderTextHeading }}</h1>\r\n                    <p>{{ $Resources.ThemeEditorPlaceholderTextBody }}</p>\r\n                    <p class=\"m-lg-b\" v-html=\"$Resources.ThemeEditorPlaceholderTextBody2\"></p>\r\n                    <button class=\"btn\" type=\"button\">{{ $Resources.ThemeEditorPlaceholderTextButton }}</button>\r\n                </div>\r\n\r\n                <div class=\"theme theme-secondary\">\r\n                    <p>{{ $Resources.ThemeEditorPlaceholderTextBody3 }}</p>\r\n                </div>\r\n\r\n                <template v-if=\"state.currentTheme\">\r\n                    <span v-html=\"'<style>:root {' + getCssVars(state.currentTheme.CssVars, 'theme') + '}</style>'\"></span>\r\n                    <span v-html=\"'<style>' + googleFontsImport(state.currentTheme.GoogleFonts) + '</style>'\"></span>\r\n                    <span v-html=\"'<style>' + customFontsImport(state.currentTheme.CustomFonts) + '</style>'\"></span>\r\n                </template>\r\n            </div>\r\n            <iframe ref=\"iframe\" :src=\"state.iframeSrc\" v-if=\"state.previewSource === 'eventLandingPage'\" frameborder=\"0\" style=\"width: 100%\"></iframe>\r\n        </template>\r\n    </EditorContainer>\r\n\r\n    <Modal :title=\"$Resources.PreviewEventsHeading\" :show=\"state.showEventModal\" @close=\"state.showEventModal = false\" size=\"lg\">\r\n        <template #content>\r\n            <tabs>\r\n                <tab :title=\"$Resources.PreviewEventsTabDrafts\" @tabClick=\"getEventsWithStatus()\">\r\n                    <SelectIssueFromList :items=\"state.draftEvents\" type=\"events\" @update:selectedId=\"updateIframeSrc\"></SelectIssueFromList>\r\n                </tab>\r\n                <tab :title=\"$Resources.PreviewEventsTabPublished\" @tabClick=\"getEventsWithStatus('Published')\">\r\n                    <SelectIssueFromList :items=\"state.publishedEvents\" type=\"events\" @update:selectedId=\"updateIframeSrc\"></SelectIssueFromList>\r\n                </tab>\r\n                <tab :title=\"$Resources.PreviewEventsTabEnded\" @tabClick=\"getEventsWithStatus('Ended')\">\r\n                    <SelectIssueFromList :items=\"state.endedEvents\" type=\"events\" @update:selectedId=\"updateIframeSrc\"></SelectIssueFromList>\r\n                </tab>\r\n            </tabs>\r\n        </template>\r\n    </Modal>\r\n</template>\r\n\r\n<style lang=\"less\">\r\n    .theme-container {\r\n        margin: auto;\r\n    }\r\n\r\n    .theme {\r\n        color: rgb(var(--themeColor));\r\n        background-color: rgb(var(--themeBackgroundColor));\r\n        padding: 1.875rem;\r\n        max-width: 600px;\r\n        font-family: var(--themeFontFamily);\r\n        font-size: 1rem;\r\n\r\n        /*\r\n\t\th1,\r\n\t\th2,\r\n\t\th3,\r\n\t\th4,\r\n\t\th5,\r\n\t\th6 {\r\n\t\t\tfont-family: var(--themeHeadingsFontFamily);\r\n\t\t\tfont-size: 2rem;\r\n\t\t}\r\n        */\r\n\r\n        h1 {\r\n            font-family: var(--themeHeadingsFontFamily);\r\n            font-weight: var(--themeHeadingsFontWeight);\r\n            font-size: 2.4rem;\r\n            color: rgb(var(--themeHeadingsColor));\r\n        }\r\n\r\n        a {\r\n            color: rgb(var(--themeLinkColor));\r\n            text-decoration: underline;\r\n        }\r\n\r\n        .btn {\r\n            font-family: var(--themeButtonFontFamily);\r\n            font-weight: var(--themeButtonFontWeight);\r\n            color: rgb(var(--themeButtonColor));\r\n            background-color: rgb(var(--themeButtonBackgroundColor));\r\n            border-color: rgb(var(--themeButtonBorderColor));\r\n            border-radius: var(--themeButtonRadius);\r\n            border-width: var(--themeButtonBorderWidth);\r\n            padding: 0.625rem 1.25rem;\r\n            text-transform: var(--themeButtonTextTransform);\r\n        }\r\n    }\r\n\r\n    .theme-secondary {\r\n        color: rgb(var(--themeSecondaryColor));\r\n        background-color: rgb(var(--themeSecondaryBackgroundColor));\r\n    }\r\n</style>\r\n","<script setup lang=\"ts\">\r\n    const props = defineProps<{\r\n        title: string;\r\n        body: string;\r\n    }>();\r\n</script>\r\n\r\n<script lang=\"ts\"></script>\r\n\r\n<template>\r\n    <div class=\"empty-state text-center m-lg-b\">\r\n        <svg class=\"m-sm-t\" x=\"0px\" y=\"0px\" width=\"100px\" height=\"100px\" viewBox=\"0 0 100 100\" enable-background=\"new 0 0 100 100\" xml:space=\"preserve\">\r\n            <g>\r\n                <g>\r\n                    <path\r\n                        fill=\"#D5F5FF\"\r\n                        d=\"M94.969,50c0.391,11.632-2.819,25.289-11.442,33.528C75.289,92.151,61.632,95.36,50,94.969\r\n\t\t\tc-11.632,0.39-25.288-2.817-33.526-11.441C7.851,75.288,4.641,61.631,5.031,50C4.641,38.366,7.851,24.711,16.474,16.472\r\n\t\t\tC24.712,7.848,38.368,4.64,50,5.031C61.633,4.64,75.288,7.848,83.526,16.472C92.149,24.711,95.357,38.366,94.969,50z\" />\r\n                </g>\r\n                <g>\r\n                    <path\r\n                        fill=\"#0096C9\"\r\n                        d=\"M87.476,87.4c-0.119,0-0.237-0.012-0.358-0.034c-24.415-4.732-49.819-4.732-74.234,0\r\n\t\t\tc-1.01,0.196-1.999-0.465-2.196-1.482c-0.195-1.016,0.468-1.999,1.483-2.196c12.442-2.411,25.17-3.636,37.83-3.636\r\n\t\t\ts25.389,1.225,37.83,3.636c1.018,0.197,1.681,1.182,1.483,2.196C89.14,86.779,88.353,87.4,87.476,87.4z\" />\r\n                </g>\r\n                <g>\r\n                    <path\r\n                        fill=\"#323849\"\r\n                        d=\"M63.36,56.41l2.195,12.779c0.396,2.302-2.029,4.039-4.073,2.959l-11.48-6.024l-11.48,6.034\r\n\t\t\tc-2.054,1.08-4.47-0.667-4.073-2.96l2.195-12.779l-9.294-9.055c-1.668-1.625-0.745-4.462,1.557-4.797l12.841-1.86l5.734-11.629\r\n\t\t\tc1.037-2.091,4.015-2.081,5.041,0l5.735,11.629l12.832,1.86c2.302,0.335,3.225,3.171,1.564,4.796L63.36,56.41z\" />\r\n                </g>\r\n                <g>\r\n                    <polygon\r\n                        fill=\"#FFFFFF\"\r\n                        points=\"56.396,43.27 50.002,30.324 43.608,43.27 29.317,45.353 39.655,55.436 37.214,69.665 \r\n\t\t\t50.002,62.945 62.781,69.665 60.341,55.436 70.687,45.353 \t\t\" />\r\n                </g>\r\n                <g>\r\n                    <circle fill=\"#0096C9\" cx=\"50.002\" cy=\"58.431\" r=\"2.811\" />\r\n                </g>\r\n                <g>\r\n                    <path\r\n                        fill=\"#0096C9\"\r\n                        d=\"M48.087,40.865h3.83c0.298,0,0.544,0.254,0.525,0.553l-0.641,11.594c-0.018,0.281-0.246,0.5-0.527,0.5\r\n\t\t\th-2.537c-0.281,0-0.51-0.219-0.527-0.5l-0.648-11.594C47.543,41.119,47.78,40.865,48.087,40.865z\" />\r\n                </g>\r\n            </g>\r\n        </svg>\r\n\r\n        <h3 class=\"m-sm-t\">{{ props.title }}</h3>\r\n        <p class=\"m-lg-b\">{{ props.body }}</p>\r\n\r\n        <slot name=\"actions\"></slot>\r\n    </div>\r\n</template>\r\n\r\n<style scoped></style>\r\n\r\n<style></style>\r\n","<script setup lang=\"ts\">\r\n    const props = defineProps<{\r\n        css: string;\r\n        id: string;\r\n    }>();\r\n</script>\r\n\r\n<script lang=\"ts\"></script>\r\n\r\n<template>\r\n    <div :class=\"'theme-' + props.id\" style=\"align-self: center\">\r\n        <span v-html=\"'<style>' + props.css.replace(':root', '.theme-' + props.id) + '</style>'\"></span>\r\n        <div class=\"theme-preview-container d-flex align-items-baseline gap-sm pointer\">\r\n            <span class=\"h4\">{{ $Resources.ThemesListPreviewPlaceholderHeading }}</span>\r\n            <span>{{ $Resources.ThemesListPreviewPlaceholderText }}</span>\r\n            <a href=\"javascript:void(0)\">{{ $Resources.ThemesListPreviewPlaceholderLink }}</a>\r\n            <button class=\"btn\" style=\"align-self: center\">\r\n                {{ $Resources.ThemesListPreviewPlaceholderButton }}\r\n            </button>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<style lang=\"less\">\r\n    .theme-preview-container {\r\n        border: 1px solid var(--border-color);\r\n        border-radius: var(--border-radius);\r\n        padding: var(--ug-spacing-xs) var(--ug-spacing-sm);\r\n        background-color: rgb(var(--themeBackgroundColor));\r\n        color: rgb(var(--themeColor));\r\n        font-family: var(--themeFontFamily);\r\n        font-size: smaller;\r\n        margin: var(--ug-spacing-xs) 0;\r\n\r\n        .h4 {\r\n            font-family: var(--themeHeadingsFontFamily);\r\n            font-weight: var(--themeHeadingsFontWeight);\r\n            margin: 0;\r\n        }\r\n\r\n        a {\r\n            color: rgb(var(--themeLinkColor));\r\n        }\r\n\r\n        button {\r\n            color: rgb(var(--themeButtonColor));\r\n            background-color: rgb(var(--themeButtonBackgroundColor));\r\n            border-color: rgb(var(--themeButtonBorderColor));\r\n            border-radius: var(--themeButtonRadius);\r\n            border-width: var(--themeButtonBorderWidth);\r\n            padding: var(--ug-spacing-xs) var(--ug-spacing-sm);\r\n            font-size: smaller;\r\n        }\r\n    }\r\n</style>\r\n","<script setup lang=\"ts\">\r\n    import { reactive, onMounted, inject } from 'vue';\r\n    import List from '@shared/components/List.vue';\r\n    import EmptyState from '@shared/components/EmptyState.vue';\r\n    import ThemesListPreview from './ThemesListPreview.vue';\r\n    import { formatDateTime } from '@cwd/Shared/utils/formatDateTime';\r\n    import { DesignTheme } from './Themes.access';\r\n    import { injectorAccessInjectionKey } from '@cwd/lib/provider-keys';\r\n    import { AccountAccess } from '@account/Account.access';\r\n\r\n    const injectorAccess = inject(injectorAccessInjectionKey)!;\r\n    const accountAccess: AccountAccess = injectorAccess.injector.get(AccountAccess);\r\n\r\n    const props = defineProps<{\r\n        themes: DesignTheme[] | null;\r\n        isLoading: boolean;\r\n        themeId: string | null;\r\n        selected?: number[];\r\n        createTheme?: Function;\r\n        currentThemeId?: string;\r\n        backoffice: boolean;\r\n    }>();\r\n\r\n    const state = reactive<{\r\n        currentThemeId: string | null;\r\n    }>({\r\n        currentThemeId: null,\r\n    });\r\n\r\n    onMounted(async () => {\r\n        props.currentThemeId && (state.currentThemeId = props.currentThemeId);\r\n    });\r\n\r\n    const emit = defineEmits(['themeSelected', 'updateSelected', 'deleteSelected', 'clearSelected', 'themeCreated']);\r\n\r\n    const themeSelected = (designThemeId: string) => {\r\n        state.currentThemeId = designThemeId;\r\n        emit('themeSelected', designThemeId);\r\n    };\r\n\r\n    const hasSelected = () => {\r\n        if (!props.selected) return false;\r\n        return props.selected.length;\r\n    };\r\n\r\n    const createTheme = () => {\r\n        if (!props.createTheme) return;\r\n        props.createTheme();\r\n        emit('themeCreated');\r\n    };\r\n\r\n    const orderOptions = () => {\r\n        return [\r\n            { display: $Resources.NameLabel, key: 'Name' },\r\n            { display: $Resources.LastModifiedLabel, key: 'Modified' },\r\n            { display: $Resources.CreatedLabel, key: 'Created' },\r\n        ];\r\n    };\r\n</script>\r\n\r\n<script lang=\"ts\"></script>\r\n\r\n<template>\r\n    <div v-show=\"props.themeId === null\">\r\n        <List\r\n            v-if=\"props.themes && props.themes.length > 0\"\r\n            :items=\"props.themes.filter((theme) => !theme.Deleted)\"\r\n            :orderOptions=\"orderOptions()\"\r\n            orderByDirection=\"asc\"\r\n            :loading=\"props.isLoading\"\r\n            :filterKeys=\"['Name', 'Description']\"\r\n            :checkedItems=\"props.backoffice ? null : props.selected\"\r\n            :recycleManager=\"true\"\r\n            @update:checkedItems=\"(newVal) => $emit('updateSelected', newVal)\"\r\n            @clearSelected=\"$emit('clearSelected')\"\r\n            @deleteSelected=\"$emit('deleteSelected')\">\r\n            <template #toolbar>\r\n                <button\r\n                    :disabled=\"props.isLoading\"\r\n                    class=\"btn btn-primary btn-create-theme m-auto-l\"\r\n                    v-if=\"props.createTheme && !props.backoffice\"\r\n                    v-show=\"!hasSelected()\"\r\n                    @click=\"createTheme\">\r\n                    {{ $Resources.ThemesListCreateButton }}\r\n                </button>\r\n\r\n                <a\r\n                    role=\"button\"\r\n                    class=\"btn btn-primary link-create-theme m-auto-l\"\r\n                    target=\"_blank\"\r\n                    rel=\"noopener\"\r\n                    href=\"/Account?tab=themes-tab&newTheme=true\"\r\n                    style=\"display: none\">\r\n                    {{ $Resources.ThemesListCreateButton }}\r\n                    <span class=\"glyphicon glyphicon-new-window small m-xs-l\" aria-hidden=\"true\"></span>\r\n                </a>\r\n            </template>\r\n            <template\r\n                #item=\"{\r\n                    item: {\r\n                        DesignThemeId,\r\n                        Description,\r\n                        Created,\r\n                        Modified,\r\n                        ThemeCss,\r\n                        Name,\r\n                        CreatedBy: { Name: CreatedByName },\r\n                        Account: { AccountId: AccountId, Name: AccountName },\r\n                        Account: Account,\r\n                    },\r\n                }\">\r\n                <div class=\"flex-1\" style=\"min-width: min(400px, 100%)\">\r\n                    <h4>\r\n                        <a role=\"button\" href=\"javascript:void(0)\" @click=\"themeSelected(DesignThemeId)\">{{ Name }}</a>\r\n                        <span v-show=\"props.currentThemeId && state.currentThemeId === DesignThemeId\" class=\"label label-default info m-sm-l\">\r\n                            {{ $Resources.ThemesListSelectedLabel }}\r\n                        </span>\r\n                    </h4>\r\n                    <p v-show=\"Description.length > 0\">{{ Description }}</p>\r\n                    <p class=\"meta\">\r\n                        <span class=\"glyphicon glyphicon-time\"></span>\r\n                        {{ formatDateTime(Created) }}\r\n                        <span v-show=\"Created !== Modified\">\r\n                            <i class=\"fa fa-pencil\" aria-hidden=\"true\"></i>\r\n                            {{ formatDateTime(Modified) }}\r\n                        </span>\r\n                        <span class=\"glyphicon glyphicon-user\"></span>\r\n                        {{ CreatedByName }}\r\n                        <template v-if=\"props.backoffice\">\r\n                            <span class=\"glyphicon glyphicon-briefcase\"></span>\r\n                            <a\r\n                                href=\"javascript:void(0)\"\r\n                                :class=\"{\r\n                                    'account-disabled': accountAccess!.state.switching || AccountId == accountAccess!.state.currentAccount?.AccountId,\r\n                                }\"\r\n                                @click=\"accountAccess!.switchToAccount(Account)\">\r\n                                {{ AccountName }}\r\n                            </a>\r\n                        </template>\r\n                    </p>\r\n                </div>\r\n                <ThemesListPreview @click=\"themeSelected(DesignThemeId)\" :css=\"ThemeCss\" :id=\"DesignThemeId\"></ThemesListPreview>\r\n            </template>\r\n        </List>\r\n\r\n        <div v-else>\r\n            <EmptyState :title=\"$Resources.ThemesEmptyStateHeading\" :body=\"$Resources.ThemesEmptyStateBody\" v-show=\"!props.isLoading\">\r\n                <template #actions>\r\n                    <div class=\"form-group\">\r\n                        <button class=\"btn btn-info\" v-if=\"props.createTheme\" @click=\"createTheme\">\r\n                            {{ $Resources.ThemesListCreateButton }}\r\n                            <i class=\"fa fa-chevron-right\" aria-hidden=\"true\"></i>\r\n                        </button>\r\n\r\n                        <a role=\"button\" class=\"btn btn-info\" v-else href=\"/Account?tab=themes-tab&newTheme=true\">\r\n                            {{ $Resources.ThemesListCreateButton }}\r\n                            <i class=\"fa fa-chevron-right\" aria-hidden=\"true\"></i>\r\n                        </a>\r\n                    </div>\r\n                </template>\r\n            </EmptyState>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<style lang=\"less\"></style>\r\n","// import { themes } from './../Web/FormEditor/Themes'\r\nimport { reactive } from 'vue';\r\nimport { getDesignThemes, DesignTheme, createDesignTheme, deleteDesignTheme, getUnfilteredDesignThemes } from './Themes.access';\r\nimport { bsAlert } from '@shared/components/bsAlerts';\r\n\r\nexport function setupThemes() {\r\n    const themesState = reactive<{\r\n        themes: DesignTheme[] | null;\r\n        isLoading: boolean;\r\n        themeId: string | null;\r\n        selected: number[];\r\n    }>({\r\n        themes: null,\r\n        isLoading: false,\r\n        themeId: null,\r\n        selected: [],\r\n    });\r\n\r\n    const createTheme = async () => {\r\n        if (themesState.isLoading) return;\r\n        themesState.isLoading = true;\r\n\r\n        let newTheme: DesignTheme = {\r\n            Name: 'New theme',\r\n            Description: '',\r\n            ThemeCss: '',\r\n            // SendableTheme: true,\r\n            Settings: [],\r\n        };\r\n\r\n        await createDesignTheme(newTheme)\r\n            .then(async (theme) => {\r\n                if (theme?.DesignThemeId) themesState.themeId = theme.DesignThemeId;\r\n            })\r\n            // .catch(() => {\r\n            // \tbsAlert({ title: $Resources., content: $Resources., type: 'danger' })\r\n            // })\r\n            .finally(() => (themesState.isLoading = false));\r\n    };\r\n\r\n    const getThemes = async () => {\r\n        themesState.isLoading = true;\r\n\r\n        await getDesignThemes()\r\n            .then(async (themes) => {\r\n                themesState.themes = themes;\r\n            })\r\n            .finally(() => (themesState.isLoading = false));\r\n    };\r\n\r\n    const getUnfilteredThemes = async () => {\r\n        themesState.isLoading = true;\r\n\r\n        await getUnfilteredDesignThemes()\r\n            .then(async (themes) => {\r\n                themesState.themes = themes;\r\n            })\r\n            .finally(() => (themesState.isLoading = false));\r\n    };\r\n\r\n    const editTheme = (id: string | undefined) => {\r\n        if (!id) return;\r\n        themesState.themeId = id;\r\n    };\r\n\r\n    const showEditorFunc = async (unfiltered: boolean) => {\r\n        themesState.themeId = null;\r\n\r\n        if (unfiltered) {\r\n            await getUnfilteredThemes();\r\n        } else {\r\n            await getThemes();\r\n        }\r\n    };\r\n\r\n    const deleteSelected = () => {\r\n        if (themesState.isLoading) return;\r\n        themesState.isLoading = true;\r\n\r\n        themesState.selected.forEach((selected: number, index: number) => {\r\n            let theme = (themesState.themes as DesignTheme[])[selected];\r\n            let id = theme.DesignThemeId as string;\r\n            deleteTheme(id, selected, index);\r\n        });\r\n    };\r\n\r\n    const deleteTheme = async (id: string, selectedIndex: number, index: number) => {\r\n        await deleteDesignTheme(id)\r\n            .then(() => {\r\n                // (themesState.themes as DesignTheme[]).splice(selectedIndex, 1)\r\n                (themesState.themes as DesignTheme[])[selectedIndex].Deleted = true;\r\n\r\n                if (index + 1 === themesState.selected.length)\r\n                    bsAlert({ title: $Resources.ThemesDeletedAlertHeading, content: $Resources.ThemesDeletedAlertBody });\r\n            })\r\n            // .catch(() => {\r\n            // \tbsAlert({ title: $Resources., content: $Resources., type: 'danger' })\r\n            // })\r\n            .finally(() => {\r\n                if (index + 1 === themesState.selected.length) {\r\n                    themesState.isLoading = false;\r\n                    themesState.selected = [];\r\n                }\r\n            });\r\n    };\r\n\r\n    const updateSelected = (newVal: any) => {\r\n        themesState.selected = newVal;\r\n    };\r\n\r\n    return { themesState, createTheme, getThemes, getUnfilteredThemes, editTheme, showEditorFunc, deleteSelected, updateSelected };\r\n}\r\n"],"names":["api","_sfc_main$l","_sfc_main$o","_sfc_main$n","_sfc_main$k","tab","Tabs","_sfc_main$m","combineUrlSegments","defineComponent","openBlock","createElementBlock","createBaseVNode","createCommentVNode","normalizeStyle","Fragment","renderList","unref","toDisplayString","createVNode","withCtx","createTextVNode","TransitionGroup","withModifiers","createBlock","withDirectives","vShow","reactive","ref","watch","onMounted","normalizeClass","isRef","vModelSelect","Transition","Teleport","renderSlot","inject","ContextAccess","watchEffect","injectorAccessInjectionKey","createStaticVNode","AccountAccess","vPopoverInfo","_sfc_main$p","formatDateTime","_sfc_main$j","_sfc_main$q","tmp_uuidv4","bsAlert","richEditorCleanup","html","tag","pos","googleFontsImport","googleFonts","customFontsImport","customFonts","output","customFont","key","getCssVars","cssVars","prefix","allCssVars","cssVar","__default__","props","__props","minifyStylesContent","stylesContent","transitionStyles","getItems","filterItems","item","setupItem","type","defaultCols","uis","settings","min","step","unit","cols","_a","_b","mode","name","loadFonts","state","toggle","customFontToggle","emit","__emit","newVal","result","setupSelectedFonts","showMore","filterFonts","fonts","filteredFonts","sortComparer","font","index","image","l","r","lVal","rVal","fontStyle","family","variants","value","familyParam","itemSplit","updateFamilyParam","newParam","findFamily","currentFamily","findVariant","currentVariant","variant","toggleFont","foundFamily","indexToRemove","isSelected","addCustomFont","getPlaceholder","updateSliderProgress","newValue","input","update","progress","defaultHex","regex0to255","colorInputEl","init","isRgb","toHex","regexLongHex","regexShortHex","isHex","color","regexSeparator","regexRgb","regexRgbObj","isValidColor","toLongHex","separator","values","rgb","g","b","toRgb","valueChanged","event","triggerUpdate","pickerValueChanged","splitIncoming","basicFont","split","firstFont","rest","getCustomFonts","hasCustomSelected","googleFont","updateSelectedFont","hasSelected","showFontLibrary","getCssVar","getKey","setting","design","onVisible","element","callback","entries","observer","entry","textarea","setInitHeight","setHeight","scrollPos","target","accountThemeId","defaultSettings","theme","loadEvents","getUnfilteredDesignThemes","getDesignThemes","getDesignTheme","designThemeId","getUnfilteredDesignTheme","createDesignTheme","designTheme","saveDesignTheme","deleteDesignTheme","saveCustomFonts","slider","colorPicker","fontSelector","availableFonts","colorOptions","designSettings","contextAccess","updateIframeSrc","iframe","defaultTheme","getFonts","sendToIframe","fontFaceProp","getTheme","themeLoaded","valFromTheme","saveTheme","themeCss","usedCustomFonts","SaveCustomFonts","updateCssVars","updateGoogleFonts","contentWindow","data","getEventsWithStatus","status","eventId","src","updateCustomFont","removeCustomFont","usedCustomFont","close","accountAccess","themeSelected","createTheme","orderOptions","setupThemes","themesState","getThemes","themes","getUnfilteredThemes","editTheme","id","showEditorFunc","unfiltered","deleteSelected","selected","deleteTheme","selectedIndex"],"mappings":"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"}