\n
\n \n
\n
\n \n \n ${this.opacity ? html`\n \n \n ` : \"\"}\n
\n
\n
\n
\n \n \n \n ${!this.noFormatToggle ? html`\n ${this.format}\n ` : \"\"}\n ${hasEyeDropper ? html`\n \n \n \n ` : \"\"}\n \n
\n ${this._renderSwatches()}\n
\n `;\n }\n _renderSwatches() {\n if (!this.swatches)\n return nothing;\n return html`=.5},r.prototype.toHex=function(){return r=o(this.rgba),t=r.r,e=r.g,u=r.b,i=(a=r.a)<1?s(n(255*a)):\"\",\"#\"+s(t)+s(e)+s(u)+i;var r,t,e,u,a,i;},r.prototype.toRgb=function(){return o(this.rgba)},r.prototype.toRgbString=function(){return r=o(this.rgba),t=r.r,n=r.g,e=r.b,(u=r.a)<1?\"rgba(\"+t+\", \"+n+\", \"+e+\", \"+u+\")\":\"rgb(\"+t+\", \"+n+\", \"+e+\")\";var r,t,n,e,u;},r.prototype.toHsl=function(){return d(c(this.rgba))},r.prototype.toHslString=function(){return r=d(c(this.rgba)),t=r.h,n=r.s,e=r.l,(u=r.a)<1?\"hsla(\"+t+\", \"+n+\"%, \"+e+\"%, \"+u+\")\":\"hsl(\"+t+\", \"+n+\"%, \"+e+\"%)\";var r,t,n,e,u;},r.prototype.toHsv=function(){return r=h(this.rgba),{h:n(r.h),s:n(r.s),v:n(r.v),a:n(r.a,3)};var r;},r.prototype.invert=function(){return w({r:255-(r=this.rgba).r,g:255-r.g,b:255-r.b,a:r.a});var r;},r.prototype.saturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,r))},r.prototype.desaturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,-r))},r.prototype.grayscale=function(){return w(M(this.rgba,-1))},r.prototype.lighten=function(r){return void 0===r&&(r=.1),w($(this.rgba,r))},r.prototype.darken=function(r){return void 0===r&&(r=.1),w($(this.rgba,-r))},r.prototype.rotate=function(r){return void 0===r&&(r=15),this.hue(this.hue()+r)},r.prototype.alpha=function(r){return \"number\"==typeof r?w({r:(t=this.rgba).r,g:t.g,b:t.b,a:r}):n(this.rgba.a,3);var t;},r.prototype.hue=function(r){var t=c(this.rgba);return \"number\"==typeof r?w({h:r,s:t.s,l:t.l,a:t.a}):n(t.h)},r.prototype.isEqual=function(r){return this.toHex()===w(r).toHex()},r}(),w=function(r){return r instanceof j?r:new j(r)};\n\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __decorateClass = (decorators, target, key, kind) => {\n var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;\n for (var i = decorators.length - 1, decorator; i >= 0; i--)\n if (decorator = decorators[i])\n result = (kind ? decorator(target, key, result) : decorator(result)) || result;\n if (kind && result)\n __defProp(target, key, result);\n return result;\n};\nlet UUIColorSwatchElement = class extends LabelMixin(\n \"label\",\n SelectableMixin(ActiveMixin(LitElement))\n) {\n constructor() {\n super();\n this._value = \"\";\n this.disabled = false;\n this.showLabel = false;\n this._color = null;\n this.addEventListener(\"click\", this._setAriaAttributes);\n }\n get value() {\n var _a;\n return this._value ? this._value : ((_a = this.textContent) == null ? void 0 : _a.trim()) || \"\";\n }\n set value(newValue) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate(\"value\", oldValue);\n }\n /**\n * Colord object instance based on the value provided to the element. If the value is not a valid color, it falls back to black (like Amy Winehouse). For more information about Colord, see [Colord](https://omgovich.github.io/colord/)\n *\n * @memberof UUIColorSwatchElement\n */\n get color() {\n return this._color;\n }\n set color(_) {\n return;\n }\n /**\n * Returns true if the color brightness is >= 0.5\n *\n * @readonly\n * @memberof UUIColorSwatchElement\n */\n get isLight() {\n var _a, _b;\n return (_b = (_a = this.color) == null ? void 0 : _a.isLight()) != null ? _b : false;\n }\n _initializeColor() {\n var _a;\n this._color = new j((_a = this.value) != null ? _a : \"\");\n if (!this._color.isValid()) {\n this.disabled = true;\n console.error(\n `Invalid color provided to uui-color-swatch: ${this.value}`\n );\n }\n }\n _setAriaAttributes() {\n if (this.selectable)\n this.setAttribute(\"aria-checked\", this.selected.toString());\n }\n firstUpdated() {\n this._initializeColor();\n this._setAriaAttributes();\n }\n willUpdate(changedProperties) {\n if (changedProperties.has(\"value\")) {\n this._initializeColor();\n }\n if (changedProperties.has(\"disabled\")) {\n if (this.selectable) {\n this.selectable = !this.disabled;\n this.deselectable = !this.disabled;\n }\n }\n if (changedProperties.has(\"selectable\") || changedProperties.has(\"selected\")) {\n this._setAriaAttributes();\n }\n }\n render() {\n return html`\n \n `;\n }\n _renderWithLabel() {\n if (!this.showLabel)\n return nothing;\n return html`\n ${this.renderLabel()}\n ${this.value}\n
`;\n }\n};\nUUIColorSwatchElement.styles = [\n css`\n :host {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n transition: box-shadow 100ms ease-out;\n flex-direction: column;\n }\n\n :host(*),\n * {\n /* TODO: implement globally shared outline style */\n outline-color: var(--uui-color-focus,#3879ff);\n outline-offset: 4px;\n }\n\n :host(:focus-within:not([disabled])) {\n outline: none;\n }\n\n :host(:focus:not([disabled])) #swatch {\n outline-color: var(--uui-color-focus,#3879ff);\n outline-width: var(--uui-swatch-border-width, 1px);\n outline-style: solid;\n outline-offset: var(--uui-swatch-border-width, 1px);\n }\n\n :host([selectable]) #swatch {\n cursor: pointer;\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n #swatch {\n cursor: inherit;\n outline: none;\n background: none;\n border: none;\n padding: 0;\n margin: 0;\n text-align: left;\n border-radius: 3px;\n }\n\n :host(:not([selectable])) #swatch:focus {\n outline: none;\n }\n\n :host([selectable]) #swatch::after {\n content: '';\n position: absolute;\n pointer-events: none;\n inset: calc(var(--uui-swatch-border-width, 1px) * -1);\n width: calc(100% + calc(var(--uui-swatch-border-width, 1px) * 2));\n height: calc(100% + calc(var(--uui-swatch-border-width, 1px) * 2));\n box-sizing: border-box;\n border: var(--uui-swatch-border-width, 1px) solid\n var(--uui-color-selected,#3544b1);\n border-radius: calc(\n var(--uui-border-radius,3px) + var(--uui-swatch-border-width, 1px)\n );\n transition: opacity 100ms ease-out;\n opacity: 0;\n }\n :host([selectable]:not([disabled]):hover) #swatch::after {\n opacity: 0.33;\n }\n :host([selectable][selected]:not([disabled]):hover) #swatch::after {\n opacity: 0.66;\n }\n :host([selectable][selected]:not([disabled])) #swatch::after {\n opacity: 1;\n }\n\n .color-swatch {\n position: relative;\n width: var(--uui-swatch-size, 25px);\n height: var(--uui-swatch-size, 25px);\n border-radius: 3px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n .color-swatch--transparent-bg {\n background-image: linear-gradient(\n 45deg,\n var(--uui-palette-grey,#c4c4c4) 25%,\n transparent 25%\n ),\n linear-gradient(45deg, transparent 75%, var(--uui-palette-grey,#c4c4c4) 75%),\n linear-gradient(45deg, transparent 75%, var(--uui-palette-grey,#c4c4c4) 75%),\n linear-gradient(45deg, var(--uui-palette-grey,#c4c4c4) 25%, transparent 25%);\n background-size: 10px 10px;\n background-position: 0 0, 0 0, -5px -5px, 5px 5px;\n }\n .color-swatch__color {\n width: 100%;\n height: 100%;\n border: 1px solid rgba(0, 0, 0, 0.125);\n border-radius: inherit;\n box-sizing: border-box;\n }\n\n .color-swatch--big .color-swatch__color {\n border-radius: 3px 3px 0 0;\n }\n\n .color-swatch__check {\n position: absolute;\n vertical-align: middle;\n width: calc(var(--uui-swatch-size, 25px) / 2);\n height: calc(var(--uui-swatch-size, 25px) / 2);\n line-height: 0;\n transition: fill 120ms, opacity 120ms;\n fill: #fff;\n pointer-events: none;\n opacity: 0;\n }\n\n .color-swatch--light .color-swatch__check {\n fill: #000;\n }\n\n :host([selected]) .color-swatch__check {\n opacity: 1;\n }\n\n slot[name='label']::slotted(*),\n .label {\n font-size: var(--uui-size-4,12px);\n }\n\n .color-swatch--big {\n width: 120px;\n height: 50px;\n }\n\n .color-swatch__label {\n max-width: 120px;\n box-sizing: border-box;\n padding: var(--uui-size-space-1,3px) var(--uui-size-space-2,6px);\n line-height: 1.5;\n display: flex;\n flex-direction: column;\n background: white;\n border: 1px solid var(--uui-color-border,#d8d7d9);\n border-radius: 0 0 3px 3px;\n font-size: var(--uui-size-4, 12px);\n }\n\n .color-swatch__label strong {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n box-sizing: border-box;\n }\n `\n];\n__decorateClass([\n property()\n], UUIColorSwatchElement.prototype, \"value\", 1);\n__decorateClass([\n property({ type: Boolean, reflect: true })\n], UUIColorSwatchElement.prototype, \"disabled\", 2);\n__decorateClass([\n property({ type: Boolean, attribute: \"show-label\" })\n], UUIColorSwatchElement.prototype, \"showLabel\", 2);\nUUIColorSwatchElement = __decorateClass([\n defineElement(\"uui-color-swatch\")\n], UUIColorSwatchElement);\n\nexport { UUIColorSwatchElement };\n","import { UUIEvent, UUISelectableEvent } from '@umbraco-ui/uui-base/lib/events';\nimport { defineElement } from '@umbraco-ui/uui-base/lib/registration';\nimport { LitElement, html, css } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';\n\nvar __defProp$1 = Object.defineProperty;\nvar __getOwnPropSymbols = Object.getOwnPropertySymbols;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __propIsEnum = Object.prototype.propertyIsEnumerable;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __spreadValues = (a, b) => {\n for (var prop in b || (b = {}))\n if (__hasOwnProp.call(b, prop))\n __defNormalProp(a, prop, b[prop]);\n if (__getOwnPropSymbols)\n for (var prop of __getOwnPropSymbols(b)) {\n if (__propIsEnum.call(b, prop))\n __defNormalProp(a, prop, b[prop]);\n }\n return a;\n};\nclass UUIColorSwatchesEvent extends UUIEvent {\n constructor(evName, eventInit = {}) {\n super(evName, __spreadValues(__spreadValues({}, { bubbles: true }), eventInit));\n }\n}\nUUIColorSwatchesEvent.CHANGE = \"change\";\n\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __decorateClass = (decorators, target, key, kind) => {\n var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;\n for (var i = decorators.length - 1, decorator; i >= 0; i--)\n if (decorator = decorators[i])\n result = (kind ? decorator(target, key, result) : decorator(result)) || result;\n if (kind && result)\n __defProp(target, key, result);\n return result;\n};\nlet UUIColorSwatchesElement = class extends LabelMixin(\"label\", LitElement) {\n constructor() {\n super();\n this.value = \"\";\n this.disabled = false;\n this._onSelected = (event) => {\n const target = event.target;\n if (!this.swatches.includes(target))\n return;\n if (this._selectedElement) {\n this._selectedElement.selected = false;\n this._selectedElement.active = false;\n this._selectedElement = void 0;\n }\n this._selectedElement = target;\n this._activeElement = this._selectedElement;\n this.value = this._selectedElement.value || \"\";\n this.dispatchEvent(new UUIColorSwatchesEvent(UUIColorSwatchesEvent.CHANGE));\n };\n this._onDeselected = (event) => {\n const target = event.target;\n if (!this.swatches.includes(target))\n return;\n if (this._activeElement === target) {\n this._activeElement = void 0;\n }\n if (this._selectedElement === target) {\n this._selectedElement.selected = false;\n this._selectedElement.active = false;\n this._selectedElement = void 0;\n this.value = \"\";\n this.dispatchEvent(\n new UUIColorSwatchesEvent(UUIColorSwatchesEvent.CHANGE)\n );\n }\n };\n this.addEventListener(UUISelectableEvent.SELECTED, this._onSelected);\n this.addEventListener(UUISelectableEvent.DESELECTED, this._onDeselected);\n }\n get _activeElement() {\n return this.__activeElement;\n }\n set _activeElement(el) {\n if (this.__activeElement) {\n this.__activeElement.active = false;\n }\n if (el) {\n el.active = true;\n this.__activeElement = el;\n }\n }\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute(\"role\", \"radiogroup\");\n this.setAttribute(\"aria-label\", this.label);\n }\n willUpdate(_changedProperties) {\n if (_changedProperties.has(\"label\")) {\n this.setAttribute(\"aria-label\", this.label);\n }\n }\n _handleSlotChange() {\n if (!this.swatches || this.swatches.length === 0)\n return;\n this.swatches.forEach((swatch) => {\n var _a;\n swatch.setAttribute(\"aria-checked\", \"false\");\n swatch.setAttribute(\"role\", \"radio\");\n if (this.disabled) {\n swatch.setAttribute(\"disabled\", \"\");\n } else {\n swatch.setAttribute(\"selectable\", \"selectable\");\n }\n if (this.value !== \"\" && ((_a = swatch.color) == null ? void 0 : _a.isEqual(this.value))) {\n swatch.selected = true;\n swatch.setAttribute(\"aria-checked\", \"true\");\n this._selectedElement = swatch;\n this._activeElement = this._selectedElement;\n }\n });\n }\n /**\n * Deselects all swatches.\n *\n * @memberof UUIColorSwatchesElement\n */\n resetSelection() {\n this.swatches.forEach((swatch) => {\n swatch.selected = false;\n swatch.active = false;\n swatch.selectable = !swatch.disabled;\n });\n this._activeElement = void 0;\n this._selectedElement = void 0;\n this.value = \"\";\n }\n render() {\n return html``;\n }\n};\nUUIColorSwatchesElement.styles = [\n css`\n :host {\n display: flex;\n flex-wrap: wrap;\n gap: 0.4rem;\n }\n `\n];\n__decorateClass([\n property()\n], UUIColorSwatchesElement.prototype, \"value\", 2);\n__decorateClass([\n property({ type: Boolean, reflect: true })\n], UUIColorSwatchesElement.prototype, \"disabled\", 2);\n__decorateClass([\n queryAssignedElements({ selector: \"uui-color-swatch\" })\n], UUIColorSwatchesElement.prototype, \"swatches\", 2);\nUUIColorSwatchesElement = __decorateClass([\n defineElement(\"uui-color-swatches\")\n], UUIColorSwatchesElement);\n\nexport { UUIColorSwatchesElement, UUIColorSwatchesEvent };\n","import { defineElement } from '@umbraco-ui/uui-base/lib/registration';\nimport { css, LitElement, html } from 'lit';\nimport { property, queryAssignedElements, state } from 'lit/decorators.js';\nimport { UUIEvent, UUISelectableEvent } from '@umbraco-ui/uui-base/lib/events';\nimport { SelectableMixin, ActiveMixin } from '@umbraco-ui/uui-base/lib/mixins';\n\nvar __defProp$2 = Object.defineProperty;\nvar __getOwnPropSymbols = Object.getOwnPropertySymbols;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __propIsEnum = Object.prototype.propertyIsEnumerable;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __spreadValues = (a, b) => {\n for (var prop in b || (b = {}))\n if (__hasOwnProp.call(b, prop))\n __defNormalProp(a, prop, b[prop]);\n if (__getOwnPropSymbols)\n for (var prop of __getOwnPropSymbols(b)) {\n if (__propIsEnum.call(b, prop))\n __defNormalProp(a, prop, b[prop]);\n }\n return a;\n};\nclass UUIComboboxListEvent extends UUIEvent {\n constructor(evName, eventInit = {}) {\n super(evName, __spreadValues(__spreadValues({}, { bubbles: true }), eventInit));\n }\n}\nUUIComboboxListEvent.CHANGE = \"change\";\nUUIComboboxListEvent.INNER_SLOT_CHANGE = \"inner-slot-change\";\n\nvar __defProp$1 = Object.defineProperty;\nvar __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;\nvar __decorateClass$1 = (decorators, target, key, kind) => {\n var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;\n for (var i = decorators.length - 1, decorator; i >= 0; i--)\n if (decorator = decorators[i])\n result = (kind ? decorator(target, key, result) : decorator(result)) || result;\n if (kind && result)\n __defProp$1(target, key, result);\n return result;\n};\nlet UUIComboboxListElement = class extends LitElement {\n constructor() {\n super(...arguments);\n this.displayValue = \"\";\n this._value = \"\";\n this._onSlotChange = () => {\n this._activeElement = void 0;\n for (let i = 0; i < this._activeOptions.length; i++) {\n if (i === 0) {\n this._activeElement = this._activeOptions[i];\n } else {\n this._activeOptions[i].active = false;\n }\n }\n this._updateSelection();\n this.dispatchEvent(\n new UUIComboboxListEvent(UUIComboboxListEvent.INNER_SLOT_CHANGE)\n );\n };\n this._onSelected = (e) => {\n if (this._selectedElement) {\n this._selectedElement.selected = false;\n this._selectedElement.active = false;\n this._selectedElement = void 0;\n }\n this._selectedElement = e.composedPath()[0];\n this._activeElement = this._selectedElement;\n this.value = this._selectedElement.value || \"\";\n this.displayValue = this._selectedElement.displayValue || \"\";\n this.dispatchEvent(new UUIComboboxListEvent(UUIComboboxListEvent.CHANGE));\n };\n this._onDeselected = (e) => {\n const el = e.composedPath()[0];\n if (this._activeElement === el) {\n this._activeElement = void 0;\n }\n if (this._selectedElement === el) {\n this.value = \"\";\n this.displayValue = \"\";\n this.dispatchEvent(new UUIComboboxListEvent(UUIComboboxListEvent.CHANGE));\n }\n };\n this._moveIndex = (distance) => {\n const newIndex = Math.min(\n Math.max(this._getActiveIndex() + distance, 0),\n this._options.length - 1\n );\n this._goToIndex(newIndex);\n };\n this._onKeyDown = (e) => {\n var _a;\n if (this._options.length <= 0)\n return;\n switch (e.key) {\n case \"ArrowUp\":\n e.preventDefault();\n e.ctrlKey ? this._moveIndex(-10) : this._moveIndex(-1);\n break;\n case \"ArrowDown\":\n e.preventDefault();\n e.ctrlKey ? this._moveIndex(10) : this._moveIndex(1);\n break;\n case \"Home\": {\n e.preventDefault();\n this._goToIndex(0);\n break;\n }\n case \"Enter\": {\n e.preventDefault();\n (_a = this._activeElement) == null ? void 0 : _a.click();\n break;\n }\n case \"End\": {\n e.preventDefault();\n this._goToIndex(this._options.length - 1);\n break;\n }\n }\n };\n }\n get value() {\n return this._value;\n }\n set value(newValue) {\n if (this._value === newValue)\n return;\n const oldValue = this._value;\n this._value = newValue;\n this._updateSelection();\n this.requestUpdate(\"value\", oldValue);\n }\n get for() {\n return this._for;\n }\n set for(newValue) {\n if (this._for) {\n this._for.removeEventListener(\"keydown\", this._onKeyDown);\n }\n this._for = newValue;\n if (this._for) {\n this._for.addEventListener(\"keydown\", this._onKeyDown);\n }\n }\n get _activeElement() {\n return this.__activeElement;\n }\n set _activeElement(el) {\n if (this.__activeElement) {\n this.__activeElement.active = false;\n }\n if (el) {\n el.active = true;\n this.__activeElement = el;\n }\n }\n connectedCallback() {\n super.connectedCallback();\n if (!this._for) {\n this._for = this;\n }\n this.addEventListener(UUISelectableEvent.SELECTED, this._onSelected);\n this.addEventListener(UUISelectableEvent.DESELECTED, this._onDeselected);\n }\n disconnectedCallback() {\n super.disconnectedCallback();\n document.removeEventListener(\"keydown\", this._onKeyDown);\n this.removeEventListener(UUISelectableEvent.SELECTED, this._onSelected);\n this.removeEventListener(UUISelectableEvent.DESELECTED, this._onDeselected);\n }\n _updateSelection() {\n this.displayValue = \"\";\n for (const option of this._options) {\n if (option.value === this._value) {\n this.displayValue = option.displayValue || \"\";\n option.selected = true;\n } else {\n option.selected = false;\n }\n }\n }\n _getActiveIndex() {\n return this._activeElement ? this._options.indexOf(this._activeElement) : -1;\n }\n _goToIndex(index) {\n index = Math.min(Math.max(index, 0), this._options.length - 1);\n this._activeElement = this._options[index];\n if (this._activeElement) {\n this._activeElement.scrollIntoView({\n behavior: \"auto\",\n block: \"nearest\",\n inline: \"nearest\"\n });\n }\n }\n render() {\n return html` `;\n }\n};\nUUIComboboxListElement.styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n }\n `\n];\n__decorateClass$1([\n property()\n], UUIComboboxListElement.prototype, \"value\", 1);\n__decorateClass$1([\n property({ type: String })\n], UUIComboboxListElement.prototype, \"displayValue\", 2);\n__decorateClass$1([\n property({ attribute: false })\n], UUIComboboxListElement.prototype, \"for\", 1);\n__decorateClass$1([\n queryAssignedElements({\n flatten: true,\n selector: \"uui-combobox-list-option:not([disabled])\"\n })\n], UUIComboboxListElement.prototype, \"_options\", 2);\n__decorateClass$1([\n queryAssignedElements({\n flatten: true,\n selector: \"uui-combobox-list-option[active]\"\n })\n], UUIComboboxListElement.prototype, \"_activeOptions\", 2);\n__decorateClass$1([\n state()\n], UUIComboboxListElement.prototype, \"_value\", 2);\nUUIComboboxListElement = __decorateClass$1([\n defineElement(\"uui-combobox-list\")\n], UUIComboboxListElement);\n\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __decorateClass = (decorators, target, key, kind) => {\n var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;\n for (var i = decorators.length - 1, decorator; i >= 0; i--)\n if (decorator = decorators[i])\n result = (kind ? decorator(target, key, result) : decorator(result)) || result;\n if (kind && result)\n __defProp(target, key, result);\n return result;\n};\nlet UUIComboboxListOptionElement = class extends SelectableMixin(\n ActiveMixin(LitElement)\n) {\n constructor() {\n super();\n this._disabled = false;\n this._displayValue = \"\";\n this.selectable = true;\n this.deselectable = false;\n }\n get value() {\n var _a;\n return this._value ? this._value : ((_a = this.textContent) == null ? void 0 : _a.trim()) || \"\";\n }\n set value(newValue) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate(\"value\", oldValue);\n }\n get displayValue() {\n var _a;\n return this._displayValue ? this._displayValue : ((_a = this.textContent) == null ? void 0 : _a.trim()) || \"\";\n }\n set displayValue(newValue) {\n const oldValue = this._displayValue;\n this._displayValue = newValue;\n this.requestUpdate(\"displayValue\", oldValue);\n }\n get disabled() {\n return this._disabled;\n }\n set disabled(newValue) {\n const oldValue = this._disabled;\n this._disabled = newValue;\n this.selectable = !this._disabled;\n this.requestUpdate(\"disabled\", oldValue);\n }\n render() {\n return html``;\n }\n};\nUUIComboboxListOptionElement.styles = [\n css`\n :host {\n position: relative;\n cursor: pointer;\n margin: 0 6px;\n border-radius: var(--uui-border-radius,3px);\n outline: 2px solid transparent;\n outline-offset: -2px;\n }\n :host(:first-child) {\n margin-top: 6px;\n }\n :host(:last-child) {\n margin-bottom: 6px;\n }\n\n :host([selected]):host([active])::after {\n display: block;\n content: '';\n position: absolute;\n inset: 0px;\n outline: var(--uui-color-surface,#fff) solid 2px;\n outline-offset: -4px;\n }\n /*\n :host::before {\n display: block;\n content: '';\n opacity: 0;\n position: absolute;\n inset: 0;\n background-color: var(--uui-color-selected);\n }\n\n :host(:hover)::before {\n opacity: 0.15;\n border-radius: var(--uui-border-radius);\n } */\n\n :host(:hover) {\n background-color: var(--uui-color-surface-emphasis,rgb(250, 250, 250));\n color: var(--uui-color-interactive-emphasis,#3544b1);\n }\n\n :host([disabled]) {\n cursor: auto;\n color: var(--uui-color-disabled-contrast,#c4c4c4);\n background-color: var(--uui-color-disabled,#f3f3f5);\n }\n :host([disabled]:hover) {\n background-color: var(--uui-color-disabled,#f3f3f5);\n }\n\n :host([active]) {\n outline-color: var(--uui-color-focus,#3879ff);\n }\n\n :host([selected]) {\n color: var(--uui-color-selected-contrast,#fff);\n background-color: var(--uui-color-selected,#3544b1);\n }\n :host([selected]:hover) {\n color: var(--uui-color-selected-contrast,#fff);\n background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));\n }\n :host([selected][disabled]) {\n color: var(--uui-color-disabled-contrast,#c4c4c4);\n background-color: var(--uui-color-disabled,#f3f3f5);\n }\n `\n];\n__decorateClass([\n state()\n], UUIComboboxListOptionElement.prototype, \"_disabled\", 2);\n__decorateClass([\n state()\n], UUIComboboxListOptionElement.prototype, \"_displayValue\", 2);\n__decorateClass([\n property({ type: String })\n], UUIComboboxListOptionElement.prototype, \"value\", 1);\n__decorateClass([\n property({ type: String, attribute: \"display-value\" })\n], UUIComboboxListOptionElement.prototype, \"displayValue\", 1);\n__decorateClass([\n property({ type: Boolean, reflect: true })\n], UUIComboboxListOptionElement.prototype, \"disabled\", 1);\nUUIComboboxListOptionElement = __decorateClass([\n defineElement(\"uui-combobox-list-option\")\n], UUIComboboxListOptionElement);\n\nexport { UUIComboboxListElement, UUIComboboxListEvent, UUIComboboxListOptionElement };\n","import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';\nimport { defineElement } from '@umbraco-ui/uui-base/lib/registration';\nimport { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';\nimport { UUIComboboxListEvent } from '@umbraco-ui/uui-combobox-list/lib';\nimport { iconRemove } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';\nimport { LitElement, html, css } from 'lit';\nimport { property, query, queryAssignedElements, state } from 'lit/decorators.js';\nimport { UUIEvent } from '@umbraco-ui/uui-base/lib/events';\n\nvar __defProp$1 = Object.defineProperty;\nvar __getOwnPropSymbols = Object.getOwnPropertySymbols;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __propIsEnum = Object.prototype.propertyIsEnumerable;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __spreadValues = (a, b) => {\n for (var prop in b || (b = {}))\n if (__hasOwnProp.call(b, prop))\n __defNormalProp(a, prop, b[prop]);\n if (__getOwnPropSymbols)\n for (var prop of __getOwnPropSymbols(b)) {\n if (__propIsEnum.call(b, prop))\n __defNormalProp(a, prop, b[prop]);\n }\n return a;\n};\nclass UUIComboboxEvent extends UUIEvent {\n constructor(evName, eventInit = {}) {\n super(evName, __spreadValues(__spreadValues({}, { bubbles: true }), eventInit));\n }\n}\nUUIComboboxEvent.SEARCH = \"search\";\nUUIComboboxEvent.CHANGE = \"change\";\n\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __decorateClass = (decorators, target, key, kind) => {\n var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;\n for (var i = decorators.length - 1, decorator; i >= 0; i--)\n if (decorator = decorators[i])\n result = (kind ? decorator(target, key, result) : decorator(result)) || result;\n if (kind && result)\n __defProp(target, key, result);\n return result;\n};\nlet UUIComboboxElement = class extends FormControlMixin(LitElement) {\n constructor() {\n super(...arguments);\n this.open = false;\n this.closeLabel = \"Close\";\n this.disabled = false;\n this._displayValue = \"\";\n this._search = \"\";\n this._isPhone = false;\n this._onPhoneChange = () => {\n this._isPhone = this.phoneMediaQuery.matches;\n };\n this._onMouseDown = () => requestAnimationFrame(() => this._input.focus());\n this._onBlur = () => requestAnimationFrame(() => {\n var _a;\n if (!((_a = this.shadowRoot) == null ? void 0 : _a.activeElement)) {\n this._onClose();\n }\n });\n this._onInput = (e) => {\n e.preventDefault();\n e.stopImmediatePropagation();\n this.search = e.target.value;\n this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));\n this._open();\n };\n this._onSlotChange = () => {\n var _a;\n if (this.value && this.value !== ((_a = this._comboboxList) == null ? void 0 : _a.value)) {\n this._updateValue(this.value);\n }\n };\n this._onChange = () => {\n var _a;\n this.value = ((_a = this._comboboxList) == null ? void 0 : _a.value) || \"\";\n this.search = this.value ? this.search : \"\";\n this._onClose();\n this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));\n };\n this._open = () => {\n if (this.open)\n return;\n this.open = true;\n };\n this._onClose = () => {\n if (!this.open)\n return;\n this.open = false;\n this.search = \"\";\n this._input.value = this._displayValue;\n this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));\n };\n this._onKeyDown = (e) => {\n if (this.open === false && e.key === \"Enter\") {\n e.preventDefault();\n e.stopImmediatePropagation();\n }\n if (e.key === \"ArrowUp\" || e.key === \"ArrowDown\") {\n this._open();\n }\n if (e.key === \"Escape\" || e.key === \"Enter\") {\n this._onClose();\n }\n };\n this._onClear = (e) => {\n if (e.key && e.key !== \"Enter\")\n return;\n e.preventDefault();\n e.stopImmediatePropagation();\n this.value = \"\";\n this.search = \"\";\n this._input.value = this._displayValue;\n this._input.focus();\n this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));\n this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));\n };\n this._renderInput = () => {\n return html` \n \n ${this.disabled ? \"\" : this._renderClearButton()} ${this._renderCaret()}\n \n `;\n };\n this._renderCaret = () => {\n return html``;\n };\n this._renderClearButton = () => {\n return this.value || this.search ? html`\n \n ` : \"\";\n };\n this._renderDropdown = () => {\n return html`\n \n \n \n
`;\n };\n }\n get value() {\n return this._value;\n }\n set value(newValue) {\n if (typeof newValue === \"string\") {\n this._updateValue(newValue);\n }\n super.value = newValue;\n }\n get search() {\n return this._search;\n }\n set search(newValue) {\n if (this.search === newValue)\n return;\n const oldValue = this._search;\n this._search = newValue;\n this.requestUpdate(\"search\", oldValue);\n }\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener(\"blur\", this._onBlur);\n this.addEventListener(\"mousedown\", this._onMouseDown);\n this.phoneMediaQuery = window.matchMedia(\"(max-width: 600px)\");\n this._onPhoneChange();\n this.phoneMediaQuery.addEventListener(\"change\", this._onPhoneChange);\n demandCustomElement(this, \"uui-icon\");\n demandCustomElement(this, \"uui-input\");\n demandCustomElement(this, \"uui-button\");\n demandCustomElement(this, \"uui-combobox-list\");\n demandCustomElement(this, \"uui-scroll-container\");\n demandCustomElement(this, \"uui-popover\");\n }\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"blur\", this._onBlur);\n this.removeEventListener(\"mousedown\", this._onMouseDown);\n this.phoneMediaQuery.removeEventListener(\"change\", this._onPhoneChange);\n }\n async firstUpdated() {\n var _a;\n const list = (_a = this._comboboxListElements) == null ? void 0 : _a[0];\n if (list) {\n this._comboboxList = list;\n this._comboboxList.for = this;\n this._comboboxList.addEventListener(\n UUIComboboxListEvent.CHANGE,\n this._onChange\n );\n this._comboboxList.addEventListener(\n UUIComboboxListEvent.INNER_SLOT_CHANGE,\n this._onSlotChange\n );\n await this.updateComplete;\n this._updateValue(this.value);\n }\n }\n _updateValue(value) {\n if (this._comboboxList) {\n this._comboboxList.value = value;\n requestAnimationFrame(\n () => this._displayValue = this._comboboxList.displayValue || \"\"\n );\n }\n }\n getFormElement() {\n return this._input;\n }\n render() {\n if (this._isPhone && this.open) {\n return html` \n \n ${this.closeLabel}\n \n ${this._renderInput()} ${this._renderDropdown()}\n
`;\n } else {\n return html`\n this._onClose()}>\n ${this._renderInput()} ${this._renderDropdown()}\n \n `;\n }\n }\n};\nUUIComboboxElement.styles = [\n css`\n :host {\n display: inline-block;\n }\n\n #combobox-input {\n width: 100%;\n border-radius: var(--uui-size-1,3px);\n }\n\n #scroll-container {\n overflow-y: auto;\n width: 100%;\n max-height: var(--uui-combobox-popover-max-height, 500px);\n }\n\n #dropdown {\n overflow: hidden;\n z-index: -1;\n background-color: var(\n --uui-combobox-popover-background-color,\n var(--uui-color-surface,#fff)\n );\n border: 1px solid var(--uui-color-border,#d8d7d9);\n border-radius: var(--uui-border-radius,3px);\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n box-shadow: var(--uui-shadow-depth-3,0 10px 20px rgba(0,0,0,0.19) , 0 6px 6px rgba(0,0,0,0.23));\n }\n\n #caret {\n margin-right: var(--uui-size-3, 9px);\n display: flex;\n width: 1.15em;\n flex-shrink: 0;\n margin-top: -1px;\n }\n\n :host([disabled]) #caret {\n fill: var(--uui-color-disabled-contrast,#c4c4c4);\n }\n\n #phone-wrapper {\n position: fixed;\n inset: 0;\n display: flex;\n flex-direction: column;\n z-index: 1;\n font-size: 1.1em;\n }\n\n #phone-wrapper #dropdown {\n display: flex;\n }\n\n #phone-wrapper #combobox-input {\n height: var(--uui-size-16,48px);\n }\n\n #phone-wrapper > uui-button {\n height: var(--uui-size-14,42px);\n width: 100%;\n }\n\n #phone-wrapper #scroll-container {\n max-height: unset;\n }\n `\n];\n__decorateClass([\n property({ attribute: \"value\", reflect: true })\n], UUIComboboxElement.prototype, \"value\", 1);\n__decorateClass([\n property({ type: String })\n], UUIComboboxElement.prototype, \"search\", 1);\n__decorateClass([\n property({ type: Boolean })\n], UUIComboboxElement.prototype, \"open\", 2);\n__decorateClass([\n property({ type: String })\n], UUIComboboxElement.prototype, \"closeLabel\", 2);\n__decorateClass([\n property({ type: Boolean, reflect: true })\n], UUIComboboxElement.prototype, \"disabled\", 2);\n__decorateClass([\n query(\"#combobox-input\")\n], UUIComboboxElement.prototype, \"_input\", 2);\n__decorateClass([\n queryAssignedElements({\n flatten: true,\n selector: \"uui-combobox-list\"\n })\n], UUIComboboxElement.prototype, \"_comboboxListElements\", 2);\n__decorateClass([\n state()\n], UUIComboboxElement.prototype, \"_displayValue\", 2);\n__decorateClass([\n state()\n], UUIComboboxElement.prototype, \"_search\", 2);\n__decorateClass([\n state()\n], UUIComboboxElement.prototype, \"_isPhone\", 2);\nUUIComboboxElement = __decorateClass([\n defineElement(\"uui-combobox\")\n], UUIComboboxElement);\n\nexport { UUIComboboxElement, UUIComboboxEvent };\n","import { defineElement } from '@umbraco-ui/uui-base/lib/registration';\nimport { css, LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __decorateClass = (decorators, target, key, kind) => {\n var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;\n for (var i = decorators.length - 1, decorator; i >= 0; i--)\n if (decorator = decorators[i])\n result = (kind ? decorator(target, key, result) : decorator(result)) || result;\n if (kind && result)\n __defProp(target, key, result);\n return result;\n};\nlet UUIDialogLayoutElement = class extends LitElement {\n constructor() {\n super(...arguments);\n this.headline = null;\n this._headlineSlotHasContent = false;\n this._headlineSlotChanged = (e) => {\n this._headlineSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;\n };\n }\n /**\n * Renders a h3 with the headline slot nested\n * @returns {TemplateResult}\n * @protected\n * @method\n */\n renderHeadline() {\n return html` \n ${this.headline}\n \n
`;\n }\n /**\n * Renders default slot\n * @returns {TemplateResult}\n * @protected\n * @method\n */\n renderContent() {\n return html``;\n }\n /**\n * Renders actions slot\n * @returns {TemplateResult}\n * @protected\n * @method\n */\n renderActions() {\n return html``;\n }\n render() {\n return html`${this.renderHeadline()} ${this.renderContent()}\n ${this.renderActions()} `;\n }\n};\nUUIDialogLayoutElement.styles = [\n css`\n :host {\n display: block;\n padding: var(--uui-size-10,30px) var(--uui-size-14,42px);\n color: var(--uui-color-text,#060606);\n }\n\n #actions {\n margin-top: var(--uui-size-8,24px);\n display: flex;\n justify-content: end;\n gap: var(--uui-size-4,12px);\n }\n `\n];\n__decorateClass([\n property({ type: String })\n], UUIDialogLayoutElement.prototype, \"headline\", 2);\n__decorateClass([\n state()\n], UUIDialogLayoutElement.prototype, \"_headlineSlotHasContent\", 2);\nUUIDialogLayoutElement = __decorateClass([\n defineElement(\"uui-dialog-layout\")\n], UUIDialogLayoutElement);\n\nexport { UUIDialogLayoutElement };\n","import { defineElement } from '@umbraco-ui/uui-base/lib/registration';\nimport { css, LitElement, html } from 'lit';\n\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __decorateClass = (decorators, target, key, kind) => {\n var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;\n for (var i = decorators.length - 1, decorator; i >= 0; i--)\n if (decorator = decorators[i])\n result = (kind ? decorator(target, key, result) : decorator(result)) || result;\n if (kind && result)\n __defProp(target, key, result);\n return result;\n};\nlet UUIDialogElement = class extends LitElement {\n render() {\n return html``;\n }\n};\nUUIDialogElement.styles = [\n css`\n :host {\n position: relative;\n display: block;\n max-width: 580px;\n color: var(--uui-color-text,#060606);\n\n background-color: var(\n --uui-dialog-background-color,\n var(--uui-color-surface,#fff)\n );\n\n box-shadow: var(--uui-shadow-depth-5,0 19px 38px rgba(0,0,0,0.30) , 0 15px 12px rgba(0,0,0,0.22));\n border-radius: var(\n --uui-dialog-border-radius,\n calc(var(--uui-border-radius,3px) * 2)\n );\n }\n `\n];\nUUIDialogElement = __decorateClass([\n defineElement(\"uui-dialog\")\n], UUIDialogElement);\n\nexport { UUIDialogElement };\n","import { defineElement } from '@umbraco-ui/uui-base/lib/registration';\nimport { LitElement, html, css } from 'lit';\nimport { query, property } from 'lit/decorators.js';\nimport { UUIEvent } from '@umbraco-ui/uui-base/lib/events';\nimport { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';\nimport { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';\n\nvar __defProp$1 = Object.defineProperty;\nvar __getOwnPropSymbols = Object.getOwnPropertySymbols;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __propIsEnum = Object.prototype.propertyIsEnumerable;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __spreadValues = (a, b) => {\n for (var prop in b || (b = {}))\n if (__hasOwnProp.call(b, prop))\n __defNormalProp(a, prop, b[prop]);\n if (__getOwnPropSymbols)\n for (var prop of __getOwnPropSymbols(b)) {\n if (__propIsEnum.call(b, prop))\n __defNormalProp(a, prop, b[prop]);\n }\n return a;\n};\nclass UUIFileDropzoneEvent extends UUIEvent {\n constructor(evName, eventInit = {}) {\n super(evName, __spreadValues(__spreadValues({}, { bubbles: true }), eventInit));\n }\n}\nUUIFileDropzoneEvent.CHANGE = \"change\";\n\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __decorateClass = (decorators, target, key, kind) => {\n var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;\n for (var i = decorators.length - 1, decorator; i >= 0; i--)\n if (decorator = decorators[i])\n result = (kind ? decorator(target, key, result) : decorator(result)) || result;\n if (kind && result)\n __defProp(target, key, result);\n return result;\n};\nlet UUIFileDropzoneElement = class extends LabelMixin(\"\", LitElement) {\n constructor() {\n super();\n this._acceptedFileExtensions = [];\n this._acceptedMimeTypes = [];\n this.multiple = false;\n this.addEventListener(\"dragenter\", this._onDragEnter, false);\n this.addEventListener(\"dragleave\", this._onDragLeave, false);\n this.addEventListener(\"dragover\", this._onDragOver, false);\n this.addEventListener(\"drop\", this._onDrop, false);\n }\n set accept(value) {\n if (value) {\n const mimetypes = [];\n const fileextensions = [];\n value.split(\",\").forEach((item) => {\n item = item.trim().toLowerCase();\n if (new RegExp(\"[a-z]+\\\\/[a-z*]\", \"s\").test(item)) {\n mimetypes.push(item);\n } else {\n fileextensions.push(item.replace(/^\\./, \"\"));\n }\n });\n this._acceptedMimeTypes = mimetypes;\n this._acceptedFileExtensions = fileextensions;\n } else {\n this._acceptedMimeTypes = [];\n this._acceptedFileExtensions = [];\n }\n }\n /**\n * Opens the native file picker to select a file.\n * @method browse\n */\n browse() {\n this._input.click();\n }\n connectedCallback() {\n super.connectedCallback();\n demandCustomElement(this, \"uui-symbol-file-dropzone\");\n }\n async _getAllFileEntries(dataTransferItemList) {\n const fileEntries = [];\n const queue = [...dataTransferItemList];\n while (queue.length > 0) {\n const entry = queue.shift();\n if (entry.kind === \"file\") {\n const file = entry.getAsFile();\n if (!file)\n continue;\n if (this._isAccepted(file)) {\n fileEntries.push(file);\n }\n } else if (entry.kind === \"directory\") {\n if (\"webkitGetAsEntry\" in entry === false)\n continue;\n const directory = entry.webkitGetAsEntry();\n queue.push(\n ...await this._readAllDirectoryEntries(directory.createReader())\n );\n }\n }\n return fileEntries;\n }\n // Get all the entries (files or sub-directories) in a directory\n // by calling readEntries until it returns empty array\n async _readAllDirectoryEntries(directoryReader) {\n const entries = [];\n let readEntries = await this._readEntriesPromise(directoryReader);\n while (readEntries.length > 0) {\n entries.push(...readEntries);\n readEntries = await this._readEntriesPromise(directoryReader);\n }\n return entries;\n }\n async _readEntriesPromise(directoryReader) {\n return new Promise((resolve, reject) => {\n try {\n directoryReader.readEntries(resolve, reject);\n } catch (err) {\n console.log(err);\n reject(err);\n }\n });\n }\n _isAccepted(file) {\n if (this._acceptedFileExtensions.length === 0 && this._acceptedMimeTypes.length === 0) {\n return true;\n }\n const fileType = file.type.toLowerCase();\n const fileExtension = file.name.split(\".\").pop();\n if (fileExtension && this._acceptedFileExtensions.includes(fileExtension.toLowerCase())) {\n return true;\n }\n for (const mimeType in this._acceptedMimeTypes) {\n if (fileType === mimeType) {\n return true;\n } else if (mimeType.endsWith(\"/*\") && fileType.startsWith(mimeType.replace(\"/*\", \"\"))) {\n return true;\n }\n }\n return false;\n }\n async _onDrop(e) {\n var _a;\n e.preventDefault();\n this._dropzone.classList.remove(\"hover\");\n const items = (_a = e.dataTransfer) == null ? void 0 : _a.items;\n if (items) {\n let result = await this._getAllFileEntries(items);\n if (this.multiple === false && result.length) {\n result = [result[0]];\n }\n this.dispatchEvent(\n new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {\n detail: { files: result }\n })\n );\n }\n }\n _onDragOver(e) {\n e.preventDefault();\n }\n _onDragEnter(e) {\n this._dropzone.classList.add(\"hover\");\n e.preventDefault();\n }\n _onDragLeave(e) {\n this._dropzone.classList.remove(\"hover\");\n e.preventDefault();\n }\n _onFileInputChange() {\n const files = this._input.files ? Array.from(this._input.files) : [];\n this.dispatchEvent(\n new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {\n detail: { files }\n })\n );\n }\n render() {\n return html`\n \n \n ${this.renderLabel()}\n e.stopImmediatePropagation()}\n id=\"input\"\n type=\"file\"\n accept=${this.accept}\n ?multiple=${this.multiple}\n @change=${this._onFileInputChange}\n aria-label=\"${this.label}\" />\n \n
\n `;\n }\n};\nUUIFileDropzoneElement.styles = [\n css`\n #dropzone {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n padding: var(--uui-size-4,12px);\n border: 3px solid transparent;\n margin: -3px;\n backdrop-filter: blur(2px);\n }\n #dropzone.hover {\n border-color: var(--uui-color-default,#1b264f);\n }\n #dropzone.hover::before {\n content: '';\n position: absolute;\n inset: 0;\n opacity: 0.2;\n border-color: var(--uui-color-default,#1b264f);\n background-color: var(--uui-color-default,#1b264f);\n }\n #symbol {\n color: var(--uui-color-default,#1b264f);\n max-width: 100%;\n max-height: 100%;\n }\n #input {\n position: absolute;\n width: 0px;\n height: 0px;\n opacity: 0;\n display: none;\n }\n `\n];\n__decorateClass([\n query(\"#input\")\n], UUIFileDropzoneElement.prototype, \"_input\", 2);\n__decorateClass([\n query(\"#dropzone\")\n], UUIFileDropzoneElement.prototype, \"_dropzone\", 2);\n__decorateClass([\n property({ type: String })\n], UUIFileDropzoneElement.prototype, \"accept\", 1);\n__decorateClass([\n property({ type: Boolean })\n], UUIFileDropzoneElement.prototype, \"multiple\", 2);\nUUIFileDropzoneElement = __decorateClass([\n defineElement(\"uui-file-dropzone\")\n], UUIFileDropzoneElement);\n\nexport { UUIFileDropzoneElement, UUIFileDropzoneEvent };\n","import { defineElement } from '@umbraco-ui/uui-base/lib/registration';\nimport { state, property } from 'lit/decorators.js';\nimport { css, LitElement, html } from 'lit';\nimport { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';\n\nclass UUIFileSize {\n static humanFileSize(bytes, si = false, decimalPlaces = 1) {\n const thresh = si ? 1e3 : 1024;\n if (Math.abs(bytes) < thresh) {\n return bytes + \" B\";\n }\n const units = si ? [\"kB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"] : [\"KiB\", \"MiB\", \"GiB\", \"TiB\", \"PiB\", \"EiB\", \"ZiB\", \"YiB\"];\n let u = -1;\n const r = 10 ** decimalPlaces;\n do {\n bytes /= thresh;\n ++u;\n } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);\n return bytes.toFixed(decimalPlaces) + \" \" + units[u];\n }\n}\n\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __decorateClass = (decorators, target, key, kind) => {\n var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;\n for (var i = decorators.length - 1, decorator; i >= 0; i--)\n if (decorator = decorators[i])\n result = (kind ? decorator(target, key, result) : decorator(result)) || result;\n if (kind && result)\n __defProp(target, key, result);\n return result;\n};\nlet UUIFilePreviewElement = class extends LitElement {\n constructor() {\n super(...arguments);\n this._name = \"\";\n this._url = \"\";\n this._extension = \"\";\n this._src = \"\";\n this._size = 0;\n this._isDirectory = false;\n }\n get file() {\n return this._file;\n }\n set file(newValue) {\n const oldValue = this._file;\n if (newValue instanceof File) {\n this._name = newValue.name.split(\".\")[0];\n this._extension = newValue.name.split(\".\")[1];\n this._isDirectory = false;\n this._size = newValue.size;\n if (this._isFileAnImage(newValue)) {\n this._isImage = true;\n this._getThumbnail(newValue).then((result) => {\n this._src = result;\n });\n }\n this.requestUpdate(\"file\", oldValue);\n }\n }\n connectedCallback() {\n super.connectedCallback();\n demandCustomElement(this, \"uui-symbol-file-thumbnail\");\n demandCustomElement(this, \"uui-symbol-folder\");\n demandCustomElement(this, \"uui-symbol-file\");\n }\n _openSource() {\n window.open(this._url, \"_blank\");\n }\n _fileTypeTemplate() {\n if (this._isDirectory) {\n return html``;\n }\n if (this._isImage) {\n return html``;\n }\n return html``;\n }\n _renderLongName() {\n const endCharCount = 6;\n const nameStart = this._name.substring(0, this._name.length - endCharCount);\n const nameEnd = this._name.substring(\n this._name.length - endCharCount,\n this._name.length\n );\n return html`\n this._url ? this._openSource() : \"\"}\n @keydown=${() => \"\"}>\n ${nameStart}\n ${nameEnd}\n \n `;\n }\n _isFileAnImage(file) {\n return file ? file[\"type\"].split(\"/\")[0] === \"image\" : false;\n }\n async _getThumbnail(file) {\n return await new Promise((resolve) => {\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = () => {\n resolve(reader.result);\n };\n });\n }\n render() {\n return html`\n \n ${this._fileTypeTemplate()}\n \n ${this._renderLongName()}\n \n ${this._size && !this._isDirectory ? html`${UUIFileSize.humanFileSize(this._size, true)}` : \"\"}\n \n
\n `;\n }\n};\nUUIFilePreviewElement.styles = [\n css`\n :host {\n position: relative;\n display: grid;\n /* These have to be changed together */\n grid-template-rows: 100px 50px;\n width: 150px;\n height: 150px;\n /* --------------------------------- */\n box-sizing: border-box;\n aspect-ratio: 1;\n color: var(--uui-color-text,#060606);\n }\n\n :host(:hover) slot[name='actions']::slotted(*) {\n opacity: 1;\n }\n\n slot[name='actions']::slotted(*) {\n position: absolute;\n top: 8px;\n right: 8px;\n max-width: 100%;\n height: 32px;\n font-size: 13px;\n opacity: 0;\n z-index: 1;\n transition: opacity 150ms;\n }\n\n #file-symbol {\n aspect-ratio: 1 / 1;\n margin: auto;\n max-width: 100%;\n max-height: 100%;\n }\n\n #file-info {\n min-width: 0;\n display: flex;\n text-align: center;\n flex-direction: column;\n font-size: 1rem;\n }\n\n #file-name {\n display: flex;\n justify-content: center;\n }\n\n #file-name-start {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n #file-name-end {\n white-space: nowrap;\n }\n\n #file-size {\n opacity: 0.6;\n }\n\n .has-source:hover {\n text-decoration: underline;\n cursor: pointer;\n }\n `\n];\n__decorateClass([\n state()\n], UUIFilePreviewElement.prototype, \"_name\", 2);\n__decorateClass([\n state()\n], UUIFilePreviewElement.prototype, \"_url\", 2);\n__decorateClass([\n state()\n], UUIFilePreviewElement.prototype, \"_extension\", 2);\n__decorateClass([\n state()\n], UUIFilePreviewElement.prototype, \"_src\", 2);\n__decorateClass([\n state()\n], UUIFilePreviewElement.prototype, \"_size\", 2);\n__decorateClass([\n state()\n], UUIFilePreviewElement.prototype, \"_isDirectory\", 2);\n__decorateClass([\n state()\n], UUIFilePreviewElement.prototype, \"_file\", 2);\n__decorateClass([\n state()\n], UUIFilePreviewElement.prototype, \"_isImage\", 2);\n__decorateClass([\n property({ attribute: false })\n], UUIFilePreviewElement.prototype, \"file\", 1);\nUUIFilePreviewElement = __decorateClass([\n defineElement(\"uui-file-preview\")\n], UUIFilePreviewElement);\n\nexport { UUIFilePreviewElement };\n","import { defineElement } from '@umbraco-ui/uui-base/lib/registration';\nimport { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';\nimport { css, LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __decorateClass = (decorators, target, key, kind) => {\n var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;\n for (var i = decorators.length - 1, decorator; i >= 0; i--)\n if (decorator = decorators[i])\n result = (kind ? decorator(target, key, result) : decorator(result)) || result;\n if (kind && result)\n __defProp(target, key, result);\n return result;\n};\nlet UUIFormLayoutItemElement = class extends LitElement {\n constructor() {\n super(...arguments);\n this.description = null;\n this._labelSlotHasContent = false;\n this._labelSlotChanged = (e) => {\n this._labelSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;\n };\n this._descriptionSlotHasContent = false;\n this._descriptionSlotChanged = (e) => {\n this._descriptionSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;\n };\n }\n connectedCallback() {\n super.connectedCallback();\n demandCustomElement(this, \"uui-form-validation-message\");\n }\n render() {\n return html`\n \n \n
\n \n ${this.description}\n \n
\n \n \n \n \n `;\n }\n};\nUUIFormLayoutItemElement.styles = [\n css`\n :host {\n position: relative;\n display: block;\n margin-top: var(--uui-size-space-5,18px);\n margin-bottom: var(--uui-size-space-5,18px);\n }\n #label {\n margin-top: -5px;\n margin-bottom: 5px;\n }\n #description {\n color: var(--uui-color-disabled-contrast,#c4c4c4);\n font-size: var(--uui-type-small-size,12px);\n }\n #label + #description {\n margin-top: -8px;\n min-height: 8px;\n }\n `\n];\n__decorateClass([\n property({ type: String })\n], UUIFormLayoutItemElement.prototype, \"description\", 2);\n__decorateClass([\n state()\n], UUIFormLayoutItemElement.prototype, \"_labelSlotHasContent\", 2);\n__decorateClass([\n state()\n], UUIFormLayoutItemElement.prototype, \"_descriptionSlotHasContent\", 2);\nUUIFormLayoutItemElement = __decorateClass([\n defineElement(\"uui-form-layout-item\")\n], UUIFormLayoutItemElement);\n\nexport { UUIFormLayoutItemElement };\n","import{noChange as e}from\"../lit-html.js\";import{directive as s,Directive as t,PartType as r}from\"../directive.js\";import{getCommittedValue as l,setChildPartValue as o,insertPart as i,removePart as n,setCommittedValue as f}from\"../directive-helpers.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst u=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c=s(class extends t{constructor(e){if(super(e),e.type!==r.CHILD)throw Error(\"repeat() can only be used in text expressions\")}ct(e,s,t){let r;void 0===t?t=s:void 0!==s&&(r=s);const l=[],o=[];let i=0;for(const s of e)l[i]=r?r(s,i):i,o[i]=t(s,i),i++;return{values:o,keys:l}}render(e,s,t){return this.ct(e,s,t).values}update(s,[t,r,c]){var d;const a=l(s),{values:p,keys:v}=this.ct(t,r,c);if(!Array.isArray(a))return this.ut=v,p;const h=null!==(d=this.ut)&&void 0!==d?d:this.ut=[],m=[];let y,x,j=0,k=a.length-1,w=0,A=p.length-1;for(;j<=k&&w<=A;)if(null===a[j])j++;else if(null===a[k])k--;else if(h[j]===v[w])m[w]=o(a[j],p[w]),j++,w++;else if(h[k]===v[A])m[A]=o(a[k],p[A]),k--,A--;else if(h[j]===v[A])m[A]=o(a[j],p[A]),i(s,m[A+1],a[j]),j++,A--;else if(h[k]===v[w])m[w]=o(a[k],p[w]),i(s,a[j],a[k]),k--,w++;else if(void 0===y&&(y=u(v,w,A),x=u(h,j,k)),y.has(h[j]))if(y.has(h[k])){const e=x.get(v[w]),t=void 0!==e?a[e]:null;if(null===t){const e=i(s,a[j]);o(e,p[w]),m[w]=e}else m[w]=o(t,p[w]),i(s,a[j],t),a[e]=null;w++}else n(a[k]),k--;else n(a[j]),j++;for(;w<=A;){const e=i(s,m[A+1]);o(e,p[w]),m[w++]=e}for(;j<=k;){const e=a[j++];null!==e&&n(e)}return this.ut=v,f(s,m),e}});export{c as repeat};\n//# sourceMappingURL=repeat.js.map\n","import { UUIFormControlEvent } from '@umbraco-ui/uui-base/lib/events';\nimport { defineElement } from '@umbraco-ui/uui-base/lib/registration';\nimport { css, LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __decorateClass = (decorators, target, key, kind) => {\n var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;\n for (var i = decorators.length - 1, decorator; i >= 0; i--)\n if (decorator = decorators[i])\n result = (kind ? decorator(target, key, result) : decorator(result)) || result;\n if (kind && result)\n __defProp(target, key, result);\n return result;\n};\nlet UUIFormValidationMessageElement = class extends LitElement {\n constructor() {\n super();\n this._for = null;\n this._messages = /* @__PURE__ */ new Map();\n this._onControlInvalid = (e) => {\n const ctrl = e.composedPath()[0];\n if (ctrl.pristine === false) {\n this._messages.set(ctrl, ctrl.validationMessage);\n } else {\n this._messages.delete(ctrl);\n }\n this.requestUpdate();\n };\n this._onControlValid = (e) => {\n const ctrl = e.composedPath()[0];\n this._messages.delete(ctrl);\n this.requestUpdate();\n };\n if (this.for === null) {\n this.for = this;\n }\n }\n get for() {\n return this._for;\n }\n set for(value) {\n let queriedElement = null;\n if (typeof value === \"string\") {\n const scope = this.getRootNode();\n queriedElement = scope == null ? void 0 : scope.getElementById(value);\n }\n const newScope = queriedElement || this;\n const oldScope = this._for;\n if (oldScope === newScope) {\n return;\n }\n if (oldScope !== null) {\n oldScope.removeEventListener(\n UUIFormControlEvent.INVALID,\n this._onControlInvalid\n );\n oldScope.removeEventListener(\n UUIFormControlEvent.VALID,\n this._onControlValid\n );\n }\n this._for = newScope;\n this._for.addEventListener(\n UUIFormControlEvent.INVALID,\n this._onControlInvalid\n );\n this._for.addEventListener(\n UUIFormControlEvent.VALID,\n this._onControlValid\n );\n }\n render() {\n return html`\n \n \n ${repeat(this._messages, (item) => html`
${item[1]}
`)}\n
\n
\n `;\n }\n};\nUUIFormValidationMessageElement.styles = [\n css`\n #messages {\n color: var(--uui-color-danger-standalone,rgb(191, 33, 78));\n }\n `\n];\n__decorateClass([\n property({ reflect: false, attribute: true })\n], UUIFormValidationMessageElement.prototype, \"for\", 1);\nUUIFormValidationMessageElement = __decorateClass([\n defineElement(\"uui-form-validation-message\")\n], UUIFormValidationMessageElement);\n\nexport { UUIFormValidationMessageElement };\n","import { defineElement } from '@umbraco-ui/uui-base/lib/registration';\nimport { LitElement, html } from 'lit';\n\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __decorateClass = (decorators, target, key, kind) => {\n var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;\n for (var i = decorators.length - 1, decorator; i >= 0; i--)\n if (decorator = decorators[i])\n result = (kind ? decorator(target, key, result) : decorator(result)) || result;\n if (kind && result)\n __defProp(target, key, result);\n return result;\n};\nlet UUIFormElement = class extends LitElement {\n constructor() {\n super(...arguments);\n this._formElement = null;\n }\n getFormElement() {\n return this._formElement;\n }\n _onSlotChanged(event) {\n if (this._formElement) {\n this._formElement.removeEventListener(\"submit\", this._onSubmit);\n this._formElement.removeEventListener(\"reset\", this._onReset);\n }\n const formElements = event.target.assignedNodes({ flatten: true }).filter((x) => x instanceof HTMLFormElement);\n this._formElement = formElements.length > 0 ? formElements[0] : null;\n if (this._formElement) {\n this._formElement.setAttribute(\"novalidate\", \"\");\n this._formElement.addEventListener(\"submit\", this._onSubmit);\n this._formElement.addEventListener(\"reset\", this._onReset);\n }\n }\n _onSubmit(event) {\n if (event.target === null) {\n return;\n }\n const formNode = event.target;\n const isValid = formNode.checkValidity();\n if (!isValid) {\n formNode.setAttribute(\"submit-invalid\", \"\");\n return;\n }\n formNode.removeAttribute(\"submit-invalid\");\n }\n _onReset(event) {\n if (event.target === null) {\n return;\n }\n event.target.removeAttribute(\"submit-invalid\");\n }\n render() {\n return html``;\n }\n};\nUUIFormElement = __decorateClass([\n defineElement(\"uui-form\")\n], UUIFormElement);\n\nexport { UUIFormElement };\n","import{nothing as t,noChange as i}from\"../lit-html.js\";import{Directive as r,PartType as s,directive as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends r{constructor(i){if(super(i),this.et=t,i.type!==s.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(r){if(r===t||null==r)return this.ft=void 0,this.et=r;if(r===i)return r;if(\"string\"!=typeof r)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(r===this.et)return this.ft;this.et=r;const s=[r];return s.raw=s,this.ft={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName=\"unsafeHTML\",e.resultType=1;const o=n(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n","import { css, LitElement, html } from 'lit';\nimport { defineElement } from '@umbraco-ui/uui-base/lib/registration';\nimport { state, property } from 'lit/decorators.js';\nimport { UUIEvent } from '@umbraco-ui/uui-base/lib/events';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nvar __defProp$1 = Object.defineProperty;\nvar __getOwnPropSymbols = Object.getOwnPropertySymbols;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __propIsEnum = Object.prototype.propertyIsEnumerable;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __spreadValues = (a, b) => {\n for (var prop in b || (b = {}))\n if (__hasOwnProp.call(b, prop))\n __defNormalProp(a, prop, b[prop]);\n if (__getOwnPropSymbols)\n for (var prop of __getOwnPropSymbols(b)) {\n if (__propIsEnum.call(b, prop))\n __defNormalProp(a, prop, b[prop]);\n }\n return a;\n};\nclass UUIIconRequestEvent extends UUIEvent {\n constructor(evName, eventInit = {}) {\n super(evName, __spreadValues(__spreadValues({}, { bubbles: true, composed: true }), eventInit));\n this.icon = null;\n }\n acceptRequest(icon) {\n this.icon = icon;\n this.stopImmediatePropagation();\n }\n}\nUUIIconRequestEvent.ICON_REQUEST = \"icon-request\";\n\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __decorateClass = (decorators, target, key, kind) => {\n var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;\n for (var i = decorators.length - 1, decorator; i >= 0; i--)\n if (decorator = decorators[i])\n result = (kind ? decorator(target, key, result) : decorator(result)) || result;\n if (kind && result)\n __defProp(target, key, result);\n return result;\n};\nlet UUIIconElement = class extends LitElement {\n constructor() {\n super(...arguments);\n this._name = null;\n this._retrievedNameIcon = false;\n this._nameSvg = null;\n this.label = \"\";\n this.svg = null;\n this.fallback = null;\n this._useFallback = false;\n }\n get name() {\n return this._name;\n }\n set name(newValue) {\n this._name = newValue;\n if (this.shadowRoot) {\n this.requestIcon();\n }\n }\n requestIcon() {\n if (this._name !== \"\" && this._name !== null) {\n const event = new UUIIconRequestEvent(UUIIconRequestEvent.ICON_REQUEST, {\n detail: { iconName: this._name }\n });\n this.dispatchEvent(event);\n if (event.icon !== null) {\n this._retrievedNameIcon = true;\n event.icon.then((iconSvg) => {\n this._useFallback = false;\n this._nameSvg = iconSvg;\n });\n } else {\n this._retrievedNameIcon = false;\n this._useFallback = true;\n }\n }\n }\n connectedCallback() {\n super.connectedCallback();\n if (this._retrievedNameIcon === false) {\n this.requestIcon();\n }\n }\n disconnectedCallback() {\n this._retrievedNameIcon = false;\n }\n firstUpdated() {\n if (this._retrievedNameIcon === false) {\n this.requestIcon();\n }\n const hasLabel = typeof this.label === \"string\" && this.label.length > 0;\n if (hasLabel) {\n this.setAttribute(\"role\", \"img\");\n this.setAttribute(\"aria-label\", this.label);\n this.removeAttribute(\"aria-hidden\");\n } else {\n this.removeAttribute(\"role\");\n this.removeAttribute(\"aria-label\");\n this.setAttribute(\"aria-hidden\", \"true\");\n }\n }\n render() {\n if (this._useFallback === true) {\n if (this.fallback === null) {\n return html``;\n } else {\n return unsafeHTML(this.fallback);\n }\n }\n if (this._nameSvg !== null) {\n return unsafeHTML(this._nameSvg);\n }\n if (this.svg !== null) {\n return unsafeHTML(this.svg);\n }\n return html``;\n }\n};\nUUIIconElement.styles = [\n css`\n :host {\n display: inline-block;\n vertical-align: bottom;\n width: 1.15em;\n height: 1.15em;\n }\n\n :host svg,\n ::slotted(svg) {\n fill: var(--uui-icon-color, currentColor);\n }\n\n :host-context(div[slot='prepend']) {\n margin-left: var(--uui-size-2, 6px);\n }\n\n :host-context(div[slot='append']) {\n margin-right: var(--uui-size-2, 6px);\n }\n `\n];\n__decorateClass([\n state()\n], UUIIconElement.prototype, \"_nameSvg\", 2);\n__decorateClass([\n property()\n], UUIIconElement.prototype, \"label\", 2);\n__decorateClass([\n property()\n], UUIIconElement.prototype, \"name\", 1);\n__decorateClass([\n property({ attribute: false })\n], UUIIconElement.prototype, \"svg\", 2);\n__decorateClass([\n property({ attribute: false })\n], UUIIconElement.prototype, \"fallback\", 2);\n__decorateClass([\n state()\n], UUIIconElement.prototype, \"_useFallback\", 2);\nUUIIconElement = __decorateClass([\n defineElement(\"uui-icon\")\n], UUIIconElement);\n\nexport { UUIIconElement, UUIIconRequestEvent };\n","import { LitElement, html } from 'lit';\nimport { defineElement } from '@umbraco-ui/uui-base/lib/registration';\nimport { property } from 'lit/decorators.js';\nimport { UUIIconRequestEvent } from '@umbraco-ui/uui-icon/lib';\n\nclass UUIIconHost {\n constructor(svg) {\n this.promise = new Promise((resolveMethod, rejectMethod) => {\n this.resolve = resolveMethod;\n this.reject = rejectMethod;\n });\n if (svg) {\n this.resolve(svg);\n }\n }\n set svg(svg) {\n this.resolve(svg);\n }\n}\n\nclass UUIIconRegistry {\n constructor() {\n this.icons = {};\n this._onIconRequest = (event) => {\n const icon = this.getIcon(event.detail.iconName);\n if (icon !== null) {\n event.acceptRequest(icon);\n }\n };\n }\n /**\n * Attach an element to provide this registry. Use detach when disconnected.\n * @param {EventTarget} element the element of which to provide this icon-set.\n */\n attach(element) {\n element.addEventListener(\n UUIIconRequestEvent.ICON_REQUEST,\n this._onIconRequest\n );\n }\n /**\n * Detach an element from providing this registry.\n * @param {EventTarget} element the element of which to stop providing this icon-set.\n */\n detach(element) {\n element.removeEventListener(\n UUIIconRequestEvent.ICON_REQUEST,\n this._onIconRequest\n );\n }\n /**\n * Define a icon to be served by this registry.\n * @param {string} iconName the name to use for this icon.\n * @param {string} svgString the svg source for this icon.\n */\n defineIcon(iconName, svgString) {\n if (this.icons[iconName]) {\n this.icons[iconName].svg = svgString;\n return;\n }\n this.icons[iconName] = new UUIIconHost(svgString);\n }\n /**\n * Retrieve the SVG source of an icon, Returns ´null´ if the name does not exist.\n * @param {string} iconName the name of the icon to retrieve.\n */\n getIcon(iconName) {\n if (!!this.icons[iconName] || this.acceptIcon(iconName)) {\n return this.icons[iconName].promise;\n }\n return null;\n }\n /**\n * Declare that this registry will be providing a icon for this name\n * @param {string} iconName the name of the icon to be provided.\n */\n provideIcon(iconName) {\n return this.icons[iconName] = new UUIIconHost();\n }\n /**\n * extend this method to provide your own logic.\n * @param iconName\n * @returns\n */\n //@ts-ignore-start\n // eslint-disable-next-line\n acceptIcon(iconName) {\n return false;\n }\n //@ts-ignore-end\n /**\n * Dynamic concept by extending this class:\n * extend getIcon in this way:\n \n protected acceptIcon(iconName: string): boolean {\n \n // Check if this is something we want to accept and provide.\n if(iconName === \"myCustomIcon\") {\n \n // Inform that we will be providing this.\n const icon = this.provideIcon(iconName);\n \n // When data is available set it on this icon object, this can be done at any point in time:\n icon.svg = \"...\";\n \n return true;\n }\n \n return false;\n }\n */\n getIconNames() {\n return Object.keys(this.icons);\n }\n}\n\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __decorateClass = (decorators, target, key, kind) => {\n var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;\n for (var i = decorators.length - 1, decorator; i >= 0; i--)\n if (decorator = decorators[i])\n result = (kind ? decorator(target, key, result) : decorator(result)) || result;\n if (kind && result)\n __defProp(target, key, result);\n return result;\n};\nlet UUIIconRegistryElement = class extends LitElement {\n constructor() {\n super();\n this._icons = {};\n this._registry = new UUIIconRegistry();\n this._registry.attach(this);\n }\n get icons() {\n return this._icons;\n }\n set icons(icons) {\n this._icons = icons;\n if (this._registry) {\n Object.entries(this._icons).forEach(\n ([key, value]) => this._registry.defineIcon(key, value)\n );\n }\n }\n get registry() {\n return this._registry;\n }\n set registry(newRegistry) {\n if (this.registry) {\n this.registry.detach(this);\n }\n newRegistry.attach(this);\n this._registry = newRegistry;\n }\n render() {\n return html``;\n }\n};\n__decorateClass([\n property({ attribute: false })\n], UUIIconRegistryElement.prototype, \"_icons\", 2);\nUUIIconRegistryElement = __decorateClass([\n defineElement(\"uui-icon-registry\")\n], UUIIconRegistryElement);\n\nexport { UUIIconHost, UUIIconRegistry, UUIIconRegistryElement };\n","import { UUIIconRegistry, UUIIconRegistryElement } from '@umbraco-ui/uui-icon-registry/lib';\nimport { defineElement } from '@umbraco-ui/uui-base/lib/registration';\nimport { svg } from 'lit';\n\nconst iconAdd = svg``;\n\nconst iconAlert = svg``;\n\nconst iconAttachment = svg``;\n\nconst iconBookAlt = svg``;\n\nconst iconCalendar = svg``;\n\nconst iconCheck = svg``;\n\nconst iconClipboard = svg``;\n\nconst iconCode = svg``;\n\nconst iconColorPicker = svg``;\n\nconst iconCopy = svg``;\n\nconst iconDelete = svg``;\n\nconst iconDocument = svg``;\n\nconst iconDownload = svg``;\n\nconst iconEdit = svg``;\n\nconst iconFavorite = svg``;\n\nconst iconFolder = svg``;\n\nconst iconForbidden = svg``;\n\nconst iconInfo = svg``;\n\nconst iconLink = svg``;\n\nconst iconLock = svg``;\n\nconst iconPause = svg``;\n\nconst iconPicture = svg``;\n\nconst iconPlay = svg``;\n\nconst iconRemove = svg``;\n\nconst iconSearch = svg``;\n\nconst iconSee = svg``;\n\nconst iconSettings = svg``;\n\nconst iconSubtract = svg``;\n\nconst iconSync = svg``;\n\nconst iconUnlock = svg``;\n\nconst iconUnsee = svg``;\n\nconst iconWand = svg``;\n\nconst iconWrong = svg``;\n\nclass UUIIconRegistryEssential extends UUIIconRegistry {\n constructor() {\n super();\n this.defineIcon(\"add\", iconAdd.strings[0]);\n this.defineIcon(\"alert\", iconAlert.strings[0]);\n this.defineIcon(\"attachment\", iconAttachment.strings[0]);\n this.defineIcon(\"book-alt\", iconBookAlt.strings[0]);\n this.defineIcon(\"calendar\", iconCalendar.strings[0]);\n this.defineIcon(\"check\", iconCheck.strings[0]);\n this.defineIcon(\"clipboard\", iconClipboard.strings[0]);\n this.defineIcon(\"code\", iconCode.strings[0]);\n this.defineIcon(\"colorpicker\", iconColorPicker.strings[0]);\n this.defineIcon(\"copy\", iconCopy.strings[0]);\n this.defineIcon(\"delete\", iconDelete.strings[0]);\n this.defineIcon(\"document\", iconDocument.strings[0]);\n this.defineIcon(\"download\", iconDownload.strings[0]);\n this.defineIcon(\"edit\", iconEdit.strings[0]);\n this.defineIcon(\"favorite\", iconFavorite.strings[0]);\n this.defineIcon(\"folder\", iconFolder.strings[0]);\n this.defineIcon(\"forbidden\", iconForbidden.strings[0]);\n this.defineIcon(\"info\", iconInfo.strings[0]);\n this.defineIcon(\"link\", iconLink.strings[0]);\n this.defineIcon(\"lock\", iconLock.strings[0]);\n this.defineIcon(\"pause\", iconPause.strings[0]);\n this.defineIcon(\"picture\", iconPicture.strings[0]);\n this.defineIcon(\"play\", iconPlay.strings[0]);\n this.defineIcon(\"remove\", iconRemove.strings[0]);\n this.defineIcon(\"search\", iconSearch.strings[0]);\n this.defineIcon(\"see\", iconSee.strings[0]);\n this.defineIcon(\"settings\", iconSettings.strings[0]);\n this.defineIcon(\"subtract\", iconSubtract.strings[0]);\n this.defineIcon(\"sync\", iconSync.strings[0]);\n this.defineIcon(\"unlock\", iconUnlock.strings[0]);\n this.defineIcon(\"unsee\", iconUnsee.strings[0]);\n this.defineIcon(\"wand\", iconWand.strings[0]);\n this.defineIcon(\"wrong\", iconWrong.strings[0]);\n }\n}\n\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __decorateClass = (decorators, target, key, kind) => {\n var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;\n for (var i = decorators.length - 1, decorator; i >= 0; i--)\n if (decorator = decorators[i])\n result = (kind ? decorator(target, key, result) : decorator(result)) || result;\n if (kind && result)\n __defProp(target, key, result);\n return result;\n};\nlet UUIIconRegistryEssentialElement = class extends UUIIconRegistryElement {\n constructor() {\n super();\n this.registry = new UUIIconRegistryEssential();\n }\n};\nUUIIconRegistryEssentialElement = __decorateClass([\n defineElement(\"uui-icon-registry-essential\")\n], UUIIconRegistryEssentialElement);\n\nexport { UUIIconRegistryEssential, UUIIconRegistryEssentialElement };\n","import { defineElement } from '@umbraco-ui/uui-base/lib/registration';\nimport { query, property, state } from 'lit/decorators.js';\nimport { LitElement, html, nothing, css } from 'lit';\nimport { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';\nimport { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';\nimport { iconDelete } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';\nimport { repeat } from 'lit/directives/repeat.js';\n\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __decorateClass = (decorators, target, key, kind) => {\n var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;\n for (var i = decorators.length - 1, decorator; i >= 0; i--)\n if (decorator = decorators[i])\n result = (kind ? decorator(target, key, result) : decorator(result)) || result;\n if (kind && result)\n __defProp(target, key, result);\n return result;\n};\nlet UUIInputFileElement = class extends FormControlMixin(LitElement) {\n constructor() {\n super();\n this.accept = \"\";\n this.multiple = false;\n this._files = [];\n this._updateFileWrappers = (data) => {\n let newFileWrappers = [];\n for (const file of data) {\n if (this.multiple) {\n newFileWrappers.push(file);\n } else {\n newFileWrappers = [file];\n }\n }\n this._files = newFileWrappers;\n };\n this.addEventListener(\"dragenter\", () => this._setShowDropzone(true));\n this.addEventListener(\"dragleave\", () => this._setShowDropzone(false));\n this.addEventListener(\"drop\", () => this._setShowDropzone(false));\n }\n get value() {\n return this._value;\n }\n set value(newValue) {\n super.value = newValue;\n if (newValue instanceof FormData) {\n const data = this.multiple ? newValue.getAll(this.name) : [newValue.get(this.name)];\n this._updateFileWrappers(data);\n return;\n }\n if (newValue instanceof File) {\n this._updateFileWrappers([newValue]);\n return;\n }\n }\n connectedCallback() {\n super.connectedCallback();\n demandCustomElement(this, \"uui-icon\");\n demandCustomElement(this, \"uui-file-dropzone\");\n demandCustomElement(this, \"uui-button\");\n demandCustomElement(this, \"uui-action-bar\");\n demandCustomElement(this, \"uui-file-preview\");\n }\n getFormElement() {\n return this._dropZone;\n }\n _handleClick(e) {\n e.stopImmediatePropagation();\n this._dropzone.browse();\n }\n async _handleFilesChange(event) {\n const entries = event.detail.files;\n const files = entries.filter(\n (entry) => entry instanceof File || entry.isFile\n );\n if (!this.multiple) {\n const entry = files[0];\n const isFile = entry instanceof File;\n const file = isFile ? entry : await this._getFile(entry);\n if (this.value instanceof File) {\n this.value = file;\n return;\n }\n if (this.value instanceof FormData) {\n this.value.delete(this.name);\n this.value.append(this.name, file);\n this._updateFileWrappers([file]);\n return;\n }\n }\n let newValue = this.value;\n if (files.length > 0 && !(this.value instanceof FormData)) {\n newValue = new FormData();\n }\n if (newValue instanceof FormData) {\n for (const entry of files) {\n const isFile = entry instanceof File;\n newValue.append(this.name, isFile ? entry : await this._getFile(entry));\n }\n }\n this.value = newValue;\n }\n async _getFile(fileEntry) {\n return await new Promise(\n (resolve, reject) => fileEntry.file(resolve, reject)\n );\n }\n _removeFile(index) {\n const fileToRemove = this._files[index];\n if (this.value instanceof FormData) {\n const files = this.value.getAll(this.name);\n const filteredFiles = files.filter((file) => file !== fileToRemove);\n if (filteredFiles.length === 0) {\n this.value = \"\";\n } else {\n this.value.delete(this.name);\n for (const file of filteredFiles) {\n this.value.append(this.name, file);\n }\n }\n this._updateFileWrappers(filteredFiles);\n }\n if (this.value instanceof File) {\n this.value = \"\";\n this._updateFileWrappers([]);\n }\n }\n _setShowDropzone(show) {\n if (show) {\n this._dropZone.style.display = \"flex\";\n } else {\n this._dropZone.style.display = \"none\";\n }\n }\n _renderFileItem(file, index) {\n return html`\n \n this._removeFile(index)}\n color=\"danger\"\n label=${`Delete ${file.name}`}>\n \n \n \n `;\n }\n _renderFiles() {\n return html`${repeat(\n this._files,\n (file) => file.name + file.size,\n (file, index) => this._renderFileItem(file, index)\n )}`;\n }\n render() {\n return html`\n \n \n ${this._renderFiles()}\n ${this._files.length === 0 || this.multiple ? html`` : nothing}\n
\n `;\n }\n};\nUUIInputFileElement.styles = [\n css`\n :host {\n width: 100%;\n height: 100%;\n position: relative;\n display: flex;\n box-sizing: border-box;\n border: 1px solid var(--uui-color-border,#d8d7d9);\n }\n\n #input {\n position: absolute;\n width: 0px;\n height: 0px;\n opacity: 0;\n display: none;\n }\n\n #files {\n display: grid;\n box-sizing: border-box;\n justify-items: center;\n width: 100%;\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n grid-auto-rows: min-content;\n gap: 16px;\n padding: 16px;\n overflow: auto;\n max-height: 100%;\n }\n\n #dropzone {\n display: none;\n position: absolute;\n inset: 0px;\n z-index: 10;\n justify-content: center;\n align-items: center;\n }\n\n #add-button {\n width: 150px;\n height: 150px;\n display: flex;\n padding: 16px;\n box-sizing: border-box;\n justify-content: center;\n align-items: stretch;\n }\n `\n];\n__decorateClass([\n query(\"#dropzone\")\n], UUIInputFileElement.prototype, \"_dropzone\", 2);\n__decorateClass([\n query(\"#dropzone\")\n], UUIInputFileElement.prototype, \"_dropZone\", 2);\n__decorateClass([\n property({ type: String })\n], UUIInputFileElement.prototype, \"accept\", 2);\n__decorateClass([\n property({ type: Boolean })\n], UUIInputFileElement.prototype, \"multiple\", 2);\n__decorateClass([\n state()\n], UUIInputFileElement.prototype, \"_files\", 2);\nUUIInputFileElement = __decorateClass([\n defineElement(\"uui-input-file\")\n], UUIInputFileElement);\n\nexport { UUIInputFileElement };\n","import { FormControlMixin, LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';\nimport { defineElement } from '@umbraco-ui/uui-base/lib/registration';\nimport { LitElement, html, css } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { UUIEvent } from '@umbraco-ui/uui-base/lib/events';\n\nvar __defProp$1 = Object.defineProperty;\nvar __getOwnPropSymbols = Object.getOwnPropertySymbols;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __propIsEnum = Object.prototype.propertyIsEnumerable;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __spreadValues = (a, b) => {\n for (var prop in b || (b = {}))\n if (__hasOwnProp.call(b, prop))\n __defNormalProp(a, prop, b[prop]);\n if (__getOwnPropSymbols)\n for (var prop of __getOwnPropSymbols(b)) {\n if (__propIsEnum.call(b, prop))\n __defNormalProp(a, prop, b[prop]);\n }\n return a;\n};\nclass UUIInputEvent extends UUIEvent {\n constructor(evName, eventInit = {}) {\n super(evName, __spreadValues(__spreadValues({}, { bubbles: true }), eventInit));\n }\n}\nUUIInputEvent.CHANGE = \"change\";\nUUIInputEvent.INPUT = \"input\";\n\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __decorateClass = (decorators, target, key, kind) => {\n var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;\n for (var i = decorators.length - 1, decorator; i >= 0; i--)\n if (decorator = decorators[i])\n result = (kind ? decorator(target, key, result) : decorator(result)) || result;\n if (kind && result)\n __defProp(target, key, result);\n return result;\n};\nlet UUIInputElement = class extends FormControlMixin(\n LabelMixin(\"\", LitElement)\n) {\n constructor() {\n super();\n this.minlengthMessage = \"This field need more characters\";\n this.maxlengthMessage = \"This field exceeds the allowed amount of characters\";\n this.disabled = false;\n this.readonly = false;\n this.placeholder = \"\";\n this.autoWidth = false;\n this.inputMode = \"\";\n this._type = \"text\";\n this.addEventListener(\"mousedown\", () => {\n this.style.setProperty(\"--uui-show-focus-outline\", \"0\");\n });\n this.addEventListener(\"blur\", () => {\n this.style.setProperty(\"--uui-show-focus-outline\", \"\");\n });\n this.addEventListener(\"keypress\", this._onKeypress);\n this.addValidator(\n \"tooShort\",\n () => this.minlengthMessage,\n () => !!this.minlength && String(this._value).length < this.minlength\n );\n this.addValidator(\n \"tooLong\",\n () => this.maxlengthMessage,\n () => !!this.maxlength && String(this._value).length > this.maxlength\n );\n }\n get type() {\n return this._type;\n }\n set type(value) {\n this._type = value;\n }\n firstUpdated(_changedProperties) {\n super.firstUpdated(_changedProperties);\n this.addFormControlElement(this._input);\n }\n _onKeypress(e) {\n if (this.type !== \"color\" && e.key == \"Enter\") {\n this.submit();\n }\n }\n /**\n * Removes focus from the input.\n */\n blur() {\n this._input.blur();\n }\n /**\n * This method enables