@fundamental-ngx/ui5-webcomponents 0.63.1-rc.12 → 0.63.1-rc.13
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-bar.mjs +4 -2
- package/fesm2022/fundamental-ngx-ui5-webcomponents-bar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-breadcrumbs.mjs +7 -2
- package/fesm2022/fundamental-ngx-ui5-webcomponents-breadcrumbs.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-combo-box-item-custom.mjs +129 -0
- package/fesm2022/fundamental-ngx-ui5-webcomponents-combo-box-item-custom.mjs.map +1 -0
- package/fesm2022/fundamental-ngx-ui5-webcomponents-multi-combo-box-item-custom.mjs +129 -0
- package/fesm2022/fundamental-ngx-ui5-webcomponents-multi-combo-box-item-custom.mjs.map +1 -0
- package/fesm2022/fundamental-ngx-ui5-webcomponents.mjs +250 -5
- package/fesm2022/fundamental-ngx-ui5-webcomponents.mjs.map +1 -1
- package/package.json +13 -5
- package/types/fundamental-ngx-ui5-webcomponents-bar.d.ts +4 -2
- package/types/fundamental-ngx-ui5-webcomponents-breadcrumbs.d.ts +5 -1
- package/types/fundamental-ngx-ui5-webcomponents-combo-box-item-custom.d.ts +60 -0
- package/types/fundamental-ngx-ui5-webcomponents-multi-combo-box-item-custom.d.ts +60 -0
- package/types/fundamental-ngx-ui5-webcomponents.d.ts +120 -4
|
@@ -18,9 +18,11 @@ class Bar {
|
|
|
18
18
|
|
|
19
19
|
**Note:**
|
|
20
20
|
|
|
21
|
-
-
|
|
21
|
+
- By default, accessibleRole is set to "Toolbar", which renders the ARIA role "toolbar".
|
|
22
22
|
|
|
23
|
-
-
|
|
23
|
+
- 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.
|
|
24
|
+
|
|
25
|
+
- 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
26
|
*/
|
|
25
27
|
this.accessibleRole = input("Toolbar", ...(ngDevMode ? [{ debugName: "accessibleRole" }] : []));
|
|
26
28
|
/**
|
|
@@ -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\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:**\n\n-
|
|
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\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:**\n\n- By default, accessibleRole is set to \"Toolbar\", which renders the ARIA role \"toolbar\".\n\n- 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.\n\n- 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.\n */\n accessibleRole = input<typeof _Bar.prototype.accessibleRole | undefined>(\"Toolbar\");\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, () => {\n effect(() => {\n // Read the signal value\n const value = this[signalName]();\n if (wcElement) {\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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"}
|
|
@@ -5,6 +5,10 @@ import { ContentDensityObserver, contentDensityObserverProviders, ContentDensity
|
|
|
5
5
|
|
|
6
6
|
class Breadcrumbs {
|
|
7
7
|
constructor() {
|
|
8
|
+
/**
|
|
9
|
+
* Defines the accessible name of the component.
|
|
10
|
+
*/
|
|
11
|
+
this.accessibleName = input(...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : []));
|
|
8
12
|
/**
|
|
9
13
|
* Defines the visual appearance of the last BreadcrumbsItem.
|
|
10
14
|
|
|
@@ -65,6 +69,7 @@ class Breadcrumbs {
|
|
|
65
69
|
ngAfterViewInit() {
|
|
66
70
|
const wcElement = this.element;
|
|
67
71
|
const inputsToSync = [
|
|
72
|
+
'accessibleName',
|
|
68
73
|
'design',
|
|
69
74
|
'separators',
|
|
70
75
|
];
|
|
@@ -103,7 +108,7 @@ class Breadcrumbs {
|
|
|
103
108
|
}
|
|
104
109
|
}
|
|
105
110
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: Breadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
106
|
-
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: [
|
|
111
|
+
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: [
|
|
107
112
|
contentDensityObserverProviders({
|
|
108
113
|
supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
|
|
109
114
|
})
|
|
@@ -123,7 +128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
123
128
|
],
|
|
124
129
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
125
130
|
}]
|
|
126
|
-
}], 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"] }] } });
|
|
131
|
+
}], 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"] }] } });
|
|
127
132
|
|
|
128
133
|
/**
|
|
129
134
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-breadcrumbs.mjs","sources":["../../../../libs/ui5-webcomponents/breadcrumbs/index.ts","../../../../libs/ui5-webcomponents/breadcrumbs/fundamental-ngx-ui5-webcomponents-breadcrumbs.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/Breadcrumbs.js';\nimport { default as _Breadcrumbs } from '@ui5/webcomponents/dist/Breadcrumbs.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n ContentDensityObserver,\n contentDensityObserverProviders,\n ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\nimport { default as BreadcrumbsDesign } from '@ui5/webcomponents/dist/types/BreadcrumbsDesign.js';\nimport { default as BreadcrumbsSeparator } from '@ui5/webcomponents/dist/types/BreadcrumbsSeparator.js';\n\n@Component({\n standalone: true,\n selector: 'ui5-breadcrumbs, [ui5-breadcrumbs]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5Breadcrumbs',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Breadcrumbs implements AfterViewInit {\n\n /**\n * Defines the visual appearance of the last BreadcrumbsItem.\n\nThe Breadcrumbs supports two visual appearances for the last BreadcrumbsItem:\n- \"Standard\" - displaying the last item as \"current page\" (bold and without separator)\n- \"NoCurrentPage\" - displaying the last item as a regular BreadcrumbsItem, followed by separator\n */\n design = input<typeof _Breadcrumbs.prototype.design | undefined>(\"Standard\");\n\n /**\n * Determines the visual style of the separator between the breadcrumb items.\n */\n separators = input<typeof _Breadcrumbs.prototype.separators | undefined>(\"Slash\"); // className is now passed\n\n\n\n /**\n * Fires when a `BreadcrumbsItem` is clicked.\n\n**Note:** You can prevent browser location change by calling `event.preventDefault()`.\n */\n ui5ItemClick = output<UI5CustomEvent<_Breadcrumbs, 'item-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 * - **(default)**: Defines the component items.\n\n**Note:** Use the `ui5-breadcrumbs-item` component to define the desired items.\n *\n * @example\n * ```html\n * <ui5-breadcrumbs>\n * <div slot=\"header\">Custom header content</div>\n * <p>Default slot content</p>\n * </ui5-breadcrumbs>\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**Note:** Use the `ui5-breadcrumbs-item` component to define the desired items.\"\n }\n ];\n\n\n public elementRef: ElementRef<_Breadcrumbs> = 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(): _Breadcrumbs {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'design',\n 'separators',\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, () => {\n effect(() => {\n // Read the signal value\n const value = this[signalName]();\n if (wcElement) {\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 'ui5ItemClick',\n ];\n \n // Synchronize outputs (events)\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 wcElement.addEventListener(eventName, (e) => {\n\n this[outputName].emit(e as CustomEvent<any>);\n });\n }\n }\n \n\n }\n}\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAwCa,WAAW,CAAA;AAZxB,IAAA,WAAA,GAAA;AAcE;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAmD,UAAU,kDAAC;AAE5E;;AAEG;AACH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAuD,OAAO,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,YAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC,CAAC;AAIlF;;;;AAIG;QACH,IAAA,CAAA,YAAY,GAAG,MAAM,EAA8C;AAEnE;;;;;;;;;;;;;;;;;;;;AAoBG;AACM,QAAA,IAAA,CAAA,KAAK,GAAG;AACb,YAAA;AACI,gBAAA,MAAM,EAAE,SAAS;AACjB,gBAAA,aAAa,EAAE;AAClB;SACJ;AAGM,QAAA,IAAA,CAAA,UAAU,GAA6B,MAAM,CAAC,UAAU,CAAC;AACzD,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AAElC;;;;AAIG;AACc,QAAA,IAAA,CAAA,uBAAuB,GAAG,MAAM,CAAC,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-breadcrumbs.mjs","sources":["../../../../libs/ui5-webcomponents/breadcrumbs/index.ts","../../../../libs/ui5-webcomponents/breadcrumbs/fundamental-ngx-ui5-webcomponents-breadcrumbs.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/Breadcrumbs.js';\nimport { default as _Breadcrumbs } from '@ui5/webcomponents/dist/Breadcrumbs.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n ContentDensityObserver,\n contentDensityObserverProviders,\n ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\nimport { default as BreadcrumbsDesign } from '@ui5/webcomponents/dist/types/BreadcrumbsDesign.js';\nimport { default as BreadcrumbsSeparator } from '@ui5/webcomponents/dist/types/BreadcrumbsSeparator.js';\n\n@Component({\n standalone: true,\n selector: 'ui5-breadcrumbs, [ui5-breadcrumbs]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5Breadcrumbs',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Breadcrumbs implements AfterViewInit {\n\n /**\n * Defines the accessible name of the component.\n */\n accessibleName = input<typeof _Breadcrumbs.prototype.accessibleName | undefined>();\n\n /**\n * Defines the visual appearance of the last BreadcrumbsItem.\n\nThe Breadcrumbs supports two visual appearances for the last BreadcrumbsItem:\n- \"Standard\" - displaying the last item as \"current page\" (bold and without separator)\n- \"NoCurrentPage\" - displaying the last item as a regular BreadcrumbsItem, followed by separator\n */\n design = input<typeof _Breadcrumbs.prototype.design | undefined>(\"Standard\");\n\n /**\n * Determines the visual style of the separator between the breadcrumb items.\n */\n separators = input<typeof _Breadcrumbs.prototype.separators | undefined>(\"Slash\"); // className is now passed\n\n\n\n /**\n * Fires when a `BreadcrumbsItem` is clicked.\n\n**Note:** You can prevent browser location change by calling `event.preventDefault()`.\n */\n ui5ItemClick = output<UI5CustomEvent<_Breadcrumbs, 'item-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 * - **(default)**: Defines the component items.\n\n**Note:** Use the `ui5-breadcrumbs-item` component to define the desired items.\n *\n * @example\n * ```html\n * <ui5-breadcrumbs>\n * <div slot=\"header\">Custom header content</div>\n * <p>Default slot content</p>\n * </ui5-breadcrumbs>\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**Note:** Use the `ui5-breadcrumbs-item` component to define the desired items.\"\n }\n ];\n\n\n public elementRef: ElementRef<_Breadcrumbs> = 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(): _Breadcrumbs {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'accessibleName',\n 'design',\n 'separators',\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, () => {\n effect(() => {\n // Read the signal value\n const value = this[signalName]();\n if (wcElement) {\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 'ui5ItemClick',\n ];\n \n // Synchronize outputs (events)\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 wcElement.addEventListener(eventName, (e) => {\n\n this[outputName].emit(e as CustomEvent<any>);\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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"}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, output, inject, ElementRef, Injector, runInInjectionContext, effect, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import '@ui5/webcomponents/dist/ComboBoxItemCustom.js';
|
|
4
|
+
import { ContentDensityObserver, contentDensityObserverProviders, ContentDensityMode } from '@fundamental-ngx/core/content-density';
|
|
5
|
+
|
|
6
|
+
class ComboBoxItemCustom {
|
|
7
|
+
constructor() {
|
|
8
|
+
/**
|
|
9
|
+
* Defines the text of the component.
|
|
10
|
+
Used for filtering, autocomplete, and mobile rendering.
|
|
11
|
+
*/
|
|
12
|
+
this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
|
|
13
|
+
/**
|
|
14
|
+
* Defines the value of the component.
|
|
15
|
+
Used for programmatic selection via the `selectedValue` property.
|
|
16
|
+
*/
|
|
17
|
+
this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : [])); // className is now passed
|
|
18
|
+
/**
|
|
19
|
+
* Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
|
|
20
|
+
|
|
21
|
+
**Note:** The event will not be fired if the `disabled` property is set to `true`.
|
|
22
|
+
*/
|
|
23
|
+
this.ui5Click = output();
|
|
24
|
+
/**
|
|
25
|
+
* Available slots for content projection in this component.
|
|
26
|
+
*
|
|
27
|
+
* Slots allow you to insert custom content into predefined areas of the web component.
|
|
28
|
+
* Use the `slot` attribute on child elements to target specific slots.
|
|
29
|
+
*
|
|
30
|
+
* - **(default)**: Defines the content of the component.
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* ```html
|
|
34
|
+
* <ui5-cb-item-custom>
|
|
35
|
+
* <div slot="header">Custom header content</div>
|
|
36
|
+
* <p>Default slot content</p>
|
|
37
|
+
* </ui5-cb-item-custom>
|
|
38
|
+
* ```
|
|
39
|
+
*
|
|
40
|
+
* @readonly
|
|
41
|
+
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
|
|
42
|
+
*/
|
|
43
|
+
this.slots = [
|
|
44
|
+
{
|
|
45
|
+
"name": "default",
|
|
46
|
+
"description": "Defines the content of the component."
|
|
47
|
+
}
|
|
48
|
+
];
|
|
49
|
+
this.elementRef = inject(ElementRef);
|
|
50
|
+
this.injector = inject(Injector);
|
|
51
|
+
/**
|
|
52
|
+
* Content density observer is injected to activate automatic CSS class and
|
|
53
|
+
* UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.
|
|
54
|
+
* @private
|
|
55
|
+
*/
|
|
56
|
+
this._contentDensityObserver = inject(ContentDensityObserver);
|
|
57
|
+
}
|
|
58
|
+
get element() {
|
|
59
|
+
return this.elementRef.nativeElement;
|
|
60
|
+
}
|
|
61
|
+
ngAfterViewInit() {
|
|
62
|
+
const wcElement = this.element;
|
|
63
|
+
const inputsToSync = [
|
|
64
|
+
'text',
|
|
65
|
+
'value',
|
|
66
|
+
];
|
|
67
|
+
// Synchronize inputs (properties)
|
|
68
|
+
for (const inputName of inputsToSync) {
|
|
69
|
+
// Find the corresponding camelCase signal property on the Angular component
|
|
70
|
+
const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
|
|
71
|
+
// Use the Injector to run the effect in the correct context
|
|
72
|
+
if (this[signalName] && typeof this[signalName] === 'function') {
|
|
73
|
+
runInInjectionContext(this.injector, () => {
|
|
74
|
+
effect(() => {
|
|
75
|
+
// Read the signal value
|
|
76
|
+
const value = this[signalName]();
|
|
77
|
+
if (wcElement) {
|
|
78
|
+
// Write the value to the Web Component's property
|
|
79
|
+
wcElement[inputName] = value;
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
const outputsToSync = [
|
|
86
|
+
'ui5Click',
|
|
87
|
+
];
|
|
88
|
+
// Synchronize outputs (events)
|
|
89
|
+
for (const outputName of outputsToSync) {
|
|
90
|
+
// Map Angular output name to UI5 web component event name
|
|
91
|
+
const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
|
|
92
|
+
// Ensure the output property exists and has an emit function before adding listener
|
|
93
|
+
if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
|
|
94
|
+
// Cast the listener to the correct type to satisfy TypeScript
|
|
95
|
+
wcElement.addEventListener(eventName, (e) => {
|
|
96
|
+
this[outputName].emit(e);
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ComboBoxItemCustom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
102
|
+
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: [
|
|
103
|
+
contentDensityObserverProviders({
|
|
104
|
+
supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
|
|
105
|
+
})
|
|
106
|
+
], exportAs: ["ui5ComboBoxItemCustom"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
107
|
+
}
|
|
108
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ComboBoxItemCustom, decorators: [{
|
|
109
|
+
type: Component,
|
|
110
|
+
args: [{
|
|
111
|
+
standalone: true,
|
|
112
|
+
selector: 'ui5-cb-item-custom, [ui5-cb-item-custom]',
|
|
113
|
+
template: '<ng-content></ng-content>',
|
|
114
|
+
exportAs: 'ui5ComboBoxItemCustom',
|
|
115
|
+
providers: [
|
|
116
|
+
contentDensityObserverProviders({
|
|
117
|
+
supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
|
|
118
|
+
})
|
|
119
|
+
],
|
|
120
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
121
|
+
}]
|
|
122
|
+
}], 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"] }] } });
|
|
123
|
+
|
|
124
|
+
/**
|
|
125
|
+
* Generated bundle index. Do not edit.
|
|
126
|
+
*/
|
|
127
|
+
|
|
128
|
+
export { ComboBoxItemCustom };
|
|
129
|
+
//# sourceMappingURL=fundamental-ngx-ui5-webcomponents-combo-box-item-custom.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-combo-box-item-custom.mjs","sources":["../../../../libs/ui5-webcomponents/combo-box-item-custom/index.ts","../../../../libs/ui5-webcomponents/combo-box-item-custom/fundamental-ngx-ui5-webcomponents-combo-box-item-custom.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/ComboBoxItemCustom.js';\nimport { default as _ComboBoxItemCustom } from '@ui5/webcomponents/dist/ComboBoxItemCustom.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@Component({\n standalone: true,\n selector: 'ui5-cb-item-custom, [ui5-cb-item-custom]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5ComboBoxItemCustom',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ComboBoxItemCustom implements AfterViewInit {\n\n /**\n * Defines the text of the component.\nUsed for filtering, autocomplete, and mobile rendering.\n */\n text = input<typeof _ComboBoxItemCustom.prototype.text | undefined>();\n\n /**\n * Defines the value of the component.\nUsed for programmatic selection via the `selectedValue` property.\n */\n value = input<typeof _ComboBoxItemCustom.prototype.value | undefined>(); // className is now passed\n\n\n\n /**\n * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`.\n */\n ui5Click = output<UI5CustomEvent<_ComboBoxItemCustom, '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 * - **(default)**: Defines the content of the component.\n *\n * @example\n * ```html\n * <ui5-cb-item-custom>\n * <div slot=\"header\">Custom header content</div>\n * <p>Default slot content</p>\n * </ui5-cb-item-custom>\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\n\n public elementRef: ElementRef<_ComboBoxItemCustom> = 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(): _ComboBoxItemCustom {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'text',\n 'value',\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, () => {\n effect(() => {\n // Read the signal value\n const value = this[signalName]();\n if (wcElement) {\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 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 wcElement.addEventListener(eventName, (e) => {\n\n this[outputName].emit(e as CustomEvent<any>);\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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"}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, output, inject, ElementRef, Injector, runInInjectionContext, effect, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import '@ui5/webcomponents/dist/MultiComboBoxItemCustom.js';
|
|
4
|
+
import { ContentDensityObserver, contentDensityObserverProviders, ContentDensityMode } from '@fundamental-ngx/core/content-density';
|
|
5
|
+
|
|
6
|
+
class MultiComboBoxItemCustom {
|
|
7
|
+
constructor() {
|
|
8
|
+
/**
|
|
9
|
+
* Defines the text of the component.
|
|
10
|
+
Used for filtering and token display.
|
|
11
|
+
*/
|
|
12
|
+
this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
|
|
13
|
+
/**
|
|
14
|
+
* Defines the value of the component.
|
|
15
|
+
Used for programmatic selection via selectedValues property.
|
|
16
|
+
*/
|
|
17
|
+
this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : [])); // className is now passed
|
|
18
|
+
/**
|
|
19
|
+
* Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
|
|
20
|
+
|
|
21
|
+
**Note:** The event will not be fired if the `disabled` property is set to `true`.
|
|
22
|
+
*/
|
|
23
|
+
this.ui5Click = output();
|
|
24
|
+
/**
|
|
25
|
+
* Available slots for content projection in this component.
|
|
26
|
+
*
|
|
27
|
+
* Slots allow you to insert custom content into predefined areas of the web component.
|
|
28
|
+
* Use the `slot` attribute on child elements to target specific slots.
|
|
29
|
+
*
|
|
30
|
+
* - **(default)**: Defines the content of the component.
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* ```html
|
|
34
|
+
* <ui5-mcb-item-custom>
|
|
35
|
+
* <div slot="header">Custom header content</div>
|
|
36
|
+
* <p>Default slot content</p>
|
|
37
|
+
* </ui5-mcb-item-custom>
|
|
38
|
+
* ```
|
|
39
|
+
*
|
|
40
|
+
* @readonly
|
|
41
|
+
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots | MDN Web Components Slots}
|
|
42
|
+
*/
|
|
43
|
+
this.slots = [
|
|
44
|
+
{
|
|
45
|
+
"name": "default",
|
|
46
|
+
"description": "Defines the content of the component."
|
|
47
|
+
}
|
|
48
|
+
];
|
|
49
|
+
this.elementRef = inject(ElementRef);
|
|
50
|
+
this.injector = inject(Injector);
|
|
51
|
+
/**
|
|
52
|
+
* Content density observer is injected to activate automatic CSS class and
|
|
53
|
+
* UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.
|
|
54
|
+
* @private
|
|
55
|
+
*/
|
|
56
|
+
this._contentDensityObserver = inject(ContentDensityObserver);
|
|
57
|
+
}
|
|
58
|
+
get element() {
|
|
59
|
+
return this.elementRef.nativeElement;
|
|
60
|
+
}
|
|
61
|
+
ngAfterViewInit() {
|
|
62
|
+
const wcElement = this.element;
|
|
63
|
+
const inputsToSync = [
|
|
64
|
+
'text',
|
|
65
|
+
'value',
|
|
66
|
+
];
|
|
67
|
+
// Synchronize inputs (properties)
|
|
68
|
+
for (const inputName of inputsToSync) {
|
|
69
|
+
// Find the corresponding camelCase signal property on the Angular component
|
|
70
|
+
const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
|
|
71
|
+
// Use the Injector to run the effect in the correct context
|
|
72
|
+
if (this[signalName] && typeof this[signalName] === 'function') {
|
|
73
|
+
runInInjectionContext(this.injector, () => {
|
|
74
|
+
effect(() => {
|
|
75
|
+
// Read the signal value
|
|
76
|
+
const value = this[signalName]();
|
|
77
|
+
if (wcElement) {
|
|
78
|
+
// Write the value to the Web Component's property
|
|
79
|
+
wcElement[inputName] = value;
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
const outputsToSync = [
|
|
86
|
+
'ui5Click',
|
|
87
|
+
];
|
|
88
|
+
// Synchronize outputs (events)
|
|
89
|
+
for (const outputName of outputsToSync) {
|
|
90
|
+
// Map Angular output name to UI5 web component event name
|
|
91
|
+
const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
|
|
92
|
+
// Ensure the output property exists and has an emit function before adding listener
|
|
93
|
+
if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
|
|
94
|
+
// Cast the listener to the correct type to satisfy TypeScript
|
|
95
|
+
wcElement.addEventListener(eventName, (e) => {
|
|
96
|
+
this[outputName].emit(e);
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiComboBoxItemCustom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
102
|
+
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: [
|
|
103
|
+
contentDensityObserverProviders({
|
|
104
|
+
supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
|
|
105
|
+
})
|
|
106
|
+
], exportAs: ["ui5MultiComboBoxItemCustom"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
107
|
+
}
|
|
108
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiComboBoxItemCustom, decorators: [{
|
|
109
|
+
type: Component,
|
|
110
|
+
args: [{
|
|
111
|
+
standalone: true,
|
|
112
|
+
selector: 'ui5-mcb-item-custom, [ui5-mcb-item-custom]',
|
|
113
|
+
template: '<ng-content></ng-content>',
|
|
114
|
+
exportAs: 'ui5MultiComboBoxItemCustom',
|
|
115
|
+
providers: [
|
|
116
|
+
contentDensityObserverProviders({
|
|
117
|
+
supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
|
|
118
|
+
})
|
|
119
|
+
],
|
|
120
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
121
|
+
}]
|
|
122
|
+
}], 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"] }] } });
|
|
123
|
+
|
|
124
|
+
/**
|
|
125
|
+
* Generated bundle index. Do not edit.
|
|
126
|
+
*/
|
|
127
|
+
|
|
128
|
+
export { MultiComboBoxItemCustom };
|
|
129
|
+
//# sourceMappingURL=fundamental-ngx-ui5-webcomponents-multi-combo-box-item-custom.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-multi-combo-box-item-custom.mjs","sources":["../../../../libs/ui5-webcomponents/multi-combo-box-item-custom/index.ts","../../../../libs/ui5-webcomponents/multi-combo-box-item-custom/fundamental-ngx-ui5-webcomponents-multi-combo-box-item-custom.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/MultiComboBoxItemCustom.js';\nimport { default as _MultiComboBoxItemCustom } from '@ui5/webcomponents/dist/MultiComboBoxItemCustom.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@Component({\n standalone: true,\n selector: 'ui5-mcb-item-custom, [ui5-mcb-item-custom]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5MultiComboBoxItemCustom',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MultiComboBoxItemCustom implements AfterViewInit {\n\n /**\n * Defines the text of the component.\nUsed for filtering and token display.\n */\n text = input<typeof _MultiComboBoxItemCustom.prototype.text | undefined>();\n\n /**\n * Defines the value of the component.\nUsed for programmatic selection via selectedValues property.\n */\n value = input<typeof _MultiComboBoxItemCustom.prototype.value | undefined>(); // className is now passed\n\n\n\n /**\n * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`.\n */\n ui5Click = output<UI5CustomEvent<_MultiComboBoxItemCustom, '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 * - **(default)**: Defines the content of the component.\n *\n * @example\n * ```html\n * <ui5-mcb-item-custom>\n * <div slot=\"header\">Custom header content</div>\n * <p>Default slot content</p>\n * </ui5-mcb-item-custom>\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\n\n public elementRef: ElementRef<_MultiComboBoxItemCustom> = 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(): _MultiComboBoxItemCustom {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'text',\n 'value',\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, () => {\n effect(() => {\n // Read the signal value\n const value = this[signalName]();\n if (wcElement) {\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 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 wcElement.addEventListener(eventName, (e) => {\n\n this[outputName].emit(e as CustomEvent<any>);\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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"}
|