@fundamental-ngx/core 0.63.2-rc.4 → 0.63.2-rc.6
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-core-action-bar.mjs +27 -26
- package/fesm2022/fundamental-ngx-core-action-bar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-action-sheet.mjs +25 -22
- package/fesm2022/fundamental-ngx-core-action-sheet.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-avatar-group-legacy.mjs +35 -31
- package/fesm2022/fundamental-ngx-core-avatar-group-legacy.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-avatar-group.mjs +52 -43
- package/fesm2022/fundamental-ngx-core-avatar-group.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-avatar.mjs +67 -43
- package/fesm2022/fundamental-ngx-core-avatar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-bar.mjs +50 -41
- package/fesm2022/fundamental-ngx-core-bar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-breadcrumb.mjs +18 -14
- package/fesm2022/fundamental-ngx-core-breadcrumb.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-busy-indicator.mjs +34 -23
- package/fesm2022/fundamental-ngx-core-busy-indicator.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-button.mjs +56 -37
- package/fesm2022/fundamental-ngx-core-button.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-calendar.mjs +87 -62
- package/fesm2022/fundamental-ngx-core-calendar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-card.mjs +264 -188
- package/fesm2022/fundamental-ngx-core-card.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-carousel.mjs +35 -26
- package/fesm2022/fundamental-ngx-core-carousel.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-checkbox.mjs +7 -7
- package/fesm2022/fundamental-ngx-core-combobox.mjs +19 -18
- package/fesm2022/fundamental-ngx-core-combobox.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-content-density.mjs +46 -36
- package/fesm2022/fundamental-ngx-core-content-density.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-date-picker.mjs +13 -13
- package/fesm2022/fundamental-ngx-core-date-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-datetime-picker.mjs +15 -14
- package/fesm2022/fundamental-ngx-core-datetime-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-datetime.mjs +32 -31
- package/fesm2022/fundamental-ngx-core-datetime.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-dialog.mjs +116 -89
- package/fesm2022/fundamental-ngx-core-dialog.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-dynamic-page.mjs +100 -77
- package/fesm2022/fundamental-ngx-core-dynamic-page.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-dynamic-side-content.mjs +13 -13
- package/fesm2022/fundamental-ngx-core-facets.mjs +24 -20
- package/fesm2022/fundamental-ngx-core-facets.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-feed-input.mjs +18 -17
- package/fesm2022/fundamental-ngx-core-feed-input.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-feed-list-item.mjs +22 -22
- package/fesm2022/fundamental-ngx-core-file-uploader.mjs +16 -16
- package/fesm2022/fundamental-ngx-core-fixed-card-layout.mjs +17 -15
- package/fesm2022/fundamental-ngx-core-fixed-card-layout.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-flexible-column-layout.mjs +7 -7
- package/fesm2022/fundamental-ngx-core-form.mjs +74 -74
- package/fesm2022/fundamental-ngx-core-form.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-formatted-text.mjs +17 -12
- package/fesm2022/fundamental-ngx-core-formatted-text.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-generic-tag.mjs +19 -13
- package/fesm2022/fundamental-ngx-core-generic-tag.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-grid-list.mjs +56 -51
- package/fesm2022/fundamental-ngx-core-grid-list.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-icon.mjs +33 -20
- package/fesm2022/fundamental-ngx-core-icon.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-illustrated-message.mjs +42 -31
- package/fesm2022/fundamental-ngx-core-illustrated-message.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-infinite-scroll.mjs +11 -9
- package/fesm2022/fundamental-ngx-core-infinite-scroll.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-info-label.mjs +29 -18
- package/fesm2022/fundamental-ngx-core-info-label.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-inline-help.mjs +35 -25
- package/fesm2022/fundamental-ngx-core-inline-help.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-input-group.mjs +21 -21
- package/fesm2022/fundamental-ngx-core-input-group.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-layout-grid.mjs +40 -27
- package/fesm2022/fundamental-ngx-core-layout-grid.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-layout-panel.mjs +41 -37
- package/fesm2022/fundamental-ngx-core-layout-panel.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-link.mjs +24 -19
- package/fesm2022/fundamental-ngx-core-link.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-list.mjs +100 -91
- package/fesm2022/fundamental-ngx-core-list.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-menu.mjs +125 -101
- package/fesm2022/fundamental-ngx-core-menu.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-message-box.mjs +39 -38
- package/fesm2022/fundamental-ngx-core-message-box.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-message-page.mjs +19 -19
- package/fesm2022/fundamental-ngx-core-message-strip.mjs +79 -55
- package/fesm2022/fundamental-ngx-core-message-strip.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-message-toast.mjs +17 -17
- package/fesm2022/fundamental-ngx-core-message-toast.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-micro-process-flow.mjs +21 -20
- package/fesm2022/fundamental-ngx-core-micro-process-flow.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-mobile-mode.mjs +3 -3
- package/fesm2022/fundamental-ngx-core-multi-combobox.mjs +98 -66
- package/fesm2022/fundamental-ngx-core-multi-combobox.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-multi-input.mjs +27 -21
- package/fesm2022/fundamental-ngx-core-multi-input.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-nested-list.mjs +46 -43
- package/fesm2022/fundamental-ngx-core-nested-list.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-notification.mjs +178 -132
- package/fesm2022/fundamental-ngx-core-notification.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-attribute.mjs +7 -7
- package/fesm2022/fundamental-ngx-core-object-identifier.mjs +24 -17
- package/fesm2022/fundamental-ngx-core-object-identifier.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-marker.mjs +41 -24
- package/fesm2022/fundamental-ngx-core-object-marker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-number.mjs +33 -21
- package/fesm2022/fundamental-ngx-core-object-number.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-object-status.mjs +41 -26
- package/fesm2022/fundamental-ngx-core-object-status.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-overflow-layout.mjs +33 -32
- package/fesm2022/fundamental-ngx-core-overflow-layout.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-pagination.mjs +10 -10
- package/fesm2022/fundamental-ngx-core-pagination.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-panel.mjs +51 -35
- package/fesm2022/fundamental-ngx-core-panel.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-popover.mjs +267 -164
- package/fesm2022/fundamental-ngx-core-popover.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-product-switch.mjs +46 -32
- package/fesm2022/fundamental-ngx-core-product-switch.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-progress-indicator.mjs +7 -7
- package/fesm2022/fundamental-ngx-core-quick-view.mjs +47 -44
- package/fesm2022/fundamental-ngx-core-quick-view.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-radio.mjs +8 -8
- package/fesm2022/fundamental-ngx-core-radio.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-rating-indicator.mjs +61 -39
- package/fesm2022/fundamental-ngx-core-rating-indicator.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-resizable-card-layout.mjs +12 -11
- package/fesm2022/fundamental-ngx-core-resizable-card-layout.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-scroll-spy.mjs +17 -12
- package/fesm2022/fundamental-ngx-core-scroll-spy.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-scrollbar.mjs +14 -12
- package/fesm2022/fundamental-ngx-core-scrollbar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-segmented-button.mjs +9 -8
- package/fesm2022/fundamental-ngx-core-segmented-button.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-select.mjs +22 -21
- package/fesm2022/fundamental-ngx-core-select.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-settings.mjs +70 -60
- package/fesm2022/fundamental-ngx-core-settings.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-shared.mjs +3 -3
- package/fesm2022/fundamental-ngx-core-shellbar.mjs +77 -63
- package/fesm2022/fundamental-ngx-core-shellbar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-side-navigation.mjs +13 -13
- package/fesm2022/fundamental-ngx-core-skeleton.mjs +24 -16
- package/fesm2022/fundamental-ngx-core-skeleton.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-slider.mjs +15 -13
- package/fesm2022/fundamental-ngx-core-slider.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-split-button.mjs +10 -10
- package/fesm2022/fundamental-ngx-core-status-indicator.mjs +62 -35
- package/fesm2022/fundamental-ngx-core-status-indicator.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-step-input.mjs +11 -9
- package/fesm2022/fundamental-ngx-core-step-input.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-switch.mjs +8 -8
- package/fesm2022/fundamental-ngx-core-switch.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-table.mjs +51 -50
- package/fesm2022/fundamental-ngx-core-table.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-tabs.mjs +56 -55
- package/fesm2022/fundamental-ngx-core-tabs.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-text.mjs +29 -19
- package/fesm2022/fundamental-ngx-core-text.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-theming.mjs +7 -7
- package/fesm2022/fundamental-ngx-core-tile.mjs +171 -136
- package/fesm2022/fundamental-ngx-core-tile.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-time-picker.mjs +9 -8
- package/fesm2022/fundamental-ngx-core-time-picker.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-time.mjs +16 -13
- package/fesm2022/fundamental-ngx-core-time.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-timeline.mjs +43 -43
- package/fesm2022/fundamental-ngx-core-title.mjs +12 -10
- package/fesm2022/fundamental-ngx-core-title.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-token.mjs +33 -24
- package/fesm2022/fundamental-ngx-core-token.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-toolbar.mjs +35 -32
- package/fesm2022/fundamental-ngx-core-toolbar.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-tree.mjs +41 -36
- package/fesm2022/fundamental-ngx-core-tree.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-upload-collection.mjs +37 -37
- package/fesm2022/fundamental-ngx-core-upload-collection.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-user-menu.mjs +108 -84
- package/fesm2022/fundamental-ngx-core-user-menu.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-vertical-navigation.mjs +20 -17
- package/fesm2022/fundamental-ngx-core-vertical-navigation.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core-wizard.mjs +41 -32
- package/fesm2022/fundamental-ngx-core-wizard.mjs.map +1 -1
- package/fesm2022/fundamental-ngx-core.mjs +4 -4
- package/package.json +11 -10
- package/schematics/add-styles/index.js +3 -3
- package/schematics/add-styles/index.js.map +1 -1
- package/schematics/add-theming/index.js +1 -1
- package/schematics/add-theming/index.js.map +1 -1
- package/schematics/package.json +7 -0
- package/schematics/tsconfig.json +12 -6
- package/schematics/tsconfig.spec.json +2 -0
- package/schematics/utils/calls-providers-function.js +34 -1
- package/schematics/utils/calls-providers-function.js.map +1 -1
- package/schematics/utils/ng-module-utils.js +34 -1
- package/schematics/utils/ng-module-utils.js.map +1 -1
- package/types/fundamental-ngx-core-avatar-group-legacy.d.ts +1 -0
- package/types/fundamental-ngx-core-carousel.d.ts +2 -0
- package/types/fundamental-ngx-core-list.d.ts +2 -2
- package/types/fundamental-ngx-core-menu.d.ts +4 -4
- package/types/fundamental-ngx-core-notification.d.ts +0 -2
- package/types/fundamental-ngx-core-popover.d.ts +8 -6
- package/types/fundamental-ngx-core-product-switch.d.ts +6 -3
- package/types/fundamental-ngx-core-wizard.d.ts +4 -1
|
@@ -39,8 +39,8 @@ class TokenizerInputDirective {
|
|
|
39
39
|
ngOnChanges() {
|
|
40
40
|
this.buildComponentCssClass();
|
|
41
41
|
}
|
|
42
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
43
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
42
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TokenizerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
43
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: TokenizerInputDirective, isStandalone: true, selector: "[fdTokenizerInput], [fd-tokenizer-input]", inputs: { class: "class" }, usesOnChanges: true, ngImport: i0 }); }
|
|
44
44
|
}
|
|
45
45
|
__decorate([
|
|
46
46
|
applyCssClass,
|
|
@@ -48,7 +48,7 @@ __decorate([
|
|
|
48
48
|
__metadata("design:paramtypes", []),
|
|
49
49
|
__metadata("design:returntype", Array)
|
|
50
50
|
], TokenizerInputDirective.prototype, "buildComponentCssClass", null);
|
|
51
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
51
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TokenizerInputDirective, decorators: [{
|
|
52
52
|
type: Directive,
|
|
53
53
|
args: [{
|
|
54
54
|
selector: '[fdTokenizerInput], [fd-tokenizer-input]',
|
|
@@ -65,11 +65,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
65
65
|
class TokenComponent {
|
|
66
66
|
constructor() {
|
|
67
67
|
/** @hidden */
|
|
68
|
-
this.tokenWrapperElement = viewChild('tokenWrapperElement',
|
|
68
|
+
this.tokenWrapperElement = viewChild('tokenWrapperElement', /* @ts-ignore */
|
|
69
|
+
...(ngDevMode ? [{ debugName: "tokenWrapperElement" }] : /* istanbul ignore next */ []));
|
|
69
70
|
/** @hidden */
|
|
70
|
-
this._content = viewChild('content',
|
|
71
|
+
this._content = viewChild('content', /* @ts-ignore */
|
|
72
|
+
...(ngDevMode ? [{ debugName: "_content" }] : /* istanbul ignore next */ []));
|
|
71
73
|
/** @hidden */
|
|
72
|
-
this._viewContainer = viewChild('viewContainer', { ...(ngDevMode ? { debugName: "_viewContainer" } : {}), read: ViewContainerRef });
|
|
74
|
+
this._viewContainer = viewChild('viewContainer', { ...(ngDevMode ? { debugName: "_viewContainer" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
|
|
73
75
|
/** Emitted when the *x* icon is clicked. Specifically, any pseudo-element. */
|
|
74
76
|
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
|
|
75
77
|
this.onCloseClick = output();
|
|
@@ -85,15 +87,19 @@ class TokenComponent {
|
|
|
85
87
|
/** Emitted when token element received or lost focus. */
|
|
86
88
|
this.elementFocused = output();
|
|
87
89
|
/** Whether the token is disabled. */
|
|
88
|
-
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
90
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
89
91
|
/** Whether the token is selected. Supports two-way binding via [(selected)]. */
|
|
90
|
-
this.selected = model(false,
|
|
92
|
+
this.selected = model(false, /* @ts-ignore */
|
|
93
|
+
...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
91
94
|
/** Whether the token is read-only. */
|
|
92
|
-
this.readOnly = input(false,
|
|
95
|
+
this.readOnly = input(false, /* @ts-ignore */
|
|
96
|
+
...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
|
|
93
97
|
/** @hidden Internal signal for total count (set by tokenizer) */
|
|
94
|
-
this._totalCount = signal(undefined,
|
|
98
|
+
this._totalCount = signal(undefined, /* @ts-ignore */
|
|
99
|
+
...(ngDevMode ? [{ debugName: "_totalCount" }] : /* istanbul ignore next */ []));
|
|
95
100
|
/** @hidden Internal signal for item position (set by tokenizer) */
|
|
96
|
-
this._itemPosition = signal(undefined,
|
|
101
|
+
this._itemPosition = signal(undefined, /* @ts-ignore */
|
|
102
|
+
...(ngDevMode ? [{ debugName: "_itemPosition" }] : /* istanbul ignore next */ []));
|
|
97
103
|
/** @hidden */
|
|
98
104
|
this.elementRef = inject(ElementRef);
|
|
99
105
|
/** @hidden */
|
|
@@ -147,10 +153,10 @@ class TokenComponent {
|
|
|
147
153
|
this._totalCount.set(count);
|
|
148
154
|
this._itemPosition.set(itemPosition);
|
|
149
155
|
}
|
|
150
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
151
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TokenComponent, isStandalone: true, selector: "fd-token", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCloseClick: "onCloseClick", onRemove: "onRemove", onTokenClick: "onTokenClick", onTokenKeydown: "onTokenKeydown", elementFocused: "elementFocused", selected: "selectedChange" }, host: { properties: { "style.max-width.%": "100" } }, providers: [contentDensityObserverProviders()], viewQueries: [{ propertyName: "tokenWrapperElement", first: true, predicate: ["tokenWrapperElement"], descendants: true, isSignal: true }, { propertyName: "_content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "_viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<span\n #tokenWrapperElement\n class=\"fd-token\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"('coreToken.ariaRoleDescription' | fdTranslate)()\"\n (click)=\"tokenClickHandler($event)\"\n (keydown)=\"tokenKeydownHandler($event)\"\n [attr.aria-setsize]=\"_totalCount()\"\n [attr.aria-posinset]=\"_itemPosition()\"\n [class.fd-token__disabled]=\"disabled()\"\n [class.fd-token--selected]=\"selected()\"\n [class.fd-token--readonly]=\"readOnly()\"\n [attr.aria-selected]=\"selected()\"\n>\n <span class=\"fd-token__text no-text-select\">\n <ng-container #viewContainer></ng-container>\n </span>\n @if (!readOnly()) {\n <span\n (click)=\"closeClickHandler($event)\"\n role=\"button\"\n [attr.aria-label]=\"('coreToken.deleteButtonLabel' | fdTranslate)()\"\n class=\"fd-token__close\"\n ></span>\n }\n</span>\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".fd-token{--fdToken_Background_Color:var(--sapButton_TokenBackground);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);--fdToken_Padding_Inline:.3125rem 0;--fdToken_Height:1.625rem;--fdToken_Min_Width:3.625rem;--fdToken_Close_Color:var(--sapContent_IconColor);--fdToken_Close_Padding_Block:.25rem;--fdToken_Close_Padding_Inline:.5rem;--fdToken_Close_Width:1.75rem;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);cursor:default;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;background-color:var(--fdToken_Background_Color);border:var(--fdToken_Border);border-radius:var(--fdToken_Border_Radius);color:var(--fdToken_Text_Color);flex-shrink:0;font-size:var(--sapFontSize);height:var(--fdToken_Height);line-height:1.5rem;max-width:100%;min-width:var(--fdToken_Min_Width);padding-inline:var(--fdToken_Padding_Inline);text-align:center;text-overflow:clip;white-space:nowrap}.fd-token:after,.fd-token:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-token__text{max-width:100%;min-width:auto;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--fdToken_Text_Shadow);width:100%}.fd-token__close{background-color:transparent;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdToken_Close_Color);cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;height:var(--fdToken_Height);line-height:normal;line-height:1.25rem;margin-block:0;margin-inline:0;min-width:var(--fdToken_Close_Width);padding-block:0;padding-block:var(--fdToken_Close_Padding_Block);padding-inline:0;padding-inline:var(--fdToken_Close_Padding_Inline);width:var(--fdToken_Close_Width);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.fd-token__close:after,.fd-token__close:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-token__close:before{content:\"\\e03e\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-token__close.is-focus,.fd-token__close:focus{-webkit-box-shadow:none;box-shadow:none;outline:none;z-index:5}.fd-token.is-hover,.fd-token:hover{--fdToken_Background_Color:var(--fdToken_Background_Color_Hover);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Hover)}.fd-token.is-focus,.fd-token:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdToken_Outline_Offset);--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius)}.fd-token[class*=-compact],.fd-token[class*=-condensed],[class*=-compact] .fd-token:not([class*=-cozy]),[class*=-condensed] .fd-token:not([class*=-cozy]){--fdToken_Padding_Inline:.25rem 0;--fdToken_Height:1.25rem;--fdToken_Close_Padding_Block:.125rem;--fdToken_Close_Padding_Inline:.25rem;--fdToken_Close_Width:1.25rem;line-height:1.125rem;min-width:3rem}.fd-token[class*=-compact].is-focus,.fd-token[class*=-compact]:focus,.fd-token[class*=-condensed].is-focus,.fd-token[class*=-condensed]:focus,[class*=-compact] .fd-token:not([class*=-cozy]).is-focus,[class*=-compact] .fd-token:not([class*=-cozy]):focus,[class*=-condensed] .fd-token:not([class*=-cozy]).is-focus,[class*=-condensed] .fd-token:not([class*=-cozy]):focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdToken_Outline_Offset);--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);outline-offset:var(--fdToken_Outline_Offset_Compact)}.fd-token--disabled{cursor:not-allowed}.fd-token--readonly{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Padding_Inline:var(--fdToken_ReadOnly_Padding_Inline);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);--fdToken_Background_Color:var(--fdToken_Background_Color_Read_Only)}.fd-token--readonly[class*=-compact],.fd-token--readonly[class*=-condensed],[class*=-compact] .fd-token--readonly:not([class*=-cozy]),[class*=-condensed] .fd-token--readonly:not([class*=-cozy]){--fdToken_Padding_Inline:.25rem}.fd-token--readonly.is-hover,.fd-token--readonly:hover{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);--fdToken_Background_Color:var(--fdToken_Background_Color_Read_Only)}.fd-token--display{--fdToken_Text_Color:var(--sapTextColor);--fdToken_Border:none;--fdToken_Background_Color:transparent;--fdToken_Min_Width:fit-content;margin-inline:0;padding-inline:0;pointer-events:none;text-align:start}.fd-token--selected{--fdToken_Text_Color:var(--sapButton_Selected_TextColor);--fdToken_Background_Color:var(--sapButton_Selected_Background);--fdToken_Border:var(--fdToken_Selected_Border);--fdToken_Padding_Inline:.3125rem 0;background:var(--fdToken_Selected_Border_BottomStyle);font-family:var(--fdToken_Selected_Font_Family);position:relative}.fd-token--selected.fd-token--readonly{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Padding_Inline:var(--fdToken_ReadOnly_Padding_Inline);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);--fdToken_Background_Color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected.fd-token--readonly[class*=-compact],.fd-token--selected.fd-token--readonly[class*=-condensed],[class*=-compact] .fd-token--selected.fd-token--readonly:not([class*=-cozy]),[class*=-condensed] .fd-token--selected.fd-token--readonly:not([class*=-cozy]){--fdToken_Padding_Inline:.25rem}.fd-token--selected.fd-token--readonly.is-hover,.fd-token--selected.fd-token--readonly:hover{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);--fdToken_Background_Color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected .fd-token__close{--fdToken_Close_Color:var(--sapButton_Selected_TextColor)}.fd-token--selected.is-hover,.fd-token--selected:hover{background-color:var(--sapButton_Selected_Hover_Background);--fdToken_Border:var(--fdToken_Selected_Border)}.fd-token--selected.is-focus,.fd-token--selected:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdToken_Outline_Offset);--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);outline-color:var(--fdToken_Border_Color_Selected_Focus);--fdToken_Border:var(--fdToken_Selected_Border)}fd-token{display:inline-flex}.fd-token__disabled:after{cursor:not-allowed}.no-text-select{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}\n/*! Bundled license information:\n\nfundamental-styles/dist/token.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
156
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TokenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
157
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TokenComponent, isStandalone: true, selector: "fd-token", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCloseClick: "onCloseClick", onRemove: "onRemove", onTokenClick: "onTokenClick", onTokenKeydown: "onTokenKeydown", elementFocused: "elementFocused", selected: "selectedChange" }, host: { properties: { "style.max-width.%": "100" } }, providers: [contentDensityObserverProviders()], viewQueries: [{ propertyName: "tokenWrapperElement", first: true, predicate: ["tokenWrapperElement"], descendants: true, isSignal: true }, { propertyName: "_content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "_viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<span\n #tokenWrapperElement\n class=\"fd-token\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-roledescription]=\"('coreToken.ariaRoleDescription' | fdTranslate)()\"\n (click)=\"tokenClickHandler($event)\"\n (keydown)=\"tokenKeydownHandler($event)\"\n [attr.aria-setsize]=\"_totalCount()\"\n [attr.aria-posinset]=\"_itemPosition()\"\n [class.fd-token__disabled]=\"disabled()\"\n [class.fd-token--selected]=\"selected()\"\n [class.fd-token--readonly]=\"readOnly()\"\n [attr.aria-selected]=\"selected()\"\n>\n <span class=\"fd-token__text no-text-select\">\n <ng-container #viewContainer></ng-container>\n </span>\n @if (!readOnly()) {\n <span\n (click)=\"closeClickHandler($event)\"\n role=\"button\"\n [attr.aria-label]=\"('coreToken.deleteButtonLabel' | fdTranslate)()\"\n class=\"fd-token__close\"\n ></span>\n }\n</span>\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".fd-token{--fdToken_Background_Color:var(--sapButton_TokenBackground);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);--fdToken_Padding_Inline:.3125rem 0;--fdToken_Height:1.625rem;--fdToken_Min_Width:3.625rem;--fdToken_Close_Color:var(--sapContent_IconColor);--fdToken_Close_Padding_Block:.25rem;--fdToken_Close_Padding_Inline:.5rem;--fdToken_Close_Width:1.75rem;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);cursor:default;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;background-color:var(--fdToken_Background_Color);border:var(--fdToken_Border);border-radius:var(--fdToken_Border_Radius);color:var(--fdToken_Text_Color);flex-shrink:0;font-size:var(--sapFontSize);height:var(--fdToken_Height);line-height:1.5rem;max-width:100%;min-width:var(--fdToken_Min_Width);padding-inline:var(--fdToken_Padding_Inline);text-align:center;text-overflow:clip;white-space:nowrap}.fd-token:after,.fd-token:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-token__text{max-width:100%;min-width:auto;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--fdToken_Text_Shadow);width:100%}.fd-token__close{background-color:transparent;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdToken_Close_Color);cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;height:var(--fdToken_Height);line-height:normal;line-height:1.25rem;margin-block:0;margin-inline:0;min-width:var(--fdToken_Close_Width);padding-block:0;padding-block:var(--fdToken_Close_Padding_Block);padding-inline:0;padding-inline:var(--fdToken_Close_Padding_Inline);width:var(--fdToken_Close_Width);-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.fd-token__close:after,.fd-token__close:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-token__close:before{content:\"\\e03e\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-token__close.is-focus,.fd-token__close:focus{-webkit-box-shadow:none;box-shadow:none;outline:none;z-index:5}.fd-token.is-hover,.fd-token:hover{--fdToken_Background_Color:var(--fdToken_Background_Color_Hover);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Hover)}.fd-token.is-focus,.fd-token:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdToken_Outline_Offset);--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius)}.fd-token[class*=-compact],.fd-token[class*=-condensed],[class*=-compact] .fd-token:not([class*=-cozy]),[class*=-condensed] .fd-token:not([class*=-cozy]){--fdToken_Padding_Inline:.25rem 0;--fdToken_Height:1.25rem;--fdToken_Close_Padding_Block:.125rem;--fdToken_Close_Padding_Inline:.25rem;--fdToken_Close_Width:1.25rem;line-height:1.125rem;min-width:3rem}.fd-token[class*=-compact].is-focus,.fd-token[class*=-compact]:focus,.fd-token[class*=-condensed].is-focus,.fd-token[class*=-condensed]:focus,[class*=-compact] .fd-token:not([class*=-cozy]).is-focus,[class*=-compact] .fd-token:not([class*=-cozy]):focus,[class*=-condensed] .fd-token:not([class*=-cozy]).is-focus,[class*=-condensed] .fd-token:not([class*=-cozy]):focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdToken_Outline_Offset);--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);outline-offset:var(--fdToken_Outline_Offset_Compact)}.fd-token--disabled{cursor:not-allowed}.fd-token--readonly{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Padding_Inline:var(--fdToken_ReadOnly_Padding_Inline);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);--fdToken_Background_Color:var(--fdToken_Background_Color_Read_Only)}.fd-token--readonly[class*=-compact],.fd-token--readonly[class*=-condensed],[class*=-compact] .fd-token--readonly:not([class*=-cozy]),[class*=-condensed] .fd-token--readonly:not([class*=-cozy]){--fdToken_Padding_Inline:.25rem}.fd-token--readonly.is-hover,.fd-token--readonly:hover{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);--fdToken_Background_Color:var(--fdToken_Background_Color_Read_Only)}.fd-token--display{--fdToken_Text_Color:var(--sapTextColor);--fdToken_Border:none;--fdToken_Background_Color:transparent;--fdToken_Min_Width:fit-content;margin-inline:0;padding-inline:0;pointer-events:none;text-align:start}.fd-token--selected{--fdToken_Text_Color:var(--sapButton_Selected_TextColor);--fdToken_Background_Color:var(--sapButton_Selected_Background);--fdToken_Border:var(--fdToken_Selected_Border);--fdToken_Padding_Inline:.3125rem 0;background:var(--fdToken_Selected_Border_BottomStyle);font-family:var(--fdToken_Selected_Font_Family);position:relative}.fd-token--selected.fd-token--readonly{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Padding_Inline:var(--fdToken_ReadOnly_Padding_Inline);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);--fdToken_Background_Color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected.fd-token--readonly[class*=-compact],.fd-token--selected.fd-token--readonly[class*=-condensed],[class*=-compact] .fd-token--selected.fd-token--readonly:not([class*=-cozy]),[class*=-condensed] .fd-token--selected.fd-token--readonly:not([class*=-cozy]){--fdToken_Padding_Inline:.25rem}.fd-token--selected.fd-token--readonly.is-hover,.fd-token--selected.fd-token--readonly:hover{--fdToken_Text_Color:var(--sapContent_LabelColor);--fdToken_Border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);--fdToken_Background_Color:var(--fdToken_Background_Color_Read_Only)}.fd-token--selected .fd-token__close{--fdToken_Close_Color:var(--sapButton_Selected_TextColor)}.fd-token--selected.is-hover,.fd-token--selected:hover{background-color:var(--sapButton_Selected_Hover_Background);--fdToken_Border:var(--fdToken_Selected_Border)}.fd-token--selected.is-focus,.fd-token--selected:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdToken_Outline_Offset);--fdToken_Border_Radius:var(--fdToken_Focus_Border_Radius);outline-color:var(--fdToken_Border_Color_Selected_Focus);--fdToken_Border:var(--fdToken_Selected_Border)}fd-token{display:inline-flex}.fd-token__disabled:after{cursor:not-allowed}.no-text-select{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}\n/*! Bundled license information:\n\nfundamental-styles/dist/token.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
152
158
|
}
|
|
153
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
159
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TokenComponent, decorators: [{
|
|
154
160
|
type: Component,
|
|
155
161
|
args: [{ selector: 'fd-token', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], host: {
|
|
156
162
|
'[style.max-width.%]': '100'
|
|
@@ -191,7 +197,8 @@ class TokenizerComponent {
|
|
|
191
197
|
/** Number of tokens the consumer chose not to render (e.g., from count-based virtualization).
|
|
192
198
|
* When > 0, the tokenizer adds this to its own width-hidden count in the "+N more" label,
|
|
193
199
|
* and suppresses its internal overflow popover (consumer should handle "show me" via moreClickedEvent). */
|
|
194
|
-
this.externalHiddenCount = input(0,
|
|
200
|
+
this.externalHiddenCount = input(0, /* @ts-ignore */
|
|
201
|
+
...(ngDevMode ? [{ debugName: "externalHiddenCount" }] : /* istanbul ignore next */ []));
|
|
195
202
|
/** @hidden */
|
|
196
203
|
this.moreTokensLeft = [];
|
|
197
204
|
/** @hidden */
|
|
@@ -203,9 +210,11 @@ class TokenizerComponent {
|
|
|
203
210
|
/** @hidden Used to add focus to tokenizer element */
|
|
204
211
|
this._tokenizerHasFocus = false;
|
|
205
212
|
/** @hidden */
|
|
206
|
-
this._showMoreElement = linkedSignal(() => this.externalHiddenCount() > 0,
|
|
213
|
+
this._showMoreElement = linkedSignal(() => this.externalHiddenCount() > 0, /* @ts-ignore */
|
|
214
|
+
...(ngDevMode ? [{ debugName: "_showMoreElement" }] : /* istanbul ignore next */ []));
|
|
207
215
|
/** Whether tokenizer's own width-collapse "+N more" span is currently rendered. */
|
|
208
|
-
this.hasInternalOverflowIndicator = computed(() => this._showMoreElement() && this._hiddenTokens.length + this.externalHiddenCount() > 0,
|
|
216
|
+
this.hasInternalOverflowIndicator = computed(() => this._showMoreElement() && this._hiddenTokens.length + this.externalHiddenCount() > 0, /* @ts-ignore */
|
|
217
|
+
...(ngDevMode ? [{ debugName: "hasInternalOverflowIndicator" }] : /* istanbul ignore next */ []));
|
|
209
218
|
/** @hidden */
|
|
210
219
|
this._tokensContainerWidth = 'auto';
|
|
211
220
|
/** @hidden */
|
|
@@ -815,8 +824,8 @@ class TokenizerComponent {
|
|
|
815
824
|
this._showMoreElement.set(showMoreElement);
|
|
816
825
|
this._cdRef.detectChanges();
|
|
817
826
|
}
|
|
818
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
819
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TokenizerComponent, isStandalone: true, selector: "fd-tokenizer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: false, isRequired: false, transformFunction: null }, disableKeyboardDeletion: { classPropertyName: "disableKeyboardDeletion", publicName: "disableKeyboardDeletion", isSignal: false, isRequired: false, transformFunction: null }, compactCollapse: { classPropertyName: "compactCollapse", publicName: "compactCollapse", isSignal: false, isRequired: false, transformFunction: null }, tokenizerFocusable: { classPropertyName: "tokenizerFocusable", publicName: "tokenizerFocusable", isSignal: false, isRequired: false, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: false, isRequired: false, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: false, isRequired: false, transformFunction: null }, glyphFont: { classPropertyName: "glyphFont", publicName: "glyphFont", isSignal: false, isRequired: false, transformFunction: null }, moreTerm: { classPropertyName: "moreTerm", publicName: "moreTerm", isSignal: false, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: false, isRequired: false, transformFunction: null }, showOverflowPopover: { classPropertyName: "showOverflowPopover", publicName: "showOverflowPopover", isSignal: false, isRequired: false, transformFunction: null }, externalHiddenCount: { classPropertyName: "externalHiddenCount", publicName: "externalHiddenCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { moreClickedEvent: "moreClickedEvent" }, host: { listeners: { "keydown": "keyDown($event)" } }, providers: [contentDensityObserverProviders()], queries: [{ propertyName: "input", first: true, predicate: i0.forwardRef(() => FormControlComponent), descendants: true, read: ElementRef }, { propertyName: "tokenList", predicate: i0.forwardRef(() => TokenComponent) }], viewQueries: [{ propertyName: "tokenizerInnerEl", first: true, predicate: ["tokenizerInner"], descendants: true }, { propertyName: "moreElement", first: true, predicate: ["moreElementSpan"], descendants: true }, { propertyName: "content", first: true, predicate: ["inputGroupAddOn"], descendants: true }, { propertyName: "_viewContainer", predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fd-tokenizer fd-tokenizer--scrollable\" [class.is-focus]=\"_tokenizerHasFocus\">\n <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n <div\n [attr.aria-hidden]=\"tokenList.length === 0\"\n role=\"listbox\"\n [attr.aria-label]=\"('coreTokenizer.tokenizerLabel' | fdTranslate)()\"\n [style.width]=\"_tokensContainerWidth\"\n >\n <ng-content select=\"fd-token\"></ng-content>\n </div>\n @if (\n showOverflowPopover &&\n (_contentDensityObserver.isCompactSignal() || compactCollapse) &&\n externalHiddenCount() === 0\n ) {\n <ng-template [ngTemplateOutlet]=\"tokensOverflow\"></ng-template>\n } @else {\n @if (\n hasInternalOverflowIndicator() &&\n moreTokensLeft.length + moreTokensRight.length + hiddenCozyTokenCount + externalHiddenCount() > 0\n ) {\n <span\n (click)=\"moreClicked()\"\n (keydown.enter)=\"moreClicked()\"\n (keydown.space)=\"$event.preventDefault(); moreClicked()\"\n #moreElementSpan\n class=\"fd-tokenizer-more\"\n role=\"button\"\n tabindex=\"0\"\n >\n @if (_contentDensityObserver.isCompactSignal() || compactCollapse) {\n {{\n (\n 'coreTokenizer.moreLabel'\n | fdTranslate\n : { count: moreTokensLeft.length + moreTokensRight.length + externalHiddenCount() }\n )()\n }}\n }\n @if (!_contentDensityObserver.isCompactSignal() && !compactCollapse) {\n {{\n (\n 'coreTokenizer.moreLabel'\n | fdTranslate: { count: hiddenCozyTokenCount + externalHiddenCount() }\n )()\n }}\n }\n </span>\n }\n }\n <ng-content select=\"[fd-tokenizer-extra]\"></ng-content>\n <ng-content select=\"[fd-form-control]\"></ng-content>\n </div>\n @if (glyph) {\n <span fd-input-group-addon #inputGroupAddOn [button]=\"true\" placement=\"after\">\n <button\n fd-button\n class=\"fd-tokenizer-addon\"\n fdType=\"transparent\"\n [glyph]=\"glyph\"\n [glyphFont]=\"glyphFont\"\n type=\"button\"\n ></button>\n </span>\n }\n</div>\n<ng-template #tokensOverflow>\n <fd-popover placement=\"bottom-start\" title=\"\" [noArrow]=\"false\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"moreElement\"></ng-template>\n </fd-popover-control>\n <fd-popover-body>\n <ul fd-list class=\"fd-tokenizer__overflow-list\">\n @for (token of _hiddenTokens; track token) {\n <li fd-list-item class=\"fd-tokenizer__overflow-list-item\">\n <ng-container #viewContainer></ng-container>\n @if (!token.readOnly) {\n <span\n class=\"fd-token__close\"\n role=\"button\"\n [attr.aria-label]=\"('coreToken.deleteButtonLabel' | fdTranslate)()\"\n (click)=\"token.closeClickHandler($event)\"\n ></span>\n }\n </li>\n }\n </ul>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n<ng-template #moreElement>\n @if (\n hasInternalOverflowIndicator() &&\n moreTokensLeft.length + moreTokensRight.length + hiddenCozyTokenCount + externalHiddenCount() > 0\n ) {\n <span\n (click)=\"moreClicked()\"\n (keydown.enter)=\"moreClicked()\"\n (keydown.space)=\"$event.preventDefault(); moreClicked()\"\n #moreElementSpan\n class=\"fd-tokenizer-more\"\n role=\"button\"\n tabindex=\"0\"\n >\n @if (_contentDensityObserver.isCompactSignal() || compactCollapse) {\n {{\n (\n 'coreTokenizer.moreLabel'\n | fdTranslate: { count: moreTokensLeft.length + moreTokensRight.length + externalHiddenCount() }\n )()\n }}\n }\n @if (!_contentDensityObserver.isCompactSignal() && !compactCollapse) {\n {{\n ('coreTokenizer.moreLabel' | fdTranslate: { count: hiddenCozyTokenCount + externalHiddenCount() })()\n }}\n }\n </span>\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.fd-tokenizer{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--sapField_BackgroundStyle,var(--sapField_BackgroundStyle));background-color:var(--sapField_Background,var(--sapField_Background));border:none;border-radius:var(--sapField_BorderCornerRadius);-webkit-box-shadow:var(--sapField_Shadow);box-shadow:var(--sapField_Shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdInput_Height,var(--sapElement_Height));line-height:normal;margin-block:var(--fdInput_Field_Margin_Block,.25rem);margin-block:0;margin-inline:0;min-height:var(--fdInput_Height,var(--sapElement_Height));min-width:2.75rem;outline:none;overflow:hidden;padding-block:0;padding-inline:var(--fdInput_Field_Padding_Inline,.625rem);padding-inline:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-tokenizer:after,.fd-tokenizer:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tokenizer::-webkit-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::-moz-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer:-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer[dir=rtl]::-webkit-input-placeholder,[dir=rtl] .fd-tokenizer::-webkit-input-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]::-moz-placeholder,[dir=rtl] .fd-tokenizer::-moz-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]:-ms-input-placeholder,[dir=rtl] .fd-tokenizer:-ms-input-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]::-ms-input-placeholder,[dir=rtl] .fd-tokenizer::-ms-input-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]::placeholder,[dir=rtl] .fd-tokenizer::placeholder{text-indent:.125rem}.fd-tokenizer::-moz-selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-tokenizer::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-tokenizer::-ms-clear{display:none}.fd-tokenizer.is-hover,.fd-tokenizer:hover{background:var(--sapField_Hover_BackgroundStyle,var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background,var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-tokenizer.is-focus,.fd-tokenizer:focus{background:var(--sapField_Focus_Background,var(--sapField_Focus_Background));outline:var(--fdInput_Outline_Color) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdInput_Outline_Offset)}.fd-tokenizer.is-hover,.fd-tokenizer:hover{-webkit-box-shadow:none;box-shadow:none}.fd-tokenizer__inner{-ms-overflow-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;float:right;height:100%;overflow:hidden;padding-block:0;padding-inline:var(--fdTokenizer_Inner_Padding,.3125rem);scrollbar-width:none;white-space:nowrap;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.fd-tokenizer__inner::-webkit-scrollbar{display:none}.fd-tokenizer .fd-token{-webkit-margin-end:.3125rem;margin-inline-end:.3125rem;max-width:calc(100% - 3.3125rem)}.fd-tokenizer__indicator{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdTokenizer_Indicator_Color);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-tokenizer__indicator:after,.fd-tokenizer__indicator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tokenizer .fd-tokenizer__input{background:transparent;-webkit-box-shadow:none;box-shadow:none;height:100%;min-height:100%}.fd-tokenizer .fd-tokenizer__input.fd-input{border:none;min-width:3rem;padding-block:0;padding-inline:0}.fd-tokenizer .fd-tokenizer__input:first-child{padding-block:0;padding-inline:.3125rem}.fd-tokenizer .fd-tokenizer__input:last-child{-ms-flex-preferred-size:100%;flex-basis:100%}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input:focus{background:none;background-color:transparent;border:none;-webkit-box-shadow:none;box-shadow:none;outline:none;z-index:5}.fd-tokenizer .fd-tokenizer__input.is-hover,.fd-tokenizer .fd-tokenizer__input:hover{background:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.fd-tokenizer.is-focus,.fd-tokenizer:focus{border:none;-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.0625rem;z-index:5}.fd-tokenizer[class*=-compact],.fd-tokenizer[class*=-condensed],[class*=-compact] .fd-tokenizer:not([class*=-cozy]),[class*=-condensed] .fd-tokenizer:not([class*=-cozy]){height:1.625rem;min-height:1.625rem;--fdTokenizer_Inner_Padding:.25rem;--fdInput_Field_Compact_Min_Width:2rem}.fd-tokenizer[class*=-compact] .fd-tokenizer__input:first-child,.fd-tokenizer[class*=-condensed] .fd-tokenizer__input:first-child,[class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-tokenizer__input:first-child,[class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-tokenizer__input:first-child{padding-block:0;padding-inline:.25rem}.fd-tokenizer[class*=-compact] .fd-token,.fd-tokenizer[class*=-condensed] .fd-token,[class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-token,[class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-token{-webkit-margin-end:.25rem;margin-inline-end:.25rem;max-width:calc(100% - 2.25rem)}.fd-tokenizer--readonly{background-color:var(--sapField_ReadOnly_Background);overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__inner{overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true],.fd-tokenizer--readonly .fd-tokenizer__input[readonly]{background:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly.is-focus,.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly:focus,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true].is-focus,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true]:focus,.fd-tokenizer--readonly .fd-tokenizer__input[readonly].is-focus,.fd-tokenizer--readonly .fd-tokenizer__input[readonly]:focus{background:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none;z-index:5}.fd-tokenizer--display{background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none;overflow:visible;pointer-events:none}.fd-tokenizer--display .fd-tokenizer__inner{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.fd-tokenizer--display .fd-tokenizer__indicator .fd-popover__control{cursor:pointer;pointer-events:all}.fd-tokenizer--display .fd-tokenizer__indicator .fd-popover__body{pointer-events:none}.fd-tokenizer--display .fd-tokenizer__input{display:none}.fd-tokenizer--display .fd-tokenizer__inner{overflow:visible}.fd-tokenizer--display .fd-token{-webkit-margin-end:0;margin-inline-end:0}.fd-tokenizer--display .fd-token--display:after{content:\"\\b7\";display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-width:1rem}.fd-tokenizer--display .fd-token--display:has(+.fd-tokenizer__input):after{content:\"\";min-width:0}.fd-tokenizer--display+.fd-input-group__addon.fd-input-group__addon--button{display:none}.fd-tokenizer--scrollable .fd-tokenizer__inner{-webkit-box-pack:initial;-ms-flex-pack:initial;justify-content:normal;overflow-x:scroll}.fd-tokenizer .fd-token{max-width:inherit!important}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem;color:var(--sapLinkColor);cursor:pointer}[dir=rtl] .fd-tokenizer-more,.fd-tokenizer-more[dir=rtl]{padding-left:.5rem;padding-right:0}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon{height:2.25rem}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon--compact{height:1.625rem}.fd-tokenizer__overflow-list-item{display:flex;justify-content:space-between}\n/*! Bundled license information:\n\nfundamental-styles/dist/tokenizer.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InputGroupAddOnDirective, selector: "[fdInputGroupAddon], [fd-input-group-addon]", inputs: ["class", "placement", "type", "state", "button"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "bodyAriaLabel", "bodyRole", "bodyAriaLabelledBy", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { kind: "component", type: ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
827
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TokenizerComponent, deps: [{ token: i1.ContentDensityObserver }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: i2.LiveAnnouncer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
828
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TokenizerComponent, isStandalone: true, selector: "fd-tokenizer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: false, isRequired: false, transformFunction: null }, disableKeyboardDeletion: { classPropertyName: "disableKeyboardDeletion", publicName: "disableKeyboardDeletion", isSignal: false, isRequired: false, transformFunction: null }, compactCollapse: { classPropertyName: "compactCollapse", publicName: "compactCollapse", isSignal: false, isRequired: false, transformFunction: null }, tokenizerFocusable: { classPropertyName: "tokenizerFocusable", publicName: "tokenizerFocusable", isSignal: false, isRequired: false, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: false, isRequired: false, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: false, isRequired: false, transformFunction: null }, glyphFont: { classPropertyName: "glyphFont", publicName: "glyphFont", isSignal: false, isRequired: false, transformFunction: null }, moreTerm: { classPropertyName: "moreTerm", publicName: "moreTerm", isSignal: false, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: false, isRequired: false, transformFunction: null }, showOverflowPopover: { classPropertyName: "showOverflowPopover", publicName: "showOverflowPopover", isSignal: false, isRequired: false, transformFunction: null }, externalHiddenCount: { classPropertyName: "externalHiddenCount", publicName: "externalHiddenCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { moreClickedEvent: "moreClickedEvent" }, host: { listeners: { "keydown": "keyDown($event)" } }, providers: [contentDensityObserverProviders()], queries: [{ propertyName: "input", first: true, predicate: i0.forwardRef(() => FormControlComponent), descendants: true, read: ElementRef }, { propertyName: "tokenList", predicate: i0.forwardRef(() => TokenComponent) }], viewQueries: [{ propertyName: "tokenizerInnerEl", first: true, predicate: ["tokenizerInner"], descendants: true }, { propertyName: "moreElement", first: true, predicate: ["moreElementSpan"], descendants: true }, { propertyName: "content", first: true, predicate: ["inputGroupAddOn"], descendants: true }, { propertyName: "_viewContainer", predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fd-tokenizer fd-tokenizer--scrollable\" [class.is-focus]=\"_tokenizerHasFocus\">\n <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n <div\n [attr.aria-hidden]=\"tokenList.length === 0\"\n role=\"listbox\"\n [attr.aria-label]=\"('coreTokenizer.tokenizerLabel' | fdTranslate)()\"\n [style.width]=\"_tokensContainerWidth\"\n >\n <ng-content select=\"fd-token\"></ng-content>\n </div>\n @if (\n showOverflowPopover &&\n (_contentDensityObserver.isCompactSignal() || compactCollapse) &&\n externalHiddenCount() === 0\n ) {\n <ng-template [ngTemplateOutlet]=\"tokensOverflow\"></ng-template>\n } @else {\n @if (\n hasInternalOverflowIndicator() &&\n moreTokensLeft.length + moreTokensRight.length + hiddenCozyTokenCount + externalHiddenCount() > 0\n ) {\n <span\n (click)=\"moreClicked()\"\n (keydown.enter)=\"moreClicked()\"\n (keydown.space)=\"$event.preventDefault(); moreClicked()\"\n #moreElementSpan\n class=\"fd-tokenizer-more\"\n role=\"button\"\n tabindex=\"0\"\n >\n @if (_contentDensityObserver.isCompactSignal() || compactCollapse) {\n {{\n (\n 'coreTokenizer.moreLabel'\n | fdTranslate\n : { count: moreTokensLeft.length + moreTokensRight.length + externalHiddenCount() }\n )()\n }}\n }\n @if (!_contentDensityObserver.isCompactSignal() && !compactCollapse) {\n {{\n (\n 'coreTokenizer.moreLabel'\n | fdTranslate: { count: hiddenCozyTokenCount + externalHiddenCount() }\n )()\n }}\n }\n </span>\n }\n }\n <ng-content select=\"[fd-tokenizer-extra]\"></ng-content>\n <ng-content select=\"[fd-form-control]\"></ng-content>\n </div>\n @if (glyph) {\n <span fd-input-group-addon #inputGroupAddOn [button]=\"true\" placement=\"after\">\n <button\n fd-button\n class=\"fd-tokenizer-addon\"\n fdType=\"transparent\"\n [glyph]=\"glyph\"\n [glyphFont]=\"glyphFont\"\n type=\"button\"\n ></button>\n </span>\n }\n</div>\n<ng-template #tokensOverflow>\n <fd-popover placement=\"bottom-start\" title=\"\" [noArrow]=\"false\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"moreElement\"></ng-template>\n </fd-popover-control>\n <fd-popover-body>\n <ul fd-list class=\"fd-tokenizer__overflow-list\">\n @for (token of _hiddenTokens; track token) {\n <li fd-list-item class=\"fd-tokenizer__overflow-list-item\">\n <ng-container #viewContainer></ng-container>\n @if (!token.readOnly) {\n <span\n class=\"fd-token__close\"\n role=\"button\"\n [attr.aria-label]=\"('coreToken.deleteButtonLabel' | fdTranslate)()\"\n (click)=\"token.closeClickHandler($event)\"\n ></span>\n }\n </li>\n }\n </ul>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n<ng-template #moreElement>\n @if (\n hasInternalOverflowIndicator() &&\n moreTokensLeft.length + moreTokensRight.length + hiddenCozyTokenCount + externalHiddenCount() > 0\n ) {\n <span\n (click)=\"moreClicked()\"\n (keydown.enter)=\"moreClicked()\"\n (keydown.space)=\"$event.preventDefault(); moreClicked()\"\n #moreElementSpan\n class=\"fd-tokenizer-more\"\n role=\"button\"\n tabindex=\"0\"\n >\n @if (_contentDensityObserver.isCompactSignal() || compactCollapse) {\n {{\n (\n 'coreTokenizer.moreLabel'\n | fdTranslate: { count: moreTokensLeft.length + moreTokensRight.length + externalHiddenCount() }\n )()\n }}\n }\n @if (!_contentDensityObserver.isCompactSignal() && !compactCollapse) {\n {{\n ('coreTokenizer.moreLabel' | fdTranslate: { count: hiddenCozyTokenCount + externalHiddenCount() })()\n }}\n }\n </span>\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";.fd-tokenizer{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--sapField_BackgroundStyle,var(--sapField_BackgroundStyle));background-color:var(--sapField_Background,var(--sapField_Background));border:none;border-radius:var(--sapField_BorderCornerRadius);-webkit-box-shadow:var(--sapField_Shadow);box-shadow:var(--sapField_Shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdInput_Height,var(--sapElement_Height));line-height:normal;margin-block:var(--fdInput_Field_Margin_Block,.25rem);margin-block:0;margin-inline:0;min-height:var(--fdInput_Height,var(--sapElement_Height));min-width:2.75rem;outline:none;overflow:hidden;padding-block:0;padding-inline:var(--fdInput_Field_Padding_Inline,.625rem);padding-inline:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-tokenizer:after,.fd-tokenizer:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tokenizer::-webkit-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::-moz-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer:-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer[dir=rtl]::-webkit-input-placeholder,[dir=rtl] .fd-tokenizer::-webkit-input-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]::-moz-placeholder,[dir=rtl] .fd-tokenizer::-moz-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]:-ms-input-placeholder,[dir=rtl] .fd-tokenizer:-ms-input-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]::-ms-input-placeholder,[dir=rtl] .fd-tokenizer::-ms-input-placeholder{text-indent:.125rem}.fd-tokenizer[dir=rtl]::placeholder,[dir=rtl] .fd-tokenizer::placeholder{text-indent:.125rem}.fd-tokenizer::-moz-selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-tokenizer::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-tokenizer::-ms-clear{display:none}.fd-tokenizer.is-hover,.fd-tokenizer:hover{background:var(--sapField_Hover_BackgroundStyle,var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background,var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-tokenizer.is-focus,.fd-tokenizer:focus{background:var(--sapField_Focus_Background,var(--sapField_Focus_Background));outline:var(--fdInput_Outline_Color) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdInput_Outline_Offset)}.fd-tokenizer.is-hover,.fd-tokenizer:hover{-webkit-box-shadow:none;box-shadow:none}.fd-tokenizer__inner{-ms-overflow-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;float:right;height:100%;overflow:hidden;padding-block:0;padding-inline:var(--fdTokenizer_Inner_Padding,.3125rem);scrollbar-width:none;white-space:nowrap;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.fd-tokenizer__inner::-webkit-scrollbar{display:none}.fd-tokenizer .fd-token{-webkit-margin-end:.3125rem;margin-inline-end:.3125rem;max-width:calc(100% - 3.3125rem)}.fd-tokenizer__indicator{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdTokenizer_Indicator_Color);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-tokenizer__indicator:after,.fd-tokenizer__indicator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tokenizer .fd-tokenizer__input{background:transparent;-webkit-box-shadow:none;box-shadow:none;height:100%;min-height:100%}.fd-tokenizer .fd-tokenizer__input.fd-input{border:none;min-width:3rem;padding-block:0;padding-inline:0}.fd-tokenizer .fd-tokenizer__input:first-child{padding-block:0;padding-inline:.3125rem}.fd-tokenizer .fd-tokenizer__input:last-child{-ms-flex-preferred-size:100%;flex-basis:100%}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input:focus{background:none;background-color:transparent;border:none;-webkit-box-shadow:none;box-shadow:none;outline:none;z-index:5}.fd-tokenizer .fd-tokenizer__input.is-hover,.fd-tokenizer .fd-tokenizer__input:hover{background:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.fd-tokenizer.is-focus,.fd-tokenizer:focus{border:none;-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:-.0625rem;z-index:5}.fd-tokenizer[class*=-compact],.fd-tokenizer[class*=-condensed],[class*=-compact] .fd-tokenizer:not([class*=-cozy]),[class*=-condensed] .fd-tokenizer:not([class*=-cozy]){height:1.625rem;min-height:1.625rem;--fdTokenizer_Inner_Padding:.25rem;--fdInput_Field_Compact_Min_Width:2rem}.fd-tokenizer[class*=-compact] .fd-tokenizer__input:first-child,.fd-tokenizer[class*=-condensed] .fd-tokenizer__input:first-child,[class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-tokenizer__input:first-child,[class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-tokenizer__input:first-child{padding-block:0;padding-inline:.25rem}.fd-tokenizer[class*=-compact] .fd-token,.fd-tokenizer[class*=-condensed] .fd-token,[class*=-compact] .fd-tokenizer:not([class*=-cozy]) .fd-token,[class*=-condensed] .fd-tokenizer:not([class*=-cozy]) .fd-token{-webkit-margin-end:.25rem;margin-inline-end:.25rem;max-width:calc(100% - 2.25rem)}.fd-tokenizer--readonly{background-color:var(--sapField_ReadOnly_Background);overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__inner{overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true],.fd-tokenizer--readonly .fd-tokenizer__input[readonly]{background:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly.is-focus,.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly:focus,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true].is-focus,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true]:focus,.fd-tokenizer--readonly .fd-tokenizer__input[readonly].is-focus,.fd-tokenizer--readonly .fd-tokenizer__input[readonly]:focus{background:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none;z-index:5}.fd-tokenizer--display{background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none;overflow:visible;pointer-events:none}.fd-tokenizer--display .fd-tokenizer__inner{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.fd-tokenizer--display .fd-tokenizer__indicator .fd-popover__control{cursor:pointer;pointer-events:all}.fd-tokenizer--display .fd-tokenizer__indicator .fd-popover__body{pointer-events:none}.fd-tokenizer--display .fd-tokenizer__input{display:none}.fd-tokenizer--display .fd-tokenizer__inner{overflow:visible}.fd-tokenizer--display .fd-token{-webkit-margin-end:0;margin-inline-end:0}.fd-tokenizer--display .fd-token--display:after{content:\"\\b7\";display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-width:1rem}.fd-tokenizer--display .fd-token--display:has(+.fd-tokenizer__input):after{content:\"\";min-width:0}.fd-tokenizer--display+.fd-input-group__addon.fd-input-group__addon--button{display:none}.fd-tokenizer--scrollable .fd-tokenizer__inner{-webkit-box-pack:initial;-ms-flex-pack:initial;justify-content:normal;overflow-x:scroll}.fd-tokenizer .fd-token{max-width:inherit!important}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem;color:var(--sapLinkColor);cursor:pointer}[dir=rtl] .fd-tokenizer-more,.fd-tokenizer-more[dir=rtl]{padding-left:.5rem;padding-right:0}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon{height:2.25rem}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon--compact{height:1.625rem}.fd-tokenizer__overflow-list-item{display:flex;justify-content:space-between}\n/*! Bundled license information:\n\nfundamental-styles/dist/tokenizer.css:\n (*!\n * Fundamental Library Styles v0.41.8\n * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InputGroupAddOnDirective, selector: "[fdInputGroupAddon], [fd-input-group-addon]", inputs: ["class", "placement", "type", "state", "button"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "bodyAriaLabel", "bodyRole", "bodyAriaLabelledBy", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { kind: "component", type: ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
820
829
|
}
|
|
821
830
|
__decorate([
|
|
822
831
|
applyCssClass,
|
|
@@ -824,7 +833,7 @@ __decorate([
|
|
|
824
833
|
__metadata("design:paramtypes", []),
|
|
825
834
|
__metadata("design:returntype", Array)
|
|
826
835
|
], TokenizerComponent.prototype, "buildComponentCssClass", null);
|
|
827
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
836
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TokenizerComponent, decorators: [{
|
|
828
837
|
type: Component,
|
|
829
838
|
args: [{ selector: 'fd-tokenizer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], imports: [
|
|
830
839
|
NgTemplateOutlet,
|
|
@@ -890,11 +899,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
890
899
|
* Use direct imports of `TokenComponent`, `TokenizerComponent`, `TokenizerInputDirective` instead
|
|
891
900
|
*/
|
|
892
901
|
class TokenModule {
|
|
893
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
894
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
895
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
902
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TokenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
903
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: TokenModule, imports: [TokenComponent, TokenizerComponent, TokenizerInputDirective], exports: [TokenComponent, TokenizerComponent, TokenizerInputDirective] }); }
|
|
904
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TokenModule, imports: [TokenizerComponent] }); }
|
|
896
905
|
}
|
|
897
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
906
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TokenModule, decorators: [{
|
|
898
907
|
type: NgModule,
|
|
899
908
|
args: [{
|
|
900
909
|
imports: [TokenComponent, TokenizerComponent, TokenizerInputDirective],
|