@fundamental-ngx/ui5-webcomponents 0.63.1-rc.11 → 0.63.1-rc.13

package/fesm2022/fundamental-ngx-ui5-webcomponents.mjs

@@ -99,6 +99,7 @@ import '@ui5/webcomponents/dist/ColorPalettePopover.js';
 import '@ui5/webcomponents/dist/ColorPicker.js';
 import '@ui5/webcomponents/dist/ComboBox.js';
 import '@ui5/webcomponents/dist/ComboBoxItem.js';
+import '@ui5/webcomponents/dist/ComboBoxItemCustom.js';
 import '@ui5/webcomponents/dist/ComboBoxItemGroup.js';
 import '@ui5/webcomponents/dist/DatePicker.js';
 import '@ui5/webcomponents/dist/DateRangePicker.js';
@@ -130,6 +131,7 @@ import '@ui5/webcomponents/dist/MessageStrip.js';
 import '@ui5/webcomponents/dist/MonthPicker.js';
 import '@ui5/webcomponents/dist/MultiComboBox.js';
 import '@ui5/webcomponents/dist/MultiComboBoxItem.js';
+import '@ui5/webcomponents/dist/MultiComboBoxItemCustom.js';
 import '@ui5/webcomponents/dist/MultiComboBoxItemGroup.js';
 import '@ui5/webcomponents/dist/MultiInput.js';
 import '@ui5/webcomponents/dist/Option.js';
