@riverty/web-components 5.3.0 → 5.5.0

package/dist/types/components.d.ts

@@ -812,6 +812,10 @@ export namespace Components {
           * Custom message for `rangeUnderflow`.
          */
         "rangeUnderflowMessage"?: string;
+        /**
+          * Read-only mode (mirrors native `readonly`): value cannot be changed by the user, but the field can still receive focus, be selected, and be submitted with a form.
+         */
+        "readonly"?: boolean;
         /**
           * Marks the field as required; failing to provide a value triggers `valueMissing`.
          */
@@ -969,6 +973,10 @@ export namespace Components {
           * Specifies if element must be ignored during validation of the form elements.
          */
         "novalidate"?: boolean;
+        /**
+          * Read-only mode (mirrors native `readonly`): value cannot be changed by the user, but the field can still receive focus, be selected, and be submitted with a form.
+         */
+        "readonly"?: boolean;
         /**
           * Whether the input is required
          */
@@ -1073,6 +1081,10 @@ export namespace Components {
           * Specifies if element must be ignored during validation of the form elements
          */
         "novalidate"?: boolean;
+        /**
+          * Makes the date inputs read-only: users can focus and copy the value, but cannot modify it (value still submitted with the form unlike disabled).
+         */
+        "readonly"?: boolean;
         /**
           * Specifies that an input is required/must be filled out
          */
@@ -1188,6 +1200,10 @@ export namespace Components {
           * Specifies a short hint that describes the expected value of a input
          */
         "placeholder"?: string;
+        /**
+          * Makes the input read-only: users can focus and copy the value, but cannot modify it (value still submitted with the form unlike disabled).
+         */
+        "readonly"?: boolean;
         /**
           * Specifies that an input is required/must be filled out
          */
@@ -1300,6 +1316,10 @@ export namespace Components {
           * Specifies if element must be ignored during validation of the form elements
          */
         "novalidate"?: boolean;
+        /**
+          * Makes the date inputs read-only: users can focus and copy the value, but cannot modify it (value still submitted with the form unlike disabled).
+         */
+        "readonly"?: boolean;
         /**
           * Check validity and reveal validation state.
          */
@@ -1378,6 +1398,10 @@ export namespace Components {
           * Defines the alignment style for the trailing text.
          */
         "alignment": TrailingTextAlignment;
+        /**
+          * Secondary text displayed below the headline (2nd slot), used for additional details or context.
+         */
+        "description"?: string;
         /**
           * If true, prevents user interaction with the list item and applies a disabled style.
          */
@@ -1392,9 +1416,13 @@ export namespace Components {
          */
         "expanded": boolean;
         /**
-          * The main text or title displayed in the text slot (2nd slot) of the list item.
+          * The main text or headline displayed in the text slot (2nd slot) of the list item.
          */
         "headline"?: string;
+        /**
+          * Defines if the leading icon shall become hidden.
+         */
+        "hideLeadingIcon"?: boolean;
         /**
           * If provided, renders the list item as a link using the <a> tag with the given href attribute.
          */
@@ -1408,7 +1436,7 @@ export namespace Components {
          */
         "leadingIconSrc"?: string;
         /**
-          * Secondary text displayed below the headline (2nd slot), used for additional details or context.
+          * @deprecated Use `description` instead. Will be removed November 2025. Secondary text displayed below the headline (2nd slot), used for additional details or context.
          */
         "subtext"?: string;
         /**
@@ -1427,6 +1455,10 @@ export namespace Components {
           * Text displayed in the trailing slot (3rd slot), as an alternative to an icon.
          */
         "trailingText"?: string;
+        /**
+          * When enabled, the description is limited to a single line and truncated with an ellipsis if it overflows.
+         */
+        "truncateDescription"?: boolean;
         /**
           * Controls the style variation of the list item, such as regular or subitem.
           * @default 'list-item'
@@ -2338,6 +2370,10 @@ export namespace Components {
           * @default 'Provide an input'
          */
         "placeholder": string;
+        /**
+          * Indicates whether the `<textarea>` is read-only, allowing focus and text selection while preventing the user from modifying its value.
+         */
+        "readonly"?: boolean;
         /**
           * Validates an element and displays validity state.
          */
@@ -2384,7 +2420,7 @@ export namespace Components {
          */
         "setValue": (value: string) => Promise<void>;
         /**
-          * Specifies if the character counter should be visible.
+          * Specifies if the character counter should be visible.  Note: The counter will only be rendered when a `maxlength` value is provided.
          */
         "showCounter"?: boolean;
         /**
@@ -2455,7 +2491,8 @@ export namespace Components {
          */
         "dismissLabel": string;
         /**
-          * @default 'auto'
+          * Defines the behavior of the component's dismissing. - `auto`: The component will be dismissed automatically after number of ms set by `delay` property. - `manual`: The component requires explicit user action to close.
+          * @default "auto"
          */
         "dismissMode": ToastDismissMode;
         /**
@@ -2546,6 +2583,10 @@ export interface RCheckboxGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLRCheckboxGroupElement;
 }
+export interface RDialogCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLRDialogElement;
+}
 export interface RIconButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLRIconButtonElement;
@@ -2821,7 +2862,18 @@ declare global {
         prototype: HTMLRDesignSystemDevtoolsElement;
         new (): HTMLRDesignSystemDevtoolsElement;
     };
+    interface HTMLRDialogElementEventMap {
+        "close": any;
+    }
     interface HTMLRDialogElement extends Components.RDialog, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLRDialogElementEventMap>(type: K, listener: (this: HTMLRDialogElement, ev: RDialogCustomEvent<HTMLRDialogElementEventMap[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 HTMLRDialogElementEventMap>(type: K, listener: (this: HTMLRDialogElement, ev: RDialogCustomEvent<HTMLRDialogElementEventMap[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 HTMLRDialogElement: {
         prototype: HTMLRDialogElement;
@@ -4029,6 +4081,10 @@ declare namespace LocalJSX {
           * Allows to provide headline text to the dialog header section.
          */
         "headline"?: string;
+        /**
+          * Emitted when the dialog is closed. Fired by close(), and by the close button.
+         */
+        "onClose"?: (event: RDialogCustomEvent<any>) => void;
         /**
           * Define if dialog either shown or hidden.
           * @default false
@@ -4299,6 +4355,10 @@ declare namespace LocalJSX {
           * Custom message for `rangeUnderflow`.
          */
         "rangeUnderflowMessage"?: string;
+        /**
+          * Read-only mode (mirrors native `readonly`): value cannot be changed by the user, but the field can still receive focus, be selected, and be submitted with a form.
+         */
+        "readonly"?: boolean;
         /**
           * Marks the field as required; failing to provide a value triggers `valueMissing`.
          */
@@ -4446,6 +4506,10 @@ declare namespace LocalJSX {
     state: string,
     message: string
   }>) => void;
+        /**
+          * Read-only mode (mirrors native `readonly`): value cannot be changed by the user, but the field can still receive focus, be selected, and be submitted with a form.
+         */
+        "readonly"?: boolean;
         /**
           * Whether the input is required
          */
@@ -4561,6 +4625,10 @@ declare namespace LocalJSX {
     state: string,
     message: string
   }>) => void;
+        /**
+          * Makes the date inputs read-only: users can focus and copy the value, but cannot modify it (value still submitted with the form unlike disabled).
+         */
+        "readonly"?: boolean;
         /**
           * Specifies that an input is required/must be filled out
          */
@@ -4683,6 +4751,10 @@ declare namespace LocalJSX {
           * Specifies a short hint that describes the expected value of a input
          */
         "placeholder"?: string;
+        /**
+          * Makes the input read-only: users can focus and copy the value, but cannot modify it (value still submitted with the form unlike disabled).
+         */
+        "readonly"?: boolean;
         /**
           * Specifies that an input is required/must be filled out
          */
@@ -4811,6 +4883,10 @@ declare namespace LocalJSX {
     state: string,
     message: string
   }>) => void;
+        /**
+          * Makes the date inputs read-only: users can focus and copy the value, but cannot modify it (value still submitted with the form unlike disabled).
+         */
+        "readonly"?: boolean;
         /**
           * Specifies that phone number value is required
          */
@@ -4873,6 +4949,10 @@ declare namespace LocalJSX {
           * Defines the alignment style for the trailing text.
          */
         "alignment"?: TrailingTextAlignment;
+        /**
+          * Secondary text displayed below the headline (2nd slot), used for additional details or context.
+         */
+        "description"?: string;
         /**
           * If true, prevents user interaction with the list item and applies a disabled style.
          */
@@ -4887,9 +4967,13 @@ declare namespace LocalJSX {
          */
         "expanded"?: boolean;
         /**
-          * The main text or title displayed in the text slot (2nd slot) of the list item.
+          * The main text or headline displayed in the text slot (2nd slot) of the list item.
          */
         "headline"?: string;
+        /**
+          * Defines if the leading icon shall become hidden.
+         */
+        "hideLeadingIcon"?: boolean;
         /**
           * If provided, renders the list item as a link using the <a> tag with the given href attribute.
          */
@@ -4903,7 +4987,7 @@ declare namespace LocalJSX {
          */
         "leadingIconSrc"?: string;
         /**
-          * Secondary text displayed below the headline (2nd slot), used for additional details or context.
+          * @deprecated Use `description` instead. Will be removed November 2025. Secondary text displayed below the headline (2nd slot), used for additional details or context.
          */
         "subtext"?: string;
         /**
@@ -4918,6 +5002,10 @@ declare namespace LocalJSX {
           * Text displayed in the trailing slot (3rd slot), as an alternative to an icon.
          */
         "trailingText"?: string;
+        /**
+          * When enabled, the description is limited to a single line and truncated with an ellipsis if it overflows.
+         */
+        "truncateDescription"?: boolean;
         /**
           * Controls the style variation of the list item, such as regular or subitem.
           * @default 'list-item'
@@ -5814,6 +5902,10 @@ declare namespace LocalJSX {
           * @default 'Provide an input'
          */
         "placeholder"?: string;
+        /**
+          * Indicates whether the `<textarea>` is read-only, allowing focus and text selection while preventing the user from modifying its value.
+         */
+        "readonly"?: boolean;
         /**
           * Indicates that the `<textarea>` must be filled out  before submitting the form.
          */
@@ -5828,7 +5920,7 @@ declare namespace LocalJSX {
          */
         "rows"?: number;
         /**
-          * Specifies if the character counter should be visible.
+          * Specifies if the character counter should be visible.  Note: The counter will only be rendered when a `maxlength` value is provided.
          */
         "showCounter"?: boolean;
         /**
@@ -5895,7 +5987,8 @@ declare namespace LocalJSX {
          */
         "dismissLabel"?: string;
         /**
-          * @default 'auto'
+          * Defines the behavior of the component's dismissing. - `auto`: The component will be dismissed automatically after number of ms set by `delay` property. - `manual`: The component requires explicit user action to close.
+          * @default "auto"
          */
         "dismissMode"?: ToastDismissMode;
         /**

package/dist/web-components/p-00ca474f.entry.js

@@ -0,0 +1 @@
+import{r as t,h as e,H as r,g as a}from"./p-Da7qOBFr.js";const s=class{constructor(e){t(this,e)}render(){return e(r,{key:"623feed7834a4702b83257202de4505b6c08145d",slot:"title"},e("div",{key:"ca7b90c670583ba4a874df1da73dad9db67d0bf7",class:"r-radio-button-title",style:{display:"contents"}},e("slot",{key:"fd7ac8a7ee5e2cd05dab3d061328eecb5ee14800"})))}get host(){return a(this)}};s.style=":host{font-weight:var(--r-font-weight-semibold, 600);font-size:var(--r-font-size-400, 1rem);line-height:var(--r-line-height-m, 1.5);color:var(--r-text-regular, #282828);text-align:left;cursor:inherit}";export{s as r_radio_button_title}

package/dist/web-components/p-00eb6986.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as s,H as e,g as h}from"./p-Da7qOBFr.js";import{a as o}from"./p-DvLT8-y3.js";const a=class{constructor(s){t(this,s),this.rValidate=i(this,"rValidate"),this.rInput=i(this,"rInput"),this.rChange=i(this,"rChange"),this.rReset=i(this,"rReset"),this.value="",this.showPasswordAriaLabel="Show password.",this.hidePasswordAriaLabel="Hide password.",this.shownPasswordMessage="Your password is shown.",this.hiddenPasswordMessage="Your password is hidden.",this.showed=!1,this.validityState="",this.validityMessage="",this.initial={},this.onShowClick=t=>{t.stopPropagation(),this.toggleShow()},this.alertOnPasswordVisibilityChange=()=>{this.passwordVisibilityChangeAlertContainer.innerText=this.showed?this.shownPasswordMessage:this.hiddenPasswordMessage,this.passwordVisibilityTimer=setTimeout((()=>{this.passwordVisibilityChangeAlertContainer.innerText="",clearTimeout(this.passwordVisibilityTimer)}),2e3)},this.onInput=t=>{if(this.readonly)return;this.value=t.detail.value;const{host:i,value:s}=this;this.rInput.emit({element:i,value:s})},this.onChange=t=>{if(this.readonly)return;this.value=t.detail.value;const{host:i,value:s}=this;this.rChange.emit({element:i,value:s})},this.getValidityStateData=t=>{for(const i in t.validity)if(t.validity[i]){if(this.validityState=i,this[i+"Message"])return void(this.validityMessage=this[i+"Message"]);this.validityMessage=t.validationMessage}},this.validateFormElement=t=>{if(null===t)return;if(this.isNoValidate)return;if(this.error)return;this.getValidityStateData(t.shadowRoot.querySelector("input"));const i="valid"===this.validityState;this.valid=i,this.invalid=!i,this.rValidate.emit({state:this.validityState,message:this.validityMessage})},this.contributeToFormData=t=>{o(this.nativeElement||this.host,t.formData)},this.onResetForm=()=>{if(this.readonly)return;this.validityState=null,this.validityMessage=null,this.value=this.initial.value,this.invalid=this.initial.invalid,this.valid=!this.invalid;const{host:t,value:i}=this;this.rReset.emit({element:t,value:i})},this.onSubmitForm=async t=>{this.isNoValidate||(this.validateFormElement(this.nativeElement),this.invalid&&(t.preventDefault(),t.stopPropagation()))},this.handleKeyup=async t=>{var i,s;if(this.readonly)return;if("Enter"!==t.code)return;if(this.validateFormElement(this.nativeElement),this.invalid&&!this.isNoValidate)return;const e=this.host.querySelector('[type="submit"]')||(null===(i=this.parentFormEl)||void 0===i?void 0:i.querySelector('[type="submit"]'));e&&"triggerClick"in e?null==e||e.triggerClick():null===(s=this.parentFormEl)||void 0===s||s.requestSubmit()},this.handleBlur=()=>{this.readonly||this.validateFormElement(this.nativeElement)}}async toggleShow(){this.showed?await this.hidePassword():await this.showPassword()}async showPassword(){this.showed=!0,this.alertOnPasswordVisibilityChange()}async hidePassword(){this.showed=!1,this.alertOnPasswordVisibilityChange()}async getValue(){return this.nativeElement.getValue()}async setValue(t){this.nativeElement.value=t}get parentFormEl(){return this.host.closest("form")||document.querySelector(`#${this.form}`)||null}get isNoValidate(){var t;return(null===(t=this.parentFormEl)||void 0===t?void 0:t.hasAttribute("novalidate"))||this.novalidate||!1}get hasError(){var t;return this.invalid&&!!(null===(t=this.error)||void 0===t?void 0:t.length)}get hasValidationError(){var t,i;return!("valid"===this.validityState||!(null===(t=this.customErrorMessage)||void 0===t?void 0:t.length)&&!(null===(i=this.validityMessage)||void 0===i?void 0:i.length))}get hasMessage(){return this.hasError||this.hasValidationError}componentWillLoad(){this.initial.value=this.value,this.initial.invalid=this.invalid}connectFormEventListeners(){var t,i,s;null===(t=this.parentFormEl)||void 0===t||t.addEventListener("formdata",this.contributeToFormData),null===(i=this.parentFormEl)||void 0===i||i.addEventListener("submit",this.onSubmitForm,{capture:!0}),null===(s=this.parentFormEl)||void 0===s||s.addEventListener("reset",this.onResetForm)}disconnectFormEventListeners(){var t,i,s;null===(t=this.parentFormEl)||void 0===t||t.removeEventListener("formdata",this.contributeToFormData),null===(i=this.parentFormEl)||void 0===i||i.removeEventListener("submit",this.onSubmitForm),null===(s=this.parentFormEl)||void 0===s||s.removeEventListener("reset",this.onResetForm)}connectedCallback(){this.connectFormEventListeners()}disconnectedCallback(){this.disconnectFormEventListeners()}render(){const{name:t,placeholder:i,required:h,fieldIndicator:o,value:a,disabled:l,form:r,invalid:n,valid:d,hint:u,label:c,tooltip:f,tooltipIcon:v,tooltipIconColor:p,fullWidth:b,showPasswordAriaLabel:m,hidePasswordAriaLabel:y,showed:g,readonly:w}=this;return s(e,{key:"a572ffb573f9d4ff7732c372077d1488a86fd4be"},s("r-input",Object.assign({key:"9296fe93c32f82c850c571dfc588d599d4fedfeb"},{name:t,placeholder:i,required:h,fieldIndicator:o,value:a,disabled:l,form:r,invalid:n,valid:d,hint:u,label:c,tooltip:f,tooltipIcon:v,tooltipIconColor:p,fullWidth:b,novalidate:!0,readonly:w},{ref:t=>this.nativeElement=t,type:g?"text":"password",onRInput:this.onInput,onRChange:this.onChange,onKeyUp:this.handleKeyup,onRBlur:this.handleBlur}),s("r-icon",{key:"4ed51719c83a3b4e90fd86d95969b982f3372d16",name:"padlock-closed",size:"s",slot:"leading"}),s("slot",{key:"c00d7cd2254773750a7a4627c7600550590f0e03",name:"popover",slot:"popover"}),s("r-icon-button",{key:"7bf8aabd7b00a2a36038d1f6162f11114dfa72fa",slot:"trailing",name:g?"eye-crossed-out":"eye",size:"s",disabled:l,label:g?y:m,onClick:this.onShowClick}),this.hasMessage&&s("r-hint",{key:"654c4558871e740f13ae50351ff82e3befccc83d",slot:"message",variant:"error"},this.hasError&&this.error,this.hasValidationError&&(this.customErrorMessage||this.validityMessage))),s("div",{key:"e8b5e4a4a69ddf7074e88eb18c5e9ff725e3baa5",class:"visually-hidden",ref:t=>this.passwordVisibilityChangeAlertContainer=t,"aria-live":"polite"}))}get host(){return h(this)}};a.style=":host{display:inline-flex;flex-direction:column;vertical-align:top}:host([full-width]:not([full-width=false])){display:block}:host([disabled]:not([disabled=false])) r-icon-button{opacity:1}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";export{a as r_input_password}