@designsystem-se/af 36.0.1-beta.0 → 36.0.2

package/dist/types/components/_form/form-file-upload/form-file-upload.d.ts

@@ -8,6 +8,7 @@ import { FormFileUploadErrorMessage } from './form-file-upload-error-messages.ty
  *	@enums FormInputFileType - form-input-file-type.enum.ts
  *  @enums FormInputFileVariation - form-input-file-variation.enum.ts
  * 	@swedishName Filuppladdare
+ *  @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet
  */
 export declare class FormFileUpload {
     hostElement: HTMLStencilElement;
@@ -120,6 +121,14 @@ export declare class FormFileUpload {
      * @en Set heading level. Default is 'h2'
      */
     afHeadingLevel: FormFileUploadHeadingLevel;
+    /**
+     * Om värdet är true får felmeddelandet attributet role="alert".
+     * Om felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska värdet sättas till false.
+     * @en If the value is true, the error message gets the attribute role="alert".
+     * If the error is shown together with multiple errors (for example after server-side validation), the value should be set to false.
+     */
+    afErrorMessageIsAlert: boolean | string;
+    get errorMessageIsAlert(): boolean;
     /**
      * Sänder ut fil som håller på att laddas upp, eller som har laddats upp - beroende på afValidation-inställning
      * @en Emits file on upload
@@ -170,6 +179,11 @@ export declare class FormFileUpload {
      */
     afMImportFiles(files: File[]): Promise<void>;
     afMGetFormControlElement(): Promise<HTMLInputElement>;
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
+     */
+    focusOnInput(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     get fileMaxSize(): number;

package/dist/types/components/_form/form-input/form-input.d.ts

@@ -11,6 +11,8 @@ import { FormInputVariation } from './form-input-variation.enum';
  * @enums FormInputValidation - form-input-validation.enum.ts
  * @enums FormInputVariation - form-input-variation.enum.ts
  * @swedishName Inmatningsfält
+ * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet
+ * @valueAccessor NumericValueAccessor TextValueAccessor
  */
 export declare class FormInput {
     hostElement: HTMLStencilElement;
@@ -184,6 +186,14 @@ export declare class FormInput {
      * FormInputType: TEXT, EMAIL, SEARCH, TEL and URL.
      */
     afTrimValue: boolean;
+    /**
+     * Om värdet är true får felmeddelandet attributet role="alert".
+     * Om felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska värdet sättas till false.
+     * @en If the value is true, the error message gets the attribute role="alert".
+     * If the error is shown together with multiple errors (for example after server-side validation), the value should be set to false.
+     */
+    afErrorMessageIsAlert: boolean | string;
+    get errorMessageIsAlert(): boolean;
     /**
      * Inputelementets 'onchange'-event.
      * @en The input element's 'onchange' event.
@@ -235,6 +245,11 @@ export declare class FormInput {
      * @en Returns a reference to the input element. Handy for setting focus programmatically.
      */
     afMGetFormControlElement(): Promise<HTMLInputElement>;
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
+     */
+    focusOnInput(): void;
     componentWillLoad(): void;
     componentWillUpdate(): void;
     componentDidLoad(): void;

package/dist/types/components/_form/form-input-search/form-input-search.d.ts

@@ -8,6 +8,8 @@ import { DigiFormInputCustomEvent } from '../../../components';
 /**
  * @enums FormInputSearchVariation - form-input-search-variation.enum.ts
  * @swedishName Sökfält
+ * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet
+ * @valueAccessor TextValueAccessor
  */
 export declare class FormInputSearch {
     hostElement: HTMLStencilElement;
@@ -191,6 +193,11 @@ export declare class FormInputSearch {
     keyupHandler(e: DigiFormInputCustomEvent<KeyboardEvent>): void;
     inputHandler(e: Event): void;
     clickHandler(e: Event): void;
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
+     */
+    focusOnInput(): void;
     clickOutsideListener(e: MouseEvent): void;
     focusOutsideListener(e: FocusEvent): void;
     componentWillLoad(): void;

package/dist/types/components/_form/form-radiobutton/form-radiobutton.d.ts

@@ -6,7 +6,9 @@ import { FormRadiobuttonLayout } from './form-radiobutton-layout.enum';
 /**
  * @enums FormRadiobuttonValidation - form-radiobutton-validation.enum.ts
  * @enums FormRadiobuttonVariation - form-radiobutton-variation.enum.ts
+ * @valueAccessor RadioValueAccessor
  * @swedishName Radioknapp
+ * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
  */
 export declare class FormRadiobutton {
     hostElement: HTMLStencilElement;
@@ -137,6 +139,11 @@ export declare class FormRadiobutton {
      * @en Returns a reference to the input element. Handy for setting focus programmatically.
      */
     afMGetFormControlElement(): Promise<HTMLInputElement>;
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
+     */
+    focusOnInput(): void;
     componentDidLoad(): void;
     get cssModifiers(): {
         [x: string]: boolean;

package/dist/types/components/_form/form-radiogroup/form-radiogroup-validation.enum.d.ts

@@ -0,0 +1,6 @@
+export declare enum FormRadiogroupValidation {
+    SUCCESS = "success",
+    ERROR = "error",
+    WARNING = "warning",
+    NEUTRAL = "neutral"
+}

package/dist/types/components/_form/form-radiogroup/form-radiogroup.d.ts

@@ -1,13 +1,22 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import type { HTMLStencilElement } from '../../../stencil-public-runtime';
+import { FormRadiogroupValidation } from './form-radiogroup-validation.enum';
 /**
  * @slot radiobuttons
  *
  * @swedishName Radiogrupp
+ * @valueAccessor TextValueAccessor
+ *
+ * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till den första radioknappen i gruppen
  */
 export declare class FormRadiogroup {
     hostElement: HTMLStencilElement;
     radiobuttons: NodeListOf<HTMLDigiFormRadiobuttonElement>;
+    /**
+     * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
+     * @en Input id attribute. Defaults to random string.
+     */
+    afId: string;
     /**
      * Värdet på radiogruppen
      * @en Radiogroup value
@@ -26,11 +35,34 @@ export declare class FormRadiogroup {
      * @en Radiogroup name
      */
     afName: string;
+    /**
+     * Sätter valideringsstatus. Kan vara 'success', 'error', 'warning', 'neutral' eller ingenting.
+     * @en Set input validation status
+     */
+    afValidation: FormRadiogroupValidation;
+    /**
+     * Sätter valideringsmeddelandet
+     * @en Set input validation message
+     */
+    afValidationText: string;
+    /**
+     * Om värdet är true får felmeddelandet attributet role="alert".
+     * Om felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska värdet sättas till false.
+     * @en If the value is true, the error message gets the attribute role="alert".
+     * If the error is shown together with multiple errors (for example after server-side validation), the value should be set to false.
+     */
+    afErrorMessageIsAlert: boolean | string;
+    get errorMessageIsAlert(): boolean;
     /**
      * Event när värdet ändras
      * @en Event when value changes
      */
     afOnGroupChange: EventEmitter<string>;
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till den första radioknappen i gruppen
+     * @en Listens for when focus is set on the custom element and propagates it down to the first radionutton in the group.
+     */
+    focusOnGroup(): void;
     radiobuttonChangeListener(e: any): void;
     componentDidLoad(): void;
     setRadiobuttons(value?: any): void;

package/dist/types/components/_form/form-select/form-select.d.ts

@@ -8,6 +8,8 @@ import { FormSelectVariation } from './form-select-variation.enum';
  * @enums FormSelectValidation - form-select-validation.enum
  * @enums FormSelectVariation - form-select-variation.enum
  * @swedishName Väljare
+ * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva select-elementet
+ * @valueAccessor SelectValueAccessor
  */
 export declare class FormSelect {
     hostElement: HTMLStencilElement;
@@ -85,8 +87,8 @@ export declare class FormSelect {
     afValue: string;
     onAfValueChanged(value: any): void;
     /**
-     * Inaktiverar valideringen
-     * @en Disables the validation.
+     * Döljer valideringsmeddelandet.
+     * @en Hides the validation message.
      */
     afDisableValidation: boolean;
     /**
@@ -104,17 +106,19 @@ export declare class FormSelect {
      * @en Sets the validation text.
      */
     afValidationText: string;
-    /**
-     * Sätter ett förvalt värde.
-     * @deprecated Använd afValue istället
-     * @en Sets initial selected value.
-     */
-    afStartSelected: number;
     /**
      * Sätter attributet 'autofocus'.
      * @en Input autofocus attribute
      */
     afAutofocus: boolean;
+    /**
+     * Om värdet är true får felmeddelandet attributet role="alert".
+     * Om felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska värdet sättas till false.
+     * @en If the value is true, the error message gets the attribute role="alert".
+     * If the error is shown together with multiple errors (for example after server-side validation), the value should be set to false.
+     */
+    afErrorMessageIsAlert: boolean | string;
+    get errorMessageIsAlert(): boolean;
     afOnChange: EventEmitter;
     afOnSelect: EventEmitter;
     afOnFocus: EventEmitter;
@@ -139,6 +143,11 @@ export declare class FormSelect {
      * @en Returns a reference to the form control element.
      */
     afMGetFormControlElement(): Promise<HTMLSelectElement>;
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva select-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual select element.
+     */
+    focusOnInput(): void;
     get cssModifiers(): {
         'digi-form-select--small': boolean;
         'digi-form-select--medium': boolean;

package/dist/types/components/_form/form-select-filter/form-select-filter.d.ts

@@ -6,6 +6,8 @@ import { FormSelectFilterValidation } from './form-select-validation.enum';
 /**
  * @slot empty-search-result - Innehåll som visas om sökningen inte ger några resultat.
  * @swedishName Väljare med sök
+ * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till toggle-knappen
+ * @valueAccessor SelectValueAccessor
  */
 export declare class FormSelectFilter {
     hostElement: HTMLStencilElement;
@@ -24,8 +26,8 @@ export declare class FormSelectFilter {
      */
     afDescription: string;
     /**
-     * Inaktiverar valideringen
-     * @en Disables the validation.
+     * Döljer valideringsmeddelandet.
+     * @en Hides the validation message.
      */
     afDisableValidation: boolean;
     /**
@@ -148,12 +150,20 @@ export declare class FormSelectFilter {
      * @en Input aria-describedby attribute on filter button
      */
     afFilterButtonAriaDescribedby: string;
+    /**
+     * Om värdet är true får felmeddelandet attributet role="alert".
+     * Om felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska värdet sättas till false.
+     * @en If the value is true, the error message gets the attribute role="alert".
+     * If the error is shown together with multiple errors (for example after server-side validation), the value should be set to false.
+     */
+    afErrorMessageIsAlert: boolean | string;
+    get errorMessageIsAlert(): boolean;
     afOnFocusout: EventEmitter;
     /**
      * Vid uppdatering av filtret
      * @en At filter submit
      */
-    afOnSubmitFilters: EventEmitter<any[]>;
+    afOnSubmitFilters: EventEmitter<IListItem[]>;
     /**
      * När filtret stängs utan att valda alternativ bekräftats
      * @en When the filter is closed without confirming the selected options
@@ -168,7 +178,7 @@ export declare class FormSelectFilter {
      * När ett eller flera filter väljs
      * @en When a filter is changed
      */
-    afOnSelect: EventEmitter<any[]>;
+    afOnSelect: EventEmitter<IListItem[]>;
     /**
      * När en söksträng ändras
      * @en When a search query is changed.
@@ -186,6 +196,11 @@ export declare class FormSelectFilter {
     afMCloseDropdown(): Promise<void>;
     clickHandler(e: MouseEvent): void;
     focusoutHandler(e: FocusEvent): void;
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till toggle-knappen.
+     * @en Listens for when focus is set on the custom element and propagates it down to the toggle butto.
+     */
+    focusOnElement(): void;
     debounce(func: any, timeout?: number): (...args: any[]) => void;
     setClosed(focusToggleButton?: boolean): void;
     setScroll(scrollY: number): void;

package/dist/types/components/_form/form-textarea/form-textarea.d.ts

@@ -6,6 +6,8 @@ import { FormTextareaValidation } from './form-textarea-validation.enum';
  * @enums FormTextareaValidation - form-textarea-validation.enum.ts
  * @enums FormTextareaVariation - form-textarea-variation.enum.ts
  * @swedishName Textarea
+ * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva textarea-elementet
+ * @valueAccessor TextValueAccessor
  */
 export declare class FormTextarea {
     hostElement: HTMLStencilElement;
@@ -116,6 +118,14 @@ export declare class FormTextarea {
      * @en Input autofocus attribute
      */
     afAutofocus: boolean;
+    /**
+     * Om värdet är true får felmeddelandet attributet role="alert".
+     * Om felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska värdet sättas till false.
+     * @en If the value is true, the error message gets the attribute role="alert".
+     * If the error is shown together with multiple errors (for example after server-side validation), the value should be set to false.
+     */
+    afErrorMessageIsAlert: boolean | string;
+    get errorMessageIsAlert(): boolean;
     /**
      * Textareatelementets 'onchange'-event.
      * @en The textarea element's 'onchange' event.
@@ -167,6 +177,11 @@ export declare class FormTextarea {
      * @en Returns a reference to the textarea element. Handy for setting focus programmatically.
      */
     afMGetFormControlElement(): Promise<HTMLTextAreaElement>;
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva textarea-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual textara element.
+     */
+    focusOnInput(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     setActiveValidationMessage(): void;

package/dist/types/components/_info-card/info-card/info-card.d.ts

@@ -31,13 +31,13 @@ export declare class InfoCard {
      */
     afType: InfoCardType;
     /**
-     * Sätter storlek på kortet. Kan vara 'Standar'.
-     * @en Set info card variation. Can be 'Standar'.
+     * Sätter storlek på kortet. Kan vara 'Standard'.
+     * @en Set info card size. Can be 'Standard'.
      */
     afSize: InfoCardSize;
     /**
-     * Sätter storlek på kortet. Kan vara 'Standard'.
-     * @en Set info card variation. Can be 'Standard'.
+     * Sätter position för kantlinjen. Kan vara 'top' eller 'left'. Detta har endast genomslag om 'af-type' är 'related'.
+     * @en Set border position. Can be 'top' or 'left'. This only applies if 'af-type' is 'related'.
      */
     afBorderPosition: InfoCardBorderPosition;
     /**

package/dist/types/components/_link/link-button/link-button.d.ts

@@ -15,6 +15,11 @@ export declare class LinkButton {
      * @en Set `href` attribute
      */
     afHref: string;
+    /**
+     * Sätter attributet 'aria-label'.
+     * @en Sets 'aria-label' attribute.
+     */
+    afAriaLabel: string;
     /**
      * Sätter variant. Kan vara 'primary', 'secondary', 'primary-alt' eller 'secondary-alt'
      * @en Set variation. Can be 'primary', 'secondary', 'primary-alt' or 'secondary-alt'

package/dist/types/components/_progress/progress-circle/progress-circle.d.ts

@@ -3,6 +3,7 @@ import { ProgressCircleRole } from './progress-circle-role.enum';
 /**
  * @enums ProgressCircleRole - progress-role.enum.ts
  * @swedishName Förloppscirkeln
+ * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva rubrik-elementet
  */
 export declare class ProgressCircle {
     headingElement: HTMLHeadingElement;

package/dist/types/components/_progress/progress-indicator/progress-indicator.d.ts

@@ -5,6 +5,7 @@ import { ProgressIndicatorVariation } from './progress-indicator-variation.enum'
  * @enums ProgressIndicatorRole - progress-indicator-role.enum.ts
  * @enums ProgressIndicatorVariation - progress-indicator-variation.enum.ts
  * @swedishName Förloppsstegaren
+ * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva rubrik-elementet
  */
 export declare class ProgressIndicator {
     headingElement: HTMLHeadingElement;

package/dist/types/components/_typography/typography-heading-jumbo/typography-heading-jumbo.d.ts

@@ -4,6 +4,7 @@ import { TypographyHeadingJumboVariation } from './typography-heading-jumbo-vari
  * @enums TypographyHeadingJumboLevel - typography-heading-jumbo-level.enum.ts
  * @enums TypographyHeadingJumboVariant - typography-heading-jumbo-variant.enum.ts
  * @swedishName Jumborubrik
+ * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva rubrik-elementet
  */
 export declare class TypographyHeadingJumbo {
     headingElement: HTMLHeadingElement;