@uh-design-system/component-library 1.4.0-rc.2 → 1.4.0-rc.3

package/dist/components/ds-media.js

@@ -1,254 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-GalXVdFP.js';
-import { c as cx } from './p-C34PGDVY.js';
-import { a as ifDefined, t as transformTagName, d as declareComponentDependencies } from './p-J5Ghj1_T.js';
-import { i as inheritAriaAttributes, a as inheritAttributes } from './p-BecId8t2.js';
-import { g as getLanguage } from './p-B71giUZh.js';
-import { d as defineCustomElement$4 } from './p-DIxFOW85.js';
-import { d as defineCustomElement$3 } from './p-Dq55XDgV.js';
-import { d as defineCustomElement$2 } from './p-Cq_RwLX7.js';
-
-const dsMediaCss = ".ds-media__oSBnIJ{position:relative;width:100%;height:auto;overflow:hidden;background-color:var(--ds-palette-black-05)}.ds-media__oSBnIJ .ds-media__image,.ds-media__oSBnIJ .ds-media__video,.ds-media__oSBnIJ .ds-media__youtube{width:100%;height:100%;object-fit:cover;display:block;max-height:var(--horizontal-image-max-height, auto);aspect-ratio:var(--ds-media-aspect-ratio)}.ds-media__oSBnIJ .ds-media__image--fluid,.ds-media__oSBnIJ .ds-media__video--fluid,.ds-media__oSBnIJ .ds-media__youtube--fluid{aspect-ratio:unset}.ds-media__oSBnIJ__youtube{border:none;object-fit:initial}.ds-media__oSBnIJ--loading .ds-media__image,.ds-media__oSBnIJ--loading .ds-media__video{opacity:0}.ds-media__oSBnIJ--error{aspect-ratio:var(--ds-media-aspect-ratio)}.ds-media__oSBnIJ--error .ds-media__image,.ds-media__oSBnIJ--error .ds-media__video{display:none}.ds-media__oSBnIJ--error .ds-media__error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background-color:var(--ds-bgColor-secondary);color:var(--ds-bgColor-danger-bold);z-index:1;padding:16px;text-align:center}.ds-media__oSBnIJ--error .ds-media__error-icon{width:48px;height:48px;color:var(--ds-bgColor-danger-bold);flex-shrink:0}.ds-media__oSBnIJ--error .ds-media__error-text{font-size:14px;font-weight:500;line-height:1.4}.ds-media__oSBnIJ--image .ds-media__image{transition:opacity 0.3s ease}.ds-media__oSBnIJ--video .ds-media__video{transition:opacity 0.3s ease}.ds-media__oSBnIJ--youtube .ds-media__youtube{transition:opacity 0.3s ease}.ds-media__oSBnIJ--fluid{width:100%;height:100%}.ds-media__oSBnIJ--fluid .ds-media__oSBnIJ__image,.ds-media__oSBnIJ--fluid .ds-media__oSBnIJ__video,.ds-media__oSBnIJ--fluid .ds-media__oSBnIJ__youtube{width:100%;height:100%;object-fit:cover}@media (max-width: 768px){.ds-media__oSBnIJ{border-radius:2px}.ds-media__oSBnIJ__loading-spinner{width:24px;height:24px;border-width:2px}.ds-media__oSBnIJ__loading-text{font-size:12px}.ds-media__oSBnIJ__error-icon{width:40px;height:40px}.ds-media__oSBnIJ__error-text{font-size:12px}}";
-
-const DsMedia$1 = proxyCustomElement(class DsMedia extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.dsLoad = createEvent(this, "dsLoad");
-        this.dsError = createEvent(this, "dsError");
-    }
-    inheritedAttributes = {};
-    dsSrc;
-    dsType;
-    dsAlt;
-    dsPoster;
-    dsAutoplay = false;
-    dsLoop = false;
-    dsMuted = true;
-    dsUseLazy = true;
-    dsAspectRatio = '';
-    dsFluid = false;
-    get el() { return this; }
-    isLoading = true;
-    hasError = false;
-    errorMessage = '';
-    dsLoad;
-    dsError;
-    componentWillLoad() {
-        this.inheritedAttributes = {
-            ...inheritAttributes(this, this.el),
-            ...inheritAriaAttributes(this.el, this.dsType === 'video' ? ['aria-label'] : []),
-        };
-    }
-    onSrcChange() {
-        this.resetState();
-    }
-    onTypeChange() {
-        this.resetState();
-    }
-    get defaultLoadError() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Median lataus epäonnistui';
-            case 'sv':
-                return 'Media laddning misslyckades';
-            default:
-                return 'Failed to load media';
-        }
-    }
-    get loadAbortedError() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Median lataus keskeytettiin';
-            case 'sv':
-                return 'Media laddning avbröts';
-            default:
-                return 'Media loading aborted';
-        }
-    }
-    get loadNetworkError() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Verkkovirhe tapahtui';
-            case 'sv':
-                return 'Nätverksfel uppstod';
-            default:
-                return 'Network error occurred';
-        }
-    }
-    get loadDecodeError() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Median dekoodaus epäonnistui';
-            case 'sv':
-                return 'Mediaavkodning misslyckades';
-            default:
-                return 'Media decoding failed';
-        }
-    }
-    get formatError() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Median formaatti ei ole tuettu';
-            case 'sv':
-                return 'Mediaformatet stöds inte';
-            default:
-                return 'Media format not supported';
-        }
-    }
-    resetState() {
-        this.isLoading = true;
-        this.hasError = false;
-        this.errorMessage = '';
-    }
-    handleLoad = () => {
-        this.isLoading = false;
-        this.hasError = false;
-        this.dsLoad.emit();
-    };
-    handleError = (event) => {
-        this.isLoading = false;
-        this.hasError = true;
-        let errorMessage = this.defaultLoadError;
-        const target = event.target;
-        if (target.error) {
-            switch (target.error.code) {
-                case target.error.MEDIA_ERR_ABORTED:
-                    errorMessage = this.loadAbortedError;
-                    break;
-                case target.error.MEDIA_ERR_NETWORK:
-                    errorMessage = this.loadNetworkError;
-                    break;
-                case target.error.MEDIA_ERR_DECODE:
-                    errorMessage = this.loadDecodeError;
-                    break;
-                case target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
-                    errorMessage = this.formatError;
-                    break;
-            }
-        }
-        this.errorMessage = errorMessage;
-        this.dsError.emit(errorMessage);
-    };
-    getYouTubeEmbedUrl(url) {
-        const regexes = [
-            /(?:youtube\.com\/watch\?v=|youtube\.com\/embed\/|youtu\.be\/|youtube\.com\/v\/|youtube\.com\/watch\?.*?&v=)([^&\n?#]+)/,
-            /youtube\.com\/embed\/([^?&\n]+)/,
-            /youtube\.com\/v\/([^?&\n]+)/,
-            /youtu\.be\/([^?&\n]+)/,
-        ];
-        for (const regex of regexes) {
-            const match = url.match(regex);
-            if (match && match[1]) {
-                return `https://www.youtube.com/embed/${match[1]}`;
-            }
-        }
-        if (url.includes('youtube.com/embed/')) {
-            return url;
-        }
-        return url;
-    }
-    renderImage() {
-        return (h("img", { src: this.dsSrc, alt: this.dsAlt || '', class: "ds-media__image", onLoad: this.handleLoad, onError: this.handleError, loading: this.dsUseLazy ? 'lazy' : 'eager', ...this.inheritedAttributes }));
-    }
-    renderVideo() {
-        return (h("video", { src: this.dsSrc, poster: this.dsPoster, autoplay: this.dsAutoplay, loop: this.dsLoop, muted: this.dsMuted, class: "ds-media__video", onLoadedData: this.handleLoad, onError: this.handleError, preload: "metadata", ...ifDefined('aria-label', this.dsAlt), ...this.inheritedAttributes }, "Your browser does not support the video tag."));
-    }
-    renderYouTube() {
-        const embedUrl = this.getYouTubeEmbedUrl(this.dsSrc);
-        return (h("iframe", { src: embedUrl, class: "ds-media__youtube", frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowfullScreen: true, title: this.dsAlt, onLoad: this.handleLoad, onError: this.handleError, ...this.inheritedAttributes }));
-    }
-    renderLoadingState() {
-        const DsSpinner = transformTagName('ds-spinner', 'ds-media', this.el);
-        return h(DsSpinner, { dsSize: "2xLarge" });
-    }
-    renderErrorState() {
-        const DsIcon = transformTagName('ds-icon', 'ds-media', this.el);
-        return (h("div", { class: "ds-media__error", role: "alert", "aria-live": "polite" }, h(DsIcon, { dsName: "warning", dsSize: "2rem", dsColour: "ds-bgColor-danger-bold" }), h("span", { class: "ds-media__error-text" }, this.errorMessage)));
-    }
-    renderMedia() {
-        switch (this.dsType) {
-            case 'image':
-                return this.renderImage();
-            case 'video':
-                return this.renderVideo();
-            case 'youtube':
-                return this.renderYouTube();
-            default:
-                return null;
-        }
-    }
-    render() {
-        const aspectRatioParts = this.dsAspectRatio.split('/');
-        const aspectRatioValue = aspectRatioParts.length === 2 ? `${aspectRatioParts[0]} / ${aspectRatioParts[1]}` : this.dsAspectRatio;
-        const baseClass = cx('ds-media');
-        return (h("div", { key: 'a87831e27a55e1006374189bd1d60ed1ffc74b88', class: {
-                [baseClass]: true,
-                [`${baseClass}--loading`]: this.isLoading,
-                [`${baseClass}--error`]: this.hasError,
-                [`${baseClass}--image`]: this.dsType === 'image',
-                [`${baseClass}--video`]: this.dsType === 'video',
-                [`${baseClass}--youtube`]: this.dsType === 'youtube',
-                [`${baseClass}--fluid`]: this.dsFluid,
-            }, style: {
-                '--ds-media-aspect-ratio': aspectRatioValue,
-            } }, this.isLoading && this.renderLoadingState(), this.hasError && this.renderErrorState(), !this.hasError && this.renderMedia()));
-    }
-    static get watchers() { return {
-        "dsSrc": ["onSrcChange"],
-        "dsType": ["onTypeChange"]
-    }; }
-    static get style() { return dsMediaCss; }
-}, [256, "ds-media", {
-        "dsSrc": [1, "ds-src"],
-        "dsType": [1, "ds-type"],
-        "dsAlt": [1, "ds-alt"],
-        "dsPoster": [1, "ds-poster"],
-        "dsAutoplay": [4, "ds-autoplay"],
-        "dsLoop": [4, "ds-loop"],
-        "dsMuted": [4, "ds-muted"],
-        "dsUseLazy": [4, "ds-use-lazy"],
-        "dsAspectRatio": [1, "ds-aspect-ratio"],
-        "dsFluid": [4, "ds-fluid"],
-        "isLoading": [32],
-        "hasError": [32],
-        "errorMessage": [32]
-    }, undefined, {
-        "dsSrc": ["onSrcChange"],
-        "dsType": ["onTypeChange"]
-    }]);
-declareComponentDependencies([h("ds-spinner", null), h("ds-icon", { dsName: "" })]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-media", "ds-icon", "ds-spinner", "ds-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-media":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsMedia$1);
-            }
-            break;
-        case "ds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "ds-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "ds-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DsMedia = DsMedia$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsMedia, defineCustomElement };
+import{p as e,H as s,c as t,h as i,t as d}from"./p-DZOTmLzP.js";import{c as a}from"./p-ByHAbBpc.js";import{a as r,t as o,d as n}from"./p-J5Ghj1_T.js";import{i as m,a as u}from"./p-BecId8t2.js";import{g as c}from"./p-CHu0W_4n.js";import{d as h}from"./p-CeglrwZj.js";import{d as l}from"./p-DLh_CSNT.js";import{d as _}from"./p-DCn1Mkl6.js";const p=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.dsLoad=t(this,"dsLoad",7),this.dsError=t(this,"dsError",7)}inheritedAttributes={};dsSrc;dsType;dsAlt;dsPoster;dsAutoplay=!1;dsLoop=!1;dsMuted=!0;dsUseLazy=!0;dsAspectRatio="";dsFluid=!1;get el(){return this}isLoading=!0;hasError=!1;errorMessage="";dsLoad;dsError;componentWillLoad(){this.inheritedAttributes={...u(this,this.el),...m(this.el,"video"===this.dsType?["aria-label"]:[])}}onSrcChange(){this.resetState()}onTypeChange(){this.resetState()}get defaultLoadError(){switch(c()){case"fi":return"Median lataus epäonnistui";case"sv":return"Media laddning misslyckades";default:return"Failed to load media"}}get loadAbortedError(){switch(c()){case"fi":return"Median lataus keskeytettiin";case"sv":return"Media laddning avbröts";default:return"Media loading aborted"}}get loadNetworkError(){switch(c()){case"fi":return"Verkkovirhe tapahtui";case"sv":return"Nätverksfel uppstod";default:return"Network error occurred"}}get loadDecodeError(){switch(c()){case"fi":return"Median dekoodaus epäonnistui";case"sv":return"Mediaavkodning misslyckades";default:return"Media decoding failed"}}get formatError(){switch(c()){case"fi":return"Median formaatti ei ole tuettu";case"sv":return"Mediaformatet stöds inte";default:return"Media format not supported"}}resetState(){this.isLoading=!0,this.hasError=!1,this.errorMessage=""}handleLoad=()=>{this.isLoading=!1,this.hasError=!1,this.dsLoad.emit()};handleError=e=>{this.isLoading=!1,this.hasError=!0;let s=this.defaultLoadError;const t=e.target;if(t.error)switch(t.error.code){case t.error.MEDIA_ERR_ABORTED:s=this.loadAbortedError;break;case t.error.MEDIA_ERR_NETWORK:s=this.loadNetworkError;break;case t.error.MEDIA_ERR_DECODE:s=this.loadDecodeError;break;case t.error.MEDIA_ERR_SRC_NOT_SUPPORTED:s=this.formatError}this.errorMessage=s,this.dsError.emit(s)};getYouTubeEmbedUrl(e){const s=[/(?:youtube\.com\/watch\?v=|youtube\.com\/embed\/|youtu\.be\/|youtube\.com\/v\/|youtube\.com\/watch\?.*?&v=)([^&\n?#]+)/,/youtube\.com\/embed\/([^?&\n]+)/,/youtube\.com\/v\/([^?&\n]+)/,/youtu\.be\/([^?&\n]+)/];for(const t of s){const s=e.match(t);if(s&&s[1])return"https://www.youtube.com/embed/"+s[1]}return e.includes("youtube.com/embed/"),e}renderImage(){return i("img",{src:this.dsSrc,alt:this.dsAlt||"",class:"ds-media__image",onLoad:this.handleLoad,onError:this.handleError,loading:this.dsUseLazy?"lazy":"eager",...this.inheritedAttributes})}renderVideo(){return i("video",{src:this.dsSrc,poster:this.dsPoster,autoplay:this.dsAutoplay,loop:this.dsLoop,muted:this.dsMuted,class:"ds-media__video",onLoadedData:this.handleLoad,onError:this.handleError,preload:"metadata",...r("aria-label",this.dsAlt),...this.inheritedAttributes},"Your browser does not support the video tag.")}renderYouTube(){const e=this.getYouTubeEmbedUrl(this.dsSrc);return i("iframe",{src:e,class:"ds-media__youtube",frameborder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowfullScreen:!0,title:this.dsAlt,onLoad:this.handleLoad,onError:this.handleError,...this.inheritedAttributes})}renderLoadingState(){const e=o("ds-spinner","ds-media",this.el);return i(e,{dsSize:"2xLarge"})}renderErrorState(){const e=o("ds-icon","ds-media",this.el);return i("div",{class:"ds-media__error",role:"alert","aria-live":"polite"},i(e,{dsName:"warning",dsSize:"2rem",dsColour:"ds-bgColor-danger-bold"}),i("span",{class:"ds-media__error-text"},this.errorMessage))}renderMedia(){switch(this.dsType){case"image":return this.renderImage();case"video":return this.renderVideo();case"youtube":return this.renderYouTube();default:return null}}render(){const e=this.dsAspectRatio.split("/"),s=2===e.length?`${e[0]} / ${e[1]}`:this.dsAspectRatio,t=a("ds-media");return i("div",{key:"1a5f9527435223be8dce54812bf17e83d30ac88d",class:{[t]:!0,[t+"--loading"]:this.isLoading,[t+"--error"]:this.hasError,[t+"--image"]:"image"===this.dsType,[t+"--video"]:"video"===this.dsType,[t+"--youtube"]:"youtube"===this.dsType,[t+"--fluid"]:this.dsFluid},style:{"--ds-media-aspect-ratio":s}},this.isLoading&&this.renderLoadingState(),this.hasError&&this.renderErrorState(),!this.hasError&&this.renderMedia())}static get watchers(){return{dsSrc:[{onSrcChange:0}],dsType:[{onTypeChange:0}]}}static get style(){return".ds-media__KmYz6O{position:relative;width:100%;height:auto;overflow:hidden;background-color:var(--ds-palette-black-05)}.ds-media__KmYz6O .ds-media__image,.ds-media__KmYz6O .ds-media__video,.ds-media__KmYz6O .ds-media__youtube{width:100%;height:100%;object-fit:cover;display:block;max-height:var(--horizontal-image-max-height, auto);aspect-ratio:var(--ds-media-aspect-ratio)}.ds-media__KmYz6O .ds-media__image--fluid,.ds-media__KmYz6O .ds-media__video--fluid,.ds-media__KmYz6O .ds-media__youtube--fluid{aspect-ratio:unset}.ds-media__KmYz6O__youtube{border:none;object-fit:initial}.ds-media__KmYz6O--loading .ds-media__image,.ds-media__KmYz6O--loading .ds-media__video{opacity:0}.ds-media__KmYz6O--error{aspect-ratio:var(--ds-media-aspect-ratio)}.ds-media__KmYz6O--error .ds-media__image,.ds-media__KmYz6O--error .ds-media__video{display:none}.ds-media__KmYz6O--error .ds-media__error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background-color:var(--ds-bgColor-secondary);color:var(--ds-bgColor-danger-bold);z-index:1;padding:16px;text-align:center}.ds-media__KmYz6O--error .ds-media__error-icon{width:48px;height:48px;color:var(--ds-bgColor-danger-bold);flex-shrink:0}.ds-media__KmYz6O--error .ds-media__error-text{font-size:14px;font-weight:500;line-height:1.4}.ds-media__KmYz6O--image .ds-media__image{transition:opacity 0.3s ease}.ds-media__KmYz6O--video .ds-media__video{transition:opacity 0.3s ease}.ds-media__KmYz6O--youtube .ds-media__youtube{transition:opacity 0.3s ease}.ds-media__KmYz6O--fluid{width:100%;height:100%}.ds-media__KmYz6O--fluid .ds-media__KmYz6O__image,.ds-media__KmYz6O--fluid .ds-media__KmYz6O__video,.ds-media__KmYz6O--fluid .ds-media__KmYz6O__youtube{width:100%;height:100%;object-fit:cover}@media (max-width: 768px){.ds-media__KmYz6O{border-radius:2px}.ds-media__KmYz6O__loading-spinner{width:24px;height:24px;border-width:2px}.ds-media__KmYz6O__loading-text{font-size:12px}.ds-media__KmYz6O__error-icon{width:40px;height:40px}.ds-media__KmYz6O__error-text{font-size:12px}}"}},[512,"ds-media",{dsSrc:[1,"ds-src"],dsType:[1,"ds-type"],dsAlt:[1,"ds-alt"],dsPoster:[1,"ds-poster"],dsAutoplay:[4,"ds-autoplay"],dsLoop:[4,"ds-loop"],dsMuted:[4,"ds-muted"],dsUseLazy:[4,"ds-use-lazy"],dsAspectRatio:[1,"ds-aspect-ratio"],dsFluid:[4,"ds-fluid"],isLoading:[32],hasError:[32],errorMessage:[32]},void 0,{dsSrc:[{onSrcChange:0}],dsType:[{onTypeChange:0}]}]);n([i("ds-spinner",null),i("ds-icon",{dsName:""})]);const g=p,b=function(){"undefined"!=typeof customElements&&["ds-media","ds-icon","ds-spinner","ds-visually-hidden"].forEach((e=>{switch(e){case"ds-media":customElements.get(d(e))||customElements.define(d(e),p);break;case"ds-icon":customElements.get(d(e))||h();break;case"ds-spinner":customElements.get(d(e))||l();break;case"ds-visually-hidden":customElements.get(d(e))||_()}}))};export{g as DsMedia,b as defineCustomElement}

package/dist/components/ds-modal.js

@@ -1,304 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-GalXVdFP.js';
-import { c as classNames } from './p-BfTCfPZ1.js';
-import { c as cx } from './p-C34PGDVY.js';
-import { i as idGenerator, t as transformTagName, e as throttle, a as ifDefined, d as declareComponentDependencies } from './p-J5Ghj1_T.js';
-import { g as getLanguage } from './p-B71giUZh.js';
-import { M as MODAL_TRANSITION_IN_DURATION, c as MODAL_TRANSITION_OUT_DURATION } from './p-BT1Kxodd.js';
-import { i as isGreaterThanEqualBreakpointMediaQuery } from './p-BW1GUsO7.js';
-import { d as defineCustomElement$6 } from './p-ClUj4DIP.js';
-import { d as defineCustomElement$5 } from './p-CBTcmEBq.js';
-import { d as defineCustomElement$4 } from './p-DIxFOW85.js';
-import { d as defineCustomElement$3 } from './p-Dq55XDgV.js';
-import { d as defineCustomElement$2 } from './p-Cq_RwLX7.js';
-
-const dsModalCss = ".ds-modal__oSBnIJ{position:fixed;padding:0;border:0;margin:0;max-height:100vh;max-height:100dvh;min-height:100vh;min-height:100dvh;width:100vw;background-color:var(--ds-bgColor-transparent-onLight);overflow-y:hidden;inset:0}.ds-modal__oSBnIJ--open{overflow-y:auto}.ds-modal__oSBnIJ__positioner{pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;min-height:100dvh;padding-block:var(--ds-spacing-small) 0;margin-block:auto 0}@media (min-width: 30rem){.ds-modal__oSBnIJ__positioner{justify-content:center;padding-block:var(--ds-spacing-small);margin-block:auto}}@media (min-width: 60rem){.ds-modal__oSBnIJ__positioner{padding-block:var(--ds-spacing-xLarge)}}.ds-modal__oSBnIJ__container{pointer-events:auto;cursor:unset;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white);box-shadow:var(--ds-shadow-overlay);scale:0.98;opacity:0;transform:translateY(0.75rem);transition:scale var(--ds-modal-transition-out-duration) ease-out, opacity var(--ds-modal-transition-out-duration) ease-out, transform var(--ds-modal-transition-out-duration) ease-out}@media (min-width: 30rem){.ds-modal__oSBnIJ__container{margin:auto;width:fit-content;max-width:calc(100vw - 2 * var(--ds-spacing-small))}}@media (min-width: 60rem){.ds-modal__oSBnIJ__container{max-width:calc(100vw - 2 * var(--ds-spacing-xLarge))}}.ds-modal__oSBnIJ__container--full{width:100%}@media (min-width: 30rem){.ds-modal__oSBnIJ__container--small{width:480px}.ds-modal__oSBnIJ__container--medium{width:640px}.ds-modal__oSBnIJ__container--large{width:800px}}.ds-modal__oSBnIJ__container--scrollable{display:flex;flex-direction:column;overflow:hidden;max-height:calc(100vh + calc(-1 * var(--ds-spacing-small)));max-height:calc(100dvh + calc(-1 * var(--ds-spacing-small)));min-height:calc(320px - 2 * var(--ds-spacing-small))}@media (min-width: 30rem){.ds-modal__oSBnIJ__container--scrollable{max-height:calc(100vh + calc(-2 * var(--ds-spacing-small)));max-height:calc(100dvh + calc(-2 * var(--ds-spacing-small)))}}@media (min-width: 60rem){.ds-modal__oSBnIJ__container--scrollable{max-height:calc(100vh + calc(-2 * var(--ds-spacing-xLarge)));max-height:calc(100dvh + calc(-2 * var(--ds-spacing-xLarge)))}}.ds-modal__oSBnIJ--open .ds-modal__oSBnIJ__container{scale:1;opacity:1;transform:translateY(0)}.ds-modal__oSBnIJ--in .ds-modal__oSBnIJ__container{transition:scale var(--ds-modal-transition-in-duration) ease-out, opacity var(--ds-modal-transition-in-duration) ease-out, transform var(--ds-modal-transition-in-duration) ease-out}@media (prefers-reduced-motion: reduce){.ds-modal__oSBnIJ__container,.ds-modal__oSBnIJ--in .ds-modal__oSBnIJ__container{transition:none}}.ds-modal__oSBnIJ__header{position:relative;display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-spacing-2xSmall);padding-block:var(--ds-spacing-small);padding-inline:var(--ds-spacing-small)}@media (min-width: 30rem){.ds-modal__oSBnIJ__header{padding-block:var(--ds-spacing-medium) var(--ds-spacing-small);padding-inline:var(--ds-spacing-medium)}}.ds-modal__oSBnIJ__header--sticky{position:sticky;top:0;background-color:var(--ds-bgColor-white);border-block-end:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light)}.ds-modal__oSBnIJ__header__heading:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-modal__oSBnIJ__header__heading{display:flex;gap:var(--ds-spacing-xSmall)}.ds-modal__oSBnIJ__header__heading__text{margin-block:var(--ds-spacing-4xSmall)}@media (min-width: 60rem){.ds-modal__oSBnIJ__header__heading__text{margin-block:calc(var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall))}}.ds-modal__oSBnIJ__header__heading__icon{display:block;margin-block:var(--ds-spacing-4xSmall);margin-inline-end:var(--ds-spacing-3xSmall)}@media (min-width: 60rem){.ds-modal__oSBnIJ__header__heading__icon{margin-block:var(--ds-spacing-3xSmall)}}.ds-modal__oSBnIJ__header__close-button{margin-inline-start:auto}@media (min-width: 60rem){.ds-modal__oSBnIJ__header__close-button{margin-block:var(--ds-spacing-4xSmall)}}.ds-modal__oSBnIJ__content:focus-visible{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 1)}.ds-modal__oSBnIJ__content{position:relative;padding-inline:var(--ds-spacing-small);flex:1;min-height:0}@media (min-width: 30rem){.ds-modal__oSBnIJ__content{padding-inline:var(--ds-spacing-medium)}}.ds-modal__oSBnIJ__content--padded{padding-block-end:var(--ds-spacing-small)}@media (min-width: 30rem){.ds-modal__oSBnIJ__content--padded{padding-block-end:var(--ds-spacing-medium)}}.ds-modal__oSBnIJ__content--scrollable{overflow-y:auto;padding-block-end:unset}.ds-modal__oSBnIJ__content--scrollable__top-scrim,.ds-modal__oSBnIJ__content--scrollable__bottom-scrim{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-modal__oSBnIJ__content--scrollable__top-scrim--open,.ds-modal__oSBnIJ__content--scrollable__bottom-scrim--open{display:block}.ds-modal__oSBnIJ__content--scrollable__top-scrim{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%)}.ds-modal__oSBnIJ__content--scrollable__bottom-scrim{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%)}.ds-modal__oSBnIJ__content--scrollable:focus-visible .ds-modal__oSBnIJ__content--scrollable__top-scrim{top:var(--ds-borderWidth-thin)}.ds-modal__oSBnIJ__content--scrollable:focus-visible .ds-modal__oSBnIJ__content--scrollable__bottom-scrim{bottom:var(--ds-borderWidth-thin)}.ds-modal__oSBnIJ__footer{position:relative}.ds-modal__oSBnIJ__footer:not(:empty){display:flex;flex-direction:column;padding:var(--ds-spacing-small);gap:var(--ds-spacing-xSmall)}@media (min-width: 30rem){.ds-modal__oSBnIJ__footer:not(:empty){flex-direction:row;padding:var(--ds-spacing-medium);gap:var(--ds-spacing-small)}}.ds-modal__oSBnIJ__footer:not(:empty)+.ds-modal__oSBnIJ__content{border-block-end:0}.ds-modal__oSBnIJ__footer--sticky:not(:empty){position:sticky;bottom:0;background-color:var(--ds-bgColor-white);border-block-start:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light)}";
-
-const modalIdGenerator = idGenerator('ds-modal');
-const DsModal$1 = proxyCustomElement(class DsModal extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.dsModalClose = createEvent(this, "dsModalClose");
-    }
-    get el() { return this; }
-    RESIZE_THROTTLE_TIMEOUT = 100;
-    reducedMotionMediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-    isGreaterThanEqualSmallMediaQuery = isGreaterThanEqualBreakpointMediaQuery('small');
-    transitionTimeout = null;
-    contentRef;
-    contentSlotContainsElements = false;
-    dsModalClose;
-    dsId = modalIdGenerator.next().value;
-    dsOpen = false;
-    dsCloseable = true;
-    dsVariant = 'default';
-    dsIcon;
-    dsIconAriaLabel;
-    dsSize = 'medium';
-    dsAutoFocusTarget = 'heading';
-    dsScrollable = false;
-    dsHeadingText = '';
-    dsHeadingLevel = 2;
-    dsBackdropCloseable = true;
-    dsBackdropZIndex = 9999;
-    isGreaterThanEqualSmall = this.isGreaterThanEqualSmallMediaQuery.matches;
-    transitionInProgress = false;
-    hasHeaderSlot = false;
-    hasContentSlot = false;
-    hasFooterSlot = false;
-    scrollableContentState = null;
-    get close() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Sulje';
-            case 'sv':
-                return 'Stäng';
-            default:
-                return 'Close';
-        }
-    }
-    get warning() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Varoitus';
-            case 'sv':
-                return 'Varning';
-            default:
-                return 'Warning';
-        }
-    }
-    get contentScrollArea() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Sisällön vieritysalue';
-            case 'sv':
-                return 'Innehållets scrollområde';
-            default:
-                return 'Content scroll area';
-        }
-    }
-    get icon() {
-        switch (this.dsVariant) {
-            case 'danger': {
-                return {
-                    name: 'report_fill',
-                    size: this.isGreaterThanEqualSmall ? '1.75rem' : '1.5rem',
-                    colour: 'ds-iconColor-danger',
-                    ariaLabel: this.dsIconAriaLabel || this.warning,
-                    ariaHidden: false,
-                };
-            }
-            case 'default':
-            default:
-                if (this.dsIcon) {
-                    return {
-                        name: this.dsIcon,
-                        size: this.isGreaterThanEqualSmall ? '1.75rem' : '1.5rem',
-                        colour: 'ds-iconColor-primary',
-                        ariaLabel: this.dsIconAriaLabel,
-                        ariaHidden: !this.dsIconAriaLabel,
-                    };
-                }
-                return null;
-        }
-    }
-    get DsIcon() {
-        return transformTagName('ds-icon', 'ds-modal', this.el);
-    }
-    get DsButton() {
-        return transformTagName('ds-button', 'ds-modal', this.el);
-    }
-    get DsBackdrop() {
-        return transformTagName('ds-backdrop', 'ds-modal', this.el);
-    }
-    checkHeaderSlot() {
-        this.hasHeaderSlot = this.el.querySelector('[slot="header"]') !== null;
-    }
-    checkContentSlot() {
-        const slottedContent = this.el.querySelectorAll('[slot="content"]');
-        this.hasContentSlot = slottedContent.length > 0;
-        this.contentSlotContainsElements = Array.from(slottedContent).some(node => node.childElementCount > 0);
-    }
-    checkFooterSlot() {
-        this.hasFooterSlot = this.el.querySelector('[slot="footer"]') !== null;
-    }
-    calculateScrollableContentState = () => {
-        if (!this.contentRef || !this.dsScrollable)
-            return;
-        this.scrollableContentState = {
-            atTop: this.contentRef.scrollTop === 0,
-            atBottom: this.contentRef.scrollTop + this.contentRef.clientHeight >= this.contentRef.scrollHeight,
-        };
-    };
-    throttledCalculateScrollableContentState = throttle(this.calculateScrollableContentState, this.RESIZE_THROTTLE_TIMEOUT);
-    setIsGreaterThanEqualSmall = (e) => {
-        this.isGreaterThanEqualSmall = e.matches;
-    };
-    handleReducedMotionChange = (event) => {
-        if (event.matches) {
-            if (this.transitionTimeout) {
-                clearTimeout(this.transitionTimeout);
-                this.transitionTimeout = null;
-            }
-            this.transitionInProgress = false;
-        }
-    };
-    connectedCallback() {
-        this.reducedMotionMediaQuery.addEventListener('change', this.handleReducedMotionChange);
-        this.isGreaterThanEqualSmallMediaQuery.addEventListener('change', this.setIsGreaterThanEqualSmall);
-    }
-    componentDidLoad() {
-        this.checkHeaderSlot();
-        this.checkContentSlot();
-        this.checkFooterSlot();
-        this.calculateScrollableContentState();
-    }
-    disconnectedCallback() {
-        if (this.transitionTimeout) {
-            clearTimeout(this.transitionTimeout);
-        }
-        this.reducedMotionMediaQuery.removeEventListener('change', this.handleReducedMotionChange);
-        this.isGreaterThanEqualSmallMediaQuery.removeEventListener('change', this.setIsGreaterThanEqualSmall);
-    }
-    hasContentSlotObserver(newValue) {
-        if (newValue) {
-            this.calculateScrollableContentState();
-        }
-    }
-    dsOpenObserver(newValue) {
-        this.transitionInProgress = true;
-        const completeTransition = () => {
-            if (newValue) {
-                this.calculateScrollableContentState();
-            }
-            this.transitionInProgress = false;
-        };
-        if (this.reducedMotionMediaQuery.matches) {
-            requestAnimationFrame(() => {
-                completeTransition();
-            });
-            return;
-        }
-        this.transitionTimeout = setTimeout(completeTransition, newValue ? MODAL_TRANSITION_IN_DURATION : MODAL_TRANSITION_OUT_DURATION);
-    }
-    resizeListener() {
-        this.throttledCalculateScrollableContentState();
-    }
-    handleBackdropClose = () => {
-        if (!this.dsCloseable || !this.dsBackdropCloseable)
-            return;
-        this.dsModalClose.emit();
-    };
-    handleCloseClick = () => {
-        if (this.transitionInProgress)
-            return;
-        this.dsModalClose.emit();
-    };
-    handleContentScroll = () => {
-        this.calculateScrollableContentState();
-    };
-    render() {
-        const baseClass = cx('ds-modal');
-        const classes = classNames(baseClass, {
-            [`${baseClass}--open`]: this.dsOpen,
-            [`${baseClass}--in`]: this.dsOpen && this.transitionInProgress,
-        });
-        const containerClasses = classNames(`${baseClass}__container`, {
-            [`${baseClass}__container--${this.dsSize}`]: this.dsSize !== 'auto',
-            [`${baseClass}__container--scrollable`]: (this.dsOpen || this.transitionInProgress) && this.dsScrollable,
-        });
-        const headerClasses = classNames(`${baseClass}__header`, {
-            [`${baseClass}__header--sticky`]: this.dsScrollable,
-        });
-        const headingClasses = classNames(`${baseClass}__header__heading`, 'ds-heading-md');
-        const closeButtonClasses = classNames(`${baseClass}__header__close-button`);
-        const contentClasses = classNames(`${baseClass}__content`, 'ds-bodytext-lg', {
-            [`${baseClass}__content--scrollable`]: this.dsScrollable,
-            [`${baseClass}__content--padded`]: this.contentSlotContainsElements,
-        });
-        const footerClasses = classNames(`${baseClass}__footer`, {
-            [`${baseClass}__footer--sticky`]: this.dsScrollable,
-        });
-        const contentAriaLabel = this.dsScrollable ? this.contentScrollArea : undefined;
-        const contentTabIndex = this.dsScrollable ? 0 : undefined;
-        return (h(this.DsBackdrop, { key: '1b5f40af038e12b3d52da9640c5bf7a41d5d9b4f', id: this.dsId, dsDialogClasses: classes, dsOpen: this.dsOpen, dsZIndex: this.dsBackdropZIndex, dsRole: this.dsVariant === 'danger' ? 'alertdialog' : 'dialog', onDsBackdropClose: this.handleBackdropClose }, h("div", { key: '0e163d7af42c3dbae1840b204df18898585168f9', class: `${baseClass}__positioner` }, h("div", { key: 'e05e230c24e1013b2e1c189b8ca17d7a8547843c', class: containerClasses, style: { '--ds-modal-transition-in-duration': `${MODAL_TRANSITION_IN_DURATION}ms`, '--ds-modal-transition-out-duration': `${MODAL_TRANSITION_OUT_DURATION}ms` } }, h("slot", { key: '9a370848c428237be7b8aa96d52400eb5e57ddca', name: "header", onSlotchange: () => this.checkHeaderSlot() }, !this.hasHeaderSlot && (h("div", { key: 'c92eded235813b73bf38cdb211a05cd664e8be1b', class: headerClasses }, this.dsHeadingText && (h("span", { key: 'c2ad72e6206615affac0d2792a6c981b73500cb8', role: "heading", tabIndex: -1, autoFocus: this.dsAutoFocusTarget === 'heading', "aria-level": this.dsHeadingLevel, class: headingClasses }, this.icon && (h(this.DsIcon, { key: '5f75e9e1fd83010a63f56139e73ea67460fee83a', class: `${baseClass}__header__heading__icon`, dsAriaHidden: this.icon.ariaHidden, dsAriaLabel: this.icon.ariaLabel, dsSize: this.icon.size, dsName: this.icon.name, dsColour: this.icon.colour })), h("span", { key: 'fd78a671a0905cc89df40547d417fc3c40fe2537', class: `${baseClass}__header__heading__text` }, this.dsHeadingText))), this.dsCloseable && (h(this.DsButton, { key: 'd38895149123fd62453f0b158db4a241d6cdd5a0', class: closeButtonClasses, dsVariant: "supplementary", dsSize: "small", dsColour: "black", dsIcon: "close", dsAriaLabel: this.close, dsAutoFocus: this.dsAutoFocusTarget === 'close-button', onClick: this.handleCloseClick }))))), h("div", { key: '5a90b48de2e501bb289cc91c1cb6b6f8fec0ac36', ref: el => (this.contentRef = el), class: contentClasses, ...ifDefined('aria-label', contentAriaLabel), ...ifDefined('tabIndex', contentTabIndex), onScroll: this.handleContentScroll }, this.dsScrollable && this.hasContentSlot && (h("div", { key: '4dbbaa944ab82627d0ceee5c84360f4435ddf15f', class: classNames(`${baseClass}__content--scrollable__top-scrim`, {
-                [`${baseClass}__content--scrollable__top-scrim--open`]: this.scrollableContentState && !this.scrollableContentState.atTop,
-            }), "aria-hidden": "true" })), h("slot", { key: '9d242206dd77c38e73e87b29c5286773d328cb7b', name: "content", onSlotchange: () => this.checkContentSlot() }), this.dsScrollable && this.hasContentSlot && (h("div", { key: '859ca016c1131226b9febff8ce75de340767796f', class: classNames(`${baseClass}__content--scrollable__bottom-scrim`, {
-                [`${baseClass}__content--scrollable__bottom-scrim--open`]: this.scrollableContentState && !this.scrollableContentState.atBottom,
-            }), "aria-hidden": "true" }))), h("div", { key: '6476d43904c097b2ac61994e7da5ba1f89ab05b5', class: footerClasses }, h("slot", { key: '9bc5185ec9b3cebbcb785e44655de023c0b5c74b', name: "footer", onSlotchange: () => this.checkFooterSlot() }))))));
-    }
-    static get watchers() { return {
-        "hasContentSlot": ["hasContentSlotObserver"],
-        "dsOpen": ["dsOpenObserver"]
-    }; }
-    static get style() { return dsModalCss; }
-}, [260, "ds-modal", {
-        "dsId": [1, "ds-id"],
-        "dsOpen": [4, "ds-open"],
-        "dsCloseable": [4, "ds-closeable"],
-        "dsVariant": [1, "ds-variant"],
-        "dsIcon": [1, "ds-icon"],
-        "dsIconAriaLabel": [1, "ds-icon-aria-label"],
-        "dsSize": [1, "ds-size"],
-        "dsAutoFocusTarget": [1, "ds-auto-focus-target"],
-        "dsScrollable": [4, "ds-scrollable"],
-        "dsHeadingText": [1, "ds-heading-text"],
-        "dsHeadingLevel": [2, "ds-heading-level"],
-        "dsBackdropCloseable": [4, "ds-backdrop-closeable"],
-        "dsBackdropZIndex": [2, "ds-backdrop-z-index"],
-        "isGreaterThanEqualSmall": [32],
-        "transitionInProgress": [32],
-        "hasHeaderSlot": [32],
-        "hasContentSlot": [32],
-        "hasFooterSlot": [32],
-        "scrollableContentState": [32]
-    }, [[9, "resize", "resizeListener"]], {
-        "hasContentSlot": ["hasContentSlotObserver"],
-        "dsOpen": ["dsOpenObserver"]
-    }]);
-declareComponentDependencies([h("ds-backdrop", null), h("ds-button", null), h("ds-icon", { dsName: "" })]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-modal", "ds-backdrop", "ds-button", "ds-icon", "ds-spinner", "ds-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-modal":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsModal$1);
-            }
-            break;
-        case "ds-backdrop":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "ds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "ds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "ds-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "ds-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DsModal = DsModal$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsModal, defineCustomElement };
+import{p as a,H as e,c as s,h as t,t as o}from"./p-DZOTmLzP.js";import{c as d}from"./p-BfTCfPZ1.js";import{c as i}from"./p-ByHAbBpc.js";import{i as n,t as r,e as l,a as c,d as m}from"./p-J5Ghj1_T.js";import{g as _}from"./p-CHu0W_4n.js";import{M as h,c as b}from"./p-BT1Kxodd.js";import{i as p}from"./p-BW1GUsO7.js";import{d as g}from"./p-Bk39sKUw.js";import{d as u}from"./p-NoqVzqGs.js";import{d as v}from"./p-CeglrwZj.js";import{d as f}from"./p-DLh_CSNT.js";import{d as k}from"./p-DCn1Mkl6.js";const O=n("ds-modal"),z=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.dsModalClose=s(this,"dsModalClose",7)}get el(){return this}RESIZE_THROTTLE_TIMEOUT=100;reducedMotionMediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)");isGreaterThanEqualSmallMediaQuery=p("small");transitionTimeout=null;contentRef;contentSlotContainsElements=!1;dsModalClose;dsId=O.next().value;dsOpen=!1;dsCloseable=!0;dsVariant="default";dsIcon;dsIconAriaLabel;dsSize="medium";dsAutoFocusTarget="heading";dsScrollable=!1;dsHeadingText="";dsHeadingLevel=2;dsBackdropCloseable=!0;dsBackdropZIndex=9999;isGreaterThanEqualSmall=this.isGreaterThanEqualSmallMediaQuery.matches;transitionInProgress=!1;hasHeaderSlot=!1;hasContentSlot=!1;hasFooterSlot=!1;scrollableContentState=null;get close(){switch(_()){case"fi":return"Sulje";case"sv":return"Stäng";default:return"Close"}}get warning(){switch(_()){case"fi":return"Varoitus";case"sv":return"Varning";default:return"Warning"}}get contentScrollArea(){switch(_()){case"fi":return"Sisällön vieritysalue";case"sv":return"Innehållets scrollområde";default:return"Content scroll area"}}get icon(){return"danger"===this.dsVariant?{name:"report_fill",size:this.isGreaterThanEqualSmall?"1.75rem":"1.5rem",colour:"ds-iconColor-danger",ariaLabel:this.dsIconAriaLabel||this.warning,ariaHidden:!1}:this.dsIcon?{name:this.dsIcon,size:this.isGreaterThanEqualSmall?"1.75rem":"1.5rem",colour:"ds-iconColor-primary",ariaLabel:this.dsIconAriaLabel,ariaHidden:!this.dsIconAriaLabel}:null}get DsIcon(){return r("ds-icon","ds-modal",this.el)}get DsButton(){return r("ds-button","ds-modal",this.el)}get DsBackdrop(){return r("ds-backdrop","ds-modal",this.el)}checkHeaderSlot(){this.hasHeaderSlot=null!==this.el.querySelector('[slot="header"]')}checkContentSlot(){const a=this.el.querySelectorAll('[slot="content"]');this.hasContentSlot=a.length>0,this.contentSlotContainsElements=Array.from(a).some((a=>a.childElementCount>0))}checkFooterSlot(){this.hasFooterSlot=null!==this.el.querySelector('[slot="footer"]')}calculateScrollableContentState=()=>{this.contentRef&&this.dsScrollable&&(this.scrollableContentState={atTop:0===this.contentRef.scrollTop,atBottom:this.contentRef.scrollTop+this.contentRef.clientHeight>=this.contentRef.scrollHeight})};throttledCalculateScrollableContentState=l(this.calculateScrollableContentState,this.RESIZE_THROTTLE_TIMEOUT);setIsGreaterThanEqualSmall=a=>{this.isGreaterThanEqualSmall=a.matches};handleReducedMotionChange=a=>{a.matches&&(this.transitionTimeout&&(clearTimeout(this.transitionTimeout),this.transitionTimeout=null),this.transitionInProgress=!1)};connectedCallback(){this.reducedMotionMediaQuery.addEventListener("change",this.handleReducedMotionChange),this.isGreaterThanEqualSmallMediaQuery.addEventListener("change",this.setIsGreaterThanEqualSmall)}componentDidLoad(){this.checkHeaderSlot(),this.checkContentSlot(),this.checkFooterSlot(),this.calculateScrollableContentState()}disconnectedCallback(){this.transitionTimeout&&clearTimeout(this.transitionTimeout),this.reducedMotionMediaQuery.removeEventListener("change",this.handleReducedMotionChange),this.isGreaterThanEqualSmallMediaQuery.removeEventListener("change",this.setIsGreaterThanEqualSmall)}hasContentSlotObserver(a){a&&this.calculateScrollableContentState()}dsOpenObserver(a){this.transitionInProgress=!0;const e=()=>{a&&this.calculateScrollableContentState(),this.transitionInProgress=!1};this.reducedMotionMediaQuery.matches?requestAnimationFrame((()=>{e()})):this.transitionTimeout=setTimeout(e,a?h:b)}resizeListener(){this.throttledCalculateScrollableContentState()}handleBackdropClose=()=>{this.dsCloseable&&this.dsBackdropCloseable&&this.dsModalClose.emit()};handleCloseClick=()=>{this.transitionInProgress||this.dsModalClose.emit()};handleContentScroll=()=>{this.calculateScrollableContentState()};render(){const a=i("ds-modal"),e=d(a,{[a+"--open"]:this.dsOpen,[a+"--in"]:this.dsOpen&&this.transitionInProgress}),s=d(a+"__container",{[`${a}__container--${this.dsSize}`]:"auto"!==this.dsSize,[a+"__container--scrollable"]:(this.dsOpen||this.transitionInProgress)&&this.dsScrollable}),o=d(a+"__header",{[a+"__header--sticky"]:this.dsScrollable}),n=d(a+"__header__heading","ds-heading-md"),r=d(a+"__header__close-button"),l=d(a+"__content","ds-bodytext-lg",{[a+"__content--scrollable"]:this.dsScrollable,[a+"__content--padded"]:this.contentSlotContainsElements}),m=d(a+"__footer",{[a+"__footer--sticky"]:this.dsScrollable}),_=this.dsScrollable?this.contentScrollArea:void 0,p=this.dsScrollable?0:void 0;return t(this.DsBackdrop,{key:"34f20ec233affd5f92d99d4b59ceb0c3a38e2760",id:this.dsId,dsDialogClasses:e,dsOpen:this.dsOpen,dsZIndex:this.dsBackdropZIndex,dsRole:"danger"===this.dsVariant?"alertdialog":"dialog",onDsBackdropClose:this.handleBackdropClose},t("div",{key:"3bd47c3984fd90968d6760d6270c3f21ebc01e40",class:a+"__positioner"},t("div",{key:"1a928135c70bfcf40949a982a8a2f9ecac649fb0",class:s,style:{"--ds-modal-transition-in-duration":h+"ms","--ds-modal-transition-out-duration":b+"ms"}},t("slot",{key:"851c23a858d2b8b65beefcd68bcadd363aaa43c9",name:"header",onSlotchange:()=>this.checkHeaderSlot()},!this.hasHeaderSlot&&t("div",{key:"12fbe87f94d59cd9a59975796ff72da9abba4f3c",class:o},this.dsHeadingText&&t("span",{key:"1ae6ade01c6d29ceba2aec63deb11ab3873edc0a",role:"heading",tabIndex:-1,autoFocus:"heading"===this.dsAutoFocusTarget,"aria-level":this.dsHeadingLevel,class:n},this.icon&&t(this.DsIcon,{key:"9407e530a689437ccea941efdacfda82ea47c7d5",class:a+"__header__heading__icon",dsAriaHidden:this.icon.ariaHidden,dsAriaLabel:this.icon.ariaLabel,dsSize:this.icon.size,dsName:this.icon.name,dsColour:this.icon.colour}),t("span",{key:"97e4776346300a649a0cd6be8c02797a3843cfaf",class:a+"__header__heading__text"},this.dsHeadingText)),this.dsCloseable&&t(this.DsButton,{key:"b765dc5aa456c1f75fb9c617088f9a68fc5160f2",class:r,dsVariant:"supplementary",dsSize:"small",dsColour:"black",dsIcon:"close",dsAriaLabel:this.close,dsAutoFocus:"close-button"===this.dsAutoFocusTarget,onClick:this.handleCloseClick}))),t("div",{key:"7e4c9f7615e9bc8fbd21596cfa5753cb3271520b",ref:a=>this.contentRef=a,class:l,...c("aria-label",_),...c("tabIndex",p),onScroll:this.handleContentScroll},this.dsScrollable&&this.hasContentSlot&&t("div",{key:"9f92416f7dd975358659a5c3b74be588c5a58743",class:d(a+"__content--scrollable__top-scrim",{[a+"__content--scrollable__top-scrim--open"]:this.scrollableContentState&&!this.scrollableContentState.atTop}),"aria-hidden":"true"}),t("slot",{key:"5dfc1e4efa4d8c76779056a8e129e9086f7b274c",name:"content",onSlotchange:()=>this.checkContentSlot()}),this.dsScrollable&&this.hasContentSlot&&t("div",{key:"1891614721ba5cc9dcd12f57b60486cb3d30bab4",class:d(a+"__content--scrollable__bottom-scrim",{[a+"__content--scrollable__bottom-scrim--open"]:this.scrollableContentState&&!this.scrollableContentState.atBottom}),"aria-hidden":"true"})),t("div",{key:"d96c91412976c2f7d5587e474ba5ea903233d2a8",class:m},t("slot",{key:"cd7591f3727ddd6228c50699afddc74810f97adf",name:"footer",onSlotchange:()=>this.checkFooterSlot()})))))}static get watchers(){return{hasContentSlot:[{hasContentSlotObserver:0}],dsOpen:[{dsOpenObserver:0}]}}static get style(){return".ds-modal__KmYz6O{position:fixed;padding:0;border:0;margin:0;max-height:100vh;max-height:100dvh;min-height:100vh;min-height:100dvh;width:100vw;background-color:var(--ds-bgColor-transparent-onLight);overflow-y:hidden;inset:0}.ds-modal__KmYz6O--open{overflow-y:auto}.ds-modal__KmYz6O__positioner{pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;min-height:100dvh;padding-block:var(--ds-spacing-small) 0;margin-block:auto 0}@media (min-width: 30rem){.ds-modal__KmYz6O__positioner{justify-content:center;padding-block:var(--ds-spacing-small);margin-block:auto}}@media (min-width: 60rem){.ds-modal__KmYz6O__positioner{padding-block:var(--ds-spacing-xLarge)}}.ds-modal__KmYz6O__container{pointer-events:auto;cursor:unset;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white);box-shadow:var(--ds-shadow-overlay);scale:0.98;opacity:0;transform:translateY(0.75rem);transition:scale var(--ds-modal-transition-out-duration) ease-out, opacity var(--ds-modal-transition-out-duration) ease-out, transform var(--ds-modal-transition-out-duration) ease-out}@media (min-width: 30rem){.ds-modal__KmYz6O__container{margin:auto;width:fit-content;max-width:calc(100vw - 2 * var(--ds-spacing-small))}}@media (min-width: 60rem){.ds-modal__KmYz6O__container{max-width:calc(100vw - 2 * var(--ds-spacing-xLarge))}}.ds-modal__KmYz6O__container--full{width:100%}@media (min-width: 30rem){.ds-modal__KmYz6O__container--small{width:480px}.ds-modal__KmYz6O__container--medium{width:640px}.ds-modal__KmYz6O__container--large{width:800px}}.ds-modal__KmYz6O__container--scrollable{display:flex;flex-direction:column;overflow:hidden;max-height:calc(100vh + calc(-1 * var(--ds-spacing-small)));max-height:calc(100dvh + calc(-1 * var(--ds-spacing-small)));min-height:calc(320px - 2 * var(--ds-spacing-small))}@media (min-width: 30rem){.ds-modal__KmYz6O__container--scrollable{max-height:calc(100vh + calc(-2 * var(--ds-spacing-small)));max-height:calc(100dvh + calc(-2 * var(--ds-spacing-small)))}}@media (min-width: 60rem){.ds-modal__KmYz6O__container--scrollable{max-height:calc(100vh + calc(-2 * var(--ds-spacing-xLarge)));max-height:calc(100dvh + calc(-2 * var(--ds-spacing-xLarge)))}}.ds-modal__KmYz6O--open .ds-modal__KmYz6O__container{scale:1;opacity:1;transform:translateY(0)}.ds-modal__KmYz6O--in .ds-modal__KmYz6O__container{transition:scale var(--ds-modal-transition-in-duration) ease-out, opacity var(--ds-modal-transition-in-duration) ease-out, transform var(--ds-modal-transition-in-duration) ease-out}@media (prefers-reduced-motion: reduce){.ds-modal__KmYz6O__container,.ds-modal__KmYz6O--in .ds-modal__KmYz6O__container{transition:none}}.ds-modal__KmYz6O__header{position:relative;display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-spacing-2xSmall);padding-block:var(--ds-spacing-small);padding-inline:var(--ds-spacing-small)}@media (min-width: 30rem){.ds-modal__KmYz6O__header{padding-block:var(--ds-spacing-medium) var(--ds-spacing-small);padding-inline:var(--ds-spacing-medium)}}.ds-modal__KmYz6O__header--sticky{position:sticky;top:0;background-color:var(--ds-bgColor-white);border-block-end:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light)}.ds-modal__KmYz6O__header__heading:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-modal__KmYz6O__header__heading{display:flex;gap:var(--ds-spacing-xSmall)}.ds-modal__KmYz6O__header__heading__text{margin-block:var(--ds-spacing-4xSmall)}@media (min-width: 60rem){.ds-modal__KmYz6O__header__heading__text{margin-block:calc(var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall))}}.ds-modal__KmYz6O__header__heading__icon{display:block;margin-block:var(--ds-spacing-4xSmall);margin-inline-end:var(--ds-spacing-3xSmall)}@media (min-width: 60rem){.ds-modal__KmYz6O__header__heading__icon{margin-block:var(--ds-spacing-3xSmall)}}.ds-modal__KmYz6O__header__close-button{margin-inline-start:auto}@media (min-width: 60rem){.ds-modal__KmYz6O__header__close-button{margin-block:var(--ds-spacing-4xSmall)}}.ds-modal__KmYz6O__content:focus-visible{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 1)}.ds-modal__KmYz6O__content{position:relative;padding-inline:var(--ds-spacing-small);flex:1;min-height:0}@media (min-width: 30rem){.ds-modal__KmYz6O__content{padding-inline:var(--ds-spacing-medium)}}.ds-modal__KmYz6O__content--padded{padding-block-end:var(--ds-spacing-small)}@media (min-width: 30rem){.ds-modal__KmYz6O__content--padded{padding-block-end:var(--ds-spacing-medium)}}.ds-modal__KmYz6O__content--scrollable{overflow-y:auto;padding-block-end:unset}.ds-modal__KmYz6O__content--scrollable__top-scrim,.ds-modal__KmYz6O__content--scrollable__bottom-scrim{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-modal__KmYz6O__content--scrollable__top-scrim--open,.ds-modal__KmYz6O__content--scrollable__bottom-scrim--open{display:block}.ds-modal__KmYz6O__content--scrollable__top-scrim{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%)}.ds-modal__KmYz6O__content--scrollable__bottom-scrim{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-bgColor-transparent-onLight) 100%)}.ds-modal__KmYz6O__content--scrollable:focus-visible .ds-modal__KmYz6O__content--scrollable__top-scrim{top:var(--ds-borderWidth-thin)}.ds-modal__KmYz6O__content--scrollable:focus-visible .ds-modal__KmYz6O__content--scrollable__bottom-scrim{bottom:var(--ds-borderWidth-thin)}.ds-modal__KmYz6O__footer{position:relative}.ds-modal__KmYz6O__footer:not(:empty){display:flex;flex-direction:column;padding:var(--ds-spacing-small);gap:var(--ds-spacing-xSmall)}@media (min-width: 30rem){.ds-modal__KmYz6O__footer:not(:empty){flex-direction:row;padding:var(--ds-spacing-medium);gap:var(--ds-spacing-small)}}.ds-modal__KmYz6O__footer:not(:empty)+.ds-modal__KmYz6O__content{border-block-end:0}.ds-modal__KmYz6O__footer--sticky:not(:empty){position:sticky;bottom:0;background-color:var(--ds-bgColor-white);border-block-start:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light)}"}},[772,"ds-modal",{dsId:[1,"ds-id"],dsOpen:[4,"ds-open"],dsCloseable:[4,"ds-closeable"],dsVariant:[1,"ds-variant"],dsIcon:[1,"ds-icon"],dsIconAriaLabel:[1,"ds-icon-aria-label"],dsSize:[1,"ds-size"],dsAutoFocusTarget:[1,"ds-auto-focus-target"],dsScrollable:[4,"ds-scrollable"],dsHeadingText:[1,"ds-heading-text"],dsHeadingLevel:[2,"ds-heading-level"],dsBackdropCloseable:[4,"ds-backdrop-closeable"],dsBackdropZIndex:[2,"ds-backdrop-z-index"],isGreaterThanEqualSmall:[32],transitionInProgress:[32],hasHeaderSlot:[32],hasContentSlot:[32],hasFooterSlot:[32],scrollableContentState:[32]},[[9,"resize","resizeListener"]],{hasContentSlot:[{hasContentSlotObserver:0}],dsOpen:[{dsOpenObserver:0}]}]);m([t("ds-backdrop",null),t("ds-button",null),t("ds-icon",{dsName:""})]);const x=z,y=function(){"undefined"!=typeof customElements&&["ds-modal","ds-backdrop","ds-button","ds-icon","ds-spinner","ds-visually-hidden"].forEach((a=>{switch(a){case"ds-modal":customElements.get(o(a))||customElements.define(o(a),z);break;case"ds-backdrop":customElements.get(o(a))||g();break;case"ds-button":customElements.get(o(a))||u();break;case"ds-icon":customElements.get(o(a))||v();break;case"ds-spinner":customElements.get(o(a))||f();break;case"ds-visually-hidden":customElements.get(o(a))||k()}}))};export{x as DsModal,y as defineCustomElement}