\n \n `;\n }\n};\n/**\n * This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals. Read more about form controls here https://web.dev/more-capable-form-controls/\n * @type {boolean}\n */\nUUITextareaElement.formAssociated = true;\nUUITextareaElement.styles = [\n css`\n :host {\n position: relative;\n }\n :host([error]) textarea,\n :host([error]) textarea[disabled] {\n border: 1px solid var(--uui-color-danger,#d42054) !important;\n }\n :host(:not([pristine]):invalid) textarea,\n /* polyfill support */\n :host(:not([pristine])[internals-invalid]) textarea {\n border-color: var(--uui-color-danger,#d42054);\n }\n :host([auto-height]) textarea {\n resize: none;\n }\n\n .label {\n display: inline-block;\n margin-bottom: var(--uui-size-1,3px);\n font-weight: bold;\n }\n\n textarea[readonly] {\n border-color: var(\n --uui-textarea-border-color-readonly,\n var(--uui-color-disabled-standalone,rgb(226, 226, 226))\n );\n background-color: var(\n --uui-textarea-background-color-readonly,\n var(--uui-color-disabled,#f3f3f5)\n );\n }\n textarea[disabled] {\n cursor: not-allowed;\n background-color: var(\n --uui-textarea-background-color-disabled,\n var(--uui-color-disabled,#f3f3f5)\n );\n border-color: var(\n --uui-textarea-border-color-disabled,\n var(--uui-color-disabled,#f3f3f5)\n );\n\n color: var(--uui-color-disabled-contrast,#c4c4c4);\n }\n\n textarea {\n color: var(--uui-color-text,#060606);\n font-family: inherit;\n line-height: var(--uui-size-6,18px);\n box-sizing: border-box;\n min-width: 100%;\n max-width: 100%;\n font-size: inherit;\n padding: var(--uui-size-2,6px);\n border: 1px solid\n var(--uui-textarea-border-color, var(--uui-color-border,#d8d7d9)); /** Note: Specified border size is needed and hardcoded in autoUpdateHeight() */\n border-radius: 0;\n outline: none;\n min-height: var(--uui-textarea-min-height);\n max-height: var(--uui-textarea-max-height);\n background-color: var(\n --uui-textarea-background-color,\n var(--uui-color-surface,#fff)\n );\n }\n :host(:hover)\n textarea:not([readonly]):not([disabled])\n :host(:focus-within)\n textarea,\n :host(:focus) textarea {\n border-color: var(\n --uui-textarea-border-color,\n var(--uui-color-border-emphasis,#a1a1a1)\n );\n }\n textarea:focus {\n outline: calc(2px * var(--uui-show-focus-outline, 1)) solid\n var(--uui-color-focus,#3879ff);\n }\n `\n];\n__decorateClass([\n property()\n], UUITextareaElement.prototype, \"placeholder\", 2);\n__decorateClass([\n property({ type: Boolean, reflect: true })\n], UUITextareaElement.prototype, \"disabled\", 2);\n__decorateClass([\n property({ type: Boolean, reflect: true })\n], UUITextareaElement.prototype, \"readonly\", 2);\n__decorateClass([\n property({ type: String })\n], UUITextareaElement.prototype, \"name\", 2);\n__decorateClass([\n property({ type: Boolean, reflect: true })\n], UUITextareaElement.prototype, \"error\", 2);\n__decorateClass([\n property({ type: Number })\n], UUITextareaElement.prototype, \"minlength\", 2);\n__decorateClass([\n property({ type: String, attribute: \"minlength-message\" })\n], UUITextareaElement.prototype, \"minlengthMessage\", 2);\n__decorateClass([\n property({ type: Number })\n], UUITextareaElement.prototype, \"maxlength\", 2);\n__decorateClass([\n property({ type: String, attribute: \"maxlength-message\" })\n], UUITextareaElement.prototype, \"maxlengthMessage\", 2);\n__decorateClass([\n query(\"#textarea\")\n], UUITextareaElement.prototype, \"_textarea\", 2);\n__decorateClass([\n property({ type: Boolean, attribute: \"auto-height\", reflect: true })\n], UUITextareaElement.prototype, \"autoHeight\", 2);\n__decorateClass([\n property({ type: String })\n], UUITextareaElement.prototype, \"label\", 2);\n__decorateClass([\n property({ type: Number })\n], UUITextareaElement.prototype, \"rows\", 2);\n__decorateClass([\n property({ type: Number })\n], UUITextareaElement.prototype, \"cols\", 2);\n__decorateClass([\n property({ type: String })\n], UUITextareaElement.prototype, \"wrap\", 2);\nUUITextareaElement = __decorateClass([\n defineElement(\"uui-textarea\")\n], UUITextareaElement);\n\nexport { UUITextareaElement, UUITextareaEvent };\n","import { defineElement } from '@umbraco-ui/uui-base/lib/registration';\nimport { Timer, demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';\nimport { UUITextStyles } from '@umbraco-ui/uui-css/lib';\nimport { iconRemove } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';\nimport { LitElement, html, css } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { UUIEvent } from '@umbraco-ui/uui-base/lib/events';\n\nclass UUIToastNotificationEvent extends UUIEvent {\n}\nUUIToastNotificationEvent.OPENING = \"opening\";\nUUIToastNotificationEvent.OPENED = \"opened\";\nUUIToastNotificationEvent.CLOSING = \"closing\";\nUUIToastNotificationEvent.CLOSED = \"closed\";\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) __defProp(target, key, result);\n return result;\n};\nlet UUIToastNotificationElement = class extends LitElement {\n constructor() {\n super();\n this.color = \"\";\n this._autoClose = null;\n this._onOpenTimerComplete = () => {\n if (this._open) {\n this.open = false;\n }\n };\n this._timer = null;\n this._pauseTimer = false;\n this.isOpen = false;\n this._open = false;\n this._animate = false;\n this._requestAnimationUpdate = 0;\n this.addEventListener(\"keyup\", (event) => {\n if (event.key === \"Escape\") {\n this.open = false;\n }\n });\n }\n get autoClose() {\n return this._autoClose;\n }\n set autoClose(value) {\n this._autoClose = value;\n if (value !== null) {\n if (this._timer === null) {\n this._timer = new Timer(this._onOpenTimerComplete, value);\n } else {\n this._timer.setDuration(value);\n }\n if (this._pauseTimer === false && this.isOpen === true && this._animate === false) {\n this._timer.start();\n }\n } else {\n this._timer?.destroy();\n this._timer = null;\n }\n }\n /**\n * Pause the auto close timer.\n */\n pauseAutoClose() {\n this._pauseTimer = true;\n if (this._timer !== null) {\n this._timer.pause();\n }\n }\n /**\n * Resume the auto close timer.\n */\n resumeAutoClose() {\n this._pauseTimer = false;\n if (this._timer !== null && this.isOpen === true && this._animate === false) {\n this._timer.restart();\n }\n }\n get open() {\n return this._open;\n }\n set open(value) {\n if (value === true) {\n this._makeOpen();\n } else {\n this._makeClose();\n }\n }\n connectedCallback() {\n super.connectedCallback();\n demandCustomElement(this, \"uui-button\");\n demandCustomElement(this, \"uui-icon\");\n }\n _getAnimationDuration() {\n return parseInt(\n getComputedStyle(this).getPropertyValue(\n \"--uui-toast-notification-animation-duration\"\n ),\n 10\n ) || 480;\n }\n _makeOpen() {\n if (this._open === true) {\n return;\n }\n this._open = true;\n this.updateComplete.then(() => {\n if (this._open !== true) {\n return;\n }\n cancelAnimationFrame(this._requestAnimationUpdate);\n this._requestAnimationUpdate = requestAnimationFrame(() => {\n clearTimeout(this._animationTimeout);\n this.isOpen = true;\n this.setAttribute(\"is-open\", \"\");\n this.style.height = this._toastEl.getBoundingClientRect().height + \"px\";\n this._animate = true;\n this.dispatchEvent(\n new UUIToastNotificationEvent(UUIToastNotificationEvent.OPENING)\n );\n this._animationTimeout = window.setTimeout(() => {\n if (this.isOpen === true) {\n this.style.height = \"auto\";\n this._animate = false;\n if (this._pauseTimer === false) {\n this._timer?.start();\n }\n this.dispatchEvent(\n new UUIToastNotificationEvent(UUIToastNotificationEvent.OPENED)\n );\n }\n }, this._getAnimationDuration());\n });\n });\n }\n _makeClose() {\n if (this._open === false) {\n return;\n }\n const event = new UUIToastNotificationEvent(\n UUIToastNotificationEvent.CLOSING,\n { cancelable: true }\n );\n this.dispatchEvent(event);\n if (event.defaultPrevented === true) {\n return;\n }\n this._open = false;\n this._timer?.pause();\n cancelAnimationFrame(this._requestAnimationUpdate);\n if (this.isOpen === true) {\n this._requestAnimationUpdate = requestAnimationFrame(() => {\n clearTimeout(this._animationTimeout);\n this.isOpen = false;\n this.removeAttribute(\"is-open\");\n this.style.height = this._toastEl.getBoundingClientRect().height + \"px\";\n this._animate = true;\n requestAnimationFrame(() => {\n this.style.height = \"0\";\n });\n this._animationTimeout = window.setTimeout(() => {\n if (this.isOpen === false) {\n this._animate = false;\n this.dispatchEvent(\n new UUIToastNotificationEvent(UUIToastNotificationEvent.CLOSED)\n );\n if (this.parentNode) {\n this.parentNode.removeChild(this);\n }\n }\n }, this._getAnimationDuration());\n });\n }\n }\n render() {\n return html`\n \n
\n
\n this.open = false}>\n \n \n
\n
\n
\n
\n \n ${this.headline}\n \n \n \n \n
\n `;\n }\n};\nUUIToastNotificationLayoutElement.styles = [\n UUITextStyles,\n css`\n #message {\n margin-bottom: calc(var(--uui-size-space-1,3px) * -1);\n }\n #message::after {\n content: '';\n display: block;\n clear: both;\n }\n #actions {\n /*\n display: flex;\n width: 100%;\n justify-content: flex-end;\n */\n display: block;\n float: right;\n\n margin-top: var(--uui-size-space-4,12px);\n margin-bottom: calc(var(--uui-size-space-2,6px) * -1);\n }\n `\n];\n__decorateClass([\n property({ type: String })\n], UUIToastNotificationLayoutElement.prototype, \"headline\", 2);\n__decorateClass([\n state()\n], UUIToastNotificationLayoutElement.prototype, \"_headlineSlotHasContent\", 2);\nUUIToastNotificationLayoutElement = __decorateClass([\n defineElement(\"uui-toast-notification-layout\")\n], UUIToastNotificationLayoutElement);\n\nexport { UUIToastNotificationLayoutElement };\n","import { UUIHorizontalShakeKeyframes, UUIHorizontalShakeAnimationValue } from '@umbraco-ui/uui-base/lib/animations';\nimport { defineElement } from '@umbraco-ui/uui-base/lib/registration';\nimport { UUIBooleanInputElement } from '@umbraco-ui/uui-boolean-input/lib';\nimport { iconCheck, iconRemove } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';\nimport { html, css } 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) __defProp(target, key, result);\n return result;\n};\nlet UUIToggleElement = class extends UUIBooleanInputElement {\n constructor() {\n super(\"switch\");\n }\n renderCheckbox() {\n return html`\n \n
${iconCheck}
\n
${iconRemove}
\n