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

package/dist/types/components/01-base-components/ds-button/ds-button.d.ts

@@ -45,12 +45,12 @@ export declare class DsButton extends DsButton_base {
     dsHiddenAssistiveText?: string;
     dsActive: boolean;
     dsInInput: boolean;
-    hasContent: boolean;
+    hasDefaultSlot: boolean;
     isActive: boolean;
     text: string;
     setFocus(): Promise<void>;
-    componentWillLoad(): void;
     private hasDefaultSlotContent;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     dsTextObserver(newValue: string): void;
     dsValueObserver(newValue: string): void;
@@ -60,6 +60,7 @@ export declare class DsButton extends DsButton_base {
     private handleKeyUp;
     private handleBlur;
     private getSpinnerColour;
+    private handleDefaultSlotChange;
     private renderIcon;
     private renderButton;
     render(): any;

package/dist/types/components/01-base-components/ds-select/ds-select.d.ts

@@ -34,9 +34,10 @@ export declare class DsSelect extends DsSelect_base {
     dsBlur: EventEmitter<DsSelectBlurEvent>;
     dsFocus: EventEmitter<DsSelectFocusEvent>;
     dsForm?: string;
-    dsId?: string;
+    dsId: string;
     dsName?: string;
-    dsLabel: string;
+    dsLabel?: string;
+    dsAssistiveText?: string;
     dsPlaceholder?: string;
     dsVariant: 'default' | 'multiple' | 'native';
     dsClearable: boolean;
@@ -53,7 +54,7 @@ export declare class DsSelect extends DsSelect_base {
     dsFullWidth: boolean;
     dsRequired: boolean;
     dsAriaLabel?: string;
-    activeOption?: HTMLDsOptionElement;
+    activeOption: HTMLDsOptionElement | null;
     selectedOptions: HTMLDsOptionElement[];
     selectedOptionsLabel?: string;
     isOpen: boolean;
@@ -63,18 +64,15 @@ export declare class DsSelect extends DsSelect_base {
     iconRef?: HTMLDsIconElement;
     badgeRef?: HTMLDsBadgeElement;
     badgeContainerOffset: number | null;
-    texts: {
-        dsPlaceholder: string;
-    };
     feedback: {
         key: FeedbackKey;
         message: string;
     }[];
-    private inputValidityId;
     private get isNative();
     private get isMultiple();
-    private getInputValidityId;
-    private setTexts;
+    private get inputValidityId();
+    private get assistiveTextId();
+    private get placeholder();
     private handleInvalid;
     checkValidity(): Promise<boolean>;
     getSelectedOption(): Promise<{
@@ -98,7 +96,6 @@ export declare class DsSelect extends DsSelect_base {
     private customSelectRef?;
     private nativeSelectRef?;
     handleEscEvent(event: CustomEvent<DsOptionsEscEvent>): void;
-    handleLanguageChange(): void;
     onFocusIn(): void;
     onFocusOut(e: FocusEvent): void;
     private handleOptionClick;
@@ -111,7 +108,6 @@ export declare class DsSelect extends DsSelect_base {
     private updateActiveIndex;
     activeIndexObserver(newValue: number | null): void;
     clearButtonRefObserver(): void;
-    textPropObserver(newValue: string, _oldValue: string, propName: string): void;
     valueObserver(newValue: string[] | null): void;
     dsValueObserver(newValue: string | string[] | null): void;
     selectedOptionsObserver(newValue: HTMLDsOptionElement[], oldValue?: HTMLDsOptionElement[]): void;

package/dist/types/components.d.ts

@@ -6259,6 +6259,10 @@ export namespace Components {
           * Aria label for the select element, used for accessibility when there is no visible label.
          */
         "dsAriaLabel"?: string;
+        /**
+          * Text for additional information shown below label.
+         */
+        "dsAssistiveText"?: string;
         /**
           * If true, allows the user to clear the selected option.
           * @default true
@@ -6295,11 +6299,11 @@ export namespace Components {
           * The unique ID for the select component.
           * @default selectIdGenerator.next().value as string
          */
-        "dsId"?: string;
+        "dsId": string;
         /**
           * The label for the select component.
          */
-        "dsLabel": string;
+        "dsLabel"?: string;
         /**
           * Show loading spinner and text.
           * @default false
@@ -16425,6 +16429,10 @@ declare namespace LocalJSX {
           * Aria label for the select element, used for accessibility when there is no visible label.
          */
         "dsAriaLabel"?: string;
+        /**
+          * Text for additional information shown below label.
+         */
+        "dsAssistiveText"?: string;
         /**
           * If true, allows the user to clear the selected option.
           * @default true
@@ -19691,6 +19699,7 @@ declare namespace LocalJSX {
         "dsId": string;
         "dsName": string;
         "dsLabel": string;
+        "dsAssistiveText": string;
         "dsPlaceholder": string;
         "dsVariant": 'default' | 'multiple' | 'native';
         "dsClearable": boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uh-design-system/component-library",
-  "version": "1.5.0-rc.0",
+  "version": "1.5.0",
   "publishConfig": {
     "access": "public"
   },
@@ -114,5 +114,5 @@
     "ts-node": "^10.9.2"
   },
   "license": "MIT",
-  "gitHead": "8dcb90cf4aba850874fc2d5d92024f703acdfe06"
+  "gitHead": "670699ea46eeeb97ac02015fea3dfdd35ebb95d8"
 }

package/dist/cjs/ariaDeprecationFactory-DfzSFAmA.js

@@ -1,29 +0,0 @@
-'use strict';
-
-var index = require('./index-CanuK91h.js');
-var attributes = require('./attributes-5eBKMo1N.js');
-
-const ariaDeprecationFactory = (Base) => {
-    const AriaDeprecation = class extends Base {
-        constructor(hostRef) {
-            super();
-            index.registerInstance(this, hostRef);
-        }
-        dsMuteAriaDeprecationWarning = false;
-        getDeprecationWarningForAriaAttribute = (el, attr) => {
-            if (this.dsMuteAriaDeprecationWarning)
-                return;
-            if (el.hasAttribute(attr)) {
-                console.warn(`[DEPRECATION] The use of the '${attr}' attribute on <${el.tagName.toLowerCase()}> is deprecated and will be removed in a future version (tba). Please refer to the documentation for alternative ds-prefixed property name. If the attribute you are using does not have a corresponding ds-prefixed property name, please contact developers at #designsystem Slack channel. In the future, any aria-attributes set on the web component will remain on the host element. To mute all warnings on this component instance, set the "dsMuteAriaDeprecationWarning" property.`);
-            }
-        };
-        getDeprecationWarningsForAriaAttributes = (el) => {
-            if (this.dsMuteAriaDeprecationWarning)
-                return;
-            attributes.ariaAttributes.forEach(attr => this.getDeprecationWarningForAriaAttribute(el, attr));
-        };
-    };
-    return AriaDeprecation;
-};
-
-exports.ariaDeprecationFactory = ariaDeprecationFactory;

package/dist/cjs/controlUtils-Dtd3jKON.js

@@ -1,414 +0,0 @@
-'use strict';
-
-var store = require('./store-HF0sWEYB.js');
-
-const valueMissing = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Täytä tämä kenttä.';
-        case 'sv':
-            return 'Fyll i det här fältet.';
-        default:
-            return 'Fill in this field.';
-    }
-};
-const typeMismatch = (opts) => {
-    if (opts?.type === 'email') {
-        return emailMismatch();
-    }
-    if (opts?.type === 'url') {
-        return urlMismatch();
-    }
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä arvo oikeassa muodossa.';
-        case 'sv':
-            return 'Ange värdet i rätt format.';
-        default:
-            return 'Enter a value in the correct format.';
-    }
-};
-const emailMismatch = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä sähköpostiosoite oikeassa muodossa (esim. nimi@helsinki.fi).';
-        case 'sv':
-            return 'Ange e-postadressen i rätt format (t.ex. namn@helsinki.fi).';
-        default:
-            return 'Enter the email address in the correct format (e.g. name@helsinki.fi).';
-    }
-};
-const urlMismatch = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä verkkosivun osoite oikeassa muodossa (esim. https://helsinki.fi).';
-        case 'sv':
-            return 'Ange webbadressen i rätt formatet (t.ex. https://helsinki.fi).';
-        default:
-            return 'Enter the web address in the correct format (e.g. https://helsinki.fi).';
-    }
-};
-const patternMismatch = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä arvo vaaditussa muodossa.';
-        case 'sv':
-            return 'Ange värdet i det angivna formatet.';
-        default:
-            return 'Match the requested format.';
-    }
-};
-const tooLong = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Lyhennä tekstiä.';
-        case 'sv':
-            return 'Förkorta texten.';
-        default:
-            return 'Shorten your text.';
-    }
-};
-const tooShort = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Pidennä tekstiä.';
-        case 'sv':
-            return 'Förläng texten.';
-        default:
-            return 'Lengthen your text.';
-    }
-};
-const rangeUnderflow = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä suurempi arvo.';
-        case 'sv':
-            return 'Ange ett större värde.';
-        default:
-            return 'Enter a larger value.';
-    }
-};
-const rangeOverflow = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä pienempi arvo.';
-        case 'sv':
-            return 'Ange ett mindre värde.';
-        default:
-            return 'Enter a smaller value.';
-    }
-};
-const stepMismatch = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Syötä sallittu arvo.';
-        case 'sv':
-            return 'Ange ett tillåtet värde.';
-        default:
-            return 'Enter an allowed value.';
-    }
-};
-const badInput = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Anna kelvollinen arvo.';
-        case 'sv':
-            return 'Ange ett giltigt värde.';
-        default:
-            return 'Enter a valid value.';
-    }
-};
-const validityMessage = (flag, opts) => {
-    switch (flag) {
-        case 'valueMissing':
-            return valueMissing();
-        case 'typeMismatch':
-            return typeMismatch(opts);
-        case 'patternMismatch':
-            return patternMismatch();
-        case 'tooLong':
-            return tooLong();
-        case 'tooShort':
-            return tooShort();
-        case 'rangeUnderflow':
-            return rangeUnderflow();
-        case 'rangeOverflow':
-            return rangeOverflow();
-        case 'stepMismatch':
-            return stepMismatch();
-        case 'badInput':
-            return badInput();
-        default:
-            return '';
-    }
-};
-const getOptionalText = (text, optionalText) => {
-    let defaultText = '(optional)';
-    switch (store.getLanguage()) {
-        case 'fi':
-            defaultText = '(valinnainen)';
-            break;
-        case 'sv':
-            defaultText = '(valfritt)';
-            break;
-    }
-    return [text, optionalText || defaultText].join(' ');
-};
-const getRequiredText = (text) => [text, '*'].join(' ');
-const atLeastOneOption = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Valitse vähintään yksi vaihtoehto.';
-        case 'sv':
-            return 'Välj minst ett alternativ.';
-        default:
-            return 'Select at least one option.';
-    }
-};
-const allOptions = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Valitse kaikki vaihtoehdot.';
-        case 'sv':
-            return 'Välj alla alternativ.';
-        default:
-            return 'Select all options.';
-    }
-};
-const removeSelection = (capitalizeFirstLetter = false) => {
-    let text = '';
-    switch (store.getLanguage()) {
-        case 'fi':
-            text = 'poista valinta';
-            break;
-        case 'sv':
-            text = 'ta bort val';
-            break;
-        default:
-            text = 'remove selection';
-            break;
-    }
-    return capitalizeFirstLetter ? text[0].toUpperCase() + text.substring(1) : text;
-};
-const weCouldNotLoadOptions = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Emme voineet ladata vaihtoehtoja.';
-        case 'sv':
-            return 'Vi kunde inte ladda alternativen.';
-        default:
-            return 'We could not load options.';
-    }
-};
-const tryAgainOrIfTheProblemPersists = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Yritä uudelleen tai jos ongelma jatkuu, ota yhteyttä ylläpitoon.';
-        case 'sv':
-            return 'Försök igen eller om problemet kvarstår, kontakta supporten.';
-        default:
-            return 'Try again or if the problem persists, contact support.';
-    }
-};
-const loadingOptions = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Ladataan vaihtoehtoja...';
-        case 'sv':
-            return 'Laddar alternativ...';
-        default:
-            return 'Loading options...';
-    }
-};
-const searchOrSelectAnOption = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Kirjoita tai valitse...';
-        case 'sv':
-            return 'Sök eller välj...';
-        default:
-            return 'Search or select...';
-    }
-};
-const noResultsFound = (searchTerm) => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return searchTerm ? `Ei tuloksia haulle "${searchTerm}".` : `Ei tuloksia.`;
-        case 'sv':
-            return searchTerm ? `Inga resultat för sökningen "${searchTerm}".` : `Inga resultat.`;
-        default:
-            return searchTerm ? `No results found for "${searchTerm}".` : `No results found.`;
-    }
-};
-const tryADifferentSearchTerm = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Kokeile toista hakusanaa.';
-        case 'sv':
-            return 'Prova ett annat sökord.';
-        default:
-            return 'Try a different search term.';
-    }
-};
-const thereAreOptionsToBrowse = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Vaihtoehtoja on selattavissa.';
-        case 'sv':
-            return 'Det finns alternativ att bläddra i.';
-        default:
-            return 'There are options to browse.';
-    }
-};
-const characterOverage = (overage) => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return `${overage} merkkiä liian pitkä.`;
-        case 'sv':
-            return `${overage} tecken för mycket.`;
-        default:
-            return `${overage} characters too many.`;
-    }
-};
-const charactersRemaining = (remaining) => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return `${remaining} merkkiä jäljellä.`;
-        case 'sv':
-            return `${remaining} tecken kvar.`;
-        default:
-            return `${remaining} characters remaining.`;
-    }
-};
-const itemsShortage = (shortage) => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            if (shortage === 1) {
-                return `${shortage} valinta liian vähän.`;
-            }
-            return `${shortage} valintaa liian vähän.`;
-        case 'sv':
-            return `${shortage} val för lite.`;
-        default:
-            if (shortage === 1) {
-                return `${shortage} item too few.`;
-            }
-            return `${shortage} items too few.`;
-    }
-};
-const itemsOverage = (overage) => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            if (overage === 1) {
-                return `${overage} valinta liikaa.`;
-            }
-            return `${overage} valintaa liikaa.`;
-        case 'sv':
-            return `${overage} val för många.`;
-        default:
-            if (overage === 1) {
-                return `${overage} item too many.`;
-            }
-            return `${overage} items too many.`;
-    }
-};
-const clearField = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Tyhjennä kenttä';
-        case 'sv':
-            return 'Rensa fält';
-        default:
-            return 'Clear field';
-    }
-};
-const showPassword = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Näytä salasana';
-        case 'sv':
-            return 'Visa lösenord';
-        default:
-            return 'Show password';
-    }
-};
-const hidePassword = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Piilota salasana';
-        case 'sv':
-            return 'Dölj lösenord';
-        default:
-            return 'Hide password';
-    }
-};
-const selectAnOption = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Valitse vaihtoehto';
-        case 'sv':
-            return 'Välj alternativ';
-        default:
-            return 'Select an option';
-    }
-};
-const selections = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'valintaa';
-        case 'sv':
-            return 'val';
-        default:
-            return 'selections';
-    }
-};
-const multiselectable = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'monivalinta';
-        case 'sv':
-            return 'flerval';
-        default:
-            return 'multiselectable';
-    }
-};
-const ellipsis = () => {
-    switch (store.getLanguage()) {
-        case 'fi':
-            return 'Kolme pistettä';
-        case 'sv':
-            return 'Tre punkter';
-        default:
-            return 'Ellipsis';
-    }
-};
-
-exports.allOptions = allOptions;
-exports.atLeastOneOption = atLeastOneOption;
-exports.badInput = badInput;
-exports.characterOverage = characterOverage;
-exports.charactersRemaining = charactersRemaining;
-exports.clearField = clearField;
-exports.ellipsis = ellipsis;
-exports.getOptionalText = getOptionalText;
-exports.getRequiredText = getRequiredText;
-exports.hidePassword = hidePassword;
-exports.itemsOverage = itemsOverage;
-exports.itemsShortage = itemsShortage;
-exports.loadingOptions = loadingOptions;
-exports.multiselectable = multiselectable;
-exports.noResultsFound = noResultsFound;
-exports.rangeOverflow = rangeOverflow;
-exports.rangeUnderflow = rangeUnderflow;
-exports.removeSelection = removeSelection;
-exports.searchOrSelectAnOption = searchOrSelectAnOption;
-exports.selectAnOption = selectAnOption;
-exports.selections = selections;
-exports.showPassword = showPassword;
-exports.thereAreOptionsToBrowse = thereAreOptionsToBrowse;
-exports.tooLong = tooLong;
-exports.tryADifferentSearchTerm = tryADifferentSearchTerm;
-exports.tryAgainOrIfTheProblemPersists = tryAgainOrIfTheProblemPersists;
-exports.validityMessage = validityMessage;
-exports.valueMissing = valueMissing;
-exports.weCouldNotLoadOptions = weCouldNotLoadOptions;

package/dist/cjs/cx-CzHxiUwn.js

@@ -1,7 +0,0 @@
-'use strict';
-
-var index = require('./index-CanuK91h.js');
-
-const cx = (className) => `${className}__${index.Env.PACKAGE_VERSION}`;
-
-exports.cx = cx;