wj-elements 0.7.7 → 0.8.0

package/dist/wje-toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-toast.js","sources":["../packages/wje-toast/toast.element.js","../packages/wje-toast/toast.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\nconst DEFAULT_STACK_POSITION = 'top-end';\nconst DEFAULT_STACK_DEPTH = 3;\nconst VALID_STACK_POSITIONS = new Set([\n    'top-start',\n    'top-center',\n    'top-end',\n    'bottom-start',\n    'bottom-center',\n    'bottom-end',\n]);\nconst STACKED_SCALE_STEP = 0.04;\nconst STACKED_MIN_SCALE = 0.88;\nconst STACKED_MIN_OPACITY = 0.72;\nconst STACKED_VISIBLE_SLICE = 16;\nconst STACKED_EXPANDED_MARGIN = '0.5rem';\nconst STACKED_PADDING = '1rem';\nconst STACKED_ENTER_OFFSET = 24;\n\nconst toggleStackExpanded = (stack, expanded) => {\n    if (expanded) {\n        stack.dataset.expanded = 'true';\n        return;\n    }\n\n    delete stack.dataset.expanded;\n};\n\nconst syncExpandedStackToasts = (stack, expanded) => {\n    Array.from(stack.children)\n        .filter((child) => child.tagName === 'WJE-TOAST')\n        .forEach((toast) => {\n            if (expanded) {\n                toast.pause?.();\n                return;\n            }\n\n            toast.resume?.();\n        });\n};\n\nconst setStackExpandedState = (stack, expanded) => {\n    let shouldExpand = stack.dataset.stacked === 'true' && expanded;\n    let isExpanded = stack.dataset.expanded === 'true';\n\n    if (shouldExpand === isExpanded) {\n        return;\n    }\n\n    toggleStackExpanded(stack, shouldExpand);\n    syncExpandedStackToasts(stack, shouldExpand);\n    stack.updateToastLayout?.();\n};\n\nconst syncStackExpandedState = (stack) => {\n    setStackExpandedState(stack, stack.matches(':hover') || stack.matches(':focus-within'));\n};\n\n/**\n * `Toast` is a custom web component that represents a toast notification.\n * @summary This element represents a toast notification.\n * @documentation https://elements.webjet.sk/components/toast\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part\n * @slot - The content of the toast.\n * @slot media - The media of the toast.\n * @attribute {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.\n * @attribute {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.\n * @attribute {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.\n * @attribute {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.\n * @attribute {string} color - Defines the color variant of the toast. Supports values such as `primary`, `complete`, `success`, `warning`, `danger`, `info`, and `contrast`.\n * @attribute {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.\n * @attribute {boolean} stacked - Enables a layered toast stack where the newest toast stays visually on top while older ones shrink behind it.\n * @attribute {string} stack-position - Defines where the toast stack is placed on the screen. Supports `top-start`, `top-center`, `top-end`, `bottom-start`, `bottom-center`, and `bottom-end`.\n * @attribute {number} stack-depth - Defines how many visual levels the collapsed stacked toast can show. Older toasts beyond this limit stay at the last reduced level. Default is `3`.\n * @attribute {string} icon - Adds a leading icon into the `media` slot by icon name.\n * @cssproperty [--wje-toast-stack-width=300px] - Defines the width of the toast stack container. Useful for centered stacked toasts and demo layouts.\n * // @fires wje-toast:after-show - Fired after the toast is shown.\n * // @fires wje-toast:after-hide - Fired after the toast is hidden.\n */\n\nexport default class Toast extends WJElement {\n    /**\n     * Creates an instance of Toast.\n     */\n    constructor() {\n        super();\n\n        this.toastStack = this.createToastStack();\n    }\n\n    /**\n     * Set headline value of the toast.\n     * @param value\n     */\n    set headline(value) {\n        this.setAttribute('headline', value);\n    }\n\n    /**\n     * Get headline value of the toast.\n     * @returns {string}\n     */\n    get headline() {\n        return this.getAttribute('headline');\n    }\n\n    /**\n     * Set open value of the toast.\n     * @param value\n     */\n    set open(value) {\n        this.removeAttribute('open');\n\n        if (WjElementUtils.stringToBoolean(value)) this.setAttribute('open', value);\n    }\n\n    /**\n     * Get open value of the toast.\n     * @returns {boolean}\n     */\n    get open() {\n        return this.hasAttribute('open');\n    }\n\n    /**\n     * Set duration value of the toast.\n     * @param value\n     */\n    set duration(value) {\n        this.setAttribute('duration', value);\n    }\n\n    /**\n     * Get duration value of the toast.\n     * @returns {number}\n     */\n    get duration() {\n        return +this.getAttribute('duration');\n    }\n\n    /**\n     * Set closable value of the toast.\n     * @param value\n     */\n    set closable(value) {\n        this.setAttribute('closable', value || '');\n    }\n\n    /**\n     * Get closable value of the toast.\n     * @returns {boolean}\n     */\n    get closable() {\n        return this.hasAttribute('closable');\n    }\n\n    /**\n     * Set color value of the toast.\n     * @param value\n     */\n    set color(value) {\n        this.setAttribute('color', value);\n    }\n\n    /**\n     * Get color value of the toast.\n     * @returns {string}\n     */\n    get color() {\n        return this.getAttribute('color');\n    }\n\n    /**\n     * Set countdown value of the toast.\n     * @param value\n     */\n    set countdown(value) {\n        if (value) this.setAttribute('countdown', value);\n    }\n\n    /**\n     * Get countdown value of the toast.\n     * @returns {boolean}\n     */\n    get countdown() {\n        return this.hasAttribute('countdown');\n    }\n\n    /**\n     * Set stacked value of the toast.\n     * @param value\n     */\n    set stacked(value) {\n        this.toggleAttribute('stacked', WjElementUtils.stringToBoolean(value));\n    }\n\n    /**\n     * Get stacked value of the toast.\n     * @returns {boolean}\n     */\n    get stacked() {\n        return this.hasAttribute('stacked');\n    }\n\n    /**\n     * Set stack depth of the toast.\n     * @param value\n     */\n    set stackDepth(value) {\n        if (value === null || value === undefined || value === '') {\n            this.removeAttribute('stack-depth');\n            return;\n        }\n\n        this.setAttribute('stack-depth', value);\n    }\n\n    /**\n     * Get stack depth of the toast.\n     * @returns {number}\n     */\n    get stackDepth() {\n        let value = Number.parseInt(this.getAttribute('stack-depth'), 10);\n\n        if (Number.isFinite(value) && value > 0) {\n            return value;\n        }\n\n        return DEFAULT_STACK_DEPTH;\n    }\n\n    /**\n     * Set stack position of the toast.\n     * @param value\n     */\n    set stackPosition(value) {\n        if (!value) {\n            this.removeAttribute('stack-position');\n            return;\n        }\n\n        this.setAttribute('stack-position', value);\n    }\n\n    /**\n     * Get stack position of the toast.\n     * @returns {string}\n     */\n    get stackPosition() {\n        let value = this.getAttribute('stack-position');\n\n        if (VALID_STACK_POSITIONS.has(value)) {\n            return value;\n        }\n\n        if (this.getAttribute('position') === 'bottom') {\n            return 'bottom-end';\n        }\n\n        return DEFAULT_STACK_POSITION;\n    }\n\n    /**\n     * Set icon value of the toast.\n     * @param value\n     */\n    set icon(value) {\n        this.setAttribute('icon', value);\n    }\n\n    /**\n     * Get icon value of the toast.\n     * @returns {string}\n     */\n    get icon() {\n        return this.getAttribute('icon');\n    }\n\n    /**\n     * Creates a toast stack container.\n     * @returns {HTMLDivElement}\n     */\n    createToastStack() {\n        let stack = Object.assign(document.createElement('div'), { className: 'wje-toast-stack' });\n\n        stack.addEventListener('mouseenter', () => setStackExpandedState(stack, true));\n        stack.addEventListener('mouseleave', () => requestAnimationFrame(() => syncStackExpandedState(stack)));\n        stack.addEventListener('focusin', () => setStackExpandedState(stack, true));\n        stack.addEventListener('focusout', () => requestAnimationFrame(() => syncStackExpandedState(stack)));\n\n        this.syncToastStack(stack);\n\n        return stack;\n    }\n\n    /**\n     * Returns the key of the toast stack.\n     * @returns {string}\n     */\n    getToastStackKey() {\n        return `${this.stackPosition}:${this.stacked ? `stacked:${this.stackDepth}` : 'default'}`;\n    }\n\n    /**\n     * Applies the stack placement directly on the element so demo/app layout CSS cannot override it accidentally.\n     * @param {HTMLDivElement} stack\n     */\n    applyToastStackPlacement(stack = this.toastStack) {\n        const positions = {\n            'top-start': {\n                top: '0',\n                bottom: 'auto',\n                left: '0',\n                right: 'auto',\n                transform: 'none',\n                margin: '0.5rem',\n            },\n            'top-center': {\n                top: '0',\n                bottom: 'auto',\n                left: '50%',\n                right: 'auto',\n                transform: 'translateX(-50%)',\n                margin: '0.5rem 0 0',\n            },\n            'top-end': {\n                top: '0',\n                bottom: 'auto',\n                left: 'auto',\n                right: '0',\n                transform: 'none',\n                margin: '0.5rem',\n            },\n            'bottom-start': {\n                top: 'auto',\n                bottom: '0',\n                left: '0',\n                right: 'auto',\n                transform: 'none',\n                margin: '0 0.5rem 0.5rem',\n            },\n            'bottom-center': {\n                top: 'auto',\n                bottom: '0',\n                left: '50%',\n                right: 'auto',\n                transform: 'translateX(-50%)',\n                margin: '0 0 0.5rem',\n            },\n            'bottom-end': {\n                top: 'auto',\n                bottom: '0',\n                left: 'auto',\n                right: '0',\n                transform: 'none',\n                margin: '0 0.5rem 0.5rem',\n            },\n        };\n\n        stack.style.removeProperty('inset-inline');\n        stack.style.removeProperty('inset-inline-start');\n        stack.style.removeProperty('inset-inline-end');\n        Object.assign(stack.style, positions[this.stackPosition] || positions[DEFAULT_STACK_POSITION]);\n    }\n\n    /**\n     * Applies the current toast stack configuration to a stack element.\n     * @param {HTMLDivElement} stack\n     */\n    syncToastStack(stack = this.toastStack) {\n        stack.dataset.position = this.stackPosition;\n        stack.dataset.stackKey = this.getToastStackKey();\n        stack.updateToastLayout = () => this.updateToastStack(stack);\n        stack.style.display = 'flex';\n        stack.style.alignItems = 'stretch';\n        stack.style.width = 'min(var(--wje-toast-stack-width, 300px), calc(100vw - 1rem))';\n        stack.style.maxWidth = 'calc(100vw - 1rem)';\n        stack.style.maxHeight = 'calc(100vh - 1rem)';\n        stack.style.zIndex = '9999';\n        this.applyToastStackPlacement(stack);\n\n        if (this.stacked) {\n            stack.dataset.stacked = 'true';\n            stack.dataset.stackDepth = String(this.stackDepth);\n        } else {\n            delete stack.dataset.stacked;\n            delete stack.dataset.stackDepth;\n            delete stack.dataset.expanded;\n        }\n    }\n\n    /**\n     * Clears transient stack styling from a toast.\n     * @param {Toast} toast\n     */\n    clearStackItemStyles(toast) {\n        [\n            '--wje-toast-stack-scale',\n            '--wje-toast-stack-shift',\n            '--wje-toast-stack-opacity',\n            '--wje-toast-stack-z',\n            '--wje-toast-stack-origin',\n            '--wje-toast-stack-host-margin-top',\n            '--wje-toast-stack-host-margin-bottom',\n            'order',\n            'position',\n            'top',\n            'left',\n            'right',\n            'width',\n            'margin',\n            'margin-top',\n            'margin-bottom',\n        ].forEach((property) => toast.style.removeProperty(property));\n    }\n\n    /**\n     * Measures the rendered height of a toast for stack overlap calculations.\n     * @param {Toast} toast\n     * @returns {number}\n     */\n    getToastVisualHeight(toast) {\n        let hostHeight = toast.getBoundingClientRect().height;\n        let nativeHeight = toast.shadowRoot?.querySelector('.native-toast')?.getBoundingClientRect().height || 0;\n\n        return Math.max(hostHeight, nativeHeight, toast.offsetHeight || 0);\n    }\n\n    /**\n     * Recomputes the visual order of toasts inside the stack.\n     * @param {HTMLDivElement} stack\n     */\n    updateToastStack(stack = this.toastStack) {\n        let toasts = Array.from(stack.children).filter((child) => child.tagName === 'WJE-TOAST');\n        let isStacked = stack.dataset.stacked === 'true';\n        let isExpanded = stack.dataset.expanded === 'true';\n        let isBottomStack = stack.dataset.position?.startsWith('bottom');\n        let transformOrigin = stack.dataset.position?.startsWith('bottom') ? 'center bottom' : 'center top';\n        let stackHeight = 0;\n\n        stack.dataset.count = String(toasts.length);\n        stack.style.gap = 'var(--wje-spacing-x-small)';\n        stack.style.flexDirection = 'column';\n        stack.style.overflow = isStacked ? (isExpanded ? 'auto' : 'visible') : 'auto';\n\n        if (isStacked) {\n            stack.style.paddingTop = isExpanded ? (isBottomStack ? STACKED_PADDING : '0px') : STACKED_PADDING;\n            stack.style.paddingBottom = isExpanded ? (isBottomStack ? '0px' : STACKED_PADDING) : STACKED_PADDING;\n        } else {\n            stack.style.removeProperty('padding-top');\n            stack.style.removeProperty('padding-bottom');\n        }\n\n        if (!isStacked || isExpanded) {\n            stack.style.removeProperty('height');\n        }\n\n        toasts.forEach((toast, index) => {\n            this.clearStackItemStyles(toast);\n\n            toast.style.setProperty('--wje-toast-stack-z', String(index + 1));\n\n            if (!isStacked) {\n                return;\n            }\n\n            if (isExpanded) {\n                let visualOrder = isBottomStack ? index : toasts.length - index - 1;\n                let isVisualFirst = visualOrder === 0;\n                let isVisualLast = visualOrder === toasts.length - 1;\n\n                toast.style.setProperty('--wje-toast-stack-scale', '1.000');\n                toast.style.setProperty('--wje-toast-stack-shift', '0px');\n                toast.style.setProperty('--wje-toast-stack-opacity', '1.000');\n                toast.style.setProperty('--wje-toast-stack-origin', transformOrigin);\n                toast.style.order = String(visualOrder);\n                toast.style.width = '100%';\n                toast.style.setProperty(\n                    '--wje-toast-stack-host-margin-top',\n                    isBottomStack && !isVisualFirst ? STACKED_EXPANDED_MARGIN : '0px'\n                );\n                toast.style.setProperty(\n                    '--wje-toast-stack-host-margin-bottom',\n                    !isBottomStack && !isVisualLast ? STACKED_EXPANDED_MARGIN : '0px'\n                );\n                return;\n            }\n\n            let toastHeight = this.getToastVisualHeight(toast);\n            let maxDepth = Math.max(0, this.stackDepth - 1);\n            let visibleLevels = Math.min(toasts.length, this.stackDepth);\n            let depth = Math.min(toasts.length - index - 1, maxDepth);\n            let visibleIndex = Math.max(0, index - Math.max(0, toasts.length - this.stackDepth));\n            let targetTop = isBottomStack\n                ? visibleIndex * STACKED_VISIBLE_SLICE\n                : (visibleLevels - 1 - visibleIndex) * STACKED_VISIBLE_SLICE;\n            let scale = Math.max(STACKED_MIN_SCALE, 1 - depth * STACKED_SCALE_STEP);\n            let opacity = Math.max(STACKED_MIN_OPACITY, 1 - depth * 0.08);\n\n            toast.style.setProperty('--wje-toast-stack-scale', scale.toFixed(3));\n            toast.style.setProperty('--wje-toast-stack-shift', '0px');\n            toast.style.setProperty('--wje-toast-stack-opacity', opacity.toFixed(3));\n            toast.style.setProperty('--wje-toast-stack-origin', transformOrigin);\n            toast.style.position = 'absolute';\n            toast.style.top = `${targetTop}px`;\n            toast.style.left = '0';\n            toast.style.right = '0';\n            toast.style.width = '100%';\n            toast.style.setProperty('--wje-toast-stack-host-margin-top', '0px');\n            toast.style.setProperty('--wje-toast-stack-host-margin-bottom', '0px');\n\n            stackHeight = Math.max(stackHeight, targetTop + toastHeight);\n        });\n\n        if (isStacked && !isExpanded) {\n            stack.style.height = `${stackHeight}px`;\n        }\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Toast';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({\n            role: 'status',\n        });\n    }\n\n    /**\n     * Draw method for the toast notification.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-toast');\n\n        let mediaSlot = document.createElement('slot');\n        mediaSlot.setAttribute('name', 'media');\n        mediaSlot.classList.add('media');\n        mediaSlot.addEventListener('slotchange', () => {\n            if (WjElementUtils.hasSlotContent(this.context, 'media')) {\n                mediaSlot.parentElement.classList.add('has-media');\n            } else {\n                mediaSlot.parentElement.classList.remove('has-media');\n            }\n        });\n\n        let content = document.createElement('div');\n        content.classList.add('content');\n        content.innerHTML = `<div class=\"headline\">${this.headline}</div><div class=\"message\"><slot></slot></div>`;\n\n        let iconX = document.createElement('wje-icon');\n        iconX.setAttribute('name', 'x');\n\n        let closeBtn = document.createElement('wje-button');\n        closeBtn.setAttribute('fill', 'link');\n        closeBtn.setAttribute('color', this.color);\n        closeBtn.setAttribute('size', 'small');\n        closeBtn.classList.add('close');\n        closeBtn.setAttribute('label', 'Close');\n\n        let countdownEl = document.createElement('div');\n        countdownEl.classList.add('countdown');\n\n        let countdownBar = document.createElement('div');\n        countdownBar.classList.add('countdown-bar');\n\n        closeBtn.appendChild(iconX);\n        countdownEl.appendChild(countdownBar);\n\n        if (this.hasAttribute('icon') && this.icon) {\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', this.icon);\n            icon.setAttribute('color', this.color);\n            icon.setAttribute('slot', 'media');\n            icon.setAttribute('part', 'icon');\n\n            this.appendChild(icon);\n        }\n\n        native.appendChild(mediaSlot);\n        native.appendChild(content);\n\n        if (this.closable) native.appendChild(closeBtn);\n\n        if (this.hasAttribute('countdown')) native.appendChild(countdownEl);\n\n        fragment.appendChild(native);\n\n        this.closeBtn = closeBtn;\n        this.countdownBar = countdownBar;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the toast notification.\n     */\n    afterDraw() {\n        this.closeBtn.addEventListener('wje-button:click', this.hide);\n        this.addEventListener('mouseenter', this.pause);\n        this.addEventListener('mouseleave', this.resume);\n\n        if (this.hasAttribute('countdown')) {\n            const startWidth = '100%';\n            const endWidth = '0';\n\n            this.countdownAnimation = this.countdownBar.animate([{ width: startWidth }, { width: endWidth }], {\n                duration: this.duration,\n                easing: 'linear',\n            });\n        }\n\n        if (this.duration > 0) {\n            this.remainingTime = this.duration;\n            this.startTimer();\n        }\n    }\n\n    /**\n     * Before disconnect method\n     * This method is called before the element is disconnected from the document.\n     */\n    beforeDisconnect() {\n        this.closeBtn?.removeEventListener('wje-button:click', this.hide);\n        this.removeEventListener('wje-toast:after-hide', this.removeChildAndStack);\n        this.removeEventListener('mouseenter', this.pause);\n        this.removeEventListener('mouseleave', this.resume);\n\n        clearTimeout(this.timeoutID);\n    }\n\n    /**\n     * Starts the timer.\n     * This method sets the `startTime` property to the current time and sets\n     * the `timeoutID` property to the ID of the timeout. The method also\n     * dispatches the `wje-toast:after-hide` custom event when the timeout\n     * expires.\n     */\n    startTimer() {\n        this.startTime = Date.now();\n        if (this.timeoutID) {\n            clearTimeout(this.timeoutID);\n        }\n        this.isTimerPaused = false;\n        this.timeoutID = window.setTimeout(() => {\n            this.hide();\n        }, this.remainingTime);\n    }\n\n    /**\n     * Stops the timer.\n     * This method clears the timeout and calculates the remaining time.\n     * The method is called when the toast notification is paused.\n     */\n    stopTimer() {\n        if (!this.timeoutID || this.isTimerPaused) {\n            return;\n        }\n\n        window.clearTimeout(this.timeoutID);\n        this.timeoutID = null;\n        const elapsedTime = Date.now() - this.startTime;\n        this.remainingTime = Math.max(0, this.remainingTime - elapsedTime);\n        this.isTimerPaused = true;\n    }\n\n    /**\n     * Resumes the timer.\n     * This method resumes the timer if the remaining time is greater\n     * than zero. The method is called when the toast notification is resumed.\n     */\n    resumeTimer() {\n        if (this.isTimerPaused && this.remainingTime > 0) {\n            this.startTimer();\n        }\n    }\n\n    /**\n     * Asynchronously shows the toast notification.\n     * This method sets the `open` property to `true` and dispatches the\n     * `wje-toast:after-show` custom event. If the toast is already open,\n     * the method returns `undefined`.\n     */\n    show = () => {\n        if (this.open) {\n            return;\n        }\n\n        this.open = true;\n        event.dispatchCustomEvent(this, 'wje-toast:after-show');\n    };\n\n    /**\n     * Asynchronously hides the toast notification.\n     * This method sets the `open` property to `false` and dispatches the\n     * `wje-toast:after-hide` custom event. If the toast is already hidden,\n     * the method returns `undefined`.\n     */\n    hide = () => {\n        if (!this.open) {\n            return;\n        }\n\n        this.open = false;\n        event.dispatchCustomEvent(this, 'wje-toast:after-hide');\n    };\n\n    /**\n     * Pauses the countdown animation and stops the timer.\n     */\n    pause = () => {\n        this.countdownAnimation?.pause();\n        this.stopTimer();\n    };\n\n    /**\n     * Resumes the countdown animation and resumes the timer.\n     */\n    resume = () => {\n        if (this.toastStack?.dataset.expanded === 'true') {\n            return;\n        }\n\n        this.countdownAnimation?.play();\n        this.resumeTimer();\n    };\n\n    /**\n     * Removes the toast notification and the toast stack.\n     *\n     * This method removes the toast notification from the toast stack and\n     * removes the toast stack from the document body if the toast stack is\n     * empty.\n     */\n    removeChildAndStack() {\n        if (this.parentElement === this.toastStack) {\n            this.toastStack.removeChild(this);\n        }\n\n        this.toastStack.style.setProperty('--wje-toast-stack-layout-duration', '0s');\n        this.toastStack.style.setProperty('--wje-toast-stack-visual-duration', '0s');\n        this.updateToastStack(this.toastStack);\n\n        requestAnimationFrame(() => {\n            this.toastStack.style.removeProperty('--wje-toast-stack-layout-duration');\n            this.toastStack.style.removeProperty('--wje-toast-stack-visual-duration');\n        });\n\n        if (this.toastStack.querySelector('wje-toast') === null) {\n            this.toastStack.remove();\n        }\n    }\n\n    /**\n     * Asynchronously starts the toast notification.\n     * This method appends the toast notification to the document body and\n     * shows the toast notification. The method returns a promise that\n     * resolves when the toast notification is shown.\n     * @returns {Promise<unknown>}\n     */\n    start = () => {\n        return new Promise((resolve) => {\n            let stack = document.body.querySelector(`.wje-toast-stack[data-stack-key=\"${this.getToastStackKey()}\"]`);\n            if (stack) {\n                this.toastStack = stack;\n            } else {\n                this.toastStack = this.createToastStack();\n            }\n\n            this.syncToastStack(this.toastStack);\n\n            if (this.toastStack.parentElement === null) {\n                document.body.append(this.toastStack);\n            }\n\n            this.toastStack.append(this);\n            if (this.stacked) {\n                this.toastStack.style.setProperty('--wje-toast-stack-layout-duration', '0s');\n                this.toastStack.style.setProperty('--wje-toast-stack-visual-duration', '0s');\n                this.style.setProperty(\n                    '--wje-toast-enter-offset',\n                    this.stackPosition.startsWith('bottom') ? `${STACKED_ENTER_OFFSET}px` : `-${STACKED_ENTER_OFFSET}px`\n                );\n                this.style.visibility = 'hidden';\n                this.show();\n                this.updateToastStack(this.toastStack);\n            } else {\n                this.updateToastStack(this.toastStack);\n                this.show();\n            }\n\n            if (this.toastStack.dataset.expanded === 'true') {\n                this.pause();\n            }\n\n            requestAnimationFrame(() => {\n                this.updateToastStack(this.toastStack);\n\n                if (this.stacked) {\n                    this.style.removeProperty('visibility');\n                    this.toastStack.style.removeProperty('--wje-toast-stack-layout-duration');\n                    this.toastStack.style.removeProperty('--wje-toast-stack-visual-duration');\n\n                    requestAnimationFrame(() => this.style.setProperty('--wje-toast-enter-offset', '0px'));\n                }\n            });\n            this.updateComplete?.then(() => this.updateToastStack(this.toastStack));\n\n            this.addEventListener('wje-toast:after-hide', this.removeChildAndStack);\n\n            resolve(this);\n        });\n    };\n}\n","import Toast from './toast.element.js';\n\nexport default Toast;\n\nToast.define('wje-toast', Toast);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-toast.js","sources":["../packages/wje-toast/toast.element.js","../packages/wje-toast/toast.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\nconst DEFAULT_STACK_POSITION = 'top-end';\nconst DEFAULT_STACK_DEPTH = 3;\nconst VALID_STACK_POSITIONS = new Set([\n    'top-start',\n    'top-center',\n    'top-end',\n    'bottom-start',\n    'bottom-center',\n    'bottom-end',\n]);\nconst STACKED_SCALE_STEP = 0.04;\nconst STACKED_MIN_SCALE = 0.88;\nconst STACKED_MIN_OPACITY = 0.72;\nconst STACKED_VISIBLE_SLICE = 16;\nconst STACKED_EXPANDED_MARGIN = '0.5rem';\nconst STACKED_PADDING = '1rem';\nconst STACKED_ENTER_OFFSET = 24;\n\nconst toggleStackExpanded = (stack, expanded) => {\n    if (expanded) {\n        stack.dataset.expanded = 'true';\n        return;\n    }\n\n    delete stack.dataset.expanded;\n};\n\nconst syncExpandedStackToasts = (stack, expanded) => {\n    Array.from(stack.children)\n        .filter((child) => child.tagName === 'WJE-TOAST')\n        .forEach((toast) => {\n            if (expanded) {\n                toast.pause?.();\n                return;\n            }\n\n            toast.resume?.();\n        });\n};\n\nconst setStackExpandedState = (stack, expanded) => {\n    let shouldExpand = stack.dataset.stacked === 'true' && expanded;\n    let isExpanded = stack.dataset.expanded === 'true';\n\n    if (shouldExpand === isExpanded) {\n        return;\n    }\n\n    toggleStackExpanded(stack, shouldExpand);\n    syncExpandedStackToasts(stack, shouldExpand);\n    stack.updateToastLayout?.();\n};\n\nconst syncStackExpandedState = (stack) => {\n    setStackExpandedState(stack, stack.matches(':hover') || stack.matches(':focus-within'));\n};\n\n/**\n * `Toast` is a custom web component that represents a toast notification.\n * @summary This element represents a toast notification.\n * @documentation https://elements.webjet.sk/components/toast\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part\n * @slot - The content of the toast.\n * @slot media - The media of the toast.\n * @attribute {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.\n * @attribute {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.\n * @attribute {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.\n * @attribute {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.\n * @attribute {string} color - Defines the color variant of the toast. Supports values such as `primary`, `complete`, `success`, `warning`, `danger`, `info`, and `contrast`.\n * @attribute {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.\n * @attribute {boolean} stacked - Enables a layered toast stack where the newest toast stays visually on top while older ones shrink behind it.\n * @attribute {string} stack-position - Defines where the toast stack is placed on the screen. Supports `top-start`, `top-center`, `top-end`, `bottom-start`, `bottom-center`, and `bottom-end`.\n * @attribute {number} stack-depth - Defines how many visual levels the collapsed stacked toast can show. Older toasts beyond this limit stay at the last reduced level. Default is `3`.\n * @attribute {string} icon - Adds a leading icon into the `media` slot by icon name.\n * @cssproperty [--wje-toast-stack-width=300px] - Defines the width of the toast stack container. Useful for centered stacked toasts and demo layouts.\n * // @fires wje-toast:after-show - Fired after the toast is shown.\n * // @fires wje-toast:after-hide - Fired after the toast is hidden.\n */\n\nexport default class Toast extends WJElement {\n    /**\n     * Creates an instance of Toast.\n     */\n    constructor() {\n        super();\n\n        this.toastStack = this.createToastStack();\n    }\n\n    /**\n     * Set headline value of the toast.\n     * @param value\n     */\n    set headline(value) {\n        this.setAttribute('headline', value);\n    }\n\n    /**\n     * Get headline value of the toast.\n     * @returns {string}\n     */\n    get headline() {\n        return this.getAttribute('headline');\n    }\n\n    /**\n     * Set open value of the toast.\n     * @param value\n     */\n    set open(value) {\n        this.removeAttribute('open');\n\n        if (WjElementUtils.stringToBoolean(value)) this.setAttribute('open', value);\n    }\n\n    /**\n     * Get open value of the toast.\n     * @returns {boolean}\n     */\n    get open() {\n        return this.hasAttribute('open');\n    }\n\n    /**\n     * Set duration value of the toast.\n     * @param value\n     */\n    set duration(value) {\n        this.setAttribute('duration', value);\n    }\n\n    /**\n     * Get duration value of the toast.\n     * @returns {number}\n     */\n    get duration() {\n        return +this.getAttribute('duration');\n    }\n\n    /**\n     * Set closable value of the toast.\n     * @param value\n     */\n    set closable(value) {\n        this.setAttribute('closable', value || '');\n    }\n\n    /**\n     * Get closable value of the toast.\n     * @returns {boolean}\n     */\n    get closable() {\n        return this.hasAttribute('closable');\n    }\n\n    /**\n     * Set color value of the toast.\n     * @param value\n     */\n    set color(value) {\n        this.setAttribute('color', value);\n    }\n\n    /**\n     * Get color value of the toast.\n     * @returns {string}\n     */\n    get color() {\n        return this.getAttribute('color');\n    }\n\n    /**\n     * Set countdown value of the toast.\n     * @param value\n     */\n    set countdown(value) {\n        if (value) this.setAttribute('countdown', value);\n    }\n\n    /**\n     * Get countdown value of the toast.\n     * @returns {boolean}\n     */\n    get countdown() {\n        return this.hasAttribute('countdown');\n    }\n\n    /**\n     * Set stacked value of the toast.\n     * @param value\n     */\n    set stacked(value) {\n        this.toggleAttribute('stacked', WjElementUtils.stringToBoolean(value));\n    }\n\n    /**\n     * Get stacked value of the toast.\n     * @returns {boolean}\n     */\n    get stacked() {\n        return this.hasAttribute('stacked');\n    }\n\n    /**\n     * Set stack depth of the toast.\n     * @param value\n     */\n    set stackDepth(value) {\n        if (value === null || value === undefined || value === '') {\n            this.removeAttribute('stack-depth');\n            return;\n        }\n\n        this.setAttribute('stack-depth', value);\n    }\n\n    /**\n     * Get stack depth of the toast.\n     * @returns {number}\n     */\n    get stackDepth() {\n        let value = Number.parseInt(this.getAttribute('stack-depth'), 10);\n\n        if (Number.isFinite(value) && value > 0) {\n            return value;\n        }\n\n        return DEFAULT_STACK_DEPTH;\n    }\n\n    /**\n     * Set stack position of the toast.\n     * @param value\n     */\n    set stackPosition(value) {\n        if (!value) {\n            this.removeAttribute('stack-position');\n            return;\n        }\n\n        this.setAttribute('stack-position', value);\n    }\n\n    /**\n     * Get stack position of the toast.\n     * @returns {string}\n     */\n    get stackPosition() {\n        let value = this.getAttribute('stack-position');\n\n        if (VALID_STACK_POSITIONS.has(value)) {\n            return value;\n        }\n\n        if (this.getAttribute('position') === 'bottom') {\n            return 'bottom-end';\n        }\n\n        return DEFAULT_STACK_POSITION;\n    }\n\n    /**\n     * Set icon value of the toast.\n     * @param value\n     */\n    set icon(value) {\n        this.setAttribute('icon', value);\n    }\n\n    /**\n     * Get icon value of the toast.\n     * @returns {string}\n     */\n    get icon() {\n        return this.getAttribute('icon');\n    }\n\n    /**\n     * Creates a toast stack container.\n     * @returns {HTMLDivElement}\n     */\n    createToastStack() {\n        let stack = Object.assign(document.createElement('div'), { className: 'wje-toast-stack' });\n\n        stack.addEventListener('mouseenter', () => setStackExpandedState(stack, true));\n        stack.addEventListener('mouseleave', () => requestAnimationFrame(() => syncStackExpandedState(stack)));\n        stack.addEventListener('focusin', () => setStackExpandedState(stack, true));\n        stack.addEventListener('focusout', () => requestAnimationFrame(() => syncStackExpandedState(stack)));\n\n        this.syncToastStack(stack);\n\n        return stack;\n    }\n\n    /**\n     * Returns the key of the toast stack.\n     * @returns {string}\n     */\n    getToastStackKey() {\n        return `${this.stackPosition}:${this.stacked ? `stacked:${this.stackDepth}` : 'default'}`;\n    }\n\n    /**\n     * Applies the stack placement directly on the element so demo/app layout CSS cannot override it accidentally.\n     * @param {HTMLDivElement} stack\n     */\n    applyToastStackPlacement(stack = this.toastStack) {\n        const positions = {\n            'top-start': {\n                top: '0',\n                bottom: 'auto',\n                left: '0',\n                right: 'auto',\n                transform: 'none',\n                margin: '0.5rem',\n            },\n            'top-center': {\n                top: '0',\n                bottom: 'auto',\n                left: '50%',\n                right: 'auto',\n                transform: 'translateX(-50%)',\n                margin: '0.5rem 0 0',\n            },\n            'top-end': {\n                top: '0',\n                bottom: 'auto',\n                left: 'auto',\n                right: '0',\n                transform: 'none',\n                margin: '0.5rem',\n            },\n            'bottom-start': {\n                top: 'auto',\n                bottom: '0',\n                left: '0',\n                right: 'auto',\n                transform: 'none',\n                margin: '0 0.5rem 0.5rem',\n            },\n            'bottom-center': {\n                top: 'auto',\n                bottom: '0',\n                left: '50%',\n                right: 'auto',\n                transform: 'translateX(-50%)',\n                margin: '0 0 0.5rem',\n            },\n            'bottom-end': {\n                top: 'auto',\n                bottom: '0',\n                left: 'auto',\n                right: '0',\n                transform: 'none',\n                margin: '0 0.5rem 0.5rem',\n            },\n        };\n\n        stack.style.removeProperty('inset-inline');\n        stack.style.removeProperty('inset-inline-start');\n        stack.style.removeProperty('inset-inline-end');\n        Object.assign(stack.style, positions[this.stackPosition] || positions[DEFAULT_STACK_POSITION]);\n    }\n\n    /**\n     * Applies the current toast stack configuration to a stack element.\n     * @param {HTMLDivElement} stack\n     */\n    syncToastStack(stack = this.toastStack) {\n        stack.dataset.position = this.stackPosition;\n        stack.dataset.stackKey = this.getToastStackKey();\n        stack.updateToastLayout = () => this.updateToastStack(stack);\n        stack.style.display = 'flex';\n        stack.style.alignItems = 'stretch';\n        stack.style.width = 'min(var(--wje-toast-stack-width, 300px), calc(100vw - 1rem))';\n        stack.style.maxWidth = 'calc(100vw - 1rem)';\n        stack.style.maxHeight = 'calc(100vh - 1rem)';\n        stack.style.zIndex = '9999';\n        this.applyToastStackPlacement(stack);\n\n        if (this.stacked) {\n            stack.dataset.stacked = 'true';\n            stack.dataset.stackDepth = String(this.stackDepth);\n        } else {\n            delete stack.dataset.stacked;\n            delete stack.dataset.stackDepth;\n            delete stack.dataset.expanded;\n        }\n    }\n\n    /**\n     * Clears transient stack styling from a toast.\n     * @param {Toast} toast\n     */\n    clearStackItemStyles(toast) {\n        [\n            '--wje-toast-stack-scale',\n            '--wje-toast-stack-shift',\n            '--wje-toast-stack-opacity',\n            '--wje-toast-stack-z',\n            '--wje-toast-stack-origin',\n            '--wje-toast-stack-host-margin-top',\n            '--wje-toast-stack-host-margin-bottom',\n            'order',\n            'position',\n            'top',\n            'left',\n            'right',\n            'width',\n            'margin',\n            'margin-top',\n            'margin-bottom',\n        ].forEach((property) => toast.style.removeProperty(property));\n    }\n\n    /**\n     * Measures the rendered height of a toast for stack overlap calculations.\n     * @param {Toast} toast\n     * @returns {number}\n     */\n    getToastVisualHeight(toast) {\n        let hostHeight = toast.getBoundingClientRect().height;\n        let nativeHeight = toast.shadowRoot?.querySelector('.native-toast')?.getBoundingClientRect().height || 0;\n\n        return Math.max(hostHeight, nativeHeight, toast.offsetHeight || 0);\n    }\n\n    /**\n     * Recomputes the visual order of toasts inside the stack.\n     * @param {HTMLDivElement} stack\n     */\n    updateToastStack(stack = this.toastStack) {\n        let toasts = Array.from(stack.children).filter((child) => child.tagName === 'WJE-TOAST');\n        let isStacked = stack.dataset.stacked === 'true';\n        let isExpanded = stack.dataset.expanded === 'true';\n        let isBottomStack = stack.dataset.position?.startsWith('bottom');\n        let transformOrigin = stack.dataset.position?.startsWith('bottom') ? 'center bottom' : 'center top';\n        let stackHeight = 0;\n\n        stack.dataset.count = String(toasts.length);\n        stack.style.gap = 'var(--wje-spacing-x-small)';\n        stack.style.flexDirection = 'column';\n        stack.style.overflow = isStacked ? (isExpanded ? 'auto' : 'visible') : 'auto';\n\n        if (isStacked) {\n            stack.style.paddingTop = isExpanded ? (isBottomStack ? STACKED_PADDING : '0px') : STACKED_PADDING;\n            stack.style.paddingBottom = isExpanded ? (isBottomStack ? '0px' : STACKED_PADDING) : STACKED_PADDING;\n        } else {\n            stack.style.removeProperty('padding-top');\n            stack.style.removeProperty('padding-bottom');\n        }\n\n        if (!isStacked || isExpanded) {\n            stack.style.removeProperty('height');\n        }\n\n        toasts.forEach((toast, index) => {\n            this.clearStackItemStyles(toast);\n\n            toast.style.setProperty('--wje-toast-stack-z', String(index + 1));\n\n            if (!isStacked) {\n                return;\n            }\n\n            if (isExpanded) {\n                let visualOrder = isBottomStack ? index : toasts.length - index - 1;\n                let isVisualFirst = visualOrder === 0;\n                let isVisualLast = visualOrder === toasts.length - 1;\n\n                toast.style.setProperty('--wje-toast-stack-scale', '1.000');\n                toast.style.setProperty('--wje-toast-stack-shift', '0px');\n                toast.style.setProperty('--wje-toast-stack-opacity', '1.000');\n                toast.style.setProperty('--wje-toast-stack-origin', transformOrigin);\n                toast.style.order = String(visualOrder);\n                toast.style.width = '100%';\n                toast.style.setProperty(\n                    '--wje-toast-stack-host-margin-top',\n                    isBottomStack && !isVisualFirst ? STACKED_EXPANDED_MARGIN : '0px'\n                );\n                toast.style.setProperty(\n                    '--wje-toast-stack-host-margin-bottom',\n                    !isBottomStack && !isVisualLast ? STACKED_EXPANDED_MARGIN : '0px'\n                );\n                return;\n            }\n\n            let toastHeight = this.getToastVisualHeight(toast);\n            let maxDepth = Math.max(0, this.stackDepth - 1);\n            let visibleLevels = Math.min(toasts.length, this.stackDepth);\n            let depth = Math.min(toasts.length - index - 1, maxDepth);\n            let visibleIndex = Math.max(0, index - Math.max(0, toasts.length - this.stackDepth));\n            let targetTop = isBottomStack\n                ? visibleIndex * STACKED_VISIBLE_SLICE\n                : (visibleLevels - 1 - visibleIndex) * STACKED_VISIBLE_SLICE;\n            let scale = Math.max(STACKED_MIN_SCALE, 1 - depth * STACKED_SCALE_STEP);\n            let opacity = Math.max(STACKED_MIN_OPACITY, 1 - depth * 0.08);\n\n            toast.style.setProperty('--wje-toast-stack-scale', scale.toFixed(3));\n            toast.style.setProperty('--wje-toast-stack-shift', '0px');\n            toast.style.setProperty('--wje-toast-stack-opacity', opacity.toFixed(3));\n            toast.style.setProperty('--wje-toast-stack-origin', transformOrigin);\n            toast.style.position = 'absolute';\n            toast.style.top = `${targetTop}px`;\n            toast.style.left = '0';\n            toast.style.right = '0';\n            toast.style.width = '100%';\n            toast.style.setProperty('--wje-toast-stack-host-margin-top', '0px');\n            toast.style.setProperty('--wje-toast-stack-host-margin-bottom', '0px');\n\n            stackHeight = Math.max(stackHeight, targetTop + toastHeight);\n        });\n\n        if (isStacked && !isExpanded) {\n            stack.style.height = `${stackHeight}px`;\n        }\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Toast';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({\n            role: 'status',\n        });\n    }\n\n    /**\n     * Draw method for the toast notification.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-toast');\n\n        let mediaSlot = document.createElement('slot');\n        mediaSlot.setAttribute('name', 'media');\n        mediaSlot.classList.add('media');\n        mediaSlot.addEventListener('slotchange', () => {\n            if (WjElementUtils.hasSlotContent(this.context, 'media')) {\n                mediaSlot.parentElement.classList.add('has-media');\n            } else {\n                mediaSlot.parentElement.classList.remove('has-media');\n            }\n        });\n\n        let content = document.createElement('div');\n        content.classList.add('content');\n        content.innerHTML = `<div class=\"headline\">${this.headline}</div><div class=\"message\"><slot></slot></div>`;\n\n        let iconX = document.createElement('wje-icon');\n        iconX.setAttribute('name', 'x');\n\n        let closeBtn = document.createElement('wje-button');\n        closeBtn.setAttribute('fill', 'link');\n        closeBtn.setAttribute('color', this.color);\n        closeBtn.setAttribute('size', 'small');\n        closeBtn.classList.add('close');\n        closeBtn.setAttribute('label', 'Close');\n\n        let countdownEl = document.createElement('div');\n        countdownEl.classList.add('countdown');\n\n        let countdownBar = document.createElement('div');\n        countdownBar.classList.add('countdown-bar');\n\n        closeBtn.appendChild(iconX);\n        countdownEl.appendChild(countdownBar);\n\n        if (this.hasAttribute('icon') && this.icon) {\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', this.icon);\n            icon.setAttribute('color', this.color);\n            icon.setAttribute('slot', 'media');\n            icon.setAttribute('part', 'icon');\n\n            this.appendChild(icon);\n        }\n\n        native.appendChild(mediaSlot);\n        native.appendChild(content);\n\n        if (this.closable) native.appendChild(closeBtn);\n\n        if (this.hasAttribute('countdown')) native.appendChild(countdownEl);\n\n        fragment.appendChild(native);\n\n        this.closeBtn = closeBtn;\n        this.countdownBar = countdownBar;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the toast notification.\n     */\n    afterDraw() {\n        this.closeBtn.addEventListener('wje-button:click', this.hide);\n        this.addEventListener('mouseenter', this.pause);\n        this.addEventListener('mouseleave', this.resume);\n\n        if (this.hasAttribute('countdown')) {\n            const startWidth = '100%';\n            const endWidth = '0';\n\n            this.countdownAnimation = this.countdownBar.animate([{ width: startWidth }, { width: endWidth }], {\n                duration: this.duration,\n                easing: 'linear',\n            });\n        }\n\n        if (this.duration > 0) {\n            this.remainingTime = this.duration;\n            this.startTimer();\n        }\n    }\n\n    /**\n     * Before disconnect method\n     * This method is called before the element is disconnected from the document.\n     */\n    beforeDisconnect() {\n        this.closeBtn?.removeEventListener('wje-button:click', this.hide);\n        this.removeEventListener('wje-toast:after-hide', this.removeChildAndStack);\n        this.removeEventListener('mouseenter', this.pause);\n        this.removeEventListener('mouseleave', this.resume);\n\n        clearTimeout(this.timeoutID);\n    }\n\n    /**\n     * Starts the timer.\n     * This method sets the `startTime` property to the current time and sets\n     * the `timeoutID` property to the ID of the timeout. The method also\n     * dispatches the `wje-toast:after-hide` custom event when the timeout\n     * expires.\n     */\n    startTimer() {\n        this.startTime = Date.now();\n        if (this.timeoutID) {\n            clearTimeout(this.timeoutID);\n        }\n        this.isTimerPaused = false;\n        this.timeoutID = window.setTimeout(() => {\n            this.hide();\n        }, this.remainingTime);\n    }\n\n    /**\n     * Stops the timer.\n     * This method clears the timeout and calculates the remaining time.\n     * The method is called when the toast notification is paused.\n     */\n    stopTimer() {\n        if (!this.timeoutID || this.isTimerPaused) {\n            return;\n        }\n\n        window.clearTimeout(this.timeoutID);\n        this.timeoutID = null;\n        const elapsedTime = Date.now() - this.startTime;\n        this.remainingTime = Math.max(0, this.remainingTime - elapsedTime);\n        this.isTimerPaused = true;\n    }\n\n    /**\n     * Resumes the timer.\n     * This method resumes the timer if the remaining time is greater\n     * than zero. The method is called when the toast notification is resumed.\n     */\n    resumeTimer() {\n        if (this.isTimerPaused && this.remainingTime > 0) {\n            this.startTimer();\n        }\n    }\n\n    /**\n     * Asynchronously shows the toast notification.\n     * This method sets the `open` property to `true` and dispatches the\n     * `wje-toast:after-show` custom event. If the toast is already open,\n     * the method returns `undefined`.\n     */\n    show = () => {\n        if (this.open) {\n            return;\n        }\n\n        this.open = true;\n        event.dispatchCustomEvent(this, 'wje-toast:after-show');\n    };\n\n    /**\n     * Asynchronously hides the toast notification.\n     * This method sets the `open` property to `false` and dispatches the\n     * `wje-toast:after-hide` custom event. If the toast is already hidden,\n     * the method returns `undefined`.\n     */\n    hide = () => {\n        if (!this.open) {\n            return;\n        }\n\n        this.open = false;\n        event.dispatchCustomEvent(this, 'wje-toast:after-hide');\n    };\n\n    /**\n     * Pauses the countdown animation and stops the timer.\n     */\n    pause = () => {\n        this.countdownAnimation?.pause();\n        this.stopTimer();\n    };\n\n    /**\n     * Resumes the countdown animation and resumes the timer.\n     */\n    resume = () => {\n        if (this.toastStack?.dataset.expanded === 'true') {\n            return;\n        }\n\n        this.countdownAnimation?.play();\n        this.resumeTimer();\n    };\n\n    /**\n     * Removes the toast notification and the toast stack.\n     *\n     * This method removes the toast notification from the toast stack and\n     * removes the toast stack from the document body if the toast stack is\n     * empty.\n     */\n    removeChildAndStack() {\n        if (this.parentElement === this.toastStack) {\n            this.toastStack.removeChild(this);\n        }\n\n        this.toastStack.style.setProperty('--wje-toast-stack-layout-duration', '0s');\n        this.toastStack.style.setProperty('--wje-toast-stack-visual-duration', '0s');\n        this.updateToastStack(this.toastStack);\n\n        requestAnimationFrame(() => {\n            this.toastStack.style.removeProperty('--wje-toast-stack-layout-duration');\n            this.toastStack.style.removeProperty('--wje-toast-stack-visual-duration');\n        });\n\n        if (this.toastStack.querySelector('wje-toast') === null) {\n            this.toastStack.remove();\n        }\n    }\n\n    /**\n     * Asynchronously starts the toast notification.\n     * This method appends the toast notification to the document body and\n     * shows the toast notification. The method returns a promise that\n     * resolves when the toast notification is shown.\n     * @returns {Promise<unknown>}\n     */\n    start = () => {\n        return new Promise((resolve) => {\n            let stack = document.body.querySelector(`.wje-toast-stack[data-stack-key=\"${this.getToastStackKey()}\"]`);\n            if (stack) {\n                this.toastStack = stack;\n            } else {\n                this.toastStack = this.createToastStack();\n            }\n\n            this.syncToastStack(this.toastStack);\n\n            if (this.toastStack.parentElement === null) {\n                document.body.append(this.toastStack);\n            }\n\n            this.toastStack.append(this);\n            if (this.stacked) {\n                this.toastStack.style.setProperty('--wje-toast-stack-layout-duration', '0s');\n                this.toastStack.style.setProperty('--wje-toast-stack-visual-duration', '0s');\n                this.style.setProperty(\n                    '--wje-toast-enter-offset',\n                    this.stackPosition.startsWith('bottom') ? `${STACKED_ENTER_OFFSET}px` : `-${STACKED_ENTER_OFFSET}px`\n                );\n                this.style.visibility = 'hidden';\n                this.show();\n                this.updateToastStack(this.toastStack);\n            } else {\n                this.updateToastStack(this.toastStack);\n                this.show();\n            }\n\n            if (this.toastStack.dataset.expanded === 'true') {\n                this.pause();\n            }\n\n            requestAnimationFrame(() => {\n                this.updateToastStack(this.toastStack);\n\n                if (this.stacked) {\n                    this.style.removeProperty('visibility');\n                    this.toastStack.style.removeProperty('--wje-toast-stack-layout-duration');\n                    this.toastStack.style.removeProperty('--wje-toast-stack-visual-duration');\n\n                    requestAnimationFrame(() => this.style.setProperty('--wje-toast-enter-offset', '0px'));\n                }\n            });\n            this.updateComplete?.then(() => this.updateToastStack(this.toastStack));\n\n            this.addEventListener('wje-toast:after-hide', this.removeChildAndStack);\n\n            resolve(this);\n        });\n    };\n}\n","import Toast from './toast.element.js';\n\nexport default Toast;\n\nToast.define('wje-toast', Toast);\n"],"names":["DEFAULT_STACK_POSITION","VALID_STACK_POSITIONS","Set","STACKED_EXPANDED_MARGIN","STACKED_PADDING","setStackExpandedState","stack","expanded","shouldExpand","dataset","stacked","Array","from","children","filter","child","tagName","forEach","toast","pause","resume","updateToastLayout","syncStackExpandedState","matches","Toast","WJElement","constructor","super","className","show","this","open","event","dispatchCustomEvent","hide","countdownAnimation","stopTimer","toastStack","play","resumeTimer","start","Promise","resolve","document","body","querySelector","getToastStackKey","createToastStack","syncToastStack","parentElement","append","style","setProperty","stackPosition","startsWith","visibility","updateToastStack","requestAnimationFrame","removeProperty","updateComplete","then","addEventListener","removeChildAndStack","value","setAttribute","headline","getAttribute","removeAttribute","WjElementUtils","stringToBoolean","hasAttribute","duration","closable","countdown","toggleAttribute","stackDepth","Number","parseInt","isFinite","has","Object","assign","createElement","positions","top","bottom","left","right","transform","margin","position","stackKey","display","alignItems","width","maxWidth","maxHeight","zIndex","applyToastStackPlacement","String","property","hostHeight","getBoundingClientRect","height","nativeHeight","shadowRoot","Math","max","offsetHeight","toasts","isStacked","isExpanded","isBottomStack","transformOrigin","stackHeight","count","length","gap","flexDirection","overflow","paddingTop","paddingBottom","index","clearStackItemStyles","visualOrder","isVisualFirst","isVisualLast","order","toastHeight","getToastVisualHeight","maxDepth","visibleLevels","min","depth","visibleIndex","targetTop","scale","opacity","toFixed","cssStyleSheet","setupAttributes","isShadowRoot","setAriaState","role","fragment","createDocumentFragment","native","classList","add","mediaSlot","hasSlotContent","context","remove","content","innerHTML","iconX","closeBtn","color","countdownEl","countdownBar","appendChild","icon","afterDraw","startWidth","endWidth","animate","easing","remainingTime","startTimer","beforeDisconnect","removeEventListener","clearTimeout","timeoutID","startTime","Date","now","isTimerPaused","window","setTimeout","elapsedTime","removeChild","define"],"mappings":";;;;;;MAGMA,IAAyB,WAEzBC,IAAwB,oBAAIC,IAAI,CAClC,aACA,cACA,WACA,gBACA,iBACA,YAAA,CAAA,GAMEC,IAA0B,UAC1BC,IAAkB,QAyBlBC,IAAwB,CAACC,IAAOC,OAAAA;;AAClC,MAAIC,KAAyC,WAA1BF,GAAMG,QAAQC,WAAsBH;AAGnDC,EAAAA,QAFwC,WAA3BF,GAAMG,QAAQF,gBAxBND,IAAOC,OAAAA;AAC5BA,IAAAA,KACAD,GAAMG,QAAQF,WAAW,SAAA,OAItBD,GAAMG,QAAQF;AAAAA,EAAAA,GAwBDD,IAAOE,EAAAA,KArBEF,IAAOC,OAAAA;AACpCI,UAAMC,KAAKN,GAAMO,UACZC,OAAQC,CAAAA,OAA4B,gBAAlBA,GAAMC,OAAAA,EACxBC,QAASC,CAAAA,OAAAA;;AACFX,MAAAA,MACAW,MAAAA,GAAMC,UAAND,gBAAAA,IAAAA,KAAAA,OAIJA,KAAAA,GAAME,WAANF,wBAAAA;AAAAA,IAAME,CAAAA;AAAAA,EAAAA,GAaUd,IAAOE,EAAAA,IAC/BF,KAAAA,GAAMe,sBAANf,wBAAAA;GAGEgB,IAA0BhB,CAAAA,OAAAA;AAC5BD,IAAsBC,IAAOA,GAAMiB,QAAQ,QAAA,KAAajB,GAAMiB,QAAQ,eAAA,CAAA;AAAA;AA2B3D,MAAMC,UAAcC,EAAAA;AAAAA,EAI/B,cAAAC;AACIC,UAAAA;AAsbJC,qCAAY;AAoLZC,gCAAO,MAAA;AACCC,WAAKC,SAITD,KAAKC,OAAAA,MACLC,EAAMC,oBAAoBH,MAAM,sBAAA;AAAA,IAAA;AASpCI,gCAAO,MAAA;AACEJ,WAAKC,SAIVD,KAAKC,OAAAA,OACLC,EAAMC,oBAAoBH,MAAM,sBAAA;AAAA,IAAA;AAMpCX,iCAAQ;;AACJW,iBAAKK,uBAALL,mBAAyBX,SACzBW,KAAKM,UAAAA;AAAAA,IAAAA;AAMThB,kCAAS,MAAA;;AACqC,mBAAtCU,UAAKO,eAALP,mBAAiBrB,QAAQF,eAI7BuB,UAAKK,uBAALL,mBAAyBQ,QACzBR,KAAKS;;AAoCTC,iCAAQ,MACG,IAAIC,QAASC,CAAAA;;AAChB,UAAIpC,KAAQqC,SAASC,KAAKC,cAAc,oCAAoCf,KAAKgB,iBAAAA,CAAAA,IAAAA;AAE7EhB,WAAKO,aADL/B,MAGkBwB,KAAKiB,iBAAAA,GAG3BjB,KAAKkB,eAAelB,KAAKO,aAEa,SAAlCP,KAAKO,WAAWY,iBAChBN,SAASC,KAAKM,OAAOpB,KAAKO,aAG9BP,KAAKO,WAAWa,OAAOpB,IAAAA,GACnBA,KAAKpB,WACLoB,KAAKO,WAAWc,MAAMC,YAAY,qCAAqC,IAAA,GACvEtB,KAAKO,WAAWc,MAAMC,YAAY,qCAAqC,IAAA,GACvEtB,KAAKqB,MAAMC,YACP,4BACAtB,KAAKuB,cAAcC,WAAW,YAAY,SAA8B,OAAA,GAE5ExB,KAAKqB,MAAMI,aAAa,UACxBzB,KAAKD,QACLC,KAAK0B,iBAAiB1B,KAAKO,UAAAA,MAE3BP,KAAK0B,iBAAiB1B,KAAKO,UAAAA,GAC3BP,KAAKD,KAAAA,IAGgC,WAArCC,KAAKO,WAAW5B,QAAQF,YACxBuB,KAAKX,MAAAA,GAGTsC,sBAAsB,MAAA;AAClB3B,aAAK0B,iBAAiB1B,KAAKO,aAEvBP,KAAKpB,YACLoB,KAAKqB,MAAMO,eAAe,eAC1B5B,KAAKO,WAAWc,MAAMO,eAAe,mCAAA,GACrC5B,KAAKO,WAAWc,MAAMO,eAAe,mCAAA,GAErCD,sBAAsB,MAAM3B,KAAKqB,MAAMC,YAAY,4BAA4B;WAGvFtB,UAAK6B,mBAAL7B,mBAAqB8B,KAAK,MAAM9B,KAAK0B,iBAAiB1B,KAAKO,UAAAA,IAE3DP,KAAK+B,iBAAiB,wBAAwB/B,KAAKgC,mBAAAA,GAEnDpB,GAAQZ;;AAvuBZA,SAAKO,aAAaP,KAAKiB;EAC3B;AAAA,EAMA,IAAA,SAAagB,IAAAA;AACTjC,SAAKkC,aAAa,YAAYD,EAAAA;AAAAA,EAClC;AAAA,EAMA,IAAA,WAAIE;AACA,WAAOnC,KAAKoC,aAAa;EAC7B;AAAA,EAMA,IAAA,KAASH,IAAAA;AACLjC,SAAKqC,gBAAgB,MAAA,GAEjBC,EAAeC,gBAAgBN,EAAAA,KAAQjC,KAAKkC,aAAa,QAAQD;EACzE;AAAA,EAMA,IAAA;AACI,WAAOjC,KAAKwC,aAAa,MAAA;AAAA,EAC7B;AAAA,EAMA,aAAaP,IAAAA;AACTjC,SAAKkC,aAAa,YAAYD,EAAAA;AAAAA,EAClC;AAAA,EAMA,eAAIQ;AACA,WAAA,CAAQzC,KAAKoC,aAAa,UAAA;AAAA,EAC9B;AAAA,EAMA,IAAA,SAAaH;AACTjC,SAAKkC,aAAa,YAAYD,MAAS,EAAA;AAAA,EAC3C;AAAA,EAMA,IAAA,WAAIS;AACA,WAAO1C,KAAKwC,aAAa,UAAA;AAAA,EAC7B;AAAA,EAMA,UAAUP,IAAAA;AACNjC,SAAKkC,aAAa,SAASD;EAC/B;AAAA,EAMA,IAAA;AACI,WAAOjC,KAAKoC,aAAa,OAAA;AAAA,EAC7B;AAAA,EAMA,cAAcH,IAAAA;AACNA,IAAAA,MAAOjC,KAAKkC,aAAa,aAAaD,EAAAA;AAAAA,EAC9C;AAAA,EAMA,IAAA,YAAIU;AACA,WAAO3C,KAAKwC,aAAa;EAC7B;AAAA,EAMA,IAAA,QAAYP,IAAAA;AACRjC,SAAK4C,gBAAgB,WAAWN,EAAeC,gBAAgBN,EAAAA,CAAAA;AAAAA,EACnE;AAAA,EAMA,IAAA,UAAIrD;AACA,WAAOoB,KAAKwC,aAAa;EAC7B;AAAA,EAMA,IAAA,WAAeP,IAAAA;AACPA,YAAAA,MAAmD,OAAVA,KAK7CjC,KAAKkC,aAAa,eAAeD,EAAAA,IAJ7BjC,KAAKqC,gBAAgB,aAAA;AAAA,EAK7B;AAAA,EAMA,IAAA,aAAIQ;AACA,QAAIZ,KAAQa,OAAOC,SAAS/C,KAAKoC,aAAa,aAAA,GAAgB,EAAA;AAE9D,WAAIU,OAAOE,SAASf,OAAUA,KAAQ,IAC3BA,KAjOS;AAAA,EAqOxB;AAAA,EAMA,kBAAkBA,IAAAA;AACTA,IAAAA,KAKLjC,KAAKkC,aAAa,kBAAkBD,EAAAA,IAJhCjC,KAAKqC,gBAAgB,gBAAA;AAAA,EAK7B;AAAA,EAMA,IAAA,gBAAId;AACA,QAAIU,KAAQjC,KAAKoC,aAAa,gBAAA;AAE9B,WAAIjE,EAAsB8E,IAAIhB,EAAAA,IACnBA,KAG2B,aAAlCjC,KAAKoC,aAAa,UAAA,IACX,eAGJlE;AAAAA,EACX;AAAA,EAMA,SAAS+D,IAAAA;AACLjC,SAAKkC,aAAa,QAAQD;EAC9B;AAAA,EAMA,IAAA;AACI,WAAOjC,KAAKoC,aAAa,MAAA;AAAA,EAC7B;AAAA,EAMA,mBAAAnB;AACI,QAAIzC,KAAQ0E,OAAOC,OAAOtC,SAASuC,cAAc,QAAQ,EAAEtD,WAAW;AAStE,WAPAtB,GAAMuD,iBAAiB,cAAc,MAAMxD,EAAsBC,IAAAA,IAAO,CAAA,GACxEA,GAAMuD,iBAAiB,cAAc,MAAMJ,sBAAsB,MAAMnC,EAAuBhB,EAAAA,CAAAA,CAAAA,GAC9FA,GAAMuD,iBAAiB,WAAW,MAAMxD,EAAsBC,IAAAA,QAC9DA,GAAMuD,iBAAiB,YAAY,MAAMJ,sBAAsB,MAAMnC,EAAuBhB,EAAAA,CAAAA,CAAAA,GAE5FwB,KAAKkB,eAAe1C,EAAAA,GAEbA;AAAAA,EACX;AAAA,EAMA;AACI,WAAO,GAAGwB,KAAKuB,aAAAA,IAAiBvB,KAAKpB,UAAU,WAAWoB,KAAK6C,UAAAA,KAAe,SAAA;AAAA,EAClF;AAAA,EAMA,yBAAyBrE,KAAQwB,KAAKO,YAAAA;AAClC,UAAM8C,KAAY,EACd,aAAa,EACTC,KAAK,KACLC,QAAQ,QACRC,MAAM,KACNC,OAAO,QACPC,WAAW,QACXC,QAAQ,SAAA,GAEZ,cAAc,EACVL,KAAK,KACLC,QAAQ,QACRC,MAAM,OACNC,OAAO,QACPC,WAAW,oBACXC,QAAQ,aAAA,GAEZ,WAAW,EACPL,KAAK,KACLC,QAAQ,QACRC,MAAM,QACNC,OAAO,KACPC,WAAW,QACXC,QAAQ,SAAA,GAEZ,gBAAgB,EACZL,KAAK,QACLC,QAAQ,KACRC,MAAM,KACNC,OAAO,QACPC,WAAW,QACXC,QAAQ,kBAAA,GAEZ,iBAAiB,EACbL,KAAK,QACLC,QAAQ,KACRC,MAAM,OACNC,OAAO,QACPC,WAAW,oBACXC,QAAQ,gBAEZ,cAAc,EACVL,KAAK,QACLC,QAAQ,KACRC,MAAM,QACNC,OAAO,KACPC,WAAW,QACXC,QAAQ;AAIhBnF,IAAAA,GAAM6C,MAAMO,eAAe,cAAA,GAC3BpD,GAAM6C,MAAMO,eAAe,oBAAA,GAC3BpD,GAAM6C,MAAMO,eAAe,qBAC3BsB,OAAOC,OAAO3E,GAAM6C,OAAOgC,GAAUrD,KAAKuB,aAAAA,KAAkB8B,GAAUnF,CAAAA,CAAAA;AAAAA,EAC1E;AAAA,EAMA,eAAeM,KAAQwB,KAAKO,YAAAA;AACxB/B,IAAAA,GAAMG,QAAQiF,WAAW5D,KAAKuB,eAC9B/C,GAAMG,QAAQkF,WAAW7D,KAAKgB,iBAAAA,GAC9BxC,GAAMe,oBAAoB,MAAMS,KAAK0B,iBAAiBlD,KACtDA,GAAM6C,MAAMyC,UAAU,QACtBtF,GAAM6C,MAAM0C,aAAa,WACzBvF,GAAM6C,MAAM2C,QAAQ,gEACpBxF,GAAM6C,MAAM4C,WAAW,sBACvBzF,GAAM6C,MAAM6C,YAAY,sBACxB1F,GAAM6C,MAAM8C,SAAS,QACrBnE,KAAKoE,yBAAyB5F,EAAAA,GAE1BwB,KAAKpB,WACLJ,GAAMG,QAAQC,UAAU,QACxBJ,GAAMG,QAAQkE,aAAawB,OAAOrE,KAAK6C,UAAAA,MAAAA,OAEhCrE,GAAMG,QAAQC,SAAAA,OACdJ,GAAMG,QAAQkE,YAAAA,OACdrE,GAAMG,QAAQF;AAAAA,EAE7B;AAAA,EAMA,qBAAqBW;AACjB,KACI,2BACA,2BACA,6BACA,uBACA,4BACA,qCACA,wCACA,SACA,YACA,OACA,QACA,SACA,SACA,UACA,cACA,iBACFD,QAASmF,CAAAA,OAAalF,GAAMiC,MAAMO,eAAe0C;EACvD;AAAA,EAOA,qBAAqBlF,IAAAA;;AACjB,QAAImF,KAAanF,GAAMoF,sBAAAA,EAAwBC,QAC3CC,OAAetF,WAAAA,GAAMuF,eAANvF,mBAAkB2B,cAAc,qBAAhC3B,mBAAkDoF,wBAAwBC,WAAU;AAEvG,WAAOG,KAAKC,IAAIN,IAAYG,IAActF,GAAM0F,gBAAgB,CAAA;AAAA,EACpE;AAAA,EAMA,iBAAiBtG,KAAQwB,KAAKO,YAAAA;;AAC1B,QAAIwE,KAASlG,MAAMC,KAAKN,GAAMO,UAAUC,OAAQC,CAAAA,OAA4B,gBAAlBA,GAAMC,OAAAA,GAC5D8F,KAAsC,WAA1BxG,GAAMG,QAAQC,SAC1BqG,KAAwC,WAA3BzG,GAAMG,QAAQF,UAC3ByG,MAAgB1G,KAAAA,GAAMG,QAAQiF,aAAdpF,mBAAwBgD,WAAW,WACnD2D,OAAkB3G,KAAAA,GAAMG,QAAQiF,aAAdpF,mBAAwBgD,WAAW,aAAY,kBAAkB,cACnF4D,KAAc;AAElB5G,IAAAA,GAAMG,QAAQ0G,QAAQhB,OAAOU,GAAOO,MAAAA,GACpC9G,GAAM6C,MAAMkE,MAAM,8BAClB/G,GAAM6C,MAAMmE,gBAAgB,UAC5BhH,GAAM6C,MAAMoE,WAAWT,KAAaC,KAAa,SAAS,YAAa,QAEnED,MACAxG,GAAM6C,MAAMqE,aAAaT,KAAcC,KAAgB5G,IAAkB,QAASA,GAClFE,GAAM6C,MAAMsE,gBAAgBV,MAAcC,KAAgB,QAA2B5G,MAErFE,GAAM6C,MAAMO,eAAe,aAAA,GAC3BpD,GAAM6C,MAAMO,eAAe,gBAAA,IAG1BoD,OAAaC,MACdzG,GAAM6C,MAAMO,eAAe,QAAA,GAG/BmD,GAAO5F,QAAQ,CAACC,IAAOwG,OAAAA;AAKnB,UAJA5F,KAAK6F,qBAAqBzG,KAE1BA,GAAMiC,MAAMC,YAAY,uBAAuB+C,OAAOuB,KAAQ,CAAA,CAAA,GAAA,CAEzDZ,GACD;AAGJ,UAAIC,IAAY;AACZ,YAAIa,KAAcZ,KAAgBU,KAAQb,GAAOO,SAASM,KAAQ,GAC9DG,KAAgC,MAAhBD,IAChBE,KAAeF,OAAgBf,GAAOO,SAAS;AAgBnD,eAdAlG,GAAMiC,MAAMC,YAAY,2BAA2B,OAAA,GACnDlC,GAAMiC,MAAMC,YAAY,2BAA2B,KAAA,GACnDlC,GAAMiC,MAAMC,YAAY,6BAA6B,OAAA,GACrDlC,GAAMiC,MAAMC,YAAY,4BAA4B6D,KACpD/F,GAAMiC,MAAM4E,QAAQ5B,OAAOyB,EAAAA,GAC3B1G,GAAMiC,MAAM2C,QAAQ,QACpB5E,GAAMiC,MAAMC,YACR,qCACA4D,MAAAA,CAAkBa,KAAgB1H,IAA0B,KAAA,GAAA,KAEhEe,GAAMiC,MAAMC,YACR,wCACC4D,MAAkBc,KAAyC,QAA1B3H,CAAAA;AAAAA,MAG1C;AAEA,UAAI6H,KAAclG,KAAKmG,qBAAqB/G,EAAAA,GACxCgH,IAAWxB,KAAKC,IAAI,GAAG7E,KAAK6C,aAAa,IACzCwD,IAAgBzB,KAAK0B,IAAIvB,GAAOO,QAAQtF,KAAK6C,UAAAA,GAC7C0D,IAAQ3B,KAAK0B,IAAIvB,GAAOO,SAASM,KAAQ,GAAGQ,CAAAA,GAC5CI,IAAe5B,KAAKC,IAAI,GAAGe,KAAQhB,KAAKC,IAAI,GAAGE,GAAOO,SAAStF,KAAK6C,UAAAA,CAAAA,GACpE4D,IAAYvB,KAjeE,KAkeZsB,IAleY,MAmeXH,IAAgB,IAAIG,IACvBE,IAAQ9B,KAAKC,IAteH,MAse0B,IAvezB,OAue6B0B,CAAAA,GACxCI,IAAU/B,KAAKC,IAteH,MAse4B,IAAY,OAAR0B,CAAAA;AAEhDnH,MAAAA,GAAMiC,MAAMC,YAAY,2BAA2BoF,EAAME,QAAQ,CAAA,CAAA,GACjExH,GAAMiC,MAAMC,YAAY,2BAA2B,KAAA,GACnDlC,GAAMiC,MAAMC,YAAY,6BAA6BqF,EAAQC,QAAQ,CAAA,CAAA,GACrExH,GAAMiC,MAAMC,YAAY,4BAA4B6D,EAAAA,GACpD/F,GAAMiC,MAAMuC,WAAW,YACvBxE,GAAMiC,MAAMiC,MAAM,GAAGmD,CAAAA,MACrBrH,GAAMiC,MAAMmC,OAAO,KACnBpE,GAAMiC,MAAMoC,QAAQ,KACpBrE,GAAMiC,MAAM2C,QAAQ,QACpB5E,GAAMiC,MAAMC,YAAY,qCAAqC,KAAA,GAC7DlC,GAAMiC,MAAMC,YAAY,wCAAwC,KAAA,GAEhE8D,KAAcR,KAAKC,IAAIO,IAAaqB,IAAYP,EAAAA;AAAAA,IAAAA,CAAAA,GAGhDlB,MAAAA,CAAcC,OACdzG,GAAM6C,MAAMoD,SAAS,GAAGW,EAAAA;AAAAA,EAEhC;AAAA,EAaA,WAAA,gBAAWyB;AACP;EACJ;AAAA,EAKA,kBAAAC;AACI9G,SAAK+G,eAAe,QACpB/G,KAAKgH,aAAa,EACdC,MAAM;EAEd;AAAA,EAMA;AACI,QAAIC,KAAWrG,SAASsG,uBAAAA,GAEpBC,KAASvG,SAASuC,cAAc;AACpCgE,IAAAA,GAAOlF,aAAa,QAAQ,QAAA,GAC5BkF,GAAOC,UAAUC,IAAI,cAAA;AAErB,QAAIC,KAAY1G,SAASuC,cAAc,MAAA;AACvCmE,IAAAA,GAAUrF,aAAa,QAAQ,OAAA,GAC/BqF,GAAUF,UAAUC,IAAI,OAAA,GACxBC,GAAUxF,iBAAiB,cAAc,MAAA;AACjCO,QAAekF,eAAexH,KAAKyH,SAAS,OAAA,IAC5CF,GAAUpG,cAAckG,UAAUC,IAAI,eAEtCC,GAAUpG,cAAckG,UAAUK,OAAO,WAAA;AAAA,IAAA,CAAA;AAIjD,QAAIC,KAAU9G,SAASuC,cAAc,KAAA;AACrCuE,IAAAA,GAAQN,UAAUC,IAAI,YACtBK,GAAQC,YAAY,yBAAyB5H,KAAKmC,QAAAA;AAElD,QAAI0F,KAAQhH,SAASuC,cAAc,UAAA;AACnCyE,IAAAA,GAAM3F,aAAa,QAAQ,GAAA;AAE3B,QAAI4F,KAAWjH,SAASuC,cAAc,YAAA;AACtC0E,IAAAA,GAAS5F,aAAa,QAAQ,SAC9B4F,GAAS5F,aAAa,SAASlC,KAAK+H,KAAAA,GACpCD,GAAS5F,aAAa,QAAQ,UAC9B4F,GAAST,UAAUC,IAAI,OAAA,GACvBQ,GAAS5F,aAAa,SAAS;AAE/B,QAAI8F,KAAcnH,SAASuC,cAAc,KAAA;AACzC4E,IAAAA,GAAYX,UAAUC,IAAI;AAE1B,QAAIW,KAAepH,SAASuC,cAAc,KAAA;AAM1C,QALA6E,GAAaZ,UAAUC,IAAI,eAAA,GAE3BQ,GAASI,YAAYL,EAAAA,GACrBG,GAAYE,YAAYD,EAAAA,GAEpBjI,KAAKwC,aAAa,MAAA,KAAWxC,KAAKmI,MAAM;AACxC,UAAIA,KAAOtH,SAASuC,cAAc,UAAA;AAClC+E,MAAAA,GAAKjG,aAAa,QAAQlC,KAAKmI,OAC/BA,GAAKjG,aAAa,SAASlC,KAAK+H,QAChCI,GAAKjG,aAAa,QAAQ,OAAA,GAC1BiG,GAAKjG,aAAa,QAAQ,MAAA,GAE1BlC,KAAKkI,YAAYC,EAAAA;AAAAA,IACrB;AAcA,WAZAf,GAAOc,YAAYX,EAAAA,GACnBH,GAAOc,YAAYP,EAAAA,GAEf3H,KAAK0C,YAAU0E,GAAOc,YAAYJ,EAAAA,GAElC9H,KAAKwC,aAAa,WAAA,KAAc4E,GAAOc,YAAYF,EAAAA,GAEvDd,GAASgB,YAAYd,EAAAA,GAErBpH,KAAK8H,WAAWA,IAChB9H,KAAKiI,eAAeA,IAEbf;AAAAA,EACX;AAAA,EAKA,YAAAkB;AAKI,QAJApI,KAAK8H,SAAS/F,iBAAiB,oBAAoB/B,KAAKI,IAAAA,GACxDJ,KAAK+B,iBAAiB,cAAc/B,KAAKX,QACzCW,KAAK+B,iBAAiB,cAAc/B,KAAKV,MAAAA,GAErCU,KAAKwC,aAAa,WAAA,GAAc;AAChC,YAAM6F,KAAa,QACbC,KAAW;AAEjBtI,WAAKK,qBAAqBL,KAAKiI,aAAaM,QAAQ,CAAC,EAAEvE,OAAOqE,MAAc,EAAErE,OAAOsE,OAAa,EAC9F7F,UAAUzC,KAAKyC,UACf+F,QAAQ;IAEhB;AAEIxI,SAAKyC,WAAW,MAChBzC,KAAKyI,gBAAgBzI,KAAKyC,UAC1BzC,KAAK0I,WAAAA;AAAAA,EAEb;AAAA,EAMA,mBAAAC;;AACI3I,eAAK8H,aAAL9H,mBAAe4I,oBAAoB,oBAAoB5I,KAAKI,OAC5DJ,KAAK4I,oBAAoB,wBAAwB5I,KAAKgC,mBAAAA,GACtDhC,KAAK4I,oBAAoB,cAAc5I,KAAKX,KAAAA,GAC5CW,KAAK4I,oBAAoB,cAAc5I,KAAKV,SAE5CuJ,aAAa7I,KAAK8I;EACtB;AAAA,EASA;AACI9I,SAAK+I,YAAYC,KAAKC,IAAAA,GAClBjJ,KAAK8I,aACLD,aAAa7I,KAAK8I,SAAAA,GAEtB9I,KAAKkJ,uBACLlJ,KAAK8I,YAAYK,OAAOC,WAAW;AAC/BpJ,WAAKI,KAAAA;AAAAA,IAAAA,GACNJ,KAAKyI,aAAAA;AAAAA,EACZ;AAAA,EAOA,YAAAnI;AACI,QAAA,CAAKN,KAAK8I,aAAa9I,KAAKkJ,cACxB;AAGJC,WAAON,aAAa7I,KAAK8I,YACzB9I,KAAK8I,YAAY;AACjB,UAAMO,KAAcL,KAAKC,IAAAA,IAAQjJ,KAAK+I;AACtC/I,SAAKyI,gBAAgB7D,KAAKC,IAAI,GAAG7E,KAAKyI,gBAAgBY,EAAAA,GACtDrJ,KAAKkJ,gBAAAA;AAAAA,EACT;AAAA,EAOA;AACQlJ,SAAKkJ,iBAAiBlJ,KAAKyI,gBAAgB,KAC3CzI,KAAK0I,WAAAA;AAAAA,EAEb;AAAA,EA2DA,sBAAA1G;AACQhC,SAAKmB,kBAAkBnB,KAAKO,cAC5BP,KAAKO,WAAW+I,YAAYtJ,IAAAA,GAGhCA,KAAKO,WAAWc,MAAMC,YAAY,qCAAqC,IAAA,GACvEtB,KAAKO,WAAWc,MAAMC,YAAY,qCAAqC,IAAA,GACvEtB,KAAK0B,iBAAiB1B,KAAKO,aAE3BoB,sBAAsB,MAAA;AAClB3B,WAAKO,WAAWc,MAAMO,eAAe,mCAAA,GACrC5B,KAAKO,WAAWc,MAAMO,eAAe;QAGU,SAA/C5B,KAAKO,WAAWQ,cAAc,gBAC9Bf,KAAKO,WAAWmH;EAExB;;ACnwBJhI,EAAM6J,OAAO,aAAa7J,CAAAA;"}

