@quadrel-enterprise-ui/framework 20.27.0 → 20.27.2
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.
|
@@ -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
|
|
@@ -7869,6 +7875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
7869
7875
|
* - The returned Observable emits `true` once initial sizing is applied and overlay is visible.
|
|
7870
7876
|
* - Even if autosize is turned off, the minimum and maximum width or height constraints are always enforced as hard limits.
|
|
7871
7877
|
* - This means the popover can never be smaller or larger than the values you set, no matter what content it contains.
|
|
7878
|
+
* - The width is also capped to the current screen width, so the popover never reaches past the screen edge — even if a larger maxWidth is set.
|
|
7872
7879
|
*
|
|
7873
7880
|
* #### For the hidden-content measuring
|
|
7874
7881
|
* @see https://stackoverflow.com/questions/1841124/find-the-potential-width-of-a-hidden-element
|
|
@@ -7926,11 +7933,22 @@ class QdPopoverSizingService {
|
|
|
7926
7933
|
if (this._overlayRef)
|
|
7927
7934
|
this._overlayRef.overlayElement.style.opacity = '0';
|
|
7928
7935
|
}
|
|
7936
|
+
resolveWidthLimits() {
|
|
7937
|
+
const clientWidth = document.documentElement.clientWidth;
|
|
7938
|
+
const viewportMaxWidth = clientWidth > 0 ? clientWidth : undefined;
|
|
7939
|
+
const constraintMaxWidth = this._constraints?.maxWidth !== 'none' ? this._constraints?.maxWidth : undefined;
|
|
7940
|
+
const constraintMinWidth = this._constraints?.minWidth !== 'none' ? this._constraints?.minWidth : undefined;
|
|
7941
|
+
const minWidth = constraintMinWidth !== undefined && viewportMaxWidth !== undefined
|
|
7942
|
+
? Math.min(constraintMinWidth, viewportMaxWidth)
|
|
7943
|
+
: constraintMinWidth;
|
|
7944
|
+
const widthLimits = [constraintMaxWidth, viewportMaxWidth].filter((limit) => limit !== undefined);
|
|
7945
|
+
const maxWidth = widthLimits.length > 0 ? Math.min(...widthLimits) : undefined;
|
|
7946
|
+
return { minWidth, maxWidth };
|
|
7947
|
+
}
|
|
7929
7948
|
applySize() {
|
|
7930
7949
|
if (!this._overlayRef || !this._host || !this._popover || !this._autoSize || !this._constraints)
|
|
7931
7950
|
return;
|
|
7932
|
-
const
|
|
7933
|
-
const maxWidth = this._constraints.maxWidth !== 'none' ? this._constraints.maxWidth : undefined;
|
|
7951
|
+
const { minWidth, maxWidth } = this.resolveWidthLimits();
|
|
7934
7952
|
const maxHeight = this._constraints.maxHeight !== 'none' ? this._constraints.maxHeight : undefined;
|
|
7935
7953
|
this.measureContentSize(this._popover);
|
|
7936
7954
|
const contentWidth = this._contentWidth;
|
|
@@ -7959,6 +7977,7 @@ class QdPopoverSizingService {
|
|
|
7959
7977
|
el.style.height = convertPxToRem(height);
|
|
7960
7978
|
if (maxHeight !== undefined)
|
|
7961
7979
|
el.style.maxHeight = convertPxToRem(maxHeight);
|
|
7980
|
+
this._overlayRef.updatePosition();
|
|
7962
7981
|
}
|
|
7963
7982
|
measureContentSize(element) {
|
|
7964
7983
|
const clone = element.cloneNode(true);
|
|
@@ -8063,6 +8082,38 @@ const DEFAULT_POSITION = {
|
|
|
8063
8082
|
overlayX: 'end',
|
|
8064
8083
|
overlayY: 'top'
|
|
8065
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
|
+
};
|
|
8097
|
+
/**
|
|
8098
|
+
* **QdPopoverOnClickDirective**
|
|
8099
|
+
*
|
|
8100
|
+
* Shows a popover next to its host element and opens or closes it on host click.
|
|
8101
|
+
*
|
|
8102
|
+
* It is an internal building block. Quadrel components such as dropdowns, menu buttons and
|
|
8103
|
+
* filters build on it; consumers do not use it directly.
|
|
8104
|
+
*
|
|
8105
|
+
* #### Features:
|
|
8106
|
+
* - Opens the popover on click and closes it on the next click or an outside click.
|
|
8107
|
+
* - With `qdPopoverEnableKeyControl`, Enter and Space open it, Escape and Tab close it.
|
|
8108
|
+
* - Sizes the popover to its host or content within the min/max limits, and never wider than the screen.
|
|
8109
|
+
* - Places it with the Angular CDK; with `qdPopoverFlipIntoViewport` it opens to the side that has room instead of off the screen edge.
|
|
8110
|
+
* - Keeps only one popover open: opening one closes the others, but a nested popover keeps its parents open.
|
|
8111
|
+
*
|
|
8112
|
+
* #### Notes & Best Practices
|
|
8113
|
+
* - Emits `opened` and `closed` so consumers can react.
|
|
8114
|
+
* - The flip is opt-in, so popovers that already sit correctly stay as they are.
|
|
8115
|
+
* - Not part of the public API; use the higher-level components like `qd-dropdown` or `qd-menu-button` instead.
|
|
8116
|
+
*/
|
|
8066
8117
|
class QdPopoverOnClickDirective {
|
|
8067
8118
|
hostRef = inject(ElementRef);
|
|
8068
8119
|
overlayPositionBuilder = inject(OverlayPositionBuilder);
|
|
@@ -8070,18 +8121,108 @@ class QdPopoverOnClickDirective {
|
|
|
8070
8121
|
popoverService = inject(QdPopoverService);
|
|
8071
8122
|
sizingService = inject(QdPopoverSizingService);
|
|
8072
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
|
+
*/
|
|
8073
8130
|
qdPopoverOnClick;
|
|
8074
|
-
|
|
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
|
+
*/
|
|
8075
8159
|
qdPopoverCloseStrategy = 'onEveryClick';
|
|
8160
|
+
/**
|
|
8161
|
+
* Turns the popover off.
|
|
8162
|
+
*
|
|
8163
|
+
* While `true`, clicks and keys on the host no longer open it.
|
|
8164
|
+
*/
|
|
8076
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
|
+
*/
|
|
8077
8172
|
qdPopoverStopPropagation = true;
|
|
8173
|
+
/**
|
|
8174
|
+
* Background colour of the popover panel.
|
|
8175
|
+
*
|
|
8176
|
+
* When unset, the panel uses its default colour.
|
|
8177
|
+
*/
|
|
8078
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
|
+
*/
|
|
8079
8185
|
qdPopoverMaxHeight = 'none';
|
|
8186
|
+
/**
|
|
8187
|
+
* Narrowest the popover may get, in pixels.
|
|
8188
|
+
*
|
|
8189
|
+
* `none` removes the lower limit.
|
|
8190
|
+
*/
|
|
8080
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
|
+
*/
|
|
8081
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
|
+
*/
|
|
8082
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
|
+
*/
|
|
8083
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
|
+
*/
|
|
8218
|
+
qdPopoverFlipIntoViewport = false;
|
|
8219
|
+
/**
|
|
8220
|
+
* Emits after the popover has opened.
|
|
8221
|
+
*/
|
|
8084
8222
|
opened = new EventEmitter();
|
|
8223
|
+
/**
|
|
8224
|
+
* Emits after the popover has closed.
|
|
8225
|
+
*/
|
|
8085
8226
|
closed = new EventEmitter();
|
|
8086
8227
|
handleClick(event) {
|
|
8087
8228
|
if (this.qdPopoverStopPropagation)
|
|
@@ -8113,6 +8254,7 @@ class QdPopoverOnClickDirective {
|
|
|
8113
8254
|
_host;
|
|
8114
8255
|
_popoverRef = null;
|
|
8115
8256
|
_positionStrategyInstance;
|
|
8257
|
+
_resolvedPositions = [DEFAULT_POSITION];
|
|
8116
8258
|
_subscriptions = [];
|
|
8117
8259
|
constructor() {
|
|
8118
8260
|
const hostRef = this.hostRef;
|
|
@@ -8170,14 +8312,38 @@ class QdPopoverOnClickDirective {
|
|
|
8170
8312
|
return this._popoverRef?.instance ?? null;
|
|
8171
8313
|
}
|
|
8172
8314
|
initPositionStrategy() {
|
|
8173
|
-
const positions = this.
|
|
8174
|
-
?
|
|
8175
|
-
? this.positionStrategy
|
|
8176
|
-
: [this.positionStrategy]
|
|
8315
|
+
const positions = this.qdPopoverPlacement
|
|
8316
|
+
? this.buildPlacementPositions(this.qdPopoverPlacement)
|
|
8177
8317
|
: [DEFAULT_POSITION];
|
|
8318
|
+
this._resolvedPositions = this.qdPopoverFlipIntoViewport ? this.withHorizontalFallbacks(positions) : positions;
|
|
8178
8319
|
this._positionStrategyInstance = this.overlayPositionBuilder
|
|
8179
8320
|
.flexibleConnectedTo(this._host)
|
|
8180
|
-
.
|
|
8321
|
+
.withPush(true)
|
|
8322
|
+
.withPositions(this._resolvedPositions);
|
|
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
|
+
}
|
|
8338
|
+
withHorizontalFallbacks(positions) {
|
|
8339
|
+
const flip = (x) => x === 'start' ? 'end' : x === 'end' ? 'start' : 'center';
|
|
8340
|
+
const mirrored = positions.map(position => ({
|
|
8341
|
+
...position,
|
|
8342
|
+
originX: flip(position.originX),
|
|
8343
|
+
overlayX: flip(position.overlayX),
|
|
8344
|
+
offsetX: position.offsetX === undefined ? undefined : -position.offsetX
|
|
8345
|
+
}));
|
|
8346
|
+
return [...positions, ...mirrored];
|
|
8181
8347
|
}
|
|
8182
8348
|
createOverlay() {
|
|
8183
8349
|
this.overlayRef = this.overlay.create({
|
|
@@ -8188,6 +8354,7 @@ class QdPopoverOnClickDirective {
|
|
|
8188
8354
|
}
|
|
8189
8355
|
runSizingAndOpen(popover) {
|
|
8190
8356
|
setTimeout(() => {
|
|
8357
|
+
this.setPopoverContent();
|
|
8191
8358
|
const constraints = {
|
|
8192
8359
|
minWidth: this.qdPopoverMinWidth,
|
|
8193
8360
|
maxWidth: this.qdPopoverMaxWidth,
|
|
@@ -8197,7 +8364,6 @@ class QdPopoverOnClickDirective {
|
|
|
8197
8364
|
.observe(this._host, popover, this.overlayRef, this.qdPopoverAutoSize, constraints)
|
|
8198
8365
|
.subscribe(ready => {
|
|
8199
8366
|
if (ready) {
|
|
8200
|
-
this.setPopoverContent();
|
|
8201
8367
|
this.subscribeToPopoverClose();
|
|
8202
8368
|
this.subscribeToPositionChange();
|
|
8203
8369
|
this.opened.emit();
|
|
@@ -8232,7 +8398,7 @@ class QdPopoverOnClickDirective {
|
|
|
8232
8398
|
if (!popover)
|
|
8233
8399
|
return;
|
|
8234
8400
|
this._subscriptions.push(this._positionStrategyInstance.positionChanges
|
|
8235
|
-
.pipe(map(c => c.connectionPair.overlayY), startWith(this.
|
|
8401
|
+
.pipe(map(c => c.connectionPair.overlayY), startWith(this._resolvedPositions[0]?.overlayY ?? 'top'), distinctUntilChanged())
|
|
8236
8402
|
.subscribe(overlayY => popover.setDirection(overlayY === 'top' ? 'down' : 'up')));
|
|
8237
8403
|
}
|
|
8238
8404
|
shouldClosePopover(event) {
|
|
@@ -8262,7 +8428,7 @@ class QdPopoverOnClickDirective {
|
|
|
8262
8428
|
this.unsubscribeAll();
|
|
8263
8429
|
}
|
|
8264
8430
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPopoverOnClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
8265
|
-
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 });
|
|
8266
8432
|
}
|
|
8267
8433
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPopoverOnClickDirective, decorators: [{
|
|
8268
8434
|
type: Directive,
|
|
@@ -8274,7 +8440,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
8274
8440
|
}]
|
|
8275
8441
|
}], ctorParameters: () => [], propDecorators: { qdPopoverOnClick: [{
|
|
8276
8442
|
type: Input
|
|
8277
|
-
}],
|
|
8443
|
+
}], qdPopoverPlacement: [{
|
|
8444
|
+
type: Input
|
|
8445
|
+
}], qdPopoverOffsetX: [{
|
|
8446
|
+
type: Input
|
|
8447
|
+
}], qdPopoverOffsetY: [{
|
|
8278
8448
|
type: Input
|
|
8279
8449
|
}], qdPopoverCloseStrategy: [{
|
|
8280
8450
|
type: Input
|
|
@@ -8294,6 +8464,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
8294
8464
|
type: Input
|
|
8295
8465
|
}], qdPopoverEnableKeyControl: [{
|
|
8296
8466
|
type: Input
|
|
8467
|
+
}], qdPopoverFlipIntoViewport: [{
|
|
8468
|
+
type: Input
|
|
8297
8469
|
}], opened: [{
|
|
8298
8470
|
type: Output
|
|
8299
8471
|
}], closed: [{
|
|
@@ -10566,11 +10738,11 @@ class QdDropdownOptionsComponent {
|
|
|
10566
10738
|
this.filterChange.emit(trimmed);
|
|
10567
10739
|
}
|
|
10568
10740
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDropdownOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10569
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDropdownOptionsComponent, isStandalone: false, selector: "qd-dropdown-options", inputs: { filter: "filter", filterText: "filterText", testId: "testId", id: "id" }, outputs: { filterChange: "filterChange", optionClick: "optionClick" }, host: { listeners: { "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "filterElement", first: true, predicate: ["filter"], descendants: true }, { propertyName: "optionComponents", predicate: QdFormInputComponent, descendants: true }], ngImport: i0, template: "<div class=\"filter-wrapper\">\n <input\n *ngIf=\"filter\"\n #filter\n type=\"text\"\n class=\"qd-dropdown__filter\"\n [(ngModel)]=\"filterText\"\n (ngModelChange)=\"onFilterInputChange($event)\"\n [attr.data-test-id]=\"testId + '-filter'\"\n autocomplete=\"off\"\n />\n\n <qd-icon *ngIf=\"filter\" [icon]=\"'filter'\" class=\"qd-dropdown__filter-magnifier\"></qd-icon>\n</div>\n\n<ng-container *ngIf=\"filteredOptions$ | async as options\">\n <div\n class=\"qd-dropdown__option\"\n *ngFor=\"let option of options\"\n [ngClass]=\"option.disabled ? 'qd-dropdown__option--disabled' : ''\"\n >\n <qd-form-input (click)=\"optionClick.emit(option)\" [option]=\"option\" class=\"qd-dropdown__form-input\">\n <input\n class=\"qd-dropdown__option-input\"\n name=\"dropdown\"\n type=\"radio\"\n [id]=\"option.value + '-' + id\"\n [disabled]=\"option.disabled\"\n [value]=\"option.value\"\n [attr.data-test-id]=\"testId + '-option-' + (option.value || '-')\"\n />\n\n <label class=\"qd-dropdown__option-label\" [for]=\"option.value + '-' + id\">\n {{ option.i18n | translate }}\n </label>\n </qd-form-input>\n </div>\n</ng-container>\n", styles: [".qd-dropdown__option{background:#fff}.qd-dropdown__option .qd-dropdown__form-input{display:
|
|
10741
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDropdownOptionsComponent, isStandalone: false, selector: "qd-dropdown-options", inputs: { filter: "filter", filterText: "filterText", testId: "testId", id: "id" }, outputs: { filterChange: "filterChange", optionClick: "optionClick" }, host: { listeners: { "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "filterElement", first: true, predicate: ["filter"], descendants: true }, { propertyName: "optionComponents", predicate: QdFormInputComponent, descendants: true }], ngImport: i0, template: "<div class=\"filter-wrapper\">\n <input\n *ngIf=\"filter\"\n #filter\n type=\"text\"\n class=\"qd-dropdown__filter\"\n [(ngModel)]=\"filterText\"\n (ngModelChange)=\"onFilterInputChange($event)\"\n [attr.data-test-id]=\"testId + '-filter'\"\n autocomplete=\"off\"\n />\n\n <qd-icon *ngIf=\"filter\" [icon]=\"'filter'\" class=\"qd-dropdown__filter-magnifier\"></qd-icon>\n</div>\n\n<ng-container *ngIf=\"filteredOptions$ | async as options\">\n <div\n class=\"qd-dropdown__option\"\n *ngFor=\"let option of options\"\n [ngClass]=\"option.disabled ? 'qd-dropdown__option--disabled' : ''\"\n >\n <qd-form-input (click)=\"optionClick.emit(option)\" [option]=\"option\" class=\"qd-dropdown__form-input\">\n <input\n class=\"qd-dropdown__option-input\"\n name=\"dropdown\"\n type=\"radio\"\n [id]=\"option.value + '-' + id\"\n [disabled]=\"option.disabled\"\n [value]=\"option.value\"\n [attr.data-test-id]=\"testId + '-option-' + (option.value || '-')\"\n />\n\n <label class=\"qd-dropdown__option-label\" [for]=\"option.value + '-' + id\">\n {{ option.i18n | translate }}\n </label>\n </qd-form-input>\n </div>\n</ng-container>\n", styles: [".qd-dropdown__option{background:#fff}.qd-dropdown__option .qd-dropdown__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-dropdown__option .qd-dropdown__form-input:focus,.qd-dropdown__option .qd-dropdown__form-input:hover,.qd-dropdown__option .qd-dropdown__form-input.active{background:#f5f5f5;color:#171717}.qd-dropdown__option .qd-dropdown__option-input{display:none}.qd-dropdown__option .qd-dropdown__option-input:checked+label{background:#f5f5f5;color:#171717}.qd-dropdown__option .qd-dropdown__option-input:focus+.qd-dropdown__form-input{background:#f5f5f5;color:#171717}.qd-dropdown__option .qd-dropdown__option-label{padding-right:1.25rem;cursor:pointer;overflow-wrap:anywhere}.qd-dropdown__option.qd-dropdown__option--disabled>.qd-dropdown__form-input{color:#b4b4b4;cursor:default;pointer-events:none}.filter-wrapper{position:relative}.qd-dropdown__filter{width:100%;height:2.25rem;padding:0 .75rem 0 2.25rem;border:none;border-bottom:.0625rem solid rgb(213,213,213);background:#fff;color:#171717;overflow-y:auto;scroll-behavior:smooth}.qd-dropdown__filter:focus,.qd-dropdown__filter:hover,.qd-dropdown__filter:active{border:none;border-bottom:.125rem solid rgb(23,23,23);background:#f5f5f5;outline:none}.qd-dropdown-filter-focus .qd-dropdown__filter{border-bottom:.125rem solid rgb(0,102,153)}.qd-dropdown-filter-focus .qd-dropdown__filter:focus,.qd-dropdown-filter-focus .qd-dropdown__filter:hover,.qd-dropdown-filter-focus .qd-dropdown__filter:active{border-bottom:.125rem solid rgb(0,102,153)}.qd-dropdown__filter-magnifier{position:absolute;top:0;left:0;padding:.625rem 0 .625rem .75rem}.qd-dropdown__filter-magnifier .qd-icon{color:#757575}\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: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: QdFormInputComponent, selector: "qd-form-input", inputs: ["option"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
10570
10742
|
}
|
|
10571
10743
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDropdownOptionsComponent, decorators: [{
|
|
10572
10744
|
type: Component,
|
|
10573
|
-
args: [{ selector: 'qd-dropdown-options', standalone: false, template: "<div class=\"filter-wrapper\">\n <input\n *ngIf=\"filter\"\n #filter\n type=\"text\"\n class=\"qd-dropdown__filter\"\n [(ngModel)]=\"filterText\"\n (ngModelChange)=\"onFilterInputChange($event)\"\n [attr.data-test-id]=\"testId + '-filter'\"\n autocomplete=\"off\"\n />\n\n <qd-icon *ngIf=\"filter\" [icon]=\"'filter'\" class=\"qd-dropdown__filter-magnifier\"></qd-icon>\n</div>\n\n<ng-container *ngIf=\"filteredOptions$ | async as options\">\n <div\n class=\"qd-dropdown__option\"\n *ngFor=\"let option of options\"\n [ngClass]=\"option.disabled ? 'qd-dropdown__option--disabled' : ''\"\n >\n <qd-form-input (click)=\"optionClick.emit(option)\" [option]=\"option\" class=\"qd-dropdown__form-input\">\n <input\n class=\"qd-dropdown__option-input\"\n name=\"dropdown\"\n type=\"radio\"\n [id]=\"option.value + '-' + id\"\n [disabled]=\"option.disabled\"\n [value]=\"option.value\"\n [attr.data-test-id]=\"testId + '-option-' + (option.value || '-')\"\n />\n\n <label class=\"qd-dropdown__option-label\" [for]=\"option.value + '-' + id\">\n {{ option.i18n | translate }}\n </label>\n </qd-form-input>\n </div>\n</ng-container>\n", styles: [".qd-dropdown__option{background:#fff}.qd-dropdown__option .qd-dropdown__form-input{display:
|
|
10745
|
+
args: [{ selector: 'qd-dropdown-options', standalone: false, template: "<div class=\"filter-wrapper\">\n <input\n *ngIf=\"filter\"\n #filter\n type=\"text\"\n class=\"qd-dropdown__filter\"\n [(ngModel)]=\"filterText\"\n (ngModelChange)=\"onFilterInputChange($event)\"\n [attr.data-test-id]=\"testId + '-filter'\"\n autocomplete=\"off\"\n />\n\n <qd-icon *ngIf=\"filter\" [icon]=\"'filter'\" class=\"qd-dropdown__filter-magnifier\"></qd-icon>\n</div>\n\n<ng-container *ngIf=\"filteredOptions$ | async as options\">\n <div\n class=\"qd-dropdown__option\"\n *ngFor=\"let option of options\"\n [ngClass]=\"option.disabled ? 'qd-dropdown__option--disabled' : ''\"\n >\n <qd-form-input (click)=\"optionClick.emit(option)\" [option]=\"option\" class=\"qd-dropdown__form-input\">\n <input\n class=\"qd-dropdown__option-input\"\n name=\"dropdown\"\n type=\"radio\"\n [id]=\"option.value + '-' + id\"\n [disabled]=\"option.disabled\"\n [value]=\"option.value\"\n [attr.data-test-id]=\"testId + '-option-' + (option.value || '-')\"\n />\n\n <label class=\"qd-dropdown__option-label\" [for]=\"option.value + '-' + id\">\n {{ option.i18n | translate }}\n </label>\n </qd-form-input>\n </div>\n</ng-container>\n", styles: [".qd-dropdown__option{background:#fff}.qd-dropdown__option .qd-dropdown__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-dropdown__option .qd-dropdown__form-input:focus,.qd-dropdown__option .qd-dropdown__form-input:hover,.qd-dropdown__option .qd-dropdown__form-input.active{background:#f5f5f5;color:#171717}.qd-dropdown__option .qd-dropdown__option-input{display:none}.qd-dropdown__option .qd-dropdown__option-input:checked+label{background:#f5f5f5;color:#171717}.qd-dropdown__option .qd-dropdown__option-input:focus+.qd-dropdown__form-input{background:#f5f5f5;color:#171717}.qd-dropdown__option .qd-dropdown__option-label{padding-right:1.25rem;cursor:pointer;overflow-wrap:anywhere}.qd-dropdown__option.qd-dropdown__option--disabled>.qd-dropdown__form-input{color:#b4b4b4;cursor:default;pointer-events:none}.filter-wrapper{position:relative}.qd-dropdown__filter{width:100%;height:2.25rem;padding:0 .75rem 0 2.25rem;border:none;border-bottom:.0625rem solid rgb(213,213,213);background:#fff;color:#171717;overflow-y:auto;scroll-behavior:smooth}.qd-dropdown__filter:focus,.qd-dropdown__filter:hover,.qd-dropdown__filter:active{border:none;border-bottom:.125rem solid rgb(23,23,23);background:#f5f5f5;outline:none}.qd-dropdown-filter-focus .qd-dropdown__filter{border-bottom:.125rem solid rgb(0,102,153)}.qd-dropdown-filter-focus .qd-dropdown__filter:focus,.qd-dropdown-filter-focus .qd-dropdown__filter:hover,.qd-dropdown-filter-focus .qd-dropdown__filter:active{border-bottom:.125rem solid rgb(0,102,153)}.qd-dropdown__filter-magnifier{position:absolute;top:0;left:0;padding:.625rem 0 .625rem .75rem}.qd-dropdown__filter-magnifier .qd-icon{color:#757575}\n"] }]
|
|
10574
10746
|
}], ctorParameters: () => [], propDecorators: { filter: [{
|
|
10575
10747
|
type: Input
|
|
10576
10748
|
}], filterText: [{
|
|
@@ -10745,7 +10917,6 @@ class QdDropdownComponent {
|
|
|
10745
10917
|
options;
|
|
10746
10918
|
filterText;
|
|
10747
10919
|
control;
|
|
10748
|
-
positionStrategy;
|
|
10749
10920
|
_value = null;
|
|
10750
10921
|
_selectedOption = null;
|
|
10751
10922
|
_subs = new Subscription();
|
|
@@ -10789,10 +10960,8 @@ class QdDropdownComponent {
|
|
|
10789
10960
|
: this.translateService.instant('i18n.qd.dropdown.defaultValue');
|
|
10790
10961
|
}
|
|
10791
10962
|
constructor() {
|
|
10792
|
-
const isPopoverTopFirst = inject(QD_POPOVER_TOP_FIRST, { optional: true });
|
|
10793
10963
|
if (!this.id)
|
|
10794
10964
|
this.id = v4();
|
|
10795
|
-
this.getPositionStrategy(isPopoverTopFirst);
|
|
10796
10965
|
this.optionsService.optionsResolved$
|
|
10797
10966
|
.pipe(takeUntilDestroyed())
|
|
10798
10967
|
.subscribe(resolvedEvent => this.optionsResolved.emit(resolvedEvent));
|
|
@@ -10871,24 +11040,6 @@ class QdDropdownComponent {
|
|
|
10871
11040
|
this._onTouch();
|
|
10872
11041
|
}
|
|
10873
11042
|
}
|
|
10874
|
-
getPositionStrategy(isPopoverTopFirst) {
|
|
10875
|
-
const arr = [
|
|
10876
|
-
{
|
|
10877
|
-
originX: 'start',
|
|
10878
|
-
originY: 'bottom',
|
|
10879
|
-
overlayX: 'start',
|
|
10880
|
-
overlayY: 'top'
|
|
10881
|
-
},
|
|
10882
|
-
{
|
|
10883
|
-
originX: 'start',
|
|
10884
|
-
originY: 'top',
|
|
10885
|
-
overlayX: 'start',
|
|
10886
|
-
overlayY: 'bottom',
|
|
10887
|
-
weight: 0.8
|
|
10888
|
-
}
|
|
10889
|
-
];
|
|
10890
|
-
this.positionStrategy = isPopoverTopFirst ? arr.slice().reverse() : arr;
|
|
10891
|
-
}
|
|
10892
11043
|
loadOptionsForCurrentConfig() {
|
|
10893
11044
|
this.optionsService.initialize(this.config);
|
|
10894
11045
|
this.optionsService.validateOptionsSetup('QdDropdown');
|
|
@@ -10957,7 +11108,7 @@ class QdDropdownComponent {
|
|
|
10957
11108
|
provide: QD_FOCUSABLE_TOKEN,
|
|
10958
11109
|
useExisting: QdDropdownComponent
|
|
10959
11110
|
}
|
|
10960
|
-
], 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 (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 });
|
|
10961
11112
|
}
|
|
10962
11113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDropdownComponent, decorators: [{
|
|
10963
11114
|
type: Component,
|
|
@@ -10975,7 +11126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
10975
11126
|
provide: QD_FOCUSABLE_TOKEN,
|
|
10976
11127
|
useExisting: QdDropdownComponent
|
|
10977
11128
|
}
|
|
10978
|
-
], 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 (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"] }]
|
|
10979
11130
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
10980
11131
|
type: Input
|
|
10981
11132
|
}], id: [{
|
|
@@ -11113,7 +11264,7 @@ class QdInputUnitsComponent {
|
|
|
11113
11264
|
this.closed.emit();
|
|
11114
11265
|
}
|
|
11115
11266
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputUnitsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11116
|
-
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" }] });
|
|
11117
11268
|
}
|
|
11118
11269
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputUnitsComponent, decorators: [{
|
|
11119
11270
|
type: Component,
|
|
@@ -11133,354 +11284,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
11133
11284
|
|
|
11134
11285
|
class QdInputOptionsComponent {
|
|
11135
11286
|
resolverRegistry = inject(QdFormOptionsResolverRegistry);
|
|
11136
|
-
|
|
11137
|
-
|
|
11138
|
-
template = new EventEmitter();
|
|
11139
|
-
formInputComponents = new EventEmitter();
|
|
11287
|
+
keyboardService = inject(QdFormKeyboardService);
|
|
11288
|
+
optionsService = inject(QdFormOptionsService);
|
|
11140
11289
|
optionSelected = new EventEmitter();
|
|
11141
|
-
|
|
11142
|
-
|
|
11290
|
+
optionComponents;
|
|
11291
|
+
filteredOptions$ = this.optionsService.filteredOptions$;
|
|
11292
|
+
optionsRequestState$ = this.optionsService.delayedRequestState$;
|
|
11293
|
+
QdFormOptionsRequestState = QdFormOptionsRequestState;
|
|
11294
|
+
_optionsResolver = null;
|
|
11143
11295
|
get requestLoadingHintI18n() {
|
|
11144
11296
|
return this._optionsResolver?.requestLoadingHint?.i18n || 'i18n.qd.input.options.loading';
|
|
11145
11297
|
}
|
|
11146
11298
|
get requestErrorHintI18n() {
|
|
11147
11299
|
return this._optionsResolver?.requestErrorHint?.i18n || 'i18n.qd.input.options.error';
|
|
11148
11300
|
}
|
|
11149
|
-
|
|
11150
|
-
|
|
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
|
+
}
|
|
11151
11315
|
ngOnInit() {
|
|
11152
11316
|
this._optionsResolver = this.resolverRegistry.findResolver();
|
|
11153
11317
|
}
|
|
11154
11318
|
ngAfterViewInit() {
|
|
11155
|
-
this.
|
|
11156
|
-
this.formInputComponents.emit(this._formInputComponents);
|
|
11319
|
+
this.keyboardService.init(this.optionComponents);
|
|
11157
11320
|
}
|
|
11158
11321
|
selectOption(option) {
|
|
11159
11322
|
this.optionSelected.emit(option);
|
|
11160
11323
|
}
|
|
11161
11324
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11162
|
-
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" }] });
|
|
11163
11326
|
}
|
|
11164
11327
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputOptionsComponent, decorators: [{
|
|
11165
11328
|
type: Component,
|
|
11166
|
-
args: [{ selector: 'qd-input-options', standalone: false, template: "<ng-
|
|
11167
|
-
}], propDecorators: {
|
|
11168
|
-
type: Input
|
|
11169
|
-
}], optionsRequestState$: [{
|
|
11170
|
-
type: Input
|
|
11171
|
-
}], template: [{
|
|
11172
|
-
type: Output
|
|
11173
|
-
}], formInputComponents: [{
|
|
11174
|
-
type: Output
|
|
11175
|
-
}], 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: [{
|
|
11176
11331
|
type: Output
|
|
11177
|
-
}],
|
|
11178
|
-
type: ViewChild,
|
|
11179
|
-
args: ['options']
|
|
11180
|
-
}], _formInputComponents: [{
|
|
11332
|
+
}], optionComponents: [{
|
|
11181
11333
|
type: ViewChildren,
|
|
11182
11334
|
args: [QdFormInputComponent]
|
|
11183
|
-
}]
|
|
11184
|
-
|
|
11185
|
-
// TODO: Split into smaller units – directive handles too many responsibilities (popover, options, keyboard, state, ...)
|
|
11186
|
-
/**
|
|
11187
|
-
* Manages the options popover of a form input, including resolver-based options.
|
|
11188
|
-
* The resolver trigger rules are defined on {@link QdFormOptionsResolver}.
|
|
11189
|
-
*
|
|
11190
|
-
* Invariant: the `value` setter resolves options only on actual value changes. Selecting
|
|
11191
|
-
* an option assigns the option's i18n key as the new value right away, because the host
|
|
11192
|
-
* component writes exactly that key back into the `value` binding for display purposes —
|
|
11193
|
-
* the write-back therefore arrives as a no-op instead of resolving with the i18n key.
|
|
11194
|
-
*/
|
|
11195
|
-
class QdInputOptionsDirective extends QdPopoverOnClickDirective {
|
|
11196
|
-
translateService = inject(TranslateService);
|
|
11197
|
-
viewContainerRef = inject(ViewContainerRef);
|
|
11198
|
-
changeDetectorRef = inject(ChangeDetectorRef);
|
|
11199
|
-
resolverRegistry = inject(QdFormOptionsResolverRegistry);
|
|
11200
|
-
controlContainer = inject(ControlContainer, { optional: true });
|
|
11201
|
-
get value() {
|
|
11202
|
-
return this._value;
|
|
11203
|
-
}
|
|
11204
|
-
/**
|
|
11205
|
-
* The value of the form input
|
|
11206
|
-
*/
|
|
11207
|
-
set value(value) {
|
|
11208
|
-
if (value === this._value)
|
|
11209
|
-
return;
|
|
11210
|
-
this._value = value;
|
|
11211
|
-
if (this.hasOptions() && !this.config?.readonly && !this.config?.viewonly)
|
|
11212
|
-
this.updateOptions();
|
|
11213
|
-
}
|
|
11214
|
-
/**
|
|
11215
|
-
* The configuration of the form input
|
|
11216
|
-
*
|
|
11217
|
-
* @example
|
|
11218
|
-
* {
|
|
11219
|
-
* label: { i18n: 'label' },
|
|
11220
|
-
* placeholder: { i18n: 'placeholder' },
|
|
11221
|
-
* hint: { i18n: 'hint' }
|
|
11222
|
-
* };
|
|
11223
|
-
*/
|
|
11224
|
-
config;
|
|
11225
|
-
/**
|
|
11226
|
-
* Emits event when the value has changed. Note: Emits on keyup (no longer on click, as before)!
|
|
11227
|
-
*/
|
|
11228
|
-
enterClick = new EventEmitter();
|
|
11229
|
-
/**
|
|
11230
|
-
* Emits event when an option in the fly out has been selected.
|
|
11231
|
-
*/
|
|
11232
|
-
optionSelected = new EventEmitter();
|
|
11233
|
-
/**
|
|
11234
|
-
* Emits the resolved options and the depended-on values they were resolved with,
|
|
11235
|
-
* after every resolver run.
|
|
11236
|
-
*
|
|
11237
|
-
* The resolver fetches the options; this output lets the component react to them —
|
|
11238
|
-
* typically to drop a selection the new options no longer contain (e.g. clear the
|
|
11239
|
-
* chosen city once the country changed).
|
|
11240
|
-
*
|
|
11241
|
-
* @example
|
|
11242
|
-
* onCityOptionsResolved(event: QdFormOptionsResolvedEvent): void {
|
|
11243
|
-
* const city = this.form.get('city');
|
|
11244
|
-
* if (city?.value && !event.options.some(o => o.value === city.value)) city.reset();
|
|
11245
|
-
* }
|
|
11246
|
-
*/
|
|
11247
|
-
optionsResolved = new EventEmitter();
|
|
11248
|
-
onSpace() {
|
|
11249
|
-
if (this.hasOptions())
|
|
11250
|
-
this.open();
|
|
11251
|
-
}
|
|
11252
|
-
onEscape() {
|
|
11253
|
-
if (this.hasOptions())
|
|
11254
|
-
this.closePopover();
|
|
11255
|
-
}
|
|
11256
|
-
onTab() {
|
|
11257
|
-
if (this.hasOptions())
|
|
11258
|
-
this.closePopover();
|
|
11259
|
-
}
|
|
11260
|
-
_optionsResolver;
|
|
11261
|
-
_optionsRequestStateSubject = new BehaviorSubject(QdFormOptionsRequestState.IDLE);
|
|
11262
|
-
_optionsLoadingHintDelay = 400;
|
|
11263
|
-
_optionsLoadingHintMinTime = 300;
|
|
11264
|
-
_hostElement;
|
|
11265
|
-
_keyManager;
|
|
11266
|
-
_value;
|
|
11267
|
-
_filteredOptionsSubject = new BehaviorSubject([]);
|
|
11268
|
-
_destroyed$ = new Subject();
|
|
11269
|
-
_dependsOnSubscription = null;
|
|
11270
|
-
_resolveRequests$ = new Subject();
|
|
11271
|
-
filteredOptions$ = this._filteredOptionsSubject.asObservable();
|
|
11272
|
-
optionsRequestState$ = this._optionsRequestStateSubject.pipe(startWith(this._optionsRequestStateSubject.value), pairwise(), debounce(([previousRequestState, currentRequestState]) => currentRequestState === QdFormOptionsRequestState.PENDING &&
|
|
11273
|
-
previousRequestState !== QdFormOptionsRequestState.ERROR
|
|
11274
|
-
? timer(this._optionsLoadingHintDelay)
|
|
11275
|
-
: of(true)),
|
|
11276
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
11277
|
-
map(([_, currentRequestState]) => currentRequestState), concatMap(requestState => requestState === QdFormOptionsRequestState.PENDING
|
|
11278
|
-
? timer(this._optionsLoadingHintMinTime).pipe(switchMap(() => EMPTY), startWith(requestState))
|
|
11279
|
-
: of(requestState)));
|
|
11280
|
-
formInputComponents;
|
|
11281
|
-
constructor() {
|
|
11282
|
-
super();
|
|
11283
|
-
this._hostElement = this.hostRef.nativeElement;
|
|
11284
|
-
}
|
|
11285
|
-
ngOnInit() {
|
|
11286
|
-
this.initializeOptionsResolver();
|
|
11287
|
-
this.publishLatestResolvedOptions();
|
|
11288
|
-
if (this.hasOptions() && !this.config?.readonly && !this.config?.viewonly) {
|
|
11289
|
-
this.setPopoverProperties();
|
|
11290
|
-
super.ngOnInit();
|
|
11291
|
-
this.updateOptions();
|
|
11292
|
-
this.updateOptionsWhenDependsOnControlsChange();
|
|
11293
|
-
const options = this.config.options;
|
|
11294
|
-
if (options) {
|
|
11295
|
-
const currentOption = options.find(option => option.value === this.value);
|
|
11296
|
-
if (currentOption)
|
|
11297
|
-
this.selectOption(currentOption);
|
|
11298
|
-
}
|
|
11299
|
-
}
|
|
11300
|
-
this.logWarningIfBothOptionsAndResolverAreUsed();
|
|
11301
|
-
this.logWarningIfDependsOnWithoutFormGroup();
|
|
11302
|
-
}
|
|
11303
|
-
initializeOptionsResolver() {
|
|
11304
|
-
this.resolverRegistry.initialize(this.config?.optionsResolverName);
|
|
11305
|
-
this._optionsResolver = this.resolverRegistry.findResolver();
|
|
11306
|
-
}
|
|
11307
|
-
ngOnChanges(changes) {
|
|
11308
|
-
if (changes['config'] && !changes['config'].isFirstChange()) {
|
|
11309
|
-
this.updateOptionsWhenDependsOnControlsChange();
|
|
11310
|
-
this.updateOptions();
|
|
11311
|
-
}
|
|
11312
|
-
}
|
|
11313
|
-
ngOnDestroy() {
|
|
11314
|
-
super.ngOnDestroy();
|
|
11315
|
-
this._destroyed$.next();
|
|
11316
|
-
this._destroyed$.complete();
|
|
11317
|
-
}
|
|
11318
|
-
ngAfterViewInit() {
|
|
11319
|
-
this._hostElement.querySelector('input')?.addEventListener('keydown', this.onKeyDown.bind(this));
|
|
11320
|
-
if (this.hasOptions() && !this.config?.readonly && !this.config?.viewonly)
|
|
11321
|
-
this.createKeyManager();
|
|
11322
|
-
}
|
|
11323
|
-
onKeyDown(event) {
|
|
11324
|
-
if (!this._keyManager) {
|
|
11325
|
-
if (event.key === 'Enter')
|
|
11326
|
-
this.enterClick.emit();
|
|
11327
|
-
return;
|
|
11328
|
-
}
|
|
11329
|
-
if (event.key === 'Enter') {
|
|
11330
|
-
const newOption = this._filteredOptionsSubject.value.length === 0 ? undefined : this._keyManager?.activeItem?.option;
|
|
11331
|
-
if (newOption) {
|
|
11332
|
-
if (newOption.disabled || !newOption.value)
|
|
11333
|
-
return;
|
|
11334
|
-
this.selectOption(newOption);
|
|
11335
|
-
}
|
|
11336
|
-
this.enterClick.emit();
|
|
11337
|
-
this.closePopover();
|
|
11338
|
-
}
|
|
11339
|
-
else {
|
|
11340
|
-
this.open();
|
|
11341
|
-
this._keyManager.onKeydown(event);
|
|
11342
|
-
this._keyManager.activeItem?.scrollIntoView();
|
|
11343
|
-
}
|
|
11344
|
-
}
|
|
11345
|
-
selectOption(option) {
|
|
11346
|
-
this._value = option.i18n;
|
|
11347
|
-
this.optionSelected.emit(option);
|
|
11348
|
-
this.closePopover();
|
|
11349
|
-
}
|
|
11350
|
-
logWarningIfBothOptionsAndResolverAreUsed() {
|
|
11351
|
-
if (this.config?.options && this.config.options.length > 0 && !!this._optionsResolver) {
|
|
11352
|
-
console.warn('Quadrel Framework | QdInput - If both options and QD_FORM_OPTIONS_RESOLVER are used, ' +
|
|
11353
|
-
'the options will be ignored.');
|
|
11354
|
-
}
|
|
11355
|
-
}
|
|
11356
|
-
logWarningIfDependsOnWithoutFormGroup() {
|
|
11357
|
-
if (this.config?.optionsDependsOn?.length && !this.controlContainer?.control) {
|
|
11358
|
-
console.warn('Quadrel Framework | QdForms - "optionsDependsOn" is set but no parent form group was found. ' +
|
|
11359
|
-
'The depends-on configuration will be ignored.');
|
|
11360
|
-
}
|
|
11361
|
-
}
|
|
11362
|
-
closePopover() {
|
|
11363
|
-
this.close();
|
|
11364
|
-
this.createKeyManager();
|
|
11365
|
-
}
|
|
11366
|
-
createKeyManager() {
|
|
11367
|
-
if (!this.formInputComponents)
|
|
11368
|
-
return;
|
|
11369
|
-
this._keyManager = new ActiveDescendantKeyManager(this.formInputComponents).withWrap().withTypeAhead();
|
|
11370
|
-
}
|
|
11371
|
-
setPopoverProperties() {
|
|
11372
|
-
const optionsComponent = this.viewContainerRef.createComponent(QdInputOptionsComponent).instance;
|
|
11373
|
-
optionsComponent.template
|
|
11374
|
-
.pipe(takeUntil(this._destroyed$))
|
|
11375
|
-
.subscribe(template => (this.qdPopoverOnClick = template));
|
|
11376
|
-
optionsComponent.formInputComponents.pipe(takeUntil(this._destroyed$)).subscribe(formInputComponents => {
|
|
11377
|
-
this.formInputComponents = formInputComponents;
|
|
11378
|
-
this.createKeyManager();
|
|
11379
|
-
});
|
|
11380
|
-
optionsComponent.optionSelected.pipe(takeUntil(this._destroyed$)).subscribe(value => {
|
|
11381
|
-
this.selectOption(value);
|
|
11382
|
-
});
|
|
11383
|
-
optionsComponent.filteredOptions$ = this.filteredOptions$;
|
|
11384
|
-
optionsComponent.optionsRequestState$ = this.optionsRequestState$;
|
|
11385
|
-
this.qdPopoverAutoSize = { width: true };
|
|
11386
|
-
this.qdPopoverCloseStrategy = 'onOutsideClick';
|
|
11387
|
-
this.qdPopoverMaxHeight = 288;
|
|
11388
|
-
this.qdPopoverStopPropagation = false;
|
|
11389
|
-
this.positionStrategy = [
|
|
11390
|
-
{
|
|
11391
|
-
originX: 'start',
|
|
11392
|
-
originY: 'bottom',
|
|
11393
|
-
overlayX: 'start',
|
|
11394
|
-
overlayY: 'top'
|
|
11395
|
-
},
|
|
11396
|
-
{
|
|
11397
|
-
originX: 'start',
|
|
11398
|
-
originY: 'top',
|
|
11399
|
-
overlayX: 'start',
|
|
11400
|
-
overlayY: 'bottom',
|
|
11401
|
-
weight: 0.8
|
|
11402
|
-
}
|
|
11403
|
-
];
|
|
11404
|
-
}
|
|
11405
|
-
hasOptions() {
|
|
11406
|
-
return (this.config?.options && this.config.options.length > 0) || !!this._optionsResolver;
|
|
11407
|
-
}
|
|
11408
|
-
updateOptions() {
|
|
11409
|
-
if (this._optionsResolver) {
|
|
11410
|
-
this.updateOptionsWithResolver();
|
|
11411
|
-
}
|
|
11412
|
-
else {
|
|
11413
|
-
this.filterOptions();
|
|
11414
|
-
}
|
|
11415
|
-
}
|
|
11416
|
-
updateOptionsWhenDependsOnControlsChange() {
|
|
11417
|
-
this._dependsOnSubscription?.unsubscribe();
|
|
11418
|
-
this._dependsOnSubscription = null;
|
|
11419
|
-
const dependsOnControls = qdGetDependsOnControls(this.controlContainer?.control, this.config?.optionsDependsOn);
|
|
11420
|
-
if (dependsOnControls.length === 0)
|
|
11421
|
-
return;
|
|
11422
|
-
this._dependsOnSubscription = merge(...dependsOnControls.map(control => control.valueChanges.pipe(startWith(control.value), distinctUntilChanged(isEqual$1), skip(1))))
|
|
11423
|
-
.pipe(takeUntil(this._destroyed$))
|
|
11424
|
-
.subscribe(() => {
|
|
11425
|
-
this._filteredOptionsSubject.next([]);
|
|
11426
|
-
this.updateOptions();
|
|
11427
|
-
});
|
|
11428
|
-
}
|
|
11429
|
-
updateOptionsWithResolver() {
|
|
11430
|
-
this._resolveRequests$.next();
|
|
11431
|
-
}
|
|
11432
|
-
publishLatestResolvedOptions() {
|
|
11433
|
-
this._resolveRequests$
|
|
11434
|
-
.pipe(tap(() => this._optionsRequestStateSubject.next(QdFormOptionsRequestState.PENDING)), map(() => ({
|
|
11435
|
-
value: this.value.toString(),
|
|
11436
|
-
dependencies: qdCollectOptionsDependencies(this.controlContainer?.control, this.config?.optionsDependsOn)
|
|
11437
|
-
})), switchMap(({ value, dependencies }) => this._optionsResolver.resolve(value, dependencies).pipe(take(1), map(options => ({ options, dependencies })), catchError(() => {
|
|
11438
|
-
this._optionsRequestStateSubject.next(QdFormOptionsRequestState.ERROR);
|
|
11439
|
-
return EMPTY;
|
|
11440
|
-
}))), takeUntil(this._destroyed$))
|
|
11441
|
-
.subscribe(({ options, dependencies }) => {
|
|
11442
|
-
this._filteredOptionsSubject.next(options);
|
|
11443
|
-
this._optionsRequestStateSubject.next(QdFormOptionsRequestState.SUCCESS);
|
|
11444
|
-
this.optionsResolved.emit({ options, dependencies });
|
|
11445
|
-
const currentOption = options.find(option => option.value === this.value);
|
|
11446
|
-
if (currentOption)
|
|
11447
|
-
this.selectOption(currentOption);
|
|
11448
|
-
});
|
|
11449
|
-
}
|
|
11450
|
-
filterOptions() {
|
|
11451
|
-
const filteredOptions = this.config?.options?.filter(option => this.translateService.instant(option.i18n).toLowerCase().includes(this.value.toString().toLowerCase())) || [];
|
|
11452
|
-
if (filteredOptions.length === 0)
|
|
11453
|
-
this.closePopover();
|
|
11454
|
-
this._filteredOptionsSubject.next(filteredOptions);
|
|
11455
|
-
}
|
|
11456
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputOptionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
11457
|
-
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 });
|
|
11458
|
-
}
|
|
11459
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputOptionsDirective, decorators: [{
|
|
11460
|
-
type: Directive,
|
|
11461
|
-
args: [{
|
|
11462
|
-
selector: '[qdInputOptions]',
|
|
11463
|
-
standalone: false
|
|
11464
|
-
}]
|
|
11465
|
-
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
11466
|
-
type: Input
|
|
11467
|
-
}], config: [{
|
|
11468
|
-
type: Input
|
|
11469
|
-
}], enterClick: [{
|
|
11470
|
-
type: Output
|
|
11471
|
-
}], optionSelected: [{
|
|
11472
|
-
type: Output
|
|
11473
|
-
}], optionsResolved: [{
|
|
11474
|
-
type: Output
|
|
11475
|
-
}], onSpace: [{
|
|
11476
|
-
type: HostListener,
|
|
11477
|
-
args: ['keydown.Space']
|
|
11478
|
-
}], onEscape: [{
|
|
11479
|
-
type: HostListener,
|
|
11480
|
-
args: ['keydown.escape']
|
|
11481
|
-
}], onTab: [{
|
|
11335
|
+
}], onKeyDown: [{
|
|
11482
11336
|
type: HostListener,
|
|
11483
|
-
args: ['keydown
|
|
11337
|
+
args: ['document:keydown', ['$event']]
|
|
11484
11338
|
}] } });
|
|
11485
11339
|
|
|
11486
11340
|
// @ts-strict-ignore
|
|
@@ -11689,7 +11543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
11689
11543
|
*/
|
|
11690
11544
|
class QdInputComponent {
|
|
11691
11545
|
actionEmitterService = inject(QdFormsActionEmitterService);
|
|
11692
|
-
|
|
11546
|
+
optionsService = inject(QdFormOptionsService);
|
|
11693
11547
|
controlContainer = inject(ControlContainer, { optional: true, host: true, skipSelf: true });
|
|
11694
11548
|
eventBrokerService = inject(QdEventBrokerService, { optional: true });
|
|
11695
11549
|
numberInputService = inject(QdNumberInputService);
|
|
@@ -11768,6 +11622,16 @@ class QdInputComponent {
|
|
|
11768
11622
|
* }
|
|
11769
11623
|
*/
|
|
11770
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
|
+
}
|
|
11771
11635
|
readonly;
|
|
11772
11636
|
readonlyAction = false;
|
|
11773
11637
|
viewonly;
|
|
@@ -11786,6 +11650,8 @@ class QdInputComponent {
|
|
|
11786
11650
|
return this.isAmbiguousInput;
|
|
11787
11651
|
}
|
|
11788
11652
|
inputElement;
|
|
11653
|
+
popover;
|
|
11654
|
+
isOptionsOpen = false;
|
|
11789
11655
|
inputType;
|
|
11790
11656
|
inputMode;
|
|
11791
11657
|
htmlInputType;
|
|
@@ -11798,8 +11664,8 @@ class QdInputComponent {
|
|
|
11798
11664
|
_value = { value: '' };
|
|
11799
11665
|
_displayValue = '';
|
|
11800
11666
|
control;
|
|
11801
|
-
_optionsResolver;
|
|
11802
11667
|
_subs = new Subscription();
|
|
11668
|
+
_filteredOptions = [];
|
|
11803
11669
|
_isUserTyped = false;
|
|
11804
11670
|
_onChange = () => { };
|
|
11805
11671
|
_onTouch = () => { };
|
|
@@ -11840,7 +11706,8 @@ class QdInputComponent {
|
|
|
11840
11706
|
return [`${displayValue}${this._value.unit ? ' ' + this._value.unit : ''}`];
|
|
11841
11707
|
}
|
|
11842
11708
|
ngOnInit() {
|
|
11843
|
-
this.
|
|
11709
|
+
this.subscribeToOptions();
|
|
11710
|
+
this.optionsService.initialize(this.config);
|
|
11844
11711
|
this.updateConfig();
|
|
11845
11712
|
if (this.controlContainer) {
|
|
11846
11713
|
if (this.formControlName) {
|
|
@@ -11864,6 +11731,8 @@ class QdInputComponent {
|
|
|
11864
11731
|
}
|
|
11865
11732
|
ngOnChanges(changes) {
|
|
11866
11733
|
if (changes['config']) {
|
|
11734
|
+
if (!changes['config'].isFirstChange())
|
|
11735
|
+
this.optionsService.initialize(this.config);
|
|
11867
11736
|
this.updateConfig();
|
|
11868
11737
|
this.normalizeInitialControlValueIfNeeded();
|
|
11869
11738
|
}
|
|
@@ -11929,15 +11798,23 @@ class QdInputComponent {
|
|
|
11929
11798
|
}
|
|
11930
11799
|
this._isUserTyped = true;
|
|
11931
11800
|
this._value = { ...this._value, value };
|
|
11801
|
+
this.loadOptionsForTypedValue(value);
|
|
11932
11802
|
this.emitValue();
|
|
11933
11803
|
this._onTouch();
|
|
11934
11804
|
}
|
|
11935
11805
|
handleOptionSelected(option) {
|
|
11936
11806
|
this._value = { ...this._value, value: option.i18n };
|
|
11807
|
+
this.popover?.close();
|
|
11937
11808
|
this.valueChange.emit(option.value);
|
|
11938
11809
|
this._onChange(option.value);
|
|
11939
11810
|
this._onTouch();
|
|
11940
11811
|
}
|
|
11812
|
+
onOptionsOpened() {
|
|
11813
|
+
this.isOptionsOpen = true;
|
|
11814
|
+
}
|
|
11815
|
+
onOptionsClosed() {
|
|
11816
|
+
this.isOptionsOpen = false;
|
|
11817
|
+
}
|
|
11941
11818
|
handleUnitChange(unit) {
|
|
11942
11819
|
this._value = { ...this._value, unit };
|
|
11943
11820
|
this.emitValue();
|
|
@@ -12004,11 +11881,27 @@ class QdInputComponent {
|
|
|
12004
11881
|
this.disabled = getDisabled(this.config) || !!this.control?.disabled;
|
|
12005
11882
|
this.clearable = !this.disabled && getClearable(this.config);
|
|
12006
11883
|
this.hasAutofocus = getHasAutofocus(this.config);
|
|
12007
|
-
this.hasOptions =
|
|
11884
|
+
this.hasOptions = this.optionsService.hasOptions();
|
|
12008
11885
|
}
|
|
12009
|
-
|
|
12010
|
-
this.
|
|
12011
|
-
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
|
+
}
|
|
12012
11905
|
}
|
|
12013
11906
|
emitValue() {
|
|
12014
11907
|
const emittable = this.inputType === 'number' ? this.numberInputService.parseValue(this._value.value) : this._value.value;
|
|
@@ -12053,7 +11946,7 @@ class QdInputComponent {
|
|
|
12053
11946
|
}
|
|
12054
11947
|
}
|
|
12055
11948
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12056
|
-
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: [
|
|
12057
11950
|
{
|
|
12058
11951
|
provide: NG_VALUE_ACCESSOR,
|
|
12059
11952
|
useExisting: QdInputComponent,
|
|
@@ -12061,14 +11954,14 @@ class QdInputComponent {
|
|
|
12061
11954
|
},
|
|
12062
11955
|
QdFormsActionEmitterService,
|
|
12063
11956
|
QdFormOptionsResolverRegistry,
|
|
11957
|
+
QdFormOptionsService,
|
|
11958
|
+
QdFormKeyboardService,
|
|
12064
11959
|
QdNumberInputService,
|
|
12065
|
-
// TODO: Remove when removing derived directive
|
|
12066
|
-
QdPopoverSizingService,
|
|
12067
11960
|
{
|
|
12068
11961
|
provide: QD_FOCUSABLE_TOKEN,
|
|
12069
11962
|
useExisting: QdInputComponent
|
|
12070
11963
|
}
|
|
12071
|
-
], 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" }] });
|
|
12072
11965
|
}
|
|
12073
11966
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputComponent, decorators: [{
|
|
12074
11967
|
type: Component,
|
|
@@ -12080,14 +11973,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
12080
11973
|
},
|
|
12081
11974
|
QdFormsActionEmitterService,
|
|
12082
11975
|
QdFormOptionsResolverRegistry,
|
|
11976
|
+
QdFormOptionsService,
|
|
11977
|
+
QdFormKeyboardService,
|
|
12083
11978
|
QdNumberInputService,
|
|
12084
|
-
// TODO: Remove when removing derived directive
|
|
12085
|
-
QdPopoverSizingService,
|
|
12086
11979
|
{
|
|
12087
11980
|
provide: QD_FOCUSABLE_TOKEN,
|
|
12088
11981
|
useExisting: QdInputComponent
|
|
12089
11982
|
}
|
|
12090
|
-
], 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"] }]
|
|
12091
11984
|
}], propDecorators: { formControlName: [{
|
|
12092
11985
|
type: Input
|
|
12093
11986
|
}], value: [{
|
|
@@ -12113,6 +12006,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
12113
12006
|
type: Output
|
|
12114
12007
|
}], optionsResolved: [{
|
|
12115
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']]
|
|
12116
12021
|
}], readonly: [{
|
|
12117
12022
|
type: HostBinding,
|
|
12118
12023
|
args: ['class.qd-input-readonly']
|
|
@@ -12155,6 +12060,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
12155
12060
|
}], inputElement: [{
|
|
12156
12061
|
type: ViewChild,
|
|
12157
12062
|
args: ['input']
|
|
12063
|
+
}], popover: [{
|
|
12064
|
+
type: ViewChild,
|
|
12065
|
+
args: [QdPopoverOnClickDirective]
|
|
12158
12066
|
}] } });
|
|
12159
12067
|
|
|
12160
12068
|
// @ts-strict-ignore
|
|
@@ -12559,7 +12467,7 @@ class QdDatepickerComponent {
|
|
|
12559
12467
|
useValue: true
|
|
12560
12468
|
},
|
|
12561
12469
|
QdFormsActionEmitterService
|
|
12562
|
-
], 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 });
|
|
12563
12471
|
}
|
|
12564
12472
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDatepickerComponent, decorators: [{
|
|
12565
12473
|
type: Component,
|
|
@@ -14490,7 +14398,7 @@ class QdMultiInputComponent {
|
|
|
14490
14398
|
},
|
|
14491
14399
|
QdMultiInputService,
|
|
14492
14400
|
QdFormsActionEmitterService
|
|
14493
|
-
], 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"], 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 });
|
|
14494
14402
|
}
|
|
14495
14403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMultiInputComponent, decorators: [{
|
|
14496
14404
|
type: Component,
|
|
@@ -14502,7 +14410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
14502
14410
|
},
|
|
14503
14411
|
QdMultiInputService,
|
|
14504
14412
|
QdFormsActionEmitterService
|
|
14505
|
-
], 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"] }]
|
|
14506
14414
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
14507
14415
|
type: Input
|
|
14508
14416
|
}], values: [{
|
|
@@ -16474,7 +16382,6 @@ class QdFormModule {
|
|
|
16474
16382
|
QdFormViewonlyComponent,
|
|
16475
16383
|
QdInputComponent,
|
|
16476
16384
|
QdInputUnitsComponent,
|
|
16477
|
-
QdInputOptionsDirective,
|
|
16478
16385
|
QdInputOptionsComponent,
|
|
16479
16386
|
QdMultiInputChipComponent,
|
|
16480
16387
|
QdMultiInputMenuComponent,
|
|
@@ -16573,7 +16480,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
16573
16480
|
QdFormViewonlyComponent,
|
|
16574
16481
|
QdInputComponent,
|
|
16575
16482
|
QdInputUnitsComponent,
|
|
16576
|
-
QdInputOptionsDirective,
|
|
16577
16483
|
QdInputOptionsComponent,
|
|
16578
16484
|
QdMultiInputChipComponent,
|
|
16579
16485
|
QdMultiInputMenuComponent,
|
|
@@ -17475,11 +17381,11 @@ class QdMenuButtonComponent {
|
|
|
17475
17381
|
return this.config?.actions?.some(action => !action.isHidden) ?? false;
|
|
17476
17382
|
}
|
|
17477
17383
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMenuButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17478
|
-
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 [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 [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" }] });
|
|
17479
17385
|
}
|
|
17480
17386
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMenuButtonComponent, decorators: [{
|
|
17481
17387
|
type: Component,
|
|
17482
|
-
args: [{ selector: 'button[qdMenuButton], a[qdMenuButton]', host: { '[attr.class]': 'classes' }, standalone: false, 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 [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 [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"] }]
|
|
17388
|
+
args: [{ selector: 'button[qdMenuButton], a[qdMenuButton]', host: { '[attr.class]': 'classes' }, standalone: false, 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"] }]
|
|
17483
17389
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
17484
17390
|
type: Input,
|
|
17485
17391
|
args: ['qdMenuButton']
|
|
@@ -18602,7 +18508,7 @@ class QdContactCardMenuComponent {
|
|
|
18602
18508
|
});
|
|
18603
18509
|
}
|
|
18604
18510
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdContactCardMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18605
|
-
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 });
|
|
18606
18512
|
}
|
|
18607
18513
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdContactCardMenuComponent, decorators: [{
|
|
18608
18514
|
type: Component,
|
|
@@ -21856,10 +21762,6 @@ class QdFilterItemSelectCategoryComponent {
|
|
|
21856
21762
|
dependsOn = [];
|
|
21857
21763
|
showSelectButton$;
|
|
21858
21764
|
itemsLoading$;
|
|
21859
|
-
positionStrategy = [
|
|
21860
|
-
{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: -1 },
|
|
21861
|
-
{ originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', weight: 0.8, offsetY: 1 }
|
|
21862
|
-
];
|
|
21863
21765
|
maxFlyoutHeight = 378;
|
|
21864
21766
|
_destroyRef = inject(DestroyRef);
|
|
21865
21767
|
frozenSelectedKeys = [];
|
|
@@ -21991,11 +21893,11 @@ class QdFilterItemSelectCategoryComponent {
|
|
|
21991
21893
|
}));
|
|
21992
21894
|
}
|
|
21993
21895
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21994
|
-
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 });
|
|
21995
21897
|
}
|
|
21996
21898
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, decorators: [{
|
|
21997
21899
|
type: Component,
|
|
21998
|
-
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"] }]
|
|
21999
21901
|
}], propDecorators: { filterId: [{
|
|
22000
21902
|
type: Input
|
|
22001
21903
|
}], categoryIndex: [{
|
|
@@ -25448,7 +25350,7 @@ class QdTableRowActionsSecondaryMenuComponent {
|
|
|
25448
25350
|
};
|
|
25449
25351
|
}
|
|
25450
25352
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowActionsSecondaryMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25451
|
-
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 });
|
|
25452
25354
|
}
|
|
25453
25355
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowActionsSecondaryMenuComponent, decorators: [{
|
|
25454
25356
|
type: Component,
|
|
@@ -27886,7 +27788,7 @@ class QdTreeRowActionsSecondaryMenuComponent {
|
|
|
27886
27788
|
.subscribe(({ payload }) => this._viewonly$.next(payload.isViewonly));
|
|
27887
27789
|
}
|
|
27888
27790
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTreeRowActionsSecondaryMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
27889
|
-
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 });
|
|
27890
27792
|
}
|
|
27891
27793
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTreeRowActionsSecondaryMenuComponent, decorators: [{
|
|
27892
27794
|
type: Component,
|
|
@@ -29867,7 +29769,7 @@ class QdPageObjectHeaderComponent {
|
|
|
29867
29769
|
});
|
|
29868
29770
|
}
|
|
29869
29771
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageObjectHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
29870
|
-
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"], 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 });
|
|
29772
|
+
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 });
|
|
29871
29773
|
}
|
|
29872
29774
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageObjectHeaderComponent, decorators: [{
|
|
29873
29775
|
type: Component,
|
|
@@ -32226,11 +32128,11 @@ class QdPanelSectionComponent {
|
|
|
32226
32128
|
});
|
|
32227
32129
|
}
|
|
32228
32130
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPanelSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
32229
|
-
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
|
|
32131
|
+
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 });
|
|
32230
32132
|
}
|
|
32231
32133
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPanelSectionComponent, decorators: [{
|
|
32232
32134
|
type: Component,
|
|
32233
|
-
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
|
|
32135
|
+
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"] }]
|
|
32234
32136
|
}], propDecorators: { config: [{
|
|
32235
32137
|
type: Input
|
|
32236
32138
|
}], actionOutput: [{
|
|
@@ -33921,7 +33823,7 @@ class QdCommentsComponent {
|
|
|
33921
33823
|
});
|
|
33922
33824
|
}
|
|
33923
33825
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCommentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
33924
|
-
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", "
|
|
33826
|
+
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 });
|
|
33925
33827
|
}
|
|
33926
33828
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCommentsComponent, decorators: [{
|
|
33927
33829
|
type: Component,
|
|
@@ -35089,7 +34991,7 @@ class QdQuickEditComponent {
|
|
|
35089
34991
|
this.controlContainer.control.valueChanges.pipe(tap(() => this.changeDetectorRef.detectChanges())).subscribe();
|
|
35090
34992
|
}
|
|
35091
34993
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdQuickEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
35092
|
-
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"], 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 });
|
|
34994
|
+
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 });
|
|
35093
34995
|
}
|
|
35094
34996
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdQuickEditComponent, decorators: [{
|
|
35095
34997
|
type: Component,
|