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

package/dist/components/ds-notification.js

@@ -1,222 +1 @@
-import { p as proxyCustomElement, M as Mixin, c as createEvent, f as forceUpdate, 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, o as omit, 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 { a as ariaDeprecationFactory, d as defineCustomElement$4 } from './p-DIxFOW85.js';
-import { d as defineCustomElement$5 } from './p-CBTcmEBq.js';
-import { d as defineCustomElement$3 } from './p-Dq55XDgV.js';
-import { d as defineCustomElement$2 } from './p-Cq_RwLX7.js';
-
-const dsNotificationCss = ".sc-ds-notification-h{display:block;width:100%}.ds-notification__oSBnIJ.sc-ds-notification{padding:var(--ds-spacing-xSmall, 12px)}.ds-notification__oSBnIJ.ds-notification__oSBnIJ--neutral.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-neutral);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__oSBnIJ.ds-notification__oSBnIJ--neutral.sc-ds-notification .ds-notification__oSBnIJ__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__oSBnIJ.ds-notification__oSBnIJ--neutralWhite.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-white);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__oSBnIJ.ds-notification__oSBnIJ--neutralWhite.sc-ds-notification .ds-notification__oSBnIJ__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__oSBnIJ.ds-notification__oSBnIJ--info.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-info);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-info);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__oSBnIJ.ds-notification__oSBnIJ--info.sc-ds-notification .ds-notification__oSBnIJ__icon.sc-ds-notification{color:var(--ds-iconColor-info);margin-bottom:auto}.ds-notification__oSBnIJ.ds-notification__oSBnIJ--success.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-success);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-success);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__oSBnIJ.ds-notification__oSBnIJ--success.sc-ds-notification .ds-notification__oSBnIJ__icon.sc-ds-notification{color:var(--ds-iconColor-success);margin-bottom:auto}.ds-notification__oSBnIJ.ds-notification__oSBnIJ--attention.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-attention);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-attention);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__oSBnIJ.ds-notification__oSBnIJ--attention.sc-ds-notification .ds-notification__oSBnIJ__icon.sc-ds-notification{color:var(--ds-iconColor-attention);margin-bottom:auto}.ds-notification__oSBnIJ.ds-notification__oSBnIJ--danger.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-danger);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-danger);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__oSBnIJ.ds-notification__oSBnIJ--danger.sc-ds-notification .ds-notification__oSBnIJ__icon.sc-ds-notification{color:var(--ds-iconColor-danger);margin-bottom:auto}.ds-notification__oSBnIJ__content.sc-ds-notification{display:flex;gap:var(--ds-spacing-2xSmall, 8px);max-width:1376px;margin:0 auto}.ds-notification__oSBnIJ__content__text.sc-ds-notification{display:flex;padding:var(--ds-spacing-4xSmall, 2px) 0;flex-direction:column;align-items:flex-start;gap:var(--ds-spacing-4xSmall, 2px);flex:1 0 0}.ds-notification__oSBnIJ__content__text__heading.sc-ds-notification,.ds-notification__oSBnIJ__content__text__description.sc-ds-notification{font-family:var(--ds-fontFamily-body);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide)}.ds-notification__oSBnIJ__content__text__description.sc-ds-notification{max-width:var(--ds-notification-description-max-width, 550px)}";
-
-const notificationIdGenerator = idGenerator('ds-notification');
-const variants = ['neutral', 'neutralWhite', 'info', 'success', 'attention', 'danger'];
-const customizableIconVariants = ['neutral', 'neutralWhite', 'info'];
-const isCustomizableIconVariant = (variant) => customizableIconVariants.includes(variant);
-const DsNotification$1 = proxyCustomElement(class DsNotification extends Mixin(ariaDeprecationFactory) {
-    constructor(registerHost) {
-        super(false);
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.dsDismiss = createEvent(this, "dsDismiss");
-    }
-    dsAriaLabel;
-    dsAriaLabelledby;
-    dsRole;
-    inheritedAttributes = {};
-    get el() { return this; }
-    dsDismiss;
-    dsId = notificationIdGenerator.next().value;
-    variant = 'neutral';
-    get dsVariant() {
-        return this.variant;
-    }
-    set dsVariant(value) {
-        if (!variants.includes(value))
-            return;
-        this.variant = value;
-    }
-    dsDismissable = false;
-    dsDismissButtonHiddenAssistiveText;
-    dsHeading;
-    headingLevel = 2;
-    get dsHeadingLevel() {
-        return this.headingLevel;
-    }
-    set dsHeadingLevel(value) {
-        if (value < 1)
-            return;
-        this.headingLevel = value;
-    }
-    icon;
-    get dsIcon() {
-        return this.icon;
-    }
-    set dsIcon(value) {
-        if (value && isCustomizableIconVariant(this.variant)) {
-            this.icon = value;
-            return;
-        }
-        this.icon = this.variantIcon;
-    }
-    dsDescription;
-    dsDescriptionMaxWidth = '550px';
-    get variantIcon() {
-        switch (this.variant) {
-            case 'info':
-                return 'info_fill';
-            case 'success':
-                return 'check_circle_fill';
-            case 'attention':
-                return 'warning_fill';
-            case 'danger':
-                return 'report_fill';
-            case 'neutral':
-            case 'neutralWhite':
-            default:
-                return 'help_fill';
-        }
-    }
-    get DsIcon() {
-        return transformTagName('ds-icon', 'ds-notification', this.el);
-    }
-    get DsButton() {
-        return transformTagName('ds-button', 'ds-notification', this.el);
-    }
-    get DsVisuallyHidden() {
-        return transformTagName('ds-visually-hidden', 'ds-notification', this.el);
-    }
-    get headingId() {
-        return `${this.dsId}-heading`;
-    }
-    get close() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Sulje';
-            case 'sv':
-                return 'Stäng';
-            default:
-                return 'Close';
-        }
-    }
-    get notification() {
-        switch (getLanguage()) {
-            case 'fi':
-                return 'Ilmoitus';
-            case 'sv':
-                return 'Meddelande';
-            default:
-                return 'Notification';
-        }
-    }
-    get ariaLabel() {
-        if (this.inheritedAttributes['aria-label']) {
-            return this.inheritedAttributes['aria-label'];
-        }
-        if (!this.dsHeading || !this.dsDescription) {
-            return this.notification;
-        }
-        return undefined;
-    }
-    get ariaLabelledBy() {
-        if (this.inheritedAttributes['aria-labelledby']) {
-            return this.inheritedAttributes['aria-labelledby'];
-        }
-        if (this.dsHeading && this.dsDescription) {
-            return this.headingId;
-        }
-        return undefined;
-    }
-    ariaAttributeObserver(newValue, _oldValue, propName) {
-        this.inheritedAttributes = {
-            ...this.inheritedAttributes,
-            [propName]: newValue,
-        };
-        forceUpdate(this);
-    }
-    componentWillLoad() {
-        this.getDeprecationWarningsForAriaAttributes(this.el);
-        this.inheritedAttributes = {
-            ...inheritAttributes(this, this.el),
-            ...inheritAriaAttributes(this.el),
-        };
-    }
-    handleDismissButtonClick = () => {
-        this.dsDismiss.emit();
-    };
-    render() {
-        const baseClass = cx('ds-notification');
-        const contentClass = `${baseClass}__content`;
-        const textClass = `${contentClass}__text`;
-        const classes = classNames(baseClass, `${baseClass}--${this.variant}`);
-        const ariaLabel = this.dsAriaLabel ?? this.inheritedAttributes['aria-label'] ?? this.ariaLabel;
-        const ariaLabelledby = this.dsAriaLabelledby ?? this.inheritedAttributes['aria-labelledby'] ?? this.ariaLabelledBy;
-        const role = this.dsRole ?? this.inheritedAttributes['role'] ?? 'group';
-        const restAttributes = omit(this.inheritedAttributes, ['aria-labelledby', 'aria-label', 'role']);
-        return (h("div", { key: '4529db2a1680f233c8d155133a400830346bb7fe', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, h("div", { key: '503e52c69422e97f41cfc4e107babfe297acb2b4', class: contentClass }, this.dsIcon && (h("div", { key: 'fad4654bae659b880dc961df9d413016d77a3bfb', class: `${baseClass}__icon ds-p-3xs` }, h(this.DsIcon, { key: '28e2b9e11a8457571e839e9a2c0eaf790b5944d3', dsName: this.dsIcon }))), h("div", { key: '90bd6f2ede1758a26f1171a02c6a7a9a0e895def', class: textClass }, h("slot", { key: 'be1760ff79c03a9de088e566fa37bb0ab6e78410', name: "heading" }, this.dsHeading && (h("div", { key: '60b168f1d0976970f93eed585a9557c4fd27a986', class: `${textClass}__heading ds-text-semibold-lg`, id: this.headingId, role: this.dsDescription ? 'heading' : undefined, 'aria-level': this.dsDescription ? this.dsHeadingLevel : undefined }, this.dsHeading))), h("slot", { key: '936e108671e19603d21caa4b6312a123bb3f1af7', name: "description" }, this.dsDescription && (h("div", { key: '75d188cabad83a0ac0c3c835c112559761710063', class: `${textClass}__description ds-text-regular-md`, style: { '--ds-notification-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("slot", { key: '95b462dfc54784c44bd3aa3af8d671cd66421024' })), this.dsDismissable && (h(this.DsButton, { key: '87a7782e83cf61a5eb62101afca9b7923a498ba5', dsId: `${this.dsId}-dismiss-button`, dsIcon: "close", dsVariant: "supplementary", dsColour: "black", dsSize: "small", dsAriaLabelledby: [`${this.dsId}-dismiss-button`, ariaLabelledby].filter(Boolean).join(' '), onClick: this.handleDismissButtonClick }, h(this.DsVisuallyHidden, { key: 'd9131f6eefb593fe82e56b0205b453fe176716c2', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close))))));
-    }
-    static get watchers() { return {
-        "aria-label": ["ariaAttributeObserver"],
-        "aria-labelledby": ["ariaAttributeObserver"]
-    }; }
-    static get style() { return dsNotificationCss; }
-}, [262, "ds-notification", {
-        "dsMuteAriaDeprecationWarning": [4, "ds-mute-aria-deprecation-warning"],
-        "dsAriaLabel": [1, "ds-aria-label"],
-        "dsAriaLabelledby": [1, "ds-aria-labelledby"],
-        "dsRole": [1, "ds-role"],
-        "dsId": [1, "ds-id"],
-        "dsVariant": [6145, "ds-variant"],
-        "dsDismissable": [4, "ds-dismissable"],
-        "dsDismissButtonHiddenAssistiveText": [1, "ds-dismiss-button-hidden-assistive-text"],
-        "dsHeading": [1, "ds-heading"],
-        "dsHeadingLevel": [6146, "ds-heading-level"],
-        "dsIcon": [6145, "ds-icon"],
-        "dsDescription": [1, "ds-description"],
-        "dsDescriptionMaxWidth": [1, "ds-description-max-width"]
-    }, undefined, {
-        "aria-label": ["ariaAttributeObserver"],
-        "aria-labelledby": ["ariaAttributeObserver"]
-    }]);
-declareComponentDependencies([h("ds-icon", { dsName: "" }), h("ds-button", null), h("ds-visually-hidden", null)]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-notification", "ds-button", "ds-icon", "ds-spinner", "ds-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-notification":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsNotification$1);
-            }
-            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 DsNotification = DsNotification$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsNotification, defineCustomElement };
+import{p as i,M as t,c as s,f as o,h as a,t as n}from"./p-DZOTmLzP.js";import{c as e}from"./p-BfTCfPZ1.js";import{c as d}from"./p-ByHAbBpc.js";import{i as r,t as c,o as l,d as f}from"./p-J5Ghj1_T.js";import{i as h,a as _}from"./p-BecId8t2.js";import{g as b}from"./p-CHu0W_4n.js";import{a as m,d as u}from"./p-CeglrwZj.js";import{d as g}from"./p-NoqVzqGs.js";import{d as p}from"./p-DLh_CSNT.js";import{d as v}from"./p-DCn1Mkl6.js";const x=r("ds-notification"),O=["neutral","neutralWhite","info","success","attention","danger"],z=["neutral","neutralWhite","info"],y=i(class extends(t(m)){constructor(i){super(!1),!1!==i&&this.__registerHost(),this.dsDismiss=s(this,"dsDismiss",7)}dsAriaLabel;dsAriaLabelledby;dsRole;inheritedAttributes={};get el(){return this}dsDismiss;dsId=x.next().value;variant="neutral";get dsVariant(){return this.variant}set dsVariant(i){O.includes(i)&&(this.variant=i)}dsDismissable=!1;dsDismissButtonHiddenAssistiveText;dsHeading;headingLevel=2;get dsHeadingLevel(){return this.headingLevel}set dsHeadingLevel(i){i<1||(this.headingLevel=i)}icon;get dsIcon(){return this.icon}set dsIcon(i){this.icon=i&&(()=>z.includes(this.variant))()?i:this.variantIcon}dsDescription;dsDescriptionMaxWidth="550px";get variantIcon(){switch(this.variant){case"info":return"info_fill";case"success":return"check_circle_fill";case"attention":return"warning_fill";case"danger":return"report_fill";default:return"help_fill"}}get DsIcon(){return c("ds-icon","ds-notification",this.el)}get DsButton(){return c("ds-button","ds-notification",this.el)}get DsVisuallyHidden(){return c("ds-visually-hidden","ds-notification",this.el)}get headingId(){return this.dsId+"-heading"}get close(){switch(b()){case"fi":return"Sulje";case"sv":return"Stäng";default:return"Close"}}get notification(){switch(b()){case"fi":return"Ilmoitus";case"sv":return"Meddelande";default:return"Notification"}}get ariaLabel(){return this.inheritedAttributes["aria-label"]?this.inheritedAttributes["aria-label"]:this.dsHeading&&this.dsDescription?void 0:this.notification}get ariaLabelledBy(){return this.inheritedAttributes["aria-labelledby"]?this.inheritedAttributes["aria-labelledby"]:this.dsHeading&&this.dsDescription?this.headingId:void 0}ariaAttributeObserver(i,t,s){this.inheritedAttributes={...this.inheritedAttributes,[s]:i},o(this)}componentWillLoad(){this.getDeprecationWarningsForAriaAttributes(this.el),this.inheritedAttributes={..._(this,this.el),...h(this.el)}}handleDismissButtonClick=()=>{this.dsDismiss.emit()};render(){const i=d("ds-notification"),t=i+"__content",s=t+"__text",o=e(i,`${i}--${this.variant}`),n=this.dsAriaLabel??this.inheritedAttributes["aria-label"]??this.ariaLabel,r=this.dsAriaLabelledby??this.inheritedAttributes["aria-labelledby"]??this.ariaLabelledBy,c=this.dsRole??this.inheritedAttributes.role??"group",f=l(this.inheritedAttributes,["aria-labelledby","aria-label","role"]);return a("div",{key:"2c7be9f4ca5c418b5c61bab132d4411bc004600a",class:o,id:this.dsId,role:c,"aria-label":n,"aria-labelledby":r,...f},a("div",{key:"baa8bf00a8ff422725dfa35d7aa42ce1b447a0c9",class:t},this.dsIcon&&a("div",{key:"d0352dd16b66822af92b018f9e0d53ce1bce2699",class:i+"__icon ds-p-3xs"},a(this.DsIcon,{key:"b8c98820afc69339a667e20b0daaef7c8145c229",dsName:this.dsIcon})),a("div",{key:"ab25e7e55e76721b70a96fd8cfe7f002e9677eca",class:s},a("slot",{key:"ec5ad0d4f45e5f0831e5dc670707d68d4989c7d4",name:"heading"},this.dsHeading&&a("div",{key:"e29e20300b860da979cb2285925348449b0ce2d5",class:s+"__heading ds-text-semibold-lg",id:this.headingId,role:this.dsDescription?"heading":void 0,"aria-level":this.dsDescription?this.dsHeadingLevel:void 0},this.dsHeading)),a("slot",{key:"86622fac36f1c0828e974ced4d5fae415fbffeb6",name:"description"},this.dsDescription&&a("div",{key:"b4161e753abf969b4fe2f895650bd32f5dfd8485",class:s+"__description ds-text-regular-md",style:{"--ds-notification-description-max-width":this.dsDescriptionMaxWidth}},this.dsDescription)),a("slot",{key:"d4d2cfb91ec5c17073c8a2963998379586016a3a"})),this.dsDismissable&&a(this.DsButton,{key:"992e2ed905ae9eaefdabf15e9a3c4c006f4d7977",dsId:this.dsId+"-dismiss-button",dsIcon:"close",dsVariant:"supplementary",dsColour:"black",dsSize:"small",dsAriaLabelledby:[this.dsId+"-dismiss-button",r].filter(Boolean).join(" "),onClick:this.handleDismissButtonClick},a(this.DsVisuallyHidden,{key:"e85535b98bd322df61f9b7dcc4f4a224f7d608f0",slot:"suffix",dsTag:"span"},this.dsDismissButtonHiddenAssistiveText||this.close))))}static get watchers(){return{"aria-label":[{ariaAttributeObserver:0}],"aria-labelledby":[{ariaAttributeObserver:0}]}}static get style(){return".sc-ds-notification-h{display:block;width:100%}.ds-notification__KmYz6O.sc-ds-notification{padding:var(--ds-spacing-xSmall, 12px)}.ds-notification__KmYz6O.ds-notification__KmYz6O--neutral.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-neutral);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__KmYz6O.ds-notification__KmYz6O--neutral.sc-ds-notification .ds-notification__KmYz6O__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__KmYz6O.ds-notification__KmYz6O--neutralWhite.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-white);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__KmYz6O.ds-notification__KmYz6O--neutralWhite.sc-ds-notification .ds-notification__KmYz6O__icon.sc-ds-notification{color:var(--ds-iconColor-default);margin-bottom:auto}.ds-notification__KmYz6O.ds-notification__KmYz6O--info.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-info);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-info);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__KmYz6O.ds-notification__KmYz6O--info.sc-ds-notification .ds-notification__KmYz6O__icon.sc-ds-notification{color:var(--ds-iconColor-info);margin-bottom:auto}.ds-notification__KmYz6O.ds-notification__KmYz6O--success.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-success);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-success);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__KmYz6O.ds-notification__KmYz6O--success.sc-ds-notification .ds-notification__KmYz6O__icon.sc-ds-notification{color:var(--ds-iconColor-success);margin-bottom:auto}.ds-notification__KmYz6O.ds-notification__KmYz6O--attention.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-attention);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-attention);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__KmYz6O.ds-notification__KmYz6O--attention.sc-ds-notification .ds-notification__KmYz6O__icon.sc-ds-notification{color:var(--ds-iconColor-attention);margin-bottom:auto}.ds-notification__KmYz6O.ds-notification__KmYz6O--danger.sc-ds-notification{color:var(--ds-textColor-default);background-color:var(--ds-bgColor-danger);border:var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-danger);margin-top:calc(-1 * var(--ds-borderWidth-hairline, 1px))}.ds-notification__KmYz6O.ds-notification__KmYz6O--danger.sc-ds-notification .ds-notification__KmYz6O__icon.sc-ds-notification{color:var(--ds-iconColor-danger);margin-bottom:auto}.ds-notification__KmYz6O__content.sc-ds-notification{display:flex;gap:var(--ds-spacing-2xSmall, 8px);max-width:1376px;margin:0 auto}.ds-notification__KmYz6O__content__text.sc-ds-notification{display:flex;padding:var(--ds-spacing-4xSmall, 2px) 0;flex-direction:column;align-items:flex-start;gap:var(--ds-spacing-4xSmall, 2px);flex:1 0 0}.ds-notification__KmYz6O__content__text__heading.sc-ds-notification,.ds-notification__KmYz6O__content__text__description.sc-ds-notification{font-family:var(--ds-fontFamily-body);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide)}.ds-notification__KmYz6O__content__text__description.sc-ds-notification{max-width:var(--ds-notification-description-max-width, 550px)}"}},[774,"ds-notification",{dsMuteAriaDeprecationWarning:[4,"ds-mute-aria-deprecation-warning"],dsAriaLabel:[1,"ds-aria-label"],dsAriaLabelledby:[1,"ds-aria-labelledby"],dsRole:[1,"ds-role"],dsId:[1,"ds-id"],dsVariant:[6145,"ds-variant"],dsDismissable:[4,"ds-dismissable"],dsDismissButtonHiddenAssistiveText:[1,"ds-dismiss-button-hidden-assistive-text"],dsHeading:[1,"ds-heading"],dsHeadingLevel:[6146,"ds-heading-level"],dsIcon:[6145,"ds-icon"],dsDescription:[1,"ds-description"],dsDescriptionMaxWidth:[1,"ds-description-max-width"]},void 0,{"aria-label":[{ariaAttributeObserver:0}],"aria-labelledby":[{ariaAttributeObserver:0}]}]);f([a("ds-icon",{dsName:""}),a("ds-button",null),a("ds-visually-hidden",null)]);const K=y,Y=function(){"undefined"!=typeof customElements&&["ds-notification","ds-button","ds-icon","ds-spinner","ds-visually-hidden"].forEach((i=>{switch(i){case"ds-notification":customElements.get(n(i))||customElements.define(n(i),y);break;case"ds-button":customElements.get(n(i))||g();break;case"ds-icon":customElements.get(n(i))||u();break;case"ds-spinner":customElements.get(n(i))||p();break;case"ds-visually-hidden":customElements.get(n(i))||v()}}))};export{K as DsNotification,Y as defineCustomElement}

package/dist/components/ds-option-group.js

@@ -1,80 +1 @@
-import { p as proxyCustomElement, H, h } from './p-GalXVdFP.js';
-import { c as classNames } from './p-BfTCfPZ1.js';
-import { t as transformTagName } from './p-J5Ghj1_T.js';
-import { c as cx } from './p-C34PGDVY.js';
-import { i as inheritAriaAttributes, a as inheritAttributes } from './p-BecId8t2.js';
-
-const dsOptionGroupCss = ".ds-option-group__oSBnIJ.sc-ds-option-group{display:block;font-family:var(--ds-fontFamily-body)}.ds-option-group__oSBnIJ--hidden.sc-ds-option-group{display:none}.ds-option-group__oSBnIJ.sc-ds-option-group ul.sc-ds-option-group{padding:0}.ds-option-group__oSBnIJ__label.sc-ds-option-group{position:sticky;display:block;top:0;background-color:var(--ds-bgColor-neutralLight);z-index:1;padding:var(--ds-spacing-2xSmall);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large)}.ds-option-group__oSBnIJ__label__shadow.sc-ds-option-group{box-shadow:var(--ds-shadow-overflow)}";
-
-const DsOptionGroup$1 = proxyCustomElement(class DsOptionGroup extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    inheritedAttributes = {};
-    get el() { return this; }
-    dsLabel;
-    dsHidden = false;
-    dsMouseDownPreventDefault = false;
-    groupId;
-    get DsOptionTag() {
-        return transformTagName('ds-option', 'ds-option-group', this.el);
-    }
-    dsLabelObserver(newValue) {
-        this.groupId = `ds-option-group-label-${newValue.replace(/\s+/g, '-').toLowerCase()}`;
-    }
-    async hasVisibleOptions() {
-        const options = Array.from(this.el.querySelectorAll(this.DsOptionTag));
-        return options.some(option => !option.dsHidden);
-    }
-    componentWillLoad() {
-        this.groupId = `ds-option-group-label-${this.dsLabel.replace(/\s+/g, '-').toLowerCase()}`;
-        this.inheritedAttributes = {
-            ...inheritAttributes(this, this.el),
-            ...inheritAriaAttributes(this.el, ['aria-labelledby']),
-        };
-    }
-    onMouseDown(event) {
-        if (this.dsMouseDownPreventDefault) {
-            event.preventDefault();
-        }
-    }
-    render() {
-        const baseClass = cx('ds-option-group');
-        return (h("div", { key: '2522430be2d00681a6b28f0a8c381846c66eca06', class: classNames(`${baseClass}`, {
-                [`${baseClass}--hidden`]: this.dsHidden,
-            }), role: "group", "aria-labelledby": this.groupId, ...this.inheritedAttributes }, h("div", { key: 'b5f646b7eeb45b942e2e65e6f59446371aff0363', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), h("slot", { key: '4d2777f84ba0b4d2725199785bab6e54a9fc4a34' })));
-    }
-    static get watchers() { return {
-        "dsLabel": ["dsLabelObserver"]
-    }; }
-    static get style() { return dsOptionGroupCss; }
-}, [262, "ds-option-group", {
-        "dsLabel": [1, "ds-label"],
-        "dsHidden": [4, "ds-hidden"],
-        "dsMouseDownPreventDefault": [4, "ds-mouse-down-prevent-default"],
-        "groupId": [32],
-        "hasVisibleOptions": [64]
-    }, [[0, "mousedown", "onMouseDown"]], {
-        "dsLabel": ["dsLabelObserver"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-option-group"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-option-group":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsOptionGroup$1);
-            }
-            break;
-    } });
-}
-
-const DsOptionGroup = DsOptionGroup$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsOptionGroup, defineCustomElement };
+import{p as s,H as o,h as t,t as e}from"./p-DZOTmLzP.js";import{c as d}from"./p-BfTCfPZ1.js";import{t as i}from"./p-J5Ghj1_T.js";import{c as r}from"./p-ByHAbBpc.js";import{i as n,a}from"./p-BecId8t2.js";const p=s(class extends o{constructor(s){super(),!1!==s&&this.__registerHost()}inheritedAttributes={};get el(){return this}dsLabel;dsHidden=!1;dsMouseDownPreventDefault=!1;groupId;get DsOptionTag(){return i("ds-option","ds-option-group",this.el)}dsLabelObserver(s){this.groupId="ds-option-group-label-"+s.replace(/\s+/g,"-").toLowerCase()}async hasVisibleOptions(){return Array.from(this.el.querySelectorAll(this.DsOptionTag)).some((s=>!s.dsHidden))}componentWillLoad(){this.groupId="ds-option-group-label-"+this.dsLabel.replace(/\s+/g,"-").toLowerCase(),this.inheritedAttributes={...a(this,this.el),...n(this.el,["aria-labelledby"])}}onMouseDown(s){this.dsMouseDownPreventDefault&&s.preventDefault()}render(){const s=r("ds-option-group");return t("div",{key:"b1161298f8ef8d2b305b9837a3d2f9501858837b",class:d(""+s,{[s+"--hidden"]:this.dsHidden}),role:"group","aria-labelledby":this.groupId,...this.inheritedAttributes},t("div",{key:"dff52700dd3d9aa86218b6a64969ea67970c2c3a",class:s+"__label",id:this.groupId},this.dsLabel),t("slot",{key:"3573bfa76edb767d6eb0fcef6dc752f4ed42cb64"}))}static get watchers(){return{dsLabel:[{dsLabelObserver:0}]}}static get style(){return".ds-option-group__KmYz6O.sc-ds-option-group{display:block;font-family:var(--ds-fontFamily-body)}.ds-option-group__KmYz6O--hidden.sc-ds-option-group{display:none}.ds-option-group__KmYz6O.sc-ds-option-group ul.sc-ds-option-group{padding:0}.ds-option-group__KmYz6O__label.sc-ds-option-group{position:sticky;display:block;top:0;background-color:var(--ds-bgColor-neutralLight);z-index:1;padding:var(--ds-spacing-2xSmall);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large)}.ds-option-group__KmYz6O__label__shadow.sc-ds-option-group{box-shadow:var(--ds-shadow-overflow)}"}},[774,"ds-option-group",{dsLabel:[1,"ds-label"],dsHidden:[4,"ds-hidden"],dsMouseDownPreventDefault:[4,"ds-mouse-down-prevent-default"],groupId:[32],hasVisibleOptions:[64]},[[0,"mousedown","onMouseDown"]],{dsLabel:[{dsLabelObserver:0}]}]),l=p,u=function(){"undefined"!=typeof customElements&&["ds-option-group"].forEach((s=>{"ds-option-group"===s&&(customElements.get(e(s))||customElements.define(e(s),p))}))};export{l as DsOptionGroup,u as defineCustomElement}

package/dist/components/ds-option.js

@@ -1,164 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-GalXVdFP.js';
-import { c as classNames } from './p-BfTCfPZ1.js';
-import { i as idGenerator, t as transformTagName, d as declareComponentDependencies } from './p-J5Ghj1_T.js';
-import { c as cx } from './p-C34PGDVY.js';
-import { i as inheritAriaAttributes, a as inheritAttributes } from './p-BecId8t2.js';
-import { d as defineCustomElement$2 } from './p-DIxFOW85.js';
-
-const dsOptionCss = ".ds-option__oSBnIJ.sc-ds-option{display:flex;align-items:center;justify-content:normal;min-height:2.5rem;padding:0.625rem var(--ds-spacing-xSmall);position:relative;cursor:pointer;background-color:var(--ds-bgColor-white);color:var(--ds-textColor-default);font-weight:var(--ds-fontWeight-regular);font-size:var(--ds-fontSize-16);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide)}.ds-option__oSBnIJ.sc-ds-option:not(.ds-option__oSBnIJ--multiple){justify-content:space-between}.ds-option__oSBnIJ--hidden.sc-ds-option{display:none}.ds-option__oSBnIJ--disabled.sc-ds-option{cursor:not-allowed;user-select:none;color:var(--ds-textColor-disabled-onLight)}.ds-option__oSBnIJ.sc-ds-option:hover:not(.ds-option__oSBnIJ--disabled){background-color:var(--ds-bgColor-white-hover)}.ds-option__oSBnIJ.sc-ds-option:active:not(.ds-option__oSBnIJ--disabled){background-color:var(--ds-bgColor-white-active)}.ds-option__oSBnIJ--active.sc-ds-option{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-black);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 1)}.ds-option__oSBnIJ--active.ds-option__oSBnIJ--selected.sc-ds-option:not(.ds-option__oSBnIJ--multiple){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-option__oSBnIJ--multiple.ds-option__oSBnIJ--disabled.sc-ds-option{color:var(--ds-textColor-default)}.ds-option__oSBnIJ--multiple.sc-ds-option .ds-option__oSBnIJ__checkbox.sc-ds-option{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white)}.ds-option__oSBnIJ--multiple.ds-option__oSBnIJ--disabled.sc-ds-option .ds-option__oSBnIJ__checkbox.sc-ds-option{border-color:var(--ds-borderColor-transparent);background-color:var(--ds-bgColor-disabled-onLight)}.ds-option__oSBnIJ--multiple.ds-option__oSBnIJ--disabled.sc-ds-option:not(.ds-option__oSBnIJ--selected) .ds-option__oSBnIJ__checkbox.sc-ds-option{border-color:var(--ds-borderColor-disabled-onLight)}.ds-option__oSBnIJ--selected.sc-ds-option .ds-option__oSBnIJ__checkbox.sc-ds-option{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent);color:var(--ds-textColor-white);padding:var(--ds-spacing-4xSmall)}.ds-option__oSBnIJ--selected.sc-ds-option:not(.ds-option__oSBnIJ--multiple){background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-option__oSBnIJ--selected.sc-ds-option:not(.ds-option__oSBnIJ--multiple).ds-option__oSBnIJ--disabled{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-option__oSBnIJ--selected.sc-ds-option:not(.ds-option__oSBnIJ--multiple) .ds-option__oSBnIJ__description.sc-ds-option{color:var(--ds-textColor-white)}.ds-option__oSBnIJ--selected.sc-ds-option:not(.ds-option__oSBnIJ--multiple) .ds-option__oSBnIJ__check-icon.sc-ds-option{visibility:visible;color:var(--ds-textColor-white)}.ds-option__oSBnIJ--selected.sc-ds-option:not(.ds-option__oSBnIJ--multiple).ds-option__oSBnIJ--disabled .ds-option__oSBnIJ__check-icon.sc-ds-option{color:var(--ds-textColor-disabled-onLight)}.ds-option__oSBnIJ--selected.sc-ds-option:not(.ds-option__oSBnIJ--multiple):hover:not(.ds-option__oSBnIJ--disabled){background-color:var(--ds-bgColor-primary-hover)}.ds-option__oSBnIJ--selected.sc-ds-option:not(.ds-option__oSBnIJ--multiple):active:not(.ds-option__oSBnIJ--disabled){background-color:var(--ds-bgColor-primary-active)}.ds-option__oSBnIJ__label.sc-ds-option{display:flex;flex-direction:column;flex:1 1 auto;font-family:var(--ds-fontFamily-body);min-width:0;grid-column:1;grid-row:1}.ds-option__oSBnIJ__check-icon.sc-ds-option{margin-left:var(--ds-spacing-small);flex-shrink:0;display:flex;align-items:center;height:100%}.ds-option__oSBnIJ__description.sc-ds-option{color:var(--ds-textColor-secondary);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);margin-top:var(--ds-spacing-3xSmall);line-height:1.3;grid-column:1;grid-row:2}.ds-option__oSBnIJ__description.sc-ds-option:not(:empty){display:block}";
-
-const optionIdGenerator = idGenerator('ds-option');
-const DsOption$1 = proxyCustomElement(class DsOption extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.dsClick = createEvent(this, "dsClick");
-        this.dsMounted = createEvent(this, "dsMounted");
-        this.dsValueChange = createEvent(this, "dsValueChange");
-        this.dsLabelChange = createEvent(this, "dsLabelChange");
-    }
-    get el() { return this; }
-    inheritedAttributes = {};
-    observer;
-    optionRef;
-    optionLabelTextRef;
-    dsClick;
-    dsMounted;
-    dsValueChange;
-    dsLabelChange;
-    dsId = optionIdGenerator.next().value;
-    dsValue;
-    dsLabel;
-    dsDisabled = false;
-    dsDescription;
-    dsActive = false;
-    dsSelected = false;
-    dsHidden = false;
-    dsMouseDownPreventDefault = false;
-    dsFocusOnActiveChange = true;
-    dsVariant = 'default';
-    internalTabIndex = -1;
-    get isMultiple() {
-        return this.dsVariant === 'multiple';
-    }
-    onMouseDown(event) {
-        if (this.dsMouseDownPreventDefault) {
-            event.preventDefault();
-        }
-    }
-    onClick() {
-        this.dsClick.emit();
-    }
-    dsActiveObserver(newValue) {
-        this.internalTabIndex = newValue && !this.dsDisabled ? 0 : -1;
-        if (newValue && !this.dsDisabled && this.dsFocusOnActiveChange) {
-            this.setFocus();
-        }
-    }
-    dsValueObserver(newValue, oldValue) {
-        this.dsValueChange.emit({ newValue, oldValue });
-    }
-    dsLabelObserver(newValue, oldValue) {
-        this.dsLabelChange.emit({ value: this.dsValue, label: newValue, newLabel: newValue, oldLabel: oldValue });
-    }
-    async getLabel() {
-        return this.optionLabelTextRef?.textContent || '';
-    }
-    async getGroup() {
-        return this.el.closest(transformTagName('ds-option-group', 'ds-option', this.el));
-    }
-    async setFocus() {
-        this.optionRef?.focus();
-    }
-    componentWillLoad() {
-        this.internalTabIndex = this.dsActive && !this.dsDisabled ? 0 : -1;
-        this.inheritedAttributes = {
-            ...inheritAttributes(this, this.el, ['tabindex']),
-            ...inheritAriaAttributes(this.el, ['aria-selected', 'aria-disabled', 'aria-hidden']),
-        };
-    }
-    componentDidLoad() {
-        this.dsMounted.emit();
-        let oldLabel = this.optionLabelTextRef?.textContent || '';
-        this.observer = new MutationObserver(mutations => {
-            const newLabel = this.optionLabelTextRef?.textContent || '';
-            for (const mutation of mutations) {
-                if (mutation.type === 'childList' || mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0) {
-                    this.dsLabelChange.emit({
-                        value: this.dsValue,
-                        label: newLabel,
-                        newLabel,
-                        oldLabel,
-                    });
-                }
-            }
-            oldLabel = newLabel;
-        });
-        this.observer.observe(this.optionLabelTextRef, {
-            childList: true,
-        });
-    }
-    render() {
-        const baseClass = cx('ds-option');
-        const DsIcon = transformTagName('ds-icon', 'ds-option', this.el);
-        return (h("div", { key: 'bb04c65dc3caa755b68c857909841ba7e01062c9', ref: el => (this.optionRef = el), id: this.dsId, class: classNames(baseClass, {
-                [`${baseClass}--multiple`]: this.isMultiple,
-                [`${baseClass}--active`]: this.dsActive,
-                [`${baseClass}--selected`]: this.dsSelected,
-                [`${baseClass}--disabled`]: this.dsDisabled,
-                [`${baseClass}--hidden`]: this.dsHidden,
-            }), role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), "aria-hidden": String(this.dsHidden), tabIndex: this.internalTabIndex, ...this.inheritedAttributes }, this.isMultiple && (h("span", { key: 'e9dd6caa4d6b1361bf2be12510009babf4ed6091', class: `${baseClass}__checkbox` }, this.dsSelected && (h(DsIcon, { key: '8dd1b3e8406c3b4a94aa0875be7471bf36619f60', class: `${baseClass}__checkbox__icon`, dsName: "check_small", dsSize: "1.25rem", dsColour: this.dsDisabled ? 'ds-textColor-disabled-onLight' : 'ds-textColor-white' })))), h(Fragment, { key: '500b7bfd93c36617382081a67d4e2ceae4e4bd48' }, h("span", { key: '71c0bcdc54ca94d20d92e0f935ecbcdeb070322f' }, h("span", { key: 'a53462d0aad23b33b5b5cb0177153319f179721a', class: `${baseClass}__label`, ref: el => (this.optionLabelTextRef = el) }, h("slot", { key: '702bd21da288d1bb6550e03581f5318929949bcc' }, this.dsLabel)), this.dsDescription && h("span", { key: 'e4ade35a738c189bbb9f72dbb7aede215dc7b942', class: `${baseClass}__description` }, this.dsDescription)), !this.isMultiple && this.dsSelected && h(DsIcon, { key: 'de13ceb3ffba87571d2785270480a17447e4df19', dsName: "check", class: `${baseClass}__check-icon` }))));
-    }
-    static get watchers() { return {
-        "dsActive": ["dsActiveObserver"],
-        "dsValue": ["dsValueObserver"],
-        "dsLabel": ["dsLabelObserver"]
-    }; }
-    static get style() { return dsOptionCss; }
-}, [262, "ds-option", {
-        "dsId": [513, "ds-id"],
-        "dsValue": [513, "ds-value"],
-        "dsLabel": [1, "ds-label"],
-        "dsDisabled": [4, "ds-disabled"],
-        "dsDescription": [1, "ds-description"],
-        "dsActive": [516, "ds-active"],
-        "dsSelected": [516, "ds-selected"],
-        "dsHidden": [4, "ds-hidden"],
-        "dsMouseDownPreventDefault": [4, "ds-mouse-down-prevent-default"],
-        "dsFocusOnActiveChange": [4, "ds-focus-on-active-change"],
-        "dsVariant": [1, "ds-variant"],
-        "internalTabIndex": [32],
-        "getLabel": [64],
-        "getGroup": [64],
-        "setFocus": [64]
-    }, [[0, "mousedown", "onMouseDown"], [0, "click", "onClick"]], {
-        "dsActive": ["dsActiveObserver"],
-        "dsValue": ["dsValueObserver"],
-        "dsLabel": ["dsLabelObserver"]
-    }]);
-declareComponentDependencies([h("ds-icon", { dsName: "" })]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-option", "ds-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-option":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsOption$1);
-            }
-            break;
-        case "ds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DsOption = DsOption$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsOption, defineCustomElement };
+import{p as o,H as s,c as e,h as t,F as d,t as i}from"./p-DZOTmLzP.js";import{c as n}from"./p-BfTCfPZ1.js";import{i as r,t as a,d as l}from"./p-J5Ghj1_T.js";import{c}from"./p-ByHAbBpc.js";import{i as p,a as h}from"./p-BecId8t2.js";import{d as b}from"./p-CeglrwZj.js";const _=r("ds-option"),m=o(class extends s{constructor(o){super(),!1!==o&&this.__registerHost(),this.dsClick=e(this,"dsClick",7),this.dsMounted=e(this,"dsMounted",7),this.dsValueChange=e(this,"dsValueChange",7),this.dsLabelChange=e(this,"dsLabelChange",7)}get el(){return this}inheritedAttributes={};observer;optionRef;optionLabelTextRef;dsClick;dsMounted;dsValueChange;dsLabelChange;dsId=_.next().value;dsValue;dsLabel;dsDisabled=!1;dsDescription;dsActive=!1;dsSelected=!1;dsHidden=!1;dsMouseDownPreventDefault=!1;dsFocusOnActiveChange=!0;dsVariant="default";internalTabIndex=-1;get isMultiple(){return"multiple"===this.dsVariant}onMouseDown(o){this.dsMouseDownPreventDefault&&o.preventDefault()}onClick(){this.dsClick.emit()}dsActiveObserver(o){this.internalTabIndex=o&&!this.dsDisabled?0:-1,o&&!this.dsDisabled&&this.dsFocusOnActiveChange&&this.setFocus()}dsValueObserver(o,s){this.dsValueChange.emit({newValue:o,oldValue:s})}dsLabelObserver(o,s){this.dsLabelChange.emit({value:this.dsValue,label:o,newLabel:o,oldLabel:s})}async getLabel(){return this.optionLabelTextRef?.textContent||""}async getGroup(){return this.el.closest(a("ds-option-group","ds-option",this.el))}async setFocus(){this.optionRef?.focus()}componentWillLoad(){this.internalTabIndex=this.dsActive&&!this.dsDisabled?0:-1,this.inheritedAttributes={...h(this,this.el,["tabindex"]),...p(this.el,["aria-selected","aria-disabled","aria-hidden"])}}componentDidLoad(){this.dsMounted.emit();let o=this.optionLabelTextRef?.textContent||"";this.observer=new MutationObserver((s=>{const e=this.optionLabelTextRef?.textContent||"";for(const t of s)("childList"===t.type||t.addedNodes.length>0||t.removedNodes.length>0)&&this.dsLabelChange.emit({value:this.dsValue,label:e,newLabel:e,oldLabel:o});o=e})),this.observer.observe(this.optionLabelTextRef,{childList:!0})}render(){const o=c("ds-option"),s=a("ds-icon","ds-option",this.el);return t("div",{key:"f3b3d9431c291de33bc44172db062ea4fcadd9ed",ref:o=>this.optionRef=o,id:this.dsId,class:n(o,{[o+"--multiple"]:this.isMultiple,[o+"--active"]:this.dsActive,[o+"--selected"]:this.dsSelected,[o+"--disabled"]:this.dsDisabled,[o+"--hidden"]:this.dsHidden}),role:"option","aria-selected":this.dsSelected+"","aria-disabled":this.dsDisabled+"","aria-hidden":this.dsHidden+"",tabIndex:this.internalTabIndex,...this.inheritedAttributes},this.isMultiple&&t("span",{key:"c3406f80f847bea5ee8b8074f7d337069980a222",class:o+"__checkbox"},this.dsSelected&&t(s,{key:"88f66a28771ca6238b3c3015e7ea5d01e3d4a9d6",class:o+"__checkbox__icon",dsName:"check_small",dsSize:"1.25rem",dsColour:this.dsDisabled?"ds-textColor-disabled-onLight":"ds-textColor-white"})),t(d,{key:"9cb09a61253d7aed983626a547209057994184a3"},t("span",{key:"1407f9ee7ba6faae1140335bc364fd552c3ca1f3"},t("span",{key:"b2dde5cbf32871dc64b9ea1456a9e16ab07e5490",class:o+"__label",ref:o=>this.optionLabelTextRef=o},t("slot",{key:"a78869160f7a66f6fe75b3b669b8633d595c2f60"},this.dsLabel)),this.dsDescription&&t("span",{key:"c243fd5a045bf4d2218bff0ac8234b035365de0c",class:o+"__description"},this.dsDescription)),!this.isMultiple&&this.dsSelected&&t(s,{key:"a3b690f4035cdc9619c2bfc1eb5d24f5a994a2e6",dsName:"check",class:o+"__check-icon"})))}static get watchers(){return{dsActive:[{dsActiveObserver:0}],dsValue:[{dsValueObserver:0}],dsLabel:[{dsLabelObserver:0}]}}static get style(){return".ds-option__KmYz6O.sc-ds-option{display:flex;align-items:center;justify-content:normal;min-height:2.5rem;padding:0.625rem var(--ds-spacing-xSmall);position:relative;cursor:pointer;background-color:var(--ds-bgColor-white);color:var(--ds-textColor-default);font-weight:var(--ds-fontWeight-regular);font-size:var(--ds-fontSize-16);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide)}.ds-option__KmYz6O.sc-ds-option:not(.ds-option__KmYz6O--multiple){justify-content:space-between}.ds-option__KmYz6O--hidden.sc-ds-option{display:none}.ds-option__KmYz6O--disabled.sc-ds-option{cursor:not-allowed;user-select:none;color:var(--ds-textColor-disabled-onLight)}.ds-option__KmYz6O.sc-ds-option:hover:not(.ds-option__KmYz6O--disabled){background-color:var(--ds-bgColor-white-hover)}.ds-option__KmYz6O.sc-ds-option:active:not(.ds-option__KmYz6O--disabled){background-color:var(--ds-bgColor-white-active)}.ds-option__KmYz6O--active.sc-ds-option{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-black);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 1)}.ds-option__KmYz6O--active.ds-option__KmYz6O--selected.sc-ds-option:not(.ds-option__KmYz6O--multiple){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-option__KmYz6O--multiple.ds-option__KmYz6O--disabled.sc-ds-option{color:var(--ds-textColor-default)}.ds-option__KmYz6O--multiple.sc-ds-option .ds-option__KmYz6O__checkbox.sc-ds-option{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white)}.ds-option__KmYz6O--multiple.ds-option__KmYz6O--disabled.sc-ds-option .ds-option__KmYz6O__checkbox.sc-ds-option{border-color:var(--ds-borderColor-transparent);background-color:var(--ds-bgColor-disabled-onLight)}.ds-option__KmYz6O--multiple.ds-option__KmYz6O--disabled.sc-ds-option:not(.ds-option__KmYz6O--selected) .ds-option__KmYz6O__checkbox.sc-ds-option{border-color:var(--ds-borderColor-disabled-onLight)}.ds-option__KmYz6O--selected.sc-ds-option .ds-option__KmYz6O__checkbox.sc-ds-option{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent);color:var(--ds-textColor-white);padding:var(--ds-spacing-4xSmall)}.ds-option__KmYz6O--selected.sc-ds-option:not(.ds-option__KmYz6O--multiple){background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-option__KmYz6O--selected.sc-ds-option:not(.ds-option__KmYz6O--multiple).ds-option__KmYz6O--disabled{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-option__KmYz6O--selected.sc-ds-option:not(.ds-option__KmYz6O--multiple) .ds-option__KmYz6O__description.sc-ds-option{color:var(--ds-textColor-white)}.ds-option__KmYz6O--selected.sc-ds-option:not(.ds-option__KmYz6O--multiple) .ds-option__KmYz6O__check-icon.sc-ds-option{visibility:visible;color:var(--ds-textColor-white)}.ds-option__KmYz6O--selected.sc-ds-option:not(.ds-option__KmYz6O--multiple).ds-option__KmYz6O--disabled .ds-option__KmYz6O__check-icon.sc-ds-option{color:var(--ds-textColor-disabled-onLight)}.ds-option__KmYz6O--selected.sc-ds-option:not(.ds-option__KmYz6O--multiple):hover:not(.ds-option__KmYz6O--disabled){background-color:var(--ds-bgColor-primary-hover)}.ds-option__KmYz6O--selected.sc-ds-option:not(.ds-option__KmYz6O--multiple):active:not(.ds-option__KmYz6O--disabled){background-color:var(--ds-bgColor-primary-active)}.ds-option__KmYz6O__label.sc-ds-option{display:flex;flex-direction:column;flex:1 1 auto;font-family:var(--ds-fontFamily-body);min-width:0;grid-column:1;grid-row:1}.ds-option__KmYz6O__check-icon.sc-ds-option{margin-left:var(--ds-spacing-small);flex-shrink:0;display:flex;align-items:center;height:100%}.ds-option__KmYz6O__description.sc-ds-option{color:var(--ds-textColor-secondary);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);margin-top:var(--ds-spacing-3xSmall);line-height:1.3;grid-column:1;grid-row:2}.ds-option__KmYz6O__description.sc-ds-option:not(:empty){display:block}"}},[774,"ds-option",{dsId:[513,"ds-id"],dsValue:[513,"ds-value"],dsLabel:[1,"ds-label"],dsDisabled:[4,"ds-disabled"],dsDescription:[1,"ds-description"],dsActive:[516,"ds-active"],dsSelected:[516,"ds-selected"],dsHidden:[4,"ds-hidden"],dsMouseDownPreventDefault:[4,"ds-mouse-down-prevent-default"],dsFocusOnActiveChange:[4,"ds-focus-on-active-change"],dsVariant:[1,"ds-variant"],internalTabIndex:[32],getLabel:[64],getGroup:[64],setFocus:[64]},[[0,"mousedown","onMouseDown"],[0,"click","onClick"]],{dsActive:[{dsActiveObserver:0}],dsValue:[{dsValueObserver:0}],dsLabel:[{dsLabelObserver:0}]}]);l([t("ds-icon",{dsName:""})]);const u=m,v=function(){"undefined"!=typeof customElements&&["ds-option","ds-icon"].forEach((o=>{switch(o){case"ds-option":customElements.get(i(o))||customElements.define(i(o),m);break;case"ds-icon":customElements.get(i(o))||b()}}))};export{u as DsOption,v as defineCustomElement}

package/dist/components/ds-options-message.js

@@ -1,6 +1 @@
-import { D as DsOptionsMessage$1, d as defineCustomElement$1 } from './p-DojNivUE.js';
-
-const DsOptionsMessage = DsOptionsMessage$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsOptionsMessage, defineCustomElement };
+import{D as o,d as s}from"./p-DPEf7K5A.js";const p=o,r=s;export{p as DsOptionsMessage,r as defineCustomElement}

package/dist/components/ds-options.js

@@ -1,6 +1 @@
-import { D as DsOptions$1, d as defineCustomElement$1 } from './p-CtRrVwoy.js';
-
-const DsOptions = DsOptions$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsOptions, defineCustomElement };
+import{D as s,d as o}from"./p-DGigVsWq.js";const p=s,r=o;export{p as DsOptions,r as defineCustomElement}