package/dist/wje-toggle.js

@@ -5,217 +5,92 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var _internalValue;
-import { F as FormAssociatedElement } from "./form-associated-element-DEQ4y-jn.js";
-import { event } from "./event.js";
-const styles = "/*\n[ WJ Toggle ]\n*/\n\n:host {\n    --wje-toggle-color-base: var(--wje-color-contrast-3);\n    --wje-toggle-width: 30px;\n    --wje-toggle-height: 18px;\n    --wje-toggle-border-radius: 50px;\n    --wje-toggle-handle-width: 13px;\n    --wje-toggle-handle-height: 13px;\n    --wje-toggle-handle-border-radius: 9px;\n    --wje-toggle-handle-color: #fff;\n    --wje-toggle-handle-shadow: 1px 0 1px 0.5px rgba(0, 0, 0, 0.12), 2px 4px 6px rgba(0, 0, 0, 0.2);\n    --wje-toggle-handle-shadow-checked: 1px 1px 0 rgba(0, 0, 0, 0.08), -3px 3px 6px rgba(0, 0, 0, 0.3);\n    --wje-toggle-duration: 250ms;\n    --wje-toggle-curve: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n:host([color='primary']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-primary-9) !important;\n}\n\n:host([color='complete']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-complete-9);\n}\n\n:host([color='success']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-success-9) !important;\n}\n\n:host([color='warning']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-warning-9);\n}\n\n:host([color='danger']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-danger-9);\n}\n\n:host([color='info']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-info-9);\n}\n\n.native-toggle {\n\n    label {\n        display: flex;\n        cursor: pointer;\n        align-items: center;\n        user-select: none;\n\n        .label-wrapper {\n            width: var(--wje-toggle-width) !important;\n            min-width: var(--wje-toggle-width);\n            height: var(--wje-toggle-height);\n            position: relative;\n            display: flex;\n            align-items: center;\n\n            &:before {\n                content: '';\n                position: absolute;\n                cursor: pointer;\n                width: 100%;\n                height: 100%;\n                top: auto;\n                left: 0;\n                background: var(--wje-toggle-color-base);\n                background-size: 300%;\n                background-position: right;\n                border-radius: var(--wje-toggle-border-radius);\n                border: none;\n                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);\n                transition: background calc(var(--wje-toggle-duration) + (var(--wje-toggle-duration) * 0.24)),\n                box-shadow var(--wje-toggle-duration);\n                transition-timing-function: var(--wje-toggle-curve);\n            }\n\n            &:after {\n                content: '';\n                position: absolute;\n                transform: translateX(0%);\n                background: var(--wje-toggle-handle-color);\n                width: var(--wje-toggle-handle-width);\n                height: var(--wje-toggle-handle-height);\n                border-radius: var(--wje-toggle-handle-border-radius);\n                top: auto;\n                left: 2px;\n                box-shadow: var(--wje-toggle-handle-shadow);\n                transition: transform, box-shadow;\n                transition-duration: var(--wje-toggle-duration);\n                transition-timing-function: var(--wje-toggle-curve);\n            }\n        }\n    }\n\n    input[type='checkbox'][disabled] {\n        & + label {\n            cursor: not-allowed !important;\n            color: var(--wje-color-contrast-9);\n            opacity: 0.58;\n\n            &:before {\n                cursor: not-allowed !important;\n            }\n        }\n    }\n\n    input[type='checkbox'] {\n        position: absolute;\n        z-index: -1;\n        opacity: 0;\n\n        &:checked {\n            & + label {\n                .label-wrapper:before {\n                    background-position: left;\n                    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);\n                }\n\n                .label-wrapper:after {\n                    transform: translateX(calc(var(--wje-toggle-width) - var(--wje-toggle-handle-width) - 4px));\n                    box-shadow: var(--wje-toggle-handle-shadow-checked);\n                }\n            }\n        }\n\n        &:focus {\n            & + label {\n                .label-wrapper:before {\n                    outline: none !important;\n                    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12),\n                    0 0 0 0 #78c8fe;\n                }\n            }\n        }\n\n        &[disabled]:active {\n            & + label {\n                .label-wrapper:after {\n                    transform: scaleX(1.1);\n                    transform-origin: center left;\n                    transition: transform step-start;\n                }\n            }\n        }\n\n        &:checked {\n            &[disabled]:active {\n                & + label {\n                    .label-wrapper:after {\n                        transform: translateX(calc(100% - 6px)) scaleX(1.1);\n                        transform-origin: center right;\n                    }\n                }\n            }\n        }\n\n        &:hover {\n            &:active {\n                & + label {\n                    .label-wrapper:before {\n                        background-color: transparent;\n                    }\n                }\n            }\n        }\n    }\n}\n\n:host .text {\n    margin-inline: 0.5rem 0;\n}\n\n/*Placememt*/\n:host([placement='end']) {\n    label {\n        width: 100%;\n    }\n    .text {\n        margin-inline: 0 0.5rem;\n        width: 100%;\n    }\n}\n\n:host([invalid]) {\n    label{\n        color: var(--wje-input-color-invalid);\n    }\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    top: 0;\n    width: max-content;\n    line-height: normal;\n    position: static;\n    background: transparent;\n    padding: 0.25rem 0;\n    left: auto;\n    transform: none;\n    color: var(--wje-input-color-invalid);\n    font-size: 12px;\n}\n";
-class Toggle extends FormAssociatedElement {
+var _e;
+import { F as e } from "./form-associated-element-BjeJn7j8.js";
+import { event as t } from "./event.js";
+class a extends e {
   constructor() {
     super();
-    __privateAdd(this, _internalValue);
-    this.invalid = false;
-    this.pristine = true;
-  }
-  /**
-   * Setter for the value attribute.
-   * @param {string} value The value to set.
-   */
-  set value(value) {
-    __privateSet(this, _internalValue, value);
-    if (this.input) {
-      this.input.value = value;
-    }
+    __privateAdd(this, _e);
+    this.invalid = false, this.pristine = true;
+  }
+  set value(e2) {
+    __privateSet(this, _e, e2), this.input && (this.input.value = e2);
   }
-  /**
-   * Getter for the value attribute.
-   * @returns {string} The value of the attribute.
-   */
   get value() {
-    return __privateGet(this, _internalValue) ?? this.getAttribute("value") ?? "on";
+    return __privateGet(this, _e) ?? this.getAttribute("value") ?? "on";
   }
-  /**
-   * Getter for the customErrorDisplay attribute.
-   * @returns {boolean} Whether the attribute is present.
-   */
   get customErrorDisplay() {
     return this.hasAttribute("custom-error-display");
   }
-  /**
-   * Getter for the validateOnChange attribute.
-   * @returns {boolean} Whether the attribute is present.
-   */
   get validateOnChange() {
     return this.hasAttribute("validate-on-change");
   }
-  /**
-   * Setter for the defaultValue attribute.
-   * This method sets the 'value' attribute of the custom input element to the provided value.
-   * The 'value' attribute represents the default value of the input element.
-   * @param {string} value The value to set as the default value.
-   */
-  set defaultValue(value) {
-    this.setAttribute("value", value);
-  }
-  /**
-   * Getter for the defaultValue attribute.
-   * This method retrieves the 'value' attribute of the custom input element.
-   * The 'value' attribute represents the default value of the input element.
-   * If the 'value' attribute is not set, it returns an empty string.
-   * @returns {string} The default value of the input element.
-   */
+  set defaultValue(e2) {
+    this.setAttribute("value", e2);
+  }
   get defaultValue() {
     return this.getAttribute("value") ?? "";
   }
-  /**
-   * Set checked attribute.
-   * @param {boolean} value true if the toggle is checked, false otherwise
-   */
-  set checked(value) {
-    if (value) {
-      this.setAttribute("checked", "");
-      this.internals.setFormValue(this.value);
-    } else {
-      this.removeAttribute("checked");
-      this.internals.setFormValue(null);
-    }
-    if (this.input) {
-      this.input.checked = value;
-    }
+  set checked(e2) {
+    e2 ? (this.setAttribute("checked", ""), this.internals.setFormValue(this.value)) : (this.removeAttribute("checked"), this.internals.setFormValue(null)), this.input && (this.input.checked = e2);
   }
-  /**
-   * Get checked attribute.
-   * @returns {boolean} true if the toggle is checked, false otherwise
-   */
   get checked() {
     return this.hasAttribute("checked");
   }
   static get cssStyleSheet() {
-    return styles;
+    return ':host{--wje-toggle-color-base: var(--wje-color-contrast-3);--wje-toggle-width: 30px;--wje-toggle-height: 18px;--wje-toggle-border-radius: 50px;--wje-toggle-handle-width: 13px;--wje-toggle-handle-height: 13px;--wje-toggle-handle-border-radius: 9px;--wje-toggle-handle-color: #fff;--wje-toggle-handle-shadow: 1px 0 1px .5px rgba(0, 0, 0, .12), 2px 4px 6px rgba(0, 0, 0, .2);--wje-toggle-handle-shadow-checked: 1px 1px 0 rgba(0, 0, 0, .08), -3px 3px 6px rgba(0, 0, 0, .3);--wje-toggle-duration: .25s;--wje-toggle-curve: cubic-bezier(.4, 0, .2, 1)}:host([color="primary"]) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-primary-9) !important}:host([color="complete"]) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-complete-9)}:host([color="success"]) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-success-9) !important}:host([color="warning"]) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-warning-9)}:host([color="danger"]) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-danger-9)}:host([color="info"]) input:checked+label>.label-wrapper{--wje-toggle-color-base: var(--wje-color-info-9)}.native-toggle label{display:flex;cursor:pointer;align-items:center;-webkit-user-select:none;user-select:none}.native-toggle label .label-wrapper{width:var(--wje-toggle-width)!important;min-width:var(--wje-toggle-width);height:var(--wje-toggle-height);position:relative;display:flex;align-items:center}.native-toggle label .label-wrapper:before{content:"";position:absolute;cursor:pointer;width:100%;height:100%;top:auto;left:0;background:var(--wje-toggle-color-base);background-size:300%;background-position:right;border-radius:var(--wje-toggle-border-radius);border:none;box-shadow:inset 0 0 0 1px #0000001f;transition:background calc(var(--wje-toggle-duration) + (var(--wje-toggle-duration) * .24)),box-shadow var(--wje-toggle-duration);transition-timing-function:var(--wje-toggle-curve)}.native-toggle label .label-wrapper:after{content:"";position:absolute;transform:translate(0);background:var(--wje-toggle-handle-color);width:var(--wje-toggle-handle-width);height:var(--wje-toggle-handle-height);border-radius:var(--wje-toggle-handle-border-radius);top:auto;left:2px;box-shadow:var(--wje-toggle-handle-shadow);transition:transform,box-shadow;transition-duration:var(--wje-toggle-duration);transition-timing-function:var(--wje-toggle-curve)}.native-toggle input[type=checkbox][disabled]+label{cursor:not-allowed!important;color:var(--wje-color-contrast-9);opacity:.58}.native-toggle input[type=checkbox][disabled]+label:before{cursor:not-allowed!important}.native-toggle input[type=checkbox]{position:absolute;z-index:-1;opacity:0}.native-toggle input[type=checkbox]:checked+label .label-wrapper:before{background-position:left;box-shadow:inset 0 0 0 1px #0000001f}.native-toggle input[type=checkbox]:checked+label .label-wrapper:after{transform:translate(calc(var(--wje-toggle-width) - var(--wje-toggle-handle-width) - 4px));box-shadow:var(--wje-toggle-handle-shadow-checked)}.native-toggle input[type=checkbox]:focus+label .label-wrapper:before{outline:none!important;box-shadow:inset 0 0 0 1px #0000001f,0 0 #78c8fe}.native-toggle input[type=checkbox][disabled]:active+label .label-wrapper:after{transform:scaleX(1.1);transform-origin:center left;transition:transform step-start}.native-toggle input[type=checkbox]:checked[disabled]:active+label .label-wrapper:after{transform:translate(calc(100% - 6px)) scaleX(1.1);transform-origin:center right}.native-toggle input[type=checkbox]:hover:active+label .label-wrapper:before{background-color:transparent}:host .text{margin-inline:.5rem 0}:host([placement="end"]) label{width:100%}:host([placement="end"]) .text{margin-inline:0 .5rem;width:100%}:host([invalid]) label{color:var(--wje-input-color-invalid)}slot[name=error]{display:none}:host([invalid]) slot[name=error]{display:block}slot[name=error]{display:none;max-width:100%;min-width:auto;border-radius:50px;top:0;width:max-content;line-height:normal;position:static;background:transparent;padding:.25rem 0;left:auto;transform:none;color:var(--wje-input-color-invalid);font-size:12px}';
   }
   static get observedAttributes() {
     return ["checked", "disabled", "required"];
   }
   setupAttributes() {
-    this.isShadowRoot = "open";
-    if (this.pristine) {
-      this.value = __privateGet(this, _internalValue);
-      this.pristine = false;
-    }
-    this.syncAria();
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (!this.input) return;
-    if (name === "checked") {
-      const isChecked = this.hasAttribute("checked");
-      this.input.checked = isChecked;
-      if (isChecked) {
-        this.internals.setFormValue(this.value);
-      } else {
-        this.internals.setFormValue(null);
-      }
-    } else if (name === "disabled") {
-      this.input.disabled = this.hasAttribute("disabled");
-    } else if (name === "indeterminate") {
-      this.input.indeterminate = this.hasAttribute("indeterminate");
-    } else if (name === "value") {
-      __privateSet(this, _internalValue, newValue ?? void 0);
-      this.input.value = this.value;
-      if (this.input.checked) {
-        this.internals.setFormValue(this.value);
-      }
+    this.isShadowRoot = "open", this.pristine && (this.value = __privateGet(this, _e), this.pristine = false), this.syncAria();
+  }
+  attributeChangedCallback(e2, t2, a2) {
+    if (this.input) {
+      if ("checked" === e2) {
+        const e3 = this.hasAttribute("checked");
+        this.input.checked = e3, e3 ? this.internals.setFormValue(this.value) : this.internals.setFormValue(null);
+      } else "disabled" === e2 ? this.input.disabled = this.hasAttribute("disabled") : "indeterminate" === e2 ? this.input.indeterminate = this.hasAttribute("indeterminate") : "value" === e2 && (__privateSet(this, _e, a2 ?? void 0), this.input.value = this.value, this.input.checked && this.internals.setFormValue(this.value));
+      this.syncAria();
     }
-    this.syncAria();
   }
   draw() {
-    const fragment = document.createDocumentFragment();
-    const native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-toggle");
-    const input = document.createElement("input");
-    input.setAttribute("part", "input");
-    input.type = "checkbox";
-    input.name = this.name;
-    input.id = "input";
-    input.checked = this.hasAttribute("checked");
-    input.disabled = this.hasAttribute("disabled");
-    if (this.hasAttribute("required")) input.required = true;
-    const label = document.createElement("label");
-    label.setAttribute("for", "input");
-    const toggle = document.createElement("div");
-    toggle.setAttribute("part", "toggle");
-    toggle.classList.add("label-wrapper");
-    const text = document.createElement("div");
-    text.classList.add("text");
-    text.innerHTML = "<slot></slot>";
-    let errorSlot = document.createElement("slot");
-    errorSlot.setAttribute("name", "error");
-    let error = document.createElement("div");
-    error.setAttribute("slot", "error");
-    if (this.placement === "end") {
-      native.classList.add("end");
-      label.appendChild(text);
-      label.appendChild(toggle);
-    } else {
-      label.appendChild(toggle);
-      label.appendChild(text);
-    }
-    native.appendChild(input);
-    native.appendChild(label);
-    native.append(errorSlot);
-    this.append(error);
-    fragment.appendChild(native);
-    this.input = input;
-    return fragment;
+    const e2 = document.createDocumentFragment(), t2 = document.createElement("div");
+    t2.setAttribute("part", "native"), t2.classList.add("native-toggle");
+    const a2 = document.createElement("input");
+    a2.setAttribute("part", "input"), a2.type = "checkbox", a2.name = this.name, a2.id = "input", a2.checked = this.hasAttribute("checked"), a2.disabled = this.hasAttribute("disabled"), this.hasAttribute("required") && (a2.required = true);
+    const i = document.createElement("label");
+    i.setAttribute("for", "input");
+    const r = document.createElement("div");
+    r.setAttribute("part", "toggle"), r.classList.add("label-wrapper");
+    const o = document.createElement("div");
+    o.classList.add("text"), o.innerHTML = "<slot></slot>";
+    let l = document.createElement("slot");
+    l.setAttribute("name", "error");
+    let n = document.createElement("div");
+    return n.setAttribute("slot", "error"), "end" === this.placement ? (t2.classList.add("end"), i.appendChild(o), i.appendChild(r)) : (i.appendChild(r), i.appendChild(o)), t2.appendChild(a2), t2.appendChild(i), t2.append(l), this.append(n), e2.appendChild(t2), this.input = a2, e2;
   }
   afterDraw() {
-    this.internals.setFormValue(this.checked ? this.value : null);
-    this.syncAria();
-    if (!this.disabled) {
-      this.input.addEventListener("input", (e) => {
-        this.validate();
-        this.pristine = false;
-        this.propagateValidation();
-        this.indeterminate = false;
-        this.checked = e.target.checked;
-        this.syncAria();
-        event.dispatchCustomEvent(this, "wje-toggle:input");
-      });
-      this.input.addEventListener("change", (e) => {
-        event.dispatchCustomEvent(this, "wje-toggle:change");
-      });
-      this.addEventListener("invalid", (e) => {
-        this.invalid = true;
-        this.pristine = false;
-        this.showInvalidMessage();
-      });
-      this.validate();
-      if (this.invalid) {
-        this.showInvalidMessage();
-      }
-    }
+    this.internals.setFormValue(this.checked ? this.value : null), this.syncAria(), this.disabled || (this.input.addEventListener("input", (e2) => {
+      this.validate(), this.pristine = false, this.propagateValidation(), this.indeterminate = false, this.checked = e2.target.checked, this.syncAria(), t.dispatchCustomEvent(this, "wje-toggle:input");
+    }), this.input.addEventListener("change", (e2) => {
+      t.dispatchCustomEvent(this, "wje-toggle:change");
+    }), this.addEventListener("invalid", (e2) => {
+      this.invalid = true, this.pristine = false, this.showInvalidMessage();
+    }), this.validate(), this.invalid && this.showInvalidMessage());
   }
-  /**
-   * Syncs ARIA attributes on the host element.
-   */
   syncAria() {
-    this.setAriaState({
-      role: "switch",
-      checked: this.checked,
-      disabled: this.disabled,
-      required: this.required,
-      invalid: this.invalid
-    });
-  }
-  /**
-   * Removes the event listener when the checkbox is disconnected.
-   */
+    this.setAriaState({ role: "switch", checked: this.checked, disabled: this.disabled, required: this.required, invalid: this.invalid });
+  }
   beforeDisconnect() {
-    event.removeElement(this.input);
+    t.removeElement(this.input);
   }
 }
-_internalValue = new WeakMap();
-Toggle.define("wje-toggle", Toggle);
+_e = new WeakMap();
+a.define("wje-toggle", a);
 export {
-  Toggle as default
+  a as default
 };
 //# sourceMappingURL=wje-toggle.js.map

package/dist/wje-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-toggle.js","sources":["../packages/wje-toggle/toggle.element.js","../packages/wje-toggle/toggle.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\n\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Toggle` is a custom web component that represents a toggle input.\n * @summary This element represents a toggle input.\n * @documentation https://elements.webjet.sk/components/toggle\n * @status stable\n * @augments {FormAssociatedElement}\n * @csspart native - The native toggle wrapper.\n * @csspart input - The toggle input.\n * @csspart toggle - The toggle part.\n * @slot - The default slot for the toggle.\n * @cssproperty [--wje-toggle-color-base=var(--wje-color-contrast-3)] - The base background color of the toggle. Defines the default background color when the toggle is in an unselected state.\n * @cssproperty [--wje-toggle-width=30px] - The overall width of the toggle switch. Determines how wide the toggle component appears.\n * @cssproperty [--wje-toggle-height=18px] - The overall height of the toggle switch. Specifies how tall the toggle component appears.\n * @cssproperty [--wje-toggle-border-radius=50px] - The border radius of the toggle. Controls how rounded the corners of the toggle are.\n * @cssproperty [--wje-toggle-handle-width=14px] - The width of the toggle handle (knob). Determines the size of the handle for user interaction.\n * @cssproperty [--wje-toggle-handle-height=14px] - The height of the toggle handle (knob). Specifies the vertical size of the handle.\n * @cssproperty [--wje-toggle-handle-border-radius=9px] - The border radius of the toggle handle. Controls how rounded the handle is.\n * @cssproperty [--wje-toggle-handle-color=#fff] - The color of the toggle handle. Accepts any valid CSS color, such as `hex`, `rgb`, or `css variable`.\n * @cssproperty [--wje-toggle-handle-shadow=1px 0 1px 0.5px rgba(0,0,0,0.12), 2px 4px 6px rgba(0,0,0,0.2)] - The shadow applied to the toggle handle. Adds a subtle shadow effect for better visual clarity.\n * @cssproperty [--wje-toggle-handle-shadow-checked=1px 1px 0 rgba(0,0,0,0.08), -3px 3px 6px rgba(0,0,0,0.3)] - The shadow applied to the toggle handle when it is in the checked (on) state. Provides visual feedback to indicate the toggle state.\n * @cssproperty [--wje-toggle-duration=250ms] - The duration of the toggle animation in milliseconds. Controls how long the toggle animation lasts during state changes.\n * @cssproperty [--wje-toggle-curve=cubic-bezier(.4,0,.2,1)] - The easing curve used for the toggle animation. Defines the speed curve for the animation, enhancing the user experience with smooth transitions.\n * @tag wje-toggle\n */\n\nexport default class Toggle extends FormAssociatedElement {\n    #internalValue;\n\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.#internalValue = value;\n        if (this.input) {\n            this.input.value = value;\n        }\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.#internalValue ?? this.getAttribute('value') ?? 'on';\n    }\n\n    /**\n     * Getter for the customErrorDisplay attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get customErrorDisplay() {\n        return this.hasAttribute('custom-error-display');\n    }\n\n    /**\n     * Getter for the validateOnChange attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get validateOnChange() {\n        return this.hasAttribute('validate-on-change');\n    }\n\n    /**\n     * Setter for the defaultValue attribute.\n     * This method sets the 'value' attribute of the custom input element to the provided value.\n     * The 'value' attribute represents the default value of the input element.\n     * @param {string} value The value to set as the default value.\n     */\n    set defaultValue(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Getter for the defaultValue attribute.\n     * This method retrieves the 'value' attribute of the custom input element.\n     * The 'value' attribute represents the default value of the input element.\n     * If the 'value' attribute is not set, it returns an empty string.\n     * @returns {string} The default value of the input element.\n     */\n    get defaultValue() {\n        return this.getAttribute('value') ?? '';\n    }\n\n    /**\n     * Set checked attribute.\n     * @param {boolean} value true if the toggle is checked, false otherwise\n     */\n    set checked(value) {\n        if (value) {\n            this.setAttribute('checked', '');\n            this.internals.setFormValue(this.value); // len ak je checked\n        } else {\n            this.removeAttribute('checked');\n            this.internals.setFormValue(null); // ak nie je checked, nič sa neposiela\n        }\n        if (this.input) {\n            this.input.checked = value;\n        }\n    }\n\n    /**\n     * Get checked attribute.\n     * @returns {boolean} true if the toggle is checked, false otherwise\n     */\n    get checked() {\n        return this.hasAttribute('checked');\n    }\n\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    static get observedAttributes() {\n        return ['checked', 'disabled', 'required'];\n    }\n\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        // if some value was set via value setter then dont use default value\n        if (this.pristine) {\n            this.value = this.#internalValue;\n            this.pristine = false;\n        }\n        this.syncAria();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (!this.input) return;\n        if (name === 'checked') {\n            const isChecked = this.hasAttribute('checked');\n            this.input.checked = isChecked;\n            // Reflect into form value\n            if (isChecked) {\n                this.internals.setFormValue(this.value);\n            } else {\n                this.internals.setFormValue(null);\n            }\n        } else if (name === 'disabled') {\n            this.input.disabled = this.hasAttribute('disabled');\n        } else if (name === 'indeterminate') {\n            this.input.indeterminate = this.hasAttribute('indeterminate');\n        } else if (name === 'value') {\n            // keep payload in sync; do not toggle checked here\n            this.#internalValue = newValue ?? undefined;\n            this.input.value = this.value;\n            // If currently checked, update the submitted payload\n            if (this.input.checked) {\n                this.internals.setFormValue(this.value);\n            }\n        }\n        this.syncAria();\n    }\n\n    draw() {\n        const fragment = document.createDocumentFragment();\n\n        const native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-toggle');\n\n        const input = document.createElement('input');\n        input.setAttribute('part', 'input');\n        input.type = 'checkbox';\n        input.name = this.name;\n        input.id = 'input';\n        input.checked = this.hasAttribute('checked');\n        input.disabled = this.hasAttribute('disabled');\n        if (this.hasAttribute('required')) input.required = true;\n\n        const label = document.createElement('label');\n        label.setAttribute('for', 'input');\n\n        const toggle = document.createElement('div');\n        toggle.setAttribute('part', 'toggle');\n        toggle.classList.add('label-wrapper');\n\n        const text = document.createElement('div');\n        text.classList.add('text');\n        text.innerHTML = '<slot></slot>';\n\n        // Error\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        // APPEND\n        if (this.placement === 'end') {\n            native.classList.add('end');\n            label.appendChild(text);\n            label.appendChild(toggle);\n        } else {\n            label.appendChild(toggle);\n            label.appendChild(text);\n        }\n\n        native.appendChild(input);\n        native.appendChild(label);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        fragment.appendChild(native);\n\n        this.input = input;\n\n        return fragment;\n    }\n\n    afterDraw() {\n        this.internals.setFormValue(this.checked ? this.value : null); // Set initial form value based on checked state\n        this.syncAria();\n\n        if (!this.disabled) {\n            this.input.addEventListener('input', (e) => {\n                this.validate();\n\n                this.pristine = false;\n                this.propagateValidation();\n\n                this.indeterminate = false;\n                this.checked = e.target.checked;\n                this.syncAria();\n\n                event.dispatchCustomEvent(this, 'wje-toggle:input');\n            });\n\n            this.input.addEventListener('change', (e) => {\n                event.dispatchCustomEvent(this, 'wje-toggle:change');\n            });\n\n            this.addEventListener('invalid', (e) => {\n                this.invalid = true;\n                this.pristine = false;\n\n                this.showInvalidMessage();\n            });\n\n            this.validate();\n\n            if (this.invalid) {\n                this.showInvalidMessage();\n            }\n        }\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        this.setAriaState({\n            role: 'switch',\n            checked: this.checked,\n            disabled: this.disabled,\n            required: this.required,\n            invalid: this.invalid,\n        });\n    }\n\n    /**\n     * Removes the event listener when the checkbox is disconnected.\n     */\n    beforeDisconnect() {\n        event.removeElement(this.input);\n    }\n}\n","import Toggle from './toggle.element.js';\n\nexport default Toggle;\n\nToggle.define('wje-toggle', Toggle);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-toggle.js","sources":["../packages/wje-toggle/toggle.element.js","../packages/wje-toggle/toggle.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\n\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Toggle` is a custom web component that represents a toggle input.\n * @summary This element represents a toggle input.\n * @documentation https://elements.webjet.sk/components/toggle\n * @status stable\n * @augments {FormAssociatedElement}\n * @csspart native - The native toggle wrapper.\n * @csspart input - The toggle input.\n * @csspart toggle - The toggle part.\n * @slot - The default slot for the toggle.\n * @cssproperty [--wje-toggle-color-base=var(--wje-color-contrast-3)] - The base background color of the toggle. Defines the default background color when the toggle is in an unselected state.\n * @cssproperty [--wje-toggle-width=30px] - The overall width of the toggle switch. Determines how wide the toggle component appears.\n * @cssproperty [--wje-toggle-height=18px] - The overall height of the toggle switch. Specifies how tall the toggle component appears.\n * @cssproperty [--wje-toggle-border-radius=50px] - The border radius of the toggle. Controls how rounded the corners of the toggle are.\n * @cssproperty [--wje-toggle-handle-width=14px] - The width of the toggle handle (knob). Determines the size of the handle for user interaction.\n * @cssproperty [--wje-toggle-handle-height=14px] - The height of the toggle handle (knob). Specifies the vertical size of the handle.\n * @cssproperty [--wje-toggle-handle-border-radius=9px] - The border radius of the toggle handle. Controls how rounded the handle is.\n * @cssproperty [--wje-toggle-handle-color=#fff] - The color of the toggle handle. Accepts any valid CSS color, such as `hex`, `rgb`, or `css variable`.\n * @cssproperty [--wje-toggle-handle-shadow=1px 0 1px 0.5px rgba(0,0,0,0.12), 2px 4px 6px rgba(0,0,0,0.2)] - The shadow applied to the toggle handle. Adds a subtle shadow effect for better visual clarity.\n * @cssproperty [--wje-toggle-handle-shadow-checked=1px 1px 0 rgba(0,0,0,0.08), -3px 3px 6px rgba(0,0,0,0.3)] - The shadow applied to the toggle handle when it is in the checked (on) state. Provides visual feedback to indicate the toggle state.\n * @cssproperty [--wje-toggle-duration=250ms] - The duration of the toggle animation in milliseconds. Controls how long the toggle animation lasts during state changes.\n * @cssproperty [--wje-toggle-curve=cubic-bezier(.4,0,.2,1)] - The easing curve used for the toggle animation. Defines the speed curve for the animation, enhancing the user experience with smooth transitions.\n * @tag wje-toggle\n */\n\nexport default class Toggle extends FormAssociatedElement {\n    #internalValue;\n\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.#internalValue = value;\n        if (this.input) {\n            this.input.value = value;\n        }\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.#internalValue ?? this.getAttribute('value') ?? 'on';\n    }\n\n    /**\n     * Getter for the customErrorDisplay attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get customErrorDisplay() {\n        return this.hasAttribute('custom-error-display');\n    }\n\n    /**\n     * Getter for the validateOnChange attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get validateOnChange() {\n        return this.hasAttribute('validate-on-change');\n    }\n\n    /**\n     * Setter for the defaultValue attribute.\n     * This method sets the 'value' attribute of the custom input element to the provided value.\n     * The 'value' attribute represents the default value of the input element.\n     * @param {string} value The value to set as the default value.\n     */\n    set defaultValue(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Getter for the defaultValue attribute.\n     * This method retrieves the 'value' attribute of the custom input element.\n     * The 'value' attribute represents the default value of the input element.\n     * If the 'value' attribute is not set, it returns an empty string.\n     * @returns {string} The default value of the input element.\n     */\n    get defaultValue() {\n        return this.getAttribute('value') ?? '';\n    }\n\n    /**\n     * Set checked attribute.\n     * @param {boolean} value true if the toggle is checked, false otherwise\n     */\n    set checked(value) {\n        if (value) {\n            this.setAttribute('checked', '');\n            this.internals.setFormValue(this.value); // len ak je checked\n        } else {\n            this.removeAttribute('checked');\n            this.internals.setFormValue(null); // ak nie je checked, nič sa neposiela\n        }\n        if (this.input) {\n            this.input.checked = value;\n        }\n    }\n\n    /**\n     * Get checked attribute.\n     * @returns {boolean} true if the toggle is checked, false otherwise\n     */\n    get checked() {\n        return this.hasAttribute('checked');\n    }\n\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    static get observedAttributes() {\n        return ['checked', 'disabled', 'required'];\n    }\n\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        // if some value was set via value setter then dont use default value\n        if (this.pristine) {\n            this.value = this.#internalValue;\n            this.pristine = false;\n        }\n        this.syncAria();\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (!this.input) return;\n        if (name === 'checked') {\n            const isChecked = this.hasAttribute('checked');\n            this.input.checked = isChecked;\n            // Reflect into form value\n            if (isChecked) {\n                this.internals.setFormValue(this.value);\n            } else {\n                this.internals.setFormValue(null);\n            }\n        } else if (name === 'disabled') {\n            this.input.disabled = this.hasAttribute('disabled');\n        } else if (name === 'indeterminate') {\n            this.input.indeterminate = this.hasAttribute('indeterminate');\n        } else if (name === 'value') {\n            // keep payload in sync; do not toggle checked here\n            this.#internalValue = newValue ?? undefined;\n            this.input.value = this.value;\n            // If currently checked, update the submitted payload\n            if (this.input.checked) {\n                this.internals.setFormValue(this.value);\n            }\n        }\n        this.syncAria();\n    }\n\n    draw() {\n        const fragment = document.createDocumentFragment();\n\n        const native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-toggle');\n\n        const input = document.createElement('input');\n        input.setAttribute('part', 'input');\n        input.type = 'checkbox';\n        input.name = this.name;\n        input.id = 'input';\n        input.checked = this.hasAttribute('checked');\n        input.disabled = this.hasAttribute('disabled');\n        if (this.hasAttribute('required')) input.required = true;\n\n        const label = document.createElement('label');\n        label.setAttribute('for', 'input');\n\n        const toggle = document.createElement('div');\n        toggle.setAttribute('part', 'toggle');\n        toggle.classList.add('label-wrapper');\n\n        const text = document.createElement('div');\n        text.classList.add('text');\n        text.innerHTML = '<slot></slot>';\n\n        // Error\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        // APPEND\n        if (this.placement === 'end') {\n            native.classList.add('end');\n            label.appendChild(text);\n            label.appendChild(toggle);\n        } else {\n            label.appendChild(toggle);\n            label.appendChild(text);\n        }\n\n        native.appendChild(input);\n        native.appendChild(label);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        fragment.appendChild(native);\n\n        this.input = input;\n\n        return fragment;\n    }\n\n    afterDraw() {\n        this.internals.setFormValue(this.checked ? this.value : null); // Set initial form value based on checked state\n        this.syncAria();\n\n        if (!this.disabled) {\n            this.input.addEventListener('input', (e) => {\n                this.validate();\n\n                this.pristine = false;\n                this.propagateValidation();\n\n                this.indeterminate = false;\n                this.checked = e.target.checked;\n                this.syncAria();\n\n                event.dispatchCustomEvent(this, 'wje-toggle:input');\n            });\n\n            this.input.addEventListener('change', (e) => {\n                event.dispatchCustomEvent(this, 'wje-toggle:change');\n            });\n\n            this.addEventListener('invalid', (e) => {\n                this.invalid = true;\n                this.pristine = false;\n\n                this.showInvalidMessage();\n            });\n\n            this.validate();\n\n            if (this.invalid) {\n                this.showInvalidMessage();\n            }\n        }\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        this.setAriaState({\n            role: 'switch',\n            checked: this.checked,\n            disabled: this.disabled,\n            required: this.required,\n            invalid: this.invalid,\n        });\n    }\n\n    /**\n     * Removes the event listener when the checkbox is disconnected.\n     */\n    beforeDisconnect() {\n        event.removeElement(this.input);\n    }\n}\n","import Toggle from './toggle.element.js';\n\nexport default Toggle;\n\nToggle.define('wje-toggle', Toggle);\n"],"names":["Toggle","FormAssociatedElement","constructor","super","internalValue","this","invalid","pristine","value","input","getAttribute","customErrorDisplay","hasAttribute","validateOnChange","setAttribute","defaultValue","internals","setFormValue","removeAttribute","checked","cssStyleSheet","observedAttributes","isShadowRoot","syncAria","name","oldValue","newValue","isChecked","disabled","indeterminate","draw","fragment","document","createDocumentFragment","native","createElement","classList","add","type","id","required","label","toggle","text","innerHTML","errorSlot","error","placement","appendChild","append","afterDraw","addEventListener","e","validate","propagateValidation","target","event","dispatchCustomEvent","showInvalidMessage","setAriaState","role","beforeDisconnect","removeElement","define"],"mappings":"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"}