@fundamental-ngx/ui5-webcomponents 0.66.0-rc.6 → 0.66.0-rc.8
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.
- package/fesm2022/fundamental-ngx-ui5-webcomponents-avatar-group.mjs +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-avatar-group.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-avatar.mjs +9 -4
- package/fesm2022/fundamental-ngx-ui5-webcomponents-avatar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-bar.mjs +7 -7
- package/fesm2022/fundamental-ngx-ui5-webcomponents-bar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-card.mjs +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-card.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-combo-box.mjs +10 -4
- package/fesm2022/fundamental-ngx-ui5-webcomponents-combo-box.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-date-picker.mjs +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-date-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-date-range-picker.mjs +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-date-range-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-date-time-input.mjs +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-date-time-input.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-date-time-picker.mjs +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-date-time-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-file-uploader.mjs +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-file-uploader.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-input-icon.mjs +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-input-icon.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-input.mjs +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-input.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-link.mjs +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-link.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-multi-combo-box.mjs +2 -2
- package/fesm2022/fundamental-ngx-ui5-webcomponents-multi-combo-box.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-multi-input.mjs +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-multi-input.mjs.map +1 -1
- package/fesm2022/{fundamental-ngx-ui5-webcomponents-number-input.mjs → fundamental-ngx-ui5-webcomponents-numeric-input.mjs} +23 -13
- package/fesm2022/fundamental-ngx-ui5-webcomponents-numeric-input.mjs.map +1 -0
- package/fesm2022/fundamental-ngx-ui5-webcomponents-suggestion-list-item.mjs +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-suggestion-list-item.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-tab-container.mjs +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-tab-container.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-text-area.mjs +20 -3
- package/fesm2022/fundamental-ngx-ui5-webcomponents-text-area.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-time-picker.mjs +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-time-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-token.mjs +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-token.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-types.mjs +1 -0
- package/fesm2022/fundamental-ngx-ui5-webcomponents-types.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents.mjs +86 -47
- package/fesm2022/fundamental-ngx-ui5-webcomponents.mjs.map +1 -1
- package/package.json +7 -7
- package/types/fundamental-ngx-ui5-webcomponents-avatar.d.ts +8 -3
- package/types/fundamental-ngx-ui5-webcomponents-bar.d.ts +6 -6
- package/types/fundamental-ngx-ui5-webcomponents-combo-box.d.ts +6 -1
- package/types/fundamental-ngx-ui5-webcomponents-input-icon.d.ts +1 -1
- package/types/fundamental-ngx-ui5-webcomponents-link.d.ts +1 -1
- package/types/{fundamental-ngx-ui5-webcomponents-number-input.d.ts → fundamental-ngx-ui5-webcomponents-numeric-input.d.ts} +20 -12
- package/types/fundamental-ngx-ui5-webcomponents-text-area.d.ts +16 -1
- package/types/fundamental-ngx-ui5-webcomponents-types.d.ts +1 -0
- package/types/fundamental-ngx-ui5-webcomponents.d.ts +59 -25
- package/fesm2022/fundamental-ngx-ui5-webcomponents-number-input.mjs.map +0 -1
|
@@ -78,7 +78,7 @@ class AvatarGroup {
|
|
|
78
78
|
{
|
|
79
79
|
"name": "overflowButton",
|
|
80
80
|
"description": "Defines the overflow button of the component.\n\n**Note:** We recommend using the `ui5-button` component.\n\n**Note:** If this slot is not used, the component will display the built-in overflow button.",
|
|
81
|
-
"since": "1.0.0
|
|
81
|
+
"since": "1.0.0"
|
|
82
82
|
}
|
|
83
83
|
];
|
|
84
84
|
this.elementRef = inject(ElementRef);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-avatar-group.mjs","sources":["../../../../libs/ui5-webcomponents/avatar-group/index.ts","../../../../libs/ui5-webcomponents/avatar-group/fundamental-ngx-ui5-webcomponents-avatar-group.ts"],"sourcesContent":["\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n AfterViewInit,\n effect,\n runInInjectionContext,\n inject,\n Injector,\n booleanAttribute,\n computed,\n signal,\n DestroyRef\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { default as _AvatarGroup } from '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n ContentDensityObserver,\n contentDensityObserverProviders,\n ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\n\nimport { AvatarGroupAccessibilityAttributes } from '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { default as AvatarColorScheme } from '@ui5/webcomponents/dist/types/AvatarColorScheme.js';\nimport { IAvatarGroupItem } from '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { default as AvatarGroupType } from '@ui5/webcomponents/dist/types/AvatarGroupType.js';\n\n@Component({\n standalone: true,\n selector: 'ui5-avatar-group, [ui5-avatar-group]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5AvatarGroup',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AvatarGroup implements AfterViewInit {\n\n /**\n * Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n */\n accessibilityAttributes = input<typeof _AvatarGroup.prototype.accessibilityAttributes | undefined>({});\n\n /**\n * Defines the accessible name of the AvatarGroup.\nWhen provided, this will override the default aria-label text.\n */\n accessibleName = input<typeof _AvatarGroup.prototype.accessibleName | undefined>();\n\n /**\n * Receives id(s) of the elements that describe the AvatarGroup.\nWhen provided, this will be used as aria-labelledby instead of aria-label.\n */\n accessibleNameRef = input<typeof _AvatarGroup.prototype.accessibleNameRef | undefined>();\n\n /**\n * Defines the mode of the `AvatarGroup`.\n */\n type = input<typeof _AvatarGroup.prototype.type | undefined>(\"Group\"); // className is now passed\n\n /**\n * Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.\n * @readonly This property is managed by the web component.\n */\n get colorScheme(): Array<AvatarColorScheme> {\n return this.element?.colorScheme ?? [];\n }\n\n /**\n * Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.\n * @readonly This property is managed by the web component.\n */\n get hiddenItems(): Array<IAvatarGroupItem> {\n return this.element?.hiddenItems ?? [];\n }\n\n\n /**\n * Fired when the component is activated either with a\nclick/tap or by using the Enter or Space key.\n */\n ui5Click = output<UI5CustomEvent<_AvatarGroup, 'click'>>();\n\n /**\n * Fired when the count of visible `ui5-avatar` elements in the\ncomponent has changed\n */\n ui5Overflow = output<UI5CustomEvent<_AvatarGroup, 'overflow'>>();\n\n /**\n * Available slots for content projection in this component.\n *\n * Slots allow you to insert custom content into predefined areas of the web component.\n * Use the `slot` attribute on child elements to target specific slots.\n *\n * - **(default)**: Defines the items of the component. Use the `ui5-avatar` component as an item.\n\n**Note:** The UX guidelines recommends using avatars with \"Circle\" shape.\n\nMoreover, if you use avatars with \"Square\" shape, there will be visual inconsistency\nas the built-in overflow action has \"Circle\" shape.\n * - **overflowButton**: Defines the overflow button of the component.\n\n**Note:** We recommend using the `ui5-button` component.\n\n**Note:** If this slot is not used, the component will display the built-in overflow button.\n *\n * @example\n * ```html\n * <ui5-avatar-group>\n * <div slot=\"header\">Custom header content</div>\n * <p>Default slot content</p>\n * </ui5-avatar-group>\n * ```\n *\n * @readonly\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}\n */\n readonly slots = [\n {\n \"name\": \"default\",\n \"description\": \"Defines the items of the component. Use the `ui5-avatar` component as an item.\\n\\n**Note:** The UX guidelines recommends using avatars with \\\"Circle\\\" shape.\\n\\nMoreover, if you use avatars with \\\"Square\\\" shape, there will be visual inconsistency\\nas the built-in overflow action has \\\"Circle\\\" shape.\"\n },\n {\n \"name\": \"overflowButton\",\n \"description\": \"Defines the overflow button of the component.\\n\\n**Note:** We recommend using the `ui5-button` component.\\n\\n**Note:** If this slot is not used, the component will display the built-in overflow button.\",\n \"since\": \"1.0.0-rc.13\"\n }\n ];\n\n\n public elementRef: ElementRef<_AvatarGroup> = inject(ElementRef);\n public injector = inject(Injector);\n\n /**\n * Content density observer is injected to activate automatic CSS class and\n * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.\n * @private\n */\n private readonly _contentDensityObserver = inject(ContentDensityObserver);\n private readonly _destroyRef = inject(DestroyRef);\n\n get element(): _AvatarGroup {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'accessibilityAttributes',\n 'accessibleName',\n 'accessibleNameRef',\n 'type',\n ];\n \n // Synchronize inputs (properties)\n for (const inputName of inputsToSync) {\n // Find the corresponding camelCase signal property on the Angular component\n const signalName = inputName.replace(/-./g, (x: string) => x[1].toUpperCase());\n\n // Use the Injector to run the effect in the correct context\n if (this[signalName] && typeof this[signalName] === 'function') {\n runInInjectionContext(this.injector, (): void => {\n effect((): void => {\n // Read the signal value\n const value = this[signalName]();\n if (wcElement) {\n // Skip writes when the signal is undefined and the property is already truthy\n // This prevents clobbering imperatively-set values (e.g., from RouterLink)\n if (value === undefined && wcElement[inputName]) {\n return;\n }\n // Write the value to the Web Component's property\n wcElement[inputName] = value;\n }\n });\n });\n }\n }\n \n \n const outputsToSync = [\n 'ui5Click',\n 'ui5Overflow',\n ];\n \n // Synchronize outputs (events)\n const _listeners: Array<() => void> = [];\n for (const outputName of outputsToSync) {\n // Map Angular output name to UI5 web component event name\n const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);\n // Ensure the output property exists and has an emit function before adding listener\n if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {\n // Cast the listener to the correct type to satisfy TypeScript\n const listener = (e: Event): void => {\n\n this[outputName].emit(e as CustomEvent<any>);\n };\n wcElement.addEventListener(eventName, listener);\n _listeners.push(() => wcElement.removeEventListener(eventName, listener));\n }\n }\n this._destroyRef.onDestroy(() => _listeners.forEach((fn) => fn()));\n \n\n }\n}\n\n// Re-export types for convenience\nexport { AvatarGroupAccessibilityAttributes } from '@ui5/webcomponents/dist/AvatarGroup.js';\nexport { IAvatarGroupItem } from '@ui5/webcomponents/dist/AvatarGroup.js';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-avatar-group.mjs","sources":["../../../../libs/ui5-webcomponents/avatar-group/index.ts","../../../../libs/ui5-webcomponents/avatar-group/fundamental-ngx-ui5-webcomponents-avatar-group.ts"],"sourcesContent":["\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n AfterViewInit,\n effect,\n runInInjectionContext,\n inject,\n Injector,\n booleanAttribute,\n computed,\n signal,\n DestroyRef\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { default as _AvatarGroup } from '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n ContentDensityObserver,\n contentDensityObserverProviders,\n ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\n\nimport { AvatarGroupAccessibilityAttributes } from '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { default as AvatarColorScheme } from '@ui5/webcomponents/dist/types/AvatarColorScheme.js';\nimport { IAvatarGroupItem } from '@ui5/webcomponents/dist/AvatarGroup.js';\nimport { default as AvatarGroupType } from '@ui5/webcomponents/dist/types/AvatarGroupType.js';\n\n@Component({\n standalone: true,\n selector: 'ui5-avatar-group, [ui5-avatar-group]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5AvatarGroup',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AvatarGroup implements AfterViewInit {\n\n /**\n * Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n */\n accessibilityAttributes = input<typeof _AvatarGroup.prototype.accessibilityAttributes | undefined>({});\n\n /**\n * Defines the accessible name of the AvatarGroup.\nWhen provided, this will override the default aria-label text.\n */\n accessibleName = input<typeof _AvatarGroup.prototype.accessibleName | undefined>();\n\n /**\n * Receives id(s) of the elements that describe the AvatarGroup.\nWhen provided, this will be used as aria-labelledby instead of aria-label.\n */\n accessibleNameRef = input<typeof _AvatarGroup.prototype.accessibleNameRef | undefined>();\n\n /**\n * Defines the mode of the `AvatarGroup`.\n */\n type = input<typeof _AvatarGroup.prototype.type | undefined>(\"Group\"); // className is now passed\n\n /**\n * Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.\n * @readonly This property is managed by the web component.\n */\n get colorScheme(): Array<AvatarColorScheme> {\n return this.element?.colorScheme ?? [];\n }\n\n /**\n * Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.\n * @readonly This property is managed by the web component.\n */\n get hiddenItems(): Array<IAvatarGroupItem> {\n return this.element?.hiddenItems ?? [];\n }\n\n\n /**\n * Fired when the component is activated either with a\nclick/tap or by using the Enter or Space key.\n */\n ui5Click = output<UI5CustomEvent<_AvatarGroup, 'click'>>();\n\n /**\n * Fired when the count of visible `ui5-avatar` elements in the\ncomponent has changed\n */\n ui5Overflow = output<UI5CustomEvent<_AvatarGroup, 'overflow'>>();\n\n /**\n * Available slots for content projection in this component.\n *\n * Slots allow you to insert custom content into predefined areas of the web component.\n * Use the `slot` attribute on child elements to target specific slots.\n *\n * - **(default)**: Defines the items of the component. Use the `ui5-avatar` component as an item.\n\n**Note:** The UX guidelines recommends using avatars with \"Circle\" shape.\n\nMoreover, if you use avatars with \"Square\" shape, there will be visual inconsistency\nas the built-in overflow action has \"Circle\" shape.\n * - **overflowButton**: Defines the overflow button of the component.\n\n**Note:** We recommend using the `ui5-button` component.\n\n**Note:** If this slot is not used, the component will display the built-in overflow button.\n *\n * @example\n * ```html\n * <ui5-avatar-group>\n * <div slot=\"header\">Custom header content</div>\n * <p>Default slot content</p>\n * </ui5-avatar-group>\n * ```\n *\n * @readonly\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}\n */\n readonly slots = [\n {\n \"name\": \"default\",\n \"description\": \"Defines the items of the component. Use the `ui5-avatar` component as an item.\\n\\n**Note:** The UX guidelines recommends using avatars with \\\"Circle\\\" shape.\\n\\nMoreover, if you use avatars with \\\"Square\\\" shape, there will be visual inconsistency\\nas the built-in overflow action has \\\"Circle\\\" shape.\"\n },\n {\n \"name\": \"overflowButton\",\n \"description\": \"Defines the overflow button of the component.\\n\\n**Note:** We recommend using the `ui5-button` component.\\n\\n**Note:** If this slot is not used, the component will display the built-in overflow button.\",\n \"since\": \"1.0.0\"\n }\n ];\n\n\n public elementRef: ElementRef<_AvatarGroup> = inject(ElementRef);\n public injector = inject(Injector);\n\n /**\n * Content density observer is injected to activate automatic CSS class and\n * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.\n * @private\n */\n private readonly _contentDensityObserver = inject(ContentDensityObserver);\n private readonly _destroyRef = inject(DestroyRef);\n\n get element(): _AvatarGroup {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'accessibilityAttributes',\n 'accessibleName',\n 'accessibleNameRef',\n 'type',\n ];\n \n // Synchronize inputs (properties)\n for (const inputName of inputsToSync) {\n // Find the corresponding camelCase signal property on the Angular component\n const signalName = inputName.replace(/-./g, (x: string) => x[1].toUpperCase());\n\n // Use the Injector to run the effect in the correct context\n if (this[signalName] && typeof this[signalName] === 'function') {\n runInInjectionContext(this.injector, (): void => {\n effect((): void => {\n // Read the signal value\n const value = this[signalName]();\n if (wcElement) {\n // Skip writes when the signal is undefined and the property is already truthy\n // This prevents clobbering imperatively-set values (e.g., from RouterLink)\n if (value === undefined && wcElement[inputName]) {\n return;\n }\n // Write the value to the Web Component's property\n wcElement[inputName] = value;\n }\n });\n });\n }\n }\n \n \n const outputsToSync = [\n 'ui5Click',\n 'ui5Overflow',\n ];\n \n // Synchronize outputs (events)\n const _listeners: Array<() => void> = [];\n for (const outputName of outputsToSync) {\n // Map Angular output name to UI5 web component event name\n const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);\n // Ensure the output property exists and has an emit function before adding listener\n if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {\n // Cast the listener to the correct type to satisfy TypeScript\n const listener = (e: Event): void => {\n\n this[outputName].emit(e as CustomEvent<any>);\n };\n wcElement.addEventListener(eventName, listener);\n _listeners.push(() => wcElement.removeEventListener(eventName, listener));\n }\n }\n this._destroyRef.onDestroy(() => _listeners.forEach((fn) => fn()));\n \n\n }\n}\n\n// Re-export types for convenience\nexport { AvatarGroupAccessibilityAttributes } from '@ui5/webcomponents/dist/AvatarGroup.js';\nexport { IAvatarGroupItem } from '@ui5/webcomponents/dist/AvatarGroup.js';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -35,8 +35,8 @@ class Avatar {
|
|
|
35
35
|
/**
|
|
36
36
|
* Defines the name of the fallback icon, which should be displayed in the following cases:
|
|
37
37
|
|
|
38
|
-
- If the initials are not valid (more than 3 letters
|
|
39
|
-
- If
|
|
38
|
+
- If the initials are not valid (more than 3 letters or empty initials).
|
|
39
|
+
- If the initials do not fit in the shape at the current size (e.g. WWW at size XS).
|
|
40
40
|
- If the image src is wrong.
|
|
41
41
|
|
|
42
42
|
**Note:** If not set, a default fallback icon "employee" is displayed.
|
|
@@ -71,7 +71,12 @@ class Avatar {
|
|
|
71
71
|
/**
|
|
72
72
|
* Defines the displayed initials.
|
|
73
73
|
|
|
74
|
-
Up to three
|
|
74
|
+
Up to three letters from an alphabetic script can be displayed as initials.
|
|
75
|
+
All scripts used in SAP-supported languages are accepted, except logographic and
|
|
76
|
+
pure syllabic scripts where the concept of initials does not apply: Han (Chinese,
|
|
77
|
+
Japanese kanji), Hiragana, and Katakana. Korean (Hangul) is supported.
|
|
78
|
+
If the letters do not fit inside the avatar shape at the current size, the fallback
|
|
79
|
+
icon is shown instead.
|
|
75
80
|
*/
|
|
76
81
|
this.initials = input(/* @ts-ignore */
|
|
77
82
|
...(ngDevMode ? [undefined, { debugName: "initials" }] : /* istanbul ignore next */ []));
|
|
@@ -156,7 +161,7 @@ class Avatar {
|
|
|
156
161
|
{
|
|
157
162
|
"name": "default",
|
|
158
163
|
"description": "Receives the desired `<img>` tag\n\n**Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>\n`ui5-avatar:not(:defined) {`<br/>\n `visibility: hidden;`<br/>\n`}`",
|
|
159
|
-
"since": "1.0.0
|
|
164
|
+
"since": "1.0.0"
|
|
160
165
|
}
|
|
161
166
|
];
|
|
162
167
|
this.elementRef = inject(ElementRef);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-avatar.mjs","sources":["../../../../libs/ui5-webcomponents/avatar/index.ts","../../../../libs/ui5-webcomponents/avatar/fundamental-ngx-ui5-webcomponents-avatar.ts"],"sourcesContent":["\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n AfterViewInit,\n effect,\n runInInjectionContext,\n inject,\n Injector,\n booleanAttribute,\n computed,\n signal,\n DestroyRef\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/Avatar.js';\nimport { default as _Avatar } from '@ui5/webcomponents/dist/Avatar.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n ContentDensityObserver,\n contentDensityObserverProviders,\n ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\n\nimport { AvatarAccessibilityAttributes } from '@ui5/webcomponents/dist/Avatar.js';\nimport { default as AvatarColorScheme } from '@ui5/webcomponents/dist/types/AvatarColorScheme.js';\nimport { default as AvatarMode } from '@ui5/webcomponents/dist/types/AvatarMode.js';\nimport { default as AvatarShape } from '@ui5/webcomponents/dist/types/AvatarShape.js';\nimport { default as AvatarSize } from '@ui5/webcomponents/dist/types/AvatarSize.js';\n\n@Component({\n standalone: true,\n selector: 'ui5-avatar, [ui5-avatar]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5Avatar',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Avatar implements AfterViewInit {\n\n /**\n * Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n */\n accessibilityAttributes = input<typeof _Avatar.prototype.accessibilityAttributes | undefined>({});\n\n /**\n * Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.\n */\n accessibleName = input<typeof _Avatar.prototype.accessibleName | undefined>();\n\n /**\n * Defines the background color of the desired image.\nIf `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.\n */\n colorScheme = input<typeof _Avatar.prototype.colorScheme | undefined>(\"Auto\");\n\n /**\n * Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.\n */\n disabled = input(false, { transform: booleanAttribute });\n\n /**\n * Defines the name of the fallback icon, which should be displayed in the following cases:\n\n\t- If the initials are not valid (more than 3 letters, unsupported languages or empty initials).\n\t- If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).\n\t- If the image src is wrong.\n\n**Note:** If not set, a default fallback icon \"employee\" is displayed.\n\n**Note:** You should import the desired icon first, then use its name as \"fallback-icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar fallback-icon=\"alert\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n */\n fallbackIcon = input<typeof _Avatar.prototype.fallbackIcon | undefined>(\"employee\");\n\n /**\n * Defines the name of the UI5 Icon, that will be displayed.\n\n**Note:** If `image` slot is provided, the property will be ignored.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar icon=\"employee\">`\n\n**Note:** If no icon or an empty one is provided, by default the \"employee\" icon should be displayed.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n */\n icon = input<typeof _Avatar.prototype.icon | undefined>();\n\n /**\n * Defines the displayed initials.\n\nUp to three Latin letters can be displayed as initials.\n */\n initials = input<typeof _Avatar.prototype.initials | undefined>();\n\n /**\n * Defines if the avatar is interactive (focusable and pressable).\n\n**Note:** When set to `true`, this property takes precedence over the `mode` property,\nand the avatar will be rendered as interactive (role=\"button\", focusable) regardless of the `mode` value.\n\n**Note:** This property won't have effect if the `disabled`\nproperty is set to `true`.\n */\n interactive = input(false, { transform: booleanAttribute });\n\n /**\n * Defines the mode of the component.\n\n**Note:**\n- `Image` (default) - renders with role=\"img\"\n- `Decorative` - renders with role=\"presentation\" and aria-hidden=\"true\", making it purely decorative\n- `Interactive` - renders with role=\"button\", focusable (tabindex=\"0\"), and supports keyboard interaction\n\n**Note:** This property is ignored when the `interactive` property is set to `true`.\nIn that case, the avatar will always be rendered as interactive.\n */\n mode = input<typeof _Avatar.prototype.mode | undefined>(\"Image\");\n\n /**\n * Defines the shape of the component.\n */\n shape = input<typeof _Avatar.prototype.shape | undefined>(\"Circle\");\n\n /**\n * Defines predefined size of the component.\n */\n size = input<typeof _Avatar.prototype.size | undefined>(\"S\"); // className is now passed\n\n\n\n /**\n * Fired on mouseup, space and enter if avatar is interactive\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.\n */\n ui5Click = output<UI5CustomEvent<_Avatar, 'click'>>();\n\n /**\n * Available slots for content projection in this component.\n *\n * Slots allow you to insert custom content into predefined areas of the web component.\n * Use the `slot` attribute on child elements to target specific slots.\n *\n * - **badge**: Defines the optional badge that will be used for visual affordance.\n\n**Recommendation:** While badges are supported on all avatars, it is recommended\nto use them with interactive avatars (via `mode=\"Interactive\"` or `interactive` attribute)\nto provide better user experience and accessibility.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, use the `ui5-avatar-badge` component.\n * - **(default)**: Receives the desired `<img>` tag\n\n**Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>\n`ui5-avatar:not(:defined) {`<br/>\n `visibility: hidden;`<br/>\n`}`\n *\n * @example\n * ```html\n * <ui5-avatar>\n * <div slot=\"header\">Custom header content</div>\n * <p>Default slot content</p>\n * </ui5-avatar>\n * ```\n *\n * @readonly\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}\n */\n readonly slots = [\n {\n \"name\": \"badge\",\n \"description\": \"Defines the optional badge that will be used for visual affordance.\\n\\n**Recommendation:** While badges are supported on all avatars, it is recommended\\nto use them with interactive avatars (via `mode=\\\"Interactive\\\"` or `interactive` attribute)\\nto provide better user experience and accessibility.\\n\\n**Note:** While the slot allows for custom badges, to achieve\\nthe Fiori design, use the `ui5-avatar-badge` component.\",\n \"since\": \"1.7.0\"\n },\n {\n \"name\": \"default\",\n \"description\": \"Receives the desired `<img>` tag\\n\\n**Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>\\n`ui5-avatar:not(:defined) {`<br/>\\n `visibility: hidden;`<br/>\\n`}`\",\n \"since\": \"1.0.0-rc.15\"\n }\n ];\n\n\n public elementRef: ElementRef<_Avatar> = inject(ElementRef);\n public injector = inject(Injector);\n\n /**\n * Content density observer is injected to activate automatic CSS class and\n * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.\n * @private\n */\n private readonly _contentDensityObserver = inject(ContentDensityObserver);\n private readonly _destroyRef = inject(DestroyRef);\n\n get element(): _Avatar {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'accessibilityAttributes',\n 'accessibleName',\n 'colorScheme',\n 'disabled',\n 'fallbackIcon',\n 'icon',\n 'initials',\n 'interactive',\n 'mode',\n 'shape',\n 'size',\n ];\n \n // Synchronize inputs (properties)\n for (const inputName of inputsToSync) {\n // Find the corresponding camelCase signal property on the Angular component\n const signalName = inputName.replace(/-./g, (x: string) => x[1].toUpperCase());\n\n // Use the Injector to run the effect in the correct context\n if (this[signalName] && typeof this[signalName] === 'function') {\n runInInjectionContext(this.injector, (): void => {\n effect((): void => {\n // Read the signal value\n const value = this[signalName]();\n if (wcElement) {\n // Skip writes when the signal is undefined and the property is already truthy\n // This prevents clobbering imperatively-set values (e.g., from RouterLink)\n if (value === undefined && wcElement[inputName]) {\n return;\n }\n // Write the value to the Web Component's property\n wcElement[inputName] = value;\n }\n });\n });\n }\n }\n \n \n const outputsToSync = [\n 'ui5Click',\n ];\n \n // Synchronize outputs (events)\n const _listeners: Array<() => void> = [];\n for (const outputName of outputsToSync) {\n // Map Angular output name to UI5 web component event name\n const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);\n // Ensure the output property exists and has an emit function before adding listener\n if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {\n // Cast the listener to the correct type to satisfy TypeScript\n const listener = (e: Event): void => {\n\n this[outputName].emit(e as CustomEvent<any>);\n };\n wcElement.addEventListener(eventName, listener);\n _listeners.push(() => wcElement.removeEventListener(eventName, listener));\n }\n }\n this._destroyRef.onDestroy(() => _listeners.forEach((fn) => fn()));\n \n\n }\n}\n\n// Re-export types for convenience\nexport { AvatarAccessibilityAttributes } from '@ui5/webcomponents/dist/Avatar.js';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-avatar.mjs","sources":["../../../../libs/ui5-webcomponents/avatar/index.ts","../../../../libs/ui5-webcomponents/avatar/fundamental-ngx-ui5-webcomponents-avatar.ts"],"sourcesContent":["\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n AfterViewInit,\n effect,\n runInInjectionContext,\n inject,\n Injector,\n booleanAttribute,\n computed,\n signal,\n DestroyRef\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/Avatar.js';\nimport { default as _Avatar } from '@ui5/webcomponents/dist/Avatar.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n ContentDensityObserver,\n contentDensityObserverProviders,\n ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\n\nimport { AvatarAccessibilityAttributes } from '@ui5/webcomponents/dist/Avatar.js';\nimport { default as AvatarColorScheme } from '@ui5/webcomponents/dist/types/AvatarColorScheme.js';\nimport { default as AvatarMode } from '@ui5/webcomponents/dist/types/AvatarMode.js';\nimport { default as AvatarShape } from '@ui5/webcomponents/dist/types/AvatarShape.js';\nimport { default as AvatarSize } from '@ui5/webcomponents/dist/types/AvatarSize.js';\n\n@Component({\n standalone: true,\n selector: 'ui5-avatar, [ui5-avatar]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5Avatar',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Avatar implements AfterViewInit {\n\n /**\n * Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n */\n accessibilityAttributes = input<typeof _Avatar.prototype.accessibilityAttributes | undefined>({});\n\n /**\n * Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.\n */\n accessibleName = input<typeof _Avatar.prototype.accessibleName | undefined>();\n\n /**\n * Defines the background color of the desired image.\nIf `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.\n */\n colorScheme = input<typeof _Avatar.prototype.colorScheme | undefined>(\"Auto\");\n\n /**\n * Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.\n */\n disabled = input(false, { transform: booleanAttribute });\n\n /**\n * Defines the name of the fallback icon, which should be displayed in the following cases:\n\n\t- If the initials are not valid (more than 3 letters or empty initials).\n\t- If the initials do not fit in the shape at the current size (e.g. WWW at size XS).\n\t- If the image src is wrong.\n\n**Note:** If not set, a default fallback icon \"employee\" is displayed.\n\n**Note:** You should import the desired icon first, then use its name as \"fallback-icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar fallback-icon=\"alert\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n */\n fallbackIcon = input<typeof _Avatar.prototype.fallbackIcon | undefined>(\"employee\");\n\n /**\n * Defines the name of the UI5 Icon, that will be displayed.\n\n**Note:** If `image` slot is provided, the property will be ignored.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar icon=\"employee\">`\n\n**Note:** If no icon or an empty one is provided, by default the \"employee\" icon should be displayed.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n */\n icon = input<typeof _Avatar.prototype.icon | undefined>();\n\n /**\n * Defines the displayed initials.\n\nUp to three letters from an alphabetic script can be displayed as initials.\nAll scripts used in SAP-supported languages are accepted, except logographic and\npure syllabic scripts where the concept of initials does not apply: Han (Chinese,\nJapanese kanji), Hiragana, and Katakana. Korean (Hangul) is supported.\nIf the letters do not fit inside the avatar shape at the current size, the fallback\nicon is shown instead.\n */\n initials = input<typeof _Avatar.prototype.initials | undefined>();\n\n /**\n * Defines if the avatar is interactive (focusable and pressable).\n\n**Note:** When set to `true`, this property takes precedence over the `mode` property,\nand the avatar will be rendered as interactive (role=\"button\", focusable) regardless of the `mode` value.\n\n**Note:** This property won't have effect if the `disabled`\nproperty is set to `true`.\n */\n interactive = input(false, { transform: booleanAttribute });\n\n /**\n * Defines the mode of the component.\n\n**Note:**\n- `Image` (default) - renders with role=\"img\"\n- `Decorative` - renders with role=\"presentation\" and aria-hidden=\"true\", making it purely decorative\n- `Interactive` - renders with role=\"button\", focusable (tabindex=\"0\"), and supports keyboard interaction\n\n**Note:** This property is ignored when the `interactive` property is set to `true`.\nIn that case, the avatar will always be rendered as interactive.\n */\n mode = input<typeof _Avatar.prototype.mode | undefined>(\"Image\");\n\n /**\n * Defines the shape of the component.\n */\n shape = input<typeof _Avatar.prototype.shape | undefined>(\"Circle\");\n\n /**\n * Defines predefined size of the component.\n */\n size = input<typeof _Avatar.prototype.size | undefined>(\"S\"); // className is now passed\n\n\n\n /**\n * Fired on mouseup, space and enter if avatar is interactive\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.\n */\n ui5Click = output<UI5CustomEvent<_Avatar, 'click'>>();\n\n /**\n * Available slots for content projection in this component.\n *\n * Slots allow you to insert custom content into predefined areas of the web component.\n * Use the `slot` attribute on child elements to target specific slots.\n *\n * - **badge**: Defines the optional badge that will be used for visual affordance.\n\n**Recommendation:** While badges are supported on all avatars, it is recommended\nto use them with interactive avatars (via `mode=\"Interactive\"` or `interactive` attribute)\nto provide better user experience and accessibility.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, use the `ui5-avatar-badge` component.\n * - **(default)**: Receives the desired `<img>` tag\n\n**Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>\n`ui5-avatar:not(:defined) {`<br/>\n `visibility: hidden;`<br/>\n`}`\n *\n * @example\n * ```html\n * <ui5-avatar>\n * <div slot=\"header\">Custom header content</div>\n * <p>Default slot content</p>\n * </ui5-avatar>\n * ```\n *\n * @readonly\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}\n */\n readonly slots = [\n {\n \"name\": \"badge\",\n \"description\": \"Defines the optional badge that will be used for visual affordance.\\n\\n**Recommendation:** While badges are supported on all avatars, it is recommended\\nto use them with interactive avatars (via `mode=\\\"Interactive\\\"` or `interactive` attribute)\\nto provide better user experience and accessibility.\\n\\n**Note:** While the slot allows for custom badges, to achieve\\nthe Fiori design, use the `ui5-avatar-badge` component.\",\n \"since\": \"1.7.0\"\n },\n {\n \"name\": \"default\",\n \"description\": \"Receives the desired `<img>` tag\\n\\n**Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>\\n`ui5-avatar:not(:defined) {`<br/>\\n `visibility: hidden;`<br/>\\n`}`\",\n \"since\": \"1.0.0\"\n }\n ];\n\n\n public elementRef: ElementRef<_Avatar> = inject(ElementRef);\n public injector = inject(Injector);\n\n /**\n * Content density observer is injected to activate automatic CSS class and\n * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.\n * @private\n */\n private readonly _contentDensityObserver = inject(ContentDensityObserver);\n private readonly _destroyRef = inject(DestroyRef);\n\n get element(): _Avatar {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'accessibilityAttributes',\n 'accessibleName',\n 'colorScheme',\n 'disabled',\n 'fallbackIcon',\n 'icon',\n 'initials',\n 'interactive',\n 'mode',\n 'shape',\n 'size',\n ];\n \n // Synchronize inputs (properties)\n for (const inputName of inputsToSync) {\n // Find the corresponding camelCase signal property on the Angular component\n const signalName = inputName.replace(/-./g, (x: string) => x[1].toUpperCase());\n\n // Use the Injector to run the effect in the correct context\n if (this[signalName] && typeof this[signalName] === 'function') {\n runInInjectionContext(this.injector, (): void => {\n effect((): void => {\n // Read the signal value\n const value = this[signalName]();\n if (wcElement) {\n // Skip writes when the signal is undefined and the property is already truthy\n // This prevents clobbering imperatively-set values (e.g., from RouterLink)\n if (value === undefined && wcElement[inputName]) {\n return;\n }\n // Write the value to the Web Component's property\n wcElement[inputName] = value;\n }\n });\n });\n }\n }\n \n \n const outputsToSync = [\n 'ui5Click',\n ];\n \n // Synchronize outputs (events)\n const _listeners: Array<() => void> = [];\n for (const outputName of outputsToSync) {\n // Map Angular output name to UI5 web component event name\n const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);\n // Ensure the output property exists and has an emit function before adding listener\n if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {\n // Cast the listener to the correct type to satisfy TypeScript\n const listener = (e: Event): void => {\n\n this[outputName].emit(e as CustomEvent<any>);\n };\n wcElement.addEventListener(eventName, listener);\n _listeners.push(() => wcElement.removeEventListener(eventName, listener));\n }\n }\n this._destroyRef.onDestroy(() => _listeners.forEach((fn) => fn()));\n \n\n }\n}\n\n// Re-export types for convenience\nexport { AvatarAccessibilityAttributes } from '@ui5/webcomponents/dist/Avatar.js';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -18,15 +18,15 @@ class Bar {
|
|
|
18
18
|
/**
|
|
19
19
|
* Specifies the ARIA role applied to the component for accessibility purposes.
|
|
20
20
|
|
|
21
|
-
**Note:**
|
|
21
|
+
**Note:** By default, no ARIA role is applied ("None"). The Bar derives its semantics
|
|
22
|
+
from the container it is placed in, such as a page header or footer.
|
|
22
23
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
- If there is only one or no active element, set accessibleRole to "None" to avoid rendering the ARIA role "toolbar", as that role implies a grouping of multiple interactive controls.
|
|
24
|
+
**Note:** The "Toolbar" value is deprecated. The Bar is a structural layout container and does not
|
|
25
|
+
support toolbar keyboard interactions (such as arrow-key navigation between components). When 3 or more
|
|
26
|
+
interactive elements are needed, use the `ui5-toolbar` component instead, which provides the correct
|
|
27
|
+
toolbar role and arrow-key navigation between components.
|
|
28
28
|
*/
|
|
29
|
-
this.accessibleRole = input("
|
|
29
|
+
this.accessibleRole = input("None", /* @ts-ignore */
|
|
30
30
|
...(ngDevMode ? [{ debugName: "accessibleRole" }] : /* istanbul ignore next */ []));
|
|
31
31
|
/**
|
|
32
32
|
* Defines the component's design.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-bar.mjs","sources":["../../../../libs/ui5-webcomponents/bar/index.ts","../../../../libs/ui5-webcomponents/bar/fundamental-ngx-ui5-webcomponents-bar.ts"],"sourcesContent":["\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n AfterViewInit,\n effect,\n runInInjectionContext,\n inject,\n Injector,\n booleanAttribute,\n computed,\n signal\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/Bar.js';\nimport { default as _Bar } from '@ui5/webcomponents/dist/Bar.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n ContentDensityObserver,\n contentDensityObserverProviders,\n ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\n\nimport { default as BarAccessibleRole } from '@ui5/webcomponents/dist/types/BarAccessibleRole.js';\nimport { default as BarDesign } from '@ui5/webcomponents/dist/types/BarDesign.js';\n\n@Component({\n standalone: true,\n selector: 'ui5-bar, [ui5-bar]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5Bar',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Bar implements AfterViewInit {\n\n /**\n * Defines the accessible ARIA name of the component.\n */\n accessibleName = input<typeof _Bar.prototype.accessibleName | undefined>();\n\n /**\n * Receives id(or many ids) of the elements that label the bar.\n */\n accessibleNameRef = input<typeof _Bar.prototype.accessibleNameRef | undefined>();\n\n /**\n * Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note
|
|
1
|
+
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-bar.mjs","sources":["../../../../libs/ui5-webcomponents/bar/index.ts","../../../../libs/ui5-webcomponents/bar/fundamental-ngx-ui5-webcomponents-bar.ts"],"sourcesContent":["\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n AfterViewInit,\n effect,\n runInInjectionContext,\n inject,\n Injector,\n booleanAttribute,\n computed,\n signal\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/Bar.js';\nimport { default as _Bar } from '@ui5/webcomponents/dist/Bar.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n ContentDensityObserver,\n contentDensityObserverProviders,\n ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\n\nimport { default as BarAccessibleRole } from '@ui5/webcomponents/dist/types/BarAccessibleRole.js';\nimport { default as BarDesign } from '@ui5/webcomponents/dist/types/BarDesign.js';\n\n@Component({\n standalone: true,\n selector: 'ui5-bar, [ui5-bar]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5Bar',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Bar implements AfterViewInit {\n\n /**\n * Defines the accessible ARIA name of the component.\n */\n accessibleName = input<typeof _Bar.prototype.accessibleName | undefined>();\n\n /**\n * Receives id(or many ids) of the elements that label the bar.\n */\n accessibleNameRef = input<typeof _Bar.prototype.accessibleNameRef | undefined>();\n\n /**\n * Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note:** By default, no ARIA role is applied (\"None\"). The Bar derives its semantics\nfrom the container it is placed in, such as a page header or footer.\n\n**Note:** The \"Toolbar\" value is deprecated. The Bar is a structural layout container and does not\nsupport toolbar keyboard interactions (such as arrow-key navigation between components). When 3 or more\ninteractive elements are needed, use the `ui5-toolbar` component instead, which provides the correct\ntoolbar role and arrow-key navigation between components.\n */\n accessibleRole = input<typeof _Bar.prototype.accessibleRole | undefined>(\"None\");\n\n /**\n * Defines the component's design.\n */\n design = input<typeof _Bar.prototype.design | undefined>(\"Header\"); // className is now passed\n\n\n\n\n /**\n * Available slots for content projection in this component.\n *\n * Slots allow you to insert custom content into predefined areas of the web component.\n * Use the `slot` attribute on child elements to target specific slots.\n *\n * - **(default)**: Defines the content in the middle of the bar.\n * - **endContent**: Defines the content at the end of the bar.\n * - **startContent**: Defines the content at the start of the bar.\n *\n * @example\n * ```html\n * <ui5-bar>\n * <div slot=\"header\">Custom header content</div>\n * <p>Default slot content</p>\n * </ui5-bar>\n * ```\n *\n * @readonly\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}\n */\n readonly slots = [\n {\n \"name\": \"default\",\n \"description\": \"Defines the content in the middle of the bar.\"\n },\n {\n \"name\": \"endContent\",\n \"description\": \"Defines the content at the end of the bar.\"\n },\n {\n \"name\": \"startContent\",\n \"description\": \"Defines the content at the start of the bar.\"\n }\n ];\n\n\n public elementRef: ElementRef<_Bar> = inject(ElementRef);\n public injector = inject(Injector);\n\n /**\n * Content density observer is injected to activate automatic CSS class and\n * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.\n * @private\n */\n private readonly _contentDensityObserver = inject(ContentDensityObserver);\n\n get element(): _Bar {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'accessibleName',\n 'accessibleNameRef',\n 'accessibleRole',\n 'design',\n ];\n \n // Synchronize inputs (properties)\n for (const inputName of inputsToSync) {\n // Find the corresponding camelCase signal property on the Angular component\n const signalName = inputName.replace(/-./g, (x: string) => x[1].toUpperCase());\n\n // Use the Injector to run the effect in the correct context\n if (this[signalName] && typeof this[signalName] === 'function') {\n runInInjectionContext(this.injector, (): void => {\n effect((): void => {\n // Read the signal value\n const value = this[signalName]();\n if (wcElement) {\n // Skip writes when the signal is undefined and the property is already truthy\n // This prevents clobbering imperatively-set values (e.g., from RouterLink)\n if (value === undefined && wcElement[inputName]) {\n return;\n }\n // Write the value to the Web Component's property\n wcElement[inputName] = value;\n }\n });\n });\n }\n }\n \n \n \n\n }\n}\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-card.mjs","sources":["../../../../libs/ui5-webcomponents/card/index.ts","../../../../libs/ui5-webcomponents/card/fundamental-ngx-ui5-webcomponents-card.ts"],"sourcesContent":["\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n AfterViewInit,\n effect,\n runInInjectionContext,\n inject,\n Injector,\n booleanAttribute,\n computed,\n signal\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/Card.js';\nimport { default as _Card } from '@ui5/webcomponents/dist/Card.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n ContentDensityObserver,\n contentDensityObserverProviders,\n ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\n\n\n\n@Component({\n standalone: true,\n selector: 'ui5-card, [ui5-card]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5Card',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Card implements AfterViewInit {\n\n /**\n * Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.\n\n**Note:** `accessibleName` should be always set, unless `accessibleNameRef` is set.\n */\n accessibleName = input<typeof _Card.prototype.accessibleName | undefined>();\n\n /**\n * Defines the IDs of the elements that label the component.\n */\n accessibleNameRef = input<typeof _Card.prototype.accessibleNameRef | undefined>();\n\n /**\n * Defines if a loading indicator would be displayed over the card.\n */\n loading = input(false, { transform: booleanAttribute });\n\n /**\n * Defines the delay in milliseconds, after which the loading indicator will show up for this card.\n */\n loadingDelay = input<typeof _Card.prototype.loadingDelay | undefined>(1000); // className is now passed\n\n\n\n\n /**\n * Available slots for content projection in this component.\n *\n * Slots allow you to insert custom content into predefined areas of the web component.\n * Use the `slot` attribute on child elements to target specific slots.\n *\n * - **(default)**: Defines the content of the component.\n * - **header**: Defines the header of the component.\n\n**Note:** Use `ui5-card-header` for the intended design.\n *\n * @example\n * ```html\n * <ui5-card>\n * <div slot=\"header\">Custom header content</div>\n * <p>Default slot content</p>\n * </ui5-card>\n * ```\n *\n * @readonly\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}\n */\n readonly slots = [\n {\n \"name\": \"default\",\n \"description\": \"Defines the content of the component.\"\n },\n {\n \"name\": \"header\",\n \"description\": \"Defines the header of the component.\\n\\n**Note:** Use `ui5-card-header` for the intended design.\",\n \"since\": \"1.0.0
|
|
1
|
+
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-card.mjs","sources":["../../../../libs/ui5-webcomponents/card/index.ts","../../../../libs/ui5-webcomponents/card/fundamental-ngx-ui5-webcomponents-card.ts"],"sourcesContent":["\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n AfterViewInit,\n effect,\n runInInjectionContext,\n inject,\n Injector,\n booleanAttribute,\n computed,\n signal\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/Card.js';\nimport { default as _Card } from '@ui5/webcomponents/dist/Card.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n ContentDensityObserver,\n contentDensityObserverProviders,\n ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\n\n\n\n@Component({\n standalone: true,\n selector: 'ui5-card, [ui5-card]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5Card',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Card implements AfterViewInit {\n\n /**\n * Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.\n\n**Note:** `accessibleName` should be always set, unless `accessibleNameRef` is set.\n */\n accessibleName = input<typeof _Card.prototype.accessibleName | undefined>();\n\n /**\n * Defines the IDs of the elements that label the component.\n */\n accessibleNameRef = input<typeof _Card.prototype.accessibleNameRef | undefined>();\n\n /**\n * Defines if a loading indicator would be displayed over the card.\n */\n loading = input(false, { transform: booleanAttribute });\n\n /**\n * Defines the delay in milliseconds, after which the loading indicator will show up for this card.\n */\n loadingDelay = input<typeof _Card.prototype.loadingDelay | undefined>(1000); // className is now passed\n\n\n\n\n /**\n * Available slots for content projection in this component.\n *\n * Slots allow you to insert custom content into predefined areas of the web component.\n * Use the `slot` attribute on child elements to target specific slots.\n *\n * - **(default)**: Defines the content of the component.\n * - **header**: Defines the header of the component.\n\n**Note:** Use `ui5-card-header` for the intended design.\n *\n * @example\n * ```html\n * <ui5-card>\n * <div slot=\"header\">Custom header content</div>\n * <p>Default slot content</p>\n * </ui5-card>\n * ```\n *\n * @readonly\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}\n */\n readonly slots = [\n {\n \"name\": \"default\",\n \"description\": \"Defines the content of the component.\"\n },\n {\n \"name\": \"header\",\n \"description\": \"Defines the header of the component.\\n\\n**Note:** Use `ui5-card-header` for the intended design.\",\n \"since\": \"1.0.0\"\n }\n ];\n\n\n public elementRef: ElementRef<_Card> = inject(ElementRef);\n public injector = inject(Injector);\n\n /**\n * Content density observer is injected to activate automatic CSS class and\n * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.\n * @private\n */\n private readonly _contentDensityObserver = inject(ContentDensityObserver);\n\n get element(): _Card {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'accessibleName',\n 'accessibleNameRef',\n 'loading',\n 'loadingDelay',\n ];\n \n // Synchronize inputs (properties)\n for (const inputName of inputsToSync) {\n // Find the corresponding camelCase signal property on the Angular component\n const signalName = inputName.replace(/-./g, (x: string) => x[1].toUpperCase());\n\n // Use the Injector to run the effect in the correct context\n if (this[signalName] && typeof this[signalName] === 'function') {\n runInInjectionContext(this.injector, (): void => {\n effect((): void => {\n // Read the signal value\n const value = this[signalName]();\n if (wcElement) {\n // Skip writes when the signal is undefined and the property is already truthy\n // This prevents clobbering imperatively-set values (e.g., from RouterLink)\n if (value === undefined && wcElement[inputName]) {\n return;\n }\n // Write the value to the Web Component's property\n wcElement[inputName] = value;\n }\n });\n });\n }\n }\n \n \n \n\n }\n}\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -109,6 +109,11 @@ class ComboBox {
|
|
|
109
109
|
**Note:** filterValue property is updated, input is changed.
|
|
110
110
|
*/
|
|
111
111
|
this.ui5Input = output();
|
|
112
|
+
/**
|
|
113
|
+
* Fired when the application should provide items for the component to render.
|
|
114
|
+
The event is fired either when text is input or when the user presses arrow down on a combo-box with no items.
|
|
115
|
+
*/
|
|
116
|
+
this.ui5LoadItems = output();
|
|
112
117
|
/**
|
|
113
118
|
* Fired when the dropdown is opened.
|
|
114
119
|
*/
|
|
@@ -152,12 +157,12 @@ class ComboBox {
|
|
|
152
157
|
{
|
|
153
158
|
"name": "icon",
|
|
154
159
|
"description": "Defines the icon to be displayed in the input field.",
|
|
155
|
-
"since": "1.0.0
|
|
160
|
+
"since": "1.0.0"
|
|
156
161
|
},
|
|
157
162
|
{
|
|
158
163
|
"name": "valueStateMessage",
|
|
159
164
|
"description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the `ui5-combobox` is in `Information`, `Critical` or `Negative` value state.",
|
|
160
|
-
"since": "1.0.0
|
|
165
|
+
"since": "1.0.0"
|
|
161
166
|
}
|
|
162
167
|
];
|
|
163
168
|
this.elementRef = inject(ElementRef);
|
|
@@ -219,6 +224,7 @@ class ComboBox {
|
|
|
219
224
|
'ui5Change',
|
|
220
225
|
'ui5Close',
|
|
221
226
|
'ui5Input',
|
|
227
|
+
'ui5LoadItems',
|
|
222
228
|
'ui5Open',
|
|
223
229
|
'ui5SelectionChange',
|
|
224
230
|
];
|
|
@@ -240,7 +246,7 @@ class ComboBox {
|
|
|
240
246
|
this._destroyRef.onDestroy(() => _listeners.forEach((fn) => fn()));
|
|
241
247
|
}
|
|
242
248
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: ComboBox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
243
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.1", type: ComboBox, isStandalone: true, selector: "ui5-combobox, [ui5-combobox]", inputs: { accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibleNameRef: { classPropertyName: "accessibleNameRef", publicName: "accessibleNameRef", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, noTypeahead: { classPropertyName: "noTypeahead", publicName: "noTypeahead", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, showClearIcon: { classPropertyName: "showClearIcon", publicName: "showClearIcon", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueState: { classPropertyName: "valueState", publicName: "valueState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Change: "ui5Change", ui5Close: "ui5Close", ui5Input: "ui5Input", ui5Open: "ui5Open", ui5SelectionChange: "ui5SelectionChange" }, providers: [
|
|
249
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.1", type: ComboBox, isStandalone: true, selector: "ui5-combobox, [ui5-combobox]", inputs: { accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibleNameRef: { classPropertyName: "accessibleNameRef", publicName: "accessibleNameRef", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, noTypeahead: { classPropertyName: "noTypeahead", publicName: "noTypeahead", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, showClearIcon: { classPropertyName: "showClearIcon", publicName: "showClearIcon", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueState: { classPropertyName: "valueState", publicName: "valueState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Change: "ui5Change", ui5Close: "ui5Close", ui5Input: "ui5Input", ui5LoadItems: "ui5LoadItems", ui5Open: "ui5Open", ui5SelectionChange: "ui5SelectionChange" }, providers: [
|
|
244
250
|
contentDensityObserverProviders({
|
|
245
251
|
supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
|
|
246
252
|
}),
|
|
@@ -277,7 +283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImpor
|
|
|
277
283
|
],
|
|
278
284
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
279
285
|
}]
|
|
280
|
-
}], propDecorators: { accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], accessibleNameRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleNameRef", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], noTypeahead: [{ type: i0.Input, args: [{ isSignal: true, alias: "noTypeahead", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }], showClearIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearIcon", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueState: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueState", required: false }] }], ui5Change: [{ type: i0.Output, args: ["ui5Change"] }], ui5Close: [{ type: i0.Output, args: ["ui5Close"] }], ui5Input: [{ type: i0.Output, args: ["ui5Input"] }], ui5Open: [{ type: i0.Output, args: ["ui5Open"] }], ui5SelectionChange: [{ type: i0.Output, args: ["ui5SelectionChange"] }] } });
|
|
286
|
+
}], propDecorators: { accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], accessibleNameRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleNameRef", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], noTypeahead: [{ type: i0.Input, args: [{ isSignal: true, alias: "noTypeahead", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }], showClearIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearIcon", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueState: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueState", required: false }] }], ui5Change: [{ type: i0.Output, args: ["ui5Change"] }], ui5Close: [{ type: i0.Output, args: ["ui5Close"] }], ui5Input: [{ type: i0.Output, args: ["ui5Input"] }], ui5LoadItems: [{ type: i0.Output, args: ["ui5LoadItems"] }], ui5Open: [{ type: i0.Output, args: ["ui5Open"] }], ui5SelectionChange: [{ type: i0.Output, args: ["ui5SelectionChange"] }] } });
|
|
281
287
|
|
|
282
288
|
/**
|
|
283
289
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-combo-box.mjs","sources":["../../../../libs/ui5-webcomponents/combo-box/index.ts","../../../../libs/ui5-webcomponents/combo-box/fundamental-ngx-ui5-webcomponents-combo-box.ts"],"sourcesContent":["\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n AfterViewInit,\n effect,\n runInInjectionContext,\n inject,\n Injector,\n booleanAttribute,\n computed,\n signal,\n DestroyRef\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/ComboBox.js';\nimport { default as _ComboBox } from '@ui5/webcomponents/dist/ComboBox.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n ContentDensityObserver,\n contentDensityObserverProviders,\n ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\nimport { GenericControlValueAccessor, CVA_CONFIG } from '@fundamental-ngx/ui5-webcomponents/utils';\n\nimport { default as ComboBoxFilter } from '@ui5/webcomponents/dist/types/ComboBoxFilter.js';\nimport { default as ValueState } from '@ui5/webcomponents-base/dist/types/ValueState.js';\n\n@Component({\n standalone: true,\n selector: 'ui5-combobox, [ui5-combobox]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5ComboBox',\n hostDirectives: [GenericControlValueAccessor],\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n }),\n {\n provide: CVA_CONFIG,\n useValue: {\n property: 'value',\n events: ['change', 'input'],\n transformValue: (v) => v || ''\n }\n }\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ComboBox implements AfterViewInit {\n\n /**\n * Defines the accessible ARIA name of the component.\n */\n accessibleName = input<typeof _ComboBox.prototype.accessibleName | undefined>();\n\n /**\n * Receives id(or many ids) of the elements that label the component\n */\n accessibleNameRef = input<typeof _ComboBox.prototype.accessibleNameRef | undefined>();\n\n /**\n * Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.\n */\n disabled = input(false, { transform: booleanAttribute });\n\n /**\n * Defines the filter type of the component.\n */\n filter = input<typeof _ComboBox.prototype.filter | undefined>(\"StartsWithPerTerm\");\n\n /**\n * Indicates whether a loading indicator should be shown in the picker.\n */\n loading = input(false, { transform: booleanAttribute });\n\n /**\n * Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n */\n name = input<typeof _ComboBox.prototype.name | undefined>();\n\n /**\n * Defines whether the value will be autocompleted to match an item\n */\n noTypeahead = input(false, { transform: booleanAttribute });\n\n /**\n * Indicates whether the items picker is open.\n */\n open = input(false, { transform: booleanAttribute });\n\n /**\n * Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.\n */\n placeholder = input<typeof _ComboBox.prototype.placeholder | undefined>();\n\n /**\n * Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.\n */\n readonly = input(false, { transform: booleanAttribute });\n\n /**\n * Defines whether the component is required.\n */\n required = input(false, { transform: booleanAttribute });\n\n /**\n * Defines the value of the selected item (references the `value` property of `ui5-cb-item`).\n\nUse this property to work with unique identifiers (IDs, codes) instead of display text.\nWhen set, the ComboBox finds and selects the item whose `value` property matches this property.\n\n**Benefits:**\n- Select items programmatically by their unique identifier\n- Handle items with identical display text but different underlying values\n- Submit machine-readable values in forms (the item's `value` is submitted instead of the display text)\n\n**When to use `selectedValue` vs `value`:**\n- **Recommended:** Use `selectedValue` + item `value` when you need unique identifiers separate from display text (e.g., country codes \"DE\", \"FR\" with display names \"Germany\", \"France\")\n- Use only the ComboBox `value` property when the display text itself is sufficient for your use case\n */\n selectedValue = input<typeof _ComboBox.prototype.selectedValue | undefined>();\n\n /**\n * Defines whether the clear icon of the combobox will be shown.\n */\n showClearIcon = input(false, { transform: booleanAttribute });\n\n /**\n * Defines the value of the component.\n */\n value = input<typeof _ComboBox.prototype.value | undefined>(\"\");\n\n /**\n * Defines the value state of the component.\n */\n valueState = input<typeof _ComboBox.prototype.valueState | undefined>(\"None\"); // className is now passed\n\n\n\n /**\n * Fired when the input operation has finished by pressing Enter, focusout or an item is selected.\n */\n ui5Change = output<UI5CustomEvent<_ComboBox, 'change'>>();\n\n /**\n * Fired when the dropdown is closed.\n */\n ui5Close = output<UI5CustomEvent<_ComboBox, 'close'>>();\n\n /**\n * Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed.\n */\n ui5Input = output<UI5CustomEvent<_ComboBox, 'input'>>();\n\n /**\n * Fired when the dropdown is opened.\n */\n ui5Open = output<UI5CustomEvent<_ComboBox, 'open'>>();\n\n /**\n * Fired when selection is changed by user interaction\n */\n ui5SelectionChange = output<UI5CustomEvent<_ComboBox, 'selection-change'>>();\n\n /**\n * Available slots for content projection in this component.\n *\n * Slots allow you to insert custom content into predefined areas of the web component.\n * Use the `slot` attribute on child elements to target specific slots.\n *\n * - **(default)**: Defines the component items.\n * - **icon**: Defines the icon to be displayed in the input field.\n * - **valueStateMessage**: Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the `ui5-combobox` is in `Information`, `Critical` or `Negative` value state.\n *\n * @example\n * ```html\n * <ui5-combobox>\n * <div slot=\"header\">Custom header content</div>\n * <p>Default slot content</p>\n * </ui5-combobox>\n * ```\n *\n * @readonly\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}\n */\n readonly slots = [\n {\n \"name\": \"default\",\n \"description\": \"Defines the component items.\"\n },\n {\n \"name\": \"icon\",\n \"description\": \"Defines the icon to be displayed in the input field.\",\n \"since\": \"1.0.0-rc.9\"\n },\n {\n \"name\": \"valueStateMessage\",\n \"description\": \"Defines the value state message that will be displayed as pop up under the component.\\nThe value state message slot should contain only one root element.\\n\\n**Note:** If not specified, a default text (in the respective language) will be displayed.\\n\\n**Note:** The `valueStateMessage` would be displayed,\\nwhen the `ui5-combobox` is in `Information`, `Critical` or `Negative` value state.\",\n \"since\": \"1.0.0-rc.9\"\n }\n ];\n\n\n public elementRef: ElementRef<_ComboBox> = inject(ElementRef);\n public injector = inject(Injector);\n\n /**\n * Content density observer is injected to activate automatic CSS class and\n * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.\n * @private\n */\n private readonly _contentDensityObserver = inject(ContentDensityObserver);\n private readonly _destroyRef = inject(DestroyRef);\n\n get element(): _ComboBox {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'accessibleName',\n 'accessibleNameRef',\n 'disabled',\n 'filter',\n 'loading',\n 'name',\n 'noTypeahead',\n 'open',\n 'placeholder',\n 'readonly',\n 'required',\n 'selectedValue',\n 'showClearIcon',\n 'value',\n 'valueState',\n ];\n \n // Synchronize inputs (properties)\n for (const inputName of inputsToSync) {\n // Find the corresponding camelCase signal property on the Angular component\n const signalName = inputName.replace(/-./g, (x: string) => x[1].toUpperCase());\n\n // Use the Injector to run the effect in the correct context\n if (this[signalName] && typeof this[signalName] === 'function') {\n runInInjectionContext(this.injector, (): void => {\n effect((): void => {\n // Read the signal value\n const value = this[signalName]();\n if (wcElement) {\n // Skip writes when the signal is undefined and the property is already truthy\n // This prevents clobbering imperatively-set values (e.g., from RouterLink)\n if (value === undefined && wcElement[inputName]) {\n return;\n }\n // Write the value to the Web Component's property\n wcElement[inputName] = value;\n }\n });\n });\n }\n }\n \n \n const outputsToSync = [\n 'ui5Change',\n 'ui5Close',\n 'ui5Input',\n 'ui5Open',\n 'ui5SelectionChange',\n ];\n \n // Synchronize outputs (events)\n const _listeners: Array<() => void> = [];\n for (const outputName of outputsToSync) {\n // Map Angular output name to UI5 web component event name\n const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);\n // Ensure the output property exists and has an emit function before adding listener\n if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {\n // Cast the listener to the correct type to satisfy TypeScript\n const listener = (e: Event): void => {\n\n this[outputName].emit(e as CustomEvent<any>);\n };\n wcElement.addEventListener(eventName, listener);\n _listeners.push(() => wcElement.removeEventListener(eventName, listener));\n }\n }\n this._destroyRef.onDestroy(() => _listeners.forEach((fn) => fn()));\n \n\n }\n}\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-combo-box.mjs","sources":["../../../../libs/ui5-webcomponents/combo-box/index.ts","../../../../libs/ui5-webcomponents/combo-box/fundamental-ngx-ui5-webcomponents-combo-box.ts"],"sourcesContent":["\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n output,\n AfterViewInit,\n effect,\n runInInjectionContext,\n inject,\n Injector,\n booleanAttribute,\n computed,\n signal,\n DestroyRef\n} from '@angular/core';\nimport '@ui5/webcomponents/dist/ComboBox.js';\nimport { default as _ComboBox } from '@ui5/webcomponents/dist/ComboBox.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n ContentDensityObserver,\n contentDensityObserverProviders,\n ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\nimport { GenericControlValueAccessor, CVA_CONFIG } from '@fundamental-ngx/ui5-webcomponents/utils';\n\nimport { default as ComboBoxFilter } from '@ui5/webcomponents/dist/types/ComboBoxFilter.js';\nimport { default as ValueState } from '@ui5/webcomponents-base/dist/types/ValueState.js';\n\n@Component({\n standalone: true,\n selector: 'ui5-combobox, [ui5-combobox]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5ComboBox',\n hostDirectives: [GenericControlValueAccessor],\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n }),\n {\n provide: CVA_CONFIG,\n useValue: {\n property: 'value',\n events: ['change', 'input'],\n transformValue: (v) => v || ''\n }\n }\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ComboBox implements AfterViewInit {\n\n /**\n * Defines the accessible ARIA name of the component.\n */\n accessibleName = input<typeof _ComboBox.prototype.accessibleName | undefined>();\n\n /**\n * Receives id(or many ids) of the elements that label the component\n */\n accessibleNameRef = input<typeof _ComboBox.prototype.accessibleNameRef | undefined>();\n\n /**\n * Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.\n */\n disabled = input(false, { transform: booleanAttribute });\n\n /**\n * Defines the filter type of the component.\n */\n filter = input<typeof _ComboBox.prototype.filter | undefined>(\"StartsWithPerTerm\");\n\n /**\n * Indicates whether a loading indicator should be shown in the picker.\n */\n loading = input(false, { transform: booleanAttribute });\n\n /**\n * Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n */\n name = input<typeof _ComboBox.prototype.name | undefined>();\n\n /**\n * Defines whether the value will be autocompleted to match an item\n */\n noTypeahead = input(false, { transform: booleanAttribute });\n\n /**\n * Indicates whether the items picker is open.\n */\n open = input(false, { transform: booleanAttribute });\n\n /**\n * Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.\n */\n placeholder = input<typeof _ComboBox.prototype.placeholder | undefined>();\n\n /**\n * Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.\n */\n readonly = input(false, { transform: booleanAttribute });\n\n /**\n * Defines whether the component is required.\n */\n required = input(false, { transform: booleanAttribute });\n\n /**\n * Defines the value of the selected item (references the `value` property of `ui5-cb-item`).\n\nUse this property to work with unique identifiers (IDs, codes) instead of display text.\nWhen set, the ComboBox finds and selects the item whose `value` property matches this property.\n\n**Benefits:**\n- Select items programmatically by their unique identifier\n- Handle items with identical display text but different underlying values\n- Submit machine-readable values in forms (the item's `value` is submitted instead of the display text)\n\n**When to use `selectedValue` vs `value`:**\n- **Recommended:** Use `selectedValue` + item `value` when you need unique identifiers separate from display text (e.g., country codes \"DE\", \"FR\" with display names \"Germany\", \"France\")\n- Use only the ComboBox `value` property when the display text itself is sufficient for your use case\n */\n selectedValue = input<typeof _ComboBox.prototype.selectedValue | undefined>();\n\n /**\n * Defines whether the clear icon of the combobox will be shown.\n */\n showClearIcon = input(false, { transform: booleanAttribute });\n\n /**\n * Defines the value of the component.\n */\n value = input<typeof _ComboBox.prototype.value | undefined>(\"\");\n\n /**\n * Defines the value state of the component.\n */\n valueState = input<typeof _ComboBox.prototype.valueState | undefined>(\"None\"); // className is now passed\n\n\n\n /**\n * Fired when the input operation has finished by pressing Enter, focusout or an item is selected.\n */\n ui5Change = output<UI5CustomEvent<_ComboBox, 'change'>>();\n\n /**\n * Fired when the dropdown is closed.\n */\n ui5Close = output<UI5CustomEvent<_ComboBox, 'close'>>();\n\n /**\n * Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed.\n */\n ui5Input = output<UI5CustomEvent<_ComboBox, 'input'>>();\n\n /**\n * Fired when the application should provide items for the component to render.\nThe event is fired either when text is input or when the user presses arrow down on a combo-box with no items.\n */\n ui5LoadItems = output<UI5CustomEvent<_ComboBox, 'load-items'>>();\n\n /**\n * Fired when the dropdown is opened.\n */\n ui5Open = output<UI5CustomEvent<_ComboBox, 'open'>>();\n\n /**\n * Fired when selection is changed by user interaction\n */\n ui5SelectionChange = output<UI5CustomEvent<_ComboBox, 'selection-change'>>();\n\n /**\n * Available slots for content projection in this component.\n *\n * Slots allow you to insert custom content into predefined areas of the web component.\n * Use the `slot` attribute on child elements to target specific slots.\n *\n * - **(default)**: Defines the component items.\n * - **icon**: Defines the icon to be displayed in the input field.\n * - **valueStateMessage**: Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the `ui5-combobox` is in `Information`, `Critical` or `Negative` value state.\n *\n * @example\n * ```html\n * <ui5-combobox>\n * <div slot=\"header\">Custom header content</div>\n * <p>Default slot content</p>\n * </ui5-combobox>\n * ```\n *\n * @readonly\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}\n */\n readonly slots = [\n {\n \"name\": \"default\",\n \"description\": \"Defines the component items.\"\n },\n {\n \"name\": \"icon\",\n \"description\": \"Defines the icon to be displayed in the input field.\",\n \"since\": \"1.0.0\"\n },\n {\n \"name\": \"valueStateMessage\",\n \"description\": \"Defines the value state message that will be displayed as pop up under the component.\\nThe value state message slot should contain only one root element.\\n\\n**Note:** If not specified, a default text (in the respective language) will be displayed.\\n\\n**Note:** The `valueStateMessage` would be displayed,\\nwhen the `ui5-combobox` is in `Information`, `Critical` or `Negative` value state.\",\n \"since\": \"1.0.0\"\n }\n ];\n\n\n public elementRef: ElementRef<_ComboBox> = inject(ElementRef);\n public injector = inject(Injector);\n\n /**\n * Content density observer is injected to activate automatic CSS class and\n * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.\n * @private\n */\n private readonly _contentDensityObserver = inject(ContentDensityObserver);\n private readonly _destroyRef = inject(DestroyRef);\n\n get element(): _ComboBox {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'accessibleName',\n 'accessibleNameRef',\n 'disabled',\n 'filter',\n 'loading',\n 'name',\n 'noTypeahead',\n 'open',\n 'placeholder',\n 'readonly',\n 'required',\n 'selectedValue',\n 'showClearIcon',\n 'value',\n 'valueState',\n ];\n \n // Synchronize inputs (properties)\n for (const inputName of inputsToSync) {\n // Find the corresponding camelCase signal property on the Angular component\n const signalName = inputName.replace(/-./g, (x: string) => x[1].toUpperCase());\n\n // Use the Injector to run the effect in the correct context\n if (this[signalName] && typeof this[signalName] === 'function') {\n runInInjectionContext(this.injector, (): void => {\n effect((): void => {\n // Read the signal value\n const value = this[signalName]();\n if (wcElement) {\n // Skip writes when the signal is undefined and the property is already truthy\n // This prevents clobbering imperatively-set values (e.g., from RouterLink)\n if (value === undefined && wcElement[inputName]) {\n return;\n }\n // Write the value to the Web Component's property\n wcElement[inputName] = value;\n }\n });\n });\n }\n }\n \n \n const outputsToSync = [\n 'ui5Change',\n 'ui5Close',\n 'ui5Input',\n 'ui5LoadItems',\n 'ui5Open',\n 'ui5SelectionChange',\n ];\n \n // Synchronize outputs (events)\n const _listeners: Array<() => void> = [];\n for (const outputName of outputsToSync) {\n // Map Angular output name to UI5 web component event name\n const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);\n // Ensure the output property exists and has an emit function before adding listener\n if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {\n // Cast the listener to the correct type to satisfy TypeScript\n const listener = (e: Event): void => {\n\n this[outputName].emit(e as CustomEvent<any>);\n };\n wcElement.addEventListener(eventName, listener);\n _listeners.push(() => wcElement.removeEventListener(eventName, listener));\n }\n }\n this._destroyRef.onDestroy(() => _listeners.forEach((fn) => fn()));\n \n\n }\n}\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -177,7 +177,7 @@ class DatePicker {
|
|
|
177
177
|
{
|
|
178
178
|
"name": "valueStateMessage",
|
|
179
179
|
"description": "Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
|
|
180
|
-
"since": "1.0.0
|
|
180
|
+
"since": "1.0.0"
|
|
181
181
|
}
|
|
182
182
|
];
|
|
183
183
|
this.elementRef = inject(ElementRef);
|