@quadrel-enterprise-ui/framework 20.27.1 → 20.27.3-beta.234.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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ElementRef, Directive, InjectionToken, HostBinding, Input, ViewEncapsulation, Component, Injectable, Injector, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, NgModule, EventEmitter, Output, Renderer2, Pipe, ViewContainerRef, NO_ERRORS_SCHEMA, DestroyRef, SecurityContext, NgZone, ViewChildren, forwardRef, ContentChildren, ContentChild, isDevMode, QueryList, TemplateRef, CUSTOM_ELEMENTS_SCHEMA, provideAppInitializer } from '@angular/core';
|
|
2
|
+
import { inject, ElementRef, Directive, InjectionToken, HostBinding, Input, ViewEncapsulation, Component, Injectable, Injector, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, NgModule, EventEmitter, Output, Renderer2, Pipe, ViewContainerRef, NO_ERRORS_SCHEMA, DestroyRef, SecurityContext, NgZone, ViewChildren, forwardRef, ContentChildren, ContentChild, afterNextRender, isDevMode, QueryList, TemplateRef, CUSTOM_ELEMENTS_SCHEMA, provideAppInitializer } from '@angular/core';
|
|
3
3
|
import { Dialog, DialogRef, DialogModule } from '@angular/cdk/dialog';
|
|
4
4
|
import * as i1 from '@angular/common';
|
|
5
5
|
import { CommonModule, NgFor, NgIf, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
|
|
@@ -1550,11 +1550,11 @@ class QdDialogComponent {
|
|
|
1550
1550
|
});
|
|
1551
1551
|
}
|
|
1552
1552
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1553
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDialogComponent, isStandalone: false, selector: "qd-dialog", host: { properties: { "class.full-width": "isFullWidth", "class.has-sections": "this.hasSectionsClass" } }, providers: [QdDialogComponent], viewQueries: [{ propertyName: "body", first: true, predicate: ["body"], descendants: true }, { propertyName: "infoBanners", first: true, predicate: ["banners"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"!isFullWidth\" class=\"dialog-header\">\n <div class=\"title-container\">\n {{ config?.title?.i18n | translate }}\n </div>\n <button\n *ngIf=\"!config?.hideCloseHeaderButton\"\n qdIconButton\n class=\"close\"\n color=\"secondary\"\n tabindex=\"-1\"\n (click)=\"close()\"\n >\n <qd-icon icon=\"timesLargeLight\"></qd-icon>\n </button>\n</div>\n\n<button\n *ngIf=\"!config?.hideCloseHeaderButton && isFullWidth\"\n qdIconButton\n class=\"close\"\n color=\"secondary\"\n tabindex=\"-1\"\n (click)=\"close()\"\n>\n <qd-icon icon=\"timesLargeLight\"></qd-icon>\n</button>\n\n<div class=\"wrapper-body\">\n <div [class.has-dialog-info-banners]=\"hasInfoBanner\" #banners>\n <ng-content select=\"qd-page-info-banner\"></ng-content>\n </div>\n <div class=\"body\" [class.full-width]=\"isFullWidth\" #body>\n <ng-content></ng-content>\n </div>\n</div>\n\n<div class=\"qd-dialog-actions\">\n <button
|
|
1553
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDialogComponent, isStandalone: false, selector: "qd-dialog", host: { properties: { "class.full-width": "isFullWidth", "class.has-sections": "this.hasSectionsClass" } }, providers: [QdDialogComponent], viewQueries: [{ propertyName: "body", first: true, predicate: ["body"], descendants: true }, { propertyName: "infoBanners", first: true, predicate: ["banners"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"!isFullWidth\" class=\"dialog-header\">\n <div class=\"title-container\">\n {{ config?.title?.i18n | translate }}\n </div>\n <button\n *ngIf=\"!config?.hideCloseHeaderButton\"\n qdIconButton\n class=\"close\"\n color=\"secondary\"\n tabindex=\"-1\"\n (click)=\"close()\"\n data-test-id=\"dialog-close-button\"\n >\n <qd-icon icon=\"timesLargeLight\"></qd-icon>\n </button>\n</div>\n\n<button\n *ngIf=\"!config?.hideCloseHeaderButton && isFullWidth\"\n qdIconButton\n class=\"close\"\n color=\"secondary\"\n tabindex=\"-1\"\n (click)=\"close()\"\n data-test-id=\"dialog-close-button\"\n>\n <qd-icon icon=\"timesLargeLight\"></qd-icon>\n</button>\n\n<div class=\"wrapper-body\">\n <div [class.has-dialog-info-banners]=\"hasInfoBanner\" #banners>\n <ng-content select=\"qd-page-info-banner\"></ng-content>\n </div>\n <div class=\"body\" [class.full-width]=\"isFullWidth\" #body>\n <ng-content></ng-content>\n </div>\n</div>\n\n<div class=\"qd-dialog-actions\">\n <button\n *ngIf=\"config.cancel\"\n qdButton\n qdButtonGhost\n color=\"secondary\"\n (click)=\"close()\"\n data-test-id=\"dialog-cancel-button\"\n >\n {{ config?.cancel?.label?.i18n ?? \"i18n.qd.dialog.action.cancel\" | translate }}\n </button>\n <button *ngIf=\"config.primary\" qdButton (click)=\"primaryActionClicked()\" data-test-id=\"dialog-primary-button\">\n {{ config?.primary?.label?.i18n ?? \"i18n.qd.dialog.action.primary\" | translate }}\n </button>\n <ng-content select=\"qd-dialog-action\"></ng-content>\n</div>\n", styles: ["qd-dialog{display:flex;width:100%;height:100%;flex-direction:column;background:#efefef}qd-dialog.full-width{position:relative;width:calc(100% - 3rem)!important;height:calc(100% - 3rem)!important;margin:1.5rem}qd-dialog.full-width .close{position:absolute;z-index:9999;top:1.25rem;right:1rem;color:#454545;cursor:pointer}.dialog-header{display:flex;height:3.125rem;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.5rem;border-bottom:2px solid rgb(213,213,213);background:#fff}.dialog-header .title-container{display:block;color:#171717;font-weight:500}.dialog-header .close{cursor:pointer}.wrapper-body{overflow:auto;flex:1;background:#efefef}.wrapper-body .has-dialog-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.wrapper-body .has-dialog-info-banners qd-page-info-banner:last-child{margin-bottom:0}.wrapper-body .body.full-width{height:100%}.wrapper-body .body:not(.full-width){max-height:80vh;padding:1rem 1.5rem}.wrapper-body .body:not(.full-width) qd-section{padding-right:1.5rem;padding-left:1.5rem}.wrapper-body .body:not(.full-width) qd-text-section{margin-right:0;margin-left:0}qd-dialog.has-sections .wrapper-body .body:not(.full-width){padding:0}.qd-dialog-actions{display:flex;justify-content:flex-end;padding:.5rem 1.5rem;border-top:2px solid rgb(213,213,213);background:#efefef;column-gap:.625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1554
1554
|
}
|
|
1555
1555
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDialogComponent, decorators: [{
|
|
1556
1556
|
type: Component,
|
|
1557
|
-
args: [{ selector: 'qd-dialog', host: { '[class.full-width]': 'isFullWidth' }, encapsulation: ViewEncapsulation.None, providers: [QdDialogComponent], standalone: false, template: "<div *ngIf=\"!isFullWidth\" class=\"dialog-header\">\n <div class=\"title-container\">\n {{ config?.title?.i18n | translate }}\n </div>\n <button\n *ngIf=\"!config?.hideCloseHeaderButton\"\n qdIconButton\n class=\"close\"\n color=\"secondary\"\n tabindex=\"-1\"\n (click)=\"close()\"\n >\n <qd-icon icon=\"timesLargeLight\"></qd-icon>\n </button>\n</div>\n\n<button\n *ngIf=\"!config?.hideCloseHeaderButton && isFullWidth\"\n qdIconButton\n class=\"close\"\n color=\"secondary\"\n tabindex=\"-1\"\n (click)=\"close()\"\n>\n <qd-icon icon=\"timesLargeLight\"></qd-icon>\n</button>\n\n<div class=\"wrapper-body\">\n <div [class.has-dialog-info-banners]=\"hasInfoBanner\" #banners>\n <ng-content select=\"qd-page-info-banner\"></ng-content>\n </div>\n <div class=\"body\" [class.full-width]=\"isFullWidth\" #body>\n <ng-content></ng-content>\n </div>\n</div>\n\n<div class=\"qd-dialog-actions\">\n <button
|
|
1557
|
+
args: [{ selector: 'qd-dialog', host: { '[class.full-width]': 'isFullWidth' }, encapsulation: ViewEncapsulation.None, providers: [QdDialogComponent], standalone: false, template: "<div *ngIf=\"!isFullWidth\" class=\"dialog-header\">\n <div class=\"title-container\">\n {{ config?.title?.i18n | translate }}\n </div>\n <button\n *ngIf=\"!config?.hideCloseHeaderButton\"\n qdIconButton\n class=\"close\"\n color=\"secondary\"\n tabindex=\"-1\"\n (click)=\"close()\"\n data-test-id=\"dialog-close-button\"\n >\n <qd-icon icon=\"timesLargeLight\"></qd-icon>\n </button>\n</div>\n\n<button\n *ngIf=\"!config?.hideCloseHeaderButton && isFullWidth\"\n qdIconButton\n class=\"close\"\n color=\"secondary\"\n tabindex=\"-1\"\n (click)=\"close()\"\n data-test-id=\"dialog-close-button\"\n>\n <qd-icon icon=\"timesLargeLight\"></qd-icon>\n</button>\n\n<div class=\"wrapper-body\">\n <div [class.has-dialog-info-banners]=\"hasInfoBanner\" #banners>\n <ng-content select=\"qd-page-info-banner\"></ng-content>\n </div>\n <div class=\"body\" [class.full-width]=\"isFullWidth\" #body>\n <ng-content></ng-content>\n </div>\n</div>\n\n<div class=\"qd-dialog-actions\">\n <button\n *ngIf=\"config.cancel\"\n qdButton\n qdButtonGhost\n color=\"secondary\"\n (click)=\"close()\"\n data-test-id=\"dialog-cancel-button\"\n >\n {{ config?.cancel?.label?.i18n ?? \"i18n.qd.dialog.action.cancel\" | translate }}\n </button>\n <button *ngIf=\"config.primary\" qdButton (click)=\"primaryActionClicked()\" data-test-id=\"dialog-primary-button\">\n {{ config?.primary?.label?.i18n ?? \"i18n.qd.dialog.action.primary\" | translate }}\n </button>\n <ng-content select=\"qd-dialog-action\"></ng-content>\n</div>\n", styles: ["qd-dialog{display:flex;width:100%;height:100%;flex-direction:column;background:#efefef}qd-dialog.full-width{position:relative;width:calc(100% - 3rem)!important;height:calc(100% - 3rem)!important;margin:1.5rem}qd-dialog.full-width .close{position:absolute;z-index:9999;top:1.25rem;right:1rem;color:#454545;cursor:pointer}.dialog-header{display:flex;height:3.125rem;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.5rem;border-bottom:2px solid rgb(213,213,213);background:#fff}.dialog-header .title-container{display:block;color:#171717;font-weight:500}.dialog-header .close{cursor:pointer}.wrapper-body{overflow:auto;flex:1;background:#efefef}.wrapper-body .has-dialog-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.wrapper-body .has-dialog-info-banners qd-page-info-banner:last-child{margin-bottom:0}.wrapper-body .body.full-width{height:100%}.wrapper-body .body:not(.full-width){max-height:80vh;padding:1rem 1.5rem}.wrapper-body .body:not(.full-width) qd-section{padding-right:1.5rem;padding-left:1.5rem}.wrapper-body .body:not(.full-width) qd-text-section{margin-right:0;margin-left:0}qd-dialog.has-sections .wrapper-body .body:not(.full-width){padding:0}.qd-dialog-actions{display:flex;justify-content:flex-end;padding:.5rem 1.5rem;border-top:2px solid rgb(213,213,213);background:#efefef;column-gap:.625rem}\n"] }]
|
|
1558
1558
|
}], propDecorators: { body: [{
|
|
1559
1559
|
type: ViewChild,
|
|
1560
1560
|
args: ['body']
|
|
@@ -2085,7 +2085,9 @@ class QdMockPopoverOnClickDirective {
|
|
|
2085
2085
|
qdPopoverHeight;
|
|
2086
2086
|
qdPopoverMinHeight;
|
|
2087
2087
|
qdPopoverMaxHeight;
|
|
2088
|
-
|
|
2088
|
+
qdPopoverPlacement;
|
|
2089
|
+
qdPopoverOffsetX;
|
|
2090
|
+
qdPopoverOffsetY;
|
|
2089
2091
|
qdPopoverCloseStrategy;
|
|
2090
2092
|
qdPopoverDisabled;
|
|
2091
2093
|
qdPopoverStopPropagation = true;
|
|
@@ -2131,7 +2133,7 @@ class QdMockPopoverOnClickDirective {
|
|
|
2131
2133
|
return this._embeddedView?.rootNodes?.[0];
|
|
2132
2134
|
}
|
|
2133
2135
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockPopoverOnClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2134
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdMockPopoverOnClickDirective, isStandalone: false, selector: "[qdPopoverOnClick]", inputs: { qdPopoverOnClick: "qdPopoverOnClick", qdPopoverWidth: "qdPopoverWidth", qdPopoverMinWidth: "qdPopoverMinWidth", qdPopoverMaxWidth: "qdPopoverMaxWidth", qdPopoverHeight: "qdPopoverHeight", qdPopoverMinHeight: "qdPopoverMinHeight", qdPopoverMaxHeight: "qdPopoverMaxHeight",
|
|
2136
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdMockPopoverOnClickDirective, isStandalone: false, selector: "[qdPopoverOnClick]", inputs: { qdPopoverOnClick: "qdPopoverOnClick", qdPopoverWidth: "qdPopoverWidth", qdPopoverMinWidth: "qdPopoverMinWidth", qdPopoverMaxWidth: "qdPopoverMaxWidth", qdPopoverHeight: "qdPopoverHeight", qdPopoverMinHeight: "qdPopoverMinHeight", qdPopoverMaxHeight: "qdPopoverMaxHeight", qdPopoverPlacement: "qdPopoverPlacement", qdPopoverOffsetX: "qdPopoverOffsetX", qdPopoverOffsetY: "qdPopoverOffsetY", qdPopoverCloseStrategy: "qdPopoverCloseStrategy", qdPopoverDisabled: "qdPopoverDisabled", qdPopoverStopPropagation: "qdPopoverStopPropagation" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "show($event)", "document:click": "clickedOutside($event)" } }, exportAs: ["qdPopoverOnClick"], ngImport: i0 });
|
|
2135
2137
|
}
|
|
2136
2138
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockPopoverOnClickDirective, decorators: [{
|
|
2137
2139
|
type: Directive,
|
|
@@ -2154,7 +2156,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
2154
2156
|
type: Input
|
|
2155
2157
|
}], qdPopoverMaxHeight: [{
|
|
2156
2158
|
type: Input
|
|
2157
|
-
}],
|
|
2159
|
+
}], qdPopoverPlacement: [{
|
|
2160
|
+
type: Input
|
|
2161
|
+
}], qdPopoverOffsetX: [{
|
|
2162
|
+
type: Input
|
|
2163
|
+
}], qdPopoverOffsetY: [{
|
|
2158
2164
|
type: Input
|
|
2159
2165
|
}], qdPopoverCloseStrategy: [{
|
|
2160
2166
|
type: Input
|
|
@@ -8076,6 +8082,18 @@ const DEFAULT_POSITION = {
|
|
|
8076
8082
|
overlayX: 'end',
|
|
8077
8083
|
overlayY: 'top'
|
|
8078
8084
|
};
|
|
8085
|
+
const PLACEMENT_POSITIONS = {
|
|
8086
|
+
'bottom-start': { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
|
|
8087
|
+
'bottom-end': { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
|
|
8088
|
+
'top-start': { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
|
|
8089
|
+
'top-end': { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }
|
|
8090
|
+
};
|
|
8091
|
+
const VERTICAL_OPPOSITE = {
|
|
8092
|
+
'bottom-start': 'top-start',
|
|
8093
|
+
'bottom-end': 'top-end',
|
|
8094
|
+
'top-start': 'bottom-start',
|
|
8095
|
+
'top-end': 'bottom-end'
|
|
8096
|
+
};
|
|
8079
8097
|
/**
|
|
8080
8098
|
* **QdPopoverOnClickDirective**
|
|
8081
8099
|
*
|
|
@@ -8103,19 +8121,108 @@ class QdPopoverOnClickDirective {
|
|
|
8103
8121
|
popoverService = inject(QdPopoverService);
|
|
8104
8122
|
sizingService = inject(QdPopoverSizingService);
|
|
8105
8123
|
popoverParentService = inject(QdPopoverParentService, { optional: true });
|
|
8124
|
+
_topFirst = inject(QD_POPOVER_TOP_FIRST, { optional: true }) ?? false;
|
|
8125
|
+
/**
|
|
8126
|
+
* The template shown inside the popover.
|
|
8127
|
+
*
|
|
8128
|
+
* Pass the `ng-template` that holds the menu, option list or panel.
|
|
8129
|
+
*/
|
|
8106
8130
|
qdPopoverOnClick;
|
|
8107
|
-
|
|
8131
|
+
/**
|
|
8132
|
+
* Which corner of the host the popover opens from.
|
|
8133
|
+
*
|
|
8134
|
+
* One of `bottom-start`, `bottom-end`, `top-start` or `top-end`. When unset,
|
|
8135
|
+
* the popover uses the default end-aligned position below the host.
|
|
8136
|
+
*/
|
|
8137
|
+
qdPopoverPlacement;
|
|
8138
|
+
/**
|
|
8139
|
+
* Fine-tunes the horizontal position, in pixels.
|
|
8140
|
+
*
|
|
8141
|
+
* A negative value moves the popover left, a positive value moves it right.
|
|
8142
|
+
*/
|
|
8143
|
+
qdPopoverOffsetX = 0;
|
|
8144
|
+
/**
|
|
8145
|
+
* Fine-tunes the vertical gap to the host, in pixels.
|
|
8146
|
+
*
|
|
8147
|
+
* A negative value moves the popover up, a positive value moves it down. The
|
|
8148
|
+
* value is mirrored when the popover flips, so the gap looks the same whether
|
|
8149
|
+
* it opens downward or upward.
|
|
8150
|
+
*/
|
|
8151
|
+
qdPopoverOffsetY = 0;
|
|
8152
|
+
/**
|
|
8153
|
+
* Decides when a click closes the popover.
|
|
8154
|
+
*
|
|
8155
|
+
* `onEveryClick` (default) closes it on the next click anywhere, including
|
|
8156
|
+
* inside the popover. `onOutsideClick` keeps it open while you click inside
|
|
8157
|
+
* and only closes on a click outside.
|
|
8158
|
+
*/
|
|
8108
8159
|
qdPopoverCloseStrategy = 'onEveryClick';
|
|
8160
|
+
/**
|
|
8161
|
+
* Turns the popover off.
|
|
8162
|
+
*
|
|
8163
|
+
* While `true`, clicks and keys on the host no longer open it.
|
|
8164
|
+
*/
|
|
8109
8165
|
qdPopoverDisabled = false;
|
|
8166
|
+
/**
|
|
8167
|
+
* Stops the opening click from bubbling to parent elements.
|
|
8168
|
+
*
|
|
8169
|
+
* Keep it `true` so an outer click handler does not fire as well. Set it
|
|
8170
|
+
* `false` when a parent must react to the same click.
|
|
8171
|
+
*/
|
|
8110
8172
|
qdPopoverStopPropagation = true;
|
|
8173
|
+
/**
|
|
8174
|
+
* Background colour of the popover panel.
|
|
8175
|
+
*
|
|
8176
|
+
* When unset, the panel uses its default colour.
|
|
8177
|
+
*/
|
|
8111
8178
|
qdPopoverBackgroundColor;
|
|
8179
|
+
/**
|
|
8180
|
+
* Tallest the popover may get, in pixels.
|
|
8181
|
+
*
|
|
8182
|
+
* Once the content is taller, it scrolls inside the popover. `none` removes
|
|
8183
|
+
* the limit.
|
|
8184
|
+
*/
|
|
8112
8185
|
qdPopoverMaxHeight = 'none';
|
|
8186
|
+
/**
|
|
8187
|
+
* Narrowest the popover may get, in pixels.
|
|
8188
|
+
*
|
|
8189
|
+
* `none` removes the lower limit.
|
|
8190
|
+
*/
|
|
8113
8191
|
qdPopoverMinWidth = 'none';
|
|
8192
|
+
/**
|
|
8193
|
+
* Widest the popover may get, in pixels.
|
|
8194
|
+
*
|
|
8195
|
+
* `none` removes the upper limit. The popover is never wider than the screen,
|
|
8196
|
+
* even if a larger value is set.
|
|
8197
|
+
*/
|
|
8114
8198
|
qdPopoverMaxWidth = 'none';
|
|
8199
|
+
/**
|
|
8200
|
+
* Matches the popover size to the host or its content.
|
|
8201
|
+
*
|
|
8202
|
+
* Set `width` and/or `height` to `true`. An empty object keeps the natural
|
|
8203
|
+
* content size. The min and max limits still apply.
|
|
8204
|
+
*/
|
|
8115
8205
|
qdPopoverAutoSize = {};
|
|
8206
|
+
/**
|
|
8207
|
+
* Turns on keyboard control.
|
|
8208
|
+
*
|
|
8209
|
+
* While `true`, Enter and Space open the popover and Escape and Tab close it.
|
|
8210
|
+
*/
|
|
8116
8211
|
qdPopoverEnableKeyControl = false;
|
|
8212
|
+
/**
|
|
8213
|
+
* Lets the popover flip to the side that has room.
|
|
8214
|
+
*
|
|
8215
|
+
* While `true`, a popover that would open past the screen edge opens to the
|
|
8216
|
+
* opposite side instead. It is opt-in, so popovers that already fit stay put.
|
|
8217
|
+
*/
|
|
8117
8218
|
qdPopoverFlipIntoViewport = false;
|
|
8219
|
+
/**
|
|
8220
|
+
* Emits after the popover has opened.
|
|
8221
|
+
*/
|
|
8118
8222
|
opened = new EventEmitter();
|
|
8223
|
+
/**
|
|
8224
|
+
* Emits after the popover has closed.
|
|
8225
|
+
*/
|
|
8119
8226
|
closed = new EventEmitter();
|
|
8120
8227
|
handleClick(event) {
|
|
8121
8228
|
if (this.qdPopoverStopPropagation)
|
|
@@ -8205,10 +8312,8 @@ class QdPopoverOnClickDirective {
|
|
|
8205
8312
|
return this._popoverRef?.instance ?? null;
|
|
8206
8313
|
}
|
|
8207
8314
|
initPositionStrategy() {
|
|
8208
|
-
const positions = this.
|
|
8209
|
-
?
|
|
8210
|
-
? this.positionStrategy
|
|
8211
|
-
: [this.positionStrategy]
|
|
8315
|
+
const positions = this.qdPopoverPlacement
|
|
8316
|
+
? this.buildPlacementPositions(this.qdPopoverPlacement)
|
|
8212
8317
|
: [DEFAULT_POSITION];
|
|
8213
8318
|
this._resolvedPositions = this.qdPopoverFlipIntoViewport ? this.withHorizontalFallbacks(positions) : positions;
|
|
8214
8319
|
this._positionStrategyInstance = this.overlayPositionBuilder
|
|
@@ -8216,6 +8321,20 @@ class QdPopoverOnClickDirective {
|
|
|
8216
8321
|
.withPush(true)
|
|
8217
8322
|
.withPositions(this._resolvedPositions);
|
|
8218
8323
|
}
|
|
8324
|
+
buildPlacementPositions(placement) {
|
|
8325
|
+
const positions = [
|
|
8326
|
+
this.applyOffsets(PLACEMENT_POSITIONS[placement], this.qdPopoverOffsetY),
|
|
8327
|
+
{ ...this.applyOffsets(PLACEMENT_POSITIONS[VERTICAL_OPPOSITE[placement]], -this.qdPopoverOffsetY), weight: 0.8 }
|
|
8328
|
+
];
|
|
8329
|
+
return this._topFirst ? positions.reverse() : positions;
|
|
8330
|
+
}
|
|
8331
|
+
applyOffsets(position, offsetY) {
|
|
8332
|
+
return {
|
|
8333
|
+
...position,
|
|
8334
|
+
...(this.qdPopoverOffsetX !== 0 && { offsetX: this.qdPopoverOffsetX }),
|
|
8335
|
+
...(offsetY !== 0 && { offsetY })
|
|
8336
|
+
};
|
|
8337
|
+
}
|
|
8219
8338
|
withHorizontalFallbacks(positions) {
|
|
8220
8339
|
const flip = (x) => x === 'start' ? 'end' : x === 'end' ? 'start' : 'center';
|
|
8221
8340
|
const mirrored = positions.map(position => ({
|
|
@@ -8309,7 +8428,7 @@ class QdPopoverOnClickDirective {
|
|
|
8309
8428
|
this.unsubscribeAll();
|
|
8310
8429
|
}
|
|
8311
8430
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPopoverOnClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
8312
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdPopoverOnClickDirective, isStandalone: false, selector: "[qdPopoverOnClick]", inputs: { qdPopoverOnClick: "qdPopoverOnClick",
|
|
8431
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdPopoverOnClickDirective, isStandalone: false, selector: "[qdPopoverOnClick]", inputs: { qdPopoverOnClick: "qdPopoverOnClick", qdPopoverPlacement: "qdPopoverPlacement", qdPopoverOffsetX: "qdPopoverOffsetX", qdPopoverOffsetY: "qdPopoverOffsetY", qdPopoverCloseStrategy: "qdPopoverCloseStrategy", qdPopoverDisabled: "qdPopoverDisabled", qdPopoverStopPropagation: "qdPopoverStopPropagation", qdPopoverBackgroundColor: "qdPopoverBackgroundColor", qdPopoverMaxHeight: "qdPopoverMaxHeight", qdPopoverMinWidth: "qdPopoverMinWidth", qdPopoverMaxWidth: "qdPopoverMaxWidth", qdPopoverAutoSize: "qdPopoverAutoSize", qdPopoverEnableKeyControl: "qdPopoverEnableKeyControl", qdPopoverFlipIntoViewport: "qdPopoverFlipIntoViewport" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "handleClick($event)", "document:click": "handleDocumentClick($event)", "keydown.escape": "handleCloseKeys()", "keydown.tab": "handleCloseKeys()", "keydown.enter": "handleOpenKey($event)", "keydown.space": "handleOpenKey($event)" } }, providers: [QdPopoverSizingService], exportAs: ["qdPopoverOnClick"], ngImport: i0 });
|
|
8313
8432
|
}
|
|
8314
8433
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPopoverOnClickDirective, decorators: [{
|
|
8315
8434
|
type: Directive,
|
|
@@ -8321,7 +8440,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
8321
8440
|
}]
|
|
8322
8441
|
}], ctorParameters: () => [], propDecorators: { qdPopoverOnClick: [{
|
|
8323
8442
|
type: Input
|
|
8324
|
-
}],
|
|
8443
|
+
}], qdPopoverPlacement: [{
|
|
8444
|
+
type: Input
|
|
8445
|
+
}], qdPopoverOffsetX: [{
|
|
8446
|
+
type: Input
|
|
8447
|
+
}], qdPopoverOffsetY: [{
|
|
8325
8448
|
type: Input
|
|
8326
8449
|
}], qdPopoverCloseStrategy: [{
|
|
8327
8450
|
type: Input
|
|
@@ -10794,7 +10917,6 @@ class QdDropdownComponent {
|
|
|
10794
10917
|
options;
|
|
10795
10918
|
filterText;
|
|
10796
10919
|
control;
|
|
10797
|
-
positionStrategy;
|
|
10798
10920
|
_value = null;
|
|
10799
10921
|
_selectedOption = null;
|
|
10800
10922
|
_subs = new Subscription();
|
|
@@ -10838,10 +10960,8 @@ class QdDropdownComponent {
|
|
|
10838
10960
|
: this.translateService.instant('i18n.qd.dropdown.defaultValue');
|
|
10839
10961
|
}
|
|
10840
10962
|
constructor() {
|
|
10841
|
-
const isPopoverTopFirst = inject(QD_POPOVER_TOP_FIRST, { optional: true });
|
|
10842
10963
|
if (!this.id)
|
|
10843
10964
|
this.id = v4();
|
|
10844
|
-
this.getPositionStrategy(isPopoverTopFirst);
|
|
10845
10965
|
this.optionsService.optionsResolved$
|
|
10846
10966
|
.pipe(takeUntilDestroyed())
|
|
10847
10967
|
.subscribe(resolvedEvent => this.optionsResolved.emit(resolvedEvent));
|
|
@@ -10920,24 +11040,6 @@ class QdDropdownComponent {
|
|
|
10920
11040
|
this._onTouch();
|
|
10921
11041
|
}
|
|
10922
11042
|
}
|
|
10923
|
-
getPositionStrategy(isPopoverTopFirst) {
|
|
10924
|
-
const arr = [
|
|
10925
|
-
{
|
|
10926
|
-
originX: 'start',
|
|
10927
|
-
originY: 'bottom',
|
|
10928
|
-
overlayX: 'start',
|
|
10929
|
-
overlayY: 'top'
|
|
10930
|
-
},
|
|
10931
|
-
{
|
|
10932
|
-
originX: 'start',
|
|
10933
|
-
originY: 'top',
|
|
10934
|
-
overlayX: 'start',
|
|
10935
|
-
overlayY: 'bottom',
|
|
10936
|
-
weight: 0.8
|
|
10937
|
-
}
|
|
10938
|
-
];
|
|
10939
|
-
this.positionStrategy = isPopoverTopFirst ? arr.slice().reverse() : arr;
|
|
10940
|
-
}
|
|
10941
11043
|
loadOptionsForCurrentConfig() {
|
|
10942
11044
|
this.optionsService.initialize(this.config);
|
|
10943
11045
|
this.optionsService.validateOptionsSetup('QdDropdown');
|
|
@@ -11006,7 +11108,7 @@ class QdDropdownComponent {
|
|
|
11006
11108
|
provide: QD_FOCUSABLE_TOKEN,
|
|
11007
11109
|
useExisting: QdDropdownComponent
|
|
11008
11110
|
}
|
|
11009
|
-
], viewQueries: [{ propertyName: "dropdownOptions", first: true, predicate: QdDropdownOptionsComponent, descendants: true }, { propertyName: "dropdownDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }, { propertyName: "box", first: true, predicate: ["box"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div class=\"qd-dropdown__wrapper\">\n <div\n class=\"qd-dropdown__box\"\n tabindex=\"0\"\n *ngIf=\"!readonly && !viewonly && hasOptions\"\n [qdPopoverOnClick]=\"dropdownMenu\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverDisabled]=\"disabled\"\n [qdPopoverMaxHeight]=\"qdPopoverMaxHeight\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverEnableKeyControl]=\"true\"\n [qdPopoverFlipIntoViewport]=\"true\"\n (opened)=\"onOpenDropdown()\"\n (closed)=\"onDropdownClosed()\"\n (click)=\"enterClick.emit()\"\n
|
|
11111
|
+
], viewQueries: [{ propertyName: "dropdownOptions", first: true, predicate: QdDropdownOptionsComponent, descendants: true }, { propertyName: "dropdownDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }, { propertyName: "box", first: true, predicate: ["box"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div class=\"qd-dropdown__wrapper\">\n <div\n class=\"qd-dropdown__box\"\n tabindex=\"0\"\n *ngIf=\"!readonly && !viewonly && hasOptions\"\n [qdPopoverOnClick]=\"dropdownMenu\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverDisabled]=\"disabled\"\n [qdPopoverMaxHeight]=\"qdPopoverMaxHeight\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverEnableKeyControl]=\"true\"\n [qdPopoverFlipIntoViewport]=\"true\"\n (opened)=\"onOpenDropdown()\"\n (closed)=\"onDropdownClosed()\"\n (click)=\"enterClick.emit()\"\n qdPopoverPlacement=\"bottom-start\"\n >\n {{ (selectedOption?.i18n | translate) || placeholder }}\n\n <div class=\"qd-dropdown-suffix\">\n <qd-icon *ngIf=\"hasError\" class=\"qd-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n </div>\n </div>\n</div>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly && (hasHint || hasError)\"\n [hint]=\"hasHint ? config.hint.i18n : ''\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"[selectedOption]\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"[selectedOption]\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #dropdownMenu>\n <qd-dropdown-options\n [filter]=\"filter\"\n [filterText]=\"filterText\"\n [testId]=\"testId\"\n [id]=\"id\"\n (filterChange)=\"handleFilterChange($event)\"\n (optionClick)=\"handleClick($event)\"\n ></qd-dropdown-options>\n</ng-template>\n", styles: [".qd-dropdown__wrapper{position:relative;margin-bottom:.375rem}.qd-dropdown__wrapper.dense{margin-bottom:0}.qd-dropdown__wrapper .qd-dropdown__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.25rem;background:#fff;color:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-dropdown__wrapper .qd-dropdown__box.dense{margin-bottom:0}.qd-dropdown-selected .qd-dropdown__wrapper .qd-dropdown__box{color:#171717}.qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown__wrapper .qd-dropdown__box:active,.qd-dropdown__wrapper .qd-dropdown__box:hover{padding:0 .6875rem;border-width:.125rem;border-color:#171717;line-height:2.125rem;outline:0}.qd-dropdown__wrapper .qd-dropdown__box:active{color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:hover:after{border-top-color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:after{position:absolute;z-index:5;top:1rem;right:.75rem;width:0;height:0;border-top:.3125rem solid rgb(180,180,180);border-right:.3125rem solid rgba(255,255,255,0);border-left:.3125rem solid rgba(255,255,255,0);content:\"\";pointer-events:none}.qd-dropdown__wrapper .qd-dropdown__box .qd-dropdown-suffix{position:relative;z-index:8;margin-right:1rem;background:#fff}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box{background:#f5f5f5;color:#979797}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:active{padding:0 .75rem;border:.0625rem solid rgb(180,180,180);line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly{color:#069;cursor:pointer}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:hover,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:active,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:focus{color:#069;text-decoration:underline}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly{color:#069;cursor:pointer}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:hover,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:active,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:focus{color:#069;text-decoration:underline}.qd-dropdown-error .qd-dropdown__box{padding:0 .75rem;border:.0625rem solid rgb(199,0,35);line-height:2.25rem}.qd-dropdown-error .qd-dropdown__box:focus,.qd-dropdown-error .qd-dropdown__box:hover,.qd-dropdown-error .qd-dropdown__box:active{padding:0 .6875rem;border:.125rem solid rgb(199,0,35);line-height:2.125rem}.qd-dropdown-error .qd-dropdown__box .qd-error-icon{color:#c70023}.qd-dropdown{display:block;height:4.5rem;margin-bottom:.75rem}.qd-dropdown.dense{width:100%;height:auto;margin-bottom:0}.qd-dropdown.dense .qd-dropdown__wrapper,.qd-dropdown.dense .qd-dropdown__box{margin-bottom:0}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box{padding:0 .6875rem;border-width:.125rem;border-color:#069;line-height:2.125rem}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box:after{border-top:none;border-bottom:.3125rem solid rgb(23,23,23)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdDropdownOptionsComponent, selector: "qd-dropdown-options", inputs: ["filter", "filterText", "testId", "id"], outputs: ["filterChange", "optionClick"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
11010
11112
|
}
|
|
11011
11113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDropdownComponent, decorators: [{
|
|
11012
11114
|
type: Component,
|
|
@@ -11024,7 +11126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
11024
11126
|
provide: QD_FOCUSABLE_TOKEN,
|
|
11025
11127
|
useExisting: QdDropdownComponent
|
|
11026
11128
|
}
|
|
11027
|
-
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-dropdown' }, standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div class=\"qd-dropdown__wrapper\">\n <div\n class=\"qd-dropdown__box\"\n tabindex=\"0\"\n *ngIf=\"!readonly && !viewonly && hasOptions\"\n [qdPopoverOnClick]=\"dropdownMenu\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverDisabled]=\"disabled\"\n [qdPopoverMaxHeight]=\"qdPopoverMaxHeight\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverEnableKeyControl]=\"true\"\n [qdPopoverFlipIntoViewport]=\"true\"\n (opened)=\"onOpenDropdown()\"\n (closed)=\"onDropdownClosed()\"\n (click)=\"enterClick.emit()\"\n
|
|
11129
|
+
], encapsulation: ViewEncapsulation.None, host: { class: 'qd-dropdown' }, standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div class=\"qd-dropdown__wrapper\">\n <div\n class=\"qd-dropdown__box\"\n tabindex=\"0\"\n *ngIf=\"!readonly && !viewonly && hasOptions\"\n [qdPopoverOnClick]=\"dropdownMenu\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverDisabled]=\"disabled\"\n [qdPopoverMaxHeight]=\"qdPopoverMaxHeight\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverEnableKeyControl]=\"true\"\n [qdPopoverFlipIntoViewport]=\"true\"\n (opened)=\"onOpenDropdown()\"\n (closed)=\"onDropdownClosed()\"\n (click)=\"enterClick.emit()\"\n qdPopoverPlacement=\"bottom-start\"\n >\n {{ (selectedOption?.i18n | translate) || placeholder }}\n\n <div class=\"qd-dropdown-suffix\">\n <qd-icon *ngIf=\"hasError\" class=\"qd-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n </div>\n </div>\n</div>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly && (hasHint || hasError)\"\n [hint]=\"hasHint ? config.hint.i18n : ''\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"[selectedOption]\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"[selectedOption]\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #dropdownMenu>\n <qd-dropdown-options\n [filter]=\"filter\"\n [filterText]=\"filterText\"\n [testId]=\"testId\"\n [id]=\"id\"\n (filterChange)=\"handleFilterChange($event)\"\n (optionClick)=\"handleClick($event)\"\n ></qd-dropdown-options>\n</ng-template>\n", styles: [".qd-dropdown__wrapper{position:relative;margin-bottom:.375rem}.qd-dropdown__wrapper.dense{margin-bottom:0}.qd-dropdown__wrapper .qd-dropdown__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(180,180,180);margin-bottom:.25rem;background:#fff;color:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-dropdown__wrapper .qd-dropdown__box.dense{margin-bottom:0}.qd-dropdown-selected .qd-dropdown__wrapper .qd-dropdown__box{color:#171717}.qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown__wrapper .qd-dropdown__box:active,.qd-dropdown__wrapper .qd-dropdown__box:hover{padding:0 .6875rem;border-width:.125rem;border-color:#171717;line-height:2.125rem;outline:0}.qd-dropdown__wrapper .qd-dropdown__box:active{color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:hover:after{border-top-color:#b4b4b4}.qd-dropdown__wrapper .qd-dropdown__box:after{position:absolute;z-index:5;top:1rem;right:.75rem;width:0;height:0;border-top:.3125rem solid rgb(180,180,180);border-right:.3125rem solid rgba(255,255,255,0);border-left:.3125rem solid rgba(255,255,255,0);content:\"\";pointer-events:none}.qd-dropdown__wrapper .qd-dropdown__box .qd-dropdown-suffix{position:relative;z-index:8;margin-right:1rem;background:#fff}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box{background:#f5f5f5;color:#979797}.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-disabled .qd-dropdown__wrapper .qd-dropdown__box:active{padding:0 .75rem;border:.0625rem solid rgb(180,180,180);line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-readonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box{height:inherit;padding:0;border:none;line-height:2.25rem}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:focus,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:hover,.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:active{color:inherit}.qd-dropdown-viewonly .qd-dropdown__wrapper .qd-dropdown__box:after{display:none}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly{color:#069;cursor:pointer}.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:hover,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:active,.qd-dropdown--readonly-action .qd-dropdown__box.qd-dropdown__box--readonly:focus{color:#069;text-decoration:underline}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly{color:#069;cursor:pointer}.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:hover,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:active,.qd-dropdown--viewonly-action .qd-dropdown__box.qd-dropdown__box--viewonly:focus{color:#069;text-decoration:underline}.qd-dropdown-error .qd-dropdown__box{padding:0 .75rem;border:.0625rem solid rgb(199,0,35);line-height:2.25rem}.qd-dropdown-error .qd-dropdown__box:focus,.qd-dropdown-error .qd-dropdown__box:hover,.qd-dropdown-error .qd-dropdown__box:active{padding:0 .6875rem;border:.125rem solid rgb(199,0,35);line-height:2.125rem}.qd-dropdown-error .qd-dropdown__box .qd-error-icon{color:#c70023}.qd-dropdown{display:block;height:4.5rem;margin-bottom:.75rem}.qd-dropdown.dense{width:100%;height:auto;margin-bottom:0}.qd-dropdown.dense .qd-dropdown__wrapper,.qd-dropdown.dense .qd-dropdown__box{margin-bottom:0}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box{padding:0 .6875rem;border-width:.125rem;border-color:#069;line-height:2.125rem}.qd-dropdown-open .qd-dropdown__wrapper .qd-dropdown__box:after{border-top:none;border-bottom:.3125rem solid rgb(23,23,23)}\n"] }]
|
|
11028
11130
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
11029
11131
|
type: Input
|
|
11030
11132
|
}], id: [{
|
|
@@ -11162,7 +11264,7 @@ class QdInputUnitsComponent {
|
|
|
11162
11264
|
this.closed.emit();
|
|
11163
11265
|
}
|
|
11164
11266
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputUnitsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11165
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdInputUnitsComponent, isStandalone: false, selector: "qd-input-units", inputs: { config: "config", unitValue: ["unit", "unitValue"] }, outputs: { unitChange: "unitChange", opened: "opened", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<button\n *ngIf=\"config.units.length > 1; else singleUnit\"\n [qdPopoverOnClick]=\"units\"\n (opened)=\"handleOpened()\"\n (closed)=\"handleClosed()\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverMaxHeight]=\"500\"\n class=\"qd-input-unit\"\n [ngClass]=\"{ 'qd-input-unit--selected': _unit }\"\n>\n <qd-icon icon=\"ctrlDown\" class=\"qd-input-unit-icon\"></qd-icon>\n {{ _unit ? (_unit.i18n | translate) : (unitsPlaceholder | translate) }}\n</button>\n\n<ng-template #singleUnit>\n <div *ngIf=\"!config.units[0].disabled\" class=\"qd-input-single-unit\">\n {{ config.units[0].i18n | translate }}\n </div>\n</ng-template>\n\n<ng-template #units>\n <button\n *ngFor=\"let unit of config.units\"\n class=\"qd-input-unit-option\"\n [ngClass]=\"{ 'qd-input-unit-option--disabled': unit.disabled }\"\n (click)=\"handleUnitSelection(unit)\"\n >\n {{ unit.i18n | translate }}\n </button>\n</ng-template>\n", styles: [".qd-input-unit{height:2.25rem;padding:0 .5625rem 0 .25rem;border-left:.0625rem solid rgb(180,180,180);margin:0;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem;white-space:nowrap}.qd-input-unit-icon{color:#171717;font-size:1.125rem;font-weight:700;vertical-align:bottom}.qd-input-single-unit{height:2.25rem;padding:0 .4375rem 0 .5rem;border-left:.0625rem solid rgb(180,180,180);background-color:#fff;font-size:.875rem;line-height:2.25rem;white-space:nowrap}.qd-input-unit-option{display:block;width:100%;height:2.25rem;padding:0 .6875rem;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem;text-align:left;white-space:nowrap}.qd-input-unit-option--disabled{color:#b4b4b4;cursor:auto}.qd-input-unit-option:focus,.qd-input-unit-option:hover,.qd-input-unit-option:active{background:#f5f5f5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "
|
|
11267
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdInputUnitsComponent, isStandalone: false, selector: "qd-input-units", inputs: { config: "config", unitValue: ["unit", "unitValue"] }, outputs: { unitChange: "unitChange", opened: "opened", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<button\n *ngIf=\"config.units.length > 1; else singleUnit\"\n [qdPopoverOnClick]=\"units\"\n (opened)=\"handleOpened()\"\n (closed)=\"handleClosed()\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverMaxHeight]=\"500\"\n class=\"qd-input-unit\"\n [ngClass]=\"{ 'qd-input-unit--selected': _unit }\"\n>\n <qd-icon icon=\"ctrlDown\" class=\"qd-input-unit-icon\"></qd-icon>\n {{ _unit ? (_unit.i18n | translate) : (unitsPlaceholder | translate) }}\n</button>\n\n<ng-template #singleUnit>\n <div *ngIf=\"!config.units[0].disabled\" class=\"qd-input-single-unit\">\n {{ config.units[0].i18n | translate }}\n </div>\n</ng-template>\n\n<ng-template #units>\n <button\n *ngFor=\"let unit of config.units\"\n class=\"qd-input-unit-option\"\n [ngClass]=\"{ 'qd-input-unit-option--disabled': unit.disabled }\"\n (click)=\"handleUnitSelection(unit)\"\n >\n {{ unit.i18n | translate }}\n </button>\n</ng-template>\n", styles: [".qd-input-unit{height:2.25rem;padding:0 .5625rem 0 .25rem;border-left:.0625rem solid rgb(180,180,180);margin:0;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem;white-space:nowrap}.qd-input-unit-icon{color:#171717;font-size:1.125rem;font-weight:700;vertical-align:bottom}.qd-input-single-unit{height:2.25rem;padding:0 .4375rem 0 .5rem;border-left:.0625rem solid rgb(180,180,180);background-color:#fff;font-size:.875rem;line-height:2.25rem;white-space:nowrap}.qd-input-unit-option{display:block;width:100%;height:2.25rem;padding:0 .6875rem;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem;text-align:left;white-space:nowrap}.qd-input-unit-option--disabled{color:#b4b4b4;cursor:auto}.qd-input-unit-option:focus,.qd-input-unit-option:hover,.qd-input-unit-option:active{background:#f5f5f5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
11166
11268
|
}
|
|
11167
11269
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputUnitsComponent, decorators: [{
|
|
11168
11270
|
type: Component,
|
|
@@ -11182,354 +11284,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
11182
11284
|
|
|
11183
11285
|
class QdInputOptionsComponent {
|
|
11184
11286
|
resolverRegistry = inject(QdFormOptionsResolverRegistry);
|
|
11185
|
-
|
|
11186
|
-
|
|
11187
|
-
template = new EventEmitter();
|
|
11188
|
-
formInputComponents = new EventEmitter();
|
|
11287
|
+
keyboardService = inject(QdFormKeyboardService);
|
|
11288
|
+
optionsService = inject(QdFormOptionsService);
|
|
11189
11289
|
optionSelected = new EventEmitter();
|
|
11190
|
-
|
|
11191
|
-
|
|
11290
|
+
optionComponents;
|
|
11291
|
+
filteredOptions$ = this.optionsService.filteredOptions$;
|
|
11292
|
+
optionsRequestState$ = this.optionsService.delayedRequestState$;
|
|
11293
|
+
QdFormOptionsRequestState = QdFormOptionsRequestState;
|
|
11294
|
+
_optionsResolver = null;
|
|
11192
11295
|
get requestLoadingHintI18n() {
|
|
11193
11296
|
return this._optionsResolver?.requestLoadingHint?.i18n || 'i18n.qd.input.options.loading';
|
|
11194
11297
|
}
|
|
11195
11298
|
get requestErrorHintI18n() {
|
|
11196
11299
|
return this._optionsResolver?.requestErrorHint?.i18n || 'i18n.qd.input.options.error';
|
|
11197
11300
|
}
|
|
11198
|
-
|
|
11199
|
-
|
|
11301
|
+
onKeyDown(event) {
|
|
11302
|
+
switch (event.key) {
|
|
11303
|
+
case 'Enter': {
|
|
11304
|
+
const active = this.keyboardService.getActiveOption();
|
|
11305
|
+
if (!active?.option || active.option.disabled || !active.option.value)
|
|
11306
|
+
return;
|
|
11307
|
+
this.optionSelected.emit(active.option);
|
|
11308
|
+
break;
|
|
11309
|
+
}
|
|
11310
|
+
case 'ArrowUp':
|
|
11311
|
+
case 'ArrowDown':
|
|
11312
|
+
this.keyboardService.handleKeydown(event);
|
|
11313
|
+
}
|
|
11314
|
+
}
|
|
11200
11315
|
ngOnInit() {
|
|
11201
11316
|
this._optionsResolver = this.resolverRegistry.findResolver();
|
|
11202
11317
|
}
|
|
11203
11318
|
ngAfterViewInit() {
|
|
11204
|
-
this.
|
|
11205
|
-
this.formInputComponents.emit(this._formInputComponents);
|
|
11319
|
+
this.keyboardService.init(this.optionComponents);
|
|
11206
11320
|
}
|
|
11207
11321
|
selectOption(option) {
|
|
11208
11322
|
this.optionSelected.emit(option);
|
|
11209
11323
|
}
|
|
11210
11324
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11211
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdInputOptionsComponent, isStandalone: false, selector: "qd-input-options",
|
|
11325
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdInputOptionsComponent, isStandalone: false, selector: "qd-input-options", outputs: { optionSelected: "optionSelected" }, host: { listeners: { "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "optionComponents", predicate: QdFormInputComponent, descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"optionsRequestState$ | async\">\n <div *ngSwitchCase=\"QdFormOptionsRequestState.PENDING\" class=\"options-hint\">\n {{ requestLoadingHintI18n | translate }}\n </div>\n <div *ngSwitchCase=\"QdFormOptionsRequestState.ERROR\" class=\"options-hint error\">\n {{ requestErrorHintI18n | translate }}\n </div>\n <ng-container *ngSwitchDefault>\n <div\n class=\"qd-input__option\"\n *ngFor=\"let option of filteredOptions$ | async\"\n [ngClass]=\"option.disabled ? 'qd-input__option--disabled' : ''\"\n >\n <qd-form-input *ngIf=\"option\" (click)=\"selectOption(option)\" [option]=\"option\" class=\"qd-input__form-input\">\n <input\n class=\"qd-input__option-input\"\n name=\"dropdown\"\n type=\"radio\"\n [disabled]=\"option.disabled\"\n [value]=\"option.value\"\n />\n\n <label class=\"qd-input__option-label\">\n {{ option.i18n | translate }}\n </label>\n </qd-form-input>\n </div>\n </ng-container>\n</ng-container>\n", styles: [".qd-input__option{background:#fff}.qd-input__option .qd-input__form-input{display:flex;min-height:2.25rem;align-items:center;padding-top:.5rem;padding-bottom:.5rem;padding-left:.75rem;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:1.4}.qd-input__option .qd-input__form-input:focus,.qd-input__option .qd-input__form-input:hover,.qd-input__option .qd-input__form-input.active{background:#f5f5f5;color:#171717}.qd-input__option .qd-input__option-label{cursor:pointer;overflow-wrap:anywhere}.qd-input__option .qd-input__option-input{display:none}.qd-input__option .qd-input__option-input:checked+label{background:#f5f5f5;color:#171717}.qd-input__option .qd-input__option-input:focus+.qd-input__form-input{background:#f5f5f5;color:#171717}.qd-input__option.qd-input__option--disabled>.qd-input__form-input{color:#b4b4b4;cursor:default;pointer-events:none}.options-hint{color:#757575;font-size:.75rem;font-weight:500;line-height:1.125rem;padding-right:.75rem;padding-left:.75rem;line-height:2.25rem}.options-hint.error{color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: QdFormInputComponent, selector: "qd-form-input", inputs: ["option"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
11212
11326
|
}
|
|
11213
11327
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputOptionsComponent, decorators: [{
|
|
11214
11328
|
type: Component,
|
|
11215
|
-
args: [{ selector: 'qd-input-options', standalone: false, template: "<ng-
|
|
11216
|
-
}], propDecorators: {
|
|
11217
|
-
type: Input
|
|
11218
|
-
}], optionsRequestState$: [{
|
|
11219
|
-
type: Input
|
|
11220
|
-
}], template: [{
|
|
11221
|
-
type: Output
|
|
11222
|
-
}], formInputComponents: [{
|
|
11223
|
-
type: Output
|
|
11224
|
-
}], optionSelected: [{
|
|
11329
|
+
args: [{ selector: 'qd-input-options', standalone: false, template: "<ng-container [ngSwitch]=\"optionsRequestState$ | async\">\n <div *ngSwitchCase=\"QdFormOptionsRequestState.PENDING\" class=\"options-hint\">\n {{ requestLoadingHintI18n | translate }}\n </div>\n <div *ngSwitchCase=\"QdFormOptionsRequestState.ERROR\" class=\"options-hint error\">\n {{ requestErrorHintI18n | translate }}\n </div>\n <ng-container *ngSwitchDefault>\n <div\n class=\"qd-input__option\"\n *ngFor=\"let option of filteredOptions$ | async\"\n [ngClass]=\"option.disabled ? 'qd-input__option--disabled' : ''\"\n >\n <qd-form-input *ngIf=\"option\" (click)=\"selectOption(option)\" [option]=\"option\" class=\"qd-input__form-input\">\n <input\n class=\"qd-input__option-input\"\n name=\"dropdown\"\n type=\"radio\"\n [disabled]=\"option.disabled\"\n [value]=\"option.value\"\n />\n\n <label class=\"qd-input__option-label\">\n {{ option.i18n | translate }}\n </label>\n </qd-form-input>\n </div>\n </ng-container>\n</ng-container>\n", styles: [".qd-input__option{background:#fff}.qd-input__option .qd-input__form-input{display:flex;min-height:2.25rem;align-items:center;padding-top:.5rem;padding-bottom:.5rem;padding-left:.75rem;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400;line-height:1.4}.qd-input__option .qd-input__form-input:focus,.qd-input__option .qd-input__form-input:hover,.qd-input__option .qd-input__form-input.active{background:#f5f5f5;color:#171717}.qd-input__option .qd-input__option-label{cursor:pointer;overflow-wrap:anywhere}.qd-input__option .qd-input__option-input{display:none}.qd-input__option .qd-input__option-input:checked+label{background:#f5f5f5;color:#171717}.qd-input__option .qd-input__option-input:focus+.qd-input__form-input{background:#f5f5f5;color:#171717}.qd-input__option.qd-input__option--disabled>.qd-input__form-input{color:#b4b4b4;cursor:default;pointer-events:none}.options-hint{color:#757575;font-size:.75rem;font-weight:500;line-height:1.125rem;padding-right:.75rem;padding-left:.75rem;line-height:2.25rem}.options-hint.error{color:#c70023}\n"] }]
|
|
11330
|
+
}], propDecorators: { optionSelected: [{
|
|
11225
11331
|
type: Output
|
|
11226
|
-
}],
|
|
11227
|
-
type: ViewChild,
|
|
11228
|
-
args: ['options']
|
|
11229
|
-
}], _formInputComponents: [{
|
|
11332
|
+
}], optionComponents: [{
|
|
11230
11333
|
type: ViewChildren,
|
|
11231
11334
|
args: [QdFormInputComponent]
|
|
11232
|
-
}]
|
|
11233
|
-
|
|
11234
|
-
// TODO: Split into smaller units – directive handles too many responsibilities (popover, options, keyboard, state, ...)
|
|
11235
|
-
/**
|
|
11236
|
-
* Manages the options popover of a form input, including resolver-based options.
|
|
11237
|
-
* The resolver trigger rules are defined on {@link QdFormOptionsResolver}.
|
|
11238
|
-
*
|
|
11239
|
-
* Invariant: the `value` setter resolves options only on actual value changes. Selecting
|
|
11240
|
-
* an option assigns the option's i18n key as the new value right away, because the host
|
|
11241
|
-
* component writes exactly that key back into the `value` binding for display purposes —
|
|
11242
|
-
* the write-back therefore arrives as a no-op instead of resolving with the i18n key.
|
|
11243
|
-
*/
|
|
11244
|
-
class QdInputOptionsDirective extends QdPopoverOnClickDirective {
|
|
11245
|
-
translateService = inject(TranslateService);
|
|
11246
|
-
viewContainerRef = inject(ViewContainerRef);
|
|
11247
|
-
changeDetectorRef = inject(ChangeDetectorRef);
|
|
11248
|
-
resolverRegistry = inject(QdFormOptionsResolverRegistry);
|
|
11249
|
-
controlContainer = inject(ControlContainer, { optional: true });
|
|
11250
|
-
get value() {
|
|
11251
|
-
return this._value;
|
|
11252
|
-
}
|
|
11253
|
-
/**
|
|
11254
|
-
* The value of the form input
|
|
11255
|
-
*/
|
|
11256
|
-
set value(value) {
|
|
11257
|
-
if (value === this._value)
|
|
11258
|
-
return;
|
|
11259
|
-
this._value = value;
|
|
11260
|
-
if (this.hasOptions() && !this.config?.readonly && !this.config?.viewonly)
|
|
11261
|
-
this.updateOptions();
|
|
11262
|
-
}
|
|
11263
|
-
/**
|
|
11264
|
-
* The configuration of the form input
|
|
11265
|
-
*
|
|
11266
|
-
* @example
|
|
11267
|
-
* {
|
|
11268
|
-
* label: { i18n: 'label' },
|
|
11269
|
-
* placeholder: { i18n: 'placeholder' },
|
|
11270
|
-
* hint: { i18n: 'hint' }
|
|
11271
|
-
* };
|
|
11272
|
-
*/
|
|
11273
|
-
config;
|
|
11274
|
-
/**
|
|
11275
|
-
* Emits event when the value has changed. Note: Emits on keyup (no longer on click, as before)!
|
|
11276
|
-
*/
|
|
11277
|
-
enterClick = new EventEmitter();
|
|
11278
|
-
/**
|
|
11279
|
-
* Emits event when an option in the fly out has been selected.
|
|
11280
|
-
*/
|
|
11281
|
-
optionSelected = new EventEmitter();
|
|
11282
|
-
/**
|
|
11283
|
-
* Emits the resolved options and the depended-on values they were resolved with,
|
|
11284
|
-
* after every resolver run.
|
|
11285
|
-
*
|
|
11286
|
-
* The resolver fetches the options; this output lets the component react to them —
|
|
11287
|
-
* typically to drop a selection the new options no longer contain (e.g. clear the
|
|
11288
|
-
* chosen city once the country changed).
|
|
11289
|
-
*
|
|
11290
|
-
* @example
|
|
11291
|
-
* onCityOptionsResolved(event: QdFormOptionsResolvedEvent): void {
|
|
11292
|
-
* const city = this.form.get('city');
|
|
11293
|
-
* if (city?.value && !event.options.some(o => o.value === city.value)) city.reset();
|
|
11294
|
-
* }
|
|
11295
|
-
*/
|
|
11296
|
-
optionsResolved = new EventEmitter();
|
|
11297
|
-
onSpace() {
|
|
11298
|
-
if (this.hasOptions())
|
|
11299
|
-
this.open();
|
|
11300
|
-
}
|
|
11301
|
-
onEscape() {
|
|
11302
|
-
if (this.hasOptions())
|
|
11303
|
-
this.closePopover();
|
|
11304
|
-
}
|
|
11305
|
-
onTab() {
|
|
11306
|
-
if (this.hasOptions())
|
|
11307
|
-
this.closePopover();
|
|
11308
|
-
}
|
|
11309
|
-
_optionsResolver;
|
|
11310
|
-
_optionsRequestStateSubject = new BehaviorSubject(QdFormOptionsRequestState.IDLE);
|
|
11311
|
-
_optionsLoadingHintDelay = 400;
|
|
11312
|
-
_optionsLoadingHintMinTime = 300;
|
|
11313
|
-
_hostElement;
|
|
11314
|
-
_keyManager;
|
|
11315
|
-
_value;
|
|
11316
|
-
_filteredOptionsSubject = new BehaviorSubject([]);
|
|
11317
|
-
_destroyed$ = new Subject();
|
|
11318
|
-
_dependsOnSubscription = null;
|
|
11319
|
-
_resolveRequests$ = new Subject();
|
|
11320
|
-
filteredOptions$ = this._filteredOptionsSubject.asObservable();
|
|
11321
|
-
optionsRequestState$ = this._optionsRequestStateSubject.pipe(startWith(this._optionsRequestStateSubject.value), pairwise(), debounce(([previousRequestState, currentRequestState]) => currentRequestState === QdFormOptionsRequestState.PENDING &&
|
|
11322
|
-
previousRequestState !== QdFormOptionsRequestState.ERROR
|
|
11323
|
-
? timer(this._optionsLoadingHintDelay)
|
|
11324
|
-
: of(true)),
|
|
11325
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
11326
|
-
map(([_, currentRequestState]) => currentRequestState), concatMap(requestState => requestState === QdFormOptionsRequestState.PENDING
|
|
11327
|
-
? timer(this._optionsLoadingHintMinTime).pipe(switchMap(() => EMPTY), startWith(requestState))
|
|
11328
|
-
: of(requestState)));
|
|
11329
|
-
formInputComponents;
|
|
11330
|
-
constructor() {
|
|
11331
|
-
super();
|
|
11332
|
-
this._hostElement = this.hostRef.nativeElement;
|
|
11333
|
-
}
|
|
11334
|
-
ngOnInit() {
|
|
11335
|
-
this.initializeOptionsResolver();
|
|
11336
|
-
this.publishLatestResolvedOptions();
|
|
11337
|
-
if (this.hasOptions() && !this.config?.readonly && !this.config?.viewonly) {
|
|
11338
|
-
this.setPopoverProperties();
|
|
11339
|
-
super.ngOnInit();
|
|
11340
|
-
this.updateOptions();
|
|
11341
|
-
this.updateOptionsWhenDependsOnControlsChange();
|
|
11342
|
-
const options = this.config.options;
|
|
11343
|
-
if (options) {
|
|
11344
|
-
const currentOption = options.find(option => option.value === this.value);
|
|
11345
|
-
if (currentOption)
|
|
11346
|
-
this.selectOption(currentOption);
|
|
11347
|
-
}
|
|
11348
|
-
}
|
|
11349
|
-
this.logWarningIfBothOptionsAndResolverAreUsed();
|
|
11350
|
-
this.logWarningIfDependsOnWithoutFormGroup();
|
|
11351
|
-
}
|
|
11352
|
-
initializeOptionsResolver() {
|
|
11353
|
-
this.resolverRegistry.initialize(this.config?.optionsResolverName);
|
|
11354
|
-
this._optionsResolver = this.resolverRegistry.findResolver();
|
|
11355
|
-
}
|
|
11356
|
-
ngOnChanges(changes) {
|
|
11357
|
-
if (changes['config'] && !changes['config'].isFirstChange()) {
|
|
11358
|
-
this.updateOptionsWhenDependsOnControlsChange();
|
|
11359
|
-
this.updateOptions();
|
|
11360
|
-
}
|
|
11361
|
-
}
|
|
11362
|
-
ngOnDestroy() {
|
|
11363
|
-
super.ngOnDestroy();
|
|
11364
|
-
this._destroyed$.next();
|
|
11365
|
-
this._destroyed$.complete();
|
|
11366
|
-
}
|
|
11367
|
-
ngAfterViewInit() {
|
|
11368
|
-
this._hostElement.querySelector('input')?.addEventListener('keydown', this.onKeyDown.bind(this));
|
|
11369
|
-
if (this.hasOptions() && !this.config?.readonly && !this.config?.viewonly)
|
|
11370
|
-
this.createKeyManager();
|
|
11371
|
-
}
|
|
11372
|
-
onKeyDown(event) {
|
|
11373
|
-
if (!this._keyManager) {
|
|
11374
|
-
if (event.key === 'Enter')
|
|
11375
|
-
this.enterClick.emit();
|
|
11376
|
-
return;
|
|
11377
|
-
}
|
|
11378
|
-
if (event.key === 'Enter') {
|
|
11379
|
-
const newOption = this._filteredOptionsSubject.value.length === 0 ? undefined : this._keyManager?.activeItem?.option;
|
|
11380
|
-
if (newOption) {
|
|
11381
|
-
if (newOption.disabled || !newOption.value)
|
|
11382
|
-
return;
|
|
11383
|
-
this.selectOption(newOption);
|
|
11384
|
-
}
|
|
11385
|
-
this.enterClick.emit();
|
|
11386
|
-
this.closePopover();
|
|
11387
|
-
}
|
|
11388
|
-
else {
|
|
11389
|
-
this.open();
|
|
11390
|
-
this._keyManager.onKeydown(event);
|
|
11391
|
-
this._keyManager.activeItem?.scrollIntoView();
|
|
11392
|
-
}
|
|
11393
|
-
}
|
|
11394
|
-
selectOption(option) {
|
|
11395
|
-
this._value = option.i18n;
|
|
11396
|
-
this.optionSelected.emit(option);
|
|
11397
|
-
this.closePopover();
|
|
11398
|
-
}
|
|
11399
|
-
logWarningIfBothOptionsAndResolverAreUsed() {
|
|
11400
|
-
if (this.config?.options && this.config.options.length > 0 && !!this._optionsResolver) {
|
|
11401
|
-
console.warn('Quadrel Framework | QdInput - If both options and QD_FORM_OPTIONS_RESOLVER are used, ' +
|
|
11402
|
-
'the options will be ignored.');
|
|
11403
|
-
}
|
|
11404
|
-
}
|
|
11405
|
-
logWarningIfDependsOnWithoutFormGroup() {
|
|
11406
|
-
if (this.config?.optionsDependsOn?.length && !this.controlContainer?.control) {
|
|
11407
|
-
console.warn('Quadrel Framework | QdForms - "optionsDependsOn" is set but no parent form group was found. ' +
|
|
11408
|
-
'The depends-on configuration will be ignored.');
|
|
11409
|
-
}
|
|
11410
|
-
}
|
|
11411
|
-
closePopover() {
|
|
11412
|
-
this.close();
|
|
11413
|
-
this.createKeyManager();
|
|
11414
|
-
}
|
|
11415
|
-
createKeyManager() {
|
|
11416
|
-
if (!this.formInputComponents)
|
|
11417
|
-
return;
|
|
11418
|
-
this._keyManager = new ActiveDescendantKeyManager(this.formInputComponents).withWrap().withTypeAhead();
|
|
11419
|
-
}
|
|
11420
|
-
setPopoverProperties() {
|
|
11421
|
-
const optionsComponent = this.viewContainerRef.createComponent(QdInputOptionsComponent).instance;
|
|
11422
|
-
optionsComponent.template
|
|
11423
|
-
.pipe(takeUntil(this._destroyed$))
|
|
11424
|
-
.subscribe(template => (this.qdPopoverOnClick = template));
|
|
11425
|
-
optionsComponent.formInputComponents.pipe(takeUntil(this._destroyed$)).subscribe(formInputComponents => {
|
|
11426
|
-
this.formInputComponents = formInputComponents;
|
|
11427
|
-
this.createKeyManager();
|
|
11428
|
-
});
|
|
11429
|
-
optionsComponent.optionSelected.pipe(takeUntil(this._destroyed$)).subscribe(value => {
|
|
11430
|
-
this.selectOption(value);
|
|
11431
|
-
});
|
|
11432
|
-
optionsComponent.filteredOptions$ = this.filteredOptions$;
|
|
11433
|
-
optionsComponent.optionsRequestState$ = this.optionsRequestState$;
|
|
11434
|
-
this.qdPopoverAutoSize = { width: true };
|
|
11435
|
-
this.qdPopoverCloseStrategy = 'onOutsideClick';
|
|
11436
|
-
this.qdPopoverMaxHeight = 288;
|
|
11437
|
-
this.qdPopoverStopPropagation = false;
|
|
11438
|
-
this.positionStrategy = [
|
|
11439
|
-
{
|
|
11440
|
-
originX: 'start',
|
|
11441
|
-
originY: 'bottom',
|
|
11442
|
-
overlayX: 'start',
|
|
11443
|
-
overlayY: 'top'
|
|
11444
|
-
},
|
|
11445
|
-
{
|
|
11446
|
-
originX: 'start',
|
|
11447
|
-
originY: 'top',
|
|
11448
|
-
overlayX: 'start',
|
|
11449
|
-
overlayY: 'bottom',
|
|
11450
|
-
weight: 0.8
|
|
11451
|
-
}
|
|
11452
|
-
];
|
|
11453
|
-
}
|
|
11454
|
-
hasOptions() {
|
|
11455
|
-
return (this.config?.options && this.config.options.length > 0) || !!this._optionsResolver;
|
|
11456
|
-
}
|
|
11457
|
-
updateOptions() {
|
|
11458
|
-
if (this._optionsResolver) {
|
|
11459
|
-
this.updateOptionsWithResolver();
|
|
11460
|
-
}
|
|
11461
|
-
else {
|
|
11462
|
-
this.filterOptions();
|
|
11463
|
-
}
|
|
11464
|
-
}
|
|
11465
|
-
updateOptionsWhenDependsOnControlsChange() {
|
|
11466
|
-
this._dependsOnSubscription?.unsubscribe();
|
|
11467
|
-
this._dependsOnSubscription = null;
|
|
11468
|
-
const dependsOnControls = qdGetDependsOnControls(this.controlContainer?.control, this.config?.optionsDependsOn);
|
|
11469
|
-
if (dependsOnControls.length === 0)
|
|
11470
|
-
return;
|
|
11471
|
-
this._dependsOnSubscription = merge(...dependsOnControls.map(control => control.valueChanges.pipe(startWith(control.value), distinctUntilChanged(isEqual$1), skip(1))))
|
|
11472
|
-
.pipe(takeUntil(this._destroyed$))
|
|
11473
|
-
.subscribe(() => {
|
|
11474
|
-
this._filteredOptionsSubject.next([]);
|
|
11475
|
-
this.updateOptions();
|
|
11476
|
-
});
|
|
11477
|
-
}
|
|
11478
|
-
updateOptionsWithResolver() {
|
|
11479
|
-
this._resolveRequests$.next();
|
|
11480
|
-
}
|
|
11481
|
-
publishLatestResolvedOptions() {
|
|
11482
|
-
this._resolveRequests$
|
|
11483
|
-
.pipe(tap(() => this._optionsRequestStateSubject.next(QdFormOptionsRequestState.PENDING)), map(() => ({
|
|
11484
|
-
value: this.value.toString(),
|
|
11485
|
-
dependencies: qdCollectOptionsDependencies(this.controlContainer?.control, this.config?.optionsDependsOn)
|
|
11486
|
-
})), switchMap(({ value, dependencies }) => this._optionsResolver.resolve(value, dependencies).pipe(take(1), map(options => ({ options, dependencies })), catchError(() => {
|
|
11487
|
-
this._optionsRequestStateSubject.next(QdFormOptionsRequestState.ERROR);
|
|
11488
|
-
return EMPTY;
|
|
11489
|
-
}))), takeUntil(this._destroyed$))
|
|
11490
|
-
.subscribe(({ options, dependencies }) => {
|
|
11491
|
-
this._filteredOptionsSubject.next(options);
|
|
11492
|
-
this._optionsRequestStateSubject.next(QdFormOptionsRequestState.SUCCESS);
|
|
11493
|
-
this.optionsResolved.emit({ options, dependencies });
|
|
11494
|
-
const currentOption = options.find(option => option.value === this.value);
|
|
11495
|
-
if (currentOption)
|
|
11496
|
-
this.selectOption(currentOption);
|
|
11497
|
-
});
|
|
11498
|
-
}
|
|
11499
|
-
filterOptions() {
|
|
11500
|
-
const filteredOptions = this.config?.options?.filter(option => this.translateService.instant(option.i18n).toLowerCase().includes(this.value.toString().toLowerCase())) || [];
|
|
11501
|
-
if (filteredOptions.length === 0)
|
|
11502
|
-
this.closePopover();
|
|
11503
|
-
this._filteredOptionsSubject.next(filteredOptions);
|
|
11504
|
-
}
|
|
11505
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputOptionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
11506
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdInputOptionsDirective, isStandalone: false, selector: "[qdInputOptions]", inputs: { value: "value", config: "config" }, outputs: { enterClick: "enterClick", optionSelected: "optionSelected", optionsResolved: "optionsResolved" }, host: { listeners: { "keydown.Space": "onSpace()", "keydown.escape": "onEscape()", "keydown.tab": "onTab()" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
11507
|
-
}
|
|
11508
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputOptionsDirective, decorators: [{
|
|
11509
|
-
type: Directive,
|
|
11510
|
-
args: [{
|
|
11511
|
-
selector: '[qdInputOptions]',
|
|
11512
|
-
standalone: false
|
|
11513
|
-
}]
|
|
11514
|
-
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
11515
|
-
type: Input
|
|
11516
|
-
}], config: [{
|
|
11517
|
-
type: Input
|
|
11518
|
-
}], enterClick: [{
|
|
11519
|
-
type: Output
|
|
11520
|
-
}], optionSelected: [{
|
|
11521
|
-
type: Output
|
|
11522
|
-
}], optionsResolved: [{
|
|
11523
|
-
type: Output
|
|
11524
|
-
}], onSpace: [{
|
|
11525
|
-
type: HostListener,
|
|
11526
|
-
args: ['keydown.Space']
|
|
11527
|
-
}], onEscape: [{
|
|
11528
|
-
type: HostListener,
|
|
11529
|
-
args: ['keydown.escape']
|
|
11530
|
-
}], onTab: [{
|
|
11335
|
+
}], onKeyDown: [{
|
|
11531
11336
|
type: HostListener,
|
|
11532
|
-
args: ['keydown
|
|
11337
|
+
args: ['document:keydown', ['$event']]
|
|
11533
11338
|
}] } });
|
|
11534
11339
|
|
|
11535
11340
|
// @ts-strict-ignore
|
|
@@ -11738,7 +11543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
11738
11543
|
*/
|
|
11739
11544
|
class QdInputComponent {
|
|
11740
11545
|
actionEmitterService = inject(QdFormsActionEmitterService);
|
|
11741
|
-
|
|
11546
|
+
optionsService = inject(QdFormOptionsService);
|
|
11742
11547
|
controlContainer = inject(ControlContainer, { optional: true, host: true, skipSelf: true });
|
|
11743
11548
|
eventBrokerService = inject(QdEventBrokerService, { optional: true });
|
|
11744
11549
|
numberInputService = inject(QdNumberInputService);
|
|
@@ -11817,6 +11622,16 @@ class QdInputComponent {
|
|
|
11817
11622
|
* }
|
|
11818
11623
|
*/
|
|
11819
11624
|
optionsResolved = new EventEmitter();
|
|
11625
|
+
closeOptions() {
|
|
11626
|
+
if (this.isOptionsOpen)
|
|
11627
|
+
this.popover?.close();
|
|
11628
|
+
}
|
|
11629
|
+
openOptionsOnArrow(event) {
|
|
11630
|
+
if (!this.hasOptions || this.isOptionsOpen)
|
|
11631
|
+
return;
|
|
11632
|
+
event.preventDefault();
|
|
11633
|
+
this.popover?.open();
|
|
11634
|
+
}
|
|
11820
11635
|
readonly;
|
|
11821
11636
|
readonlyAction = false;
|
|
11822
11637
|
viewonly;
|
|
@@ -11835,6 +11650,8 @@ class QdInputComponent {
|
|
|
11835
11650
|
return this.isAmbiguousInput;
|
|
11836
11651
|
}
|
|
11837
11652
|
inputElement;
|
|
11653
|
+
popover;
|
|
11654
|
+
isOptionsOpen = false;
|
|
11838
11655
|
inputType;
|
|
11839
11656
|
inputMode;
|
|
11840
11657
|
htmlInputType;
|
|
@@ -11847,8 +11664,8 @@ class QdInputComponent {
|
|
|
11847
11664
|
_value = { value: '' };
|
|
11848
11665
|
_displayValue = '';
|
|
11849
11666
|
control;
|
|
11850
|
-
_optionsResolver;
|
|
11851
11667
|
_subs = new Subscription();
|
|
11668
|
+
_filteredOptions = [];
|
|
11852
11669
|
_isUserTyped = false;
|
|
11853
11670
|
_onChange = () => { };
|
|
11854
11671
|
_onTouch = () => { };
|
|
@@ -11889,7 +11706,8 @@ class QdInputComponent {
|
|
|
11889
11706
|
return [`${displayValue}${this._value.unit ? ' ' + this._value.unit : ''}`];
|
|
11890
11707
|
}
|
|
11891
11708
|
ngOnInit() {
|
|
11892
|
-
this.
|
|
11709
|
+
this.subscribeToOptions();
|
|
11710
|
+
this.optionsService.initialize(this.config);
|
|
11893
11711
|
this.updateConfig();
|
|
11894
11712
|
if (this.controlContainer) {
|
|
11895
11713
|
if (this.formControlName) {
|
|
@@ -11913,6 +11731,8 @@ class QdInputComponent {
|
|
|
11913
11731
|
}
|
|
11914
11732
|
ngOnChanges(changes) {
|
|
11915
11733
|
if (changes['config']) {
|
|
11734
|
+
if (!changes['config'].isFirstChange())
|
|
11735
|
+
this.optionsService.initialize(this.config);
|
|
11916
11736
|
this.updateConfig();
|
|
11917
11737
|
this.normalizeInitialControlValueIfNeeded();
|
|
11918
11738
|
}
|
|
@@ -11978,15 +11798,23 @@ class QdInputComponent {
|
|
|
11978
11798
|
}
|
|
11979
11799
|
this._isUserTyped = true;
|
|
11980
11800
|
this._value = { ...this._value, value };
|
|
11801
|
+
this.loadOptionsForTypedValue(value);
|
|
11981
11802
|
this.emitValue();
|
|
11982
11803
|
this._onTouch();
|
|
11983
11804
|
}
|
|
11984
11805
|
handleOptionSelected(option) {
|
|
11985
11806
|
this._value = { ...this._value, value: option.i18n };
|
|
11807
|
+
this.popover?.close();
|
|
11986
11808
|
this.valueChange.emit(option.value);
|
|
11987
11809
|
this._onChange(option.value);
|
|
11988
11810
|
this._onTouch();
|
|
11989
11811
|
}
|
|
11812
|
+
onOptionsOpened() {
|
|
11813
|
+
this.isOptionsOpen = true;
|
|
11814
|
+
}
|
|
11815
|
+
onOptionsClosed() {
|
|
11816
|
+
this.isOptionsOpen = false;
|
|
11817
|
+
}
|
|
11990
11818
|
handleUnitChange(unit) {
|
|
11991
11819
|
this._value = { ...this._value, unit };
|
|
11992
11820
|
this.emitValue();
|
|
@@ -12053,11 +11881,27 @@ class QdInputComponent {
|
|
|
12053
11881
|
this.disabled = getDisabled(this.config) || !!this.control?.disabled;
|
|
12054
11882
|
this.clearable = !this.disabled && getClearable(this.config);
|
|
12055
11883
|
this.hasAutofocus = getHasAutofocus(this.config);
|
|
12056
|
-
this.hasOptions =
|
|
11884
|
+
this.hasOptions = this.optionsService.hasOptions();
|
|
12057
11885
|
}
|
|
12058
|
-
|
|
12059
|
-
this.
|
|
12060
|
-
this.
|
|
11886
|
+
subscribeToOptions() {
|
|
11887
|
+
this._subs.add(this.optionsService.filteredOptions$.subscribe(options => (this._filteredOptions = options)));
|
|
11888
|
+
this._subs.add(this.optionsService.optionsResolved$.subscribe(event => {
|
|
11889
|
+
this.optionsResolved.emit(event);
|
|
11890
|
+
const currentOption = event.options.find(option => option.value === this._value.value);
|
|
11891
|
+
if (currentOption)
|
|
11892
|
+
this.handleOptionSelected(currentOption);
|
|
11893
|
+
}));
|
|
11894
|
+
}
|
|
11895
|
+
loadOptionsForTypedValue(value) {
|
|
11896
|
+
if (!this.hasOptions)
|
|
11897
|
+
return;
|
|
11898
|
+
this.optionsService.load(value);
|
|
11899
|
+
if (this.optionsService.hasResolver() || this._filteredOptions.length > 0) {
|
|
11900
|
+
this.popover?.open();
|
|
11901
|
+
}
|
|
11902
|
+
else {
|
|
11903
|
+
this.popover?.close();
|
|
11904
|
+
}
|
|
12061
11905
|
}
|
|
12062
11906
|
emitValue() {
|
|
12063
11907
|
const emittable = this.inputType === 'number' ? this.numberInputService.parseValue(this._value.value) : this._value.value;
|
|
@@ -12102,7 +11946,7 @@ class QdInputComponent {
|
|
|
12102
11946
|
}
|
|
12103
11947
|
}
|
|
12104
11948
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12105
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdInputComponent, isStandalone: false, selector: "qd-input", inputs: { formControlName: "formControlName", value: "value", config: "config", isError: "isError", testId: ["data-test-id", "testId"] }, outputs: { valueChange: "valueChange", enterClick: "enterClick", clickClear: "clickClear", clickHint: "clickHint", clickReadonly: "clickReadonly", clickViewonly: "clickViewonly", optionsResolved: "optionsResolved" }, host: { properties: { "class.qd-input-readonly": "this.readonly", "class.qd-input--readonly-action": "this.readonlyAction", "class.qd-input-viewonly": "this.viewonly", "class.qd-input--viewonly-action": "this.viewonlyAction", "class.qd-form-hint-action": "this.hintAction", "class.qd-input-hint-action": "this.hintAction", "class.qd-form-disabled": "this.disabled", "class.qd-input-disabled": "this.disabled", "class.qd-input-focus": "this.isInputFocused", "class.qd-form-error": "this.hasError", "class.qd-input-error": "this.hasError", "class.qd-input-error-from-outside": "this.isErrorFromOutside", "class.qd-input-ambiguous": "this.isAmbiguousState" } }, providers: [
|
|
11949
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdInputComponent, isStandalone: false, selector: "qd-input", inputs: { formControlName: "formControlName", value: "value", config: "config", isError: "isError", testId: ["data-test-id", "testId"] }, outputs: { valueChange: "valueChange", enterClick: "enterClick", clickClear: "clickClear", clickHint: "clickHint", clickReadonly: "clickReadonly", clickViewonly: "clickViewonly", optionsResolved: "optionsResolved" }, host: { listeners: { "keydown.escape": "closeOptions()", "keydown.tab": "closeOptions()", "keydown.arrowdown": "openOptionsOnArrow($event)", "keydown.arrowup": "openOptionsOnArrow($event)" }, properties: { "class.qd-input-readonly": "this.readonly", "class.qd-input--readonly-action": "this.readonlyAction", "class.qd-input-viewonly": "this.viewonly", "class.qd-input--viewonly-action": "this.viewonlyAction", "class.qd-form-hint-action": "this.hintAction", "class.qd-input-hint-action": "this.hintAction", "class.qd-form-disabled": "this.disabled", "class.qd-input-disabled": "this.disabled", "class.qd-input-focus": "this.isInputFocused", "class.qd-form-error": "this.hasError", "class.qd-input-error": "this.hasError", "class.qd-input-error-from-outside": "this.isErrorFromOutside", "class.qd-input-ambiguous": "this.isAmbiguousState" } }, providers: [
|
|
12106
11950
|
{
|
|
12107
11951
|
provide: NG_VALUE_ACCESSOR,
|
|
12108
11952
|
useExisting: QdInputComponent,
|
|
@@ -12110,14 +11954,14 @@ class QdInputComponent {
|
|
|
12110
11954
|
},
|
|
12111
11955
|
QdFormsActionEmitterService,
|
|
12112
11956
|
QdFormOptionsResolverRegistry,
|
|
11957
|
+
QdFormOptionsService,
|
|
11958
|
+
QdFormKeyboardService,
|
|
12113
11959
|
QdNumberInputService,
|
|
12114
|
-
// TODO: Remove when removing derived directive
|
|
12115
|
-
QdPopoverSizingService,
|
|
12116
11960
|
{
|
|
12117
11961
|
provide: QD_FOCUSABLE_TOKEN,
|
|
12118
11962
|
useExisting: QdInputComponent
|
|
12119
11963
|
}
|
|
12120
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly && !hasOptions\">\n <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n </div>\n\n <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n <qd-form-hint\n *ngIf=\"hint || hasError\"\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n <div\n class=\"qd-input-input\"\n qdInputOptions\n [qdPopoverMinWidth]=\"200\"\n [config]=\"config\"\n [value]=\"_value.value\"\n (optionSelected)=\"handleOptionSelected($event)\"\n (optionsResolved)=\"optionsResolved.emit($event)\"\n (enterClick)=\"emitEnterClick()\"\n >\n <!-- handle (enterClick) by options directive here because event has to be fired after selection -->\n <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n </div>\n\n <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n <qd-form-hint\n *ngIf=\"hint || hasError\"\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</div>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"valueAsList\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"valueAsList\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n <input\n #input\n [placeholder]=\"placeholder | translate\"\n [value]=\"hasOptions ? (_value.value.toString() | translate) : _displayValue\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleInputFocus()\"\n (blur)=\"handleInputBlur()\"\n [disabled]=\"disabled || readonly\"\n [type]=\"htmlInputType\"\n [attr.inputmode]=\"inputMode\"\n [qdAutofocus]=\"hasAutofocus\"\n [attr.data-test-id]=\"testId + '-input'\"\n [step]=\"config?.step\"\n required\n autocomplete=\"off\"\n />\n <div class=\"qd-input-suffix\">\n <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n <qd-icon *ngIf=\"isAmbiguousInput\" class=\"qd-input-ambiguous-icon\" icon=\"circleInfoSolid\"></qd-icon>\n <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n <ng-content select=\"[qdIconButton]\"></ng-content>\n </div>\n <qd-input-units\n *ngIf=\"hasUnits\"\n [unit]=\"_value.unit\"\n [config]=\"config\"\n (unitChange)=\"handleUnitChange($event)\"\n (opened)=\"handleUnitsOpened()\"\n (closed)=\"handleUnitsClosed()\"\n ></qd-input-units>\n <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n </div>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-input:has(.qd-icon-button){overflow:visible}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-ambiguous .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(0,102,153)}:host.qd-input-ambiguous .qd-input-input:hover,:host.qd-input-ambiguous .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153)}:host.qd-input-ambiguous.qd-input-focus .qd-input-input{border-color:#069}:host.qd-input-ambiguous .qd-input-suffix ::ng-deep .qd-input-ambiguous-icon{padding-right:.5rem;color:#069}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "component", type: QdInputUnitsComponent, selector: "qd-input-units", inputs: ["config", "unit"], outputs: ["unitChange", "opened", "closed"] }, { kind: "directive", type: QdInputOptionsDirective, selector: "[qdInputOptions]", inputs: ["value", "config"], outputs: ["enterClick", "optionSelected", "optionsResolved"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
11964
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "popover", first: true, predicate: QdPopoverOnClickDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly && !hasOptions\">\n <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n </div>\n\n <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n <qd-form-hint\n *ngIf=\"hint || hasError\"\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n <div\n class=\"qd-input-input\"\n [qdPopoverOnClick]=\"optionsMenu\"\n [qdPopoverMinWidth]=\"200\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverMaxHeight]=\"288\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"false\"\n (opened)=\"onOptionsOpened()\"\n (closed)=\"onOptionsClosed()\"\n (keydown.enter)=\"emitEnterClick()\"\n >\n <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n </div>\n\n <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n <qd-form-hint\n *ngIf=\"hint || hasError\"\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</div>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"valueAsList\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"valueAsList\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n <input\n #input\n [placeholder]=\"placeholder | translate\"\n [value]=\"hasOptions ? (_value.value.toString() | translate) : _displayValue\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleInputFocus()\"\n (blur)=\"handleInputBlur()\"\n [disabled]=\"disabled || readonly\"\n [type]=\"htmlInputType\"\n [attr.inputmode]=\"inputMode\"\n [qdAutofocus]=\"hasAutofocus\"\n [attr.data-test-id]=\"testId + '-input'\"\n [step]=\"config?.step\"\n required\n autocomplete=\"off\"\n />\n <div class=\"qd-input-suffix\">\n <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n <qd-icon *ngIf=\"isAmbiguousInput\" class=\"qd-input-ambiguous-icon\" icon=\"circleInfoSolid\"></qd-icon>\n <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n <ng-content select=\"[qdIconButton]\"></ng-content>\n </div>\n <qd-input-units\n *ngIf=\"hasUnits\"\n [unit]=\"_value.unit\"\n [config]=\"config\"\n (unitChange)=\"handleUnitChange($event)\"\n (opened)=\"handleUnitsOpened()\"\n (closed)=\"handleUnitsClosed()\"\n ></qd-input-units>\n <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n </div>\n</ng-template>\n\n<ng-template #optionsMenu>\n <qd-input-options (optionSelected)=\"handleOptionSelected($event)\"></qd-input-options>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-input:has(.qd-icon-button){overflow:visible}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-ambiguous .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(0,102,153)}:host.qd-input-ambiguous .qd-input-input:hover,:host.qd-input-ambiguous .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153)}:host.qd-input-ambiguous.qd-input-focus .qd-input-input{border-color:#069}:host.qd-input-ambiguous .qd-input-suffix ::ng-deep .qd-input-ambiguous-icon{padding-right:.5rem;color:#069}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "component", type: QdInputUnitsComponent, selector: "qd-input-units", inputs: ["config", "unit"], outputs: ["unitChange", "opened", "closed"] }, { kind: "component", type: QdInputOptionsComponent, selector: "qd-input-options", outputs: ["optionSelected"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
12121
11965
|
}
|
|
12122
11966
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputComponent, decorators: [{
|
|
12123
11967
|
type: Component,
|
|
@@ -12129,14 +11973,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
12129
11973
|
},
|
|
12130
11974
|
QdFormsActionEmitterService,
|
|
12131
11975
|
QdFormOptionsResolverRegistry,
|
|
11976
|
+
QdFormOptionsService,
|
|
11977
|
+
QdFormKeyboardService,
|
|
12132
11978
|
QdNumberInputService,
|
|
12133
|
-
// TODO: Remove when removing derived directive
|
|
12134
|
-
QdPopoverSizingService,
|
|
12135
11979
|
{
|
|
12136
11980
|
provide: QD_FOCUSABLE_TOKEN,
|
|
12137
11981
|
useExisting: QdInputComponent
|
|
12138
11982
|
}
|
|
12139
|
-
], standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly && !hasOptions\">\n <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n </div>\n\n <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n <qd-form-hint\n *ngIf=\"hint || hasError\"\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n <div\n class=\"qd-input-input\"\n
|
|
11983
|
+
], standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly && !hasOptions\">\n <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n </div>\n\n <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n <qd-form-hint\n *ngIf=\"hint || hasError\"\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n <div\n class=\"qd-input-input\"\n [qdPopoverOnClick]=\"optionsMenu\"\n [qdPopoverMinWidth]=\"200\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverMaxHeight]=\"288\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"false\"\n (opened)=\"onOptionsOpened()\"\n (closed)=\"onOptionsClosed()\"\n (keydown.enter)=\"emitEnterClick()\"\n >\n <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n </div>\n\n <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n <qd-form-hint\n *ngIf=\"hint || hasError\"\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n ></qd-form-hint>\n <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</div>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"valueAsList\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"valueAsList\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n <input\n #input\n [placeholder]=\"placeholder | translate\"\n [value]=\"hasOptions ? (_value.value.toString() | translate) : _displayValue\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleInputFocus()\"\n (blur)=\"handleInputBlur()\"\n [disabled]=\"disabled || readonly\"\n [type]=\"htmlInputType\"\n [attr.inputmode]=\"inputMode\"\n [qdAutofocus]=\"hasAutofocus\"\n [attr.data-test-id]=\"testId + '-input'\"\n [step]=\"config?.step\"\n required\n autocomplete=\"off\"\n />\n <div class=\"qd-input-suffix\">\n <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n <qd-icon *ngIf=\"isAmbiguousInput\" class=\"qd-input-ambiguous-icon\" icon=\"circleInfoSolid\"></qd-icon>\n <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n <ng-content select=\"[qdIconButton]\"></ng-content>\n </div>\n <qd-input-units\n *ngIf=\"hasUnits\"\n [unit]=\"_value.unit\"\n [config]=\"config\"\n (unitChange)=\"handleUnitChange($event)\"\n (opened)=\"handleUnitsOpened()\"\n (closed)=\"handleUnitsClosed()\"\n ></qd-input-units>\n <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n </div>\n</ng-template>\n\n<ng-template #optionsMenu>\n <qd-input-options (optionSelected)=\"handleOptionSelected($event)\"></qd-input-options>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-input:has(.qd-icon-button){overflow:visible}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-ambiguous .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(0,102,153)}:host.qd-input-ambiguous .qd-input-input:hover,:host.qd-input-ambiguous .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153)}:host.qd-input-ambiguous.qd-input-focus .qd-input-input{border-color:#069}:host.qd-input-ambiguous .qd-input-suffix ::ng-deep .qd-input-ambiguous-icon{padding-right:.5rem;color:#069}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"] }]
|
|
12140
11984
|
}], propDecorators: { formControlName: [{
|
|
12141
11985
|
type: Input
|
|
12142
11986
|
}], value: [{
|
|
@@ -12162,6 +12006,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
12162
12006
|
type: Output
|
|
12163
12007
|
}], optionsResolved: [{
|
|
12164
12008
|
type: Output
|
|
12009
|
+
}], closeOptions: [{
|
|
12010
|
+
type: HostListener,
|
|
12011
|
+
args: ['keydown.escape']
|
|
12012
|
+
}, {
|
|
12013
|
+
type: HostListener,
|
|
12014
|
+
args: ['keydown.tab']
|
|
12015
|
+
}], openOptionsOnArrow: [{
|
|
12016
|
+
type: HostListener,
|
|
12017
|
+
args: ['keydown.arrowdown', ['$event']]
|
|
12018
|
+
}, {
|
|
12019
|
+
type: HostListener,
|
|
12020
|
+
args: ['keydown.arrowup', ['$event']]
|
|
12165
12021
|
}], readonly: [{
|
|
12166
12022
|
type: HostBinding,
|
|
12167
12023
|
args: ['class.qd-input-readonly']
|
|
@@ -12204,6 +12060,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
12204
12060
|
}], inputElement: [{
|
|
12205
12061
|
type: ViewChild,
|
|
12206
12062
|
args: ['input']
|
|
12063
|
+
}], popover: [{
|
|
12064
|
+
type: ViewChild,
|
|
12065
|
+
args: [QdPopoverOnClickDirective]
|
|
12207
12066
|
}] } });
|
|
12208
12067
|
|
|
12209
12068
|
// @ts-strict-ignore
|
|
@@ -12608,7 +12467,7 @@ class QdDatepickerComponent {
|
|
|
12608
12467
|
useValue: true
|
|
12609
12468
|
},
|
|
12610
12469
|
QdFormsActionEmitterService
|
|
12611
|
-
], viewQueries: [{ propertyName: "popover", first: true, predicate: ["qdPopoverOnClick"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<qd-input\n *ngIf=\"!readonly && !viewonly\"\n [value]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n (valueChange)=\"config?.timePicker ? handleUpdatedDateTime($event) : handleUpdatedDate($event)\"\n [config]=\"{ disabled, readonly, viewonly, placeholder: config?.placeholder }\"\n [isError]=\"hasError\"\n>\n <button\n type=\"button\"\n class=\"datepicker-toggle\"\n qdIconButton\n [qdPopoverOnClick]=\"disabled ? null : calendar\"\n [qdPopoverMaxWidth]=\"332\"\n qdPopoverCloseStrategy=\"onOutsideClick\"\n #qdPopoverOnClick=\"qdPopoverOnClick\"\n >\n <qd-icon [icon]=\"'calendar'\"></qd-icon>\n </button>\n</qd-input>\n\n<ng-template #calendar>\n <qd-calendar\n [selectedDate]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n [language]=\"language\"\n [disabledDates]=\"config?.disabledDates\"\n (selectedChange)=\"handleUpdatedDate($event)\"\n ></qd-calendar>\n <qd-dropdown\n class=\"timepicker-dropdown\"\n *ngIf=\"timePicker\"\n [value]=\"displayedTime\"\n (valueChange)=\"handleUpdatedTime($event)\"\n [config]=\"timePicker\"\n [qdPopoverMaxHeight]=\"300\"\n ></qd-dropdown>\n</ng-template>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"[displayedDate]\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"[displayedDate]\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: ["qd-datepicker{position:relative;display:block;width:100%;margin-bottom:.75rem}qd-datepicker .calendar{padding:1rem}qd-datepicker .calendar mat-calendar{display:block}qd-datepicker .datepicker-toggle{background-color:unset;color:inherit}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input{height:2.25rem;margin-bottom:.375rem!important}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-label,qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-hint{display:none}qd-datepicker .qd-form-disabled .datepicker-toggle{color:#979797;cursor:default}qd-datepicker.qd-datepicker-calendar-only{margin-bottom:0}qd-datepicker.qd-datepicker-calendar-only qd-input{margin:0}qd-datepicker.qd-datepicker-calendar-only .qd-form-label,qd-datepicker.qd-datepicker-calendar-only .qd-form-hint,qd-datepicker.qd-datepicker-calendar-only .qd-input-input input{display:none}qd-datepicker.qd-datepicker-calendar-only .qd-input-input{height:initial!important;padding:0!important;border:none!important;margin:0!important}qd-datepicker.qd-datepicker-calendar-only .qd-input-suffix{margin-left:0!important}.timepicker-dropdown{margin:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "
|
|
12470
|
+
], viewQueries: [{ propertyName: "popover", first: true, predicate: ["qdPopoverOnClick"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<qd-input\n *ngIf=\"!readonly && !viewonly\"\n [value]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n (valueChange)=\"config?.timePicker ? handleUpdatedDateTime($event) : handleUpdatedDate($event)\"\n [config]=\"{ disabled, readonly, viewonly, placeholder: config?.placeholder }\"\n [isError]=\"hasError\"\n>\n <button\n type=\"button\"\n class=\"datepicker-toggle\"\n qdIconButton\n [qdPopoverOnClick]=\"disabled ? null : calendar\"\n [qdPopoverMaxWidth]=\"332\"\n qdPopoverCloseStrategy=\"onOutsideClick\"\n #qdPopoverOnClick=\"qdPopoverOnClick\"\n >\n <qd-icon [icon]=\"'calendar'\"></qd-icon>\n </button>\n</qd-input>\n\n<ng-template #calendar>\n <qd-calendar\n [selectedDate]=\"config?.timePicker && displayedDateTime ? displayedDateTime : displayedDate\"\n [language]=\"language\"\n [disabledDates]=\"config?.disabledDates\"\n (selectedChange)=\"handleUpdatedDate($event)\"\n ></qd-calendar>\n <qd-dropdown\n class=\"timepicker-dropdown\"\n *ngIf=\"timePicker\"\n [value]=\"displayedTime\"\n (valueChange)=\"handleUpdatedTime($event)\"\n [config]=\"timePicker\"\n [qdPopoverMaxHeight]=\"300\"\n ></qd-dropdown>\n</ng-template>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"[displayedDate]\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"[displayedDate]\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: ["qd-datepicker{position:relative;display:block;width:100%;margin-bottom:.75rem}qd-datepicker .calendar{padding:1rem}qd-datepicker .calendar mat-calendar{display:block}qd-datepicker .datepicker-toggle{background-color:unset;color:inherit}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input{height:2.25rem;margin-bottom:.375rem!important}qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-label,qd-datepicker:not(.qd-datepicker-calendar-only) qd-input .qd-form-hint{display:none}qd-datepicker .qd-form-disabled .datepicker-toggle{color:#979797;cursor:default}qd-datepicker.qd-datepicker-calendar-only{margin-bottom:0}qd-datepicker.qd-datepicker-calendar-only qd-input{margin:0}qd-datepicker.qd-datepicker-calendar-only .qd-form-label,qd-datepicker.qd-datepicker-calendar-only .qd-form-hint,qd-datepicker.qd-datepicker-calendar-only .qd-input-input input{display:none}qd-datepicker.qd-datepicker-calendar-only .qd-input-input{height:initial!important;padding:0!important;border:none!important;margin:0!important}qd-datepicker.qd-datepicker-calendar-only .qd-input-suffix{margin-left:0!important}.timepicker-dropdown{margin:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdCalendarComponent, selector: "qd-calendar", inputs: ["selectedDate", "language", "disabledDates"], outputs: ["selectedChange"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
12612
12471
|
}
|
|
12613
12472
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDatepickerComponent, decorators: [{
|
|
12614
12473
|
type: Component,
|
|
@@ -14539,7 +14398,7 @@ class QdMultiInputComponent {
|
|
|
14539
14398
|
},
|
|
14540
14399
|
QdMultiInputService,
|
|
14541
14400
|
QdFormsActionEmitterService
|
|
14542
|
-
], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["input"], descendants: true }, { propertyName: "multiInputMenu", first: true, predicate: i0.forwardRef(() => QdMultiInputMenuComponent), descendants: true }, { propertyName: "popoverOnClickDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }, { propertyName: "errorTooltips", predicate: ["errorTooltips"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"formArray\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div\n *ngIf=\"!readonly && !viewonly\"\n class=\"qd-multi-input__input-chip-box\"\n (click)=\"focus()\"\n (opened)=\"open = true\"\n (closed)=\"open = false\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverDisabled]=\"options.length === 0\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverBackgroundColor]=\"'transparent'\"\n [positionStrategy]=\"[\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetX: -2\n },\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n weight: 0.8,\n offsetX: -2\n }\n ]\"\n>\n <div [ngClass]=\"hasItems() ? 'qd-multi-input__chip-margin' : ''\">\n <qd-multi-input-chip\n *ngFor=\"let element of getIterableElements(); let index = index\"\n [close]=\"!disabled && !readonly && !viewonly\"\n [itemControl]=\"formArray ? element : undefined\"\n [value]=\"formArray ? undefined : getTranslation(element)\"\n (closeClickEmitter)=\"close(index)\"\n (click)=\"handleChipClick($event)\"\n >\n </qd-multi-input-chip>\n </div>\n\n <div class=\"qd-multi-input__wrapper\">\n <input\n #input\n type=\"text\"\n class=\"qd-multi-input__box\"\n *ngIf=\"!readonly && !viewonly\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"filterOptions\"\n (ngModelChange)=\"changeValue()\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"hasFocus = true\"\n (blur)=\"handleBlur()\"\n [ngClass]=\"open ? 'qd-multi-input__box--open' : ''\"\n [attr.data-test-id]=\"testId + '-input'\"\n autocomplete=\"off\"\n />\n\n <div class=\"qd-multi-input__box qd-multi-input__box--readonly\" *ngIf=\"readonly && !hasItems()\"> </div>\n\n <div class=\"qd-multi-input__box qd-multi-input__box--viewonly\" *ngIf=\"viewonly && !hasItems()\"> </div>\n\n <ng-template #menu>\n <qd-multi-input-menu\n [optionsListForView]=\"optionsListForView\"\n [id]=\"id\"\n [data-test-id]=\"testId\"\n (itemClick)=\"handleClick($event)\"\n ></qd-multi-input-menu>\n </ng-template>\n </div>\n</div>\n\n<qd-form-hint\n *ngIf=\"config && !readonly && !viewonly && (hasHint || hasError)\"\n [hint]=\"hasHint ? config.hint.i18n : ''\"\n [control]=\"formArray\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"getValues()\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"getValues()\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;margin-bottom:.75rem}.qd-multi-input__input-chip-box{margin-bottom:.5rem;background-color:#fff;outline:solid .0625rem rgb(180,180,180)}:host.qd-multi-input-readonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-viewonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-disabled .qd-multi-input__input-chip-box{background:#f5f5f5;color:#979797;outline:.0625rem solid rgb(180,180,180)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box{outline:.125rem solid rgb(0,102,153)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-focus .qd-multi-input__input-chip-box:active{outline:.125rem solid rgb(0,102,153)}.qd-multi-input__input-chip-box:active,.qd-multi-input__input-chip-box:hover{outline:.125rem solid rgb(23,23,23)}.qd-multi-input__chip-margin{padding:0 .3125rem .3125rem 0}:host.qd-multi-input-readonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}:host.qd-multi-input-viewonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}.qd-multi-input__wrapper{position:relative}.qd-multi-input__wrapper .qd-multi-input__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(255,255,255);background:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-multi-input__wrapper .qd-multi-input__box:focus,.qd-multi-input__wrapper .qd-multi-input__box:active,.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{padding:0 .8125rem;border:none;color:#171717;line-height:2.125rem;outline:none}.qd-multi-input__wrapper .qd-multi-input__box:hover:after{border-top-color:#b4b4b4}.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{border-color:#069}:host.qd-multi-input-disabled .qd-multi-input__wrapper .qd-multi-input__box{border:none;background:#f5f5f5;color:#979797}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly{color:#069;cursor:pointer}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:hover,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:active,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly{color:#069;cursor:pointer}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:hover,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:active,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input-error .qd-multi-input__input-chip-box{outline:.0625rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box:focus,:host.qd-multi-input-error .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-error .qd-multi-input__input-chip-box:active,:host.qd-multi-input-error .qd-multi-input__input-chip-box.qd-multi-input__box--open{outline:.125rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box .qd-error-icon{color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "component", type: QdMultiInputChipComponent, selector: "qd-multi-input-chip", inputs: ["itemControl", "value", "close", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdMultiInputMenuComponent, selector: "qd-multi-input-menu", inputs: ["id", "optionsListForView", "data-test-id"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14401
|
+
], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["input"], descendants: true }, { propertyName: "multiInputMenu", first: true, predicate: i0.forwardRef(() => QdMultiInputMenuComponent), descendants: true }, { propertyName: "popoverOnClickDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }, { propertyName: "errorTooltips", predicate: ["errorTooltips"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"formArray\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div\n *ngIf=\"!readonly && !viewonly\"\n class=\"qd-multi-input__input-chip-box\"\n (click)=\"focus()\"\n (opened)=\"open = true\"\n (closed)=\"open = false\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverDisabled]=\"options.length === 0\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverBackgroundColor]=\"'transparent'\"\n qdPopoverPlacement=\"bottom-start\"\n [qdPopoverOffsetX]=\"-2\"\n>\n <div [ngClass]=\"hasItems() ? 'qd-multi-input__chip-margin' : ''\">\n <qd-multi-input-chip\n *ngFor=\"let element of getIterableElements(); let index = index\"\n [close]=\"!disabled && !readonly && !viewonly\"\n [itemControl]=\"formArray ? element : undefined\"\n [value]=\"formArray ? undefined : getTranslation(element)\"\n (closeClickEmitter)=\"close(index)\"\n (click)=\"handleChipClick($event)\"\n >\n </qd-multi-input-chip>\n </div>\n\n <div class=\"qd-multi-input__wrapper\">\n <input\n #input\n type=\"text\"\n class=\"qd-multi-input__box\"\n *ngIf=\"!readonly && !viewonly\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"filterOptions\"\n (ngModelChange)=\"changeValue()\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"hasFocus = true\"\n (blur)=\"handleBlur()\"\n [ngClass]=\"open ? 'qd-multi-input__box--open' : ''\"\n [attr.data-test-id]=\"testId + '-input'\"\n autocomplete=\"off\"\n />\n\n <div class=\"qd-multi-input__box qd-multi-input__box--readonly\" *ngIf=\"readonly && !hasItems()\"> </div>\n\n <div class=\"qd-multi-input__box qd-multi-input__box--viewonly\" *ngIf=\"viewonly && !hasItems()\"> </div>\n\n <ng-template #menu>\n <qd-multi-input-menu\n [optionsListForView]=\"optionsListForView\"\n [id]=\"id\"\n [data-test-id]=\"testId\"\n (itemClick)=\"handleClick($event)\"\n ></qd-multi-input-menu>\n </ng-template>\n </div>\n</div>\n\n<qd-form-hint\n *ngIf=\"config && !readonly && !viewonly && (hasHint || hasError)\"\n [hint]=\"hasHint ? config.hint.i18n : ''\"\n [control]=\"formArray\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"getValues()\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"getValues()\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;margin-bottom:.75rem}.qd-multi-input__input-chip-box{margin-bottom:.5rem;background-color:#fff;outline:solid .0625rem rgb(180,180,180)}:host.qd-multi-input-readonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-viewonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-disabled .qd-multi-input__input-chip-box{background:#f5f5f5;color:#979797;outline:.0625rem solid rgb(180,180,180)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box{outline:.125rem solid rgb(0,102,153)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-focus .qd-multi-input__input-chip-box:active{outline:.125rem solid rgb(0,102,153)}.qd-multi-input__input-chip-box:active,.qd-multi-input__input-chip-box:hover{outline:.125rem solid rgb(23,23,23)}.qd-multi-input__chip-margin{padding:0 .3125rem .3125rem 0}:host.qd-multi-input-readonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}:host.qd-multi-input-viewonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}.qd-multi-input__wrapper{position:relative}.qd-multi-input__wrapper .qd-multi-input__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(255,255,255);background:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-multi-input__wrapper .qd-multi-input__box:focus,.qd-multi-input__wrapper .qd-multi-input__box:active,.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{padding:0 .8125rem;border:none;color:#171717;line-height:2.125rem;outline:none}.qd-multi-input__wrapper .qd-multi-input__box:hover:after{border-top-color:#b4b4b4}.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{border-color:#069}:host.qd-multi-input-disabled .qd-multi-input__wrapper .qd-multi-input__box{border:none;background:#f5f5f5;color:#979797}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly{color:#069;cursor:pointer}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:hover,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:active,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly{color:#069;cursor:pointer}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:hover,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:active,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input-error .qd-multi-input__input-chip-box{outline:.0625rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box:focus,:host.qd-multi-input-error .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-error .qd-multi-input__input-chip-box:active,:host.qd-multi-input-error .qd-multi-input__input-chip-box.qd-multi-input__box--open{outline:.125rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box .qd-error-icon{color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "component", type: QdMultiInputChipComponent, selector: "qd-multi-input-chip", inputs: ["itemControl", "value", "close", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdMultiInputMenuComponent, selector: "qd-multi-input-menu", inputs: ["id", "optionsListForView", "data-test-id"], outputs: ["itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14543
14402
|
}
|
|
14544
14403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMultiInputComponent, decorators: [{
|
|
14545
14404
|
type: Component,
|
|
@@ -14551,7 +14410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
14551
14410
|
},
|
|
14552
14411
|
QdMultiInputService,
|
|
14553
14412
|
QdFormsActionEmitterService
|
|
14554
|
-
], host: { class: 'qd-multi-input' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"formArray\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div\n *ngIf=\"!readonly && !viewonly\"\n class=\"qd-multi-input__input-chip-box\"\n (click)=\"focus()\"\n (opened)=\"open = true\"\n (closed)=\"open = false\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverDisabled]=\"options.length === 0\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverBackgroundColor]=\"'transparent'\"\n
|
|
14413
|
+
], host: { class: 'qd-multi-input' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"formArray\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n></qd-form-label>\n\n<div\n *ngIf=\"!readonly && !viewonly\"\n class=\"qd-multi-input__input-chip-box\"\n (click)=\"focus()\"\n (opened)=\"open = true\"\n (closed)=\"open = false\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverDisabled]=\"options.length === 0\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverBackgroundColor]=\"'transparent'\"\n qdPopoverPlacement=\"bottom-start\"\n [qdPopoverOffsetX]=\"-2\"\n>\n <div [ngClass]=\"hasItems() ? 'qd-multi-input__chip-margin' : ''\">\n <qd-multi-input-chip\n *ngFor=\"let element of getIterableElements(); let index = index\"\n [close]=\"!disabled && !readonly && !viewonly\"\n [itemControl]=\"formArray ? element : undefined\"\n [value]=\"formArray ? undefined : getTranslation(element)\"\n (closeClickEmitter)=\"close(index)\"\n (click)=\"handleChipClick($event)\"\n >\n </qd-multi-input-chip>\n </div>\n\n <div class=\"qd-multi-input__wrapper\">\n <input\n #input\n type=\"text\"\n class=\"qd-multi-input__box\"\n *ngIf=\"!readonly && !viewonly\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"filterOptions\"\n (ngModelChange)=\"changeValue()\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"hasFocus = true\"\n (blur)=\"handleBlur()\"\n [ngClass]=\"open ? 'qd-multi-input__box--open' : ''\"\n [attr.data-test-id]=\"testId + '-input'\"\n autocomplete=\"off\"\n />\n\n <div class=\"qd-multi-input__box qd-multi-input__box--readonly\" *ngIf=\"readonly && !hasItems()\"> </div>\n\n <div class=\"qd-multi-input__box qd-multi-input__box--viewonly\" *ngIf=\"viewonly && !hasItems()\"> </div>\n\n <ng-template #menu>\n <qd-multi-input-menu\n [optionsListForView]=\"optionsListForView\"\n [id]=\"id\"\n [data-test-id]=\"testId\"\n (itemClick)=\"handleClick($event)\"\n ></qd-multi-input-menu>\n </ng-template>\n </div>\n</div>\n\n<qd-form-hint\n *ngIf=\"config && !readonly && !viewonly && (hasHint || hasError)\"\n [hint]=\"hasHint ? config.hint.i18n : ''\"\n [control]=\"formArray\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"getValues()\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"getValues()\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [":host{display:block;margin-bottom:.75rem}.qd-multi-input__input-chip-box{margin-bottom:.5rem;background-color:#fff;outline:solid .0625rem rgb(180,180,180)}:host.qd-multi-input-readonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-viewonly .qd-multi-input__input-chip-box{background:none!important;color:#979797;outline:none!important}:host.qd-multi-input-disabled .qd-multi-input__input-chip-box{background:#f5f5f5;color:#979797;outline:.0625rem solid rgb(180,180,180)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box{outline:.125rem solid rgb(0,102,153)}:host.qd-multi-input-focus .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-focus .qd-multi-input__input-chip-box:active{outline:.125rem solid rgb(0,102,153)}.qd-multi-input__input-chip-box:active,.qd-multi-input__input-chip-box:hover{outline:.125rem solid rgb(23,23,23)}.qd-multi-input__chip-margin{padding:0 .3125rem .3125rem 0}:host.qd-multi-input-readonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}:host.qd-multi-input-viewonly .qd-multi-input__chip-margin{padding:0 0 .3125rem}.qd-multi-input__wrapper{position:relative}.qd-multi-input__wrapper .qd-multi-input__box{display:flex;overflow:hidden;width:100%;height:2.25rem;justify-content:space-between;padding:0 .75rem;border:.0625rem solid rgb(255,255,255);background:#fff;font-size:.875rem;font-weight:400;line-height:2.25rem;text-overflow:ellipsis;white-space:nowrap}.qd-multi-input__wrapper .qd-multi-input__box:focus,.qd-multi-input__wrapper .qd-multi-input__box:active,.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{padding:0 .8125rem;border:none;color:#171717;line-height:2.125rem;outline:none}.qd-multi-input__wrapper .qd-multi-input__box:hover:after{border-top-color:#b4b4b4}.qd-multi-input__wrapper .qd-multi-input__box.qd-multi-input__box--open{border-color:#069}:host.qd-multi-input-disabled .qd-multi-input__wrapper .qd-multi-input__box{border:none;background:#f5f5f5;color:#979797}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-readonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box{height:inherit;padding:0;border:none;line-height:2.25rem}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:focus,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:hover,:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:active{color:inherit}:host.qd-multi-input-viewonly .qd-multi-input__wrapper .qd-multi-input__box:after{display:none}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly{color:#069;cursor:pointer}:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:hover,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:active,:host.qd-multi-input--readonly-action .qd-multi-input__box.qd-multi-input__box--readonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly{color:#069;cursor:pointer}:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:hover,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:active,:host.qd-multi-input--viewonly-action .qd-multi-input__box.qd-multi-input__box--viewonly:focus{color:#069;text-decoration:underline}:host.qd-multi-input-error .qd-multi-input__input-chip-box{outline:.0625rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box:focus,:host.qd-multi-input-error .qd-multi-input__input-chip-box:hover,:host.qd-multi-input-error .qd-multi-input__input-chip-box:active,:host.qd-multi-input-error .qd-multi-input__input-chip-box.qd-multi-input__box--open{outline:.125rem solid rgb(199,0,35)}:host.qd-multi-input-error .qd-multi-input__input-chip-box .qd-error-icon{color:#c70023}\n"] }]
|
|
14555
14414
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
14556
14415
|
type: Input
|
|
14557
14416
|
}], values: [{
|
|
@@ -16523,7 +16382,6 @@ class QdFormModule {
|
|
|
16523
16382
|
QdFormViewonlyComponent,
|
|
16524
16383
|
QdInputComponent,
|
|
16525
16384
|
QdInputUnitsComponent,
|
|
16526
|
-
QdInputOptionsDirective,
|
|
16527
16385
|
QdInputOptionsComponent,
|
|
16528
16386
|
QdMultiInputChipComponent,
|
|
16529
16387
|
QdMultiInputMenuComponent,
|
|
@@ -16622,7 +16480,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
16622
16480
|
QdFormViewonlyComponent,
|
|
16623
16481
|
QdInputComponent,
|
|
16624
16482
|
QdInputUnitsComponent,
|
|
16625
|
-
QdInputOptionsDirective,
|
|
16626
16483
|
QdInputOptionsComponent,
|
|
16627
16484
|
QdMultiInputChipComponent,
|
|
16628
16485
|
QdMultiInputMenuComponent,
|
|
@@ -17158,11 +17015,11 @@ class QdNotificationComponent {
|
|
|
17158
17015
|
return !!this.element.nativeElement.closest('qd-snackbar');
|
|
17159
17016
|
}
|
|
17160
17017
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17161
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdNotificationComponent, isStandalone: false, selector: "qd-notification", inputs: { type: "type", notification: "notification" }, host: { properties: { "attr.class": "this.typeClassName" }, classAttribute: "qd-notification" }, ngImport: i0, template: "<qd-icon *ngIf=\"closeable\" [icon]=\"'timesLarge'\" class=\"closer\" (click)=\"remove()\"></qd-icon>\n<qd-icon [icon]=\"this.getIcon()\" class=\"icon\"></qd-icon>\n\n<ng-content select=\"qd-notification-content\"></ng-content>\n\n<div class=\"title\" *ngIf=\"notification?.title\">{{ notification.title.i18n | translate }}</div>\n<div class=\"message\">\n <span>{{ notification?.i18n | translate }}</span>\n <a class=\"link\" *ngIf=\"notification?.link\" (click)=\"handleLinkClick()\">{{ notification.link.i18n | translate }}</a>\n</div>\n", styles: [":host{position:relative;
|
|
17018
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdNotificationComponent, isStandalone: false, selector: "qd-notification", inputs: { type: "type", notification: "notification" }, host: { properties: { "attr.class": "this.typeClassName" }, classAttribute: "qd-notification" }, ngImport: i0, template: "<qd-icon *ngIf=\"closeable\" [icon]=\"'timesLarge'\" class=\"closer\" (click)=\"remove()\"></qd-icon>\n<qd-icon [icon]=\"this.getIcon()\" class=\"icon\"></qd-icon>\n\n<ng-content select=\"qd-notification-content\"></ng-content>\n\n<div class=\"title\" *ngIf=\"notification?.title\">{{ notification.title.i18n | translate }}</div>\n<div class=\"message\">\n <span>{{ notification?.i18n | translate }}</span>\n <a class=\"link\" *ngIf=\"notification?.link\" (click)=\"handleLinkClick()\">{{ notification.link.i18n | translate }}</a>\n</div>\n", styles: [":host{position:relative;display:block;width:100%;padding:1rem 2rem .5rem 2.75rem;border-width:.0625rem;border-style:solid;border-left-width:.25rem;margin-bottom:.5rem;background:#fff;box-shadow:0 0 .625rem #979797;font-size:.875rem;gap:.5rem;line-height:1rem}:host.qd-notification-info{border-color:#069}:host.qd-notification-info .icon,:host.qd-notification-info .title{color:#069}:host.qd-notification-warning{border-color:#ff9b00}:host.qd-notification-warning .icon,:host.qd-notification-warning .title{color:#ff9b00}:host.qd-notification-critical{border-color:#c70023}:host.qd-notification-critical .icon,:host.qd-notification-critical .title{color:#c70023}:host.qd-notification-success{border-color:#00813a}:host.qd-notification-success .icon,:host.qd-notification-success .title{color:#00813a}:host .icon{position:absolute;top:.9375rem;left:1rem;font-size:1.25rem}:host .closer{position:absolute;top:1rem;right:.75rem;color:#171717;cursor:pointer;font-size:.8125rem;font-weight:600}:host .title{margin-bottom:.375rem;font-weight:500}:host .message{margin-bottom:.25rem;white-space:pre-wrap}:host .link{margin-bottom:.375rem;margin-left:.375rem;color:#069;cursor:pointer}:host .link:hover{text-decoration:underline}:host:host-context(qd-snackbar){z-index:9999!important}:host:host-context(qd-snackbar) .link{display:block;margin-top:.375rem;margin-left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
17162
17019
|
}
|
|
17163
17020
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdNotificationComponent, decorators: [{
|
|
17164
17021
|
type: Component,
|
|
17165
|
-
args: [{ selector: 'qd-notification', host: { class: 'qd-notification' }, standalone: false, template: "<qd-icon *ngIf=\"closeable\" [icon]=\"'timesLarge'\" class=\"closer\" (click)=\"remove()\"></qd-icon>\n<qd-icon [icon]=\"this.getIcon()\" class=\"icon\"></qd-icon>\n\n<ng-content select=\"qd-notification-content\"></ng-content>\n\n<div class=\"title\" *ngIf=\"notification?.title\">{{ notification.title.i18n | translate }}</div>\n<div class=\"message\">\n <span>{{ notification?.i18n | translate }}</span>\n <a class=\"link\" *ngIf=\"notification?.link\" (click)=\"handleLinkClick()\">{{ notification.link.i18n | translate }}</a>\n</div>\n", styles: [":host{position:relative;
|
|
17022
|
+
args: [{ selector: 'qd-notification', host: { class: 'qd-notification' }, standalone: false, template: "<qd-icon *ngIf=\"closeable\" [icon]=\"'timesLarge'\" class=\"closer\" (click)=\"remove()\"></qd-icon>\n<qd-icon [icon]=\"this.getIcon()\" class=\"icon\"></qd-icon>\n\n<ng-content select=\"qd-notification-content\"></ng-content>\n\n<div class=\"title\" *ngIf=\"notification?.title\">{{ notification.title.i18n | translate }}</div>\n<div class=\"message\">\n <span>{{ notification?.i18n | translate }}</span>\n <a class=\"link\" *ngIf=\"notification?.link\" (click)=\"handleLinkClick()\">{{ notification.link.i18n | translate }}</a>\n</div>\n", styles: [":host{position:relative;display:block;width:100%;padding:1rem 2rem .5rem 2.75rem;border-width:.0625rem;border-style:solid;border-left-width:.25rem;margin-bottom:.5rem;background:#fff;box-shadow:0 0 .625rem #979797;font-size:.875rem;gap:.5rem;line-height:1rem}:host.qd-notification-info{border-color:#069}:host.qd-notification-info .icon,:host.qd-notification-info .title{color:#069}:host.qd-notification-warning{border-color:#ff9b00}:host.qd-notification-warning .icon,:host.qd-notification-warning .title{color:#ff9b00}:host.qd-notification-critical{border-color:#c70023}:host.qd-notification-critical .icon,:host.qd-notification-critical .title{color:#c70023}:host.qd-notification-success{border-color:#00813a}:host.qd-notification-success .icon,:host.qd-notification-success .title{color:#00813a}:host .icon{position:absolute;top:.9375rem;left:1rem;font-size:1.25rem}:host .closer{position:absolute;top:1rem;right:.75rem;color:#171717;cursor:pointer;font-size:.8125rem;font-weight:600}:host .title{margin-bottom:.375rem;font-weight:500}:host .message{margin-bottom:.25rem;white-space:pre-wrap}:host .link{margin-bottom:.375rem;margin-left:.375rem;color:#069;cursor:pointer}:host .link:hover{text-decoration:underline}:host:host-context(qd-snackbar){z-index:9999!important}:host:host-context(qd-snackbar) .link{display:block;margin-top:.375rem;margin-left:0}\n"] }]
|
|
17166
17023
|
}], propDecorators: { type: [{
|
|
17167
17024
|
type: Input
|
|
17168
17025
|
}], notification: [{
|
|
@@ -17524,7 +17381,7 @@ class QdMenuButtonComponent {
|
|
|
17524
17381
|
return this.config?.actions?.some(action => !action.isHidden) ?? false;
|
|
17525
17382
|
}
|
|
17526
17383
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMenuButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17527
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMenuButtonComponent, isStandalone: false, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: { config: ["qdMenuButton", "config"], dataTestId: ["data-test-id", "dataTestId"], autoSize: "autoSize" }, host: { properties: { "attr.class": "classes" } }, ngImport: i0, template: "<ng-container *ngIf=\"qdButtonGhost\">\n <button\n qdButton\n qdButtonGhost\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverMinWidth]=\"200\"\n [qdPopoverMaxWidth]=\"300\"\n [qdPopoverFlipIntoViewport]=\"true\"\n [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n (opened)=\"isOpen = true\"\n (closed)=\"isOpen = false\"\n [class.open]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n </button>\n</ng-container>\n\n<ng-container *ngIf=\"!qdButtonGhost\">\n <button\n qdButton\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverAutoSize]=\"{ width: autoSize }\"\n [qdPopoverMinWidth]=\"200\"\n [qdPopoverMaxWidth]=\"300\"\n [qdPopoverFlipIntoViewport]=\"true\"\n [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n (opened)=\"isOpen = true\"\n (closed)=\"isOpen = false\"\n [class.open]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n </button>\n</ng-container>\n\n<ng-template #menu>\n <ng-container *ngFor=\"let action of config?.actions\">\n <button\n class=\"entry\"\n *ngIf=\"!action.isHidden\"\n (click)=\"action.handler()\"\n [disabled]=\"action.isDisabled\"\n [attr.data-test-id]=\"dataTestId + 'menu-action'\"\n qdTruncatedText\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-container>\n</ng-template>\n\n<ng-template #buttonContent>\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n <qd-icon class=\"open-indicator\" [icon]=\"'ctrlDown'\"></qd-icon>\n</ng-template>\n", styles: [":host{padding:0}@media (max-width: 959.98px){:host.only-icon-on-small-viewport button{padding:.875rem}:host.only-icon-on-small-viewport .qd-icon{margin:0;font-size:1.125rem;transform:translateY(.125rem)}:host.only-icon-on-small-viewport .content{display:none}}button[qd-button].open{background-color:#14516f}button.entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:.875rem;font-weight:400;line-height:1.3125rem}button.entry:hover{background-color:#f2f7fa}button.entry:hover[disabled]{background:#fff0;cursor:default}button.entry[disabled]{color:#b4b4b4;cursor:default}button.entry[disabled]:hover{background-color:#fff0}.open-indicator{margin-left:.5rem;transform:translateY(.0625rem)}qd-icon{font-size:.875rem}.content{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "
|
|
17384
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMenuButtonComponent, isStandalone: false, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: { config: ["qdMenuButton", "config"], dataTestId: ["data-test-id", "dataTestId"], autoSize: "autoSize" }, host: { properties: { "attr.class": "classes" } }, ngImport: i0, template: "<ng-container *ngIf=\"qdButtonGhost\">\n <button\n qdButton\n qdButtonGhost\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverMinWidth]=\"200\"\n [qdPopoverMaxWidth]=\"300\"\n [qdPopoverFlipIntoViewport]=\"true\"\n [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n (opened)=\"isOpen = true\"\n (closed)=\"isOpen = false\"\n [class.open]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n </button>\n</ng-container>\n\n<ng-container *ngIf=\"!qdButtonGhost\">\n <button\n qdButton\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverAutoSize]=\"{ width: autoSize }\"\n [qdPopoverMinWidth]=\"200\"\n [qdPopoverMaxWidth]=\"300\"\n [qdPopoverFlipIntoViewport]=\"true\"\n [disabled]=\"config?.isDisabled || !hasUnhiddenActions()\"\n (opened)=\"isOpen = true\"\n (closed)=\"isOpen = false\"\n [class.open]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n </button>\n</ng-container>\n\n<ng-template #menu>\n <ng-container *ngFor=\"let action of config?.actions\">\n <button\n class=\"entry\"\n *ngIf=\"!action.isHidden\"\n (click)=\"action.handler()\"\n [disabled]=\"action.isDisabled\"\n [attr.data-test-id]=\"dataTestId + 'menu-action'\"\n qdTruncatedText\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-container>\n</ng-template>\n\n<ng-template #buttonContent>\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n <qd-icon class=\"open-indicator\" [icon]=\"'ctrlDown'\"></qd-icon>\n</ng-template>\n", styles: [":host{padding:0}@media (max-width: 959.98px){:host.only-icon-on-small-viewport button{padding:.875rem}:host.only-icon-on-small-viewport .qd-icon{margin:0;font-size:1.125rem;transform:translateY(.125rem)}:host.only-icon-on-small-viewport .content{display:none}}button[qd-button].open{background-color:#14516f}button.entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:.875rem;font-weight:400;line-height:1.3125rem}button.entry:hover{background-color:#f2f7fa}button.entry:hover[disabled]{background:#fff0;cursor:default}button.entry[disabled]{color:#b4b4b4;cursor:default}button.entry[disabled]:hover{background-color:#fff0}.open-indicator{margin-left:.5rem;transform:translateY(.0625rem)}qd-icon{font-size:.875rem}.content{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
17528
17385
|
}
|
|
17529
17386
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMenuButtonComponent, decorators: [{
|
|
17530
17387
|
type: Component,
|
|
@@ -18651,7 +18508,7 @@ class QdContactCardMenuComponent {
|
|
|
18651
18508
|
});
|
|
18652
18509
|
}
|
|
18653
18510
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdContactCardMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18654
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdContactCardMenuComponent, isStandalone: false, selector: "qd-contact-card-menu", inputs: { contactData: "contactData", actions: "actions", testId: ["data-test-id", "testId"] }, ngImport: i0, template: "<ng-container *ngIf=\"actions$ | async as actions\">\n <qd-icon\n *ngIf=\"actions.length > 0\"\n icon=\"overflowMenuVertical\"\n class=\"menu-opener\"\n [attr.data-test-id]=\"testId + '-opener'\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverMinWidth]=\"200\"\n [qdPopoverMaxWidth]=\"300\"\n ></qd-icon>\n\n <ng-template #menu>\n <ng-container *ngFor=\"let action of actions$ | async\">\n <button\n class=\"menu-entry\"\n (click)=\"action.handler(contactData)\"\n [disabled]=\"action.isDisabled\"\n [attr.data-test-id]=\"testId + '-action'\"\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-container>\n </ng-template>\n</ng-container>\n", styles: [":host .menu-opener{position:absolute;top:1.5625rem;right:1.5rem;cursor:pointer;font-size:1.5rem;font-weight:700}button.menu-entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:.875rem;font-weight:400;line-height:1.3125rem}button.menu-entry:hover{background-color:#f2f7fa}button.menu-entry:hover[disabled]{background:#fff0;cursor:default}button.menu-entry[disabled]{color:#b4b4b4;cursor:default}button.menu-entry[disabled]:hover{background-color:#fff0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "
|
|
18511
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdContactCardMenuComponent, isStandalone: false, selector: "qd-contact-card-menu", inputs: { contactData: "contactData", actions: "actions", testId: ["data-test-id", "testId"] }, ngImport: i0, template: "<ng-container *ngIf=\"actions$ | async as actions\">\n <qd-icon\n *ngIf=\"actions.length > 0\"\n icon=\"overflowMenuVertical\"\n class=\"menu-opener\"\n [attr.data-test-id]=\"testId + '-opener'\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverAutoSize]=\"{ width: true }\"\n [qdPopoverMinWidth]=\"200\"\n [qdPopoverMaxWidth]=\"300\"\n ></qd-icon>\n\n <ng-template #menu>\n <ng-container *ngFor=\"let action of actions$ | async\">\n <button\n class=\"menu-entry\"\n (click)=\"action.handler(contactData)\"\n [disabled]=\"action.isDisabled\"\n [attr.data-test-id]=\"testId + '-action'\"\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-container>\n </ng-template>\n</ng-container>\n", styles: [":host .menu-opener{position:absolute;top:1.5625rem;right:1.5rem;cursor:pointer;font-size:1.5rem;font-weight:700}button.menu-entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:.875rem;font-weight:400;line-height:1.3125rem}button.menu-entry:hover{background-color:#f2f7fa}button.menu-entry:hover[disabled]{background:#fff0;cursor:default}button.menu-entry[disabled]{color:#b4b4b4;cursor:default}button.menu-entry[disabled]:hover{background-color:#fff0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
18655
18512
|
}
|
|
18656
18513
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdContactCardMenuComponent, decorators: [{
|
|
18657
18514
|
type: Component,
|
|
@@ -21905,10 +21762,6 @@ class QdFilterItemSelectCategoryComponent {
|
|
|
21905
21762
|
dependsOn = [];
|
|
21906
21763
|
showSelectButton$;
|
|
21907
21764
|
itemsLoading$;
|
|
21908
|
-
positionStrategy = [
|
|
21909
|
-
{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: -1 },
|
|
21910
|
-
{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', weight: 0.8, offsetY: 1 }
|
|
21911
|
-
];
|
|
21912
21765
|
maxFlyoutHeight = 378;
|
|
21913
21766
|
_destroyRef = inject(DestroyRef);
|
|
21914
21767
|
frozenSelectedKeys = [];
|
|
@@ -22040,11 +21893,11 @@ class QdFilterItemSelectCategoryComponent {
|
|
|
22040
21893
|
}));
|
|
22041
21894
|
}
|
|
22042
21895
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
22043
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemSelectCategoryComponent, isStandalone: false, selector: "qd-filter-category-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-filter__category-select" }, viewQueries: [{ propertyName: "popoverDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }], ngImport: i0, template: "<div\n *ngIf=\"showSelectButton$ | async\"\n [class]=\"buttonClassName\"\n [qdPopoverOnClick]=\"filterLayer\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n [
|
|
21896
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemSelectCategoryComponent, isStandalone: false, selector: "qd-filter-category-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-filter__category-select" }, viewQueries: [{ propertyName: "popoverDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }], ngImport: i0, template: "<div\n *ngIf=\"showSelectButton$ | async\"\n [class]=\"buttonClassName\"\n [qdPopoverOnClick]=\"filterLayer\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n qdPopoverPlacement=\"bottom-start\"\n [qdPopoverOffsetY]=\"-1\"\n (opened)=\"onLayerOpened()\"\n (closed)=\"onLayerClosed()\"\n [attr.data-test-id]=\"testId + '-select-button'\"\n>\n <qd-icon\n *ngIf=\"!open\"\n [icon]=\"'ctrlDown'\"\n [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n [attr.data-test-id]=\"testId + '-closed'\"\n ></qd-icon>\n <qd-icon\n *ngIf=\"open\"\n [icon]=\"'ctrlTop'\"\n [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n [attr.data-test-id]=\"testId + '-opened'\"\n ></qd-icon>\n\n <div class=\"qd-filter__category-button-caption\">\n <span>\n {{ i18n | translate }}\n </span>\n </div>\n\n <ng-container *ngIf=\"(isMobile$ | async) && type === 'multiSelect'; else desktopChips\">\n <qd-chip\n *ngIf=\"activeItemCount > 0\"\n [state]=\"'filter'\"\n [close]=\"true\"\n (closeClickEmitter)=\"clearAll()\"\n [data-test-id]=\"testId + '-selected-chip-count'\"\n >{{ activeItemCount }}</qd-chip\n >\n </ng-container>\n <ng-template #desktopChips>\n <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n </ng-template>\n</div>\n\n<ng-template #filterLayer>\n <div [class]=\"layerContentClassName\">\n <qd-icon\n *ngIf=\"closeButton\"\n [class]=\"'qd-filter__category-layer-close'\"\n (click)=\"closeLayer()\"\n [icon]=\"'ctrlTop'\"\n [attr.data-test-id]=\"testId + '-layer-close'\"\n ></qd-icon>\n\n <ng-container *ngIf=\"itemsLoading$ | async; else categoryContent\" [ngTemplateOutlet]=\"loadingState\"></ng-container>\n\n <ng-template #categoryContent>\n <ng-container [ngSwitch]=\"type\">\n <ng-container *ngSwitchCase=\"'multiSelect'\">\n <qd-filter-form-items\n *ngIf=\"filter\"\n [inputFilterValue]=\"filterCategoryValue$ | async\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId\"\n ></qd-filter-form-items>\n\n <div class=\"qd-filter__category-layer-items\">\n <ng-container\n *ngFor=\"let entry of selectedDropdownEntries; trackBy: trackByItem\"\n [ngTemplateOutlet]=\"multiSelectItem\"\n [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n ></ng-container>\n\n <div\n *ngIf=\"showSelectedSeparator\"\n class=\"qd-filter__category-layer-separator\"\n [attr.data-test-id]=\"testId + '-selected-separator'\"\n ></div>\n\n <ng-container\n *ngFor=\"let entry of unselectedDropdownEntries; trackBy: trackByItem\"\n [ngTemplateOutlet]=\"multiSelectItem\"\n [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n ></ng-container>\n\n <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'singleSelect'\">\n <qd-filter-form-items\n *ngIf=\"filter\"\n [inputFilterValue]=\"filterCategoryValue$ | async\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId\"\n ></qd-filter-form-items>\n\n <div class=\"qd-filter__category-layer-items\">\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <qd-filter-item-single-select\n *ngIf=\"!item.hidden\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"itemIndex\"\n (closeEventEmitter)=\"closeLayer()\"\n [filterId]=\"filterId\"\n [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n >\n </qd-filter-item-single-select>\n </ng-container>\n\n <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #emptyState>\n <p class=\"qd-filter__category-layer-empty\" [attr.data-test-id]=\"testId + '-no-results'\">\n {{ \"i18n.qd.filter.noResults\" | translate }}\n </p>\n</ng-template>\n\n<ng-template #loadingState>\n <p class=\"qd-filter__category-layer-loading\" [attr.data-test-id]=\"testId + '-items-loading'\">\n {{ \"i18n.qd.filter.loading\" | translate }}\n </p>\n</ng-template>\n\n<ng-template #multiSelectItem let-item=\"item\" let-itemIndex=\"itemIndex\">\n <qd-filter-item-multi-select\n *ngIf=\"!item.hidden\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"itemIndex\"\n [filterId]=\"filterId\"\n [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n ></qd-filter-item-multi-select>\n</ng-template>\n\n<ng-template #SelectedChip>\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <!-- TODO: Add tooltip-->\n <qd-chip\n *ngIf=\"item.active\"\n [state]=\"'filter'\"\n [close]=\"true\"\n (closeClickEmitter)=\"close($event)\"\n [data]=\"itemIndex\"\n [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n >{{ item.i18n | translate }}</qd-chip\n >\n </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{position:relative;display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-separator{height:.0625rem;flex-shrink:0;background:#d5d5d5}::ng-deep .qd-filter__category-layer-empty,::ng-deep .qd-filter__category-layer-loading{padding:0 .9375rem;margin:0;color:#757575;font-size:.875rem;line-height:2.5rem}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:.5rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdFilterItemMultiSelectComponent, selector: "qd-filter-item-multi-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"] }, { kind: "component", type: QdFilterItemSingleSelectComponent, selector: "qd-filter-item-single-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"], outputs: ["closeEventEmitter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
22044
21897
|
}
|
|
22045
21898
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, decorators: [{
|
|
22046
21899
|
type: Component,
|
|
22047
|
-
args: [{ selector: 'qd-filter-category-select', host: { class: 'qd-filter__category-select' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n *ngIf=\"showSelectButton$ | async\"\n [class]=\"buttonClassName\"\n [qdPopoverOnClick]=\"filterLayer\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n [
|
|
21900
|
+
args: [{ selector: 'qd-filter-category-select', host: { class: 'qd-filter__category-select' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n *ngIf=\"showSelectButton$ | async\"\n [class]=\"buttonClassName\"\n [qdPopoverOnClick]=\"filterLayer\"\n [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n qdPopoverPlacement=\"bottom-start\"\n [qdPopoverOffsetY]=\"-1\"\n (opened)=\"onLayerOpened()\"\n (closed)=\"onLayerClosed()\"\n [attr.data-test-id]=\"testId + '-select-button'\"\n>\n <qd-icon\n *ngIf=\"!open\"\n [icon]=\"'ctrlDown'\"\n [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n [attr.data-test-id]=\"testId + '-closed'\"\n ></qd-icon>\n <qd-icon\n *ngIf=\"open\"\n [icon]=\"'ctrlTop'\"\n [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n [attr.data-test-id]=\"testId + '-opened'\"\n ></qd-icon>\n\n <div class=\"qd-filter__category-button-caption\">\n <span>\n {{ i18n | translate }}\n </span>\n </div>\n\n <ng-container *ngIf=\"(isMobile$ | async) && type === 'multiSelect'; else desktopChips\">\n <qd-chip\n *ngIf=\"activeItemCount > 0\"\n [state]=\"'filter'\"\n [close]=\"true\"\n (closeClickEmitter)=\"clearAll()\"\n [data-test-id]=\"testId + '-selected-chip-count'\"\n >{{ activeItemCount }}</qd-chip\n >\n </ng-container>\n <ng-template #desktopChips>\n <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n </ng-template>\n</div>\n\n<ng-template #filterLayer>\n <div [class]=\"layerContentClassName\">\n <qd-icon\n *ngIf=\"closeButton\"\n [class]=\"'qd-filter__category-layer-close'\"\n (click)=\"closeLayer()\"\n [icon]=\"'ctrlTop'\"\n [attr.data-test-id]=\"testId + '-layer-close'\"\n ></qd-icon>\n\n <ng-container *ngIf=\"itemsLoading$ | async; else categoryContent\" [ngTemplateOutlet]=\"loadingState\"></ng-container>\n\n <ng-template #categoryContent>\n <ng-container [ngSwitch]=\"type\">\n <ng-container *ngSwitchCase=\"'multiSelect'\">\n <qd-filter-form-items\n *ngIf=\"filter\"\n [inputFilterValue]=\"filterCategoryValue$ | async\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId\"\n ></qd-filter-form-items>\n\n <div class=\"qd-filter__category-layer-items\">\n <ng-container\n *ngFor=\"let entry of selectedDropdownEntries; trackBy: trackByItem\"\n [ngTemplateOutlet]=\"multiSelectItem\"\n [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n ></ng-container>\n\n <div\n *ngIf=\"showSelectedSeparator\"\n class=\"qd-filter__category-layer-separator\"\n [attr.data-test-id]=\"testId + '-selected-separator'\"\n ></div>\n\n <ng-container\n *ngFor=\"let entry of unselectedDropdownEntries; trackBy: trackByItem\"\n [ngTemplateOutlet]=\"multiSelectItem\"\n [ngTemplateOutletContext]=\"{ item: entry.item, itemIndex: entry.itemIndex }\"\n ></ng-container>\n\n <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'singleSelect'\">\n <qd-filter-form-items\n *ngIf=\"filter\"\n [inputFilterValue]=\"filterCategoryValue$ | async\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId\"\n ></qd-filter-form-items>\n\n <div class=\"qd-filter__category-layer-items\">\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <qd-filter-item-single-select\n *ngIf=\"!item.hidden\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"itemIndex\"\n (closeEventEmitter)=\"closeLayer()\"\n [filterId]=\"filterId\"\n [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n >\n </qd-filter-item-single-select>\n </ng-container>\n\n <ng-container *ngIf=\"hasNoVisibleItems\" [ngTemplateOutlet]=\"emptyState\"></ng-container>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #emptyState>\n <p class=\"qd-filter__category-layer-empty\" [attr.data-test-id]=\"testId + '-no-results'\">\n {{ \"i18n.qd.filter.noResults\" | translate }}\n </p>\n</ng-template>\n\n<ng-template #loadingState>\n <p class=\"qd-filter__category-layer-loading\" [attr.data-test-id]=\"testId + '-items-loading'\">\n {{ \"i18n.qd.filter.loading\" | translate }}\n </p>\n</ng-template>\n\n<ng-template #multiSelectItem let-item=\"item\" let-itemIndex=\"itemIndex\">\n <qd-filter-item-multi-select\n *ngIf=\"!item.hidden\"\n [categoryIndex]=\"categoryIndex\"\n [itemIndex]=\"itemIndex\"\n [filterId]=\"filterId\"\n [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n ></qd-filter-item-multi-select>\n</ng-template>\n\n<ng-template #SelectedChip>\n <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n <!-- TODO: Add tooltip-->\n <qd-chip\n *ngIf=\"item.active\"\n [state]=\"'filter'\"\n [close]=\"true\"\n (closeClickEmitter)=\"close($event)\"\n [data]=\"itemIndex\"\n [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n >{{ item.i18n | translate }}</qd-chip\n >\n </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{position:relative;display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-separator{height:.0625rem;flex-shrink:0;background:#d5d5d5}::ng-deep .qd-filter__category-layer-empty,::ng-deep .qd-filter__category-layer-loading{padding:0 .9375rem;margin:0;color:#757575;font-size:.875rem;line-height:2.5rem}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:.5rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"] }]
|
|
22048
21901
|
}], propDecorators: { filterId: [{
|
|
22049
21902
|
type: Input
|
|
22050
21903
|
}], categoryIndex: [{
|
|
@@ -25497,7 +25350,7 @@ class QdTableRowActionsSecondaryMenuComponent {
|
|
|
25497
25350
|
};
|
|
25498
25351
|
}
|
|
25499
25352
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowActionsSecondaryMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25500
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableRowActionsSecondaryMenuComponent, isStandalone: false, selector: "[qd-table-row-actions-secondary-menu]", inputs: { rowIndex: "rowIndex", rowData: "rowData", i18ns: "i18ns", testId: "testId", viewonly: "viewonly" }, ngImport: i0, template: "<ng-container *ngIf=\"actions$ | async as actions\">\n <button\n *ngIf=\"actions.length > 0\"\n type=\"button\"\n class=\"menu-button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMinWidth]=\"160\"\n [attr.data-test-id]=\"testId + '-toggler'\"\n >\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let action of actions; let i = index\"\n class=\"action-button\"\n type=\"button\"\n [disabled]=\"action.isDisabled\"\n (click)=\"onActionClick(action.type)\"\n [attr.data-test-id]=\"testId + '-' + i\"\n >\n {{ action.i18n | translate }}\n </button>\n </ng-template>\n</ng-container>\n", styles: [".menu-button{display:flex;padding:.1875rem .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem}.menu-button:hover,.menu-button:focus{color:#000}.action-button{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.action-button:hover{background-color:#f2f7fa}.action-button.disabled{color:#b4b4b4;cursor:not-allowed}.action-button.disabled:hover{background-color:#fff0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "
|
|
25353
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableRowActionsSecondaryMenuComponent, isStandalone: false, selector: "[qd-table-row-actions-secondary-menu]", inputs: { rowIndex: "rowIndex", rowData: "rowData", i18ns: "i18ns", testId: "testId", viewonly: "viewonly" }, ngImport: i0, template: "<ng-container *ngIf=\"actions$ | async as actions\">\n <button\n *ngIf=\"actions.length > 0\"\n type=\"button\"\n class=\"menu-button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMinWidth]=\"160\"\n [attr.data-test-id]=\"testId + '-toggler'\"\n >\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let action of actions; let i = index\"\n class=\"action-button\"\n type=\"button\"\n [disabled]=\"action.isDisabled\"\n (click)=\"onActionClick(action.type)\"\n [attr.data-test-id]=\"testId + '-' + i\"\n >\n {{ action.i18n | translate }}\n </button>\n </ng-template>\n</ng-container>\n", styles: [".menu-button{display:flex;padding:.1875rem .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem}.menu-button:hover,.menu-button:focus{color:#000}.action-button{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.action-button:hover{background-color:#f2f7fa}.action-button.disabled{color:#b4b4b4;cursor:not-allowed}.action-button.disabled:hover{background-color:#fff0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
25501
25354
|
}
|
|
25502
25355
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowActionsSecondaryMenuComponent, decorators: [{
|
|
25503
25356
|
type: Component,
|
|
@@ -27935,7 +27788,7 @@ class QdTreeRowActionsSecondaryMenuComponent {
|
|
|
27935
27788
|
.subscribe(({ payload }) => this._viewonly$.next(payload.isViewonly));
|
|
27936
27789
|
}
|
|
27937
27790
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTreeRowActionsSecondaryMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
27938
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTreeRowActionsSecondaryMenuComponent, isStandalone: false, selector: "[qd-tree-row-actions-secondary-menu]", inputs: { rowIndex: "rowIndex", rowData: "rowData", config: "config", testId: "testId" }, ngImport: i0, template: "<ng-container *ngIf=\"hasVisibleActions$ | async\">\n <button\n type=\"button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMinWidth]=\"200\"\n class=\"menu-button\"\n [attr.data-test-id]=\"testId + '-toggler'\"\n >\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <ng-container *ngFor=\"let action of actions$ | async; let i = index\">\n <button\n *ngIf=\"!action.isHidden\"\n class=\"action-button\"\n (click)=\"handleSecondaryAction(action.type, rowIndex, action.isHidden)\"\n [attr.data-test-id]=\"testId + '-' + i\"\n >\n {{ action.i18n | translate }}\n </button>\n </ng-container>\n </ng-template>\n</ng-container>\n", styles: [".menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000}.action-button{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.action-button:hover{background-color:#f2f7fa}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "
|
|
27791
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTreeRowActionsSecondaryMenuComponent, isStandalone: false, selector: "[qd-tree-row-actions-secondary-menu]", inputs: { rowIndex: "rowIndex", rowData: "rowData", config: "config", testId: "testId" }, ngImport: i0, template: "<ng-container *ngIf=\"hasVisibleActions$ | async\">\n <button\n type=\"button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMinWidth]=\"200\"\n class=\"menu-button\"\n [attr.data-test-id]=\"testId + '-toggler'\"\n >\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <ng-container *ngFor=\"let action of actions$ | async; let i = index\">\n <button\n *ngIf=\"!action.isHidden\"\n class=\"action-button\"\n (click)=\"handleSecondaryAction(action.type, rowIndex, action.isHidden)\"\n [attr.data-test-id]=\"testId + '-' + i\"\n >\n {{ action.i18n | translate }}\n </button>\n </ng-container>\n </ng-template>\n</ng-container>\n", styles: [".menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000}.action-button{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.action-button:hover{background-color:#f2f7fa}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
27939
27792
|
}
|
|
27940
27793
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTreeRowActionsSecondaryMenuComponent, decorators: [{
|
|
27941
27794
|
type: Component,
|
|
@@ -29142,8 +28995,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
29142
28995
|
|
|
29143
28996
|
class QdPageCommitActionExecutor {
|
|
29144
28997
|
static execute(action, values, context) {
|
|
29145
|
-
const { formGroupManager, navigationInterceptor, destroyed$, onAfterSnapshot } = context;
|
|
29146
|
-
const captured = formGroupManager.
|
|
28998
|
+
const { formGroupManager, navigationInterceptor, destroyed$, onAfterSnapshot, scheduleFrameworkRebuildStop } = context;
|
|
28999
|
+
const captured = formGroupManager.createCurrentValuesSnapshot();
|
|
29147
29000
|
let result$;
|
|
29148
29001
|
navigationInterceptor.executeWithBypass(() => {
|
|
29149
29002
|
const handlerResult = action.handler(values);
|
|
@@ -29151,7 +29004,9 @@ class QdPageCommitActionExecutor {
|
|
|
29151
29004
|
result$ = handlerResult;
|
|
29152
29005
|
});
|
|
29153
29006
|
const applySuccess = () => {
|
|
29154
|
-
formGroupManager.
|
|
29007
|
+
formGroupManager.updateSavedSnapshotFromValues(captured);
|
|
29008
|
+
formGroupManager.startAdoptingFrameworkRebuild();
|
|
29009
|
+
scheduleFrameworkRebuildStop?.();
|
|
29155
29010
|
navigationInterceptor.executeWithBypass(() => {
|
|
29156
29011
|
try {
|
|
29157
29012
|
onAfterSnapshot?.();
|
|
@@ -29195,136 +29050,170 @@ class QdPageCommitActionExecutor {
|
|
|
29195
29050
|
}
|
|
29196
29051
|
|
|
29197
29052
|
/**
|
|
29198
|
-
*
|
|
29199
|
-
*
|
|
29200
|
-
*
|
|
29201
|
-
*
|
|
29202
|
-
*
|
|
29203
|
-
*
|
|
29204
|
-
* -
|
|
29205
|
-
* -
|
|
29206
|
-
* -
|
|
29207
|
-
* -
|
|
29208
|
-
*
|
|
29209
|
-
* ####
|
|
29210
|
-
*
|
|
29211
|
-
*
|
|
29212
|
-
*
|
|
29213
|
-
*
|
|
29214
|
-
*
|
|
29215
|
-
*
|
|
29216
|
-
*
|
|
29217
|
-
*
|
|
29218
|
-
*
|
|
29219
|
-
*
|
|
29220
|
-
*
|
|
29221
|
-
* **
|
|
29222
|
-
*
|
|
29223
|
-
*
|
|
29224
|
-
*
|
|
29225
|
-
*
|
|
29226
|
-
*
|
|
29227
|
-
* ```ts
|
|
29228
|
-
* service.takeFormGroupsSnapshot();
|
|
29229
|
-
* ```
|
|
29230
|
-
*
|
|
29231
|
-
* **Detect Changes**
|
|
29232
|
-
* ```ts
|
|
29233
|
-
* service.$hasValuesChanged().subscribe(changed => {
|
|
29234
|
-
* if (changed) {
|
|
29235
|
-
* console.log('Form data has changed');
|
|
29236
|
-
* }
|
|
29237
|
-
* });
|
|
29238
|
-
* ```
|
|
29239
|
-
*
|
|
29240
|
-
* **Restore from Snapshot**
|
|
29241
|
-
* ```ts
|
|
29242
|
-
* service.restoreFormGroupsFromSnapshot();
|
|
29243
|
-
* ```
|
|
29244
|
-
*
|
|
29245
|
-
* **Check if All Forms Are Valid**
|
|
29246
|
-
* ```ts
|
|
29247
|
-
* service.$areFormGroupsValid().subscribe(valid => {
|
|
29248
|
-
* if (valid) {
|
|
29249
|
-
* console.log('All forms valid!');
|
|
29250
|
-
* }
|
|
29251
|
-
* });
|
|
29252
|
-
* ```
|
|
29253
|
-
*
|
|
29254
|
-
* #### Notes:
|
|
29255
|
-
* - FormArrays are not replaced during restore. Their length is adjusted and their content reset.
|
|
29256
|
-
* - Control cloning is recursive and structure-preserving.
|
|
29257
|
-
* - No structural information is stored in the snapshot; only data.
|
|
29053
|
+
* Central tracker for all reactive forms on a single QdPage.
|
|
29054
|
+
*
|
|
29055
|
+
* Its main job is to answer one question: **has the user changed anything since the last save?**
|
|
29056
|
+
* The page uses that answer to warn before leaving with unsaved changes.
|
|
29057
|
+
*
|
|
29058
|
+
* #### What it does
|
|
29059
|
+
* - **Registry** — holds every form of the page and gives access to it.
|
|
29060
|
+
* - **Change detection** — keeps a snapshot of the saved values and compares the live form against it.
|
|
29061
|
+
* - **Restore** — resets the forms back to the snapshot when the user discards changes.
|
|
29062
|
+
* - **Validity** — reports whether all forms are valid and can cancel in-flight async validators.
|
|
29063
|
+
*
|
|
29064
|
+
* #### Adopting framework rebuilds
|
|
29065
|
+
* After a save, the consumer often rebuilds the form itself — a `FormArray` cleared and pushed
|
|
29066
|
+
* again, or a control replaced via `setControl`. A plain value compare would wrongly read that as a
|
|
29067
|
+
* user edit. To prevent that:
|
|
29068
|
+
*
|
|
29069
|
+
* - **What it does** — right after each save or snapshot write, the framework briefly *adopts its
|
|
29070
|
+
* own rebuild* (`startAdoptingFrameworkRebuild`) and folds those control replacements into the
|
|
29071
|
+
* snapshot, so they count as already saved.
|
|
29072
|
+
* - **Why it is needed** — otherwise a rebuilt value (text `"99"` becoming number `99`) would look
|
|
29073
|
+
* like an unsaved change.
|
|
29074
|
+
* - **When it ends** — the page stops adopting once the rebuild has rendered
|
|
29075
|
+
* (`stopAdoptingFrameworkRebuild`).
|
|
29076
|
+
* - **User edits stay unsaved** — they always happen after that window, so they are still reported.
|
|
29077
|
+
*
|
|
29078
|
+
* #### Notes
|
|
29079
|
+
* - Snapshots store only **raw values** (`getRawValue()`), never control instances — cheap to keep and compare.
|
|
29080
|
+
* - Restoring a `FormArray` adjusts its length and resets its contents; it never replaces the array instance.
|
|
29081
|
+
* - No structural information is stored in the snapshot, only data.
|
|
29258
29082
|
*/
|
|
29259
29083
|
class QdFormGroupManagerService {
|
|
29260
29084
|
_formGroups = new Map();
|
|
29261
29085
|
_formGroupsSnapshot = new Map();
|
|
29086
|
+
_knownControlInstances = new Map();
|
|
29087
|
+
_isAdoptingFrameworkRebuild = false;
|
|
29088
|
+
_frameworkRebuildSub;
|
|
29262
29089
|
_formGroupsChanged$ = new BehaviorSubject(undefined);
|
|
29090
|
+
_keysInInitialBuildup = new Set();
|
|
29091
|
+
/**
|
|
29092
|
+
* Registers a form under a key so the manager can track it.
|
|
29093
|
+
*
|
|
29094
|
+
* On first registration it also seeds the saved snapshot from the current values, so a freshly
|
|
29095
|
+
* registered form counts as unchanged until the user actually edits it.
|
|
29096
|
+
*/
|
|
29263
29097
|
setFormGroup(key, formGroup) {
|
|
29264
29098
|
this._formGroups.set(key, formGroup);
|
|
29099
|
+
if (!this._formGroupsSnapshot.has(key)) {
|
|
29100
|
+
this._formGroupsSnapshot.set(key, formGroup.getRawValue());
|
|
29101
|
+
this.rememberControlInstances(key, formGroup);
|
|
29102
|
+
this._keysInInitialBuildup.add(key);
|
|
29103
|
+
}
|
|
29265
29104
|
this._formGroupsChanged$.next();
|
|
29266
29105
|
}
|
|
29106
|
+
/**
|
|
29107
|
+
* Returns the form registered under the given key, or `undefined` if none is registered.
|
|
29108
|
+
*/
|
|
29267
29109
|
getFormGroup(key) {
|
|
29268
29110
|
return this._formGroups.get(key);
|
|
29269
29111
|
}
|
|
29112
|
+
/**
|
|
29113
|
+
* Returns all registered forms, keyed by their registration key.
|
|
29114
|
+
*/
|
|
29270
29115
|
getAllFormGroups() {
|
|
29271
29116
|
return this._formGroups;
|
|
29272
29117
|
}
|
|
29273
|
-
|
|
29274
|
-
|
|
29275
|
-
|
|
29276
|
-
}
|
|
29118
|
+
/**
|
|
29119
|
+
* Returns `true` if at least one form is registered.
|
|
29120
|
+
*/
|
|
29277
29121
|
hasFormGroups() {
|
|
29278
29122
|
return this._formGroups.size > 0;
|
|
29279
29123
|
}
|
|
29124
|
+
/**
|
|
29125
|
+
* Returns `true` if no form is registered under the given key yet.
|
|
29126
|
+
*/
|
|
29127
|
+
isFormGroupKeyUnique(key) {
|
|
29128
|
+
return !this._formGroups.has(key);
|
|
29129
|
+
}
|
|
29130
|
+
/**
|
|
29131
|
+
* Returns the current `.value` of every registered form, keyed by registration key.
|
|
29132
|
+
*
|
|
29133
|
+
* Uses Angular's `.value`, so disabled controls are omitted. Use the snapshot methods when you
|
|
29134
|
+
* need the raw values including disabled controls.
|
|
29135
|
+
*/
|
|
29280
29136
|
getAllValues() {
|
|
29281
29137
|
const allValues = {};
|
|
29282
29138
|
this._formGroups.forEach((formGroup, key) => (allValues[key] = formGroup.value));
|
|
29283
29139
|
return allValues;
|
|
29284
29140
|
}
|
|
29285
|
-
|
|
29286
|
-
|
|
29141
|
+
/**
|
|
29142
|
+
* Unregisters the form under the given key and drops its instance tracking.
|
|
29143
|
+
*
|
|
29144
|
+
* Does nothing if no form is registered for the key.
|
|
29145
|
+
*/
|
|
29146
|
+
tryRemoveFormGroup(key) {
|
|
29147
|
+
this._formGroups.delete(key);
|
|
29148
|
+
this._knownControlInstances.delete(key);
|
|
29149
|
+
this._keysInInitialBuildup.delete(key);
|
|
29150
|
+
this._formGroupsChanged$.next();
|
|
29287
29151
|
}
|
|
29288
|
-
|
|
29289
|
-
|
|
29290
|
-
|
|
29291
|
-
|
|
29292
|
-
|
|
29293
|
-
|
|
29294
|
-
|
|
29152
|
+
/**
|
|
29153
|
+
* Ends the initial-buildup phase for a key and fixes its baseline from the form as it is now.
|
|
29154
|
+
*
|
|
29155
|
+
* During that phase the key never counts as changed, so a form filled right after registration
|
|
29156
|
+
* (e.g. by an `effect`) is not flagged as unsaved. This stores the current values as the baseline,
|
|
29157
|
+
* so later edits are measured against the filled form.
|
|
29158
|
+
*
|
|
29159
|
+
* Does nothing if the key is not in its initial-buildup phase.
|
|
29160
|
+
*/
|
|
29161
|
+
endInitialBuildup(key) {
|
|
29162
|
+
if (!this._keysInInitialBuildup.delete(key))
|
|
29163
|
+
return;
|
|
29164
|
+
const formGroup = this._formGroups.get(key);
|
|
29165
|
+
if (formGroup) {
|
|
29166
|
+
this._formGroupsSnapshot.set(key, formGroup.getRawValue());
|
|
29167
|
+
this.rememberControlInstances(key, formGroup);
|
|
29168
|
+
}
|
|
29169
|
+
this._formGroupsChanged$.next();
|
|
29295
29170
|
}
|
|
29171
|
+
/**
|
|
29172
|
+
* Emits whether any registered form differs from its saved snapshot — i.e. whether the user has
|
|
29173
|
+
* unsaved changes.
|
|
29174
|
+
*
|
|
29175
|
+
* Framework-driven rebuilds are folded into the snapshot first while the framework is adopting
|
|
29176
|
+
* them (see the class docs), so they are not reported as changes.
|
|
29177
|
+
*/
|
|
29296
29178
|
$hasValuesChanged() {
|
|
29297
|
-
return this._formGroupsChanged$.pipe(observeOn(queueScheduler), switchMap$1(() =>
|
|
29298
|
-
if (!this.hasFormGroups())
|
|
29299
|
-
return of(false);
|
|
29300
|
-
const obs = Array.from(this._formGroups.entries()).map(([key, fg]) => fg.valueChanges.pipe(startWith(fg.getRawValue()), map(() => {
|
|
29301
|
-
const currentValues = fg.getRawValue();
|
|
29302
|
-
const snapshot = this._formGroupsSnapshot.get(key);
|
|
29303
|
-
return snapshot ? !isEqual$1(currentValues, snapshot) : true;
|
|
29304
|
-
})));
|
|
29305
|
-
return combineLatest(obs).pipe(map(changes => changes.some(Boolean)));
|
|
29306
|
-
}));
|
|
29179
|
+
return this._formGroupsChanged$.pipe(observeOn(queueScheduler), switchMap$1(() => this.anyRegisteredFormChanged$()));
|
|
29307
29180
|
}
|
|
29308
|
-
|
|
29309
|
-
|
|
29181
|
+
/**
|
|
29182
|
+
* Overwrites the saved snapshot with the **current** form values — for a **synchronous** save
|
|
29183
|
+
* that is already finished.
|
|
29184
|
+
*
|
|
29185
|
+
* - Stores each form's raw values (`getRawValue`) as the new saved snapshot.
|
|
29186
|
+
* - Takes them **directly, without a deep copy** — synchronous means no edits can slip in
|
|
29187
|
+
* between, so the cheap path is safe (only the async path needs the copy).
|
|
29188
|
+
* - Afterwards the current state counts as saved; later edits are measured against it.
|
|
29189
|
+
*
|
|
29190
|
+
* For an **asynchronous** save, use `createCurrentValuesSnapshot()` + `updateSavedSnapshotFromValues()`.
|
|
29191
|
+
*/
|
|
29192
|
+
updateSavedSnapshotFromCurrentValues() {
|
|
29193
|
+
this._formGroups.forEach((fg, key) => {
|
|
29194
|
+
this._formGroupsSnapshot.set(key, fg.getRawValue());
|
|
29195
|
+
this.rememberControlInstances(key, fg);
|
|
29196
|
+
});
|
|
29310
29197
|
}
|
|
29311
29198
|
/**
|
|
29312
|
-
*
|
|
29199
|
+
* Creates an independent snapshot of the **current** form values and returns it — for the
|
|
29200
|
+
* **click moment** of an **asynchronous** save.
|
|
29313
29201
|
*
|
|
29314
|
-
*
|
|
29315
|
-
*
|
|
29316
|
-
* while
|
|
29202
|
+
* - Deep-copies each form's raw values (`structuredClone`), detached from the live form.
|
|
29203
|
+
* - Writes **nothing** internally — the saved snapshot stays unchanged.
|
|
29204
|
+
* - Freezes the click-time state: later edits (while the backend runs) do not change the copy.
|
|
29205
|
+
* - Hand the result to `updateSavedSnapshotFromValues()` once the save succeeds.
|
|
29317
29206
|
*
|
|
29318
29207
|
* Throws if any form value is not structured-cloneable (functions, symbols, DOM nodes).
|
|
29319
29208
|
*/
|
|
29320
|
-
|
|
29209
|
+
createCurrentValuesSnapshot() {
|
|
29321
29210
|
const captured = new Map();
|
|
29322
29211
|
this._formGroups.forEach((fg, key) => {
|
|
29323
29212
|
try {
|
|
29324
29213
|
captured.set(key, structuredClone(fg.getRawValue()));
|
|
29325
29214
|
}
|
|
29326
29215
|
catch (err) {
|
|
29327
|
-
throw new Error(`Quadrel Framework | QdFormGroupManager -
|
|
29216
|
+
throw new Error(`Quadrel Framework | QdFormGroupManager - createCurrentValuesSnapshot() failed for group "${key}". ` +
|
|
29328
29217
|
`Form values must be structured-cloneable. Non-cloneable values like functions, ` +
|
|
29329
29218
|
`symbols, or DOM nodes are not supported. Original error: ${String(err)}`);
|
|
29330
29219
|
}
|
|
@@ -29332,15 +29221,27 @@ class QdFormGroupManagerService {
|
|
|
29332
29221
|
return captured;
|
|
29333
29222
|
}
|
|
29334
29223
|
/**
|
|
29335
|
-
*
|
|
29224
|
+
* Overwrites the saved snapshot with the **given** snapshot — on **success** of an
|
|
29225
|
+
* **asynchronous** save, using the snapshot taken earlier by `createCurrentValuesSnapshot()`.
|
|
29336
29226
|
*
|
|
29337
|
-
*
|
|
29338
|
-
*
|
|
29339
|
-
*
|
|
29340
|
-
*/
|
|
29341
|
-
|
|
29342
|
-
|
|
29227
|
+
* - Stores the passed snapshot as the new saved state.
|
|
29228
|
+
* - Uses the click-time snapshot, **not** the current form — so edits the user made while the
|
|
29229
|
+
* backend was running stay correctly marked as unsaved.
|
|
29230
|
+
*/
|
|
29231
|
+
updateSavedSnapshotFromValues(snapshot) {
|
|
29232
|
+
snapshot.forEach((values, key) => {
|
|
29233
|
+
this._formGroupsSnapshot.set(key, values);
|
|
29234
|
+
const formGroup = this._formGroups.get(key);
|
|
29235
|
+
if (formGroup)
|
|
29236
|
+
this.rememberControlInstances(key, formGroup);
|
|
29237
|
+
});
|
|
29343
29238
|
}
|
|
29239
|
+
/**
|
|
29240
|
+
* Resets every registered form back to its saved snapshot — used when the user discards changes.
|
|
29241
|
+
*
|
|
29242
|
+
* FormArrays are resized to match the snapshot length; pending async validators are cancelled
|
|
29243
|
+
* afterwards so no stale validation result survives the restore.
|
|
29244
|
+
*/
|
|
29344
29245
|
restoreFormGroupsFromSnapshot() {
|
|
29345
29246
|
this._formGroups.forEach((fg, key) => {
|
|
29346
29247
|
const snapshot = this._formGroupsSnapshot.get(key);
|
|
@@ -29351,68 +29252,171 @@ class QdFormGroupManagerService {
|
|
|
29351
29252
|
this.cancelPendingAsyncValidation();
|
|
29352
29253
|
}
|
|
29353
29254
|
/**
|
|
29354
|
-
*
|
|
29255
|
+
* Starts adopting framework rebuilds into the snapshot. While active, a framework-driven control
|
|
29256
|
+
* replacement (a `setControl` on a leaf or a whole `FormArray` rebuilt via clear/push) is folded
|
|
29257
|
+
* into the saved snapshot, so it is not reported as an unsaved change.
|
|
29258
|
+
*
|
|
29259
|
+
* User edits never fall in this short window, so they stay dirty. The framework starts it after a
|
|
29260
|
+
* successful commit and after every snapshot write; the page stops it deterministically once the
|
|
29261
|
+
* rebuild has rendered.
|
|
29262
|
+
*/
|
|
29263
|
+
startAdoptingFrameworkRebuild() {
|
|
29264
|
+
this._isAdoptingFrameworkRebuild = true;
|
|
29265
|
+
this._frameworkRebuildSub?.unsubscribe();
|
|
29266
|
+
const valueStreams = Array.from(this._formGroups.values()).map(fg => fg.valueChanges);
|
|
29267
|
+
if (valueStreams.length)
|
|
29268
|
+
this._frameworkRebuildSub = merge(...valueStreams).subscribe(() => this.adoptFrameworkRebuild());
|
|
29269
|
+
this.adoptFrameworkRebuild();
|
|
29270
|
+
}
|
|
29271
|
+
/**
|
|
29272
|
+
* Stops adopting framework rebuilds. After this, control replacements count as user edits again.
|
|
29355
29273
|
*
|
|
29356
|
-
*
|
|
29357
|
-
|
|
29358
|
-
|
|
29274
|
+
* The page calls this once the framework rebuild has rendered (via `afterNextRender`).
|
|
29275
|
+
*/
|
|
29276
|
+
stopAdoptingFrameworkRebuild() {
|
|
29277
|
+
this._isAdoptingFrameworkRebuild = false;
|
|
29278
|
+
this._frameworkRebuildSub?.unsubscribe();
|
|
29279
|
+
}
|
|
29280
|
+
/**
|
|
29281
|
+
* Emits whether every registered form is currently valid.
|
|
29282
|
+
*
|
|
29283
|
+
* A disabled control without validators is treated as valid.
|
|
29284
|
+
*/
|
|
29285
|
+
$areFormGroupsValid() {
|
|
29286
|
+
return this._formGroupsChanged$.pipe(observeOn(queueScheduler), switchMap$1(() => {
|
|
29287
|
+
if (!this.hasFormGroups())
|
|
29288
|
+
return of(false);
|
|
29289
|
+
const obs = Array.from(this._formGroups.values()).map(fg => fg.statusChanges.pipe(startWith(fg.status), map(() => this.areFormGroupsValid(fg))));
|
|
29290
|
+
return combineLatest(obs).pipe(map(valids => valids.every(Boolean)));
|
|
29291
|
+
}));
|
|
29292
|
+
}
|
|
29293
|
+
/**
|
|
29294
|
+
* Cancels every in-flight (PENDING) async validator across all registered forms, so no stale
|
|
29295
|
+
* validation result can land after a restore or a commit.
|
|
29296
|
+
*
|
|
29297
|
+
* The async validators themselves are kept — only the pending run is dropped. Each phase runs
|
|
29298
|
+
* over **all** pending controls before the next starts (detach → re-evaluate sync-only, no
|
|
29299
|
+
* cascade → re-attach), so validity is never recomputed while a run is still settling.
|
|
29359
29300
|
*/
|
|
29360
29301
|
cancelPendingAsyncValidation() {
|
|
29361
29302
|
this._formGroups.forEach(fg => {
|
|
29362
29303
|
const pendingControls = this.collectPendingControls(fg);
|
|
29363
29304
|
if (pendingControls.length === 0)
|
|
29364
29305
|
return;
|
|
29365
|
-
|
|
29366
|
-
|
|
29367
|
-
}
|
|
29368
|
-
for (const { control } of pendingControls) {
|
|
29369
|
-
control.updateValueAndValidity({ onlySelf: true });
|
|
29370
|
-
}
|
|
29371
|
-
for (const { control, asyncValidator } of pendingControls) {
|
|
29372
|
-
control.setAsyncValidators(asyncValidator);
|
|
29373
|
-
}
|
|
29306
|
+
pendingControls.forEach(({ control }) => control.clearAsyncValidators());
|
|
29307
|
+
pendingControls.forEach(({ control }) => control.updateValueAndValidity({ onlySelf: true }));
|
|
29308
|
+
pendingControls.forEach(({ control, asyncValidator }) => control.setAsyncValidators(asyncValidator));
|
|
29374
29309
|
});
|
|
29375
29310
|
}
|
|
29376
|
-
|
|
29377
|
-
|
|
29378
|
-
|
|
29379
|
-
|
|
29380
|
-
|
|
29381
|
-
|
|
29382
|
-
|
|
29383
|
-
|
|
29384
|
-
|
|
29385
|
-
|
|
29386
|
-
|
|
29387
|
-
|
|
29311
|
+
anyRegisteredFormChanged$() {
|
|
29312
|
+
if (!this.hasFormGroups())
|
|
29313
|
+
return of(false);
|
|
29314
|
+
const perForm = Array.from(this._formGroups.entries()).map(([key, fg]) => fg.valueChanges.pipe(startWith(null), map(() => this.hasFormChanged(key, fg))));
|
|
29315
|
+
return combineLatest(perForm).pipe(map(flags => flags.some(Boolean)));
|
|
29316
|
+
}
|
|
29317
|
+
hasFormChanged(key, fg) {
|
|
29318
|
+
if (this._keysInInitialBuildup.has(key))
|
|
29319
|
+
return false;
|
|
29320
|
+
const snapshot = this._formGroupsSnapshot.get(key);
|
|
29321
|
+
if (snapshot)
|
|
29322
|
+
this.adoptRebuildInGroup(key, fg, snapshot);
|
|
29323
|
+
return snapshot ? !isEqual$1(fg.getRawValue(), snapshot) : true;
|
|
29324
|
+
}
|
|
29325
|
+
adoptFrameworkRebuild() {
|
|
29326
|
+
this._formGroups.forEach((fg, key) => {
|
|
29327
|
+
const snapshot = this._formGroupsSnapshot.get(key);
|
|
29328
|
+
if (snapshot)
|
|
29329
|
+
this.adoptRebuildInGroup(key, fg, snapshot);
|
|
29388
29330
|
});
|
|
29389
29331
|
}
|
|
29390
|
-
|
|
29391
|
-
const
|
|
29392
|
-
|
|
29393
|
-
|
|
29394
|
-
|
|
29395
|
-
|
|
29396
|
-
|
|
29397
|
-
|
|
29398
|
-
|
|
29399
|
-
|
|
29332
|
+
adoptRebuildInGroup(key, formGroup, snapshot) {
|
|
29333
|
+
const tracked = this._knownControlInstances.get(key) ?? new Map();
|
|
29334
|
+
this.adoptRebuiltControls(formGroup, snapshot, tracked, '');
|
|
29335
|
+
this._knownControlInstances.set(key, tracked);
|
|
29336
|
+
}
|
|
29337
|
+
adoptRebuiltControls(group, snapshot, tracked, prefix) {
|
|
29338
|
+
Object.entries(group.controls).forEach(([name, control]) => {
|
|
29339
|
+
const path = prefix ? `${prefix}.${name}` : name;
|
|
29340
|
+
const isNewKey = !(name in snapshot);
|
|
29341
|
+
if (control instanceof FormArray)
|
|
29342
|
+
this.adoptRebuiltList(control, snapshot, name, isNewKey);
|
|
29343
|
+
else if (control instanceof FormGroup)
|
|
29344
|
+
this.adoptRebuiltGroup(control, snapshot, name, isNewKey, tracked, path);
|
|
29345
|
+
else
|
|
29346
|
+
this.adoptRebuiltField(control, snapshot, name, isNewKey, tracked.get(path));
|
|
29347
|
+
tracked.set(path, control);
|
|
29348
|
+
});
|
|
29349
|
+
}
|
|
29350
|
+
adoptRebuiltList(control, snapshot, name, isNewKey) {
|
|
29351
|
+
if (isNewKey) {
|
|
29352
|
+
this.adoptNewPristineControl(control, snapshot, name);
|
|
29353
|
+
return;
|
|
29400
29354
|
}
|
|
29401
|
-
|
|
29355
|
+
if (!this.isAdoptableArrayRebuild(control, snapshot, name))
|
|
29356
|
+
return;
|
|
29357
|
+
const snapshotArray = snapshot[name];
|
|
29358
|
+
const currentArray = control.getRawValue();
|
|
29359
|
+
if (currentArray.length === snapshotArray.length && !isEqual$1(currentArray, snapshotArray))
|
|
29360
|
+
snapshot[name] = currentArray;
|
|
29361
|
+
}
|
|
29362
|
+
adoptRebuiltGroup(group, snapshot, name, isNewKey, tracked, path) {
|
|
29363
|
+
if (isNewKey)
|
|
29364
|
+
this.adoptNewPristineControl(group, snapshot, name);
|
|
29365
|
+
const nested = snapshot[name];
|
|
29366
|
+
if (this.isPlainObject(nested))
|
|
29367
|
+
this.adoptRebuiltControls(group, nested, tracked, path);
|
|
29368
|
+
}
|
|
29369
|
+
adoptRebuiltField(control, snapshot, name, isNewKey, known) {
|
|
29370
|
+
if (isNewKey)
|
|
29371
|
+
this.adoptNewPristineControl(control, snapshot, name);
|
|
29372
|
+
else if (this.isReplacedPristineControl(control, known))
|
|
29373
|
+
snapshot[name] = control.getRawValue();
|
|
29374
|
+
}
|
|
29375
|
+
adoptNewPristineControl(control, snapshot, name) {
|
|
29376
|
+
if (control.pristine)
|
|
29377
|
+
snapshot[name] = control.getRawValue();
|
|
29378
|
+
}
|
|
29379
|
+
isAdoptableArrayRebuild(control, snapshot, name) {
|
|
29380
|
+
return this._isAdoptingFrameworkRebuild && control.pristine && Array.isArray(snapshot[name]);
|
|
29381
|
+
}
|
|
29382
|
+
isReplacedPristineControl(control, known) {
|
|
29383
|
+
return this._isAdoptingFrameworkRebuild && !!known && known !== control && control.pristine;
|
|
29384
|
+
}
|
|
29385
|
+
rememberControlInstances(key, formGroup) {
|
|
29386
|
+
const tracked = new Map();
|
|
29387
|
+
this.collectControlInstances(formGroup, tracked, '');
|
|
29388
|
+
this._knownControlInstances.set(key, tracked);
|
|
29389
|
+
}
|
|
29390
|
+
collectControlInstances(group, tracked, prefix) {
|
|
29391
|
+
Object.entries(group.controls).forEach(([name, control]) => {
|
|
29392
|
+
const path = prefix ? `${prefix}.${name}` : name;
|
|
29393
|
+
tracked.set(path, control);
|
|
29394
|
+
if (control instanceof FormGroup)
|
|
29395
|
+
this.collectControlInstances(control, tracked, path);
|
|
29396
|
+
});
|
|
29397
|
+
}
|
|
29398
|
+
restoreFormGroup(fg, snapshot) {
|
|
29399
|
+
Object.entries(fg.controls).forEach(([ctrlKey, ctrl]) => this.restoreControl(ctrl, snapshot[ctrlKey]));
|
|
29400
|
+
}
|
|
29401
|
+
restoreControl(ctrl, newValue) {
|
|
29402
|
+
if (ctrl instanceof FormArray && Array.isArray(newValue))
|
|
29403
|
+
this.resetFormArrayToValues(ctrl, newValue);
|
|
29404
|
+
else if (ctrl instanceof FormGroup && this.isPlainObject(newValue))
|
|
29405
|
+
this.restoreFormGroup(ctrl, newValue);
|
|
29406
|
+
else
|
|
29407
|
+
ctrl.reset(newValue);
|
|
29408
|
+
}
|
|
29409
|
+
isPlainObject(value) {
|
|
29410
|
+
return !!value && typeof value === 'object';
|
|
29402
29411
|
}
|
|
29403
29412
|
resetFormArrayToValues(array, newValues) {
|
|
29404
29413
|
if (!Array.isArray(newValues))
|
|
29405
29414
|
return;
|
|
29406
|
-
|
|
29407
|
-
const newLen = newValues.length;
|
|
29408
|
-
if (oldLen === 0 && newLen === 0)
|
|
29415
|
+
if (array.length === 0 && newValues.length === 0)
|
|
29409
29416
|
return;
|
|
29410
|
-
if (
|
|
29417
|
+
if (array.length === 0)
|
|
29411
29418
|
return this.initFormArrayFromValues(array, newValues);
|
|
29412
|
-
|
|
29413
|
-
array.push(this.deepCloneControl(array.at(0)));
|
|
29414
|
-
while (array.length > newLen)
|
|
29415
|
-
array.removeAt(array.length - 1);
|
|
29419
|
+
this.resizeFormArray(array, newValues.length);
|
|
29416
29420
|
array.reset(newValues);
|
|
29417
29421
|
}
|
|
29418
29422
|
initFormArrayFromValues(array, values) {
|
|
@@ -29428,6 +29432,12 @@ class QdFormGroupManagerService {
|
|
|
29428
29432
|
}
|
|
29429
29433
|
array.reset(values);
|
|
29430
29434
|
}
|
|
29435
|
+
resizeFormArray(array, length) {
|
|
29436
|
+
while (array.length < length)
|
|
29437
|
+
array.push(this.deepCloneControl(array.at(0)));
|
|
29438
|
+
while (array.length > length)
|
|
29439
|
+
array.removeAt(array.length - 1);
|
|
29440
|
+
}
|
|
29431
29441
|
deepCloneControl(control) {
|
|
29432
29442
|
if (control instanceof FormControl)
|
|
29433
29443
|
return new FormControl(undefined, control.validator, control.asyncValidator);
|
|
@@ -29445,6 +29455,19 @@ class QdFormGroupManagerService {
|
|
|
29445
29455
|
areFormGroupsValid(fg) {
|
|
29446
29456
|
return Object.values(fg.controls).every(c => (c.disabled && !c.validator && !c.asyncValidator ? true : c.valid));
|
|
29447
29457
|
}
|
|
29458
|
+
collectPendingControls(control) {
|
|
29459
|
+
const result = this.childControlsOf(control).flatMap(child => this.collectPendingControls(child));
|
|
29460
|
+
if (control.status === 'PENDING')
|
|
29461
|
+
result.push({ control, asyncValidator: control.asyncValidator });
|
|
29462
|
+
return result;
|
|
29463
|
+
}
|
|
29464
|
+
childControlsOf(control) {
|
|
29465
|
+
if (control instanceof FormGroup)
|
|
29466
|
+
return Object.values(control.controls);
|
|
29467
|
+
if (control instanceof FormArray)
|
|
29468
|
+
return control.controls;
|
|
29469
|
+
return [];
|
|
29470
|
+
}
|
|
29448
29471
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFormGroupManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
29449
29472
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFormGroupManagerService });
|
|
29450
29473
|
}
|
|
@@ -29473,7 +29496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
29473
29496
|
* - The page switches to view mode via `deactivate()`.
|
|
29474
29497
|
*
|
|
29475
29498
|
* The service has no concept of "pending actions" or bypass windows. Framework actions update the
|
|
29476
|
-
* saved snapshot directly via `QdFormGroupManagerService.
|
|
29499
|
+
* saved snapshot directly via `QdFormGroupManagerService.updateSavedSnapshotFromValues(...)`; cancel-discard
|
|
29477
29500
|
* flows reset the form to the saved snapshot via `restoreFormGroupsFromSnapshot()`. Either way, the
|
|
29478
29501
|
* interceptor only observes the resulting form state — there is no time window where a bypass is active.
|
|
29479
29502
|
*/
|
|
@@ -29623,6 +29646,7 @@ class QdPageObjectHeaderComponent {
|
|
|
29623
29646
|
confirmationDialogService = inject(QdConfirmationDialogOpenerService);
|
|
29624
29647
|
contextService = inject(QdContextService);
|
|
29625
29648
|
resolverTriggerService = inject(QdResolverTriggerService);
|
|
29649
|
+
injector = inject(Injector);
|
|
29626
29650
|
pageStoreService = inject(QdPageStoreService);
|
|
29627
29651
|
config;
|
|
29628
29652
|
hasNavigation = false;
|
|
@@ -29743,7 +29767,7 @@ class QdPageObjectHeaderComponent {
|
|
|
29743
29767
|
this.setupResolverTrigger();
|
|
29744
29768
|
this.updateCustomActions();
|
|
29745
29769
|
this.subscribeToMetadataStream();
|
|
29746
|
-
this.formGroupManagerService.
|
|
29770
|
+
this.formGroupManagerService.updateSavedSnapshotFromCurrentValues();
|
|
29747
29771
|
this.initContexts();
|
|
29748
29772
|
}
|
|
29749
29773
|
ngOnChanges(changes) {
|
|
@@ -29768,7 +29792,7 @@ class QdPageObjectHeaderComponent {
|
|
|
29768
29792
|
return this.config.headerFacets != null;
|
|
29769
29793
|
}
|
|
29770
29794
|
edit() {
|
|
29771
|
-
this.formGroupManagerService.
|
|
29795
|
+
this.formGroupManagerService.updateSavedSnapshotFromCurrentValues();
|
|
29772
29796
|
this.pageStoreService.toggleViewonly(false);
|
|
29773
29797
|
if (this.editButton?.handler)
|
|
29774
29798
|
this.editButton.handler();
|
|
@@ -29798,7 +29822,8 @@ class QdPageObjectHeaderComponent {
|
|
|
29798
29822
|
onAfterSnapshot: () => {
|
|
29799
29823
|
this.formGroupManagerService.cancelPendingAsyncValidation();
|
|
29800
29824
|
this.pageStoreService.toggleViewonly(true);
|
|
29801
|
-
}
|
|
29825
|
+
},
|
|
29826
|
+
scheduleFrameworkRebuildStop: () => afterNextRender(() => this.formGroupManagerService.stopAdoptingFrameworkRebuild(), { injector: this.injector })
|
|
29802
29827
|
});
|
|
29803
29828
|
}
|
|
29804
29829
|
changeContext(context, selection, event) {
|
|
@@ -29826,7 +29851,7 @@ class QdPageObjectHeaderComponent {
|
|
|
29826
29851
|
.pipe(takeUntil(this._destroyed$), filter(shouldTrigger => shouldTrigger), tap(() => this._isLoadingSubject.next(true)), switchMap(() => this.pageObjectResolver.resolve()), tap(objectData => {
|
|
29827
29852
|
this._pageObjectDataSubject.next({ ...objectData, ...this._pendingMetadata });
|
|
29828
29853
|
this._pendingMetadata = {};
|
|
29829
|
-
}), tap(() => this._isLoadingSubject.next(false)), tap(() => this.formGroupManagerService.
|
|
29854
|
+
}), tap(() => this._isLoadingSubject.next(false)), tap(() => this.formGroupManagerService.updateSavedSnapshotFromCurrentValues()))
|
|
29830
29855
|
.subscribe();
|
|
29831
29856
|
}
|
|
29832
29857
|
initContexts() {
|
|
@@ -29916,7 +29941,7 @@ class QdPageObjectHeaderComponent {
|
|
|
29916
29941
|
});
|
|
29917
29942
|
}
|
|
29918
29943
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageObjectHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
29919
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageObjectHeaderComponent, isStandalone: false, selector: "qd-page-object-header", inputs: { config: "config", hasNavigation: "hasNavigation", testId: ["data-test-id", "testId"] }, host: { listeners: { "click": "toggleFacets()" }, properties: { "style.borderBottom": "borderBottomStyle", "class.in-dialog": "this.isInDialog" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\"><qd-spinner></qd-spinner></div>\n\n<div class=\"object-header-top\">\n <header class=\"object-header-title\">{{ config.title.i18n | translate }}</header>\n <div class=\"object-header-toolbar\">\n <button class=\"button-icon\" data-test-id=\"archive-button\">\n <qd-icon\n *ngIf=\"showArchive$ | async\"\n (click)=\"archiveButton?.handler()\"\n class=\"header-action-icon\"\n [icon]=\"'resultNew'\"\n ></qd-icon>\n </button>\n\n <button class=\"button-icon\" data-test-id=\"delete-button\">\n <qd-icon\n class=\"header-action-icon\"\n *ngIf=\"showDelete$ | async\"\n (click)=\"deleteButton?.handler()\"\n [icon]=\"'trash'\"\n ></qd-icon>\n </button>\n\n <button *ngIf=\"showEdit$ | async\" qdButton (click)=\"edit()\" data-test-id=\"edit-button\">\n {{ editButton?.label?.i18n || \"i18n.qd.page.header.edit\" | translate }}\n </button>\n\n <button *ngIf=\"showCancel$ | async\" qdButton qdButtonGhost (click)=\"cancel()\" data-test-id=\"cancel-button\">\n {{ cancelButton.label?.i18n || \"i18n.qd.page.header.cancel\" | translate }}\n </button>\n\n <button\n *ngIf=\"showSave$ | async\"\n qdButton\n (click)=\"save()\"\n data-test-id=\"save-button\"\n [disabled]=\"($canSave | async) === false\"\n >\n {{ saveButton.label?.i18n || \"i18n.qd.page.header.save\" | translate }}\n </button>\n\n <ng-container *ngIf=\"customActions$ | async as customActions\">\n <ng-container *ngIf=\"!adaptiveMode; else adaptive\">\n <button\n [qdMenuButton]=\"customActions\"\n [autoSize]=\"false\"\n [data-test-id]=\"'page-'\"\n *ngIf=\"customActions.actions.length > 1; else singleButton\"\n data-test-id=\"custom-button\"\n >\n {{ config?.customActionsLabel?.i18n || \"i18n.qd.page.header.actions\" | translate }}\n </button>\n\n <ng-template #singleButton>\n <ng-container *ngIf=\"(customActions$ | async).actions[0] as singleAction\">\n <button\n qdButton\n *ngIf=\"singleAction.handler && !singleAction.isHidden\"\n [disabled]=\"singleAction.isDisabled\"\n (click)=\"singleAction.handler()\"\n data-test-id=\"custom-button\"\n >\n {{ singleAction.label?.i18n | translate }}\n </button>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-template #adaptive>\n <button\n *ngIf=\"(customActions$ | async)?.actions.length >= 1\"\n type=\"button\"\n class=\"adaptive-menu-button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMinWidth]=\"160\"\n >\n <qd-icon icon=\"overflowMenuVertical\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let action of customActions.actions; let i = index\"\n class=\"adaptive-menu-entry\"\n type=\"button\"\n [disabled]=\"action.isDisabled\"\n (click)=\"action.handler()\"\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-template>\n </ng-template>\n </ng-container>\n </div>\n</div>\n\n<div class=\"object-header-facets\" [ngClass]=\"{ amongThemselves: adaptiveMode && !facetsCollapsed }\">\n <ng-container *ngIf=\"pageObjectData$ | async as data\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"let facet of headerFacets | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 : headerFacets?.length ?? 0)\"\n [attr.data-test-id]=\"testId + '-facet-' + facet.name\"\n >\n <div class=\"facet-label\">{{ facet.label.i18n | translate }}</div>\n <qd-dynamic-facet class=\"dynamic-facet\" [facet]=\"facet\" [data]=\"data\"></qd-dynamic-facet>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!config.hideContexts && contexts$ | async as contexts\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"\n let context of contexts\n | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 - (headerFacets?.length ?? 0) : contexts?.length);\n let index = index;\n let first = first\n \"\n [ngClass]=\"{ hasDivider: headerFacets && first, adaptiveFirst: headerFacets && adaptiveMode && first }\"\n >\n <div class=\"facet-label\">{{ context.label | translate }}</div>\n\n <span *ngIf=\"context.value.length === 0\" class=\"no-selected-context\">{{\n \"i18n.qd.page.context.noSelectionPlaceholder\" | translate\n }}</span>\n\n <span *ngIf=\"context.value.length !== 0\">\n <qd-chip state=\"none\" [close]=\"isContextSelectable\" (closeClickEmitter)=\"clearContext(context.context)\">\n <ng-container *ngFor=\"let val of context.value; let last = last\">\n {{ val.label.i18n | translate }}<span *ngIf=\"!last\">, </span>\n </ng-container>\n </qd-chip>\n </span>\n\n <span *ngIf=\"isContextSelectable && (!facetsCollapsed || !adaptiveMode)\" class=\"select-button\">\n <button\n qdButton\n qdButtonLink\n type=\"button\"\n (click)=\"changeContext(context.context, context.selection, $event)\"\n [data-test-id]=\"'object-header-select-context-' + context.context.id\"\n >\n {{\n context.value.length !== 0\n ? (\"i18n.qd.page.context.button.change\" | translate)\n : (\"i18n.qd.page.context.button.select\" | translate)\n }}\n </button>\n </span>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"contexts$ | async as togglerContexts\">\n <span class=\"facets-toggler\" *ngIf=\"adaptiveMode && headerFacets?.length + togglerContexts.length > 2\">\n <span *ngIf=\"facetsCollapsed\">+{{ headerFacets.length + togglerContexts.length - 2 }}</span>\n <button qdIconButton [data-test-id]=\"'toggle-button'\">\n <qd-icon [icon]=\"facetsCollapsed ? 'ctrlDown' : 'ctrlTop'\"></qd-icon>\n </button>\n </span>\n </ng-container>\n</div>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;padding:1.25rem;border-bottom:.125rem solid rgb(213,213,213);background:#fff;gap:1.25rem}@media (max-width: 599.98px){:host{padding:1.25rem .9375rem}}:host .object-header-top{display:flex;align-items:flex-start;justify-content:space-between}:host .object-header-top .object-header-title{padding:2px;color:#171717;font-size:1.3125rem;font-weight:500}:host .object-header-top .object-header-toolbar{display:flex;align-items:center;column-gap:.5rem}:host .object-header-top .object-header-toolbar .button-icon{background:none}:host .object-header-top .object-header-toolbar .button-icon+.button-icon{margin-left:-.5rem}:host .object-header-top .object-header-toolbar .header-action-icon{color:#14516f;cursor:pointer;font-size:1.5rem}:host.in-dialog .object-header-toolbar{padding-right:2.5rem}:host .object-header-facets{position:relative;display:flex;flex-wrap:wrap;font-size:1.125rem;gap:1.25rem}:host .object-header-facets .object-header-facet{display:flex;min-width:3.75rem;flex-direction:column}:host .object-header-facets .object-header-facet.hasDivider{padding-left:1.25rem;border-left:.0625rem solid rgb(117,117,117)}:host .object-header-facets .object-header-facet.adaptiveFirst{padding-top:1.25rem}:host .object-header-facets .object-header-facet .facet-label{display:block;margin-bottom:0;color:#757575;font-size:.875rem;padding-bottom:.375rem;font-weight:500}:host .object-header-facets .facets-toggler{position:absolute;top:0;right:0;display:flex;align-items:center;padding-right:.3125rem;font-size:.625rem;line-height:.625rem}:host .object-header-facets.amongThemselves{display:grid}:host .object-header-facets.amongThemselves .object-header-facet.hasDivider{padding-left:0;border-top:.0625rem solid rgb(117,117,117);border-left:none}.loading-overlay{position:absolute;z-index:10000;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}.no-selected-context{height:1.625rem;color:#979797;font-size:.875rem;line-height:1.625rem}.select-button{margin-top:.25rem}.adaptive-menu-button{display:flex;background:unset;color:#454545;font-size:2rem}.adaptive-menu-button:hover,.adaptive-menu-button:focus{color:#000}.adaptive-menu-entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: QdButtonLinkDirective, selector: "button[qdButtonLink], a[qdButtonLink], button[qd-button-link]" }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdMenuButtonComponent, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: ["qdMenuButton", "data-test-id", "autoSize"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdDynamicFacetComponent, selector: "qd-dynamic-facet", inputs: ["facet", "data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
29944
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageObjectHeaderComponent, isStandalone: false, selector: "qd-page-object-header", inputs: { config: "config", hasNavigation: "hasNavigation", testId: ["data-test-id", "testId"] }, host: { listeners: { "click": "toggleFacets()" }, properties: { "style.borderBottom": "borderBottomStyle", "class.in-dialog": "this.isInDialog" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\"><qd-spinner></qd-spinner></div>\n\n<div class=\"object-header-top\">\n <header class=\"object-header-title\">{{ config.title.i18n | translate }}</header>\n <div class=\"object-header-toolbar\">\n <button class=\"button-icon\" data-test-id=\"archive-button\">\n <qd-icon\n *ngIf=\"showArchive$ | async\"\n (click)=\"archiveButton?.handler()\"\n class=\"header-action-icon\"\n [icon]=\"'resultNew'\"\n ></qd-icon>\n </button>\n\n <button class=\"button-icon\" data-test-id=\"delete-button\">\n <qd-icon\n class=\"header-action-icon\"\n *ngIf=\"showDelete$ | async\"\n (click)=\"deleteButton?.handler()\"\n [icon]=\"'trash'\"\n ></qd-icon>\n </button>\n\n <button *ngIf=\"showEdit$ | async\" qdButton (click)=\"edit()\" data-test-id=\"edit-button\">\n {{ editButton?.label?.i18n || \"i18n.qd.page.header.edit\" | translate }}\n </button>\n\n <button *ngIf=\"showCancel$ | async\" qdButton qdButtonGhost (click)=\"cancel()\" data-test-id=\"cancel-button\">\n {{ cancelButton.label?.i18n || \"i18n.qd.page.header.cancel\" | translate }}\n </button>\n\n <button\n *ngIf=\"showSave$ | async\"\n qdButton\n (click)=\"save()\"\n data-test-id=\"save-button\"\n [disabled]=\"($canSave | async) === false\"\n >\n {{ saveButton.label?.i18n || \"i18n.qd.page.header.save\" | translate }}\n </button>\n\n <ng-container *ngIf=\"customActions$ | async as customActions\">\n <ng-container *ngIf=\"!adaptiveMode; else adaptive\">\n <button\n [qdMenuButton]=\"customActions\"\n [autoSize]=\"false\"\n [data-test-id]=\"'page-'\"\n *ngIf=\"customActions.actions.length > 1; else singleButton\"\n data-test-id=\"custom-button\"\n >\n {{ config?.customActionsLabel?.i18n || \"i18n.qd.page.header.actions\" | translate }}\n </button>\n\n <ng-template #singleButton>\n <ng-container *ngIf=\"(customActions$ | async).actions[0] as singleAction\">\n <button\n qdButton\n *ngIf=\"singleAction.handler && !singleAction.isHidden\"\n [disabled]=\"singleAction.isDisabled\"\n (click)=\"singleAction.handler()\"\n data-test-id=\"custom-button\"\n >\n {{ singleAction.label?.i18n | translate }}\n </button>\n </ng-container>\n </ng-template>\n </ng-container>\n\n <ng-template #adaptive>\n <button\n *ngIf=\"(customActions$ | async)?.actions.length >= 1\"\n type=\"button\"\n class=\"adaptive-menu-button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n [qdPopoverMinWidth]=\"160\"\n >\n <qd-icon icon=\"overflowMenuVertical\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let action of customActions.actions; let i = index\"\n class=\"adaptive-menu-entry\"\n type=\"button\"\n [disabled]=\"action.isDisabled\"\n (click)=\"action.handler()\"\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-template>\n </ng-template>\n </ng-container>\n </div>\n</div>\n\n<div class=\"object-header-facets\" [ngClass]=\"{ amongThemselves: adaptiveMode && !facetsCollapsed }\">\n <ng-container *ngIf=\"pageObjectData$ | async as data\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"let facet of headerFacets | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 : headerFacets?.length ?? 0)\"\n [attr.data-test-id]=\"testId + '-facet-' + facet.name\"\n >\n <div class=\"facet-label\">{{ facet.label.i18n | translate }}</div>\n <qd-dynamic-facet class=\"dynamic-facet\" [facet]=\"facet\" [data]=\"data\"></qd-dynamic-facet>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!config.hideContexts && contexts$ | async as contexts\">\n <div\n class=\"object-header-facet\"\n *ngFor=\"\n let context of contexts\n | slice : 0 : (adaptiveMode && facetsCollapsed ? 2 - (headerFacets?.length ?? 0) : contexts?.length);\n let index = index;\n let first = first\n \"\n [ngClass]=\"{ hasDivider: headerFacets && first, adaptiveFirst: headerFacets && adaptiveMode && first }\"\n >\n <div class=\"facet-label\">{{ context.label | translate }}</div>\n\n <span *ngIf=\"context.value.length === 0\" class=\"no-selected-context\">{{\n \"i18n.qd.page.context.noSelectionPlaceholder\" | translate\n }}</span>\n\n <span *ngIf=\"context.value.length !== 0\">\n <qd-chip state=\"none\" [close]=\"isContextSelectable\" (closeClickEmitter)=\"clearContext(context.context)\">\n <ng-container *ngFor=\"let val of context.value; let last = last\">\n {{ val.label.i18n | translate }}<span *ngIf=\"!last\">, </span>\n </ng-container>\n </qd-chip>\n </span>\n\n <span *ngIf=\"isContextSelectable && (!facetsCollapsed || !adaptiveMode)\" class=\"select-button\">\n <button\n qdButton\n qdButtonLink\n type=\"button\"\n (click)=\"changeContext(context.context, context.selection, $event)\"\n [data-test-id]=\"'object-header-select-context-' + context.context.id\"\n >\n {{\n context.value.length !== 0\n ? (\"i18n.qd.page.context.button.change\" | translate)\n : (\"i18n.qd.page.context.button.select\" | translate)\n }}\n </button>\n </span>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"contexts$ | async as togglerContexts\">\n <span class=\"facets-toggler\" *ngIf=\"adaptiveMode && headerFacets?.length + togglerContexts.length > 2\">\n <span *ngIf=\"facetsCollapsed\">+{{ headerFacets.length + togglerContexts.length - 2 }}</span>\n <button qdIconButton [data-test-id]=\"'toggle-button'\">\n <qd-icon [icon]=\"facetsCollapsed ? 'ctrlDown' : 'ctrlTop'\"></qd-icon>\n </button>\n </span>\n </ng-container>\n</div>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;padding:1.25rem;border-bottom:.125rem solid rgb(213,213,213);background:#fff;gap:1.25rem}@media (max-width: 599.98px){:host{padding:1.25rem .9375rem}}:host .object-header-top{display:flex;align-items:flex-start;justify-content:space-between}:host .object-header-top .object-header-title{padding:2px;color:#171717;font-size:1.3125rem;font-weight:500}:host .object-header-top .object-header-toolbar{display:flex;align-items:center;column-gap:.5rem}:host .object-header-top .object-header-toolbar .button-icon{background:none}:host .object-header-top .object-header-toolbar .button-icon+.button-icon{margin-left:-.5rem}:host .object-header-top .object-header-toolbar .header-action-icon{color:#14516f;cursor:pointer;font-size:1.5rem}:host.in-dialog .object-header-toolbar{padding-right:2.5rem}:host .object-header-facets{position:relative;display:flex;flex-wrap:wrap;font-size:1.125rem;gap:1.25rem}:host .object-header-facets .object-header-facet{display:flex;min-width:3.75rem;flex-direction:column}:host .object-header-facets .object-header-facet.hasDivider{padding-left:1.25rem;border-left:.0625rem solid rgb(117,117,117)}:host .object-header-facets .object-header-facet.adaptiveFirst{padding-top:1.25rem}:host .object-header-facets .object-header-facet .facet-label{display:block;margin-bottom:0;color:#757575;font-size:.875rem;padding-bottom:.375rem;font-weight:500}:host .object-header-facets .facets-toggler{position:absolute;top:0;right:0;display:flex;align-items:center;padding-right:.3125rem;font-size:.625rem;line-height:.625rem}:host .object-header-facets.amongThemselves{display:grid}:host .object-header-facets.amongThemselves .object-header-facet.hasDivider{padding-left:0;border-top:.0625rem solid rgb(117,117,117);border-left:none}.loading-overlay{position:absolute;z-index:10000;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}.no-selected-context{height:1.625rem;color:#979797;font-size:.875rem;line-height:1.625rem}.select-button{margin-top:.25rem}.adaptive-menu-button{display:flex;background:unset;color:#454545;font-size:2rem}.adaptive-menu-button:hover,.adaptive-menu-button:focus{color:#000}.adaptive-menu-entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: QdButtonLinkDirective, selector: "button[qdButtonLink], a[qdButtonLink], button[qd-button-link]" }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdMenuButtonComponent, selector: "button[qdMenuButton], a[qdMenuButton]", inputs: ["qdMenuButton", "data-test-id", "autoSize"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdDynamicFacetComponent, selector: "qd-dynamic-facet", inputs: ["facet", "data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
29920
29945
|
}
|
|
29921
29946
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageObjectHeaderComponent, decorators: [{
|
|
29922
29947
|
type: Component,
|
|
@@ -31602,6 +31627,7 @@ class QdPageComponent {
|
|
|
31602
31627
|
bottomOffset$ = inject(QD_SAFE_BOTTOM_OFFSET, { optional: true });
|
|
31603
31628
|
dialogRef = inject(DialogRef, { optional: true });
|
|
31604
31629
|
navigationInterceptor = inject(QdPageNavigationInterceptorService);
|
|
31630
|
+
injector = inject(Injector);
|
|
31605
31631
|
confirmationDialogService = inject(QdConfirmationDialogOpenerService);
|
|
31606
31632
|
/**
|
|
31607
31633
|
* This property defines the configuration for the QdPage component, including the page type,
|
|
@@ -31798,7 +31824,10 @@ class QdPageComponent {
|
|
|
31798
31824
|
QdPageCommitActionExecutor.execute(action, values, {
|
|
31799
31825
|
formGroupManager: this.formGroupManagerService,
|
|
31800
31826
|
navigationInterceptor: this.navigationInterceptor,
|
|
31801
|
-
destroyed$: this._destroyed
|
|
31827
|
+
destroyed$: this._destroyed$,
|
|
31828
|
+
scheduleFrameworkRebuildStop: () => afterNextRender(() => this.formGroupManagerService.stopAdoptingFrameworkRebuild(), {
|
|
31829
|
+
injector: this.injector
|
|
31830
|
+
})
|
|
31802
31831
|
});
|
|
31803
31832
|
};
|
|
31804
31833
|
}
|
|
@@ -31910,6 +31939,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
31910
31939
|
* - Snapshots store only raw values and are taken by the page/header workflow (e.g. on init, edit, save). The confirmation dialog may restore all registered form groups from the snapshot.
|
|
31911
31940
|
* - FormArrays are restored with dynamic resizing (length is aligned to snapshot before values are reset).
|
|
31912
31941
|
*
|
|
31942
|
+
* ### **Filling a form right after connecting it**
|
|
31943
|
+
* - You can fill a connected form right after registration — e.g. an `effect` that adds controls or pushes `FormArray` rows. This first fill is the form's starting point, not a user change.
|
|
31944
|
+
* - So loading data into a fresh form never triggers a false "unsaved changes" prompt. Only later edits count.
|
|
31945
|
+
*
|
|
31913
31946
|
* ### **Page-Dialog (FullWidth) – Unsaved-Changes Close Contract**
|
|
31914
31947
|
* - When a QdPage is embedded in a full-width page dialog, the directive’s registered form groups are also used to guard dialog closing.
|
|
31915
31948
|
* - The page dialog can only close (e.g. via ESC or backdrop) if no unsaved changes are detected ($hasValuesChanged() is false).
|
|
@@ -31922,8 +31955,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
31922
31955
|
* ```html
|
|
31923
31956
|
* <qd-page [config]="pageConfig">
|
|
31924
31957
|
* <qd-section [config]="sectionConfig">
|
|
31925
|
-
* <qd-grid
|
|
31926
|
-
*
|
|
31958
|
+
* <qd-grid
|
|
31959
|
+
* qdConnectFormStateToPage="myFormGroup"
|
|
31960
|
+
* [formGroup]="myFormGroup">
|
|
31961
|
+
* My Section
|
|
31927
31962
|
* </qd-grid>
|
|
31928
31963
|
* </qd-section>
|
|
31929
31964
|
* </qd-page>
|
|
@@ -31943,36 +31978,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
31943
31978
|
class QdConnectFormStateToPageDirective {
|
|
31944
31979
|
formGroupManagerService = inject(QdFormGroupManagerService, { optional: true });
|
|
31945
31980
|
formGroupDirective = inject(FormGroupDirective, { host: true, optional: true });
|
|
31981
|
+
closeInitialBuildupHandle;
|
|
31946
31982
|
/**
|
|
31947
31983
|
* This key is used to manage and track the form state within the page. It has to be unique for each FormGroup Connector. Use the property name of the FormGroup in your component.
|
|
31948
31984
|
*/
|
|
31949
31985
|
qdConnectFormStateToPage;
|
|
31950
31986
|
ngOnInit() {
|
|
31951
|
-
if (!this.isValid())
|
|
31952
|
-
return;
|
|
31953
31987
|
const formGroup = this.formGroupDirective?.control;
|
|
31954
|
-
if (formGroup
|
|
31955
|
-
this.formGroupManagerService.setFormGroup(this.qdConnectFormStateToPage, formGroup);
|
|
31956
|
-
}
|
|
31957
|
-
}
|
|
31958
|
-
ngOnDestroy() {
|
|
31959
|
-
this.formGroupManagerService?.tryRemoveFormGroup(this.qdConnectFormStateToPage);
|
|
31960
|
-
}
|
|
31961
|
-
isValid() {
|
|
31962
|
-
const hasFormGroup = this.formGroupDirective?.control;
|
|
31963
|
-
if (!hasFormGroup) {
|
|
31988
|
+
if (!formGroup) {
|
|
31964
31989
|
console.error('Quadrel Framework | QdConnectFormStateToPage - Either a [formGroup] binding or <qd-quick-edit> with a FormGroup is required.');
|
|
31965
|
-
return
|
|
31990
|
+
return;
|
|
31966
31991
|
}
|
|
31967
31992
|
if (!this.formGroupManagerService) {
|
|
31968
31993
|
console.error('Quadrel Framework | QdConnectFormStateToPage - The connector must be used within <qd-page>.');
|
|
31969
|
-
return
|
|
31994
|
+
return;
|
|
31970
31995
|
}
|
|
31971
31996
|
if (!this.formGroupManagerService.isFormGroupKeyUnique(this.qdConnectFormStateToPage)) {
|
|
31972
31997
|
console.error(`Quadrel Framework | QdConnectFormStateToPage - The FormGroup key "${this.qdConnectFormStateToPage}" is not unique.`);
|
|
31973
|
-
return
|
|
31998
|
+
return;
|
|
31974
31999
|
}
|
|
31975
|
-
|
|
32000
|
+
this.formGroupManagerService.setFormGroup(this.qdConnectFormStateToPage, formGroup);
|
|
32001
|
+
this.scheduleInitialBaseline(this.formGroupManagerService);
|
|
32002
|
+
}
|
|
32003
|
+
ngOnDestroy() {
|
|
32004
|
+
if (this.closeInitialBuildupHandle)
|
|
32005
|
+
clearTimeout(this.closeInitialBuildupHandle);
|
|
32006
|
+
this.formGroupManagerService?.tryRemoveFormGroup(this.qdConnectFormStateToPage);
|
|
32007
|
+
}
|
|
32008
|
+
scheduleInitialBaseline(manager) {
|
|
32009
|
+
const key = this.qdConnectFormStateToPage;
|
|
32010
|
+
this.closeInitialBuildupHandle = setTimeout(() => manager.endInitialBuildup(key));
|
|
31976
32011
|
}
|
|
31977
32012
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdConnectFormStateToPageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
31978
32013
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdConnectFormStateToPageDirective, isStandalone: false, selector: "[qdConnectFormStateToPage]", inputs: { qdConnectFormStateToPage: "qdConnectFormStateToPage" }, ngImport: i0 });
|
|
@@ -32275,11 +32310,11 @@ class QdPanelSectionComponent {
|
|
|
32275
32310
|
});
|
|
32276
32311
|
}
|
|
32277
32312
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPanelSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
32278
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPanelSectionComponent, isStandalone: false, selector: "qd-panel-section", inputs: { config: "config" }, outputs: { actionOutput: "actionOutput" }, providers: [QdPanelSectionActionService], queries: [{ propertyName: "statusList", predicate: QdPanelSectionStatusComponent }, { propertyName: "statusPairsList", predicate: QdStatusPairsComponent }, { propertyName: "tableList", predicate: QdTableComponent }, { propertyName: "paragraphList", predicate: QdPanelSectionTextParagraphComponent }], ngImport: i0, template: "<section>\n <div class=\"toolbar\" *ngIf=\"config.title || hasActions()\">\n <div class=\"title\" *ngIf=\"config.title\">\n {{ config.title.i18n | translate }}\n </div>\n\n <qd-panel-section-actions *ngIf=\"hasActions()\" [config]=\"config\"></qd-panel-section-actions>\n </div>\n\n <div [ngClass]=\"{ content: true, empty: !hasContent() }\">\n <ng-content select=\"qd-panel-section-status\"></ng-content>\n <ng-content select=\"qd-status-pairs\"></ng-content>\n <ng-content select=\"qd-table\"></ng-content>\n <ng-content select=\"qd-panel-section-text-paragraph\"></ng-content>\n </div>\n</section>\n", styles: ["qd-panel-section{display:block;color:#171717;font-size:.875rem;font-weight:300;line-height:1.375rem}qd-panel-section+qd-panel-section{border-top:.0625rem solid rgb(213,213,213)}qd-panel-section section{display:flex;flex-wrap:wrap}qd-panel-section .toolbar{display:flex;width:100%}qd-panel-section .title,qd-panel-section .content{padding:1rem 1rem 0}qd-panel-section .title{flex-grow:99;font-weight:500}qd-panel-section .content{width:100%;margin-bottom
|
|
32313
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPanelSectionComponent, isStandalone: false, selector: "qd-panel-section", inputs: { config: "config" }, outputs: { actionOutput: "actionOutput" }, providers: [QdPanelSectionActionService], queries: [{ propertyName: "statusList", predicate: QdPanelSectionStatusComponent }, { propertyName: "statusPairsList", predicate: QdStatusPairsComponent }, { propertyName: "tableList", predicate: QdTableComponent }, { propertyName: "paragraphList", predicate: QdPanelSectionTextParagraphComponent }], ngImport: i0, template: "<section>\n <div class=\"toolbar\" *ngIf=\"config.title || hasActions()\">\n <div class=\"title\" *ngIf=\"config.title\">\n {{ config.title.i18n | translate }}\n </div>\n\n <qd-panel-section-actions *ngIf=\"hasActions()\" [config]=\"config\"></qd-panel-section-actions>\n </div>\n\n <div [ngClass]=\"{ content: true, empty: !hasContent() }\">\n <ng-content select=\"qd-panel-section-status\"></ng-content>\n <ng-content select=\"qd-status-pairs\"></ng-content>\n <ng-content select=\"qd-table\"></ng-content>\n <ng-content select=\"qd-panel-section-text-paragraph\"></ng-content>\n </div>\n</section>\n", styles: ["qd-panel-section{display:block;color:#171717;font-size:.875rem;font-weight:300;line-height:1.375rem}qd-panel-section+qd-panel-section{border-top:.0625rem solid rgb(213,213,213)}qd-panel-section section{display:flex;flex-wrap:wrap}qd-panel-section .toolbar{display:flex;width:100%}qd-panel-section .title,qd-panel-section .content{padding:1rem 1rem 0}qd-panel-section .title{flex-grow:99;font-weight:500}qd-panel-section .content{width:100%;margin-bottom:.75rem}qd-panel-section .content.empty{padding:0;margin:0}qd-panel-section .toolbar+qd-panel-section-status{border-top:rgb(213,213,213) .125rem solid!important;margin-top:1rem}qd-panel-section qd-panel-section-actions{padding-top:.5rem;padding-right:1rem;margin-left:auto}qd-panel-section qd-panel-section-actions .content{padding-bottom:1rem;margin-bottom:0}qd-panel-section qd-panel-section-text-paragraph+qd-panel-section-text-paragraph{padding-top:1.5rem}qd-panel-section qd-status-pairs{display:flex;flex-wrap:wrap;column-gap:1rem}qd-panel-section qd-status-pairs qd-status-pairs-item{flex:1 1 0;margin-right:0!important;margin-bottom:.75rem!important}qd-panel-section qd-status-pairs+qd-panel-section-text-paragraph{margin-top:.5rem}qd-panel-section qd-table+qd-panel-section-text-paragraph{margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdPanelSectionActionsComponent, selector: "qd-panel-section-actions", inputs: ["config"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
32279
32314
|
}
|
|
32280
32315
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPanelSectionComponent, decorators: [{
|
|
32281
32316
|
type: Component,
|
|
32282
|
-
args: [{ selector: 'qd-panel-section', providers: [QdPanelSectionActionService], encapsulation: ViewEncapsulation.None, standalone: false, template: "<section>\n <div class=\"toolbar\" *ngIf=\"config.title || hasActions()\">\n <div class=\"title\" *ngIf=\"config.title\">\n {{ config.title.i18n | translate }}\n </div>\n\n <qd-panel-section-actions *ngIf=\"hasActions()\" [config]=\"config\"></qd-panel-section-actions>\n </div>\n\n <div [ngClass]=\"{ content: true, empty: !hasContent() }\">\n <ng-content select=\"qd-panel-section-status\"></ng-content>\n <ng-content select=\"qd-status-pairs\"></ng-content>\n <ng-content select=\"qd-table\"></ng-content>\n <ng-content select=\"qd-panel-section-text-paragraph\"></ng-content>\n </div>\n</section>\n", styles: ["qd-panel-section{display:block;color:#171717;font-size:.875rem;font-weight:300;line-height:1.375rem}qd-panel-section+qd-panel-section{border-top:.0625rem solid rgb(213,213,213)}qd-panel-section section{display:flex;flex-wrap:wrap}qd-panel-section .toolbar{display:flex;width:100%}qd-panel-section .title,qd-panel-section .content{padding:1rem 1rem 0}qd-panel-section .title{flex-grow:99;font-weight:500}qd-panel-section .content{width:100%;margin-bottom
|
|
32317
|
+
args: [{ selector: 'qd-panel-section', providers: [QdPanelSectionActionService], encapsulation: ViewEncapsulation.None, standalone: false, template: "<section>\n <div class=\"toolbar\" *ngIf=\"config.title || hasActions()\">\n <div class=\"title\" *ngIf=\"config.title\">\n {{ config.title.i18n | translate }}\n </div>\n\n <qd-panel-section-actions *ngIf=\"hasActions()\" [config]=\"config\"></qd-panel-section-actions>\n </div>\n\n <div [ngClass]=\"{ content: true, empty: !hasContent() }\">\n <ng-content select=\"qd-panel-section-status\"></ng-content>\n <ng-content select=\"qd-status-pairs\"></ng-content>\n <ng-content select=\"qd-table\"></ng-content>\n <ng-content select=\"qd-panel-section-text-paragraph\"></ng-content>\n </div>\n</section>\n", styles: ["qd-panel-section{display:block;color:#171717;font-size:.875rem;font-weight:300;line-height:1.375rem}qd-panel-section+qd-panel-section{border-top:.0625rem solid rgb(213,213,213)}qd-panel-section section{display:flex;flex-wrap:wrap}qd-panel-section .toolbar{display:flex;width:100%}qd-panel-section .title,qd-panel-section .content{padding:1rem 1rem 0}qd-panel-section .title{flex-grow:99;font-weight:500}qd-panel-section .content{width:100%;margin-bottom:.75rem}qd-panel-section .content.empty{padding:0;margin:0}qd-panel-section .toolbar+qd-panel-section-status{border-top:rgb(213,213,213) .125rem solid!important;margin-top:1rem}qd-panel-section qd-panel-section-actions{padding-top:.5rem;padding-right:1rem;margin-left:auto}qd-panel-section qd-panel-section-actions .content{padding-bottom:1rem;margin-bottom:0}qd-panel-section qd-panel-section-text-paragraph+qd-panel-section-text-paragraph{padding-top:1.5rem}qd-panel-section qd-status-pairs{display:flex;flex-wrap:wrap;column-gap:1rem}qd-panel-section qd-status-pairs qd-status-pairs-item{flex:1 1 0;margin-right:0!important;margin-bottom:.75rem!important}qd-panel-section qd-status-pairs+qd-panel-section-text-paragraph{margin-top:.5rem}qd-panel-section qd-table+qd-panel-section-text-paragraph{margin-top:1rem}\n"] }]
|
|
32283
32318
|
}], propDecorators: { config: [{
|
|
32284
32319
|
type: Input
|
|
32285
32320
|
}], actionOutput: [{
|
|
@@ -33970,7 +34005,7 @@ class QdCommentsComponent {
|
|
|
33970
34005
|
});
|
|
33971
34006
|
}
|
|
33972
34007
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCommentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
33973
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdCommentsComponent, isStandalone: false, selector: "qd-comments", inputs: { config: "config", comments: "comments" }, ngImport: i0, template: "<div class=\"comments-list\">\n <div class=\"add-button-area\">\n <button\n qdButton\n qdButtonGhost\n color=\"primary\"\n (click)=\"addNew()\"\n [disabled]=\"config.addConfig?.addButton?.disabled ?? false\"\n >\n <qd-icon icon=\"plusLarge\" class=\"plus-icon\"></qd-icon>\n {{ config.addConfig?.addButton?.i18n | translate }}\n </button>\n </div>\n\n <ng-container *ngFor=\"let comment of commentList\">\n <div\n class=\"comment\"\n (click)=\"clickComment(comment)\"\n [class.hasAction]=\"this.config.primaryActionHandler !== undefined\"\n >\n <div class=\"comment-header\">\n <div>\n <span class=\"comment-author\"\n ><b> {{ comment.author }} </b></span\n >\n <span class=\"comment-custom\">\n {{ comment.custom?.listDisplayName?.i18n ? \" - \" + (comment.custom.listDisplayName.i18n | translate) : \"\" }}\n </span>\n <span class=\"comment-date\"> {{ \" - \" + formatDate(comment.date) }} </span>\n </div>\n <button\n *ngIf=\"config.secondaryActions?.length > 0\"\n type=\"button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n class=\"menu-button\"\n >\n <qd-icon icon=\"overflowMenuVertical\"></qd-icon>\n </button>\n </div>\n <div class=\"deleted-meta\" *ngIf=\"comment?.deletedMeta\">\n <b>{{ comment.deletedMeta.deletedBy }}</b> -\n {{\n comment.deletedMeta.custom?.listDisplayName.i18n\n ? (comment.deletedMeta.custom.listDisplayName.i18n | translate) + \" -\"\n : \"\"\n }}\n {{\n \"i18n.qd.comments.delete.deleted\"\n | translate\n | placeholder : \"deleteDate\" : formatDate(comment.deletedMeta.date)\n }}\n </div>\n <div\n class=\"comment-content\"\n [style.text-decoration]=\"comment.deletedMeta ? 'line-through' : ''\"\n [style.-webkit-line-clamp]=\"config.numberOfDisplayedRows || 10\"\n >\n <span [innerHTML]=\"comment.comment\"></span>\n </div>\n </div>\n\n <ng-template #menu>\n <qd-comment-menu [menuActions]=\"config.secondaryActions\" [comment]=\"comment\"></qd-comment-menu>\n </ng-template>\n </ng-container>\n</div>\n", styles: [".comments-list{font-size:.875rem}.comments-list .add-button-area{display:flex;justify-content:flex-end;padding:.5rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);margin-bottom:.5rem}.comments-list .add-button-area .qd-button-primary{padding:0 .5625rem;white-space:nowrap}.comments-list .add-button-area .qd-button-primary .plus-icon{padding-right:.5rem}.comments-list .comment{padding:.5rem .4375rem .5rem 1rem}.comments-list .comment.hasAction{cursor:pointer}.comments-list .comment.hasAction:hover{background-color:#f2f7fa}.comments-list .comment .comment-header{display:flex;justify-content:space-between;padding-bottom:.1875rem}.comments-list .comment .comment-header div{align-self:center}.comments-list .comment .comment-header .menu-button{background:unset;color:#454545;font-size:1rem}.comments-list .comment .comment-header .menu-button:hover,.comments-list .comment .comment-header .menu-button:focus{color:#000}.comments-list .comment .deleted-meta{margin-bottom:.5rem;color:#c70023}.comments-list .comment .comment-content{display:-webkit-box;overflow:hidden;padding-right:.5rem;-webkit-box-orient:vertical;color:#757575;-webkit-line-clamp:10}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "
|
|
34008
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdCommentsComponent, isStandalone: false, selector: "qd-comments", inputs: { config: "config", comments: "comments" }, ngImport: i0, template: "<div class=\"comments-list\">\n <div class=\"add-button-area\">\n <button\n qdButton\n qdButtonGhost\n color=\"primary\"\n (click)=\"addNew()\"\n [disabled]=\"config.addConfig?.addButton?.disabled ?? false\"\n >\n <qd-icon icon=\"plusLarge\" class=\"plus-icon\"></qd-icon>\n {{ config.addConfig?.addButton?.i18n | translate }}\n </button>\n </div>\n\n <ng-container *ngFor=\"let comment of commentList\">\n <div\n class=\"comment\"\n (click)=\"clickComment(comment)\"\n [class.hasAction]=\"this.config.primaryActionHandler !== undefined\"\n >\n <div class=\"comment-header\">\n <div>\n <span class=\"comment-author\"\n ><b> {{ comment.author }} </b></span\n >\n <span class=\"comment-custom\">\n {{ comment.custom?.listDisplayName?.i18n ? \" - \" + (comment.custom.listDisplayName.i18n | translate) : \"\" }}\n </span>\n <span class=\"comment-date\"> {{ \" - \" + formatDate(comment.date) }} </span>\n </div>\n <button\n *ngIf=\"config.secondaryActions?.length > 0\"\n type=\"button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n class=\"menu-button\"\n >\n <qd-icon icon=\"overflowMenuVertical\"></qd-icon>\n </button>\n </div>\n <div class=\"deleted-meta\" *ngIf=\"comment?.deletedMeta\">\n <b>{{ comment.deletedMeta.deletedBy }}</b> -\n {{\n comment.deletedMeta.custom?.listDisplayName.i18n\n ? (comment.deletedMeta.custom.listDisplayName.i18n | translate) + \" -\"\n : \"\"\n }}\n {{\n \"i18n.qd.comments.delete.deleted\"\n | translate\n | placeholder : \"deleteDate\" : formatDate(comment.deletedMeta.date)\n }}\n </div>\n <div\n class=\"comment-content\"\n [style.text-decoration]=\"comment.deletedMeta ? 'line-through' : ''\"\n [style.-webkit-line-clamp]=\"config.numberOfDisplayedRows || 10\"\n >\n <span [innerHTML]=\"comment.comment\"></span>\n </div>\n </div>\n\n <ng-template #menu>\n <qd-comment-menu [menuActions]=\"config.secondaryActions\" [comment]=\"comment\"></qd-comment-menu>\n </ng-template>\n </ng-container>\n</div>\n", styles: [".comments-list{font-size:.875rem}.comments-list .add-button-area{display:flex;justify-content:flex-end;padding:.5rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);margin-bottom:.5rem}.comments-list .add-button-area .qd-button-primary{padding:0 .5625rem;white-space:nowrap}.comments-list .add-button-area .qd-button-primary .plus-icon{padding-right:.5rem}.comments-list .comment{padding:.5rem .4375rem .5rem 1rem}.comments-list .comment.hasAction{cursor:pointer}.comments-list .comment.hasAction:hover{background-color:#f2f7fa}.comments-list .comment .comment-header{display:flex;justify-content:space-between;padding-bottom:.1875rem}.comments-list .comment .comment-header div{align-self:center}.comments-list .comment .comment-header .menu-button{background:unset;color:#454545;font-size:1rem}.comments-list .comment .comment-header .menu-button:hover,.comments-list .comment .comment-header .menu-button:focus{color:#000}.comments-list .comment .deleted-meta{margin-bottom:.5rem;color:#c70023}.comments-list .comment .comment-content{display:-webkit-box;overflow:hidden;padding-right:.5rem;-webkit-box-orient:vertical;color:#757575;-webkit-line-clamp:10}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdCommentMenuComponent, selector: "qd-comment-menu", inputs: ["menuActions", "comment"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: QdPlaceholderPipe, name: "placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
33974
34009
|
}
|
|
33975
34010
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCommentsComponent, decorators: [{
|
|
33976
34011
|
type: Component,
|
|
@@ -35138,7 +35173,7 @@ class QdQuickEditComponent {
|
|
|
35138
35173
|
this.controlContainer.control.valueChanges.pipe(tap(() => this.changeDetectorRef.detectChanges())).subscribe();
|
|
35139
35174
|
}
|
|
35140
35175
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdQuickEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
35141
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdQuickEditComponent, isStandalone: false, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-tooltip-icon [tooltip]=\"header?.tooltip\"></qd-tooltip-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n <button class=\"menu-button\">\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <div\n class=\"table-row\"\n *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n [formGroupName]=\"rowIndex\"\n [attr.data-test-id]=\"testId + '-row-' + rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns; trackBy: trackByColumnName\">\n <div class=\"table-cell\">\n <qd-dropdown\n [config]=\"{\n filter: column.filter,\n options: column.options,\n placeholder: column.placeholder,\n placeholderPrefix: column.placeholderPrefix,\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n [data-test-id]=\"column.name + rowIndex\"\n *ngIf=\"column.type === 'enum'; else otherTypes\"\n [dense]=\"true\"\n [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n qdFocusable\n class=\"dropdown\"\n >\n </qd-dropdown>\n\n <ng-template #otherTypes>\n <qd-input\n [data-test-id]=\"column.name + rowIndex\"\n [formControlName]=\"column.name\"\n *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n [config]=\"{\n inputType: column.type === 'integer' ? 'number' : 'text',\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n qdFocusable\n ></qd-input>\n </ng-template>\n </div>\n </ng-container>\n <td\n *ngIf=\"hasVisibleActions$ | async\"\n class=\"table-cell actions\"\n [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n >\n <button\n type=\"button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n class=\"menu-button\"\n data-test=\"secondary-actions-toggler\"\n >\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let secondaryAction of actions$ | async\"\n class=\"secondary-actions\"\n [ngClass]=\"{ disabled: isActionDisabled(secondaryAction, row) }\"\n [attr.disabled]=\"isActionDisabled(secondaryAction, row) || null\"\n (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n >\n {{ secondaryAction.label.i18n | translate }}\n </button>\n <button\n *ngIf=\"canAdd && (viewonly$ | async) === false\"\n class=\"secondary-actions\"\n (click)=\"removeRow(rowIndex)\"\n >\n {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n </button>\n </ng-template>\n </td>\n </div>\n </div>\n <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n <p>{{ config.emptyStateView.i18n | translate }}</p>\n </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-input{min-width:0;margin-bottom:0!important}.table-body .table-row:hover{background-color:#f5f5f5}.table-cell{display:flex;min-width:0;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell:has(.qd-input-character-counter){height:auto;align-items:flex-start}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input{position:relative}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input .qd-input-character-counter{position:absolute;right:.25rem;bottom:.125rem;font-size:.625rem;line-height:1;pointer-events:none}.table-cell.actions,.table-cell.actions-column{min-width:auto;flex:0 0 auto}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{width:100%;min-width:0}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}\n"], dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "directive", type: QdFocusableDirective, selector: "[qdFocusable]" }, { kind: "component", type: QdTooltipIconComponent, selector: "qd-tooltip-icon", inputs: ["tooltip"] }, { kind: "directive", type: QdCustomForDirective, selector: "[qdCustomFor]", inputs: ["qdCustomForOf", "qdCustomForToggler"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
35176
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdQuickEditComponent, isStandalone: false, selector: "qd-quick-edit", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, outputs: { formGroupChange: "formGroupChange", addNewClicked: "addNewClicked" }, viewQueries: [{ propertyName: "customForDirective", first: true, predicate: QdCustomForDirective, descendants: true }, { propertyName: "focusables", predicate: QdFocusableDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"editable-actions\" *ngIf=\"showStandaloneCreate\">\n <button\n qdButton\n qdButtonGhost\n icon=\"plus\"\n (click)=\"createRow()\"\n [data-test-id]=\"testId + '-button-add-new'\"\n class=\"create-button-standalone\"\n >\n {{ config.standaloneCreateLabel?.i18n ?? \"i18n.qd.quick.edit.createButtonLabel\" | translate }}\n </button>\n</div>\n\n<div class=\"table\" [formGroup]=\"control\">\n <div class=\"table-header\" *ngIf=\"!config.canAdd || templateData.length > 0 || config.emptyStateView\">\n <div class=\"table-row\">\n <div class=\"table-cell\" *ngFor=\"let header of visibleColumns\">\n {{ header?.i18n | translate }}\n <qd-tooltip-icon [tooltip]=\"header?.tooltip\"></qd-tooltip-icon>\n </div>\n <div class=\"table-cell actions-column\" *ngIf=\"hasVisibleActions$ | async\">\n <button class=\"menu-button\">\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-body\">\n <div\n class=\"table-row\"\n *qdCustomFor=\"let row of templateData; let rowIndex = index; toggler: togglerDrawing\"\n [formGroupName]=\"rowIndex\"\n [attr.data-test-id]=\"testId + '-row-' + rowIndex\"\n >\n <ng-container *ngFor=\"let column of visibleColumns; trackBy: trackByColumnName\">\n <div class=\"table-cell\">\n <qd-dropdown\n [config]=\"{\n filter: column.filter,\n options: column.options,\n placeholder: column.placeholder,\n placeholderPrefix: column.placeholderPrefix,\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n [data-test-id]=\"column.name + rowIndex\"\n *ngIf=\"column.type === 'enum'; else otherTypes\"\n [dense]=\"true\"\n [formControl]=\"$any(control.controls[rowIndex])?.controls[column.name]\"\n qdFocusable\n class=\"dropdown\"\n >\n </qd-dropdown>\n\n <ng-template #otherTypes>\n <qd-input\n [data-test-id]=\"column.name + rowIndex\"\n [formControlName]=\"column.name\"\n *ngIf=\"column.type !== 'enum' && $any(control.controls[rowIndex])?.controls[column.name]\"\n [config]=\"{\n inputType: column.type === 'integer' ? 'number' : 'text',\n viewonly: (viewonly$ | async) === true || !column.isEditable(row, column.name)\n }\"\n qdFocusable\n ></qd-input>\n </ng-template>\n </div>\n </ng-container>\n <td\n *ngIf=\"hasVisibleActions$ | async\"\n class=\"table-cell actions\"\n [attr.data-test-id]=\"testId + '-cell-inline-actions'\"\n >\n <button\n type=\"button\"\n [qdPopoverOnClick]=\"menu\"\n [qdPopoverCloseStrategy]=\"'onEveryClick'\"\n [qdPopoverStopPropagation]=\"true\"\n class=\"menu-button\"\n data-test=\"secondary-actions-toggler\"\n >\n <qd-icon icon=\"overflowMenuHorizontal\"></qd-icon>\n </button>\n\n <ng-template #menu>\n <button\n *ngFor=\"let secondaryAction of actions$ | async\"\n class=\"secondary-actions\"\n [ngClass]=\"{ disabled: isActionDisabled(secondaryAction, row) }\"\n [attr.disabled]=\"isActionDisabled(secondaryAction, row) || null\"\n (click)=\"handleSecondaryAction(secondaryAction, rowIndex)\"\n >\n {{ secondaryAction.label.i18n | translate }}\n </button>\n <button\n *ngIf=\"canAdd && (viewonly$ | async) === false\"\n class=\"secondary-actions\"\n (click)=\"removeRow(rowIndex)\"\n >\n {{ \"i18n.qd.quick.edit.removeButtonLabel\" | translate }}\n </button>\n </ng-template>\n </td>\n </div>\n </div>\n <div class=\"empty-body\" *ngIf=\"config.emptyStateView && !config.emptyStateView.disabled && templateData.length === 0\">\n <p>{{ config.emptyStateView.i18n | translate }}</p>\n </div>\n</div>\n", styles: [".table{display:flex;width:100%;flex-direction:column;margin:1.25rem auto;background-color:#fff;font-size:.875rem}.table ::ng-deep .qd-input-input{margin-bottom:0!important}.table-header .table-row{padding-top:.125rem;padding-bottom:.125rem;background-color:#e5e5e5;font-weight:700}.table-header .table-row .actions-column{border-right:none;visibility:hidden}.table-header,.table-body{display:flex;flex-direction:column}.table-row{display:flex;flex-direction:row;padding:.25rem 1rem;border-bottom:.0625rem solid rgb(213,213,213);gap:1rem}.table-row ::ng-deep qd-form-label{display:none!important}.table-row ::ng-deep qd-input{min-width:0;margin-bottom:0!important}.table-body .table-row:hover{background-color:#f5f5f5}.table-cell{display:flex;min-width:0;height:37px;flex:1;align-items:center;text-align:left}.table-cell:has(.qd-input-error),.table-cell:has(.qd-dropdown-error){height:auto;align-items:flex-start}.table-cell:has(.qd-input-character-counter){height:auto;align-items:flex-start}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input{position:relative}.table-cell:has(.qd-input-character-counter) ::ng-deep qd-input .qd-input-character-counter{position:absolute;right:.25rem;bottom:.125rem;font-size:.625rem;line-height:1;pointer-events:none}.table-cell.actions,.table-cell.actions-column{min-width:auto;flex:0 0 auto}.table-row:last-child{border-bottom:none}.table-cell:last-child{border-right:none}.editable-actions{display:flex;justify-content:flex-end;margin-right:.625rem;gap:.625rem}.menu-button{display:flex;padding:0 .625rem 0 .375rem;background:unset;color:#454545;font-size:2rem;vertical-align:middle}.menu-button:hover,.menu-button:focus{color:#000;outline:0!important}.secondary-actions{display:block;width:100%;min-height:2rem;padding:0 1rem;background:#fff0;font-size:.75rem;text-align:left}.secondary-actions:hover{background-color:#f2f7fa}.secondary-actions.disabled{color:#b4b4b4;cursor:not-allowed}.secondary-actions.disabled:hover{background-color:#fff0}.dropdown{width:100%;min-width:0}.empty-body{padding:1.5rem;background:#fff}.empty-body p{margin:0 0 .5rem}\n"], dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "qdPopoverPlacement", "qdPopoverOffsetX", "qdPopoverOffsetY", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl", "qdPopoverFlipIntoViewport"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "directive", type: QdFocusableDirective, selector: "[qdFocusable]" }, { kind: "component", type: QdTooltipIconComponent, selector: "qd-tooltip-icon", inputs: ["tooltip"] }, { kind: "directive", type: QdCustomForDirective, selector: "[qdCustomFor]", inputs: ["qdCustomForOf", "qdCustomForToggler"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
35142
35177
|
}
|
|
35143
35178
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdQuickEditComponent, decorators: [{
|
|
35144
35179
|
type: Component,
|