package/dist/components/ds-pagination-ellipsis.js

@@ -1,43 +1 @@
-import { p as proxyCustomElement, M as Mixin, h, d as Host } from './p-GalXVdFP.js';
-import { c as cx } from './p-C34PGDVY.js';
-import { p as paginationFactory } from './p-bCO1lLOR.js';
-
-const dsPaginationEllipsisCss = ".sc-ds-pagination-ellipsis-h{display:inline-flex;align-items:center;justify-content:center}.ds-pagination-ellipsis__oSBnIJ.sc-ds-pagination-ellipsis{min-height:var(--ds-link-cta-min-width, calc(var(--ds-spacing-large) + var(--ds-spacing-xSmall)));min-width:var(--ds-link-cta-min-width, calc(var(--ds-spacing-large) + var(--ds-spacing-xSmall)));padding:0;color:var(--ds-textColor-default);font-size:var(--ds-pagination-font-size, var(--ds-fontSize-18));align-content:center;text-align:center;user-select:none}";
-
-const DsPaginationEllipsis$1 = proxyCustomElement(class DsPaginationEllipsis extends Mixin(paginationFactory) {
-    constructor(registerHost) {
-        super(false);
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    get el() { return this; }
-    render() {
-        const baseClass = cx('ds-pagination-ellipsis');
-        const variant = this.paginationContext?.variant || 'medium';
-        const hostClass = cx(`ds-pagination-ellipsis-variant--${variant}`);
-        const ariaLabel = this.paginationContext?.texts.ellipsis || 'Ellipsis';
-        return (h(Host, { key: 'ea9311999a955758465ba2a7d0d10ba48a67eb8e', class: hostClass }, h("span", { key: '515eaeabc3b28d150b010885c9a9a876274235ca', class: baseClass, role: "img", "aria-label": ariaLabel }, "\u2026")));
-    }
-    static get style() { return dsPaginationEllipsisCss; }
-}, [258, "ds-pagination-ellipsis", {
-        "context": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-pagination-ellipsis"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-pagination-ellipsis":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsPaginationEllipsis$1);
-            }
-            break;
-    } });
-}
-
-const DsPaginationEllipsis = DsPaginationEllipsis$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsPaginationEllipsis, defineCustomElement };
+import{p as s,M as i,h as e,d as t,t as n}from"./p-DZOTmLzP.js";import{c as a}from"./p-ByHAbBpc.js";import{p as l}from"./p-BCA5l3hA.js";const c=s(class extends(i(l)){constructor(s){super(!1),!1!==s&&this.__registerHost()}get el(){return this}render(){const s=a("ds-pagination-ellipsis"),i=a("ds-pagination-ellipsis-variant--"+(this.paginationContext?.variant||"medium"));return e(t,{key:"0a3e284f6c60c4b36ac53d0b42de4e52f9e1e989",class:i},e("span",{key:"879286f1d496200d403161b0039fca97e6e2133c",class:s,role:"img","aria-label":this.paginationContext?.texts.ellipsis||"Ellipsis"},"…"))}static get style(){return".sc-ds-pagination-ellipsis-h{display:inline-flex;align-items:center;justify-content:center}.ds-pagination-ellipsis__KmYz6O.sc-ds-pagination-ellipsis{min-height:var(--ds-link-cta-min-width, calc(var(--ds-spacing-large) + var(--ds-spacing-xSmall)));min-width:var(--ds-link-cta-min-width, calc(var(--ds-spacing-large) + var(--ds-spacing-xSmall)));padding:0;color:var(--ds-textColor-default);font-size:var(--ds-pagination-font-size, var(--ds-fontSize-18));align-content:center;text-align:center;user-select:none}"}},[514,"ds-pagination-ellipsis",{context:[32]}]),r=c,o=function(){"undefined"!=typeof customElements&&["ds-pagination-ellipsis"].forEach((s=>{"ds-pagination-ellipsis"===s&&(customElements.get(n(s))||customElements.define(n(s),c))}))};export{r as DsPaginationEllipsis,o as defineCustomElement}