@tekus/design-system 5.16.0 → 5.17.0
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/tekus-design-system-components-autocomplete.mjs +3 -3
- package/fesm2022/tekus-design-system-components-badge.mjs +3 -3
- package/fesm2022/tekus-design-system-components-button.mjs +3 -3
- package/fesm2022/tekus-design-system-components-checkbox.mjs +3 -3
- package/fesm2022/tekus-design-system-components-date-picker.mjs +3 -3
- package/fesm2022/tekus-design-system-components-fallback-view.mjs +3 -3
- package/fesm2022/tekus-design-system-components-icon.mjs +3 -3
- package/fesm2022/tekus-design-system-components-input-number.mjs +3 -3
- package/fesm2022/tekus-design-system-components-input-text.mjs +3 -3
- package/fesm2022/tekus-design-system-components-modal.mjs +6 -6
- package/fesm2022/tekus-design-system-components-multiselect.mjs +3 -3
- package/fesm2022/tekus-design-system-components-pagination.mjs +3 -3
- package/fesm2022/tekus-design-system-components-radio-button.mjs +3 -3
- package/fesm2022/tekus-design-system-components-select.mjs +3 -3
- package/fesm2022/tekus-design-system-components-table.mjs +3 -3
- package/fesm2022/tekus-design-system-components-tabs.mjs +3 -3
- package/fesm2022/tekus-design-system-components-tag.mjs +3 -3
- package/fesm2022/tekus-design-system-components-textarea.mjs +3 -3
- package/fesm2022/tekus-design-system-components-toolbar.mjs +3 -3
- package/fesm2022/tekus-design-system-components-tooltip.mjs +3 -3
- package/fesm2022/tekus-design-system-directives-gird-item.mjs +3 -3
- package/package.json +5 -5
|
@@ -192,8 +192,8 @@ class AutocompleteComponent {
|
|
|
192
192
|
get effectiveControl() {
|
|
193
193
|
return this.ngControl?.control || this.control();
|
|
194
194
|
}
|
|
195
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
196
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
195
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
196
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: AutocompleteComponent, isStandalone: true, selector: "tk-autocomplete", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", modelChange: "modelChange" }, providers: [
|
|
197
197
|
{
|
|
198
198
|
provide: NG_VALUE_ACCESSOR,
|
|
199
199
|
useExisting: forwardRef(() => AutocompleteComponent),
|
|
@@ -201,7 +201,7 @@ class AutocompleteComponent {
|
|
|
201
201
|
},
|
|
202
202
|
], viewQueries: [{ propertyName: "autoComplete", first: true, predicate: AutoComplete, descendants: true }], ngImport: i0, template: "<p-floatlabel class=\"w-full\">\n <div class=\"tk-autocomplete-wrapper\">\n @if (icon()) {\n <tk-icon [icon]=\"icon()\" class=\"tk-autocomplete-icon\"></tk-icon>\n }\n <p-autocomplete\n [ngModel]=\"value\"\n (ngModelChange)=\"handleChange($event)\"\n [disabled]=\"disabled()\"\n [inputId]=\"id()\"\n [typeahead]=\"false\"\n multiple\n fluid\n (onBlur)=\"handleBlur()\"\n [class.ng-invalid]=\"effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)\"\n [class.ng-dirty]=\"effectiveControl?.dirty\"\n [class.ng-touched]=\"effectiveControl?.touched\" />\n <label [for]=\"id()\">{{ label() }}</label>\n </div>\n</p-floatlabel>\n\n<div class=\"tk-autocomplete-bottom\">\n <div class=\"tk-autocomplete-messages\">\n @if ((effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)) && errorMessage()) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n } @else if (hint()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n }\n </div>\n</div>\n", styles: [":host ::ng-deep .p-autocomplete-input-multiple{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-autocomplete-input-multiple:focus{border-color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep p-autocomplete{flex:1;width:100%}:host ::ng-deep .tk-autocomplete-wrapper:has(.tk-autocomplete-icon) .p-autocomplete-input-multiple{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep p-autocomplete.ng-invalid.ng-dirty .p-autocomplete-input-multiple,:host ::ng-deep p-autocomplete.ng-invalid.ng-touched .p-autocomplete-input-multiple{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-floatlabel .tk-autocomplete-wrapper:has(.tk-autocomplete-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(p-autocomplete.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(p-autocomplete.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)!important}:host ::ng-deep .p-autocomplete-chip-icon{display:flex;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-autocomplete-chip{border-radius:var(--tk-borderRadius-full, 999px)!important;color:var(--tk-surface-700, #424243)}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-autocomplete-input-multiple-label{gap:.313rem;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-autocomplete-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-autocomplete-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}:host ::ng-deep .tk-autocomplete-wrapper{position:relative;display:flex;align-items:center;width:100%}:host ::ng-deep .tk-autocomplete-icon{position:absolute;left:0;top:50%;transform:translateY(-50%)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"], outputs: ["iconChange", "styleIconChange", "colorChange", "sizeChange", "disabledChange"] }] }); }
|
|
203
203
|
}
|
|
204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
205
205
|
type: Component,
|
|
206
206
|
args: [{ selector: 'tk-autocomplete', standalone: true, imports: [FormsModule, AutoComplete, FloatLabelModule, MessageModule, IconComponent], providers: [
|
|
207
207
|
{
|
|
@@ -41,10 +41,10 @@ class BadgeComponent {
|
|
|
41
41
|
return severityMap[this.severity()];
|
|
42
42
|
});
|
|
43
43
|
}
|
|
44
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
45
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
44
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
45
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: BadgeComponent, isStandalone: true, selector: "tk-badge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p-badge [value]=\"value()\" [severity]=\"primeSeverity()\" />\n", styles: [":host ::ng-deep .p-badge{font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-legal-s, .625rem);border-radius:var(--tk-borderRadius-full, 50%)}:host ::ng-deep .p-badge-success{background-color:var(--tk-color-base-primary-500);color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .p-badge-secondary{background-color:var(--tk-color-base-surface-300, #d2d2d2);color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .p-badge-contrast{background-color:var(--tk-color-base-surface-950, #191a1b);color:var(--tk-color-base-surface-0, #ffffff)}\n"], dependencies: [{ kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i1.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }] }); }
|
|
46
46
|
}
|
|
47
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
47
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
48
48
|
type: Component,
|
|
49
49
|
args: [{ selector: 'tk-badge', standalone: true, imports: [BadgeModule], template: "<p-badge [value]=\"value()\" [severity]=\"primeSeverity()\" />\n", styles: [":host ::ng-deep .p-badge{font-weight:var(--tk-font-weight-400, 400);font-size:var(--tk-font-size-legal-s, .625rem);border-radius:var(--tk-borderRadius-full, 50%)}:host ::ng-deep .p-badge-success{background-color:var(--tk-color-base-primary-500);color:var(--tk-color-base-surface-0, #ffffff)}:host ::ng-deep .p-badge-secondary{background-color:var(--tk-color-base-surface-300, #d2d2d2);color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .p-badge-contrast{background-color:var(--tk-color-base-surface-950, #191a1b);color:var(--tk-color-base-surface-0, #ffffff)}\n"] }]
|
|
50
50
|
}] });
|
|
@@ -95,10 +95,10 @@ class ButtonComponent {
|
|
|
95
95
|
if (!this.disabled)
|
|
96
96
|
this.clicked.emit('mouse');
|
|
97
97
|
}
|
|
98
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
99
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
98
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
99
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ButtonComponent, isStandalone: true, selector: "tk-button", inputs: { label: "label", disabled: "disabled", type: "type", severity: "severity", variant: "variant", link: "link", icon: "icon", tooltipText: "tooltipText" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<p-button\n class=\"tk-button\"\n [label]=\"label\"\n [disabled]=\"disabled\"\n [type]=\"type\"\n [severity]=\"link ? null : severity\"\n [variant]=\"variant\"\n [link]=\"link\"\n [pTooltip]=\"tooltipText\"\n tooltipPosition=\"top\"\n (click)=\"onButtonClick()\"\n (keydown.enter)=\"onButtonClick()\"\n (keydown.space)=\"onButtonClick()\">\n\n @if (icon) {\n <tk-icon [icon]=\"icon\"></tk-icon>\n }\n</p-button>\n", styles: [":host ::ng-deep .p-button.p-button-primary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-color-base-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-color-base-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-color-base-primary-400, #45338c)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label{color:var(--tk-color-base-surface-900, #191A1B)!important}:host ::ng-deep .p-button.p-button-secondary.p-button-outlined .p-button-label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{font-weight:var(--tk-font-weight-400, 400)}:host ::ng-deep p-button{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"], outputs: ["iconChange", "styleIconChange", "colorChange", "sizeChange", "disabledChange"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
|
|
100
100
|
}
|
|
101
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
101
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
102
102
|
type: Component,
|
|
103
103
|
args: [{ selector: 'tk-button', standalone: true, imports: [ButtonModule, IconComponent, Tooltip], template: "<p-button\n class=\"tk-button\"\n [label]=\"label\"\n [disabled]=\"disabled\"\n [type]=\"type\"\n [severity]=\"link ? null : severity\"\n [variant]=\"variant\"\n [link]=\"link\"\n [pTooltip]=\"tooltipText\"\n tooltipPosition=\"top\"\n (click)=\"onButtonClick()\"\n (keydown.enter)=\"onButtonClick()\"\n (keydown.space)=\"onButtonClick()\">\n\n @if (icon) {\n <tk-icon [icon]=\"icon\"></tk-icon>\n }\n</p-button>\n", styles: [":host ::ng-deep .p-button.p-button-primary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{color:var(--tk-color-base-surface-0, #ffffff)!important}:host ::ng-deep .p-button.p-button-link .p-button-label{color:var(--tk-color-base-primary-500, #16006f)!important}:host ::ng-deep .p-button.p-button-link:hover .p-button-label{color:var(--tk-color-base-primary-400, #45338c)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label{color:var(--tk-color-base-surface-900, #191A1B)!important}:host ::ng-deep .p-button.p-button-secondary.p-button-outlined .p-button-label{color:var(--tk-color-base-surface-500, #8a8a8b)!important}:host ::ng-deep .p-button.p-button-secondary .p-button-label,:host ::ng-deep .p-button.p-button-danger .p-button-label{font-weight:var(--tk-font-weight-400, 400)}:host ::ng-deep p-button{display:inline-block}\n"] }]
|
|
104
104
|
}], propDecorators: { label: [{
|
|
@@ -130,10 +130,10 @@ class CheckboxComponent {
|
|
|
130
130
|
this.onTouched();
|
|
131
131
|
this.effectiveControl.markAsTouched();
|
|
132
132
|
}
|
|
133
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
134
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
133
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
134
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: CheckboxComponent, isStandalone: true, selector: "tk-checkbox", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, binary: { classPropertyName: "binary", publicName: "binary", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange" }, ngImport: i0, template: "<div class=\"tk-checkbox-wrapper\">\n <div class=\"tk-checkbox-group\" [class.tk-disabled]=\"disabled()\">\n <p-checkbox\n [inputId]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [binary]=\"binary()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"model()\"\n (ngModelChange)=\"onModelChange($event)\"\n [class.ng-invalid]=\"effectiveControl.invalid\"\n [class.ng-dirty]=\"effectiveControl.dirty\"\n [class.ng-touched]=\"effectiveControl.touched\">\n </p-checkbox>\n @if(label()){\n <label [for]=\"inputId()\" class=\"tk-checkbox-label\"> {{ label() }} </label>\n }\n </div>\n \n <div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n }\n </div>\n </div>\n</div>\n", styles: [":host ::ng-deep .tk-checkbox-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-checkbox-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-checkbox-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-checkbox-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-checkbox-label{margin-top:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .p-checkbox.p-disabled .p-checkbox-icon{color:var(--tk-color-base-surface-300, #d2d2d2)!important}:host ::ng-deep p-checkbox.ng-invalid.ng-touched .p-checkbox-box,:host ::ng-deep p-checkbox.ng-invalid.ng-dirty .p-checkbox-box{border-color:var(--tk-color-base-red-700, #cf2604)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
|
|
135
135
|
}
|
|
136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
137
137
|
type: Component,
|
|
138
138
|
args: [{ selector: 'tk-checkbox', imports: [CommonModule, ReactiveFormsModule, FormsModule, CheckboxModule, MessageModule], template: "<div class=\"tk-checkbox-wrapper\">\n <div class=\"tk-checkbox-group\" [class.tk-disabled]=\"disabled()\">\n <p-checkbox\n [inputId]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [binary]=\"binary()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"model()\"\n (ngModelChange)=\"onModelChange($event)\"\n [class.ng-invalid]=\"effectiveControl.invalid\"\n [class.ng-dirty]=\"effectiveControl.dirty\"\n [class.ng-touched]=\"effectiveControl.touched\">\n </p-checkbox>\n @if(label()){\n <label [for]=\"inputId()\" class=\"tk-checkbox-label\"> {{ label() }} </label>\n }\n </div>\n \n <div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n }\n </div>\n </div>\n</div>\n", styles: [":host ::ng-deep .tk-checkbox-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-checkbox-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-checkbox-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-checkbox-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-checkbox-label{margin-top:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .p-checkbox.p-disabled .p-checkbox-icon{color:var(--tk-color-base-surface-300, #d2d2d2)!important}:host ::ng-deep p-checkbox.ng-invalid.ng-touched .p-checkbox-box,:host ::ng-deep p-checkbox.ng-invalid.ng-dirty .p-checkbox-box{border-color:var(--tk-color-base-red-700, #cf2604)}\n"] }]
|
|
139
139
|
}], ctorParameters: () => [] });
|
|
@@ -229,10 +229,10 @@ class DatePickerComponent {
|
|
|
229
229
|
clear() {
|
|
230
230
|
this.internalControl.setValue(null);
|
|
231
231
|
}
|
|
232
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
233
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
232
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
233
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: DatePickerComponent, isStandalone: true, selector: "tk-date-picker", inputs: { selectionMode: "selectionMode", readonlyInput: "readonlyInput", disabled: "disabled", showClear: "showClear", showIcon: "showIcon", dateFormat: "dateFormat", maxDate: "maxDate", minDate: "minDate", labelText: "labelText", control: "control" }, outputs: { handleSelect: "handleSelect", handleClear: "handleClear" }, providers: [TK_DATE_PICKER_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"datepicker-container\">\n <p-floatlabel>\n <p-datepicker\n inputId=\"datepicker\"\n iconDisplay=\"input\"\n [formControl]=\"internalControl\"\n [selectionMode]=\"selectionMode\"\n [readonlyInput]=\"readonlyInput\"\n [showClear]=\"showClear\"\n [showIcon]=\"showIcon\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [disabled]=\"disabled\"\n [dateFormat]=\"dateFormat\">\n <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\n <fa-icon\n tabindex=\"0\"\n [icon]=\"faCalendarDay\"\n (keydown.enter)=\"clickCallBack($event)\"\n (keydown.space)=\"clickCallBack($event)\"\n (click)=\"clickCallBack($event)\">\n </fa-icon>\n </ng-template>\n </p-datepicker>\n\n <label for=\"datepicker\">{{ labelText }}</label>\n </p-floatlabel>\n</div>\n", styles: [":host ::ng-deep .p-datepicker{width:100%}:host ::ng-deep .p-datepicker-input{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .p-datepicker-input:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-datepicker-decade{color:var(--tk-color-text-default, #121214)}:host ::ng-deep .p-datepicker-clear-icon{color:var(--tk-surface-700, #424243);inset-inline-end:2.5rem!important}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-datepicker-day-selected-range{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}:host ::ng-deep .p-datepicker-panel{min-width:0!important;max-width:300px!important;width:100%!important}.datepicker-container{margin-top:var(--tk-spacing-base-200, 2rem)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] }); }
|
|
234
234
|
}
|
|
235
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
235
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
236
236
|
type: Component,
|
|
237
237
|
args: [{ selector: 'tk-date-picker', standalone: true, imports: [
|
|
238
238
|
FormsModule,
|
|
@@ -162,10 +162,10 @@ class FallbackViewComponent {
|
|
|
162
162
|
onLinkActionClick() {
|
|
163
163
|
this.linkAction.emit();
|
|
164
164
|
}
|
|
165
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
166
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
165
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FallbackViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
166
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: FallbackViewComponent, isStandalone: true, selector: "tk-fallback-view", inputs: { type: "type", imageSrc: "imageSrc", illustrationAlt: "illustrationAlt", title: "title", message: "message", buttonLabel: "buttonLabel", linkLabel: "linkLabel", buttonDisabled: "buttonDisabled" }, outputs: { buttonAction: "buttonAction", linkAction: "linkAction" }, ngImport: i0, template: "<div\n class=\"tk-fallback-view\"\n [class.tk-fallback-view--section]=\"type === 'section'\">\n <ng-content select=\"[image]\"></ng-content>\n @if (imageSrc) {\n <img\n [src]=\"imageSrc\"\n [alt]=\"illustrationAlt || 'fallback illustration'\"\n class=\"tk-fallback-view__image\" />\n }\n\n <ng-content select=\"[title]\"></ng-content>\n @if (title && type === 'content') {\n <h2 class=\"tk-fallback-view__title\">{{ title }}</h2>\n }\n\n <ng-content select=\"[message]\"></ng-content>\n @if (message) {\n <p class=\"tk-fallback-view__message\" [innerHTML]=\"message\"></p>\n }\n\n <ng-content select=\"[actions]\"></ng-content>\n @if (type === 'content' && (buttonLabel || linkLabel)) {\n <div class=\"tk-fallback-view__actions\">\n @if (buttonLabel) {\n <tk-button\n [label]=\"buttonLabel\"\n severity=\"primary\"\n [disabled]=\"buttonDisabled\"\n (clicked)=\"onButtonActionClick()\" />\n } @if (linkLabel) {\n <tk-button\n [label]=\"linkLabel\"\n [link]=\"true\"\n (clicked)=\"onLinkActionClick()\" />\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;width:100%}.tk-fallback-view{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--tk-spacing-gap-m, 1rem);padding:var(--tk-spacing-paddingY-xl, 1.5rem) var(--tk-spacing-paddingY-m, 1rem);margin:0 auto}.tk-fallback-view__image,.tk-fallback-view>[image]{max-width:18.75rem;max-height:18.75rem;width:auto;height:auto;object-fit:contain;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}.tk-fallback-view__title,.tk-fallback-view>[title]{font-size:var(--tk-font-size-base-150, 1.5rem);font-weight:var(--tk-font-weight-bold, 700);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__message,.tk-fallback-view>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__actions,.tk-fallback-view>[actions]{display:flex;flex-direction:column;align-items:center;gap:var(--tk-spacing-75, .75rem)}.tk-fallback-view--section{flex-direction:row;justify-content:center;align-items:center;text-align:left;gap:var(--tk-spacing-gap-m, 1rem);width:100%;min-height:3.75rem;padding:var(--tk-spacing-paddingY-xl, 1.5rem) var(--tk-spacing-paddingY-m, 1rem);background-color:var(--tk-color-base-surface-0, #ffffff);color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view--section .tk-fallback-view__image,.tk-fallback-view--section>[image]{width:3.75rem;height:3.75rem;max-width:3.75rem;max-height:3.75rem;margin-bottom:0;object-fit:contain}.tk-fallback-view--section .tk-fallback-view__message,.tk-fallback-view--section>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }, { kind: "ngmodule", type: CardModule }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
167
167
|
}
|
|
168
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
168
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: FallbackViewComponent, decorators: [{
|
|
169
169
|
type: Component,
|
|
170
170
|
args: [{ selector: 'tk-fallback-view', standalone: true, imports: [CommonModule, ButtonComponent, CardModule], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"tk-fallback-view\"\n [class.tk-fallback-view--section]=\"type === 'section'\">\n <ng-content select=\"[image]\"></ng-content>\n @if (imageSrc) {\n <img\n [src]=\"imageSrc\"\n [alt]=\"illustrationAlt || 'fallback illustration'\"\n class=\"tk-fallback-view__image\" />\n }\n\n <ng-content select=\"[title]\"></ng-content>\n @if (title && type === 'content') {\n <h2 class=\"tk-fallback-view__title\">{{ title }}</h2>\n }\n\n <ng-content select=\"[message]\"></ng-content>\n @if (message) {\n <p class=\"tk-fallback-view__message\" [innerHTML]=\"message\"></p>\n }\n\n <ng-content select=\"[actions]\"></ng-content>\n @if (type === 'content' && (buttonLabel || linkLabel)) {\n <div class=\"tk-fallback-view__actions\">\n @if (buttonLabel) {\n <tk-button\n [label]=\"buttonLabel\"\n severity=\"primary\"\n [disabled]=\"buttonDisabled\"\n (clicked)=\"onButtonActionClick()\" />\n } @if (linkLabel) {\n <tk-button\n [label]=\"linkLabel\"\n [link]=\"true\"\n (clicked)=\"onLinkActionClick()\" />\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;width:100%}.tk-fallback-view{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--tk-spacing-gap-m, 1rem);padding:var(--tk-spacing-paddingY-xl, 1.5rem) var(--tk-spacing-paddingY-m, 1rem);margin:0 auto}.tk-fallback-view__image,.tk-fallback-view>[image]{max-width:18.75rem;max-height:18.75rem;width:auto;height:auto;object-fit:contain;margin-bottom:var(--tk-spacing-base-150, 1.5rem)}.tk-fallback-view__title,.tk-fallback-view>[title]{font-size:var(--tk-font-size-base-150, 1.5rem);font-weight:var(--tk-font-weight-bold, 700);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__message,.tk-fallback-view>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400);margin:0;max-width:31.25rem;color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view__actions,.tk-fallback-view>[actions]{display:flex;flex-direction:column;align-items:center;gap:var(--tk-spacing-75, .75rem)}.tk-fallback-view--section{flex-direction:row;justify-content:center;align-items:center;text-align:left;gap:var(--tk-spacing-gap-m, 1rem);width:100%;min-height:3.75rem;padding:var(--tk-spacing-paddingY-xl, 1.5rem) var(--tk-spacing-paddingY-m, 1rem);background-color:var(--tk-color-base-surface-0, #ffffff);color:var(--tk-color-base-surface-950, #191a1b)}.tk-fallback-view--section .tk-fallback-view__image,.tk-fallback-view--section>[image]{width:3.75rem;height:3.75rem;max-width:3.75rem;max-height:3.75rem;margin-bottom:0;object-fit:contain}.tk-fallback-view--section .tk-fallback-view__message,.tk-fallback-view--section>[message]{font-size:var(--tk-font-size-base-100, 1rem);font-weight:var(--tk-font-weight-regular, 400)}\n"] }]
|
|
171
171
|
}], propDecorators: { type: [{
|
|
@@ -1160,10 +1160,10 @@ class IconComponent {
|
|
|
1160
1160
|
this.svgContent.set(this.sanitizer.bypassSecurityTrustHtml(retouchSvg));
|
|
1161
1161
|
});
|
|
1162
1162
|
}
|
|
1163
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1164
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1163
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1164
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: IconComponent, isStandalone: true, selector: "tk-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, styleIcon: { classPropertyName: "styleIcon", publicName: "styleIcon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { icon: "iconChange", styleIcon: "styleIconChange", color: "colorChange", size: "sizeChange", disabled: "disabledChange" }, ngImport: i0, template: "<div>\n @if(iconDefinition()){\n\n <fa-icon\n class=\"svg-icon svg-icon__fa\"\n [icon]=\"iconDefinition() ?? ''\"\n [attr.color]=\"color()\"\n [size]=\"sizeProp() ?? '1x'\"\n [attr.disabled]=\"disabled()\"\n ></fa-icon>\n\n } @else if(svgContent()){\n\n <div\n class=\"svg-icon svg-icon__cu\"\n [innerHTML]=\"svgContent()\"\n [style]=\"{\n '--color': color(),\n '--size': size()\n }\"\n [attr.disabled]=\"disabled()\"\n [attr.size]=\"size()\"\n [attr.color]=\"color()\"></div>\n\n }\n</div>\n", styles: [".svg-icon{display:inline-block;width:fit-content}.svg-icon[color=primary]{color:var(--tk-color-primary-500)}.svg-icon[color=secondary]{color:var(--tk-color-secondary-500)}.svg-icon[color=danger]{color:var(--tk-color-danger-500)}.svg-icon[color=warning]{color:var(--tk-color-warning-700)}.svg-icon[color=info]{color:var(--tk-color-info-500)}.svg-icon[color=light]{color:var(--tk-color-full-white)}.svg-icon[disabled=true],.svg-icon[data-disabled=true]{color:var(--tk-color-neutral-500)!important}.svg-icon__cu[size=\"2xs\"],.svg-icon__cu[data-size=\"2xs\"]{font-size:.625em}.svg-icon__cu[size=xs],.svg-icon__cu[data-size=xs]{font-size:.75em}.svg-icon__cu[size=sm],.svg-icon__cu[data-size=sm]{font-size:.875em}.svg-icon__cu[size=lg],.svg-icon__cu[data-size=lg]{font-size:1.25em}.svg-icon__cu[size=xl],.svg-icon__cu[data-size=xl]{font-size:1.5em}.svg-icon__cu[size=\"2xl\"],.svg-icon__cu[data-size=\"2xl\"]{font-size:2em}.svg-icon__cu[size=\"1x\"],.svg-icon__cu[data-size=\"1x\"]{font-size:1em}.svg-icon__cu[size=\"2x\"],.svg-icon__cu[data-size=\"2x\"]{font-size:2em}.svg-icon__cu[size=\"3x\"],.svg-icon__cu[data-size=\"3x\"]{font-size:3em}.svg-icon__cu[size=\"4x\"],.svg-icon__cu[data-size=\"4x\"]{font-size:4em}.svg-icon__cu[size=\"5x\"],.svg-icon__cu[data-size=\"5x\"]{font-size:5em}svg{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] }); }
|
|
1165
1165
|
}
|
|
1166
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1166
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: IconComponent, decorators: [{
|
|
1167
1167
|
type: Component,
|
|
1168
1168
|
args: [{ selector: 'tk-icon', standalone: true, imports: [
|
|
1169
1169
|
FontAwesomeModule
|
|
@@ -148,10 +148,10 @@ class InputNumberComponent {
|
|
|
148
148
|
this.onTouched();
|
|
149
149
|
this.effectiveControl?.markAsTouched();
|
|
150
150
|
}
|
|
151
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
152
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
151
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: InputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
152
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: InputNumberComponent, isStandalone: true, selector: "tk-input-number", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<p-floatlabel>\n <div class=\"tk-input-wrapper\">\n <p-inputnumber\n [inputId]=\"id()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"onInput($event)\"\n (onBlur)=\"onBlur()\"\n [showButtons]=\"showButtons()\"\n [disabled]=\"disabled()\"\n mode=\"decimal\"\n [useGrouping]=\"false\"\n [class.ng-invalid]=\"effectiveControl?.invalid\"\n [class.ng-dirty]=\"effectiveControl?.dirty\"\n [class.ng-touched]=\"effectiveControl?.touched\" />\n\n <label [for]=\"id()\">{{ label() }}</label>\n </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n @if ((effectiveControl?.invalid && (effectiveControl?.dirty ||\n effectiveControl?.touched)) && errorMessage()) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{\n errorMessage()\n }}</p-message>\n }\n </div>\n</div>\n", styles: [":host ::ng-deep .p-inputnumber-input{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent}:host ::ng-deep .p-inputnumber-input:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-inputnumber-input.ng-invalid.ng-dirty,:host ::ng-deep .p-inputnumber-input.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-inputnumber-input:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .p-inputnumber{display:flex}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(input:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(input:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(input.has-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(.p-inputnumber-input.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-inputnumber-input.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-wrapper{position:relative}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-input-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
|
|
153
153
|
}
|
|
154
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
154
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: InputNumberComponent, decorators: [{
|
|
155
155
|
type: Component,
|
|
156
156
|
args: [{ selector: 'tk-input-number', standalone: true, imports: [
|
|
157
157
|
CommonModule,
|
|
@@ -206,10 +206,10 @@ class InputTextComponent {
|
|
|
206
206
|
this.control().setValue('');
|
|
207
207
|
this.isWriting = false;
|
|
208
208
|
}
|
|
209
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
210
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
209
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
210
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: InputTextComponent, isStandalone: true, selector: "tk-input-text", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<p-floatlabel>\n <div class=\"tk-input-wrapper\">\n @if (icon()) {\n <tk-icon [icon]=\"icon()\" class=\"tk-input-icon\"></tk-icon>\n }\n <div class=\"tk-input-prefix\">\n <ng-content select=\"[tk-prefix]\"></ng-content>\n </div>\n \n <input \n pInputText \n [id]=\"id()\" \n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [type]=\"type()\" \n [attr.maxlength]=\"maxLength()\"\n [class.has-icon]=\"icon()\"\n [class.has-clear]=\"clearable()\"\n [disabled]=\"disabled()\"\n [class.ng-invalid]=\"effectiveControl.invalid\"\n [class.ng-dirty]=\"effectiveControl.dirty\"\n [class.ng-touched]=\"effectiveControl.touched\"\n />\n \n <label [for]=\"id()\">{{ label() }}</label>\n \n @if (clearable() && value()) {\n <tk-icon \n icon=\"xmark\" \n class=\"tk-clear-icon\" \n (click)=\"clear()\" \n (keydown.enter)=\"clear()\" \n (keydown.space)=\"clear()\">\n </tk-icon>\n }\n <div class=\"tk-input-suffix\">\n <ng-content select=\"[tk-suffix]\"></ng-content>\n </div>\n </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n } @else if (hint()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n }\n </div>\n\n @if (maxLength()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\" class=\"tk-character-counter\">\n {{ counterText() }}\n </p-message>\n }\n</div>", styles: [":host ::ng-deep .p-inputtext{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent}:host ::ng-deep .p-inputtext:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-inputtext.ng-invalid.ng-dirty,:host ::ng-deep .p-inputtext.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-inputtext.has-icon{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-inputtext:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .tk-input-wrapper:has(.tk-input-suffix:not(:empty)) .p-inputtext{padding-right:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .tk-input-wrapper:has(.tk-input-prefix:not(:empty)) .p-inputtext{padding-left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(input:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(input:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(input.has-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(.tk-input-prefix:not(:empty)) label{left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-wrapper{position:relative;display:flex;align-items:center;width:100%}:host ::ng-deep .tk-input-icon{position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--tk-color-base-surface-400, #cecdcd);pointer-events:none;z-index:1}:host ::ng-deep .tk-input-prefix{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-left:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-prefix:empty{display:none}:host ::ng-deep .tk-clear-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--tk-color-base-surface-700, #424243);z-index:1}:host ::ng-deep .tk-input-suffix{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-right:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-suffix:empty{display:none}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .tk-character-counter{white-space:nowrap;align-self:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"], outputs: ["iconChange", "styleIconChange", "colorChange", "sizeChange", "disabledChange"] }] }); }
|
|
211
211
|
}
|
|
212
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
212
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: InputTextComponent, decorators: [{
|
|
213
213
|
type: Component,
|
|
214
214
|
args: [{ selector: 'tk-input-text', imports: [CommonModule, ReactiveFormsModule, InputTextModule, FloatLabelModule, MessageModule, IconComponent], template: "<p-floatlabel>\n <div class=\"tk-input-wrapper\">\n @if (icon()) {\n <tk-icon [icon]=\"icon()\" class=\"tk-input-icon\"></tk-icon>\n }\n <div class=\"tk-input-prefix\">\n <ng-content select=\"[tk-prefix]\"></ng-content>\n </div>\n \n <input \n pInputText \n [id]=\"id()\" \n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [type]=\"type()\" \n [attr.maxlength]=\"maxLength()\"\n [class.has-icon]=\"icon()\"\n [class.has-clear]=\"clearable()\"\n [disabled]=\"disabled()\"\n [class.ng-invalid]=\"effectiveControl.invalid\"\n [class.ng-dirty]=\"effectiveControl.dirty\"\n [class.ng-touched]=\"effectiveControl.touched\"\n />\n \n <label [for]=\"id()\">{{ label() }}</label>\n \n @if (clearable() && value()) {\n <tk-icon \n icon=\"xmark\" \n class=\"tk-clear-icon\" \n (click)=\"clear()\" \n (keydown.enter)=\"clear()\" \n (keydown.space)=\"clear()\">\n </tk-icon>\n }\n <div class=\"tk-input-suffix\">\n <ng-content select=\"[tk-suffix]\"></ng-content>\n </div>\n </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n } @else if (hint()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n }\n </div>\n\n @if (maxLength()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\" class=\"tk-character-counter\">\n {{ counterText() }}\n </p-message>\n }\n</div>", styles: [":host ::ng-deep .p-inputtext{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:0;padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent}:host ::ng-deep .p-inputtext:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-inputtext.ng-invalid.ng-dirty,:host ::ng-deep .p-inputtext.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-inputtext.has-icon{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-inputtext:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .tk-input-wrapper:has(.tk-input-suffix:not(:empty)) .p-inputtext{padding-right:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .tk-input-wrapper:has(.tk-input-prefix:not(:empty)) .p-inputtext{padding-left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(input:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(input:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(input.has-icon) label{left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-floatlabel:has(.tk-input-prefix:not(:empty)) label{left:var(--tk-spacing-base-300, 3rem)}:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-inputtext.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-wrapper{position:relative;display:flex;align-items:center;width:100%}:host ::ng-deep .tk-input-icon{position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--tk-color-base-surface-400, #cecdcd);pointer-events:none;z-index:1}:host ::ng-deep .tk-input-prefix{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-left:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-prefix:empty{display:none}:host ::ng-deep .tk-clear-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--tk-color-base-surface-700, #424243);z-index:1}:host ::ng-deep .tk-input-suffix{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;padding-right:var(--tk-spacing-base-25, .25rem);z-index:1}:host ::ng-deep .tk-input-suffix:empty{display:none}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .tk-character-counter{white-space:nowrap;align-self:flex-start}\n"] }]
|
|
215
215
|
}], ctorParameters: () => [] });
|
|
@@ -138,10 +138,10 @@ class ModalComponent {
|
|
|
138
138
|
this.returnValueOnClose = returnValue;
|
|
139
139
|
this.isOpened = false;
|
|
140
140
|
}
|
|
141
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
142
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
141
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
142
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ModalComponent, isStandalone: true, selector: "tk-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, footerButtons: { classPropertyName: "footerButtons", publicName: "footerButtons", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p-dialog\n [modal]=\"true\"\n [(visible)]=\"isOpened\"\n [closable]=\"closable()\"\n [dismissableMask]=\"closeOnOutsideClick()\"\n [draggable]=\"false\"\n [focusOnShow]=\"false\"\n [header]=\"title()\"\n [style]=\"{ 'max-width': modalMaxWidth(), width: 'calc(100% - var(--tk-spacing-base-200))' }\"\n (onHide)=\"handleClose()\"\n (onShow)=\"checkScroll()\"\n class=\"tk-modal\"\n>\n <section class=\"tk-modal__content\">\n @if (content()) {\n @if (isContentString()) {\n <p [innerHTML]=\"content()\" ></p>\n } @else {\n <ng-container *ngComponentOutlet=\"$any(content())\"></ng-container>\n }\n }\n </section>\n\n <ng-template pTemplate=\"footer\">\n @if (hasFooter()) {\n <section class=\"tk-modal__footer\" [class.tk-modal__footer--with-content]=\"hasScroll\">\n @for (btn of footerButtons()!; track $index) {\n <tk-button\n [label]=\"btn.label\"\n [severity]=\"btn.severity\"\n [variant]=\"btn.variant\"\n (clicked)=\"handleAction(btn.action, btn.returnValue)\"\n (keydown.enter)=\"handleAction(btn.action, btn.returnValue)\"\n (keydown.space)=\"handleAction(btn.action, btn.returnValue)\"\n />\n }\n </section>\n }\n </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog{max-height:90vh;display:flex;flex-direction:column}:host ::ng-deep .p-dialog-content{overflow-y:auto}:host ::ng-deep .p-dialog-title{color:var(--tk-color-text-default, #212121)}:host ::ng-deep .p-dialog-close-button{color:var(--tk-surface-500, #8a8a8b)}:host ::ng-deep .p-dialog-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-surface-500, #8a8a8b)}.tk-modal__content{padding-bottom:var(--tk-spacing-paddingY-l, 1.25rem);color:var(--tk-surface-1000, #000000)}.tk-modal__footer{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-modal__footer--with-content{padding-right:var(--tk-spacing-paddingX-l, 1.25rem)}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] }); }
|
|
143
143
|
}
|
|
144
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ModalComponent, decorators: [{
|
|
145
145
|
type: Component,
|
|
146
146
|
args: [{ selector: 'tk-modal', standalone: true, imports: [DialogModule, ButtonComponent, NgComponentOutlet], template: "<p-dialog\n [modal]=\"true\"\n [(visible)]=\"isOpened\"\n [closable]=\"closable()\"\n [dismissableMask]=\"closeOnOutsideClick()\"\n [draggable]=\"false\"\n [focusOnShow]=\"false\"\n [header]=\"title()\"\n [style]=\"{ 'max-width': modalMaxWidth(), width: 'calc(100% - var(--tk-spacing-base-200))' }\"\n (onHide)=\"handleClose()\"\n (onShow)=\"checkScroll()\"\n class=\"tk-modal\"\n>\n <section class=\"tk-modal__content\">\n @if (content()) {\n @if (isContentString()) {\n <p [innerHTML]=\"content()\" ></p>\n } @else {\n <ng-container *ngComponentOutlet=\"$any(content())\"></ng-container>\n }\n }\n </section>\n\n <ng-template pTemplate=\"footer\">\n @if (hasFooter()) {\n <section class=\"tk-modal__footer\" [class.tk-modal__footer--with-content]=\"hasScroll\">\n @for (btn of footerButtons()!; track $index) {\n <tk-button\n [label]=\"btn.label\"\n [severity]=\"btn.severity\"\n [variant]=\"btn.variant\"\n (clicked)=\"handleAction(btn.action, btn.returnValue)\"\n (keydown.enter)=\"handleAction(btn.action, btn.returnValue)\"\n (keydown.space)=\"handleAction(btn.action, btn.returnValue)\"\n />\n }\n </section>\n }\n </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .p-dialog{max-height:90vh;display:flex;flex-direction:column}:host ::ng-deep .p-dialog-content{overflow-y:auto}:host ::ng-deep .p-dialog-title{color:var(--tk-color-text-default, #212121)}:host ::ng-deep .p-dialog-close-button{color:var(--tk-surface-500, #8a8a8b)}:host ::ng-deep .p-dialog-close-button:hover{background:var(--tk-color-base-surface-100, #f0f0f0)!important;color:var(--tk-surface-500, #8a8a8b)}.tk-modal__content{padding-bottom:var(--tk-spacing-paddingY-l, 1.25rem);color:var(--tk-surface-1000, #000000)}.tk-modal__footer{display:flex;flex-direction:row;justify-content:end;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}.tk-modal__footer--with-content{padding-right:var(--tk-spacing-paddingX-l, 1.25rem)}\n"] }]
|
|
147
147
|
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
@@ -186,10 +186,10 @@ class ModalService {
|
|
|
186
186
|
this.modalRef = componentRef;
|
|
187
187
|
return close$.asObservable();
|
|
188
188
|
}
|
|
189
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
190
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
189
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ModalService, deps: [{ token: i0.Injector }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
190
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ModalService, providedIn: 'root' }); }
|
|
191
191
|
}
|
|
192
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ModalService, decorators: [{
|
|
193
193
|
type: Injectable,
|
|
194
194
|
args: [{ providedIn: 'root' }]
|
|
195
195
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ApplicationRef }] });
|
|
@@ -112,10 +112,10 @@ class MultiselectComponent {
|
|
|
112
112
|
handleChange(event) {
|
|
113
113
|
this.selectionChange.emit(event.value);
|
|
114
114
|
}
|
|
115
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
116
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
115
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
116
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: MultiselectComponent, isStandalone: true, selector: "tk-multiselect", inputs: { control: "control", options: "options", labelText: "labelText", display: "display", maxSelectedLabels: "maxSelectedLabels", selectedItemsLabel: "selectedItemsLabel", emptyFilterMessage: "emptyFilterMessage", filter: "filter", filterPlaceHolder: "filterPlaceHolder", id: "id", styleClass: "styleClass" }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<p-floatlabel>\n <p-multiselect\n optionLabel=\"name\"\n [id]=\"id\"\n [options]=\"options\"\n [formControl]=\"control\"\n [display]=\"display\"\n [maxSelectedLabels]=\"maxSelectedLabels\"\n [selectedItemsLabel]=\"selectedItemsLabel\"\n [emptyFilterMessage]=\"emptyFilterMessage\"\n [filter]=\"filter\"\n [filterPlaceHolder]=\"filterPlaceHolder\"\n [styleClass]=\"styleClass\"\n (onChange)=\"handleChange($event)\">\n </p-multiselect>\n <label [for]=\"id\">{{ labelText }}</label>\n</p-floatlabel>\n", styles: [":host ::ng-deep .p-multiselect{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-multiselect:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #424243);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-multiselect-option span{color:var(--tk-color-accent-default, #16006f)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-multiselect-option-selected{background-color:var(--tk-color-accent-muted, #b7b0d2)!important}:host ::ng-deep .p-multiselect-chip{background-color:var(--tk-surface-100, #f4f4f5);color:var(--tk-surface-700, #424243);border-radius:var(--tk-borderRadius-full, 999px)!important;padding:4px 8px}:host ::ng-deep .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}:host ::ng-deep .p-overlay{width:-webkit-fill-available}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-multiselect-label{gap:.313rem;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] }); }
|
|
117
117
|
}
|
|
118
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
118
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: MultiselectComponent, decorators: [{
|
|
119
119
|
type: Component,
|
|
120
120
|
args: [{ selector: 'tk-multiselect', standalone: true, imports: [ReactiveFormsModule, MultiSelectModule, FloatLabelModule], template: "<p-floatlabel>\n <p-multiselect\n optionLabel=\"name\"\n [id]=\"id\"\n [options]=\"options\"\n [formControl]=\"control\"\n [display]=\"display\"\n [maxSelectedLabels]=\"maxSelectedLabels\"\n [selectedItemsLabel]=\"selectedItemsLabel\"\n [emptyFilterMessage]=\"emptyFilterMessage\"\n [filter]=\"filter\"\n [filterPlaceHolder]=\"filterPlaceHolder\"\n [styleClass]=\"styleClass\"\n (onChange)=\"handleChange($event)\">\n </p-multiselect>\n <label [for]=\"id\">{{ labelText }}</label>\n</p-floatlabel>\n", styles: [":host ::ng-deep .p-multiselect{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;background-color:transparent}:host ::ng-deep .p-multiselect:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input:focus) label{color:var(--tk-primary-500, #16006f)}:host ::ng-deep .p-floatlabel label{color:var(--tk-surface-700, #424243);font-family:var(--tk-font-family, Poppins, sans-serif);font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep .p-multiselect-option span{color:var(--tk-color-accent-default, #16006f)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-multiselect-option-selected{background-color:var(--tk-color-accent-muted, #b7b0d2)!important}:host ::ng-deep .p-multiselect-chip{background-color:var(--tk-surface-100, #f4f4f5);color:var(--tk-surface-700, #424243);border-radius:var(--tk-borderRadius-full, 999px)!important;padding:4px 8px}:host ::ng-deep .p-multiselect-filter{border:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--tk-surface-300, #d2d2d2)}:host ::ng-deep .p-overlay{width:-webkit-fill-available}:host ::ng-deep .p-chip-label{display:inline-block;max-width:10ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .p-multiselect-label{gap:.313rem;padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}\n"] }]
|
|
121
121
|
}], propDecorators: { control: [{
|
|
@@ -146,10 +146,10 @@ class PaginationComponent {
|
|
|
146
146
|
pageCount: Math.ceil(this.length() / newSize),
|
|
147
147
|
});
|
|
148
148
|
}
|
|
149
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
150
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
149
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
150
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: PaginationComponent, isStandalone: true, selector: "tk-pagination", inputs: { hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: true, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"pagination\" [class.hidden]=\"hidden()\">\n <div class=\"flex items-center\">\n <span class=\"mx-1 pagination__caption\">Items per page: </span>\n <p-select\n [options]=\"options()\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [ngModel]=\"pageSizeInternal()\"\n (ngModelChange)=\"onPageSizeChange($event)\" />\n </div>\n <p-paginator\n [first]=\"pageIndexInternal()\"\n [rows]=\"pageSizeInternal()\"\n [totalRecords]=\"length()\"\n (onPageChange)=\"onPageChange($event)\"\n [showCurrentPageReport]=\"true\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [showPageLinks]=\"false\"\n [showFirstLastIcon]=\"false\"></p-paginator>\n</div>\n", styles: [".pagination{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;flex-wrap:wrap}.pagination__caption{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-current{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-next-icon,:host ::ng-deep .p-paginator-prev-icon{width:18px!important;height:18px!important}:host ::ng-deep .p-select,:host ::ng-deep .p-inputwrapper{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);box-shadow:none}:host ::ng-deep .p-select:focus,:host ::ng-deep .p-inputwrapper:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-dropdown-icon{color:var(--tk-surface-700, #424243)!important}.hidden{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
|
|
151
151
|
}
|
|
152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
153
153
|
type: Component,
|
|
154
154
|
args: [{ selector: 'tk-pagination', imports: [PaginatorModule, FormsModule, Select], template: "<div class=\"pagination\" [class.hidden]=\"hidden()\">\n <div class=\"flex items-center\">\n <span class=\"mx-1 pagination__caption\">Items per page: </span>\n <p-select\n [options]=\"options()\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [ngModel]=\"pageSizeInternal()\"\n (ngModelChange)=\"onPageSizeChange($event)\" />\n </div>\n <p-paginator\n [first]=\"pageIndexInternal()\"\n [rows]=\"pageSizeInternal()\"\n [totalRecords]=\"length()\"\n (onPageChange)=\"onPageChange($event)\"\n [showCurrentPageReport]=\"true\"\n currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n [showPageLinks]=\"false\"\n [showFirstLastIcon]=\"false\"></p-paginator>\n</div>\n", styles: [".pagination{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;flex-wrap:wrap}.pagination__caption{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-current{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-600, #5d5d5e)}:host ::ng-deep .p-paginator-next-icon,:host ::ng-deep .p-paginator-prev-icon{width:18px!important;height:18px!important}:host ::ng-deep .p-select,:host ::ng-deep .p-inputwrapper{border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);box-shadow:none}:host ::ng-deep .p-select:focus,:host ::ng-deep .p-inputwrapper:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-dropdown-icon{color:var(--tk-surface-700, #424243)!important}.hidden{display:none!important}\n"] }]
|
|
155
155
|
}], ctorParameters: () => [] });
|
|
@@ -123,10 +123,10 @@ class RadioButtonComponent {
|
|
|
123
123
|
this.onTouched();
|
|
124
124
|
this.effectiveControl.markAsTouched();
|
|
125
125
|
}
|
|
126
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
127
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
126
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
127
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: RadioButtonComponent, isStandalone: true, selector: "tk-radio-button", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange" }, ngImport: i0, template: "<div class=\"tk-radio-button-wrapper\">\n <div class=\"tk-radio-button-group\" [class.tk-disabled]=\"disabled()\">\n <p-radioButton\n [inputId]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"model()\"\n (ngModelChange)=\"onModelChange($event)\"\n [class.ng-invalid]=\"effectiveControl.invalid\"\n [class.ng-dirty]=\"effectiveControl.dirty\"\n [class.ng-touched]=\"effectiveControl.touched\">\n </p-radioButton>\n @if(label()){\n <label [for]=\"inputId()\" class=\"tk-radio-button-label\"> {{ label() }} </label>\n }\n </div>\n \n <div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n }\n </div>\n </div>\n</div>\n", styles: [":host ::ng-deep .tk-radio-button-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-radio-button-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-radio-button-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-radio-button-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-radio-button-label{margin-top:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .p-radiobutton.p-disabled .p-radiobutton-box{border-color:var(--tk-color-base-surface-300, #d2d2d2);background-color:var(--tk-color-base-surface-100, #fcfcfc)}:host ::ng-deep .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon{background-color:var(--tk-color-base-surface-300, #d2d2d2)}:host ::ng-deep p-radiobutton.ng-invalid.ng-touched .p-radiobutton-box,:host ::ng-deep p-radiobutton.ng-invalid.ng-dirty .p-radiobutton-box{border-color:var(--tk-color-base-red-700, #cf2604)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i2.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "formControlName", "name", "disabled", "variant", "size", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
|
|
128
128
|
}
|
|
129
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
129
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
130
130
|
type: Component,
|
|
131
131
|
args: [{ selector: 'tk-radio-button', imports: [CommonModule, ReactiveFormsModule, FormsModule, RadioButtonModule, MessageModule], template: "<div class=\"tk-radio-button-wrapper\">\n <div class=\"tk-radio-button-group\" [class.tk-disabled]=\"disabled()\">\n <p-radioButton\n [inputId]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"model()\"\n (ngModelChange)=\"onModelChange($event)\"\n [class.ng-invalid]=\"effectiveControl.invalid\"\n [class.ng-dirty]=\"effectiveControl.dirty\"\n [class.ng-touched]=\"effectiveControl.touched\">\n </p-radioButton>\n @if(label()){\n <label [for]=\"inputId()\" class=\"tk-radio-button-label\"> {{ label() }} </label>\n }\n </div>\n \n <div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n @if ((effectiveControl.invalid && (effectiveControl.dirty || effectiveControl.touched)) && errorMessage()) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n }\n </div>\n </div>\n</div>\n", styles: [":host ::ng-deep .tk-radio-button-wrapper{display:flex;flex-direction:column}:host ::ng-deep .tk-radio-button-wrapper label{font-size:var(--tk-font-size-paragraph-s, .875rem);font-weight:var(--tk-font-weight-400, \"Regular\")}:host ::ng-deep .tk-radio-button-group{display:flex;align-items:center;gap:var(--tk-spacing-base-50, .5rem)}:host ::ng-deep .tk-radio-button-group.tk-disabled label{color:var(--tk-color-base-surface-600, #424243)}:host ::ng-deep .tk-radio-button-label{margin-top:var(--tk-spacing-base-25, .25rem)}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .tk-input-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.25rem;min-height:1.25rem}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .p-radiobutton.p-disabled .p-radiobutton-box{border-color:var(--tk-color-base-surface-300, #d2d2d2);background-color:var(--tk-color-base-surface-100, #fcfcfc)}:host ::ng-deep .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon{background-color:var(--tk-color-base-surface-300, #d2d2d2)}:host ::ng-deep p-radiobutton.ng-invalid.ng-touched .p-radiobutton-box,:host ::ng-deep p-radiobutton.ng-invalid.ng-dirty .p-radiobutton-box{border-color:var(--tk-color-base-red-700, #cf2604)}\n"] }]
|
|
132
132
|
}], ctorParameters: () => [] });
|
|
@@ -199,10 +199,10 @@ class SelectComponent {
|
|
|
199
199
|
get effectiveControl() {
|
|
200
200
|
return this.ngControl?.control || this.control();
|
|
201
201
|
}
|
|
202
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
203
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
202
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
203
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: SelectComponent, isStandalone: true, selector: "tk-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", modelChange: "modelChange" }, ngImport: i0, template: "<p-floatlabel class=\"w-full\">\n <p-select\n [id]=\"id()\"\n class=\"w-full\"\n [options]=\"options()\"\n [optionLabel]=\"optionLabel()\"\n [showClear]=\"showClear()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"value\"\n [class.ng-invalid]=\"effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)\"\n [class.ng-dirty]=\"effectiveControl?.dirty\"\n [class.ng-touched]=\"effectiveControl?.touched\"\n (onChange)=\"handleChange($event)\" />\n <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n <div class=\"tk-select-messages\">\n @if ((effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)) && errorMessage()) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n } @else if (hint()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n }\n </div>\n</div>", styles: [":host ::ng-deep .p-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);background-color:transparent}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select.ng-invalid.ng-dirty,:host ::ng-deep .p-select.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-label{padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .p-floatlabel .p-inputwrapper-focus~label{color:var(--tk-primary-600, #140065);top:-.688rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-select:focus) label,:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065);top:-.75rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-option[data-p-highlight=true]{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-500, #16006f)!important}:host ::ng-deep .p-select-clear-icon{color:var(--tk-surface-700, #424243)!important}:host ::ng-deep .p-select-option-check-icon{color:transparent}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-select-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-select-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
|
|
204
204
|
}
|
|
205
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
205
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SelectComponent, decorators: [{
|
|
206
206
|
type: Component,
|
|
207
207
|
args: [{ selector: 'tk-select', imports: [FormsModule, Select, FloatLabelModule, MessageModule, ReactiveFormsModule], template: "<p-floatlabel class=\"w-full\">\n <p-select\n [id]=\"id()\"\n class=\"w-full\"\n [options]=\"options()\"\n [optionLabel]=\"optionLabel()\"\n [showClear]=\"showClear()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"value\"\n [class.ng-invalid]=\"effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)\"\n [class.ng-dirty]=\"effectiveControl?.dirty\"\n [class.ng-touched]=\"effectiveControl?.touched\"\n (onChange)=\"handleChange($event)\" />\n <label [for]=\"id()\">{{ label() }}</label>\n</p-floatlabel>\n\n<div class=\"tk-select-bottom\">\n <div class=\"tk-select-messages\">\n @if ((effectiveControl?.invalid && (effectiveControl?.dirty || effectiveControl?.touched)) && errorMessage()) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">{{ errorMessage() }}</p-message>\n } @else if (hint()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">{{ hint() }}</p-message>\n }\n </div>\n</div>", styles: [":host ::ng-deep .p-select{width:100%;border:none;border-bottom:1px solid var(--tk-color-border-default, #cecdcd);border-radius:0;color:var(--tk-color-text-default, #191a1b);background-color:transparent}:host ::ng-deep .p-select:focus{border-color:var(--tk-color-accent-default, #16006f)}:host ::ng-deep .p-select.ng-invalid.ng-dirty,:host ::ng-deep .p-select.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-label{padding:var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-75, 12px) var(--tk-spacing-base-25, 4px)!important}:host ::ng-deep .p-floatlabel .p-inputwrapper-focus~label{color:var(--tk-primary-600, #140065);top:-.688rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(input.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-family:var(--tk-font-family, Poppins, sans-serif);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-select:focus) label,:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065);top:-.75rem}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-focus) label{color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-select.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-select-option span{color:var(--tk-color-text-default, #191a1b)!important;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-select-option:hover{background-color:var(--tk-primary-100, #b7b0d2)!important}:host ::ng-deep .p-select-option[data-p-highlight=true]{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-500, #16006f)!important}:host ::ng-deep .p-select-clear-icon{color:var(--tk-surface-700, #424243)!important}:host ::ng-deep .p-select-option-check-icon{color:transparent}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-select-bottom{display:flex;justify-content:space-between;align-items:flex-start;margin-top:var(--tk-spacing-base-25, .25rem);min-height:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .tk-select-messages{flex:1;margin-right:var(--tk-spacing-base-100, 1rem)}\n"] }]
|
|
208
208
|
}], ctorParameters: () => [] });
|
|
@@ -108,10 +108,10 @@ class TableComponent {
|
|
|
108
108
|
return (event.order ?? 1) * result;
|
|
109
109
|
});
|
|
110
110
|
}
|
|
111
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
112
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
111
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
112
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TableComponent, isStandalone: true, selector: "tk-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: ["tableRef"], descendants: true }], ngImport: i0, template: "<p-table\n #tableRef\n [value]=\"internalData\"\n [customSort]=\"true\"\n (sortFunction)=\"customSort($event)\"\n [tableStyle]=\"{ 'min-width': '60rem' }\"\n responsiveLayout=\"scroll\">\n <!-- HEADER -->\n <ng-template pTemplate=\"header\">\n <tr>\n @for (col of columns(); track col.header) {\n <th\n [id]=\"col.field\"\n [style.width]=\"col.width\"\n [pSortableColumn]=\"col.sortable ? col.field : undefined\">\n <div>\n {{ col.header }}\n @if (col.sortable) {\n <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n }\n </div>\n </th>\n }\n </tr>\n </ng-template>\n\n <!-- BODY -->\n <ng-template pTemplate=\"body\" let-row>\n <tr>\n @for (col of columns(); track col.header) {\n\n <!-- TEXT (default) -->\n @if (!col.type || col.type === 'text') {\n <td>{{ row[col.field!] }}</td>\n }\n\n <!-- TAG -->\n @if (col.type === 'tag') {\n <td>\n <tk-tag [value]=\"row[col.field!]\" [severity]=\"col.tagSeverity!(row)\" />\n </td>\n }\n\n <!-- ACTIONS -->\n @if (col.type === 'actions') {\n <td>\n <div class=\"tk-table__actions\">\n @for (action of col.actions!; track action.icon) {\n <tk-button\n [icon]=\"'eye'\"\n severity=\"secondary\"\n (clicked)=\"action?.action(row)\"></tk-button>\n }\n </div>\n </td>\n } }\n </tr>\n </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-datatable-column-sorted{background-color:var(--tk-primary-100, #b7b0d2)!important;color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-column-sorted svg{color:var(--tk-primary-700, #10004f)!important}:host ::ng-deep .p-datatable-sortable-column{font-size:var(--tk-font-size-sm, .875rem);color:var(--tk-surface-950, #191a1b);padding:.625rem}:host ::ng-deep .p-datatable-sortable-column svg{color:var(--tk-surface-500, #424243)}:host ::ng-deep .p-button-secondary{background-color:var(--tk-surface-0, #ffffff);border:1px solid var(--tk-surface-0, #ffffff)}:host ::ng-deep .p-datatable-tbody td{color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);padding:.625rem}.tk-table__actions{display:flex;gap:var(--tk-spacing-gap-s, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: TagComponent, selector: "tk-tag", inputs: ["value", "severity", "truncationLimit"] }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }] }); }
|
|
113
113
|
}
|
|
114
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
114
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableComponent, decorators: [{
|
|
115
115
|
type: Component,
|
|
116
116
|
args: [{ selector: 'tk-table', standalone: true, imports: [
|
|
117
117
|
TableModule,
|
|
@@ -61,10 +61,10 @@ class TabsComponent {
|
|
|
61
61
|
tab: this.visibleTabs[index],
|
|
62
62
|
});
|
|
63
63
|
}
|
|
64
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
65
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
64
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
65
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TabsComponent, isStandalone: true, selector: "tk-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tkTabs", first: true, predicate: ["tkTabs"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-tabs\n #tkTabs\n [value]=\"activeIndex()\"\n scrollable\n (valueChange)=\"onTabChange(+$event)\"\n class=\"tk-tabs\">\n <p-tablist>\n <p-tab\n *ngFor=\"let tab of visibleTabs; let i = index\"\n [value]=\"i\"\n [disabled]=\"tab.disabled\"\n tooltipPosition=\"top\">\n <tk-tooltip [content]=\"tab.tooltip ?? ''\" position=\"top\">\n <span\n class=\"tk-tab-label\"\n [style.max-width]=\"tab.badge ? '6rem' : '9rem'\">\n {{ tab.label }}\n </span>\n </tk-tooltip>\n @if(tab.badge){\n <tk-badge [value]=\"tab.badge\"></tk-badge>\n }\n </p-tab>\n </p-tablist>\n\n <p-tabpanels>\n @for (tab of visibleTabs; track $index) {\n <p-tabpanel [value]=\"$index\">\n @if (!tab.lazy || activeIndex() === $index) {\n <ng-container *ngTemplateOutlet=\"tab.content || null\"></ng-container>\n }\n </p-tabpanel>\n }\n </p-tabpanels>\n</p-tabs>\n", styles: [".tk-tabs{width:100%}.tk-tabs .p-tablist{display:flex;width:100%}.tk-tabs .tk-tab-label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);font-weight:var(--tk-font-weight-regular, 400)}:host ::ng-deep .p-tab{padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-100, 1rem);max-width:var(--tk-size-base-1000, 10rem)}:host ::ng-deep .p-tab-active{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}:host ::ng-deep .tk-tooltip-wrapper{display:flex!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabList, selector: "p-tablist" }, { kind: "component", type: i2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TooltipComponent, selector: "tk-tooltip", inputs: ["content", "position"] }, { kind: "component", type: BadgeComponent, selector: "tk-badge", inputs: ["value", "severity"] }] }); }
|
|
66
66
|
}
|
|
67
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
67
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TabsComponent, decorators: [{
|
|
68
68
|
type: Component,
|
|
69
69
|
args: [{ selector: 'tk-tabs', imports: [CommonModule, TabsModule, TooltipComponent, BadgeComponent], template: "<p-tabs\n #tkTabs\n [value]=\"activeIndex()\"\n scrollable\n (valueChange)=\"onTabChange(+$event)\"\n class=\"tk-tabs\">\n <p-tablist>\n <p-tab\n *ngFor=\"let tab of visibleTabs; let i = index\"\n [value]=\"i\"\n [disabled]=\"tab.disabled\"\n tooltipPosition=\"top\">\n <tk-tooltip [content]=\"tab.tooltip ?? ''\" position=\"top\">\n <span\n class=\"tk-tab-label\"\n [style.max-width]=\"tab.badge ? '6rem' : '9rem'\">\n {{ tab.label }}\n </span>\n </tk-tooltip>\n @if(tab.badge){\n <tk-badge [value]=\"tab.badge\"></tk-badge>\n }\n </p-tab>\n </p-tablist>\n\n <p-tabpanels>\n @for (tab of visibleTabs; track $index) {\n <p-tabpanel [value]=\"$index\">\n @if (!tab.lazy || activeIndex() === $index) {\n <ng-container *ngTemplateOutlet=\"tab.content || null\"></ng-container>\n }\n </p-tabpanel>\n }\n </p-tabpanels>\n</p-tabs>\n", styles: [".tk-tabs{width:100%}.tk-tabs .p-tablist{display:flex;width:100%}.tk-tabs .tk-tab-label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--tk-surface-950, #191a1b);font-size:var(--tk-font-size-sm, .875rem);font-weight:var(--tk-font-weight-regular, 400)}:host ::ng-deep .p-tab{padding:var(--tk-spacing-base-50, .5rem) var(--tk-spacing-base-100, 1rem);max-width:var(--tk-size-base-1000, 10rem)}:host ::ng-deep .p-tab-active{background-color:var(--tk-primary-100, #b7b0d2);color:var(--tk-primary-700, #10004f)}:host ::ng-deep .tk-tooltip-wrapper{display:flex!important}\n"] }]
|
|
70
70
|
}] });
|
|
@@ -63,10 +63,10 @@ class TagComponent {
|
|
|
63
63
|
return val;
|
|
64
64
|
});
|
|
65
65
|
}
|
|
66
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
67
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
66
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
67
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TagComponent, isStandalone: true, selector: "tk-tag", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, truncationLimit: { classPropertyName: "truncationLimit", publicName: "truncationLimit", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p-tag \n [value]=\"displayValue()\" \n [severity]=\"primeSeverity()\" \n [styleClass]=\"'tk-tag-' + severity()\"\n></p-tag>", styles: [":host ::ng-deep .tk-tag-primary .p-tag-label{color:var(--tk-color-base-primary-700)!important}:host ::ng-deep .tk-tag-secondary .p-tag-label{color:var(--tk-color-base-surface-950)!important}:host ::ng-deep .tk-tag-success .p-tag-label{color:var(--tk-color-base-green-700)!important}:host ::ng-deep .tk-tag-info .p-tag-label{color:var(--tk-color-base-sky-700)!important}:host ::ng-deep .tk-tag-warn .p-tag-label{color:var(--tk-color-base-yellow-700)!important}:host ::ng-deep .tk-tag-danger .p-tag-label{color:var(--tk-color-base-red-700)!important}:host ::ng-deep .tk-tag-contrast .p-tag-label{color:var(--tk-color-base-surface-0)!important}:host ::ng-deep .tk-tag-contrast{background-color:var(--tk-color-base-surface-950)!important}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }] }); }
|
|
68
68
|
}
|
|
69
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
69
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TagComponent, decorators: [{
|
|
70
70
|
type: Component,
|
|
71
71
|
args: [{ selector: 'tk-tag', imports: [TagModule], template: "<p-tag \n [value]=\"displayValue()\" \n [severity]=\"primeSeverity()\" \n [styleClass]=\"'tk-tag-' + severity()\"\n></p-tag>", styles: [":host ::ng-deep .tk-tag-primary .p-tag-label{color:var(--tk-color-base-primary-700)!important}:host ::ng-deep .tk-tag-secondary .p-tag-label{color:var(--tk-color-base-surface-950)!important}:host ::ng-deep .tk-tag-success .p-tag-label{color:var(--tk-color-base-green-700)!important}:host ::ng-deep .tk-tag-info .p-tag-label{color:var(--tk-color-base-sky-700)!important}:host ::ng-deep .tk-tag-warn .p-tag-label{color:var(--tk-color-base-yellow-700)!important}:host ::ng-deep .tk-tag-danger .p-tag-label{color:var(--tk-color-base-red-700)!important}:host ::ng-deep .tk-tag-contrast .p-tag-label{color:var(--tk-color-base-surface-0)!important}:host ::ng-deep .tk-tag-contrast{background-color:var(--tk-color-base-surface-950)!important}\n"] }]
|
|
72
72
|
}] });
|
|
@@ -213,10 +213,10 @@ class TextareaComponent {
|
|
|
213
213
|
get effectiveControl() {
|
|
214
214
|
return this.getControl();
|
|
215
215
|
}
|
|
216
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
217
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
216
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
217
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: TextareaComponent, isStandalone: true, selector: "tk-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<p-floatlabel>\n <div class=\"tk-textarea-wrapper\">\n <textarea\n pTextarea\n [autoResize]=\"true\"\n [id]=\"id()\"\n [rows]=\"rows()\"\n [cols]=\"cols()\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [attr.maxlength]=\"maxLength()\"\n [disabled]=\"disabled()\"\n [class.p-filled]=\"!!value()\"\n [class.ng-invalid]=\"effectiveControl.invalid\"\n [class.ng-dirty]=\"effectiveControl.dirty\"\n [class.ng-touched]=\"effectiveControl.touched\"></textarea>\n\n <label [for]=\"id()\">{{ label() }}</label>\n </div>\n</p-floatlabel>\n\n<div class=\"tk-input-bottom\">\n <div class=\"tk-input-messages\">\n @if ((effectiveControl.invalid && (effectiveControl.dirty ||\n effectiveControl.touched)) && errorMessage()) {\n <p-message severity=\"error\" size=\"small\" variant=\"simple\">\n {{ errorMessage() }}\n </p-message>\n } @else if (hint()) {\n <p-message severity=\"secondary\" size=\"small\" variant=\"simple\">\n {{ hint() }}\n </p-message>\n }\n </div>\n\n @if (maxLength()) {\n <p-message\n severity=\"secondary\"\n size=\"small\"\n variant=\"simple\"\n class=\"tk-character-counter\">\n {{ counterText() }}\n </p-message>\n }\n</div>\n", styles: [":host ::ng-deep .p-textarea{width:100%;flex:1;border:none;border-bottom:.0625rem solid var(--tk-color-base-surface-300, #d2d2d2);border-radius:var(--tk-borderRadius-null, 0);padding:var(--tk-spacing-base-75, .75rem);padding-left:var(--tk-spacing-paddingX-xs, .25rem);color:var(--tk-color-base-surface-950, #191a1b);background-color:transparent}:host ::ng-deep .p-textarea:focus{border-color:var(--tk-color-base-primary-600, #140065);box-shadow:none}:host ::ng-deep .p-textarea.ng-invalid.ng-dirty,:host ::ng-deep .p-textarea.ng-invalid.ng-touched{border-color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep .p-textarea.has-icon{padding-left:var(--tk-spacing-base-200, 2rem)}:host ::ng-deep .p-textarea:disabled{background-color:var(--tk-color-base-surface-200, #e4e4e4);color:var(--tk-color-base-surface-500, #8a8a8b);opacity:1}:host ::ng-deep .p-floatlabel label{color:var(--tk-color-base-surface-500, #8a8a8b);font-weight:var(--tk-font-weight-400, 400);left:var(--tk-spacing-base-25, .25rem);transition-duration:.2s}:host ::ng-deep .p-floatlabel:has(.p-textarea) label{top:var(--tk-spacing-base-125, 1.25rem)}:host ::ng-deep .p-floatlabel:has(textarea:disabled) label{display:none}:host ::ng-deep .p-floatlabel:has(.p-inputwrapper-filled) label,:host ::ng-deep .p-floatlabel:has(textarea.p-filled) label{top:-.75rem;color:var(--tk-color-base-surface-950, #191a1b)}:host ::ng-deep .p-floatlabel:has(textarea:focus) label{top:-.75rem;color:var(--tk-color-base-primary-600, #140065)}:host ::ng-deep .p-floatlabel:has(.p-textarea.ng-invalid.ng-dirty) label,:host ::ng-deep .p-floatlabel:has(.p-textarea.ng-invalid.ng-touched) label{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=error] .p-inline-message-text,:host ::ng-deep p-message[severity=error] span{color:var(--tk-color-base-red-700, #cf2604)}:host ::ng-deep p-message[severity=secondary] .p-inline-message-text,:host ::ng-deep p-message[severity=secondary] span{color:var(--tk-color-base-surface-600, #5d5d5e)}:host ::ng-deep .tk-input-messages{flex:1;margin-right:1rem}:host ::ng-deep .tk-character-counter{white-space:nowrap;display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i1.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i2.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i3.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
|
|
218
218
|
}
|
|
219
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
219
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
220
220
|
type: Component,
|
|
221
221
|
args: [{ selector: 'tk-textarea', standalone: true, imports: [
|
|
222
222
|
CommonModule,
|
|
@@ -110,10 +110,10 @@ class ToolbarComponent {
|
|
|
110
110
|
onSelectedOption(value) {
|
|
111
111
|
this.filterModel.set(value);
|
|
112
112
|
}
|
|
113
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
114
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
113
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
114
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ToolbarComponent, isStandalone: true, selector: "tk-toolbar", inputs: { searchModel: { classPropertyName: "searchModel", publicName: "searchModel", isSignal: true, isRequired: false, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, filterOptionLabel: { classPropertyName: "filterOptionLabel", publicName: "filterOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, filterFloatLabel: { classPropertyName: "filterFloatLabel", publicName: "filterFloatLabel", isSignal: true, isRequired: false, transformFunction: null }, searchFloatLabel: { classPropertyName: "searchFloatLabel", publicName: "searchFloatLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchModel: "searchModelChange", filterModel: "filterModelChange" }, ngImport: i0, template: "<div class=\"toolbar\">\n @if (showSearchInput()) {\n <div class=\"toolbar__input-container\">\n <tk-input-text\n [label]=\"searchFloatLabel()\"\n icon=\"magnifying-glass\"\n [clearable]=\"true\"\n [value]=\"searchModel()\"\n (valueChange)=\"searchModel.set($event)\">\n </tk-input-text>\n </div>\n } @if (showFilterSelect()) {\n <div class=\"toolbar__input-container\">\n <tk-select\n [options]=\"filterOptions()\"\n [optionLabel]=\"filterOptionLabel()\"\n [label]=\"filterFloatLabel()\"\n (modelChange)=\"onSelectedOption($event ?? null)\">\n </tk-select>\n </div>\n }\n <div class=\"toolbar__buttons\">\n @if (searchModel() !== undefined) {\n <tk-button\n [icon]=\"'magnifying-glass'\"\n severity=\"secondary\"\n [variant]=\"!showSearchInput() ? 'outlined' : undefined\"\n (clicked)=\"toggleSearchInput()\">\n </tk-button>\n } @if (filterModel() !== undefined) {\n <tk-button\n [icon]=\"'filter'\"\n severity=\"secondary\"\n [variant]=\"!showFilterSelect() ? 'outlined' : undefined\"\n (clicked)=\"toggleFilterSelect()\">\n </tk-button>\n }\n </div>\n</div>\n", styles: [".toolbar{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--tk-spacing-base-50, .5rem);row-gap:var(--tk-spacing-base-150, 1.5rem)}.toolbar__input-container{width:15rem}.toolbar__buttons{display:flex;gap:var(--tk-spacing-base-50, .5rem);margin-top:var(--tk-spacing-base-50, .5rem)}@media (max-width: 768px){.toolbar{justify-content:flex-start}}:host ::ng-deep .tk-input-bottom{display:none}:host ::ng-deep .p-button-outlined{border:1px solid transparent!important}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "tooltipText"], outputs: ["clicked"] }, { kind: "component", type: InputTextComponent, selector: "tk-input-text", inputs: ["value", "control", "label", "type", "id", "icon", "clearable", "errorMessage", "hint", "maxLength"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "tk-select", inputs: ["id", "control", "options", "optionLabel", "label", "showClear", "disabled", "errorMessage", "hint", "model"], outputs: ["modelChange"] }] }); }
|
|
115
115
|
}
|
|
116
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
117
117
|
type: Component,
|
|
118
118
|
args: [{ selector: 'tk-toolbar', imports: [ButtonComponent, InputTextComponent, SelectComponent], template: "<div class=\"toolbar\">\n @if (showSearchInput()) {\n <div class=\"toolbar__input-container\">\n <tk-input-text\n [label]=\"searchFloatLabel()\"\n icon=\"magnifying-glass\"\n [clearable]=\"true\"\n [value]=\"searchModel()\"\n (valueChange)=\"searchModel.set($event)\">\n </tk-input-text>\n </div>\n } @if (showFilterSelect()) {\n <div class=\"toolbar__input-container\">\n <tk-select\n [options]=\"filterOptions()\"\n [optionLabel]=\"filterOptionLabel()\"\n [label]=\"filterFloatLabel()\"\n (modelChange)=\"onSelectedOption($event ?? null)\">\n </tk-select>\n </div>\n }\n <div class=\"toolbar__buttons\">\n @if (searchModel() !== undefined) {\n <tk-button\n [icon]=\"'magnifying-glass'\"\n severity=\"secondary\"\n [variant]=\"!showSearchInput() ? 'outlined' : undefined\"\n (clicked)=\"toggleSearchInput()\">\n </tk-button>\n } @if (filterModel() !== undefined) {\n <tk-button\n [icon]=\"'filter'\"\n severity=\"secondary\"\n [variant]=\"!showFilterSelect() ? 'outlined' : undefined\"\n (clicked)=\"toggleFilterSelect()\">\n </tk-button>\n }\n </div>\n</div>\n", styles: [".toolbar{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--tk-spacing-base-50, .5rem);row-gap:var(--tk-spacing-base-150, 1.5rem)}.toolbar__input-container{width:15rem}.toolbar__buttons{display:flex;gap:var(--tk-spacing-base-50, .5rem);margin-top:var(--tk-spacing-base-50, .5rem)}@media (max-width: 768px){.toolbar{justify-content:flex-start}}:host ::ng-deep .tk-input-bottom{display:none}:host ::ng-deep .p-button-outlined{border:1px solid transparent!important}\n"] }]
|
|
119
119
|
}] });
|
|
@@ -21,10 +21,10 @@ class TooltipComponent {
|
|
|
21
21
|
*/
|
|
22
22
|
this.position = input('top');
|
|
23
23
|
}
|
|
24
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
25
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
24
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: TooltipComponent, isStandalone: true, selector: "tk-tooltip", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span [pTooltip]=\"content()\" [tooltipPosition]=\"position()\" class=\"tk-tooltip-wrapper\">\n <ng-content></ng-content>\n</span>\n", styles: [":host{display:inline-block}.tk-tooltip-wrapper{display:inline-block}\n"], dependencies: [{ kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
|
|
26
26
|
}
|
|
27
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
27
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
28
28
|
type: Component,
|
|
29
29
|
args: [{ selector: 'tk-tooltip', imports: [Tooltip], template: "<span [pTooltip]=\"content()\" [tooltipPosition]=\"position()\" class=\"tk-tooltip-wrapper\">\n <ng-content></ng-content>\n</span>\n", styles: [":host{display:inline-block}.tk-tooltip-wrapper{display:inline-block}\n"] }]
|
|
30
30
|
}] });
|
|
@@ -71,10 +71,10 @@ class GridItemDirective {
|
|
|
71
71
|
get columnSpan() {
|
|
72
72
|
return `span ${this.finalSpan()}`;
|
|
73
73
|
}
|
|
74
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
75
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
74
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GridItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
75
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: GridItemDirective, isStandalone: true, selector: "[tkGridItem]", inputs: { span: "span" }, host: { properties: { "style.grid-column": "this.columnSpan" } }, ngImport: i0 }); }
|
|
76
76
|
}
|
|
77
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
77
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: GridItemDirective, decorators: [{
|
|
78
78
|
type: Directive,
|
|
79
79
|
args: [{
|
|
80
80
|
selector: '[tkGridItem]',
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tekus/design-system",
|
|
3
3
|
"description": "Tekus design system library",
|
|
4
|
-
"version": "5.
|
|
4
|
+
"version": "5.17.0",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"peerDependencies": {
|
|
7
7
|
"@angular/core": "^19.2.15",
|
|
@@ -95,14 +95,14 @@
|
|
|
95
95
|
"types": "./components/select/index.d.ts",
|
|
96
96
|
"default": "./fesm2022/tekus-design-system-components-select.mjs"
|
|
97
97
|
},
|
|
98
|
-
"./components/table": {
|
|
99
|
-
"types": "./components/table/index.d.ts",
|
|
100
|
-
"default": "./fesm2022/tekus-design-system-components-table.mjs"
|
|
101
|
-
},
|
|
102
98
|
"./components/tabs": {
|
|
103
99
|
"types": "./components/tabs/index.d.ts",
|
|
104
100
|
"default": "./fesm2022/tekus-design-system-components-tabs.mjs"
|
|
105
101
|
},
|
|
102
|
+
"./components/table": {
|
|
103
|
+
"types": "./components/table/index.d.ts",
|
|
104
|
+
"default": "./fesm2022/tekus-design-system-components-table.mjs"
|
|
105
|
+
},
|
|
106
106
|
"./components/tag": {
|
|
107
107
|
"types": "./components/tag/index.d.ts",
|
|
108
108
|
"default": "./fesm2022/tekus-design-system-components-tag.mjs"
|