npm - @uh-design-system/component-library - Versions diffs - 1.1.0 → 1.2.0-rc.0 - Mend

@uh-design-system/component-library 1.1.0 → 1.2.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1671) hide show

package/dist/cjs/ds-option_2.cjs.entry.js CHANGED Viewed

@@ -1,12 +1,12 @@
 'use strict';
-var index = require('./index-JgJtlsd6.js');
+var index = require('./index-BLVteh3w.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var utils = require('./utils-CEhBgrbV.js');
-var cx = require('./cx-7_PEyDS7.js');
+var cx = require('./cx-C3dbeP9F.js');
 var attributes = require('./attributes-CdVB4RPe.js');
-const dsOptionCss = ".ds-option__JDwdTJ.sc-ds-option{display:flex;align-items:center;justify-content:space-between;min-height:2.5rem;padding:0.625rem var(--ds-spacing-small);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__JDwdTJ--hidden.sc-ds-option{display:none}.ds-option__JDwdTJ--disabled.sc-ds-option{cursor:not-allowed;user-select:none;color:var(--ds-textColor-disabled-onLight)}.ds-option__JDwdTJ.sc-ds-option:hover:not(.ds-option__JDwdTJ--disabled):not(.ds-option__JDwdTJ--selected){background-color:var(--ds-bgColor-white-hover)}.ds-option__JDwdTJ.sc-ds-option:active:not(.ds-option__JDwdTJ--disabled):not(.ds-option__JDwdTJ--selected){background-color:var(--ds-bgColor-white-active)}.ds-option__JDwdTJ--active.sc-ds-option{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);background-color:var(--ds-bgColor-white-active)}.ds-option__JDwdTJ--selected.sc-ds-option{background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-option__JDwdTJ--selected.sc-ds-option .ds-option__JDwdTJ__description.sc-ds-option{color:var(--ds-textColor-white)}.ds-option__JDwdTJ--selected.sc-ds-option .ds-option__JDwdTJ__check-icon.sc-ds-option{visibility:visible;color:var(--ds-textColor-white)}.ds-option__JDwdTJ--selected.sc-ds-option:hover:not(.ds-option__JDwdTJ--disabled){background-color:var(--ds-bgColor-primary-hover)}.ds-option__JDwdTJ--selected.sc-ds-option:active:not(.ds-option__JDwdTJ--disabled){background-color:var(--ds-bgColor-primary-active)}.ds-option__JDwdTJ__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__JDwdTJ__check-icon.sc-ds-option{margin-left:var(--ds-spacing-small);flex-shrink:0;display:flex;align-items:center;height:100%}.ds-option__JDwdTJ__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__JDwdTJ__description.sc-ds-option:not(:empty){display:block}";
+const dsOptionCss = ".ds-option__nkrEji.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__nkrEji.sc-ds-option:not(.ds-option__nkrEji--multiple){justify-content:space-between}.ds-option__nkrEji--hidden.sc-ds-option{display:none}.ds-option__nkrEji--disabled.sc-ds-option{cursor:not-allowed;user-select:none;color:var(--ds-textColor-disabled-onLight)}.ds-option__nkrEji.sc-ds-option:hover:not(.ds-option__nkrEji--disabled){background-color:var(--ds-bgColor-white-hover)}.ds-option__nkrEji.sc-ds-option:active:not(.ds-option__nkrEji--disabled){background-color:var(--ds-bgColor-white-active)}.ds-option__nkrEji--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__nkrEji--active.ds-option__nkrEji--selected.sc-ds-option:not(.ds-option__nkrEji--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__nkrEji--multiple.ds-option__nkrEji--disabled.sc-ds-option{color:var(--ds-textColor-default)}.ds-option__nkrEji--multiple.sc-ds-option .ds-option__nkrEji__checkbox.sc-ds-option{display:inline-block;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__nkrEji--multiple.ds-option__nkrEji--disabled.sc-ds-option .ds-option__nkrEji__checkbox.sc-ds-option{border-color:var(--ds-borderColor-transparent);background-color:var(--ds-bgColor-disabled-onLight)}.ds-option__nkrEji--multiple.ds-option__nkrEji--disabled.sc-ds-option:not(.ds-option__nkrEji--selected) .ds-option__nkrEji__checkbox.sc-ds-option{border-color:var(--ds-borderColor-disabled-onLight)}.ds-option__nkrEji--selected.sc-ds-option .ds-option__nkrEji__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__nkrEji--selected.sc-ds-option:not(.ds-option__nkrEji--multiple){background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white)}.ds-option__nkrEji--selected.sc-ds-option:not(.ds-option__nkrEji--multiple).ds-option__nkrEji--disabled{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-option__nkrEji--selected.sc-ds-option:not(.ds-option__nkrEji--multiple) .ds-option__nkrEji__description.sc-ds-option{color:var(--ds-textColor-white)}.ds-option__nkrEji--selected.sc-ds-option:not(.ds-option__nkrEji--multiple) .ds-option__nkrEji__check-icon.sc-ds-option{visibility:visible;color:var(--ds-textColor-white)}.ds-option__nkrEji--selected.sc-ds-option:not(.ds-option__nkrEji--multiple).ds-option__nkrEji--disabled .ds-option__nkrEji__check-icon.sc-ds-option{color:var(--ds-textColor-disabled-onLight)}.ds-option__nkrEji--selected.sc-ds-option:not(.ds-option__nkrEji--multiple):hover:not(.ds-option__nkrEji--disabled){background-color:var(--ds-bgColor-primary-hover)}.ds-option__nkrEji--selected.sc-ds-option:not(.ds-option__nkrEji--multiple):active:not(.ds-option__nkrEji--disabled){background-color:var(--ds-bgColor-primary-active)}.ds-option__nkrEji__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__nkrEji__check-icon.sc-ds-option{margin-left:var(--ds-spacing-small);flex-shrink:0;display:flex;align-items:center;height:100%}.ds-option__nkrEji__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__nkrEji__description.sc-ds-option:not(:empty){display:block}";
 const optionIdGenerator = utils.idGenerator('ds-option');
 const DsOption = class {
@@ -36,7 +36,11 @@ const DsOption = class {
     dsHidden = false;
     dsMouseDownPreventDefault = false;
     dsFocusOnActiveChange = true;
+    dsVariant = 'default';
     internalTabIndex = -1;
+    get isMultiple() {
+        return this.dsVariant === 'multiple';
+    }
     onMouseDown(event) {
         if (this.dsMouseDownPreventDefault) {
             event.preventDefault();
@@ -54,8 +58,8 @@ const DsOption = class {
     dsValueObserver(newValue, oldValue) {
         this.dsValueChange.emit({ newValue, oldValue });
     }
-    dsLabelObserver(newValue) {
-        this.dsLabelChange.emit({ value: this.dsValue, label: newValue });
+    dsLabelObserver(newValue, oldValue) {
+        this.dsLabelChange.emit({ value: this.dsValue, label: newValue, newLabel: newValue, oldLabel: oldValue });
     }
     async getLabel() {
         return this.optionLabelTextRef?.textContent || '';
@@ -75,15 +79,20 @@ const DsOption = class {
     }
     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) {
-                    const textNodes = Array.from(mutation.addedNodes).filter(node => node.nodeType === Node.TEXT_NODE);
-                    textNodes.forEach(textNode => {
-                        this.dsLabelChange.emit({ value: this.dsValue, label: textNode.textContent || '' });
+                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,
@@ -92,12 +101,13 @@ const DsOption = class {
     render() {
         const baseClass = cx.cx('ds-option');
         const DsIcon = utils.transformTagName('ds-icon', 'ds-option', this.el);
-        return (index.h("div", { key: '1af8d6bb7683ece8d8eceb1267d36e86e5576414', ref: el => (this.optionRef = el), id: this.dsId, class: index$1.classNames(baseClass, {
+        return (index.h("div", { key: '81fe9718003147cd1b8954513ec175dc219ac50e', ref: el => (this.optionRef = el), id: this.dsId, class: index$1.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 }, index.h("span", { key: '583ce453e28fb3e81c1c8afaecfac2e08afcaa46' }, index.h("span", { key: '897595343a6a05924a18ac499dd095badb744471', class: `${baseClass}__label`, ref: el => (this.optionLabelTextRef = el) }, index.h("slot", { key: '0520116439518d270cc5fc4a3a5aea4422e693a3' }, this.dsLabel)), this.dsDescription && index.h("span", { key: 'd75d7797163ce20b6ca628d8b7f724e6357174c1', class: `${baseClass}__description` }, this.dsDescription)), this.dsSelected && index.h(DsIcon, { key: 'a9c99f30f548fe245c1d6ec180d8c0bac5b5e844', dsName: "check", class: `${baseClass}__check-icon`, "aria-hidden": "true" })));
+            }), role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), "aria-hidden": String(this.dsHidden), tabIndex: this.internalTabIndex, ...this.inheritedAttributes }, this.isMultiple && (index.h("span", { key: 'f90215a6d4b9afedf691a745e3de6e387ea17676', class: `${baseClass}__checkbox` }, this.dsSelected && (index.h(DsIcon, { key: '70f286ff07bdff18b70fa68eef76cc24a7fb3e1d', class: `${baseClass}__checkbox__icon`, dsName: "ds_check_small", dsSize: "0.75rem", dsColour: this.dsDisabled ? 'ds-textColor-disabled-onLight' : 'ds-textColor-white', "aria-hidden": "true" })))), index.h(index.Fragment, { key: '1a8ebff852b30adb1e5f551ed89b1631d281dec4' }, index.h("span", { key: '401e5e39e26892958079bc001616fa967cc1bb09' }, index.h("span", { key: '049798334853059640495187bcc55f9ceb280cd7', class: `${baseClass}__label`, ref: el => (this.optionLabelTextRef = el) }, index.h("slot", { key: '68e4abc6b0365a58eb4ecb90c08fde384e88ca9d' }, this.dsLabel)), this.dsDescription && index.h("span", { key: '5e5327b0c916be092304084f7973eec9397691cb', class: `${baseClass}__description` }, this.dsDescription)), !this.isMultiple && this.dsSelected && index.h(DsIcon, { key: 'db5dffb1f42077c14160d087d2a71aea78b8e18f', dsName: "check", class: `${baseClass}__check-icon`, "aria-hidden": "true" }))));
     }
     static get watchers() { return {
         "dsActive": ["dsActiveObserver"],
@@ -108,7 +118,7 @@ const DsOption = class {
 utils.declareComponentDependencies([index.h("ds-icon", { dsName: "" })]);
 DsOption.style = dsOptionCss;
-const dsOptionGroupCss = ".ds-option-group__JDwdTJ.sc-ds-option-group{display:block;font-family:var(--ds-fontFamily-body)}.ds-option-group__JDwdTJ--hidden.sc-ds-option-group{display:none}.ds-option-group__JDwdTJ.sc-ds-option-group ul.sc-ds-option-group{padding:0}.ds-option-group__JDwdTJ__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__JDwdTJ__label__shadow.sc-ds-option-group{box-shadow:var(--ds-shadow-overflow)}";
+const dsOptionGroupCss = ".ds-option-group__nkrEji.sc-ds-option-group{display:block;font-family:var(--ds-fontFamily-body)}.ds-option-group__nkrEji--hidden.sc-ds-option-group{display:none}.ds-option-group__nkrEji.sc-ds-option-group ul.sc-ds-option-group{padding:0}.ds-option-group__nkrEji__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__nkrEji__label__shadow.sc-ds-option-group{box-shadow:var(--ds-shadow-overflow)}";
 const DsOptionGroup = class {
     constructor(hostRef) {
@@ -144,9 +154,9 @@ const DsOptionGroup = class {
     }
     render() {
         const baseClass = cx.cx('ds-option-group');
-        return (index.h("div", { key: '6cfef6e259180c2c6191590c78f593610d04db1c', class: index$1.classNames(`${baseClass}`, {
+        return (index.h("div", { key: '7f7281424e040028d88aea7054ec9d40a8eeedc3', class: index$1.classNames(`${baseClass}`, {
                 [`${baseClass}--hidden`]: this.dsHidden,
-            }), role: "group", "aria-labelledby": this.groupId, ...this.inheritedAttributes }, index.h("div", { key: '6d7f24fb598812a18facd98f83d5d588697793ff', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), index.h("slot", { key: '6ab0e84bf79bb480fc0a4849ff338979627af020' })));
+            }), role: "group", "aria-labelledby": this.groupId, ...this.inheritedAttributes }, index.h("div", { key: '9bf136352be3800ba75fe3136aaceaf04d0caa90', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), index.h("slot", { key: '525d659f0198f6c5a37d1fbca048fafaf926cfe7' })));
     }
     static get watchers() { return {
         "dsLabel": ["dsLabelObserver"]

package/dist/cjs/ds-options-message.cjs.entry.js CHANGED Viewed

@@ -1,12 +1,12 @@
 'use strict';
-var index = require('./index-JgJtlsd6.js');
-var store = require('./store-CCqF9deg.js');
-var controlUtils = require('./controlUtils-Cqn295aw.js');
+var index = require('./index-BLVteh3w.js');
+var store = require('./store-B5JrXfGq.js');
+var controlUtils = require('./controlUtils-Df6dCmrT.js');
 var utils = require('./utils-CEhBgrbV.js');
-var cx = require('./cx-7_PEyDS7.js');
+var cx = require('./cx-C3dbeP9F.js');
-const dsOptionsMessageCss = ".ds-options-message__JDwdTJ.sc-ds-options-message{display:flex;flex-direction:column;padding:var(--ds-spacing-2xSmall);height:18.5rem;overflow:hidden;box-sizing:border-box;align-items:center;justify-content:center;font-family:var(--ds-fontFamily-body)}.ds-options-message__JDwdTJ__error.sc-ds-options-message{color:var(--ds-textColor-danger);text-align:center}.ds-options-message__JDwdTJ__error__icon.sc-ds-options-message{display:inline-block}.ds-options-message__JDwdTJ__error__title.sc-ds-options-message,.ds-options-message__JDwdTJ__no-results__title.sc-ds-options-message{text-align:center;color:var(--ds-textColor-default);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-2xSmall)}.ds-options-message__JDwdTJ__no-results__title.sc-ds-options-message{hyphens:auto}.ds-options-message__JDwdTJ__error__text.sc-ds-options-message,.ds-options-message__JDwdTJ__loading__text.sc-ds-options-message,.ds-options-message__JDwdTJ__no-results__text.sc-ds-options-message{color:var(--ds-textColor-default);text-align:center;font-size:var(--ds-fontSize-16)}.ds-options-message__JDwdTJ__loading__text.sc-ds-options-message{padding-top:var(--ds-spacing-2xSmall);padding-bottom:var(--ds-spacing-large);text-align:center}";
+const dsOptionsMessageCss = ".ds-options-message__nkrEji.sc-ds-options-message{display:flex;flex-direction:column;padding:var(--ds-spacing-2xSmall);height:18.5rem;overflow:hidden;box-sizing:border-box;align-items:center;justify-content:center;font-family:var(--ds-fontFamily-body)}.ds-options-message__nkrEji__error.sc-ds-options-message{color:var(--ds-textColor-danger);text-align:center}.ds-options-message__nkrEji__error__icon.sc-ds-options-message{display:inline-block}.ds-options-message__nkrEji__error__title.sc-ds-options-message,.ds-options-message__nkrEji__no-results__title.sc-ds-options-message{text-align:center;color:var(--ds-textColor-default);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-2xSmall)}.ds-options-message__nkrEji__no-results__title.sc-ds-options-message{hyphens:auto}.ds-options-message__nkrEji__error__text.sc-ds-options-message,.ds-options-message__nkrEji__loading__text.sc-ds-options-message,.ds-options-message__nkrEji__no-results__text.sc-ds-options-message{color:var(--ds-textColor-default);text-align:center;font-size:var(--ds-fontSize-16)}.ds-options-message__nkrEji__loading__text.sc-ds-options-message{padding-top:var(--ds-spacing-2xSmall);padding-bottom:var(--ds-spacing-large);text-align:center}";
 const defaultTextFns = {
     dsErrorTitle: controlUtils.weCouldNotLoadOptions,