@uh-design-system/component-library 0.4.2 → 0.5.1

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

@@ -1,20 +1,20 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-export interface CheckboxChangeEvent {
-    id: string;
+import { DsEvent } from '../../00-foundations/types';
+export interface DsCheckboxInputEvent extends DsEvent {
     checked: boolean;
 }
 export declare class DsCheckbox {
+    private inputElem;
     private labelId;
-    private errorTextId;
+    private inputValidityId;
     private assistiveTextId;
     private inheritedAttributes;
     private initialChecked?;
-    private inputElem;
+    private labelClicked;
     el: HTMLElement;
     internals: ElementInternals;
-    dsCheckboxChange: EventEmitter<CheckboxChangeEvent>;
-    dsCheckboxError: EventEmitter<string>;
-    checkboxId?: string;
+    dsCheckboxInput: EventEmitter<DsCheckboxInputEvent>;
+    identifier?: string;
     checked: boolean;
     legend?: string;
     assistiveText?: string;
@@ -26,23 +26,23 @@ export declare class DsCheckbox {
     required: boolean;
     optional: boolean;
     optionalText?: string;
-    ariaLabel?: string;
+    ariaLabel: string;
     value: string;
-    validationMessage: string;
+    validationMessage?: string;
     private setIds;
-    private getErrorText;
+    private getValidationMessage;
     private getLegendText;
     private getCheckboxText;
     private getAriaDescribedBy;
     private restoreInitialState;
     private setInitialState;
-    private emitCheckboxError;
     formResetCallback(): void;
     componentWillLoad(): void;
-    componentDidLoad(): void;
-    componentDidUpdate(): void;
-    handleChange: () => void;
+    handleInput: (e: Event) => void;
     handleKeyUp: (event: KeyboardEvent) => void;
+    handleBlur: () => void;
+    handleMouseDown: () => void;
+    handleMouseUp: () => void;
     renderCheckbox(): any;
     renderFieldset(): any;
     render(): any;

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

@@ -1,11 +1,10 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { CheckboxChangeEvent } from '../ds-checkbox/ds-checkbox';
-export interface CheckboxGroupChangeEvent {
-    id: string;
+import { DsCheckboxInputEvent } from '../ds-checkbox/ds-checkbox';
+import { DsEvent } from '../../00-foundations/types';
+export interface DsCheckboxGroupChangeEvent extends DsEvent {
     checked: boolean;
 }
-export interface CheckboxGroupIndeterminateChildChangeEvent {
-    id: string;
+export interface DsCheckboxGroupIndeterminateChildChangeEvent extends DsEvent {
     indeterminate: boolean;
 }
 export declare class DsCheckboxGroup {
@@ -16,18 +15,17 @@ export declare class DsCheckboxGroup {
     private readonly nestedId;
     private inheritedAttributes;
     el: HTMLElement;
-    dsCheckboxGroupChange: EventEmitter<CheckboxGroupChangeEvent>;
-    dsCheckboxGroupIndeterminateChildChange: EventEmitter<CheckboxGroupIndeterminateChildChangeEvent>;
+    dsCheckboxGroupChange: EventEmitter<DsCheckboxGroupChangeEvent>;
+    dsCheckboxGroupIndeterminateChildChange: EventEmitter<DsCheckboxGroupIndeterminateChildChangeEvent>;
     legend?: string;
     assistiveText?: string;
     direction: 'horizontal' | 'vertical';
     errorText: string;
     text: string;
     checked: boolean;
-    checkedChildElementCount: number;
     disabled: boolean;
-    parentCheckedCount: number;
     childElementsCount: number;
+    checkedChildElementCount: number;
     isIndeterminate: boolean;
     indeterminateChildCheckboxCount: number;
     private elementIs;
@@ -40,14 +38,14 @@ export declare class DsCheckboxGroup {
     private updateChildCheckboxes;
     private updateChildElementsChecked;
     setChecked(newValue: boolean): Promise<void>;
-    handleCheckboxDisabledChange(newValue: boolean): void;
-    handleCheckedChange(newValue: boolean): void;
-    handleIndeterminateChange(newValue: boolean): void;
-    handleIndeterminateChildChange(event: CustomEvent<CheckboxGroupIndeterminateChildChangeEvent>): void;
-    handleCheckedChildElementCountChange(newValue: number, oldValue: number): void;
+    watchCheckboxDisabledChange(newValue: boolean): void;
+    watchCheckedChange(newValue: boolean): void;
+    watchIndeterminateChange(newValue: boolean): void;
+    listenIndeterminateChildChange(event: CustomEvent<DsCheckboxGroupIndeterminateChildChangeEvent>): void;
+    watchCheckedChildElementCountChange(newValue: number, oldValue: number): void;
     private updateCheckedChildElementCount;
-    handleCheckboxChange(event: CustomEvent<CheckboxChangeEvent>): void;
-    handleCheckboxGroupChange(event: CustomEvent<CheckboxGroupChangeEvent>): void;
+    listenCheckboxChange(event: CustomEvent<DsCheckboxInputEvent>): void;
+    listenCheckboxGroupChange(event: CustomEvent<DsCheckboxGroupChangeEvent>): void;
     private setChildElementCount;
     componentWillLoad(): void;
     componentDidLoad(): void;

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

@@ -21,7 +21,7 @@ export declare class DsLink {
     target?: LinkTarget;
     download?: boolean;
     language?: LinkLang;
-    linkAriaLabel?: string;
+    ariaLabel: string;
     componentWillLoad(): void;
     render(): any;
 }

package/dist/types/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.d.ts

@@ -12,7 +12,7 @@ export declare class DsLinkWithArrow {
     href: string;
     target?: LinkTarget;
     language?: LinkLang;
-    linkAriaLabel?: string;
+    ariaLabel: string;
     componentWillLoad(): void;
     render(): any;
 }

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

@@ -1,17 +1,22 @@
-import { TextInputType } from './utils';
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { DsEvent } from '../../00-foundations/types';
+import { DsTextInputType } from './utils';
+export type DsTextInputClearEvent = DsEvent;
 export declare class DsTextInput {
     private suffixButtonElement;
     private inputElement;
-    private readonly assistiveTextId;
-    private readonly visuallyHiddenAssistiveTextId;
-    private readonly successTextId;
-    private readonly errorTextId;
+    private assistiveTextId;
+    private visuallyHiddenAssistiveTextId;
+    private errorTextId;
+    private successTextId;
     private hasPrefixSlot;
     private hasSuffixSlot;
     el: HTMLElement;
+    internals: ElementInternals;
+    clear: EventEmitter<DsTextInputClearEvent>;
     label?: string;
     placeholder?: string;
-    dsId?: string;
+    identifier?: string;
     name: string;
     disabled?: boolean;
     optional?: boolean;
@@ -32,7 +37,7 @@ export declare class DsTextInput {
     prefixText?: string;
     suffixText?: string;
     icon: string;
-    type: TextInputType;
+    type: DsTextInputType;
     ariaLabel: string;
     ariaLabelledBy?: string;
     ariaDescribedby?: string;
@@ -40,12 +45,16 @@ export declare class DsTextInput {
     clearButtonVisible: boolean;
     passwordInputVisible: boolean;
     inputActive: boolean;
+    validationMessage?: string;
+    private setIds;
+    private getValidationMessage;
     togglePasswordVisibility(): Promise<boolean>;
     clearInput(): Promise<void>;
     private getLabelText;
     componentWillLoad(): void;
+    handleInput: (e: Event) => void;
+    handleBlur: () => void;
     private onActionButtonClicked;
-    private renderValidityMessage;
     private renderPrefixContent;
     private renderSuffixContent;
     private handleInputContainerClick;

package/dist/types/components/01-base-components/ds-text-input/stories/ds-text-input.examples.stories.d.ts

@@ -6,3 +6,4 @@ type Story = StoryObj;
 export declare const CustomWidth: Story;
 export declare const UsingSlots: Story;
 export declare const FormValidation: Story;
+export declare const ClientSideValidation: Story;

package/dist/types/components/01-base-components/ds-text-input/utils.d.ts

@@ -1,2 +1,2 @@
 export declare const textInputTypes: readonly ["text", "password", "search", "loading", "tel", "email", "url", "number"];
-export type TextInputType = typeof textInputTypes[number];
+export type DsTextInputType = (typeof textInputTypes)[number];

package/dist/types/components.d.ts

@@ -5,12 +5,14 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { CheckboxChangeEvent } from "./components/01-base-components/ds-checkbox/ds-checkbox";
-import { CheckboxGroupChangeEvent, CheckboxGroupIndeterminateChildChangeEvent } from "./components/01-base-components/ds-checkbox-group/ds-checkbox-group";
-import { TextInputType } from "./components/01-base-components/ds-text-input/utils";
-export { CheckboxChangeEvent } from "./components/01-base-components/ds-checkbox/ds-checkbox";
-export { CheckboxGroupChangeEvent, CheckboxGroupIndeterminateChildChangeEvent } from "./components/01-base-components/ds-checkbox-group/ds-checkbox-group";
-export { TextInputType } from "./components/01-base-components/ds-text-input/utils";
+import { DsCheckboxInputEvent } from "./components/01-base-components/ds-checkbox/ds-checkbox";
+import { DsCheckboxGroupChangeEvent, DsCheckboxGroupIndeterminateChildChangeEvent } from "./components/01-base-components/ds-checkbox-group/ds-checkbox-group";
+import { DsTextInputType } from "./components/01-base-components/ds-text-input/utils";
+import { DsTextInputClearEvent } from "./components/01-base-components/ds-text-input/ds-text-input";
+export { DsCheckboxInputEvent } from "./components/01-base-components/ds-checkbox/ds-checkbox";
+export { DsCheckboxGroupChangeEvent, DsCheckboxGroupIndeterminateChildChangeEvent } from "./components/01-base-components/ds-checkbox-group/ds-checkbox-group";
+export { DsTextInputType } from "./components/01-base-components/ds-text-input/utils";
+export { DsTextInputClearEvent } from "./components/01-base-components/ds-text-input/ds-text-input";
 export namespace Components {
     interface DsAccordion {
         "accordionId": string;
@@ -42,12 +44,13 @@ export namespace Components {
         "variant": 'primary' | 'secondary' | 'supplementary';
     }
     interface DsCheckbox {
+        "ariaLabel": string;
         "assistiveText"?: string;
-        "checkboxId"?: string;
         "checked": boolean;
         "disabled": boolean;
         "errorText": string;
         "errorsDisabled": boolean;
+        "identifier"?: string;
         "indeterminate": boolean;
         "legend"?: string;
         "optional": boolean;
@@ -58,12 +61,10 @@ export namespace Components {
     interface DsCheckboxGroup {
         "assistiveText"?: string;
         "checked": boolean;
-        "checkedChildElementCount": number;
         "direction": 'horizontal' | 'vertical';
         "disabled": boolean;
         "errorText": string;
         "legend"?: string;
-        "parentCheckedCount": number;
         /**
           * Updates child elements' checked state.
           * @param newValue New checked state.
@@ -85,6 +86,7 @@ export namespace Components {
         "validityRole"?: InputValidityRole;
     }
     interface DsLink {
+        "ariaLabel": string;
         "download"?: boolean;
         "href": string;
         "icon": string;
@@ -92,7 +94,6 @@ export namespace Components {
         "iconPosition": LinkIconPosition;
         "iconTitle"?: string;
         "language"?: LinkLang;
-        "linkAriaLabel"?: string;
         "size"?: LinkSize;
         "target"?: LinkTarget;
         "text": string;
@@ -100,10 +101,10 @@ export namespace Components {
         "weight": LinkWeight;
     }
     interface DsLinkWithArrow {
+        "ariaLabel": string;
         "href": string;
         "iconPosition": LinkIconPosition;
         "language"?: LinkLang;
-        "linkAriaLabel"?: string;
         "target"?: LinkTarget;
         "text"?: string;
     }
@@ -116,10 +117,10 @@ export namespace Components {
         "autocomplete"?: string;
         "clearInput": () => Promise<void>;
         "disabled"?: boolean;
-        "dsId"?: string;
         "errorText"?: string;
         "hiddenAssistiveText"?: string;
         "icon": string;
+        "identifier"?: string;
         "label"?: string;
         "max"?: number;
         "maxlength"?: number;
@@ -135,7 +136,7 @@ export namespace Components {
         "successText"?: string;
         "suffixText"?: string;
         "togglePasswordVisibility": () => Promise<boolean>;
-        "type": TextInputType;
+        "type": DsTextInputType;
         "value"?: string;
     }
     interface DsVisuallyHidden {
@@ -149,6 +150,10 @@ export interface DsCheckboxGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsCheckboxGroupElement;
 }
+export interface DsTextInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsTextInputElement;
+}
 declare global {
     interface HTMLDsAccordionElement extends Components.DsAccordion, HTMLStencilElement {
     }
@@ -163,8 +168,7 @@ declare global {
         new (): HTMLDsButtonElement;
     };
     interface HTMLDsCheckboxElementEventMap {
-        "dsCheckboxChange": CheckboxChangeEvent;
-        "dsCheckboxError": string;
+        "dsCheckboxInput": DsCheckboxInputEvent;
     }
     interface HTMLDsCheckboxElement extends Components.DsCheckbox, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsCheckboxElementEventMap>(type: K, listener: (this: HTMLDsCheckboxElement, ev: DsCheckboxCustomEvent<HTMLDsCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -181,8 +185,8 @@ declare global {
         new (): HTMLDsCheckboxElement;
     };
     interface HTMLDsCheckboxGroupElementEventMap {
-        "dsCheckboxGroupChange": CheckboxGroupChangeEvent;
-        "dsCheckboxGroupIndeterminateChildChange": CheckboxGroupIndeterminateChildChangeEvent;
+        "dsCheckboxGroupChange": DsCheckboxGroupChangeEvent;
+        "dsCheckboxGroupIndeterminateChildChange": DsCheckboxGroupIndeterminateChildChangeEvent;
     }
     interface HTMLDsCheckboxGroupElement extends Components.DsCheckboxGroup, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsCheckboxGroupElementEventMap>(type: K, listener: (this: HTMLDsCheckboxGroupElement, ev: DsCheckboxGroupCustomEvent<HTMLDsCheckboxGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -222,7 +226,18 @@ declare global {
         prototype: HTMLDsLinkWithArrowElement;
         new (): HTMLDsLinkWithArrowElement;
     };
+    interface HTMLDsTextInputElementEventMap {
+        "clear": DsTextInputClearEvent;
+    }
     interface HTMLDsTextInputElement extends Components.DsTextInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsTextInputElementEventMap>(type: K, listener: (this: HTMLDsTextInputElement, ev: DsTextInputCustomEvent<HTMLDsTextInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsTextInputElementEventMap>(type: K, listener: (this: HTMLDsTextInputElement, ev: DsTextInputCustomEvent<HTMLDsTextInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLDsTextInputElement: {
         prototype: HTMLDsTextInputElement;
@@ -278,16 +293,16 @@ declare namespace LocalJSX {
         "variant"?: 'primary' | 'secondary' | 'supplementary';
     }
     interface DsCheckbox {
+        "ariaLabel"?: string;
         "assistiveText"?: string;
-        "checkboxId"?: string;
         "checked"?: boolean;
         "disabled"?: boolean;
         "errorText"?: string;
         "errorsDisabled"?: boolean;
+        "identifier"?: string;
         "indeterminate"?: boolean;
         "legend"?: string;
-        "onDsCheckboxChange"?: (event: DsCheckboxCustomEvent<CheckboxChangeEvent>) => void;
-        "onDsCheckboxError"?: (event: DsCheckboxCustomEvent<string>) => void;
+        "onDsCheckboxInput"?: (event: DsCheckboxCustomEvent<DsCheckboxInputEvent>) => void;
         "optional"?: boolean;
         "optionalText"?: string;
         "required"?: boolean;
@@ -296,14 +311,12 @@ declare namespace LocalJSX {
     interface DsCheckboxGroup {
         "assistiveText"?: string;
         "checked"?: boolean;
-        "checkedChildElementCount"?: number;
         "direction"?: 'horizontal' | 'vertical';
         "disabled"?: boolean;
         "errorText"?: string;
         "legend"?: string;
-        "onDsCheckboxGroupChange"?: (event: DsCheckboxGroupCustomEvent<CheckboxGroupChangeEvent>) => void;
-        "onDsCheckboxGroupIndeterminateChildChange"?: (event: DsCheckboxGroupCustomEvent<CheckboxGroupIndeterminateChildChangeEvent>) => void;
-        "parentCheckedCount"?: number;
+        "onDsCheckboxGroupChange"?: (event: DsCheckboxGroupCustomEvent<DsCheckboxGroupChangeEvent>) => void;
+        "onDsCheckboxGroupIndeterminateChildChange"?: (event: DsCheckboxGroupCustomEvent<DsCheckboxGroupIndeterminateChildChangeEvent>) => void;
         "text"?: string;
     }
     interface DsIcon {
@@ -320,6 +333,7 @@ declare namespace LocalJSX {
         "validityRole"?: InputValidityRole;
     }
     interface DsLink {
+        "ariaLabel"?: string;
         "download"?: boolean;
         "href": string;
         "icon"?: string;
@@ -327,7 +341,6 @@ declare namespace LocalJSX {
         "iconPosition"?: LinkIconPosition;
         "iconTitle"?: string;
         "language"?: LinkLang;
-        "linkAriaLabel"?: string;
         "size"?: LinkSize;
         "target"?: LinkTarget;
         "text": string;
@@ -335,10 +348,10 @@ declare namespace LocalJSX {
         "weight"?: LinkWeight;
     }
     interface DsLinkWithArrow {
+        "ariaLabel"?: string;
         "href": string;
         "iconPosition"?: LinkIconPosition;
         "language"?: LinkLang;
-        "linkAriaLabel"?: string;
         "target"?: LinkTarget;
         "text"?: string;
     }
@@ -350,15 +363,16 @@ declare namespace LocalJSX {
         "assistiveText"?: string;
         "autocomplete"?: string;
         "disabled"?: boolean;
-        "dsId"?: string;
         "errorText"?: string;
         "hiddenAssistiveText"?: string;
         "icon"?: string;
+        "identifier"?: string;
         "label"?: string;
         "max"?: number;
         "maxlength"?: number;
         "min"?: number;
         "name"?: string;
+        "onClear"?: (event: DsTextInputCustomEvent<DsTextInputClearEvent>) => void;
         "optional"?: boolean;
         "optionalText"?: string;
         "pattern"?: string;
@@ -368,7 +382,7 @@ declare namespace LocalJSX {
         "required"?: boolean;
         "successText"?: string;
         "suffixText"?: string;
-        "type"?: TextInputType;
+        "type"?: DsTextInputType;
         "value"?: string;
     }
     interface DsVisuallyHidden {

package/dist/types/index.d.ts

@@ -1 +1,2 @@
+export { configure } from './store';
 export type * from './components.d.ts';

package/dist/types/store.d.ts

@@ -0,0 +1,10 @@
+type Validation = 'client' | 'server';
+interface ConfigurationOptions {
+    validation?: Validation;
+}
+declare const state: {
+    validation?: Validation;
+};
+export declare const isValidation: (validation: Validation) => boolean;
+export declare const configure: ({ validation }: ConfigurationOptions) => void;
+export default state;

package/dist/types/utils/link/linkUtils.d.ts

@@ -1,3 +1,2 @@
 export declare const opensInNewTab: (target: string) => target is "_blank";
 export declare const visuallyHiddenAssistiveText: (lang: string) => "Avautuu uuteen välilehteen" | "Öppnas i en ny flik" | "Opens in a new tab";
-export declare const getAriaLabel: (text: string, ariaLabel?: string) => string;

package/dist/types/utils/utils.d.ts

@@ -12,3 +12,4 @@ export declare const remToPx: (remString: string) => string;
 export declare const pxToRem: (pxString: string) => string;
 export declare const litTemplateResultToString: (data: TemplateResult) => string;
 export declare function idGenerator(id: string): Generator<string, void, unknown>;
+export declare const getAriaLabel: (text: string, ariaLabel?: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uh-design-system/component-library",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "publishConfig": {
     "access": "public"
   },
@@ -58,6 +58,7 @@
     "@stencil/core": "^4.27.2",
     "@stencil/react-output-target": "^0.8.2",
     "@stencil/sass": "^3.1.9",
+    "@stencil/store": "^2.1.2",
     "@storybook/addon-a11y": "^8.6.4",
     "@storybook/addon-essentials": "^8.6.4",
     "@storybook/addon-interactions": "^8.6.4",
@@ -94,5 +95,5 @@
     "glob": "^9.0.0"
   },
   "license": "MIT",
-  "gitHead": "f003b6ed10e8beb0cabf06262fd52255567a276d"
+  "gitHead": "741e3b17b356c65a8317370db69a66db4be17559"
 }

package/dist/component-library/utils-b5843ae1.js

@@ -1 +0,0 @@
-const r=r=>{const t=parseFloat(r);return(o=""+16*t).endsWith("px")?o:`${o}px`;var o};function*t(r){let t=1;for(;;)yield`${r}-${t++}`}export{t as i,r}