@@ -850,9 +852,11 @@ class Bar {
       
       **Note:**
       
-      - Set accessibleRole to "toolbar" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.
+      - By default, accessibleRole is set to "Toolbar", which renders the ARIA role "toolbar".
       
-      - If there is only one or no active element, it is recommended to avoid using the "toolbar" role, as it implies a grouping of multiple interactive controls.
+      - Use the default accessibleRole value "Toolbar" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.
+      
+      - 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.
          */
         this.accessibleRole = input("Toolbar", ...(ngDevMode ? [{ debugName: "accessibleRole" }] : []));
         /**
@@ -958,6 +962,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 
 class Breadcrumbs {
     constructor() {
+        /**
+         * Defines the accessible name of the component.
+         */
+        this.accessibleName = input(...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : []));
         /**
          * Defines the visual appearance of the last BreadcrumbsItem.
       
@@ -1018,6 +1026,7 @@ class Breadcrumbs {
     ngAfterViewInit() {
         const wcElement = this.element;
         const inputsToSync = [
+            'accessibleName',
             'design',
             'separators',
         ];
@@ -1056,7 +1065,7 @@ class Breadcrumbs {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Breadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: Breadcrumbs, isStandalone: true, selector: "ui5-breadcrumbs, [ui5-breadcrumbs]", inputs: { design: { classPropertyName: "design", publicName: "design", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5ItemClick: "ui5ItemClick" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: Breadcrumbs, isStandalone: true, selector: "ui5-breadcrumbs, [ui5-breadcrumbs]", inputs: { accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, design: { classPropertyName: "design", publicName: "design", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5ItemClick: "ui5ItemClick" }, providers: [
             contentDensityObserverProviders({
                 supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
             })
@@ -1076,7 +1085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { design: [{ type: i0.Input, args: [{ isSignal: true, alias: "design", required: false }] }], separators: [{ type: i0.Input, args: [{ isSignal: true, alias: "separators", required: false }] }], ui5ItemClick: [{ type: i0.Output, args: ["ui5ItemClick"] }] } });
+        }], propDecorators: { accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], design: [{ type: i0.Input, args: [{ isSignal: true, alias: "design", required: false }] }], separators: [{ type: i0.Input, args: [{ isSignal: true, alias: "separators", required: false }] }], ui5ItemClick: [{ type: i0.Output, args: ["ui5ItemClick"] }] } });
 
 class BreadcrumbsItem {
     constructor() {
@@ -3624,6 +3633,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 }]
         }], propDecorators: { additionalText: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalText", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ui5Click: [{ type: i0.Output, args: ["ui5Click"] }] } });
 
+class ComboBoxItemCustom {
+    constructor() {
+        /**
+         * Defines the text of the component.
+      Used for filtering, autocomplete, and mobile rendering.
+         */
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        /**
+         * Defines the value of the component.
+      Used for programmatic selection via the `selectedValue` property.
+         */
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : [])); // className is now passed
+        /**
+         * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
+      
+      **Note:** The event will not be fired if the `disabled` property is set to `true`.
+         */
+        this.ui5Click = output();
+        /**
+         * Available slots for content projection in this component.
+         *
+         * Slots allow you to insert custom content into predefined areas of the web component.
+         * Use the `slot` attribute on child elements to target specific slots.
+         *
+         * - **(default)**: Defines the content of the component.
+         *
+         * @example
+         * ```html
+         * <ui5-cb-item-custom>
+         *   <div slot="header">Custom header content</div>
+         *   <p>Default slot content</p>
+         * </ui5-cb-item-custom>
+         * ```
+         *
+         * @readonly
+         * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+         */
+        this.slots = [
+            {
+                "name": "default",
+                "description": "Defines the content of the component."
+            }
+        ];
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+        /**
+         * Content density observer is injected to activate automatic CSS class and
+         * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.
+         * @private
+         */
+        this._contentDensityObserver = inject(ContentDensityObserver);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'text',
+            'value',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5Click',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ComboBoxItemCustom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: ComboBoxItemCustom, isStandalone: true, selector: "ui5-cb-item-custom, [ui5-cb-item-custom]", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Click: "ui5Click" }, providers: [
+            contentDensityObserverProviders({
+                supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
+            })
+        ], exportAs: ["ui5ComboBoxItemCustom"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ComboBoxItemCustom, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-cb-item-custom, [ui5-cb-item-custom]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5ComboBoxItemCustom',
+                    providers: [
+                        contentDensityObserverProviders({
+                            supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
+                        })
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ui5Click: [{ type: i0.Output, args: ["ui5Click"] }] } });
+
 class ComboBoxItemGroup {
     constructor() {
         /**
@@ -9221,6 +9348,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 }]
         }], propDecorators: { additionalText: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalText", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ui5Click: [{ type: i0.Output, args: ["ui5Click"] }] } });
 
+class MultiComboBoxItemCustom {
+    constructor() {
+        /**
+         * Defines the text of the component.
+      Used for filtering and token display.
+         */
+        this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        /**
+         * Defines the value of the component.
+      Used for programmatic selection via selectedValues property.
+         */
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : [])); // className is now passed
+        /**
+         * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
+      
+      **Note:** The event will not be fired if the `disabled` property is set to `true`.
+         */
+        this.ui5Click = output();
+        /**
+         * Available slots for content projection in this component.
+         *
+         * Slots allow you to insert custom content into predefined areas of the web component.
+         * Use the `slot` attribute on child elements to target specific slots.
+         *
+         * - **(default)**: Defines the content of the component.
+         *
+         * @example
+         * ```html
+         * <ui5-mcb-item-custom>
+         *   <div slot="header">Custom header content</div>
+         *   <p>Default slot content</p>
+         * </ui5-mcb-item-custom>
+         * ```
+         *
+         * @readonly
+         * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
+         */
+        this.slots = [
+            {
+                "name": "default",
+                "description": "Defines the content of the component."
+            }
+        ];
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+        /**
+         * Content density observer is injected to activate automatic CSS class and
+         * UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.
+         * @private
+         */
+        this._contentDensityObserver = inject(ContentDensityObserver);
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        const wcElement = this.element;
+        const inputsToSync = [
+            'text',
+            'value',
+        ];
+        // Synchronize inputs (properties)
+        for (const inputName of inputsToSync) {
+            // Find the corresponding camelCase signal property on the Angular component
+            const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
+            // Use the Injector to run the effect in the correct context
+            if (this[signalName] && typeof this[signalName] === 'function') {
+                runInInjectionContext(this.injector, () => {
+                    effect(() => {
+                        // Read the signal value
+                        const value = this[signalName]();
+                        if (wcElement) {
+                            // Write the value to the Web Component's property
+                            wcElement[inputName] = value;
+                        }
+                    });
+                });
+            }
+        }
+        const outputsToSync = [
+            'ui5Click',
+        ];
+        // Synchronize outputs (events)
+        for (const outputName of outputsToSync) {
+            // Map Angular output name to UI5 web component event name
+            const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
+            // Ensure the output property exists and has an emit function before adding listener
+            if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
+                // Cast the listener to the correct type to satisfy TypeScript
+                wcElement.addEventListener(eventName, (e) => {
+                    this[outputName].emit(e);
+                });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiComboBoxItemCustom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: MultiComboBoxItemCustom, isStandalone: true, selector: "ui5-mcb-item-custom, [ui5-mcb-item-custom]", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Click: "ui5Click" }, providers: [
+            contentDensityObserverProviders({
+                supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
+            })
+        ], exportAs: ["ui5MultiComboBoxItemCustom"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiComboBoxItemCustom, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'ui5-mcb-item-custom, [ui5-mcb-item-custom]',
+                    template: '<ng-content></ng-content>',
+                    exportAs: 'ui5MultiComboBoxItemCustom',
+                    providers: [
+                        contentDensityObserverProviders({
+                            supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
+                        })
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ui5Click: [{ type: i0.Output, args: ["ui5Click"] }] } });
+
 class MultiComboBoxItemGroup {
     constructor() {
         /**
@@ -18775,5 +19020,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Avatar, AvatarBadge, AvatarGroup, Bar, Breadcrumbs, BreadcrumbsItem, BusyIndicator, Button, ButtonBadge, CVA_CONFIG, Calendar, CalendarDate, CalendarDateRange, CalendarLegend, CalendarLegendItem, Card, CardHeader, Carousel, CheckBox, ColorPalette, ColorPaletteItem, ColorPalettePopover, ColorPicker, ComboBox, ComboBoxItem, ComboBoxItemGroup, DatePicker, DateRangePicker, DateTimeInput, DateTimePicker, DayPicker, Dialog, DropIndicator, DynamicDateRange, ExpandableText, FileUploader, Form, FormGroup, FormItem, GenericControlValueAccessor, Icon, Input, Label, Link, List, ListItemCustom, ListItemGroup, ListItemGroupHeader, ListItemStandard, Menu, MenuItem, MenuItemGroup, MenuSeparator, MessageStrip, MonthPicker, MultiComboBox, MultiComboBoxItem, MultiComboBoxItemGroup, MultiInput, Option, OptionCustom, Panel, Popover, ProgressIndicator, RadioButton, RangeSlider, RatingIndicator, ResponsivePopover, SegmentedButton, SegmentedButtonItem, Select, Slider, SliderHandle, SliderTooltip, SpecialCalendarDate, SplitButton, StepInput, SuggestionItem, SuggestionItemCustom, SuggestionItemGroup, SuggestionListItem, Switch, Tab, TabContainer, TabSeparator, Table, TableCell, TableGroupRow, TableGrowing, TableHeaderCell, TableHeaderCellActionAI, TableHeaderRow, TableRow, TableRowAction, TableRowActionNavigation, TableSelection, TableSelectionMulti, TableSelectionSingle, TableVirtualizer, Tag, Text, TextArea, TimePicker, TimePickerClock, TimeSelectionClocks, TimeSelectionInputs, Title, Toast, ToggleButton, ToggleSpinButton, Token, Tokenizer, Toolbar, ToolbarButton, ToolbarItem, ToolbarSelect, ToolbarSelectOption, ToolbarSeparator, ToolbarSpacer, Tree, TreeItem, TreeItemCustom, Ui5WebcomponentsMainThemingService, YearPicker, YearRangePicker };
+export { Avatar, AvatarBadge, AvatarGroup, Bar, Breadcrumbs, BreadcrumbsItem, BusyIndicator, Button, ButtonBadge, CVA_CONFIG, Calendar, CalendarDate, CalendarDateRange, CalendarLegend, CalendarLegendItem, Card, CardHeader, Carousel, CheckBox, ColorPalette, ColorPaletteItem, ColorPalettePopover, ColorPicker, ComboBox, ComboBoxItem, ComboBoxItemCustom, ComboBoxItemGroup, DatePicker, DateRangePicker, DateTimeInput, DateTimePicker, DayPicker, Dialog, DropIndicator, DynamicDateRange, ExpandableText, FileUploader, Form, FormGroup, FormItem, GenericControlValueAccessor, Icon, Input, Label, Link, List, ListItemCustom, ListItemGroup, ListItemGroupHeader, ListItemStandard, Menu, MenuItem, MenuItemGroup, MenuSeparator, MessageStrip, MonthPicker, MultiComboBox, MultiComboBoxItem, MultiComboBoxItemCustom, MultiComboBoxItemGroup, MultiInput, Option, OptionCustom, Panel, Popover, ProgressIndicator, RadioButton, RangeSlider, RatingIndicator, ResponsivePopover, SegmentedButton, SegmentedButtonItem, Select, Slider, SliderHandle, SliderTooltip, SpecialCalendarDate, SplitButton, StepInput, SuggestionItem, SuggestionItemCustom, SuggestionItemGroup, SuggestionListItem, Switch, Tab, TabContainer, TabSeparator, Table, TableCell, TableGroupRow, TableGrowing, TableHeaderCell, TableHeaderCellActionAI, TableHeaderRow, TableRow, TableRowAction, TableRowActionNavigation, TableSelection, TableSelectionMulti, TableSelectionSingle, TableVirtualizer, Tag, Text, TextArea, TimePicker, TimePickerClock, TimeSelectionClocks, TimeSelectionInputs, Title, Toast, ToggleButton, ToggleSpinButton, Token, Tokenizer, Toolbar, ToolbarButton, ToolbarItem, ToolbarSelect, ToolbarSelectOption, ToolbarSeparator, ToolbarSpacer, Tree, TreeItem, TreeItemCustom, Ui5WebcomponentsMainThemingService, YearPicker, YearRangePicker };
 //# sourceMappingURL=fundamental-ngx-ui5-webcomponents.mjs.map