quang 20.1.5 → 20.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/quang-auth.mjs +18 -18
- package/fesm2022/quang-components-autocomplete.mjs +3 -3
- package/fesm2022/quang-components-checkbox.mjs +3 -3
- package/fesm2022/quang-components-date.mjs +3 -3
- package/fesm2022/quang-components-input.mjs +3 -3
- package/fesm2022/quang-components-paginator.mjs +13 -13
- package/fesm2022/quang-components-select.mjs +3 -3
- package/fesm2022/quang-components-shared.mjs +6 -6
- package/fesm2022/quang-components-table.mjs +3 -3
- package/fesm2022/quang-components-wysiwyg.mjs +3 -3
- package/fesm2022/quang-device.mjs +3 -3
- package/fesm2022/quang-loader.mjs +6 -6
- package/fesm2022/quang-overlay-modal.mjs +3 -3
- package/fesm2022/quang-overlay-popover.mjs +6 -6
- package/fesm2022/quang-overlay-shared.mjs +9 -9
- package/fesm2022/quang-overlay-toast.mjs +6 -6
- package/fesm2022/quang-overlay-tooltip.mjs +6 -6
- package/fesm2022/quang-translation.mjs +6 -6
- package/package.json +26 -26
package/fesm2022/quang-auth.mjs
CHANGED
|
@@ -173,10 +173,10 @@ class QuangAuthService {
|
|
|
173
173
|
hasAtLeastOneRole(roles) {
|
|
174
174
|
return roles.some((role) => this.roles().has(role));
|
|
175
175
|
}
|
|
176
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
177
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.
|
|
176
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangAuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
177
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangAuthService, providedIn: 'root' }); }
|
|
178
178
|
}
|
|
179
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
179
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangAuthService, decorators: [{
|
|
180
180
|
type: Injectable,
|
|
181
181
|
args: [{
|
|
182
182
|
providedIn: 'root',
|
|
@@ -247,10 +247,10 @@ class QuangHasAtLeastOneRoleDirective {
|
|
|
247
247
|
this.changeDetectorRef.markForCheck();
|
|
248
248
|
});
|
|
249
249
|
}
|
|
250
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
251
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.
|
|
250
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangHasAtLeastOneRoleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
251
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: QuangHasAtLeastOneRoleDirective, isStandalone: true, selector: "[quangHasAtLeastOneRole]", inputs: { targetRoles: { classPropertyName: "targetRoles", publicName: "quangHasAtLeastOneRole", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
252
252
|
}
|
|
253
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
253
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangHasAtLeastOneRoleDirective, decorators: [{
|
|
254
254
|
type: Directive,
|
|
255
255
|
args: [{
|
|
256
256
|
selector: '[quangHasAtLeastOneRole]',
|
|
@@ -292,10 +292,10 @@ class QuangHasEveryRoleDirective {
|
|
|
292
292
|
this.changeDetectorRef.markForCheck();
|
|
293
293
|
});
|
|
294
294
|
}
|
|
295
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
296
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.
|
|
295
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangHasEveryRoleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
296
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: QuangHasEveryRoleDirective, isStandalone: true, selector: "[quangHasEveryRole]", inputs: { targetRoles: { classPropertyName: "targetRoles", publicName: "quangHasEveryRole", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
297
297
|
}
|
|
298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangHasEveryRoleDirective, decorators: [{
|
|
299
299
|
type: Directive,
|
|
300
300
|
args: [{
|
|
301
301
|
selector: '[quangHasEveryRole]',
|
|
@@ -322,10 +322,10 @@ class QuangIsAuthenticatedDirective {
|
|
|
322
322
|
this.changeDetectorRef.markForCheck();
|
|
323
323
|
});
|
|
324
324
|
}
|
|
325
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
326
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.
|
|
325
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangIsAuthenticatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
326
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: QuangIsAuthenticatedDirective, isStandalone: true, selector: "[quangIsAuthenticated]", ngImport: i0 }); }
|
|
327
327
|
}
|
|
328
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
328
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangIsAuthenticatedDirective, decorators: [{
|
|
329
329
|
type: Directive,
|
|
330
330
|
args: [{
|
|
331
331
|
selector: '[quangIsAuthenticated]',
|
|
@@ -351,10 +351,10 @@ class QuangIsNotAuthenticatedDirective {
|
|
|
351
351
|
this.changeDetectorRef.markForCheck();
|
|
352
352
|
});
|
|
353
353
|
}
|
|
354
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
355
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.
|
|
354
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangIsNotAuthenticatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
355
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: QuangIsNotAuthenticatedDirective, isStandalone: true, selector: "[quangIsNotAuthenticated]", ngImport: i0 }); }
|
|
356
356
|
}
|
|
357
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
357
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangIsNotAuthenticatedDirective, decorators: [{
|
|
358
358
|
type: Directive,
|
|
359
359
|
args: [{
|
|
360
360
|
selector: '[quangIsNotAuthenticated]',
|
|
@@ -439,10 +439,10 @@ class MemoryStorage {
|
|
|
439
439
|
setItem(key, data) {
|
|
440
440
|
this.data.set(key, data);
|
|
441
441
|
}
|
|
442
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
443
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.
|
|
442
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MemoryStorage, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
443
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MemoryStorage }); }
|
|
444
444
|
}
|
|
445
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
445
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: MemoryStorage, decorators: [{
|
|
446
446
|
type: Injectable
|
|
447
447
|
}] });
|
|
448
448
|
function withMemoryStorage() {
|
|
@@ -257,8 +257,8 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
|
|
|
257
257
|
this._chipList.update((list) => [...list, chip.value]);
|
|
258
258
|
}
|
|
259
259
|
}
|
|
260
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
261
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.
|
|
260
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
261
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: QuangAutocompleteComponent, isStandalone: true, selector: "quang-autocomplete", inputs: { syncFormWithText: { classPropertyName: "syncFormWithText", publicName: "syncFormWithText", isSignal: true, isRequired: false, transformFunction: null }, optionListMaxHeight: { classPropertyName: "optionListMaxHeight", publicName: "optionListMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: true, isRequired: true, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, emitOnly: { classPropertyName: "emitOnly", publicName: "emitOnly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, chipMaxLength: { classPropertyName: "chipMaxLength", publicName: "chipMaxLength", isSignal: true, isRequired: false, transformFunction: null }, multiSelectDisplayMode: { classPropertyName: "multiSelectDisplayMode", publicName: "multiSelectDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, searchTextDebounce: { classPropertyName: "searchTextDebounce", publicName: "searchTextDebounce", isSignal: true, isRequired: false, transformFunction: null }, internalFilterOptions: { classPropertyName: "internalFilterOptions", publicName: "internalFilterOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOption: "selectedOption", searchTextChange: "searchTextChange" }, providers: [
|
|
262
262
|
{
|
|
263
263
|
provide: NG_VALUE_ACCESSOR,
|
|
264
264
|
useExisting: forwardRef(() => QuangAutocompleteComponent),
|
|
@@ -270,7 +270,7 @@ class QuangAutocompleteComponent extends QuangBaseComponent {
|
|
|
270
270
|
},
|
|
271
271
|
], viewQueries: [{ propertyName: "optionList", first: true, predicate: ["optionList"], descendants: true, isSignal: true }, { propertyName: "selectInput", first: true, predicate: ["selectInput"], descendants: true, isSignal: true }, { propertyName: "chipContainer", first: true, predicate: ["chipContainer"], descendants: true, isSignal: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n [ngStyle]=\"{ '--chip-max-length': chipMaxLength() ? chipMaxLength() + 'ch' : 'none' }\"\n #autocompleteContainer\n class=\"autocomplete-container\"\n>\n @if (componentLabel()) {\n <label\n [htmlFor]=\"componentId()\"\n class=\"form-label\"\n >\n {{ componentLabel() | transloco }}\n <span [hidden]=\"!_isRequired()\">*</span>\n </label>\n }\n <div\n [ngClass]=\"multiSelectDisplayMode() === 'horizontal' ? 'horizontal form-control' : ''\"\n #chipContainer\n class=\"container-wrap\"\n >\n @if (multiple() && _chipList().length > 0) {\n @for (chip of _chipList(); track $index) {\n @if (getDescription(chip)) {\n <div\n [quangTooltip]=\"chipMaxLength() ? getDescription(chip) : ''\"\n class=\"chip chip-hover\"\n >\n <p [ngClass]=\"{ 'm-0': isReadonly() || _isDisabled() }\">\n {{ getDescription(chip) }}\n </p>\n @if (!isReadonly() && !_isDisabled()) {\n <button\n [tabIndex]=\"$index + 1\"\n (click)=\"deleteChip(chip)\"\n class=\"btn btn-chip\"\n type=\"button\"\n >\n <svg\n class=\"ionicon\"\n fill=\"currentColor\"\n height=\"24\"\n viewBox=\"0 0 512 512\"\n width=\"24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M368 368L144 144M368 144L144 368\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"32\"\n />\n </svg>\n </button>\n }\n </div>\n }\n }\n }\n\n <input\n [attr.required]=\"getIsRequiredControl()\"\n [class.form-control]=\"multiSelectDisplayMode() !== 'horizontal'\"\n [class.is-invalid]=\"_showErrors()\"\n [class.is-valid]=\"_showSuccess()\"\n [disabled]=\"_isDisabled() || isReadonly()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [placeholder]=\"componentPlaceholder() | transloco\"\n [tabIndex]=\"componentTabIndex()\"\n [value]=\"_inputValue()\"\n (blur)=\"onBlurInput($event)\"\n (input)=\"onChangeInput($event)\"\n (mousedown)=\"showOptionVisibility()\"\n #selectInput\n autocomplete=\"off\"\n type=\"text\"\n />\n </div>\n @if (_showOptions()) {\n <quang-option-list\n [_isDisabled]=\"_isDisabled()\"\n [_value]=\"_value()\"\n [componentClass]=\"componentClass()\"\n [componentLabel]=\"componentLabel()\"\n [componentTabIndex]=\"componentTabIndex()\"\n [nullOption]=\"false\"\n [optionListMaxHeight]=\"optionListMaxHeight()\"\n [parentID]=\"componentId()\"\n [parentType]=\"ParentType\"\n [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n [selectButtonRef]=\"autocompleteContainer\"\n [selectOptions]=\"_filteredOptions()\"\n [translateValue]=\"translateValue()\"\n (blurHandler)=\"onBlurOptionList($event)\"\n (changedHandler)=\"onValueChange($event)\"\n #optionList\n selectionMode=\"single\"\n />\n }\n <div class=\"valid-feedback\">\n {{ successMessage() | transloco }}\n </div>\n <div class=\"invalid-feedback\">\n {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n </div>\n @if (helpMessage()) {\n <small\n [hidden]=\"_showSuccess() || _showErrors()\"\n aria-live=\"assertive\"\n class=\"form-text text-muted\"\n >\n {{ helpMessage() | transloco }}\n </small>\n }\n</div>\n", styles: [":host{display:block;--chip-max-length: none}.autocomplete-container{margin-bottom:1rem;position:relative}.chip:has(.btn-chip:disabled):hover{filter:unset;cursor:unset}.container-wrap{display:flex;flex-wrap:wrap;gap:.5rem}.container-wrap.horizontal{display:flex}.container-wrap.horizontal .chip-container{max-width:70%;margin-bottom:0;margin-left:.5rem;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;position:absolute;align-items:center}.container-wrap.horizontal .chip-container .chip{white-space:nowrap}.container-wrap.horizontal input{min-width:30%;flex:1 1 0;width:auto;border:none}.container-wrap.horizontal input:focus-visible{outline:none}.chip{display:flex;justify-content:space-between;align-items:center;padding:.25rem .5rem;border-radius:16px;color:var(--bs-btn-color);background-color:rgba(var(--bs-primary-rgb),.1);border-width:1px;border-style:solid;border-color:var(--bs-primary-border-subtle);height:2rem}.chip p{margin:0;max-width:var(--chip-max-length);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.chip .btn-chip{text-align:end;padding:0;min-width:unset}.chip .btn-chip:hover{opacity:80%}.chip .btn-chip:active{border-color:transparent}.chip .btn-chip svg{color:var(--bs-primary);vertical-align:sub}.chip:has(.btn-chip:focus-visible){border-width:2px;filter:brightness(80%)}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: QuangOptionListComponent, selector: "quang-option-list", inputs: ["selectionMode", "optionListMaxHeight", "selectOptions", "selectButtonRef", "_value", "_isDisabled", "componentClass", "componentLabel", "componentTabIndex", "translateValue", "nullOption", "scrollBehaviorOnOpen", "parentType", "parentID"], outputs: ["changedHandler", "blurHandler"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: QuangTooltipDirective, selector: "[quangTooltip]", inputs: ["quangTooltip", "showMethod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
272
272
|
}
|
|
273
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
273
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangAutocompleteComponent, decorators: [{
|
|
274
274
|
type: Component,
|
|
275
275
|
args: [{ selector: 'quang-autocomplete', imports: [TranslocoPipe, NgClass, QuangOptionListComponent, NgStyle, QuangTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
276
276
|
{
|
|
@@ -25,8 +25,8 @@ class QuangCheckboxComponent extends QuangBaseComponent {
|
|
|
25
25
|
const inputElement = $event.target;
|
|
26
26
|
this.onChangedHandler(inputElement.checked);
|
|
27
27
|
}
|
|
28
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
29
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.
|
|
28
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
29
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: QuangCheckboxComponent, isStandalone: true, selector: "quang-checkbox", inputs: { labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, checkType: { classPropertyName: "checkType", publicName: "checkType", isSignal: true, isRequired: true, transformFunction: null }, removeMargin: { classPropertyName: "removeMargin", publicName: "removeMargin", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
30
30
|
{
|
|
31
31
|
provide: NG_VALUE_ACCESSOR,
|
|
32
32
|
useExisting: forwardRef(() => QuangCheckboxComponent),
|
|
@@ -34,7 +34,7 @@ class QuangCheckboxComponent extends QuangBaseComponent {
|
|
|
34
34
|
},
|
|
35
35
|
], usesInheritance: true, ngImport: i0, template: "<div\n [class.form-check-reverse]=\"labelPosition() === 'left' && checkType() === 'checkbox'\"\n [class.form-switch]=\"checkType() === 'toggle'\"\n [class.label-bottom]=\"labelPosition() === 'bottom'\"\n [class.label-left]=\"labelPosition() === 'left' && checkType() === 'toggle'\"\n [class.label-right]=\"labelPosition() === 'right' && checkType() === 'toggle'\"\n [class.label-top]=\"labelPosition() === 'top'\"\n [class.toggle-wrapper]=\"checkType() === 'toggle'\"\n [ngClass]=\"{ 'mb-3': !removeMargin(), 'form-check': !removeMargin() }\"\n>\n @if (componentLabel()) {\n <label\n [htmlFor]=\"componentId()\"\n [ngClass]=\"{ 'cursor-pointer': !_isDisabled() }\"\n class=\"form-label\"\n >\n {{ componentLabel() | transloco }}\n <span [hidden]=\"!_isRequired()\">*</span>\n </label>\n }\n <input\n [attr.required]=\"getIsRequiredControl()\"\n [attr.role]=\"checkType() === 'checkbox' ? 'checkbox' : 'switch'\"\n [checked]=\"_value()\"\n [class.is-invalid]=\"_showErrors()\"\n [class.is-valid]=\"_showSuccess()\"\n [disabled]=\"_isDisabled()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [placeholder]=\"componentPlaceholder() | transloco\"\n [readOnly]=\"isReadonly()\"\n [tabIndex]=\"componentTabIndex()\"\n [value]=\"_value()\"\n (blur)=\"onBlurHandler()\"\n (input)=\"onChangedEventHandler($event)\"\n class=\"form-check-input {{ _isDisabled() ? '' : 'cursor-pointer' }}\"\n type=\"checkbox\"\n />\n <div class=\"valid-feedback\">\n {{ successMessage() | transloco }}\n </div>\n <div class=\"invalid-feedback\">\n {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n </div>\n @if (helpMessage()) {\n <small\n [hidden]=\"_showSuccess() || _showErrors()\"\n aria-live=\"assertive\"\n class=\"form-text text-muted\"\n >\n {{ helpMessage() | transloco }}\n </small>\n }\n</div>\n", styles: [":host{display:block}.label-top{display:flex;flex-direction:column}.label-top input{margin:unset;float:unset}.label-bottom{display:flex;flex-direction:column-reverse}.label-bottom input{margin:unset;float:unset}.label-right{flex-direction:row-reverse;justify-content:start}.label-right label{margin-left:.5rem;margin-bottom:0;align-self:center}.label-left{flex-direction:row}.label-left label{margin-bottom:0;align-self:center}.toggle-wrapper{display:flex;padding-left:unset}.toggle-wrapper label{display:block}.toggle-wrapper input{margin-left:unset;width:3em;height:1.5em}.direction-row{flex-direction:row}.direction-row .form-label{margin-right:.5rem}.direction-reverse-row{flex-direction:row-reverse;justify-content:start}.direction-reverse-row input{margin-right:.5rem}.direction-column{flex-direction:column}.cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
36
36
|
}
|
|
37
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
37
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangCheckboxComponent, decorators: [{
|
|
38
38
|
type: Component,
|
|
39
39
|
args: [{ selector: 'quang-checkbox', providers: [
|
|
40
40
|
{
|
|
@@ -374,10 +374,10 @@ class QuangDateComponent extends QuangBaseComponent {
|
|
|
374
374
|
}
|
|
375
375
|
}
|
|
376
376
|
}
|
|
377
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
378
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.
|
|
377
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
378
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: QuangDateComponent, isStandalone: true, selector: "quang-date", inputs: { dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, activeLanguageOverride: { classPropertyName: "activeLanguageOverride", publicName: "activeLanguageOverride", isSignal: true, isRequired: false, transformFunction: null }, timepicker: { classPropertyName: "timepicker", publicName: "timepicker", isSignal: true, isRequired: false, transformFunction: null }, invalidDateMessage: { classPropertyName: "invalidDateMessage", publicName: "invalidDateMessage", isSignal: true, isRequired: false, transformFunction: null }, showOnlyTimepicker: { classPropertyName: "showOnlyTimepicker", publicName: "showOnlyTimepicker", isSignal: true, isRequired: false, transformFunction: null }, minHour: { classPropertyName: "minHour", publicName: "minHour", isSignal: true, isRequired: false, transformFunction: null }, maxHour: { classPropertyName: "maxHour", publicName: "maxHour", isSignal: true, isRequired: false, transformFunction: null }, minMinute: { classPropertyName: "minMinute", publicName: "minMinute", isSignal: true, isRequired: false, transformFunction: null }, maxMinute: { classPropertyName: "maxMinute", publicName: "maxMinute", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, showInline: { classPropertyName: "showInline", publicName: "showInline", isSignal: true, isRequired: false, transformFunction: null }, calendarClasses: { classPropertyName: "calendarClasses", publicName: "calendarClasses", isSignal: true, isRequired: false, transformFunction: null }, buttonClass: { classPropertyName: "buttonClass", publicName: "buttonClass", isSignal: true, isRequired: false, transformFunction: null }, datepickerOptions: { classPropertyName: "datepickerOptions", publicName: "datepickerOptions", isSignal: true, isRequired: false, transformFunction: null }, multipleDatesSeparator: { classPropertyName: "multipleDatesSeparator", publicName: "multipleDatesSeparator", isSignal: true, isRequired: false, transformFunction: null }, rangeSelection: { classPropertyName: "rangeSelection", publicName: "rangeSelection", isSignal: true, isRequired: false, transformFunction: null }, searchTextDebounce: { classPropertyName: "searchTextDebounce", publicName: "searchTextDebounce", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => QuangDateComponent), multi: true }], viewQueries: [{ propertyName: "_inputForDate", first: true, predicate: ["inputForDate"], descendants: true, isSignal: true }, { propertyName: "contentTemplate", first: true, predicate: ["calendarButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mb-3\">\n @if (componentLabel()) {\n <label\n [htmlFor]=\"componentId()\"\n class=\"form-label\"\n >\n {{ componentLabel() | transloco }}\n <span [hidden]=\"!_isRequired()\">*</span>\n </label>\n }\n <div\n [class.is-invalid]=\"_showErrors()\"\n [class.is-valid]=\"_showSuccess()\"\n class=\"input-date-container\"\n >\n <input\n [attr.required]=\"getIsRequiredControl()\"\n [autocomplete]=\"'off'\"\n [class.is-invalid]=\"_showErrors()\"\n [class.is-valid]=\"_showSuccess()\"\n [class.with-button-calendar]=\"!hasNoContent()\"\n [disabled]=\"_isDisabled()\"\n [hidden]=\"showInline()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [placeholder]=\"componentPlaceholder() | transloco\"\n [readOnly]=\"isReadonly()\"\n [tabIndex]=\"componentTabIndex()\"\n [value]=\"inputValueString()\"\n (blur)=\"onBlurHandler()\"\n (focus)=\"interceptInputInteraction($event)\"\n (input)=\"onChangeText($event)\"\n (mouseenter)=\"isMouseInsideCalendar.set(true)\"\n (mouseleave)=\"isMouseInsideCalendar.set(false)\"\n (search)=\"onCancel()\"\n #inputForDate\n class=\"form-control\"\n type=\"search\"\n />\n <button\n [attr.required]=\"getIsRequiredControl()\"\n [class.border-danger]=\"_showErrors()\"\n [class.border-success]=\"_showSuccess()\"\n [hidden]=\"showInline() || hasNoContent() || _isDisabled()\"\n [ngClass]=\"buttonClass()\"\n (click)=\"_ngControl()?.disabled ? null : openDatePicker()\"\n #calendarButton\n aria-label=\"calendar-button\"\n class=\"btn btn-outline-secondary btn-outline-calendar\"\n type=\"button\"\n >\n <ng-content></ng-content>\n </button>\n </div>\n <div class=\"valid-feedback\">\n {{ successMessage() | transloco }}\n </div>\n <div class=\"invalid-feedback\">\n {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n </div>\n @if (helpMessage()) {\n <small\n [hidden]=\"_showSuccess() || _showErrors()\"\n aria-live=\"assertive\"\n class=\"form-text text-muted\"\n >\n {{ helpMessage() | transloco }}\n </small>\n }\n</div>\n", styles: ["input::-webkit-search-cancel-button{-webkit-appearance:none;height:.75rem;width:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 1024 1024' width='12' height='12' fill='currentColor'%3E%3Cpath d='M9 1018q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5l459-459 459 459q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5 9-9 9-22 0-13-9-22l-459-459 459-459q9-9 9-22 0-13-9-22-9-9-22-9-13 0-22 9l-459 459-459-459q-9-9-22-9-13 0-22 9-9 9-9 22 0 13 9 22l459 459-459 459q-9 9-9 22 0 13 9 22l0 0z'/%3E%3C/svg%3E%0A\");cursor:pointer}::ng-deep .air-datepicker{z-index:99999}::ng-deep .air-datepicker .air-datepicker--pointer{display:none}::ng-deep .air-datepicker .air-datepicker-time{display:block}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--current{display:none}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders{display:flex;justify-content:center;padding-top:.25rem;gap:1rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row{width:100%;position:relative}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row:first-child:after{content:\":\";display:inline;font-size:1rem;position:absolute;right:-.65rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row input{width:100%;text-align:center;padding:0;padding-left:1rem;border-color:var(--bs-border-color)}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row .form-control:focus{box-shadow:unset!important}::ng-deep .air-datepicker.-inline-.-only-timepicker-{border:0}::ng-deep .air-datepicker.-inline-.-only-timepicker- .air-datepicker--time{border:0}:host{display:block}:host .input-date-container{display:flex}:host input{flex:1}:host input.with-button-calendar{border-top-right-radius:0;border-bottom-right-radius:0}:host input:disabled{border-radius:var(--bs-border-radius)}:host .btn-outline-calendar{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;min-width:unset;display:flex;border-color:var(--bs-border-color)}:host .border-danger{border-color:var(--bs-form-invalid-border-color)}:host .border-success{border-color:var(--bs-form-valid-border-color)}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
379
379
|
}
|
|
380
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
380
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangDateComponent, decorators: [{
|
|
381
381
|
type: Component,
|
|
382
382
|
args: [{ selector: 'quang-date', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => QuangDateComponent), multi: true }], imports: [TranslocoPipe, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-3\">\n @if (componentLabel()) {\n <label\n [htmlFor]=\"componentId()\"\n class=\"form-label\"\n >\n {{ componentLabel() | transloco }}\n <span [hidden]=\"!_isRequired()\">*</span>\n </label>\n }\n <div\n [class.is-invalid]=\"_showErrors()\"\n [class.is-valid]=\"_showSuccess()\"\n class=\"input-date-container\"\n >\n <input\n [attr.required]=\"getIsRequiredControl()\"\n [autocomplete]=\"'off'\"\n [class.is-invalid]=\"_showErrors()\"\n [class.is-valid]=\"_showSuccess()\"\n [class.with-button-calendar]=\"!hasNoContent()\"\n [disabled]=\"_isDisabled()\"\n [hidden]=\"showInline()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [placeholder]=\"componentPlaceholder() | transloco\"\n [readOnly]=\"isReadonly()\"\n [tabIndex]=\"componentTabIndex()\"\n [value]=\"inputValueString()\"\n (blur)=\"onBlurHandler()\"\n (focus)=\"interceptInputInteraction($event)\"\n (input)=\"onChangeText($event)\"\n (mouseenter)=\"isMouseInsideCalendar.set(true)\"\n (mouseleave)=\"isMouseInsideCalendar.set(false)\"\n (search)=\"onCancel()\"\n #inputForDate\n class=\"form-control\"\n type=\"search\"\n />\n <button\n [attr.required]=\"getIsRequiredControl()\"\n [class.border-danger]=\"_showErrors()\"\n [class.border-success]=\"_showSuccess()\"\n [hidden]=\"showInline() || hasNoContent() || _isDisabled()\"\n [ngClass]=\"buttonClass()\"\n (click)=\"_ngControl()?.disabled ? null : openDatePicker()\"\n #calendarButton\n aria-label=\"calendar-button\"\n class=\"btn btn-outline-secondary btn-outline-calendar\"\n type=\"button\"\n >\n <ng-content></ng-content>\n </button>\n </div>\n <div class=\"valid-feedback\">\n {{ successMessage() | transloco }}\n </div>\n <div class=\"invalid-feedback\">\n {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n </div>\n @if (helpMessage()) {\n <small\n [hidden]=\"_showSuccess() || _showErrors()\"\n aria-live=\"assertive\"\n class=\"form-text text-muted\"\n >\n {{ helpMessage() | transloco }}\n </small>\n }\n</div>\n", styles: ["input::-webkit-search-cancel-button{-webkit-appearance:none;height:.75rem;width:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 1024 1024' width='12' height='12' fill='currentColor'%3E%3Cpath d='M9 1018q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5l459-459 459 459q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5 9-9 9-22 0-13-9-22l-459-459 459-459q9-9 9-22 0-13-9-22-9-9-22-9-13 0-22 9l-459 459-459-459q-9-9-22-9-13 0-22 9-9 9-9 22 0 13 9 22l459 459-459 459q-9 9-9 22 0 13 9 22l0 0z'/%3E%3C/svg%3E%0A\");cursor:pointer}::ng-deep .air-datepicker{z-index:99999}::ng-deep .air-datepicker .air-datepicker--pointer{display:none}::ng-deep .air-datepicker .air-datepicker-time{display:block}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--current{display:none}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders{display:flex;justify-content:center;padding-top:.25rem;gap:1rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row{width:100%;position:relative}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row:first-child:after{content:\":\";display:inline;font-size:1rem;position:absolute;right:-.65rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row input{width:100%;text-align:center;padding:0;padding-left:1rem;border-color:var(--bs-border-color)}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row .form-control:focus{box-shadow:unset!important}::ng-deep .air-datepicker.-inline-.-only-timepicker-{border:0}::ng-deep .air-datepicker.-inline-.-only-timepicker- .air-datepicker--time{border:0}:host{display:block}:host .input-date-container{display:flex}:host input{flex:1}:host input.with-button-calendar{border-top-right-radius:0;border-bottom-right-radius:0}:host input:disabled{border-radius:var(--bs-border-radius)}:host .btn-outline-calendar{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;min-width:unset;display:flex;border-color:var(--bs-border-color)}:host .border-danger{border-color:var(--bs-form-invalid-border-color)}:host .border-success{border-color:var(--bs-form-valid-border-color)}\n"] }]
|
|
383
383
|
}], ctorParameters: () => [], propDecorators: { _quangTranslationService: [{
|
|
@@ -26,8 +26,8 @@ class QuangInputComponent extends QuangBaseComponent {
|
|
|
26
26
|
this.setupFormControl();
|
|
27
27
|
});
|
|
28
28
|
}
|
|
29
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
30
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.
|
|
29
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: QuangInputComponent, isStandalone: true, selector: "quang-input", inputs: { componentType: { classPropertyName: "componentType", publicName: "componentType", isSignal: true, isRequired: true, transformFunction: null }, maxLengthText: { classPropertyName: "maxLengthText", publicName: "maxLengthText", isSignal: true, isRequired: false, transformFunction: null }, minLengthText: { classPropertyName: "minLengthText", publicName: "minLengthText", isSignal: true, isRequired: false, transformFunction: null }, minNumber: { classPropertyName: "minNumber", publicName: "minNumber", isSignal: true, isRequired: false, transformFunction: null }, maxNumber: { classPropertyName: "maxNumber", publicName: "maxNumber", isSignal: true, isRequired: false, transformFunction: null }, componentStep: { classPropertyName: "componentStep", publicName: "componentStep", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
31
31
|
{
|
|
32
32
|
provide: NG_VALUE_ACCESSOR,
|
|
33
33
|
useExisting: forwardRef(() => QuangInputComponent),
|
|
@@ -35,7 +35,7 @@ class QuangInputComponent extends QuangBaseComponent {
|
|
|
35
35
|
},
|
|
36
36
|
], usesInheritance: true, ngImport: i0, template: "@if (componentType()) {\n <div class=\"mb-3\">\n @if (componentLabel()) {\n <label\n [htmlFor]=\"componentId()\"\n class=\"form-label\"\n >\n {{ componentLabel() | transloco }}\n <span [hidden]=\"!_isRequired()\">*</span>\n </label>\n }\n @if (componentType() !== 'textarea') {\n <input\n [attr.maxLength]=\"maxLengthText()\"\n [attr.minLength]=\"minLengthText()\"\n [attr.required]=\"getIsRequiredControl()\"\n [class.is-invalid]=\"_showErrors()\"\n [class.is-valid]=\"_showSuccess()\"\n [disabled]=\"_isDisabled()\"\n [id]=\"componentId()\"\n [max]=\"maxNumber()\"\n [min]=\"minNumber()\"\n [ngClass]=\"componentClass()\"\n [placeholder]=\"componentPlaceholder() | transloco\"\n [readOnly]=\"isReadonly()\"\n [step]=\"componentStep()\"\n [tabIndex]=\"componentTabIndex()\"\n [type]=\"componentType()\"\n [value]=\"_value()\"\n (blur)=\"onBlurHandler()\"\n (input)=\"onChangedEventHandler($event)\"\n autocomplete=\"off\"\n class=\"form-control\"\n />\n }\n @if (componentType() === 'textarea') {\n <textarea\n [attr.maxLength]=\"maxLengthText()\"\n [attr.minLength]=\"minLengthText()\"\n [class.is-invalid]=\"_showErrors()\"\n [class.is-valid]=\"_showSuccess()\"\n [class.no-resize]=\"!resizable()\"\n [disabled]=\"_isDisabled()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [placeholder]=\"componentPlaceholder() | transloco\"\n [readOnly]=\"isReadonly()\"\n [tabIndex]=\"componentTabIndex()\"\n [value]=\"_value()\"\n (blur)=\"onBlurHandler()\"\n (input)=\"onChangedEventHandler($event)\"\n class=\"form-control\"\n ></textarea>\n }\n <div class=\"valid-feedback\">\n {{ successMessage() | transloco }}\n </div>\n <div class=\"invalid-feedback\">\n {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n </div>\n @if (helpMessage()) {\n <small\n [hidden]=\"_showSuccess() || _showErrors()\"\n aria-live=\"assertive\"\n class=\"form-text text-muted\"\n >\n {{ helpMessage() | transloco }}\n </small>\n }\n </div>\n}\n", styles: ["input::-webkit-search-cancel-button{-webkit-appearance:none;height:.75rem;width:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 1024 1024' width='12' height='12' fill='currentColor'%3E%3Cpath d='M9 1018q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5l459-459 459 459q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5 9-9 9-22 0-13-9-22l-459-459 459-459q9-9 9-22 0-13-9-22-9-9-22-9-13 0-22 9l-459 459-459-459q-9-9-22-9-13 0-22 9-9 9-9 22 0 13 9 22l459 459-459 459q-9 9-9 22 0 13 9 22l0 0z'/%3E%3C/svg%3E%0A\");cursor:pointer}:host{display:block}.no-resize{resize:none}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
37
37
|
}
|
|
38
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
38
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangInputComponent, decorators: [{
|
|
39
39
|
type: Component,
|
|
40
40
|
args: [{ selector: 'quang-input', providers: [
|
|
41
41
|
{
|
|
@@ -42,10 +42,10 @@ class QuangPaginatorLanguageService extends PaginatorIntl {
|
|
|
42
42
|
this.changes.update((x) => x);
|
|
43
43
|
});
|
|
44
44
|
}
|
|
45
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
46
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.
|
|
45
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangPaginatorLanguageService, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
46
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangPaginatorLanguageService, providedIn: 'root' }); }
|
|
47
47
|
}
|
|
48
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
48
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangPaginatorLanguageService, decorators: [{
|
|
49
49
|
type: Injectable,
|
|
50
50
|
args: [{
|
|
51
51
|
providedIn: 'root',
|
|
@@ -114,20 +114,20 @@ class QuangPaginatorComponent {
|
|
|
114
114
|
this._currentPage.set(this._totalPages());
|
|
115
115
|
this.changePage.emit(this._currentPage());
|
|
116
116
|
}
|
|
117
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
118
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.
|
|
117
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
118
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: QuangPaginatorComponent, isStandalone: true, selector: "quang-paginator", inputs: { componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: false, transformFunction: null }, componentTabIndex: { classPropertyName: "componentTabIndex", publicName: "componentTabIndex", isSignal: true, isRequired: false, transformFunction: null }, componentClass: { classPropertyName: "componentClass", publicName: "componentClass", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: true, transformFunction: null }, sizeList: { classPropertyName: "sizeList", publicName: "sizeList", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, showTotalElementsCount: { classPropertyName: "showTotalElementsCount", publicName: "showTotalElementsCount", isSignal: true, isRequired: false, transformFunction: null }, totalItemsText: { classPropertyName: "totalItemsText", publicName: "totalItemsText", isSignal: true, isRequired: false, transformFunction: null }, sizeText: { classPropertyName: "sizeText", publicName: "sizeText", isSignal: true, isRequired: false, transformFunction: null }, pageRangeText: { classPropertyName: "pageRangeText", publicName: "pageRangeText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changePage: "changePage", changeSize: "changeSize" }, ngImport: i0, template: "<div\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n class=\"paginatorContainer\"\n>\n @if (showTotalElementsCount()) {\n <div class=\"me-3 pagination-label\">{{ totalItemsText() | transloco }} {{ totalItems() }}</div>\n }\n @if (sizeList().length > 0) {\n <div class=\"me-3\">\n <label\n class=\"form-label pagination-label mb-0 text-center\"\n for=\"pageSize\"\n >\n {{ sizeText() | transloco }}\n </label>\n <select\n [id]=\"componentId() + '-quang-page-size'\"\n [tabIndex]=\"componentTabIndex()\"\n (change)=\"onChangeSize($event)\"\n #input\n autocomplete=\"off\"\n class=\"form-select page-size\"\n id=\"pageSize\"\n name=\"pageSize\"\n >\n @for (pageSize of sizeList(); track pageSize) {\n <option [selected]=\"pageSize === this._pageSize()\">\n {{ pageSize }}\n </option>\n }\n </select>\n </div>\n }\n <div class=\"pagination-label text-center\">\n {{ pageRangeText() | transloco: { page: page(), amountPages: _totalPages() } }}\n </div>\n <div class=\"pagination\">\n <ul>\n <li>\n <button\n [disabled]=\"_currentPage() <= 1\"\n (click)=\"goToFirstPage()\"\n class=\"page-link\"\n type=\"button\"\n >\n <svg\n fill=\"currentColor\"\n height=\"24\"\n stroke=\"currentColor\"\n viewBox=\"0 -960 960 960\"\n width=\"24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M240-240v-480h80v480h-80Zm440 0L440-480l240-240 56 56-184 184 184 184-56 56Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n </button>\n </li>\n <li>\n <button\n [disabled]=\"_currentPage() <= 1\"\n (click)=\"goToPreviousPage()\"\n class=\"page-link\"\n type=\"button\"\n >\n <svg\n fill=\"currentColor\"\n height=\"24\"\n stroke=\"currentColor\"\n viewBox=\"0 -960 960 960\"\n width=\"24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n </button>\n </li>\n <li>\n <button\n [disabled]=\"_currentPage() >= _totalPages()\"\n (click)=\"goToNextPage()\"\n class=\"page-link\"\n type=\"button\"\n >\n <svg\n fill=\"currentColor\"\n height=\"24\"\n stroke=\"currentColor\"\n viewBox=\"0 -960 960 960\"\n width=\"24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n </button>\n </li>\n <li>\n <button\n [disabled]=\"_currentPage() >= _totalPages()\"\n (click)=\"goToLastPage()\"\n class=\"page-link\"\n type=\"button\"\n >\n <svg\n fill=\"currentColor\"\n height=\"24\"\n stroke=\"currentColor\"\n viewBox=\"0 -960 960 960\"\n width=\"24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"m280-240-56-56 184-184-184-184 56-56 240 240-240 240Zm360 0v-480h80v480h-80Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n </button>\n </li>\n </ul>\n </div>\n</div>\n\n<ng-template\n #nextTemplate\n let-currentPage=\"currentPage\"\n let-disabled=\"disabled\"\n>\n <svg\n fill=\"currentColor\"\n fill=\"currentColor\"\n height=\"48\"\n stroke=\"currentColor\"\n viewBox=\"0 -960 960 960\"\n width=\"48\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M530-481 332-679l43-43 241 241-241 241-43-43 198-198Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n</ng-template>\n\n<ng-template\n #prevTemplate\n let-currentPage=\"currentPage\"\n let-disabled=\"disabled\"\n>\n <svg\n fill=\"currentColor\"\n fill=\"currentColor\"\n height=\"48\"\n stroke=\"currentColor\"\n viewBox=\"0 -960 960 960\"\n width=\"48\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M561-240 320-481l241-241 43 43-198 198 198 198-43 43Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n</ng-template>\n\n<ng-template\n #lastTemplate\n let-currentPage=\"currentPage\"\n let-disabled=\"disabled\"\n>\n <svg\n fill=\"currentColor\"\n fill=\"currentColor\"\n height=\"48\"\n stroke=\"currentColor\"\n viewBox=\"0 -960 960 960\"\n width=\"48\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"m272-245-43-43 192-192-192-192 43-43 235 235-235 235Zm388 5v-480h60v480h-60Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n</ng-template>\n\n<ng-template\n #firstTemplate\n let-currentPage=\"currentPage\"\n let-disabled=\"disabled\"\n>\n <svg\n fill=\"currentColor\"\n fill=\"currentColor\"\n height=\"48\"\n stroke=\"currentColor\"\n viewBox=\"0 -960 960 960\"\n width=\"48\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M240-240v-480h60v480h-60Zm447-3L453-477l234-234 43 43-191 191 191 191-43 43Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n</ng-template>\n", styles: [":host{display:block}.paginatorContainer{display:flex;align-items:flex-end;flex-wrap:wrap}@media (min-width: 576px){.paginatorContainer{flex-wrap:nowrap;order:2}}.paginatorContainer .page-size{display:inline-block;margin-bottom:.5rem;order:2;min-width:80px}@media (min-width: 576px){.paginatorContainer .page-size{order:1}}.pagination{margin-bottom:.5rem}.pagination ul{padding:0;margin:0;display:flex}.pagination ul li{list-style-type:none}.pagination ul li.pagination-page{display:none}.pagination ul li .page-link{border-radius:50%;padding:.375rem;border:none;gap:1.5rem;padding:.25rem;background-color:transparent;color:var(--bs-body-color)}.pagination ul li .page-link:disabled svg path{opacity:40%}.pagination ul li .page-link:focus{box-shadow:unset;background-color:unset}.pagination ul li .page-link svg{vertical-align:bottom;width:30px;height:30px}.pagination-label{margin:0;margin-bottom:1rem;font-size:.75rem}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
119
119
|
}
|
|
120
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
120
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangPaginatorComponent, decorators: [{
|
|
121
121
|
type: Component,
|
|
122
122
|
args: [{ selector: 'quang-paginator', imports: [TranslocoPipe, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n class=\"paginatorContainer\"\n>\n @if (showTotalElementsCount()) {\n <div class=\"me-3 pagination-label\">{{ totalItemsText() | transloco }} {{ totalItems() }}</div>\n }\n @if (sizeList().length > 0) {\n <div class=\"me-3\">\n <label\n class=\"form-label pagination-label mb-0 text-center\"\n for=\"pageSize\"\n >\n {{ sizeText() | transloco }}\n </label>\n <select\n [id]=\"componentId() + '-quang-page-size'\"\n [tabIndex]=\"componentTabIndex()\"\n (change)=\"onChangeSize($event)\"\n #input\n autocomplete=\"off\"\n class=\"form-select page-size\"\n id=\"pageSize\"\n name=\"pageSize\"\n >\n @for (pageSize of sizeList(); track pageSize) {\n <option [selected]=\"pageSize === this._pageSize()\">\n {{ pageSize }}\n </option>\n }\n </select>\n </div>\n }\n <div class=\"pagination-label text-center\">\n {{ pageRangeText() | transloco: { page: page(), amountPages: _totalPages() } }}\n </div>\n <div class=\"pagination\">\n <ul>\n <li>\n <button\n [disabled]=\"_currentPage() <= 1\"\n (click)=\"goToFirstPage()\"\n class=\"page-link\"\n type=\"button\"\n >\n <svg\n fill=\"currentColor\"\n height=\"24\"\n stroke=\"currentColor\"\n viewBox=\"0 -960 960 960\"\n width=\"24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M240-240v-480h80v480h-80Zm440 0L440-480l240-240 56 56-184 184 184 184-56 56Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n </button>\n </li>\n <li>\n <button\n [disabled]=\"_currentPage() <= 1\"\n (click)=\"goToPreviousPage()\"\n class=\"page-link\"\n type=\"button\"\n >\n <svg\n fill=\"currentColor\"\n height=\"24\"\n stroke=\"currentColor\"\n viewBox=\"0 -960 960 960\"\n width=\"24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n </button>\n </li>\n <li>\n <button\n [disabled]=\"_currentPage() >= _totalPages()\"\n (click)=\"goToNextPage()\"\n class=\"page-link\"\n type=\"button\"\n >\n <svg\n fill=\"currentColor\"\n height=\"24\"\n stroke=\"currentColor\"\n viewBox=\"0 -960 960 960\"\n width=\"24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n </button>\n </li>\n <li>\n <button\n [disabled]=\"_currentPage() >= _totalPages()\"\n (click)=\"goToLastPage()\"\n class=\"page-link\"\n type=\"button\"\n >\n <svg\n fill=\"currentColor\"\n height=\"24\"\n stroke=\"currentColor\"\n viewBox=\"0 -960 960 960\"\n width=\"24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"m280-240-56-56 184-184-184-184 56-56 240 240-240 240Zm360 0v-480h80v480h-80Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n </button>\n </li>\n </ul>\n </div>\n</div>\n\n<ng-template\n #nextTemplate\n let-currentPage=\"currentPage\"\n let-disabled=\"disabled\"\n>\n <svg\n fill=\"currentColor\"\n fill=\"currentColor\"\n height=\"48\"\n stroke=\"currentColor\"\n viewBox=\"0 -960 960 960\"\n width=\"48\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M530-481 332-679l43-43 241 241-241 241-43-43 198-198Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n</ng-template>\n\n<ng-template\n #prevTemplate\n let-currentPage=\"currentPage\"\n let-disabled=\"disabled\"\n>\n <svg\n fill=\"currentColor\"\n fill=\"currentColor\"\n height=\"48\"\n stroke=\"currentColor\"\n viewBox=\"0 -960 960 960\"\n width=\"48\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M561-240 320-481l241-241 43 43-198 198 198 198-43 43Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n</ng-template>\n\n<ng-template\n #lastTemplate\n let-currentPage=\"currentPage\"\n let-disabled=\"disabled\"\n>\n <svg\n fill=\"currentColor\"\n fill=\"currentColor\"\n height=\"48\"\n stroke=\"currentColor\"\n viewBox=\"0 -960 960 960\"\n width=\"48\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"m272-245-43-43 192-192-192-192 43-43 235 235-235 235Zm388 5v-480h60v480h-60Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n</ng-template>\n\n<ng-template\n #firstTemplate\n let-currentPage=\"currentPage\"\n let-disabled=\"disabled\"\n>\n <svg\n fill=\"currentColor\"\n fill=\"currentColor\"\n height=\"48\"\n stroke=\"currentColor\"\n viewBox=\"0 -960 960 960\"\n width=\"48\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M240-240v-480h60v480h-60Zm447-3L453-477l234-234 43 43-191 191 191 191-43 43Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n />\n </svg>\n</ng-template>\n", styles: [":host{display:block}.paginatorContainer{display:flex;align-items:flex-end;flex-wrap:wrap}@media (min-width: 576px){.paginatorContainer{flex-wrap:nowrap;order:2}}.paginatorContainer .page-size{display:inline-block;margin-bottom:.5rem;order:2;min-width:80px}@media (min-width: 576px){.paginatorContainer .page-size{order:1}}.pagination{margin-bottom:.5rem}.pagination ul{padding:0;margin:0;display:flex}.pagination ul li{list-style-type:none}.pagination ul li.pagination-page{display:none}.pagination ul li .page-link{border-radius:50%;padding:.375rem;border:none;gap:1.5rem;padding:.25rem;background-color:transparent;color:var(--bs-body-color)}.pagination ul li .page-link:disabled svg path{opacity:40%}.pagination ul li .page-link:focus{box-shadow:unset;background-color:unset}.pagination ul li .page-link svg{vertical-align:bottom;width:30px;height:30px}.pagination-label{margin:0;margin-bottom:1rem;font-size:.75rem}\n"] }]
|
|
123
123
|
}] });
|
|
124
124
|
|
|
125
125
|
class PaginatorModule {
|
|
126
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
127
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.
|
|
128
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.
|
|
126
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
127
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: PaginatorModule, imports: [CommonModule] }); }
|
|
128
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PaginatorModule, imports: [CommonModule] }); }
|
|
129
129
|
}
|
|
130
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
130
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PaginatorModule, decorators: [{
|
|
131
131
|
type: NgModule,
|
|
132
132
|
args: [{
|
|
133
133
|
declarations: [],
|
|
@@ -142,10 +142,10 @@ class QuangPaginatorService {
|
|
|
142
142
|
const end = (pageNumber + 1) * pageSize;
|
|
143
143
|
return list.slice(start, end);
|
|
144
144
|
}
|
|
145
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
146
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.
|
|
145
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangPaginatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
146
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangPaginatorService }); }
|
|
147
147
|
}
|
|
148
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
148
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangPaginatorService, decorators: [{
|
|
149
149
|
type: Injectable
|
|
150
150
|
}] });
|
|
151
151
|
|
|
@@ -97,8 +97,8 @@ class QuangSelectComponent extends QuangBaseComponent {
|
|
|
97
97
|
this.hideOptionVisibility();
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
101
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.
|
|
100
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
101
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: QuangSelectComponent, isStandalone: true, selector: "quang-select", inputs: { selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, optionListMaxHeight: { classPropertyName: "optionListMaxHeight", publicName: "optionListMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: true, isRequired: true, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, nullOption: { classPropertyName: "nullOption", publicName: "nullOption", isSignal: true, isRequired: false, transformFunction: null }, autoSelectSingleOption: { classPropertyName: "autoSelectSingleOption", publicName: "autoSelectSingleOption", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
102
102
|
{
|
|
103
103
|
provide: NG_VALUE_ACCESSOR,
|
|
104
104
|
useExisting: forwardRef(() => QuangSelectComponent),
|
|
@@ -110,7 +110,7 @@ class QuangSelectComponent extends QuangBaseComponent {
|
|
|
110
110
|
},
|
|
111
111
|
], viewQueries: [{ propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n (mouseleave)=\"onMouseLeaveCallback()\"\n class=\"mb-3\"\n>\n @if (componentLabel()) {\n <label\n [htmlFor]=\"componentId()\"\n class=\"form-label w-100\"\n >\n {{ componentLabel() | transloco }}\n <span [hidden]=\"!_isRequired()\">*</span>\n </label>\n }\n <div\n [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n class=\"option-list-container\"\n >\n <button\n [attr.required]=\"getIsRequiredControl()\"\n [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n [disabled]=\"_isDisabled()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [tabIndex]=\"componentTabIndex()\"\n (click)=\"changeOptionsVisibility()\"\n #selectButton\n class=\"form-select\"\n type=\"button\"\n >\n <div class=\"content\">\n @if (_selectedItems()?.length) {\n @for (val of _selectedItems(); track val.value; let last = $last) {\n {{ translateValue() ? (val.label | transloco) : val.label }}{{ !last ? ', ' : '' }}\n }\n } @else {\n <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n }\n </div>\n </button>\n\n @if (_showOptions()) {\n <quang-option-list\n [_isDisabled]=\"_isDisabled()\"\n [_value]=\"_value()\"\n [componentClass]=\"componentClass()\"\n [componentLabel]=\"componentLabel()\"\n [componentTabIndex]=\"componentTabIndex()\"\n [nullOption]=\"nullOption()\"\n [optionListMaxHeight]=\"optionListMaxHeight()\"\n [parentType]=\"ParentType\"\n [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n [selectButtonRef]=\"selectButton\"\n [selectionMode]=\"selectionMode()\"\n [selectOptions]=\"selectOptions()\"\n [translateValue]=\"translateValue()\"\n (blurHandler)=\"onBlurHandler()\"\n (changedHandler)=\"onChangedHandler($event)\"\n #optionList\n ></quang-option-list>\n }\n </div>\n <div class=\"valid-feedback\">\n {{ successMessage() | transloco }}\n </div>\n <div class=\"invalid-feedback\">\n {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n </div>\n @if (helpMessage()) {\n <small\n [hidden]=\"_showSuccess() || _showErrors()\"\n aria-live=\"assertive\"\n class=\"form-text text-muted\"\n >\n {{ helpMessage() | transloco }}\n </small>\n }\n</div>\n", styles: [":host{display:block}:host .option-list-container{position:relative}.form-select{height:2.375rem}.form-select:disabled{background-image:unset}.content{text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: QuangOptionListComponent, selector: "quang-option-list", inputs: ["selectionMode", "optionListMaxHeight", "selectOptions", "selectButtonRef", "_value", "_isDisabled", "componentClass", "componentLabel", "componentTabIndex", "translateValue", "nullOption", "scrollBehaviorOnOpen", "parentType", "parentID"], outputs: ["changedHandler", "blurHandler"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
112
112
|
}
|
|
113
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangSelectComponent, decorators: [{
|
|
114
114
|
type: Component,
|
|
115
115
|
args: [{ selector: 'quang-select', providers: [
|
|
116
116
|
{
|
|
@@ -128,10 +128,10 @@ class QuangBaseComponent {
|
|
|
128
128
|
ngAfterViewInit() {
|
|
129
129
|
this.setupFormControl();
|
|
130
130
|
}
|
|
131
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
132
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.
|
|
131
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
132
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: QuangBaseComponent, isStandalone: true, inputs: { componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, componentTabIndex: { classPropertyName: "componentTabIndex", publicName: "componentTabIndex", isSignal: true, isRequired: false, transformFunction: null }, componentClass: { classPropertyName: "componentClass", publicName: "componentClass", isSignal: true, isRequired: false, transformFunction: null }, componentLabel: { classPropertyName: "componentLabel", publicName: "componentLabel", isSignal: true, isRequired: false, transformFunction: null }, componentPlaceholder: { classPropertyName: "componentPlaceholder", publicName: "componentPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, errorMap: { classPropertyName: "errorMap", publicName: "errorMap", isSignal: true, isRequired: false, transformFunction: null }, successMessage: { classPropertyName: "successMessage", publicName: "successMessage", isSignal: true, isRequired: false, transformFunction: null }, helpMessage: { classPropertyName: "helpMessage", publicName: "helpMessage", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { componentBlur: "componentBlur" }, ngImport: i0 }); }
|
|
133
133
|
}
|
|
134
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
134
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangBaseComponent, decorators: [{
|
|
135
135
|
type: Directive
|
|
136
136
|
}], ctorParameters: () => [] });
|
|
137
137
|
|
|
@@ -404,10 +404,10 @@ class QuangOptionListComponent {
|
|
|
404
404
|
this.elementBottom.set(bottomValue);
|
|
405
405
|
});
|
|
406
406
|
}
|
|
407
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
408
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.
|
|
407
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangOptionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
408
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: QuangOptionListComponent, isStandalone: true, selector: "quang-option-list", inputs: { selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, optionListMaxHeight: { classPropertyName: "optionListMaxHeight", publicName: "optionListMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: true, isRequired: false, transformFunction: null }, selectButtonRef: { classPropertyName: "selectButtonRef", publicName: "selectButtonRef", isSignal: true, isRequired: true, transformFunction: null }, _value: { classPropertyName: "_value", publicName: "_value", isSignal: true, isRequired: false, transformFunction: null }, _isDisabled: { classPropertyName: "_isDisabled", publicName: "_isDisabled", isSignal: true, isRequired: false, transformFunction: null }, componentClass: { classPropertyName: "componentClass", publicName: "componentClass", isSignal: true, isRequired: false, transformFunction: null }, componentLabel: { classPropertyName: "componentLabel", publicName: "componentLabel", isSignal: true, isRequired: false, transformFunction: null }, componentTabIndex: { classPropertyName: "componentTabIndex", publicName: "componentTabIndex", isSignal: true, isRequired: false, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, nullOption: { classPropertyName: "nullOption", publicName: "nullOption", isSignal: true, isRequired: false, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, parentType: { classPropertyName: "parentType", publicName: "parentType", isSignal: true, isRequired: true, transformFunction: null }, parentID: { classPropertyName: "parentID", publicName: "parentID", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changedHandler: "changedHandler", blurHandler: "blurHandler" }, host: { listeners: { "window:scroll": "changePosition()" } }, viewQueries: [{ propertyName: "optionListContainer", first: true, predicate: ["optionListContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n [ngStyle]=\"{\n 'max-height': optionListMaxHeight(),\n '--option-list-width': elementWidth(),\n '--option-list-top': elementTop(),\n '--option-list-bottom': elementBottom(),\n }\"\n (blur)=\"onBlurHandler($event)\"\n #optionListContainer\n class=\"option-list\"\n id=\"optionList\"\n tabindex=\"1\"\n>\n <ul>\n @for (item of selectOptionsList(); track i; let i = $index; let last = $last) {\n <li\n [class.m-0]=\"last\"\n [class.selected]=\"selectionMode() === 'single' ? getSelected(item) : null\"\n [id]=\"'item-' + i\"\n (mousedown)=\"$event.stopImmediatePropagation(); onSelectItem(item)\"\n class=\"item\"\n >\n <input\n [checked]=\"getSelected(item)\"\n [class.d-none]=\"selectionMode() === 'single' || !item?.value\"\n [disabled]=\"true\"\n [id]=\"i + '-' + item.value + '-checkbox'\"\n [name]=\"i + '-' + item.value + '-checkbox'\"\n [ngClass]=\"componentClass()\"\n [tabIndex]=\"componentTabIndex()\"\n [value]=\"getSelected(item)\"\n (blur)=\"onBlurHandler($event)\"\n #inputCheckbox\n class=\"form-check-input opacity-100\"\n type=\"checkbox\"\n />\n <label\n [class.ms-3]=\"selectionMode() === 'multiple' && item?.value\"\n [for]=\"i + '-' + item.value + '-checkbox'\"\n class=\"form-check-label checkbox-label w-100 opacity-100\"\n >\n {{ translateValue() ? (item.label | transloco) : item.label }}\n </label>\n </li>\n }\n </ul>\n</div>\n", styles: [":host{display:block;z-index:999}.option-list{--option-list-width: 100%;--option-list-top: 10px;--option-list-bottom: unset;border:1px solid var(--bs-border-color);border-top:0;border-radius:var(--bs-border-radius);overflow:auto;position:fixed;width:var(--option-list-width);top:var(--option-list-top);bottom:var(--option-list-bottom);z-index:999}.option-list ul{margin:0;padding:0}.option-list .selected{background-color:var(--bs-body-bg);filter:brightness(95%)}.option-list.option-list-top{border-top:1px solid var(--bs-border-color);border-bottom:0}.option-list:focus-visible{outline:none}.item{display:flex;background-color:var(--bs-body-bg);z-index:1;padding:0 .5rem;min-height:2.5rem}.item label{padding:.5rem 0}.item:hover{cursor:pointer;background-color:var(--bs-body-bg);filter:brightness(95%)}.item *:hover{cursor:pointer}.item .form-check-input{align-self:center}.item .form-check-input:focus{border-color:var(--bs-border-color);box-shadow:unset}.item .form-check-input:checked{background-color:var(--bs-primary);border-color:var(--bs-border-color)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
409
409
|
}
|
|
410
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
410
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangOptionListComponent, decorators: [{
|
|
411
411
|
type: Component,
|
|
412
412
|
args: [{ selector: 'quang-option-list', imports: [NgStyle, NgClass, TranslocoPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [ngStyle]=\"{\n 'max-height': optionListMaxHeight(),\n '--option-list-width': elementWidth(),\n '--option-list-top': elementTop(),\n '--option-list-bottom': elementBottom(),\n }\"\n (blur)=\"onBlurHandler($event)\"\n #optionListContainer\n class=\"option-list\"\n id=\"optionList\"\n tabindex=\"1\"\n>\n <ul>\n @for (item of selectOptionsList(); track i; let i = $index; let last = $last) {\n <li\n [class.m-0]=\"last\"\n [class.selected]=\"selectionMode() === 'single' ? getSelected(item) : null\"\n [id]=\"'item-' + i\"\n (mousedown)=\"$event.stopImmediatePropagation(); onSelectItem(item)\"\n class=\"item\"\n >\n <input\n [checked]=\"getSelected(item)\"\n [class.d-none]=\"selectionMode() === 'single' || !item?.value\"\n [disabled]=\"true\"\n [id]=\"i + '-' + item.value + '-checkbox'\"\n [name]=\"i + '-' + item.value + '-checkbox'\"\n [ngClass]=\"componentClass()\"\n [tabIndex]=\"componentTabIndex()\"\n [value]=\"getSelected(item)\"\n (blur)=\"onBlurHandler($event)\"\n #inputCheckbox\n class=\"form-check-input opacity-100\"\n type=\"checkbox\"\n />\n <label\n [class.ms-3]=\"selectionMode() === 'multiple' && item?.value\"\n [for]=\"i + '-' + item.value + '-checkbox'\"\n class=\"form-check-label checkbox-label w-100 opacity-100\"\n >\n {{ translateValue() ? (item.label | transloco) : item.label }}\n </label>\n </li>\n }\n </ul>\n</div>\n", styles: [":host{display:block;z-index:999}.option-list{--option-list-width: 100%;--option-list-top: 10px;--option-list-bottom: unset;border:1px solid var(--bs-border-color);border-top:0;border-radius:var(--bs-border-radius);overflow:auto;position:fixed;width:var(--option-list-width);top:var(--option-list-top);bottom:var(--option-list-bottom);z-index:999}.option-list ul{margin:0;padding:0}.option-list .selected{background-color:var(--bs-body-bg);filter:brightness(95%)}.option-list.option-list-top{border-top:1px solid var(--bs-border-color);border-bottom:0}.option-list:focus-visible{outline:none}.item{display:flex;background-color:var(--bs-body-bg);z-index:1;padding:0 .5rem;min-height:2.5rem}.item label{padding:.5rem 0}.item:hover{cursor:pointer;background-color:var(--bs-body-bg);filter:brightness(95%)}.item *:hover{cursor:pointer}.item .form-check-input{align-self:center}.item .form-check-input:focus{border-color:var(--bs-border-color);box-shadow:unset}.item .form-check-input:checked{background-color:var(--bs-primary);border-color:var(--bs-border-color)}\n"] }]
|
|
413
413
|
}], propDecorators: { changePosition: [{
|
|
@@ -146,10 +146,10 @@ class QuangTableComponent {
|
|
|
146
146
|
this._tableConfigurations.set({ ...this._tableConfigurations(), headers: tableHeaders });
|
|
147
147
|
this.sortChanged.emit([sort]); // it's an array to handle multisort in the future
|
|
148
148
|
}
|
|
149
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
150
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.
|
|
149
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
150
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: QuangTableComponent, isStandalone: true, selector: "quang-table", inputs: { clickableRow: { classPropertyName: "clickableRow", publicName: "clickableRow", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, stickyTable: { classPropertyName: "stickyTable", publicName: "stickyTable", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, tableConfigurations: { classPropertyName: "tableConfigurations", publicName: "tableConfigurations", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedRow: "selectedRow", sortChanged: "sortChanged" }, viewQueries: [{ propertyName: "_tableHeader", first: true, predicate: ["tableHeader"], descendants: true, isSignal: true }, { propertyName: "_tableHeaderElement", first: true, predicate: ["tableHeader"], descendants: true, isSignal: true }, { propertyName: "_fakeTableHeader", first: true, predicate: ["fakeTableHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n [class.sticky-table]=\"stickyTable()\"\n class=\"table-responsive\"\n>\n @if (_tableConfigurations().rows.length) {\n <div\n (scroll)=\"tableContainer.scrollLeft = tableHeaderContainer.scrollLeft\"\n #tableHeaderContainer\n class=\"table-header-container\"\n id=\"tableHeaderContainer\"\n >\n <table\n #tableHeader\n id=\"tableHeader\"\n >\n <thead>\n <tr>\n @for (header of _tableConfigurations().headers; track $index) {\n <th\n [class.sort-btn]=\"header?.sort\"\n (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n class=\"align-bottom\"\n >\n <div\n [ngClass]=\"header?.css\"\n class=\"align-self-end d-flex gap-1\"\n >\n {{ !header.renderer ? (header.text | transloco) : null }}\n <ng-container\n [ngTemplateOutlet]=\"header?.renderer ?? null\"\n [ngTemplateOutletContext]=\"{\n $implicit: header.payload,\n }\"\n ></ng-container>\n @if (header.sort?.key) {\n <div class=\"d-flex justify-content-between\">\n <ng-container\n [ngTemplateOutlet]=\"orderBtns\"\n [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n ></ng-container>\n </div>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n </table>\n </div>\n <div\n (scroll)=\"tableHeaderContainer.scrollLeft = tableContainer.scrollLeft\"\n #tableContainer\n class=\"table-container\"\n >\n <table\n class=\"table\"\n id=\"table-content\"\n >\n <thead\n #fakeTableHeader\n class=\"fake-table-header\"\n id=\"fakeTableHeader\"\n >\n <tr>\n @for (header of _tableConfigurations().headers; track $index) {\n <th\n [class.sort-btn]=\"header?.sort\"\n (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n class=\"align-bottom\"\n >\n <div\n [ngClass]=\"header?.css\"\n class=\"align-self-end d-flex gap-1\"\n >\n {{ !header.renderer ? (header.text | transloco) : null }}\n <ng-container\n [ngTemplateOutlet]=\"header?.renderer ?? null\"\n [ngTemplateOutletContext]=\"{\n $implicit: header.payload,\n }\"\n ></ng-container>\n @if (header.sort?.key) {\n <div class=\"d-flex justify-content-between\">\n <ng-container\n [ngTemplateOutlet]=\"orderBtns\"\n [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n ></ng-container>\n </div>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of _tableConfigurations().rows; track $index) {\n <tr\n [class.hover-table]=\"clickableRow()\"\n [class.selectedRow]=\"row?.rowId ? isSelected(row.rowId!) : null\"\n [ngClass]=\"row.css\"\n (click)=\"clickableRow() ? onClickRow(row) : null\"\n >\n @for (cell of row.cellData; track $index) {\n <td\n [attr.colspan]=\"cell?.fullWidth ? _tableConfigurations().headers.length : undefined\"\n [ngClass]=\"cell.css!\"\n >\n {{ !cell.renderer ? cell.text : null }}\n <ng-container\n [ngTemplateOutlet]=\"cell?.renderer ?? null\"\n [ngTemplateOutletContext]=\"{\n $implicit: cell.payload,\n }\"\n ></ng-container>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n @if (!_tableConfigurations().rows.length) {\n <h6 class=\"text-center mt-3\">\n {{ noResultsText() | transloco }}\n </h6>\n }\n</div>\n\n<ng-template\n #orderBtns\n let-order\n>\n <div\n [class.sort-asc]=\"order.sort === SortTable.ASC\"\n [class.sort-default]=\"order.sort === SortTable.DEFAULT\"\n [class.sort-desc]=\"order.sort === SortTable.DESC\"\n class=\"sort-arrows\"\n >\n <svg\n class=\"arrow-up\"\n fill=\"currentColor\"\n height=\"10\"\n stroke=\"currentColor\"\n viewBox=\"279.5 -600.5 401 201\"\n width=\"10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"m280-400 200-200 200 200H280Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n ></path>\n </svg>\n <svg\n class=\"arrow-down\"\n fill=\"currentColor\"\n height=\"10\"\n stroke=\"currentColor\"\n viewBox=\"279.5 -560.5 401 201\"\n width=\"10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M480-360 280-560h400L480-360Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n ></path>\n </svg>\n </div>\n</ng-template>\n", styles: [":host{display:block;--table-header-container-top: 0;--table-header-bg: var(--bs-body-bg);--table-header-border-color: var(--bs-border-color);--table-header-border-width: 4px;--table-row-hover-brightness: 90%;--table-row-selected-brightness: 95%}.table-responsive{overflow:initial}.table-responsive .fake-table-header{height:0!important;overflow:hidden!important;line-height:0!important;visibility:collapse!important}.table-responsive .fake-table-header *{padding:0!important;margin:0!important;background-color:var(--table-header-bg);border:unset!important;height:0!important;overflow:hidden!important;line-height:0!important;visibility:collapse!important}.table-responsive .table-header-container{overflow-x:hidden;z-index:1}.table-responsive .table-container{overflow-x:auto}.table-responsive table{width:100%;font-size:16px;overflow-y:auto;margin-bottom:unset}.table-responsive table thead{text-transform:uppercase}.table-responsive table thead th{padding:1rem .5rem;z-index:999;background-color:var(--table-header-bg);box-shadow:inset 0 calc(var(--table-header-border-width) * -1) 0 0 var(--table-header-border-color)}.table-responsive table tbody tr:first-child td{border-top:0}.table-responsive table tbody tr.hover-table:hover{cursor:pointer;filter:brightness(var(--table-row-hover-brightness))}.table-responsive table tbody tr.selectedRow{filter:brightness(var(--table-row-selected-brightness))}.table-responsive table tbody tr td{padding:1rem .5rem;font-weight:300;vertical-align:middle}.table-responsive table tbody tr:last-child{border-bottom:transparent}.table-responsive.sticky-table{position:relative}.table-responsive.sticky-table .table-header-container{position:sticky;top:var(--table-header-container-top, 0)}.sort-arrows{display:flex;flex-direction:column;justify-content:center}.sort-default{opacity:30%}.sort-asc .arrow-up{opacity:100%}.sort-asc .arrow-down,.sort-desc .arrow-up{display:none}.sort-desc .arrow-down{opacity:100%}.sort-btn:hover{cursor:pointer}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
151
151
|
}
|
|
152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangTableComponent, decorators: [{
|
|
153
153
|
type: Component,
|
|
154
154
|
args: [{ selector: 'quang-table', imports: [TranslocoPipe, NgClass, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class.sticky-table]=\"stickyTable()\"\n class=\"table-responsive\"\n>\n @if (_tableConfigurations().rows.length) {\n <div\n (scroll)=\"tableContainer.scrollLeft = tableHeaderContainer.scrollLeft\"\n #tableHeaderContainer\n class=\"table-header-container\"\n id=\"tableHeaderContainer\"\n >\n <table\n #tableHeader\n id=\"tableHeader\"\n >\n <thead>\n <tr>\n @for (header of _tableConfigurations().headers; track $index) {\n <th\n [class.sort-btn]=\"header?.sort\"\n (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n class=\"align-bottom\"\n >\n <div\n [ngClass]=\"header?.css\"\n class=\"align-self-end d-flex gap-1\"\n >\n {{ !header.renderer ? (header.text | transloco) : null }}\n <ng-container\n [ngTemplateOutlet]=\"header?.renderer ?? null\"\n [ngTemplateOutletContext]=\"{\n $implicit: header.payload,\n }\"\n ></ng-container>\n @if (header.sort?.key) {\n <div class=\"d-flex justify-content-between\">\n <ng-container\n [ngTemplateOutlet]=\"orderBtns\"\n [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n ></ng-container>\n </div>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n </table>\n </div>\n <div\n (scroll)=\"tableHeaderContainer.scrollLeft = tableContainer.scrollLeft\"\n #tableContainer\n class=\"table-container\"\n >\n <table\n class=\"table\"\n id=\"table-content\"\n >\n <thead\n #fakeTableHeader\n class=\"fake-table-header\"\n id=\"fakeTableHeader\"\n >\n <tr>\n @for (header of _tableConfigurations().headers; track $index) {\n <th\n [class.sort-btn]=\"header?.sort\"\n (click)=\"header?.sort ? onSortColumn(header.sort!) : null\"\n class=\"align-bottom\"\n >\n <div\n [ngClass]=\"header?.css\"\n class=\"align-self-end d-flex gap-1\"\n >\n {{ !header.renderer ? (header.text | transloco) : null }}\n <ng-container\n [ngTemplateOutlet]=\"header?.renderer ?? null\"\n [ngTemplateOutletContext]=\"{\n $implicit: header.payload,\n }\"\n ></ng-container>\n @if (header.sort?.key) {\n <div class=\"d-flex justify-content-between\">\n <ng-container\n [ngTemplateOutlet]=\"orderBtns\"\n [ngTemplateOutletContext]=\"{ $implicit: header.sort }\"\n ></ng-container>\n </div>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of _tableConfigurations().rows; track $index) {\n <tr\n [class.hover-table]=\"clickableRow()\"\n [class.selectedRow]=\"row?.rowId ? isSelected(row.rowId!) : null\"\n [ngClass]=\"row.css\"\n (click)=\"clickableRow() ? onClickRow(row) : null\"\n >\n @for (cell of row.cellData; track $index) {\n <td\n [attr.colspan]=\"cell?.fullWidth ? _tableConfigurations().headers.length : undefined\"\n [ngClass]=\"cell.css!\"\n >\n {{ !cell.renderer ? cell.text : null }}\n <ng-container\n [ngTemplateOutlet]=\"cell?.renderer ?? null\"\n [ngTemplateOutletContext]=\"{\n $implicit: cell.payload,\n }\"\n ></ng-container>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n @if (!_tableConfigurations().rows.length) {\n <h6 class=\"text-center mt-3\">\n {{ noResultsText() | transloco }}\n </h6>\n }\n</div>\n\n<ng-template\n #orderBtns\n let-order\n>\n <div\n [class.sort-asc]=\"order.sort === SortTable.ASC\"\n [class.sort-default]=\"order.sort === SortTable.DEFAULT\"\n [class.sort-desc]=\"order.sort === SortTable.DESC\"\n class=\"sort-arrows\"\n >\n <svg\n class=\"arrow-up\"\n fill=\"currentColor\"\n height=\"10\"\n stroke=\"currentColor\"\n viewBox=\"279.5 -600.5 401 201\"\n width=\"10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"m280-400 200-200 200 200H280Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n ></path>\n </svg>\n <svg\n class=\"arrow-down\"\n fill=\"currentColor\"\n height=\"10\"\n stroke=\"currentColor\"\n viewBox=\"279.5 -560.5 401 201\"\n width=\"10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M480-360 280-560h400L480-360Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n ></path>\n </svg>\n </div>\n</ng-template>\n", styles: [":host{display:block;--table-header-container-top: 0;--table-header-bg: var(--bs-body-bg);--table-header-border-color: var(--bs-border-color);--table-header-border-width: 4px;--table-row-hover-brightness: 90%;--table-row-selected-brightness: 95%}.table-responsive{overflow:initial}.table-responsive .fake-table-header{height:0!important;overflow:hidden!important;line-height:0!important;visibility:collapse!important}.table-responsive .fake-table-header *{padding:0!important;margin:0!important;background-color:var(--table-header-bg);border:unset!important;height:0!important;overflow:hidden!important;line-height:0!important;visibility:collapse!important}.table-responsive .table-header-container{overflow-x:hidden;z-index:1}.table-responsive .table-container{overflow-x:auto}.table-responsive table{width:100%;font-size:16px;overflow-y:auto;margin-bottom:unset}.table-responsive table thead{text-transform:uppercase}.table-responsive table thead th{padding:1rem .5rem;z-index:999;background-color:var(--table-header-bg);box-shadow:inset 0 calc(var(--table-header-border-width) * -1) 0 0 var(--table-header-border-color)}.table-responsive table tbody tr:first-child td{border-top:0}.table-responsive table tbody tr.hover-table:hover{cursor:pointer;filter:brightness(var(--table-row-hover-brightness))}.table-responsive table tbody tr.selectedRow{filter:brightness(var(--table-row-selected-brightness))}.table-responsive table tbody tr td{padding:1rem .5rem;font-weight:300;vertical-align:middle}.table-responsive table tbody tr:last-child{border-bottom:transparent}.table-responsive.sticky-table{position:relative}.table-responsive.sticky-table .table-header-container{position:sticky;top:var(--table-header-container-top, 0)}.sort-arrows{display:flex;flex-direction:column;justify-content:center}.sort-default{opacity:30%}.sort-asc .arrow-up{opacity:100%}.sort-asc .arrow-down,.sort-desc .arrow-up{display:none}.sort-desc .arrow-down{opacity:100%}.sort-btn:hover{cursor:pointer}\n"] }]
|
|
155
155
|
}] });
|
|
@@ -201,8 +201,8 @@ class QuangWysiwygComponent extends QuangBaseComponent {
|
|
|
201
201
|
}
|
|
202
202
|
return buttonList;
|
|
203
203
|
}
|
|
204
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
205
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.
|
|
204
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangWysiwygComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
205
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: QuangWysiwygComponent, isStandalone: true, selector: "quang-wysiwyg", inputs: { minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, font: { classPropertyName: "font", publicName: "font", isSignal: true, isRequired: false, transformFunction: null }, fontSize: { classPropertyName: "fontSize", publicName: "fontSize", isSignal: true, isRequired: false, transformFunction: null }, formatBlock: { classPropertyName: "formatBlock", publicName: "formatBlock", isSignal: true, isRequired: false, transformFunction: null }, paragraphStyle: { classPropertyName: "paragraphStyle", publicName: "paragraphStyle", isSignal: true, isRequired: false, transformFunction: null }, blockquote: { classPropertyName: "blockquote", publicName: "blockquote", isSignal: true, isRequired: false, transformFunction: null }, bold: { classPropertyName: "bold", publicName: "bold", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null }, italic: { classPropertyName: "italic", publicName: "italic", isSignal: true, isRequired: false, transformFunction: null }, strike: { classPropertyName: "strike", publicName: "strike", isSignal: true, isRequired: false, transformFunction: null }, fontColor: { classPropertyName: "fontColor", publicName: "fontColor", isSignal: true, isRequired: false, transformFunction: null }, highlightColor: { classPropertyName: "highlightColor", publicName: "highlightColor", isSignal: true, isRequired: false, transformFunction: null }, textStyle: { classPropertyName: "textStyle", publicName: "textStyle", isSignal: true, isRequired: false, transformFunction: null }, removeFormat: { classPropertyName: "removeFormat", publicName: "removeFormat", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null }, table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, showBlocks: { classPropertyName: "showBlocks", publicName: "showBlocks", isSignal: true, isRequired: false, transformFunction: null }, onImageUploadError: { classPropertyName: "onImageUploadError", publicName: "onImageUploadError", isSignal: true, isRequired: false, transformFunction: null }, onFileDrop: { classPropertyName: "onFileDrop", publicName: "onFileDrop", isSignal: true, isRequired: false, transformFunction: null }, wysiwygOptions: { classPropertyName: "wysiwygOptions", publicName: "wysiwygOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
206
206
|
{
|
|
207
207
|
provide: NG_VALUE_ACCESSOR,
|
|
208
208
|
useExisting: forwardRef(() => QuangWysiwygComponent),
|
|
@@ -210,7 +210,7 @@ class QuangWysiwygComponent extends QuangBaseComponent {
|
|
|
210
210
|
},
|
|
211
211
|
], viewQueries: [{ propertyName: "_inputForWysiwyg", first: true, predicate: ["inputForWysiwyg"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mb-3\">\n @if (componentLabel()) {\n <label\n [htmlFor]=\"componentId()\"\n class=\"form-label\"\n >\n {{ componentLabel() | transloco }}\n <span [hidden]=\"!_isRequired()\">*</span>\n </label>\n }\n <div\n [class.is-invalid]=\"_showErrors()\"\n [class.is-valid]=\"_showSuccess()\"\n class=\"input-wysiwyg-container is-invalid\"\n >\n <textarea\n [disabled]=\"_isDisabled()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [placeholder]=\"componentPlaceholder() | transloco\"\n [readOnly]=\"isReadonly()\"\n [tabIndex]=\"componentTabIndex()\"\n [value]=\"_value()\"\n #inputForWysiwyg\n class=\"form-control\"\n ></textarea>\n </div>\n <div class=\"valid-feedback\">\n {{ successMessage() | transloco }}\n </div>\n <div class=\"invalid-feedback\">\n {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n </div>\n @if (helpMessage()) {\n <small\n [hidden]=\"_showSuccess() || _showErrors()\"\n aria-live=\"assertive\"\n class=\"form-text text-muted\"\n >\n {{ helpMessage() | transloco }}\n </small>\n }\n</div>\n", styles: [":host{display:block}::ng-deep .se-toolbar{color:var(--bs-body-color)!important;background-color:var(--bs-body-bg)!important;z-index:unset!important}::ng-deep .se-wrapper-inner{color:var(--bs-body-color)!important;background-color:var(--bs-body-bg)!important}::ng-deep .se-btn{color:var(--bs-body-color)!important}::ng-deep .se-btn:enabled.active{color:var(--bs-primary)!important}::ng-deep .se-btn:hover{background-color:var(--bs-secondary-bg)!important}::ng-deep .se-resizing-bar{color:var(--bs-body-color)!important;background-color:var(--bs-body-bg)!important}::ng-deep .se-navigation{color:var(--bs-body-color)!important;background-color:var(--bs-body-bg)!important}::ng-deep .sun-editor input{display:none}::ng-deep .sun-editor .se-container{border-radius:var(--bs-border-radius)}::ng-deep .se-wrapper{z-index:unset!important}::ng-deep .se-wrapper textarea:disabled+.se-wrapper-wysiwyg{background-color:var(--bs-secondary-bg)}::ng-deep .se-wrapper .se-wrapper-inner{border-top:1px solid var(--bs-border-color)}::ng-deep .is-invalid .sun-editor .se-container .se-toolbar{border-bottom:1px solid var(--bs-danger)}::ng-deep .is-invalid .sun-editor .se-container .se-wrapper .se-wrapper-inner{--bs-form-bg-icon: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e\");border:1px solid var(--bs-danger);padding-right:3rem;background-position:right .75rem center,center right 2.25rem;background-size:1.5rem,calc(.75em + .375rem) calc(.75em + .375rem);background-image:var(--bs-form-bg-icon);background-repeat:no-repeat}::ng-deep .is-valid .sun-editor .se-container .se-toolbar{border-bottom:1px solid var(--bs-success)}::ng-deep .is-valid .sun-editor .se-container .se-wrapper .se-wrapper-inner{--bs-form-bg-icon: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\");border:1px solid var(--bs-success);padding-right:3rem;background-position:right .75rem center,center right 2.25rem;background-size:1.5rem,calc(.75em + .375rem) calc(.75em + .375rem);background-image:var(--bs-form-bg-icon);background-repeat:no-repeat}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
212
212
|
}
|
|
213
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangWysiwygComponent, decorators: [{
|
|
214
214
|
type: Component,
|
|
215
215
|
args: [{ selector: 'quang-wysiwyg', providers: [
|
|
216
216
|
{
|
|
@@ -24,10 +24,10 @@ class ResizeObservableService {
|
|
|
24
24
|
widthResizeObservable(elem) {
|
|
25
25
|
return this.resizeObservable(elem).pipe(map((entry) => entry.borderBoxSize[0].inlineSize), filter(Boolean));
|
|
26
26
|
}
|
|
27
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
28
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.
|
|
27
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ResizeObservableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
28
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ResizeObservableService, providedIn: 'root' }); }
|
|
29
29
|
}
|
|
30
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
30
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ResizeObservableService, decorators: [{
|
|
31
31
|
type: Injectable,
|
|
32
32
|
args: [{
|
|
33
33
|
providedIn: 'root',
|
|
@@ -17,10 +17,10 @@ class QuangLoaderService {
|
|
|
17
17
|
hide() {
|
|
18
18
|
patchState(this.loaderState, { count: this.loaderState().count - 1 });
|
|
19
19
|
}
|
|
20
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
21
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.
|
|
20
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
21
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangLoaderService, providedIn: 'root' }); }
|
|
22
22
|
}
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangLoaderService, decorators: [{
|
|
24
24
|
type: Injectable,
|
|
25
25
|
args: [{
|
|
26
26
|
providedIn: 'root',
|
|
@@ -69,10 +69,10 @@ class QuangLoaderComponent {
|
|
|
69
69
|
this.showLoaderBuffer$ = toObservable(this.isLoading).pipe(map((isLoading) => (isLoading ? of(isLoading) : timer(this.showAtLeastFor()).pipe(map(() => isLoading)))), switchAll());
|
|
70
70
|
this.showLoader = toSignal(this.showLoaderBuffer$);
|
|
71
71
|
}
|
|
72
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
73
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.
|
|
72
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
73
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: QuangLoaderComponent, isStandalone: true, selector: "quang-loader", inputs: { showAtLeastFor: { classPropertyName: "showAtLeastFor", publicName: "showAtLeastFor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showLoader()) {\n <div class=\"loader-container\">\n @if (!ref?.children?.length) {\n <span class=\"loader\"></span>\n }\n <div #ref>\n <ng-content></ng-content>\n </div>\n </div>\n}\n", styles: [":host{display:block}.loader-container{position:fixed;width:100%;height:100%;display:flex;top:0;left:0;background-color:#00000080;align-items:center;justify-content:center;z-index:99999}.loader-container .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
74
74
|
}
|
|
75
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
75
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangLoaderComponent, decorators: [{
|
|
76
76
|
type: Component,
|
|
77
77
|
args: [{ selector: 'quang-loader', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showLoader()) {\n <div class=\"loader-container\">\n @if (!ref?.children?.length) {\n <span class=\"loader\"></span>\n }\n <div #ref>\n <ng-content></ng-content>\n </div>\n </div>\n}\n", styles: [":host{display:block}.loader-container{position:fixed;width:100%;height:100%;display:flex;top:0;left:0;background-color:#00000080;align-items:center;justify-content:center;z-index:99999}.loader-container .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) rgba(255,255,255,.7607843137) transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}\n"] }]
|
|
78
78
|
}] });
|
|
@@ -99,10 +99,10 @@ class QuangModalComponent {
|
|
|
99
99
|
this.overlayRef?.detach();
|
|
100
100
|
this.overlayRef?.dispose();
|
|
101
101
|
}
|
|
102
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
103
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.
|
|
102
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangModalComponent, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
103
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: QuangModalComponent, isStandalone: true, selector: "quang-modal", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, animationMode: { classPropertyName: "animationMode", publicName: "animationMode", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backdropClick: "backdropClick" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: "<ng-template cdkPortal>\n <div\n [ngStyle]=\"{\n '--quang-modal-panel-width': width(),\n '--quang-modal-panel-height': height(),\n '--quang-modal-panel-background': backgroundColor(),\n '--quang-modal-panel-padding': padding(),\n }\"\n class=\"dialog {{ containerClass() }} {{ animationClassEnter() }}\"\n >\n <div class=\"dialog__header\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"dialog__body\">\n <ng-content select=\"[body]\"></ng-content>\n </div>\n <div class=\"dialog__footer\">\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n </div>\n</ng-template>\n", styles: [".dialog{background-color:var(--quang-modal-panel-background, var(--bs-body-bg, initial));position:relative;display:flex;flex-direction:column;width:var(--quang-modal-panel-width);height:var(--quang-modal-panel-height);padding:var(--quang-modal-panel-padding)}.dialog__header{display:flex;flex-direction:column;width:100%}.dialog__body{flex:1;overflow:auto}.dialog__footer{display:flex;justify-content:flex-end}::ng-deep .cdk-global-scrollblock{overflow-y:auto}@keyframes left-to-right_enter{0%{transform:translate(-100%)}to{transform:translate(0)}}.left-to-right-enter-active{animation:left-to-right_enter .5s ease-in-out forwards}@keyframes right-to-left_enter{0%{transform:translate(100%)}to{transform:translate(0)}}.right-to-left-enter-active{animation:right-to-left_enter .5s ease-in-out forwards}@keyframes top-to-bottom_enter{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:top-to-bottom_enter .5s ease-in-out forwards}@keyframes bottom-to-top_enter{0%{transform:translateY(100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:bottom-to-top_enter .5s ease-in-out forwards}@keyframes fade_enter{0%{opacity:0}to{opacity:1}}.fade-enter-active{animation:fade_enter .5s ease-in-out forwards}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
104
104
|
}
|
|
105
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
105
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangModalComponent, decorators: [{
|
|
106
106
|
type: Component,
|
|
107
107
|
args: [{ selector: 'quang-modal', imports: [PortalModule, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template cdkPortal>\n <div\n [ngStyle]=\"{\n '--quang-modal-panel-width': width(),\n '--quang-modal-panel-height': height(),\n '--quang-modal-panel-background': backgroundColor(),\n '--quang-modal-panel-padding': padding(),\n }\"\n class=\"dialog {{ containerClass() }} {{ animationClassEnter() }}\"\n >\n <div class=\"dialog__header\">\n <ng-content select=\"[header]\"></ng-content>\n </div>\n <div class=\"dialog__body\">\n <ng-content select=\"[body]\"></ng-content>\n </div>\n <div class=\"dialog__footer\">\n <ng-content select=\"[footer]\"></ng-content>\n </div>\n </div>\n</ng-template>\n", styles: [".dialog{background-color:var(--quang-modal-panel-background, var(--bs-body-bg, initial));position:relative;display:flex;flex-direction:column;width:var(--quang-modal-panel-width);height:var(--quang-modal-panel-height);padding:var(--quang-modal-panel-padding)}.dialog__header{display:flex;flex-direction:column;width:100%}.dialog__body{flex:1;overflow:auto}.dialog__footer{display:flex;justify-content:flex-end}::ng-deep .cdk-global-scrollblock{overflow-y:auto}@keyframes left-to-right_enter{0%{transform:translate(-100%)}to{transform:translate(0)}}.left-to-right-enter-active{animation:left-to-right_enter .5s ease-in-out forwards}@keyframes right-to-left_enter{0%{transform:translate(100%)}to{transform:translate(0)}}.right-to-left-enter-active{animation:right-to-left_enter .5s ease-in-out forwards}@keyframes top-to-bottom_enter{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:top-to-bottom_enter .5s ease-in-out forwards}@keyframes bottom-to-top_enter{0%{transform:translateY(100%)}to{transform:translateY(0)}}.top-to-bottom-enter-active{animation:bottom-to-top_enter .5s ease-in-out forwards}@keyframes fade_enter{0%{opacity:0}to{opacity:1}}.fade-enter-active{animation:fade_enter .5s ease-in-out forwards}\n"] }]
|
|
108
108
|
}], ctorParameters: () => [{ type: i1.Overlay }], propDecorators: { portal: [{
|
|
@@ -38,10 +38,10 @@ class QuangPopoverComponent {
|
|
|
38
38
|
}
|
|
39
39
|
});
|
|
40
40
|
}
|
|
41
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
42
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.
|
|
41
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
42
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: QuangPopoverComponent, isStandalone: true, selector: "quang-popover", inputs: { overlayContent: { classPropertyName: "overlayContent", publicName: "overlayContent", isSignal: true, isRequired: false, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (overlayContent()) {\n <div\n [ngClass]=\"getPopoverPosition()\"\n class=\"popover-container\"\n >\n <ng-container\n [ngTemplateOutlet]=\"overlayContent()\"\n [ngTemplateOutletContext]=\"{\n $implicit: payload(),\n }\"\n ></ng-container>\n </div>\n}\n", styles: [":host{--bs-popover-border-width: 1px;--bs-popover-arrow-width: .5rem;--bs-popover-arrow-border: var(--bs-border-color, #000);--box-shadow-bg: rgba(0, 0, 0, .16)}.popover-container{box-shadow:var(--box-shadow-bg);background:var(--bs-body-bg, #fff);border:var(--bs-popover-border-width) solid var(--bs-border-color, #000);position:relative;padding:1rem;pointer-events:all}.popover-container.center-bottom:after,.popover-container.center-bottom:before{bottom:100%;left:50%;transform:translate(-50%)}.popover-container.start-bottom:after,.popover-container.start-bottom:before{bottom:100%;left:85%;transform:translate(-50%)}.popover-container.end-bottom:after,.popover-container.end-bottom:before{bottom:100%;left:15%;transform:translate(-50%)}.popover-container.center-top:after,.popover-container.center-top:before{top:100%;left:50%;transform:translate(-50%) rotate(180deg)}.popover-container.start-top:after,.popover-container.start-top:before{top:100%;left:85%;transform:translate(-50%) rotate(180deg)}.popover-container.end-top:after,.popover-container.end-top:before{top:100%;left:15%;transform:translate(-50%) rotate(180deg)}.popover-container.end-center:after,.popover-container.end-center:before{right:100%;top:50%;transform:translateY(-50%) rotate(270deg)}.popover-container.start-center:after,.popover-container.start-center:before{left:100%;top:50%;transform:translateY(-50%) rotate(90deg)}.popover-container:after,.popover-container:before{content:\"\";display:block;position:absolute;width:0;height:0;border-style:solid}.popover-container:after{border-color:transparent transparent var(--bs-body-bg, #fff) transparent;border-width:var(--bs-popover-arrow-width)}.popover-container:before{border-color:transparent transparent var(--bs-border-color, #000) transparent;border-width:calc(var(--bs-popover-arrow-width) + 1px)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
43
43
|
}
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
44
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangPopoverComponent, decorators: [{
|
|
45
45
|
type: Component,
|
|
46
46
|
args: [{ selector: 'quang-popover', imports: [NgTemplateOutlet, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (overlayContent()) {\n <div\n [ngClass]=\"getPopoverPosition()\"\n class=\"popover-container\"\n >\n <ng-container\n [ngTemplateOutlet]=\"overlayContent()\"\n [ngTemplateOutletContext]=\"{\n $implicit: payload(),\n }\"\n ></ng-container>\n </div>\n}\n", styles: [":host{--bs-popover-border-width: 1px;--bs-popover-arrow-width: .5rem;--bs-popover-arrow-border: var(--bs-border-color, #000);--box-shadow-bg: rgba(0, 0, 0, .16)}.popover-container{box-shadow:var(--box-shadow-bg);background:var(--bs-body-bg, #fff);border:var(--bs-popover-border-width) solid var(--bs-border-color, #000);position:relative;padding:1rem;pointer-events:all}.popover-container.center-bottom:after,.popover-container.center-bottom:before{bottom:100%;left:50%;transform:translate(-50%)}.popover-container.start-bottom:after,.popover-container.start-bottom:before{bottom:100%;left:85%;transform:translate(-50%)}.popover-container.end-bottom:after,.popover-container.end-bottom:before{bottom:100%;left:15%;transform:translate(-50%)}.popover-container.center-top:after,.popover-container.center-top:before{top:100%;left:50%;transform:translate(-50%) rotate(180deg)}.popover-container.start-top:after,.popover-container.start-top:before{top:100%;left:85%;transform:translate(-50%) rotate(180deg)}.popover-container.end-top:after,.popover-container.end-top:before{top:100%;left:15%;transform:translate(-50%) rotate(180deg)}.popover-container.end-center:after,.popover-container.end-center:before{right:100%;top:50%;transform:translateY(-50%) rotate(270deg)}.popover-container.start-center:after,.popover-container.start-center:before{left:100%;top:50%;transform:translateY(-50%) rotate(90deg)}.popover-container:after,.popover-container:before{content:\"\";display:block;position:absolute;width:0;height:0;border-style:solid}.popover-container:after{border-color:transparent transparent var(--bs-body-bg, #fff) transparent;border-width:var(--bs-popover-arrow-width)}.popover-container:before{border-color:transparent transparent var(--bs-border-color, #000) transparent;border-width:calc(var(--bs-popover-arrow-width) + 1px)}\n"] }]
|
|
47
47
|
}] });
|
|
@@ -52,10 +52,10 @@ class QuangPopoverDirective extends QuangBaseOverlayDirective {
|
|
|
52
52
|
this.targetComponentType = signal(QuangPopoverComponent);
|
|
53
53
|
this.content = input.required({ alias: 'quangPopover' });
|
|
54
54
|
}
|
|
55
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
56
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.
|
|
55
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangPopoverDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
56
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: QuangPopoverDirective, isStandalone: true, selector: "[quangPopover]", inputs: { content: { classPropertyName: "content", publicName: "quangPopover", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
57
57
|
}
|
|
58
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
58
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangPopoverDirective, decorators: [{
|
|
59
59
|
type: Directive,
|
|
60
60
|
args: [{
|
|
61
61
|
selector: '[quangPopover]',
|
|
@@ -13,10 +13,10 @@ class QuangBaseOverlayComponent {
|
|
|
13
13
|
this.payload = input();
|
|
14
14
|
this.positionPair = signal(null);
|
|
15
15
|
}
|
|
16
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
17
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.
|
|
16
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangBaseOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: QuangBaseOverlayComponent, isStandalone: true, selector: "quang-base-overlay-component", inputs: { overlayContent: { classPropertyName: "overlayContent", publicName: "overlayContent", isSignal: true, isRequired: true, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true }); }
|
|
18
18
|
}
|
|
19
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
19
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangBaseOverlayComponent, decorators: [{
|
|
20
20
|
type: Component,
|
|
21
21
|
args: [{
|
|
22
22
|
selector: 'quang-base-overlay-component',
|
|
@@ -197,10 +197,10 @@ class QuangBaseOverlayDirective {
|
|
|
197
197
|
ngOnDestroy() {
|
|
198
198
|
this.detachOverlay();
|
|
199
199
|
}
|
|
200
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
201
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.
|
|
200
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangBaseOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
201
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: QuangBaseOverlayDirective, isStandalone: true, inputs: { scrollCloseThreshold: { classPropertyName: "scrollCloseThreshold", publicName: "scrollCloseThreshold", isSignal: true, isRequired: false, transformFunction: null }, showMethod: { classPropertyName: "showMethod", publicName: "showMethod", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, quangOverlayPayload: { classPropertyName: "quangOverlayPayload", publicName: "quangOverlayPayload", isSignal: true, isRequired: false, transformFunction: null }, overlayPosition: { classPropertyName: "overlayPosition", publicName: "overlayPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()", "mouseenter": "onHover()", "mouseleave": "onLeave()" } }, ngImport: i0 }); }
|
|
202
202
|
}
|
|
203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangBaseOverlayDirective, decorators: [{
|
|
204
204
|
type: Directive
|
|
205
205
|
}], propDecorators: { onClick: [{
|
|
206
206
|
type: HostListener,
|
|
@@ -337,10 +337,10 @@ class CustomViewportRuler {
|
|
|
337
337
|
? { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }
|
|
338
338
|
: { width: 0, height: 0 };
|
|
339
339
|
}
|
|
340
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
341
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.
|
|
340
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CustomViewportRuler, deps: [{ token: i1.Platform }, { token: i0.NgZone }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
341
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CustomViewportRuler, providedIn: 'root' }); }
|
|
342
342
|
}
|
|
343
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
343
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: CustomViewportRuler, decorators: [{
|
|
344
344
|
type: Injectable,
|
|
345
345
|
args: [{ providedIn: 'root' }]
|
|
346
346
|
}], ctorParameters: () => [{ type: i1.Platform }, { type: i0.NgZone }, { type: undefined, decorators: [{
|
|
@@ -40,10 +40,10 @@ class QuangToastService {
|
|
|
40
40
|
this.currentToast.set(null);
|
|
41
41
|
patchState(this.toastState, { count: this.count() - 1 });
|
|
42
42
|
}
|
|
43
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
44
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.
|
|
43
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
44
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangToastService, providedIn: 'root' }); }
|
|
45
45
|
}
|
|
46
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangToastService, decorators: [{
|
|
47
47
|
type: Injectable,
|
|
48
48
|
args: [{
|
|
49
49
|
providedIn: 'root',
|
|
@@ -89,10 +89,10 @@ class QuangToastComponent {
|
|
|
89
89
|
close() {
|
|
90
90
|
this.toastService().closeToast();
|
|
91
91
|
}
|
|
92
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
93
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.
|
|
92
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
93
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: QuangToastComponent, isStandalone: true, selector: "quang-toast", inputs: { showAtLeastFor: { classPropertyName: "showAtLeastFor", publicName: "showAtLeastFor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [class.hide]=\"!isShowing()\"\n [class.show]=\"isShowing()\"\n [ngClass]=\"[_currentToast()?.position ?? '', _currentToast()?.type ?? '']\"\n aria-atomic=\"true\"\n aria-live=\"assertive\"\n class=\"toast fade\"\n role=\"alert\"\n>\n @if (!_currentToast()?.hideHeader) {\n <div class=\"toast-header\">\n @if (!_currentToast()?.customIcon) {\n <span\n [ngClass]=\"_currentToast()?.type\"\n class=\"rounded me-2\"\n ></span>\n }\n @if (_currentToast()?.customIcon) {\n <img\n [src]=\"_currentToast()?.customIcon\"\n alt=\"\"\n />\n }\n @if (_currentToast()?.title) {\n <strong class=\"me-auto\">{{ _currentToast()?.title | transloco }}</strong>\n }\n @if (_currentToast()?.date) {\n <small>{{ _currentToast()?.date ?? '' | date: _currentToast()?.dateFormat }}</small>\n }\n @if (_currentToast()?.showCloseButton) {\n <button\n (click)=\"close()\"\n aria-label=\"Close\"\n class=\"ms-2 mb-1 btn-close\"\n data-dismiss=\"toast\"\n type=\"button\"\n >\n <span aria-hidden=\"true\"></span>\n </button>\n }\n </div>\n }\n @if (_currentToast()?.text) {\n <div class=\"toast-body\">\n {{ _currentToast()?.text?.trim() | transloco: { textValue: _currentToast()?.textValue?.trim() } }}\n </div>\n }\n <ng-container *ngTemplateOutlet=\"_currentToast()?.customTemplate ?? null\"></ng-container>\n</div>\n", styles: [".toast{position:fixed;min-width:200px;z-index:999999}.toast.top-left{top:2rem;left:1rem}.toast.top-right{top:2rem;right:1rem}.toast.bottom-left{bottom:1rem;left:1rem}.toast.bottom-right{bottom:1rem;right:1rem}.toast.center{top:50%;left:50%;transform:translate(-50%,-50%)}.toast.top-center{top:2rem;left:50%;transform:translate(-50%)}.toast.bottom-center{bottom:1rem;left:50%;transform:translate(-50%)}.toast .toast-header{background-color:unset}.toast .toast-header .rounded{height:1.125rem;width:1.125rem;display:inline-block}.toast .toast-header .rounded.success{background:#28a745}.toast .toast-header .rounded.warning{background:#ffc107}.toast .toast-header .rounded.error{background:#dc3545}.toast .toast-header button:focus{box-shadow:unset}.toast small{margin-left:1rem}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
94
94
|
}
|
|
95
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
95
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangToastComponent, decorators: [{
|
|
96
96
|
type: Component,
|
|
97
97
|
args: [{ selector: 'quang-toast', imports: [OverlayModule, NgClass, TranslocoPipe, DatePipe, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class.hide]=\"!isShowing()\"\n [class.show]=\"isShowing()\"\n [ngClass]=\"[_currentToast()?.position ?? '', _currentToast()?.type ?? '']\"\n aria-atomic=\"true\"\n aria-live=\"assertive\"\n class=\"toast fade\"\n role=\"alert\"\n>\n @if (!_currentToast()?.hideHeader) {\n <div class=\"toast-header\">\n @if (!_currentToast()?.customIcon) {\n <span\n [ngClass]=\"_currentToast()?.type\"\n class=\"rounded me-2\"\n ></span>\n }\n @if (_currentToast()?.customIcon) {\n <img\n [src]=\"_currentToast()?.customIcon\"\n alt=\"\"\n />\n }\n @if (_currentToast()?.title) {\n <strong class=\"me-auto\">{{ _currentToast()?.title | transloco }}</strong>\n }\n @if (_currentToast()?.date) {\n <small>{{ _currentToast()?.date ?? '' | date: _currentToast()?.dateFormat }}</small>\n }\n @if (_currentToast()?.showCloseButton) {\n <button\n (click)=\"close()\"\n aria-label=\"Close\"\n class=\"ms-2 mb-1 btn-close\"\n data-dismiss=\"toast\"\n type=\"button\"\n >\n <span aria-hidden=\"true\"></span>\n </button>\n }\n </div>\n }\n @if (_currentToast()?.text) {\n <div class=\"toast-body\">\n {{ _currentToast()?.text?.trim() | transloco: { textValue: _currentToast()?.textValue?.trim() } }}\n </div>\n }\n <ng-container *ngTemplateOutlet=\"_currentToast()?.customTemplate ?? null\"></ng-container>\n</div>\n", styles: [".toast{position:fixed;min-width:200px;z-index:999999}.toast.top-left{top:2rem;left:1rem}.toast.top-right{top:2rem;right:1rem}.toast.bottom-left{bottom:1rem;left:1rem}.toast.bottom-right{bottom:1rem;right:1rem}.toast.center{top:50%;left:50%;transform:translate(-50%,-50%)}.toast.top-center{top:2rem;left:50%;transform:translate(-50%)}.toast.bottom-center{bottom:1rem;left:50%;transform:translate(-50%)}.toast .toast-header{background-color:unset}.toast .toast-header .rounded{height:1.125rem;width:1.125rem;display:inline-block}.toast .toast-header .rounded.success{background:#28a745}.toast .toast-header .rounded.warning{background:#ffc107}.toast .toast-header .rounded.error{background:#dc3545}.toast .toast-header button:focus{box-shadow:unset}.toast small{margin-left:1rem}\n"] }]
|
|
98
98
|
}] });
|
|
@@ -11,8 +11,8 @@ class QuangTooltipComponent {
|
|
|
11
11
|
this.positionPair = signal(null);
|
|
12
12
|
this.payload = input();
|
|
13
13
|
}
|
|
14
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
15
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.
|
|
14
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: QuangTooltipComponent, isStandalone: true, selector: "quang-tooltip", inputs: { overlayContent: { classPropertyName: "overlayContent", publicName: "overlayContent", isSignal: true, isRequired: true, transformFunction: null }, quangTooltipPosition: { classPropertyName: "quangTooltipPosition", publicName: "quangTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (overlayContent()) {\n <div\n @tooltip\n class=\"quang-tooltip\"\n >\n {{ overlayContent() }}\n </div>\n}\n", styles: [".quang-tooltip{background-color:var(--bs-body-color);color:var(--bs-body-bg);padding:.5rem;border-radius:5px;font-size:.75rem;opacity:0}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }], animations: [
|
|
16
16
|
trigger('tooltip', [
|
|
17
17
|
state('*', style({ opacity: 1 })),
|
|
18
18
|
transition(':enter', [style({ opacity: 0 }), animate(200, style({ opacity: 1 }))]),
|
|
@@ -20,7 +20,7 @@ class QuangTooltipComponent {
|
|
|
20
20
|
]),
|
|
21
21
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
22
22
|
}
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangTooltipComponent, decorators: [{
|
|
24
24
|
type: Component,
|
|
25
25
|
args: [{ selector: 'quang-tooltip', imports: [OverlayModule], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
26
26
|
trigger('tooltip', [
|
|
@@ -38,10 +38,10 @@ class QuangTooltipDirective extends QuangBaseOverlayDirective {
|
|
|
38
38
|
this.content = input.required({ alias: 'quangTooltip' });
|
|
39
39
|
this.showMethod = input('hover');
|
|
40
40
|
}
|
|
41
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
42
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.
|
|
41
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangTooltipDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
42
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: QuangTooltipDirective, isStandalone: true, selector: "[quangTooltip]", inputs: { content: { classPropertyName: "content", publicName: "quangTooltip", isSignal: true, isRequired: true, transformFunction: null }, showMethod: { classPropertyName: "showMethod", publicName: "showMethod", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
43
43
|
}
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
44
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangTooltipDirective, decorators: [{
|
|
45
45
|
type: Directive,
|
|
46
46
|
args: [{
|
|
47
47
|
selector: '[quangTooltip]',
|
|
@@ -18,10 +18,10 @@ class QuangTranslationLoaderService {
|
|
|
18
18
|
getTranslation(lang) {
|
|
19
19
|
return this.httpClient.get(`${this.translationBasePath ?? './'}assets/i18n/${lang}.json`);
|
|
20
20
|
}
|
|
21
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
22
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.
|
|
21
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangTranslationLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
22
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangTranslationLoaderService }); }
|
|
23
23
|
}
|
|
24
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
24
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangTranslationLoaderService, decorators: [{
|
|
25
25
|
type: Injectable
|
|
26
26
|
}], propDecorators: { translationBasePath: [{
|
|
27
27
|
type: Optional
|
|
@@ -50,10 +50,10 @@ class QuangTranslationService {
|
|
|
50
50
|
setTranslationKey(key, value, options) {
|
|
51
51
|
return this._translocoService.setTranslationKey(key, value, options);
|
|
52
52
|
}
|
|
53
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.
|
|
54
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.
|
|
53
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangTranslationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
54
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangTranslationService }); }
|
|
55
55
|
}
|
|
56
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.
|
|
56
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: QuangTranslationService, decorators: [{
|
|
57
57
|
type: Injectable
|
|
58
58
|
}] });
|
|
59
59
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "quang",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "20.1.
|
|
4
|
+
"version": "20.1.6",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"tslib": "^2.3.0"
|
|
7
7
|
},
|
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
"@angular/common": "^20.0.0",
|
|
17
17
|
"@angular/core": "^20.0.0",
|
|
18
18
|
"@angular/forms": "^20.0.0",
|
|
19
|
-
"@capacitor/app": "^
|
|
20
|
-
"@capacitor/browser": "^
|
|
21
|
-
"@capacitor/core": "^
|
|
19
|
+
"@capacitor/app": "^7.0.0",
|
|
20
|
+
"@capacitor/browser": "^7.0.0",
|
|
21
|
+
"@capacitor/core": "^7.0.0",
|
|
22
22
|
"@jsverse/transloco": "^7.5.0",
|
|
23
23
|
"@ngrx/signals": "^19.0.0",
|
|
24
24
|
"air-datepicker": "^3.5.0",
|
|
@@ -67,14 +67,14 @@
|
|
|
67
67
|
"types": "./auth/index.d.ts",
|
|
68
68
|
"default": "./fesm2022/quang-auth.mjs"
|
|
69
69
|
},
|
|
70
|
-
"./device": {
|
|
71
|
-
"types": "./device/index.d.ts",
|
|
72
|
-
"default": "./fesm2022/quang-device.mjs"
|
|
73
|
-
},
|
|
74
70
|
"./data-handling": {
|
|
75
71
|
"types": "./data-handling/index.d.ts",
|
|
76
72
|
"default": "./fesm2022/quang-data-handling.mjs"
|
|
77
73
|
},
|
|
74
|
+
"./device": {
|
|
75
|
+
"types": "./device/index.d.ts",
|
|
76
|
+
"default": "./fesm2022/quang-device.mjs"
|
|
77
|
+
},
|
|
78
78
|
"./forms": {
|
|
79
79
|
"types": "./forms/index.d.ts",
|
|
80
80
|
"default": "./fesm2022/quang-forms.mjs"
|
|
@@ -83,14 +83,14 @@
|
|
|
83
83
|
"types": "./loader/index.d.ts",
|
|
84
84
|
"default": "./fesm2022/quang-loader.mjs"
|
|
85
85
|
},
|
|
86
|
-
"./translation": {
|
|
87
|
-
"types": "./translation/index.d.ts",
|
|
88
|
-
"default": "./fesm2022/quang-translation.mjs"
|
|
89
|
-
},
|
|
90
86
|
"./shared": {
|
|
91
87
|
"types": "./shared/index.d.ts",
|
|
92
88
|
"default": "./fesm2022/quang-shared.mjs"
|
|
93
89
|
},
|
|
90
|
+
"./translation": {
|
|
91
|
+
"types": "./translation/index.d.ts",
|
|
92
|
+
"default": "./fesm2022/quang-translation.mjs"
|
|
93
|
+
},
|
|
94
94
|
"./auth/mobile": {
|
|
95
95
|
"types": "./auth/mobile/index.d.ts",
|
|
96
96
|
"default": "./fesm2022/quang-auth-mobile.mjs"
|
|
@@ -103,30 +103,30 @@
|
|
|
103
103
|
"types": "./components/checkbox/index.d.ts",
|
|
104
104
|
"default": "./fesm2022/quang-components-checkbox.mjs"
|
|
105
105
|
},
|
|
106
|
-
"./components/input": {
|
|
107
|
-
"types": "./components/input/index.d.ts",
|
|
108
|
-
"default": "./fesm2022/quang-components-input.mjs"
|
|
109
|
-
},
|
|
110
106
|
"./components/date": {
|
|
111
107
|
"types": "./components/date/index.d.ts",
|
|
112
108
|
"default": "./fesm2022/quang-components-date.mjs"
|
|
113
109
|
},
|
|
114
|
-
"./components/
|
|
115
|
-
"types": "./components/
|
|
116
|
-
"default": "./fesm2022/quang-components-
|
|
110
|
+
"./components/input": {
|
|
111
|
+
"types": "./components/input/index.d.ts",
|
|
112
|
+
"default": "./fesm2022/quang-components-input.mjs"
|
|
117
113
|
},
|
|
118
114
|
"./components/select": {
|
|
119
115
|
"types": "./components/select/index.d.ts",
|
|
120
116
|
"default": "./fesm2022/quang-components-select.mjs"
|
|
121
117
|
},
|
|
122
|
-
"./components/
|
|
123
|
-
"types": "./components/
|
|
124
|
-
"default": "./fesm2022/quang-components-
|
|
118
|
+
"./components/paginator": {
|
|
119
|
+
"types": "./components/paginator/index.d.ts",
|
|
120
|
+
"default": "./fesm2022/quang-components-paginator.mjs"
|
|
125
121
|
},
|
|
126
122
|
"./components/shared": {
|
|
127
123
|
"types": "./components/shared/index.d.ts",
|
|
128
124
|
"default": "./fesm2022/quang-components-shared.mjs"
|
|
129
125
|
},
|
|
126
|
+
"./components/table": {
|
|
127
|
+
"types": "./components/table/index.d.ts",
|
|
128
|
+
"default": "./fesm2022/quang-components-table.mjs"
|
|
129
|
+
},
|
|
130
130
|
"./components/wysiwyg": {
|
|
131
131
|
"types": "./components/wysiwyg/index.d.ts",
|
|
132
132
|
"default": "./fesm2022/quang-components-wysiwyg.mjs"
|
|
@@ -143,13 +143,13 @@
|
|
|
143
143
|
"types": "./overlay/toast/index.d.ts",
|
|
144
144
|
"default": "./fesm2022/quang-overlay-toast.mjs"
|
|
145
145
|
},
|
|
146
|
-
"./overlay/tooltip": {
|
|
147
|
-
"types": "./overlay/tooltip/index.d.ts",
|
|
148
|
-
"default": "./fesm2022/quang-overlay-tooltip.mjs"
|
|
149
|
-
},
|
|
150
146
|
"./overlay/shared": {
|
|
151
147
|
"types": "./overlay/shared/index.d.ts",
|
|
152
148
|
"default": "./fesm2022/quang-overlay-shared.mjs"
|
|
149
|
+
},
|
|
150
|
+
"./overlay/tooltip": {
|
|
151
|
+
"types": "./overlay/tooltip/index.d.ts",
|
|
152
|
+
"default": "./fesm2022/quang-overlay-tooltip.mjs"
|
|
153
153
|
}
|
|
154
154
|
}
|
|
155
155
|
}
|