@fundamental-ngx/ui5-webcomponents 0.64.1-rc.8 → 0.64.1
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-dialog.mjs +13 -2
- package/fesm2022/fundamental-ngx-ui5-webcomponents-dialog.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-dynamic-date-range.mjs +8 -2
- package/fesm2022/fundamental-ngx-ui5-webcomponents-dynamic-date-range.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-input-icon.mjs +112 -0
- package/fesm2022/fundamental-ngx-ui5-webcomponents-input-icon.mjs.map +1 -0
- package/fesm2022/fundamental-ngx-ui5-webcomponents-menu-separator.mjs +3 -24
- package/fesm2022/fundamental-ngx-ui5-webcomponents-menu-separator.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-theming-bridge.mjs +16 -0
- package/fesm2022/fundamental-ngx-ui5-webcomponents-theming-bridge.mjs.map +1 -0
- package/fesm2022/fundamental-ngx-ui5-webcomponents-theming.mjs +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-theming.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toolbar-select-option.mjs +9 -3
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toolbar-select-option.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toolbar.mjs +8 -0
- package/fesm2022/fundamental-ngx-ui5-webcomponents-toolbar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-ui5-webcomponents.mjs +144 -32
- package/fesm2022/fundamental-ngx-ui5-webcomponents.mjs.map +1 -1
- package/package.json +12 -4
- package/types/fundamental-ngx-ui5-webcomponents-dialog.d.ts +11 -1
- package/types/fundamental-ngx-ui5-webcomponents-dynamic-date-range.d.ts +5 -1
- package/types/fundamental-ngx-ui5-webcomponents-input-icon.d.ts +38 -0
- package/types/fundamental-ngx-ui5-webcomponents-menu-separator.d.ts +1 -8
- package/types/fundamental-ngx-ui5-webcomponents-theming-bridge.d.ts +6 -0
- package/types/fundamental-ngx-ui5-webcomponents-toolbar-select-option.d.ts +8 -4
- package/types/fundamental-ngx-ui5-webcomponents-toolbar.d.ts +8 -0
- package/types/fundamental-ngx-ui5-webcomponents.d.ts +64 -11
|
@@ -79,6 +79,16 @@ class Dialog {
|
|
|
79
79
|
**Note:** Upon resizing, externally defined height and width styling will be ignored.
|
|
80
80
|
*/
|
|
81
81
|
this.resizable = input(false, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
82
|
+
/**
|
|
83
|
+
* Defines whether a fullscreen toggle button is shown in the dialog header.
|
|
84
|
+
When pressed, it toggles the `stretch` property.
|
|
85
|
+
The fullscreen button is not available on phone devices.
|
|
86
|
+
|
|
87
|
+
**Note:** The fullscreen button is not available on phone devices,
|
|
88
|
+
nor when a custom header slot is provided — the application is expected
|
|
89
|
+
to render its own toggle inside the custom header in those cases.
|
|
90
|
+
*/
|
|
91
|
+
this.showFullscreenButton = input(false, { ...(ngDevMode ? { debugName: "showFullscreenButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
82
92
|
/**
|
|
83
93
|
* Defines the state of the `Dialog`.
|
|
84
94
|
|
|
@@ -175,6 +185,7 @@ class Dialog {
|
|
|
175
185
|
'preventFocusRestore',
|
|
176
186
|
'preventInitialFocus',
|
|
177
187
|
'resizable',
|
|
188
|
+
'showFullscreenButton',
|
|
178
189
|
'state',
|
|
179
190
|
'stretch',
|
|
180
191
|
];
|
|
@@ -221,7 +232,7 @@ class Dialog {
|
|
|
221
232
|
}
|
|
222
233
|
}
|
|
223
234
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: Dialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
224
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: Dialog, isStandalone: true, selector: "ui5-dialog, [ui5-dialog]", inputs: { accessibleDescription: { classPropertyName: "accessibleDescription", publicName: "accessibleDescription", isSignal: true, isRequired: false, transformFunction: null }, accessibleDescriptionRef: { classPropertyName: "accessibleDescriptionRef", publicName: "accessibleDescriptionRef", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibleNameRef: { classPropertyName: "accessibleNameRef", publicName: "accessibleNameRef", isSignal: true, isRequired: false, transformFunction: null }, accessibleRole: { classPropertyName: "accessibleRole", publicName: "accessibleRole", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, preventFocusRestore: { classPropertyName: "preventFocusRestore", publicName: "preventFocusRestore", isSignal: true, isRequired: false, transformFunction: null }, preventInitialFocus: { classPropertyName: "preventInitialFocus", publicName: "preventInitialFocus", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, stretch: { classPropertyName: "stretch", publicName: "stretch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5BeforeClose: "ui5BeforeClose", ui5BeforeOpen: "ui5BeforeOpen", ui5Close: "ui5Close", ui5Open: "ui5Open" }, providers: [
|
|
235
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: Dialog, isStandalone: true, selector: "ui5-dialog, [ui5-dialog]", inputs: { accessibleDescription: { classPropertyName: "accessibleDescription", publicName: "accessibleDescription", isSignal: true, isRequired: false, transformFunction: null }, accessibleDescriptionRef: { classPropertyName: "accessibleDescriptionRef", publicName: "accessibleDescriptionRef", isSignal: true, isRequired: false, transformFunction: null }, accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, accessibleNameRef: { classPropertyName: "accessibleNameRef", publicName: "accessibleNameRef", isSignal: true, isRequired: false, transformFunction: null }, accessibleRole: { classPropertyName: "accessibleRole", publicName: "accessibleRole", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, headerText: { classPropertyName: "headerText", publicName: "headerText", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, preventFocusRestore: { classPropertyName: "preventFocusRestore", publicName: "preventFocusRestore", isSignal: true, isRequired: false, transformFunction: null }, preventInitialFocus: { classPropertyName: "preventInitialFocus", publicName: "preventInitialFocus", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, showFullscreenButton: { classPropertyName: "showFullscreenButton", publicName: "showFullscreenButton", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, stretch: { classPropertyName: "stretch", publicName: "stretch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5BeforeClose: "ui5BeforeClose", ui5BeforeOpen: "ui5BeforeOpen", ui5Close: "ui5Close", ui5Open: "ui5Open" }, providers: [
|
|
225
236
|
contentDensityObserverProviders({
|
|
226
237
|
supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
|
|
227
238
|
})
|
|
@@ -241,7 +252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
241
252
|
],
|
|
242
253
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
243
254
|
}]
|
|
244
|
-
}], propDecorators: { accessibleDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleDescription", required: false }] }], accessibleDescriptionRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleDescriptionRef", required: false }] }], accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], accessibleNameRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleNameRef", required: false }] }], accessibleRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleRole", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], headerText: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerText", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], preventFocusRestore: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventFocusRestore", required: false }] }], preventInitialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventInitialFocus", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], stretch: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretch", required: false }] }], ui5BeforeClose: [{ type: i0.Output, args: ["ui5BeforeClose"] }], ui5BeforeOpen: [{ type: i0.Output, args: ["ui5BeforeOpen"] }], ui5Close: [{ type: i0.Output, args: ["ui5Close"] }], ui5Open: [{ type: i0.Output, args: ["ui5Open"] }] } });
|
|
255
|
+
}], propDecorators: { accessibleDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleDescription", required: false }] }], accessibleDescriptionRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleDescriptionRef", required: false }] }], accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], accessibleNameRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleNameRef", required: false }] }], accessibleRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleRole", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], headerText: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerText", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], preventFocusRestore: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventFocusRestore", required: false }] }], preventInitialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventInitialFocus", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], showFullscreenButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFullscreenButton", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], stretch: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretch", required: false }] }], ui5BeforeClose: [{ type: i0.Output, args: ["ui5BeforeClose"] }], ui5BeforeOpen: [{ type: i0.Output, args: ["ui5BeforeOpen"] }], ui5Close: [{ type: i0.Output, args: ["ui5Close"] }], ui5Open: [{ type: i0.Output, args: ["ui5Open"] }] } });
|
|
245
256
|
|
|
246
257
|
/**
|
|
247
258
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-dialog.mjs","sources":["../../../../libs/ui5-webcomponents/dialog/index.ts","../../../../libs/ui5-webcomponents/dialog/fundamental-ngx-ui5-webcomponents-dialog.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/Dialog.js';\nimport { default as _Dialog } from '@ui5/webcomponents/dist/Dialog.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 PopupAccessibleRole } from '@ui5/webcomponents/dist/types/PopupAccessibleRole.js';\nimport { default as ValueState } from '@ui5/webcomponents-base/dist/types/ValueState.js';\n\n@Component({\n standalone: true,\n selector: 'ui5-dialog, [ui5-dialog]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5Dialog',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Dialog implements AfterViewInit {\n\n /**\n * Defines the accessible description of the component.\n */\n accessibleDescription = input<typeof _Dialog.prototype.accessibleDescription | undefined>();\n\n /**\n * Receives id(or many ids) of the elements that describe the component.\n */\n accessibleDescriptionRef = input<typeof _Dialog.prototype.accessibleDescriptionRef | undefined>();\n\n /**\n * Defines the accessible name of the component.\n */\n accessibleName = input<typeof _Dialog.prototype.accessibleName | undefined>();\n\n /**\n * Defines the IDs of the elements that label the component.\n */\n accessibleNameRef = input<typeof _Dialog.prototype.accessibleNameRef | undefined>();\n\n /**\n * Allows setting a custom role.\n */\n accessibleRole = input<typeof _Dialog.prototype.accessibleRole | undefined>(\"Dialog\");\n\n /**\n * Determines whether the component is draggable.\nIf this property is set to true, the Dialog will be draggable by its header.\n\n**Note:** The component can be draggable only in desktop mode.\n\n**Note:** This property overrides the default HTML \"draggable\" attribute native behavior.\nWhen \"draggable\" is set to true, the native browser \"draggable\"\nbehavior is prevented and only the Dialog custom logic (\"draggable by its header\") works.\n */\n draggable = input(false, { transform: booleanAttribute });\n\n /**\n * Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.\n */\n headerText = input<typeof _Dialog.prototype.headerText | undefined>();\n\n /**\n * Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.\n */\n initialFocus = input<typeof _Dialog.prototype.initialFocus | undefined>();\n\n /**\n * Indicates if the element is open\n */\n open = input(false, { transform: booleanAttribute });\n\n /**\n * Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.\n */\n preventFocusRestore = input(false, { transform: booleanAttribute });\n\n /**\n * Indicates whether initial focus should be prevented.\n */\n preventInitialFocus = input(false, { transform: booleanAttribute });\n\n /**\n * Configures the component to be resizable.\nIf this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.\nIn RTL languages, the resize handle will be placed in the bottom left corner.\n\n**Note:** The component can be resizable only in desktop mode.\n\n**Note:** Upon resizing, externally defined height and width styling will be ignored.\n */\n resizable = input(false, { transform: booleanAttribute });\n\n /**\n * Defines the state of the `Dialog`.\n\n**Note:** If `\"Negative\"` and `\"Critical\"` states is set, it will change the\naccessibility role to \"alertdialog\", if the accessibleRole property is set to `\"Dialog\"`.\n */\n state = input<typeof _Dialog.prototype.state | undefined>(\"None\");\n\n /**\n * Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.\n */\n stretch = input(false, { transform: booleanAttribute }); // className is now passed\n\n\n\n /**\n * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n */\n ui5BeforeClose = output<UI5CustomEvent<_Dialog, 'before-close'>>();\n\n /**\n * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n */\n ui5BeforeOpen = output<UI5CustomEvent<_Dialog, 'before-open'>>();\n\n /**\n * Fired after the component is closed.\n */\n ui5Close = output<UI5CustomEvent<_Dialog, 'close'>>();\n\n /**\n * Fired after the component is opened.\n */\n ui5Open = output<UI5CustomEvent<_Dialog, 'open'>>();\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 Popup.\n * - **footer**: Defines the footer HTML Element.\n * - **header**: Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n *\n * @example\n * ```html\n * <ui5-dialog>\n * <div slot=\"header\">Custom header content</div>\n * <p>Default slot content</p>\n * </ui5-dialog>\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 Popup.\"\n },\n {\n \"name\": \"footer\",\n \"description\": \"Defines the footer HTML Element.\"\n },\n {\n \"name\": \"header\",\n \"description\": \"Defines the header HTML Element.\\n\\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\\n`accessibleName` should be used.\"\n }\n ];\n\n\n public elementRef: ElementRef<_Dialog> = 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(): _Dialog {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'accessibleDescription',\n 'accessibleDescriptionRef',\n 'accessibleName',\n 'accessibleNameRef',\n 'accessibleRole',\n 'draggable',\n 'headerText',\n 'initialFocus',\n 'open',\n 'preventFocusRestore',\n 'preventInitialFocus',\n 'resizable',\n 'state',\n 'stretch',\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 // 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 'ui5BeforeClose',\n 'ui5BeforeOpen',\n 'ui5Close',\n 'ui5Open',\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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"}
|
|
1
|
+
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-dialog.mjs","sources":["../../../../libs/ui5-webcomponents/dialog/index.ts","../../../../libs/ui5-webcomponents/dialog/fundamental-ngx-ui5-webcomponents-dialog.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/Dialog.js';\nimport { default as _Dialog } from '@ui5/webcomponents/dist/Dialog.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 PopupAccessibleRole } from '@ui5/webcomponents/dist/types/PopupAccessibleRole.js';\nimport { default as ValueState } from '@ui5/webcomponents-base/dist/types/ValueState.js';\n\n@Component({\n standalone: true,\n selector: 'ui5-dialog, [ui5-dialog]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5Dialog',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Dialog implements AfterViewInit {\n\n /**\n * Defines the accessible description of the component.\n */\n accessibleDescription = input<typeof _Dialog.prototype.accessibleDescription | undefined>();\n\n /**\n * Receives id(or many ids) of the elements that describe the component.\n */\n accessibleDescriptionRef = input<typeof _Dialog.prototype.accessibleDescriptionRef | undefined>();\n\n /**\n * Defines the accessible name of the component.\n */\n accessibleName = input<typeof _Dialog.prototype.accessibleName | undefined>();\n\n /**\n * Defines the IDs of the elements that label the component.\n */\n accessibleNameRef = input<typeof _Dialog.prototype.accessibleNameRef | undefined>();\n\n /**\n * Allows setting a custom role.\n */\n accessibleRole = input<typeof _Dialog.prototype.accessibleRole | undefined>(\"Dialog\");\n\n /**\n * Determines whether the component is draggable.\nIf this property is set to true, the Dialog will be draggable by its header.\n\n**Note:** The component can be draggable only in desktop mode.\n\n**Note:** This property overrides the default HTML \"draggable\" attribute native behavior.\nWhen \"draggable\" is set to true, the native browser \"draggable\"\nbehavior is prevented and only the Dialog custom logic (\"draggable by its header\") works.\n */\n draggable = input(false, { transform: booleanAttribute });\n\n /**\n * Defines the header text.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.\n */\n headerText = input<typeof _Dialog.prototype.headerText | undefined>();\n\n /**\n * Defines the ID of the HTML Element, which will get the initial focus.\n\n**Note:** If an element with `autofocus` attribute is added inside the component,\n`initialFocus` won't take effect.\n */\n initialFocus = input<typeof _Dialog.prototype.initialFocus | undefined>();\n\n /**\n * Indicates if the element is open\n */\n open = input(false, { transform: booleanAttribute });\n\n /**\n * Defines if the focus should be returned to the previously focused element,\nwhen the popup closes.\n */\n preventFocusRestore = input(false, { transform: booleanAttribute });\n\n /**\n * Indicates whether initial focus should be prevented.\n */\n preventInitialFocus = input(false, { transform: booleanAttribute });\n\n /**\n * Configures the component to be resizable.\nIf this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.\nIn RTL languages, the resize handle will be placed in the bottom left corner.\n\n**Note:** The component can be resizable only in desktop mode.\n\n**Note:** Upon resizing, externally defined height and width styling will be ignored.\n */\n resizable = input(false, { transform: booleanAttribute });\n\n /**\n * Defines whether a fullscreen toggle button is shown in the dialog header.\nWhen pressed, it toggles the `stretch` property.\nThe fullscreen button is not available on phone devices.\n\n**Note:** The fullscreen button is not available on phone devices,\nnor when a custom header slot is provided — the application is expected\nto render its own toggle inside the custom header in those cases.\n */\n showFullscreenButton = input(false, { transform: booleanAttribute });\n\n /**\n * Defines the state of the `Dialog`.\n\n**Note:** If `\"Negative\"` and `\"Critical\"` states is set, it will change the\naccessibility role to \"alertdialog\", if the accessibleRole property is set to `\"Dialog\"`.\n */\n state = input<typeof _Dialog.prototype.state | undefined>(\"None\");\n\n /**\n * Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.\n */\n stretch = input(false, { transform: booleanAttribute }); // className is now passed\n\n\n\n /**\n * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n */\n ui5BeforeClose = output<UI5CustomEvent<_Dialog, 'before-close'>>();\n\n /**\n * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n */\n ui5BeforeOpen = output<UI5CustomEvent<_Dialog, 'before-open'>>();\n\n /**\n * Fired after the component is closed.\n */\n ui5Close = output<UI5CustomEvent<_Dialog, 'close'>>();\n\n /**\n * Fired after the component is opened.\n */\n ui5Open = output<UI5CustomEvent<_Dialog, 'open'>>();\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 Popup.\n * - **footer**: Defines the footer HTML Element.\n * - **header**: Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n *\n * @example\n * ```html\n * <ui5-dialog>\n * <div slot=\"header\">Custom header content</div>\n * <p>Default slot content</p>\n * </ui5-dialog>\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 Popup.\"\n },\n {\n \"name\": \"footer\",\n \"description\": \"Defines the footer HTML Element.\"\n },\n {\n \"name\": \"header\",\n \"description\": \"Defines the header HTML Element.\\n\\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\\n`accessibleName` should be used.\"\n }\n ];\n\n\n public elementRef: ElementRef<_Dialog> = 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(): _Dialog {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'accessibleDescription',\n 'accessibleDescriptionRef',\n 'accessibleName',\n 'accessibleNameRef',\n 'accessibleRole',\n 'draggable',\n 'headerText',\n 'initialFocus',\n 'open',\n 'preventFocusRestore',\n 'preventInitialFocus',\n 'resizable',\n 'showFullscreenButton',\n 'state',\n 'stretch',\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 // 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 'ui5BeforeClose',\n 'ui5BeforeOpen',\n 'ui5Close',\n 'ui5Open',\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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"}
|
|
@@ -5,6 +5,11 @@ import { ContentDensityObserver, contentDensityObserverProviders, ContentDensity
|
|
|
5
5
|
|
|
6
6
|
class DynamicDateRange {
|
|
7
7
|
constructor() {
|
|
8
|
+
/**
|
|
9
|
+
* Receives id(or many ids) of the elements that label the component.
|
|
10
|
+
*/
|
|
11
|
+
this.accessibleNameRef = input(/* @ts-ignore */
|
|
12
|
+
...(ngDevMode ? [undefined, { debugName: "accessibleNameRef" }] : /* istanbul ignore next */ []));
|
|
8
13
|
/**
|
|
9
14
|
* Defines the options listed as a string, separated by commas and using capital case.
|
|
10
15
|
Example: "TODAY, YESTERDAY, DATERANGE"
|
|
@@ -35,6 +40,7 @@ class DynamicDateRange {
|
|
|
35
40
|
ngAfterViewInit() {
|
|
36
41
|
const wcElement = this.element;
|
|
37
42
|
const inputsToSync = [
|
|
43
|
+
'accessibleNameRef',
|
|
38
44
|
'options',
|
|
39
45
|
'value',
|
|
40
46
|
];
|
|
@@ -78,7 +84,7 @@ class DynamicDateRange {
|
|
|
78
84
|
}
|
|
79
85
|
}
|
|
80
86
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DynamicDateRange, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
81
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: DynamicDateRange, isStandalone: true, selector: "ui5-dynamic-date-range, [ui5-dynamic-date-range]", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Change: "ui5Change" }, providers: [
|
|
87
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: DynamicDateRange, isStandalone: true, selector: "ui5-dynamic-date-range, [ui5-dynamic-date-range]", inputs: { accessibleNameRef: { classPropertyName: "accessibleNameRef", publicName: "accessibleNameRef", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Change: "ui5Change" }, providers: [
|
|
82
88
|
contentDensityObserverProviders({
|
|
83
89
|
supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
|
|
84
90
|
})
|
|
@@ -98,7 +104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
98
104
|
],
|
|
99
105
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
100
106
|
}]
|
|
101
|
-
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ui5Change: [{ type: i0.Output, args: ["ui5Change"] }] } });
|
|
107
|
+
}], propDecorators: { accessibleNameRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleNameRef", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ui5Change: [{ type: i0.Output, args: ["ui5Change"] }] } });
|
|
102
108
|
|
|
103
109
|
/**
|
|
104
110
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-dynamic-date-range.mjs","sources":["../../../../libs/ui5-webcomponents/dynamic-date-range/index.ts","../../../../libs/ui5-webcomponents/dynamic-date-range/fundamental-ngx-ui5-webcomponents-dynamic-date-range.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/DynamicDateRange.js';\nimport { default as _DynamicDateRange } from '@ui5/webcomponents/dist/DynamicDateRange.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n ContentDensityObserver,\n contentDensityObserverProviders,\n ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\nimport { DynamicDateRangeValue } from '@ui5/webcomponents/dist/DynamicDateRange.js';\n\n@Component({\n standalone: true,\n selector: 'ui5-dynamic-date-range, [ui5-dynamic-date-range]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5DynamicDateRange',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DynamicDateRange implements AfterViewInit {\n\n /**\n * Defines the options listed as a string, separated by commas and using capital case.\nExample: \"TODAY, YESTERDAY, DATERANGE\"\n */\n options = input<typeof _DynamicDateRange.prototype.options | undefined>(\"\");\n\n /**\n * Defines the value object.\n */\n value = input<typeof _DynamicDateRange.prototype.value | undefined>(); // className is now passed\n\n\n\n /**\n * Fired when the input operation has finished by pressing Enter or on focusout or a value is selected in the popover.\n */\n ui5Change = output<UI5CustomEvent<_DynamicDateRange, 'change'>>();\n\n\n public elementRef: ElementRef<_DynamicDateRange> = 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(): _DynamicDateRange {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'options',\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 // 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 ];\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// Re-export types for convenience\nexport { DynamicDateRangeValue } from '@ui5/webcomponents/dist/DynamicDateRange.js';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAuCa,gBAAgB,CAAA;AAZ7B,IAAA,WAAA,GAAA;AAcE;;;AAGG;QACH,IAAA,CAAA,OAAO,GAAG,KAAK,CAAyD,EAAE;oFAAC;AAE3E;;AAEG;AACH,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK;AAAwD,QAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAA,CAAC;AAItE;;AAEG;QACH,IAAA,CAAA,SAAS,GAAG,MAAM,EAA+C;AAG1D,QAAA,IAAA,CAAA,UAAU,GAAkC,MAAM,CAAC,UAAU,CAAC;AAC9D,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-dynamic-date-range.mjs","sources":["../../../../libs/ui5-webcomponents/dynamic-date-range/index.ts","../../../../libs/ui5-webcomponents/dynamic-date-range/fundamental-ngx-ui5-webcomponents-dynamic-date-range.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/DynamicDateRange.js';\nimport { default as _DynamicDateRange } from '@ui5/webcomponents/dist/DynamicDateRange.js';\nimport { UI5CustomEvent } from '@ui5/webcomponents-base';\nimport {\n ContentDensityObserver,\n contentDensityObserverProviders,\n ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\nimport { DynamicDateRangeValue } from '@ui5/webcomponents/dist/DynamicDateRange.js';\n\n@Component({\n standalone: true,\n selector: 'ui5-dynamic-date-range, [ui5-dynamic-date-range]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5DynamicDateRange',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DynamicDateRange implements AfterViewInit {\n\n /**\n * Receives id(or many ids) of the elements that label the component.\n */\n accessibleNameRef = input<typeof _DynamicDateRange.prototype.accessibleNameRef | undefined>();\n\n /**\n * Defines the options listed as a string, separated by commas and using capital case.\nExample: \"TODAY, YESTERDAY, DATERANGE\"\n */\n options = input<typeof _DynamicDateRange.prototype.options | undefined>(\"\");\n\n /**\n * Defines the value object.\n */\n value = input<typeof _DynamicDateRange.prototype.value | undefined>(); // className is now passed\n\n\n\n /**\n * Fired when the input operation has finished by pressing Enter or on focusout or a value is selected in the popover.\n */\n ui5Change = output<UI5CustomEvent<_DynamicDateRange, 'change'>>();\n\n\n public elementRef: ElementRef<_DynamicDateRange> = 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(): _DynamicDateRange {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'accessibleNameRef',\n 'options',\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 // 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 ];\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// Re-export types for convenience\nexport { DynamicDateRangeValue } from '@ui5/webcomponents/dist/DynamicDateRange.js';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,112 @@
|
|
|
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/InputIcon.js';
|
|
4
|
+
import { ContentDensityObserver, contentDensityObserverProviders, ContentDensityMode } from '@fundamental-ngx/core/content-density';
|
|
5
|
+
|
|
6
|
+
class InputIcon {
|
|
7
|
+
constructor() {
|
|
8
|
+
/**
|
|
9
|
+
* Defines the accessible name of the icon.
|
|
10
|
+
|
|
11
|
+
**Note:** This property is used for accessibility purposes and will be announced by screen readers.
|
|
12
|
+
When set, it is also rendered as a native `title` tooltip.
|
|
13
|
+
*/
|
|
14
|
+
this.accessibleName = input(/* @ts-ignore */
|
|
15
|
+
...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : /* istanbul ignore next */ []));
|
|
16
|
+
/**
|
|
17
|
+
* Defines the icon name to be displayed.
|
|
18
|
+
|
|
19
|
+
**Note:** Make sure you import the desired icon before using it.
|
|
20
|
+
*/
|
|
21
|
+
this.name = input(/* @ts-ignore */
|
|
22
|
+
...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ [])); // className is now passed
|
|
23
|
+
/**
|
|
24
|
+
* Fired when the `ui5-input-icon` is activated either with a click/tap or by using the Enter or Space key.
|
|
25
|
+
*/
|
|
26
|
+
this.ui5Click = output();
|
|
27
|
+
this.elementRef = inject(ElementRef);
|
|
28
|
+
this.injector = inject(Injector);
|
|
29
|
+
/**
|
|
30
|
+
* Content density observer is injected to activate automatic CSS class and
|
|
31
|
+
* UI5 attribute application. The observer self-initializes, no explicit subscribe() needed.
|
|
32
|
+
* @private
|
|
33
|
+
*/
|
|
34
|
+
this._contentDensityObserver = inject(ContentDensityObserver);
|
|
35
|
+
}
|
|
36
|
+
get element() {
|
|
37
|
+
return this.elementRef.nativeElement;
|
|
38
|
+
}
|
|
39
|
+
ngAfterViewInit() {
|
|
40
|
+
const wcElement = this.element;
|
|
41
|
+
const inputsToSync = [
|
|
42
|
+
'accessibleName',
|
|
43
|
+
'name',
|
|
44
|
+
];
|
|
45
|
+
// Synchronize inputs (properties)
|
|
46
|
+
for (const inputName of inputsToSync) {
|
|
47
|
+
// Find the corresponding camelCase signal property on the Angular component
|
|
48
|
+
const signalName = inputName.replace(/-./g, (x) => x[1].toUpperCase());
|
|
49
|
+
// Use the Injector to run the effect in the correct context
|
|
50
|
+
if (this[signalName] && typeof this[signalName] === 'function') {
|
|
51
|
+
runInInjectionContext(this.injector, () => {
|
|
52
|
+
effect(() => {
|
|
53
|
+
// Read the signal value
|
|
54
|
+
const value = this[signalName]();
|
|
55
|
+
if (wcElement) {
|
|
56
|
+
// Skip writes when the signal is undefined and the property is already truthy
|
|
57
|
+
// This prevents clobbering imperatively-set values (e.g., from RouterLink)
|
|
58
|
+
if (value === undefined && wcElement[inputName]) {
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
// Write the value to the Web Component's property
|
|
62
|
+
wcElement[inputName] = value;
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
const outputsToSync = [
|
|
69
|
+
'ui5Click',
|
|
70
|
+
];
|
|
71
|
+
// Synchronize outputs (events)
|
|
72
|
+
for (const outputName of outputsToSync) {
|
|
73
|
+
// Map Angular output name to UI5 web component event name
|
|
74
|
+
const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
|
|
75
|
+
// Ensure the output property exists and has an emit function before adding listener
|
|
76
|
+
if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
|
|
77
|
+
// Cast the listener to the correct type to satisfy TypeScript
|
|
78
|
+
wcElement.addEventListener(eventName, (e) => {
|
|
79
|
+
this[outputName].emit(e);
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InputIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
85
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: InputIcon, isStandalone: true, selector: "ui5-input-icon, [ui5-input-icon]", inputs: { accessibleName: { classPropertyName: "accessibleName", publicName: "accessibleName", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ui5Click: "ui5Click" }, providers: [
|
|
86
|
+
contentDensityObserverProviders({
|
|
87
|
+
supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
|
|
88
|
+
})
|
|
89
|
+
], exportAs: ["ui5InputIcon"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
90
|
+
}
|
|
91
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InputIcon, decorators: [{
|
|
92
|
+
type: Component,
|
|
93
|
+
args: [{
|
|
94
|
+
standalone: true,
|
|
95
|
+
selector: 'ui5-input-icon, [ui5-input-icon]',
|
|
96
|
+
template: '<ng-content></ng-content>',
|
|
97
|
+
exportAs: 'ui5InputIcon',
|
|
98
|
+
providers: [
|
|
99
|
+
contentDensityObserverProviders({
|
|
100
|
+
supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
|
|
101
|
+
})
|
|
102
|
+
],
|
|
103
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
104
|
+
}]
|
|
105
|
+
}], propDecorators: { accessibleName: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibleName", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ui5Click: [{ type: i0.Output, args: ["ui5Click"] }] } });
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* Generated bundle index. Do not edit.
|
|
109
|
+
*/
|
|
110
|
+
|
|
111
|
+
export { InputIcon };
|
|
112
|
+
//# sourceMappingURL=fundamental-ngx-ui5-webcomponents-input-icon.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-input-icon.mjs","sources":["../../../../libs/ui5-webcomponents/input-icon/index.ts","../../../../libs/ui5-webcomponents/input-icon/fundamental-ngx-ui5-webcomponents-input-icon.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/InputIcon.js';\nimport { default as _InputIcon } from '@ui5/webcomponents/dist/InputIcon.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-input-icon, [ui5-input-icon]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5InputIcon',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InputIcon implements AfterViewInit {\n\n /**\n * Defines the accessible name of the icon.\n\n**Note:** This property is used for accessibility purposes and will be announced by screen readers.\nWhen set, it is also rendered as a native `title` tooltip.\n */\n accessibleName = input<typeof _InputIcon.prototype.accessibleName | undefined>();\n\n /**\n * Defines the icon name to be displayed.\n\n**Note:** Make sure you import the desired icon before using it.\n */\n name = input<typeof _InputIcon.prototype.name | undefined>(); // className is now passed\n\n\n\n /**\n * Fired when the `ui5-input-icon` is activated either with a click/tap or by using the Enter or Space key.\n */\n ui5Click = output<UI5CustomEvent<_InputIcon, 'click'>>();\n\n\n public elementRef: ElementRef<_InputIcon> = 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(): _InputIcon {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'accessibleName',\n 'name',\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 // 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 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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"}
|
|
@@ -1,17 +1,11 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { inject, ElementRef, Injector, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import '@ui5/webcomponents/dist/MenuSeparator.js';
|
|
4
4
|
import { ContentDensityObserver, contentDensityObserverProviders, ContentDensityMode } from '@fundamental-ngx/core/content-density';
|
|
5
5
|
|
|
6
6
|
class MenuSeparator {
|
|
7
7
|
constructor() {
|
|
8
8
|
// className is now passed
|
|
9
|
-
/**
|
|
10
|
-
* Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
|
|
11
|
-
|
|
12
|
-
**Note:** The event will not be fired if the `disabled` property is set to `true`.
|
|
13
|
-
*/
|
|
14
|
-
this.ui5Click = output();
|
|
15
9
|
this.elementRef = inject(ElementRef);
|
|
16
10
|
this.injector = inject(Injector);
|
|
17
11
|
/**
|
|
@@ -26,24 +20,9 @@ class MenuSeparator {
|
|
|
26
20
|
}
|
|
27
21
|
ngAfterViewInit() {
|
|
28
22
|
const wcElement = this.element;
|
|
29
|
-
const outputsToSync = [
|
|
30
|
-
'ui5Click',
|
|
31
|
-
];
|
|
32
|
-
// Synchronize outputs (events)
|
|
33
|
-
for (const outputName of outputsToSync) {
|
|
34
|
-
// Map Angular output name to UI5 web component event name
|
|
35
|
-
const eventName = outputName.replace('ui5', '').replace(/([A-Z])/g, '-$1').toLowerCase().substring(1);
|
|
36
|
-
// Ensure the output property exists and has an emit function before adding listener
|
|
37
|
-
if (this[outputName] && typeof this[outputName].emit === 'function' && wcElement.addEventListener) {
|
|
38
|
-
// Cast the listener to the correct type to satisfy TypeScript
|
|
39
|
-
wcElement.addEventListener(eventName, (e) => {
|
|
40
|
-
this[outputName].emit(e);
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
23
|
}
|
|
45
24
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
46
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: MenuSeparator, isStandalone: true, selector: "ui5-menu-separator, [ui5-menu-separator]",
|
|
25
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: MenuSeparator, isStandalone: true, selector: "ui5-menu-separator, [ui5-menu-separator]", providers: [
|
|
47
26
|
contentDensityObserverProviders({
|
|
48
27
|
supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
|
|
49
28
|
})
|
|
@@ -63,7 +42,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
63
42
|
],
|
|
64
43
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
65
44
|
}]
|
|
66
|
-
}]
|
|
45
|
+
}] });
|
|
67
46
|
|
|
68
47
|
/**
|
|
69
48
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-menu-separator.mjs","sources":["../../../../libs/ui5-webcomponents/menu-separator/index.ts","../../../../libs/ui5-webcomponents/menu-separator/fundamental-ngx-ui5-webcomponents-menu-separator.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/MenuSeparator.js';\nimport { default as _MenuSeparator } from '@ui5/webcomponents/dist/MenuSeparator.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-menu-separator, [ui5-menu-separator]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5MenuSeparator',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MenuSeparator implements AfterViewInit {\n // className is now passed\n\n\n\n
|
|
1
|
+
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-menu-separator.mjs","sources":["../../../../libs/ui5-webcomponents/menu-separator/index.ts","../../../../libs/ui5-webcomponents/menu-separator/fundamental-ngx-ui5-webcomponents-menu-separator.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/MenuSeparator.js';\nimport { default as _MenuSeparator } from '@ui5/webcomponents/dist/MenuSeparator.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-menu-separator, [ui5-menu-separator]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5MenuSeparator',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MenuSeparator implements AfterViewInit {\n // className is now passed\n\n\n\n\n\n public elementRef: ElementRef<_MenuSeparator> = 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(): _MenuSeparator {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n \n \n \n\n }\n}\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAuCa,aAAa,CAAA;AAZ1B,IAAA,WAAA,GAAA;;AAmBS,QAAA,IAAA,CAAA,UAAU,GAA+B,MAAM,CAAC,UAAU,CAAC;AAC3D,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AAElC;;;;AAIG;AACc,QAAA,IAAA,CAAA,uBAAuB,GAAG,MAAM,CAAC,sBAAsB,CAAC;AAc1E,IAAA;AAZC,IAAA,IAAI,OAAO,GAAA;AACT,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa;IACtC;IAEA,eAAe,GAAA;AACb,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO;IAMhC;8GA5BW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAb,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0CAAA,EAAA,SAAA,EAPb;AACT,YAAA,+BAA+B,CAAC;gBAC9B,uBAAuB,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,kBAAkB,CAAC,IAAI;aAC9E;AACF,SAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EANS,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAS1B,aAAa,EAAA,UAAA,EAAA,CAAA;kBAZzB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,0CAA0C;AACpD,oBAAA,QAAQ,EAAE,2BAA2B;AACrC,oBAAA,QAAQ,EAAE,kBAAkB;AAC5B,oBAAA,SAAS,EAAE;AACT,wBAAA,+BAA+B,CAAC;4BAC9B,uBAAuB,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,kBAAkB,CAAC,IAAI;yBAC9E;AACF,qBAAA;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAChD,iBAAA;;;ACtCD;;AAEG;;;;"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { provideEnvironmentInitializer, inject } from '@angular/core';
|
|
2
|
+
import { Ui5WebcomponentsMainThemingService } from '@fundamental-ngx/ui5-webcomponents/theming';
|
|
3
|
+
export { Ui5WebcomponentsMainThemingService } from '@fundamental-ngx/ui5-webcomponents/theming';
|
|
4
|
+
|
|
5
|
+
function provideUi5Webcomponents() {
|
|
6
|
+
return provideEnvironmentInitializer(() => {
|
|
7
|
+
inject(Ui5WebcomponentsMainThemingService);
|
|
8
|
+
});
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Generated bundle index. Do not edit.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
export { provideUi5Webcomponents };
|
|
16
|
+
//# sourceMappingURL=fundamental-ngx-ui5-webcomponents-theming-bridge.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-theming-bridge.mjs","sources":["../../../../libs/ui5-webcomponents/theming-bridge/index.ts","../../../../libs/ui5-webcomponents/theming-bridge/fundamental-ngx-ui5-webcomponents-theming-bridge.ts"],"sourcesContent":["import { EnvironmentProviders, inject, provideEnvironmentInitializer } from '@angular/core';\nimport { Ui5WebcomponentsMainThemingService } from '@fundamental-ngx/ui5-webcomponents/theming';\n\nexport { Ui5WebcomponentsMainThemingService };\n\nexport function provideUi5Webcomponents(): EnvironmentProviders {\n return provideEnvironmentInitializer(() => {\n inject(Ui5WebcomponentsMainThemingService);\n });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;SAKgB,uBAAuB,GAAA;IACnC,OAAO,6BAA6B,CAAC,MAAK;QACtC,MAAM,CAAC,kCAAkC,CAAC;AAC9C,IAAA,CAAC,CAAC;AACN;;ACTA;;AAEG;;;;"}
|
|
@@ -5,7 +5,7 @@ import { WebcomponentsThemingProvider } from '@fundamental-ngx/ui5-webcomponents
|
|
|
5
5
|
class Ui5WebcomponentsMainThemingService extends WebcomponentsThemingProvider {
|
|
6
6
|
constructor() {
|
|
7
7
|
super(() => import('@ui5/webcomponents/dist/generated/json-imports/Themes.js'));
|
|
8
|
-
this.name = '
|
|
8
|
+
this.name = 'ui5-webcomponents-theming-service';
|
|
9
9
|
}
|
|
10
10
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: Ui5WebcomponentsMainThemingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
11
11
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: Ui5WebcomponentsMainThemingService, providedIn: 'root' }); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-theming.mjs","sources":["../../../../libs/ui5-webcomponents/theming/index.ts","../../../../libs/ui5-webcomponents/theming/fundamental-ngx-ui5-webcomponents-theming.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { WebcomponentsThemingProvider } from '@fundamental-ngx/ui5-webcomponents-base/theming';\n\n@Injectable({ providedIn: 'root' })\nclass Ui5WebcomponentsMainThemingService extends WebcomponentsThemingProvider {\n name = '
|
|
1
|
+
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-theming.mjs","sources":["../../../../libs/ui5-webcomponents/theming/index.ts","../../../../libs/ui5-webcomponents/theming/fundamental-ngx-ui5-webcomponents-theming.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { WebcomponentsThemingProvider } from '@fundamental-ngx/ui5-webcomponents-base/theming';\n\n@Injectable({ providedIn: 'root' })\nclass Ui5WebcomponentsMainThemingService extends WebcomponentsThemingProvider {\n name = 'ui5-webcomponents-theming-service';\n constructor() {\n super(\n () => import('@ui5/webcomponents/dist/generated/json-imports/Themes.js'),\n );\n }\n}\n\nexport { Ui5WebcomponentsMainThemingService };\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA,MACM,kCAAmC,SAAQ,4BAA4B,CAAA;AAE3E,IAAA,WAAA,GAAA;QACE,KAAK,CACH,MAAM,OAAO,0DAA0D,CAAC,CACzE;QAJH,IAAA,CAAA,IAAI,GAAG,mCAAmC;IAK1C;8GANI,kCAAkC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAlC,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kCAAkC,cADd,MAAM,EAAA,CAAA,CAAA;;2FAC1B,kCAAkC,EAAA,UAAA,EAAA,CAAA;kBADvC,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACHlC;;AAEG;;;;"}
|
|
@@ -8,7 +8,12 @@ class ToolbarSelectOption {
|
|
|
8
8
|
/**
|
|
9
9
|
* Defines the selected state of the component.
|
|
10
10
|
*/
|
|
11
|
-
this.selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
11
|
+
this.selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
12
|
+
/**
|
|
13
|
+
* Defines the value of the component.
|
|
14
|
+
*/
|
|
15
|
+
this.value = input(/* @ts-ignore */
|
|
16
|
+
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ [])); // className is now passed
|
|
12
17
|
/**
|
|
13
18
|
* Available slots for content projection in this component.
|
|
14
19
|
*
|
|
@@ -52,6 +57,7 @@ class ToolbarSelectOption {
|
|
|
52
57
|
const wcElement = this.element;
|
|
53
58
|
const inputsToSync = [
|
|
54
59
|
'selected',
|
|
60
|
+
'value',
|
|
55
61
|
];
|
|
56
62
|
// Synchronize inputs (properties)
|
|
57
63
|
for (const inputName of inputsToSync) {
|
|
@@ -78,7 +84,7 @@ class ToolbarSelectOption {
|
|
|
78
84
|
}
|
|
79
85
|
}
|
|
80
86
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ToolbarSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
81
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: ToolbarSelectOption, isStandalone: true, selector: "ui5-toolbar-select-option, [ui5-toolbar-select-option]", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
87
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: ToolbarSelectOption, isStandalone: true, selector: "ui5-toolbar-select-option, [ui5-toolbar-select-option]", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
82
88
|
contentDensityObserverProviders({
|
|
83
89
|
supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]
|
|
84
90
|
})
|
|
@@ -98,7 +104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
98
104
|
],
|
|
99
105
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
100
106
|
}]
|
|
101
|
-
}], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }] } });
|
|
107
|
+
}], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
|
|
102
108
|
|
|
103
109
|
/**
|
|
104
110
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-toolbar-select-option.mjs","sources":["../../../../libs/ui5-webcomponents/toolbar-select-option/index.ts","../../../../libs/ui5-webcomponents/toolbar-select-option/fundamental-ngx-ui5-webcomponents-toolbar-select-option.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/ToolbarSelectOption.js';\nimport { default as _ToolbarSelectOption } from '@ui5/webcomponents/dist/ToolbarSelectOption.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-toolbar-select-option, [ui5-toolbar-select-option]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5ToolbarSelectOption',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToolbarSelectOption implements AfterViewInit {\n\n /**\n * Defines the selected state of the component.\n */\n selected = input(false, { transform: booleanAttribute }); // 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 text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n *\n * @example\n * ```html\n * <ui5-toolbar-select-option>\n * <div slot=\"header\">Custom header content</div>\n * <p>Default slot content</p>\n * </ui5-toolbar-select-option>\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 text of the component.\\n\\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\"\n }\n ];\n\n\n public elementRef: ElementRef<_ToolbarSelectOption> = 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(): _ToolbarSelectOption {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'selected',\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 // 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":";;;;;MAuCa,mBAAmB,CAAA;AAZhC,IAAA,WAAA,GAAA;AAcE;;AAEG;QACH,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"fundamental-ngx-ui5-webcomponents-toolbar-select-option.mjs","sources":["../../../../libs/ui5-webcomponents/toolbar-select-option/index.ts","../../../../libs/ui5-webcomponents/toolbar-select-option/fundamental-ngx-ui5-webcomponents-toolbar-select-option.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/ToolbarSelectOption.js';\nimport { default as _ToolbarSelectOption } from '@ui5/webcomponents/dist/ToolbarSelectOption.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-toolbar-select-option, [ui5-toolbar-select-option]',\n template: '<ng-content></ng-content>',\n exportAs: 'ui5ToolbarSelectOption',\n providers: [\n contentDensityObserverProviders({\n supportedContentDensity: [ContentDensityMode.COMPACT, ContentDensityMode.COZY]\n })\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ToolbarSelectOption implements AfterViewInit {\n\n /**\n * Defines the selected state of the component.\n */\n selected = input(false, { transform: booleanAttribute });\n\n /**\n * Defines the value of the component.\n */\n value = input<typeof _ToolbarSelectOption.prototype.value | undefined>(); // 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 text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n *\n * @example\n * ```html\n * <ui5-toolbar-select-option>\n * <div slot=\"header\">Custom header content</div>\n * <p>Default slot content</p>\n * </ui5-toolbar-select-option>\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 text of the component.\\n\\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\"\n }\n ];\n\n\n public elementRef: ElementRef<_ToolbarSelectOption> = 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(): _ToolbarSelectOption {\n return this.elementRef.nativeElement;\n }\n\n ngAfterViewInit(): void {\n const wcElement = this.element;\n \n const inputsToSync = [\n 'selected',\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 // 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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"}
|
|
@@ -7,11 +7,19 @@ class Toolbar {
|
|
|
7
7
|
constructor() {
|
|
8
8
|
/**
|
|
9
9
|
* Defines the accessible ARIA name of the component.
|
|
10
|
+
|
|
11
|
+
**Note:** It is strongly recommended to always set this property or `accessibleNameRef`
|
|
12
|
+
when the toolbar has `role="toolbar"` (i.e. when it contains more than one interactive item).
|
|
13
|
+
Without an accessible name, screen readers will announce the toolbar without any context,
|
|
14
|
+
making it harder for keyboard-only and AT users to understand its purpose.
|
|
10
15
|
*/
|
|
11
16
|
this.accessibleName = input(/* @ts-ignore */
|
|
12
17
|
...(ngDevMode ? [undefined, { debugName: "accessibleName" }] : /* istanbul ignore next */ []));
|
|
13
18
|
/**
|
|
14
19
|
* Receives id(or many ids) of the elements that label the input.
|
|
20
|
+
|
|
21
|
+
**Note:** When the toolbar has `role="toolbar"`, at least one of `accessibleName` or
|
|
22
|
+
`accessibleNameRef` should be provided to satisfy WCAG 2.1 success criterion 4.1.2.
|
|
15
23
|
*/
|
|
16
24
|
this.accessibleNameRef = input(/* @ts-ignore */
|
|
17
25
|
...(ngDevMode ? [undefined, { debugName: "accessibleNameRef" }] : /* istanbul ignore next */ []));
|