ud-components 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1959,7 +1959,7 @@ class SummaryViewComponent {
|
|
|
1959
1959
|
skeletonTitleHeight = '20px';
|
|
1960
1960
|
skeletonBodyHeight = '150px';
|
|
1961
1961
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SummaryViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1962
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: SummaryViewComponent, isStandalone: true, selector: "ud-summary-view", inputs: { title: "title", editOptions: "editOptions", summaryFields: "summaryFields", loading: "loading", layout: "layout", skeletonTitleHeight: "skeletonTitleHeight", skeletonBodyHeight: "skeletonBodyHeight" }, ngImport: i0, template: "<div class=\"summary-view-container\">\n <div class=\"header\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"loading col-6\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonTitleHeight }\" />\n } @else {\n <h5 class=\"header-title\">{{ title }}</h5>\n }\n <ng-content select=\"[header-actions]\">\n @if (editOptions) {\n <button\n mat-stroked-button\n class=\"header-edit-btn\"\n [matTooltip]=\"\n editOptions.tooltip ?? 'actions.edit' | translate | capitalize\n \"\n color=\"primary\"\n [routerLink]=\"editOptions.routerLink\"\n [disabled]=\"editOptions.disabled\">\n <mat-icon class=\"btn-icon\">edit</mat-icon>\n <span>{{ 'actions.edit' | translate | capitalize }}</span>\n </button>\n }\n </ng-content>\n </div>\n <div
|
|
1962
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: SummaryViewComponent, isStandalone: true, selector: "ud-summary-view", inputs: { title: "title", editOptions: "editOptions", summaryFields: "summaryFields", loading: "loading", layout: "layout", skeletonTitleHeight: "skeletonTitleHeight", skeletonBodyHeight: "skeletonBodyHeight" }, ngImport: i0, template: "<div class=\"summary-view-container\">\n <div class=\"header\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"loading col-6\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonTitleHeight }\" />\n } @else {\n <h5 class=\"header-title\">{{ title }}</h5>\n }\n <ng-content select=\"[header-actions]\">\n @if (editOptions) {\n <button\n mat-stroked-button\n class=\"header-edit-btn\"\n [matTooltip]=\"\n editOptions.tooltip ?? 'actions.edit' | translate | capitalize\n \"\n color=\"primary\"\n [routerLink]=\"editOptions.routerLink\"\n [disabled]=\"editOptions.disabled\">\n <mat-icon class=\"btn-icon\">edit</mat-icon>\n <span>{{ 'actions.edit' | translate | capitalize }}</span>\n </button>\n }\n </ng-content>\n </div>\n <div\n class=\"content\"\n [ngClass]=\"{\n reverse: layout === 'text-right',\n 'flex-column': layout === 'text-top',\n }\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"col\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonBodyHeight }\" />\n } @else {\n @if (layout !== 'text-none') {\n <div [ngClass]=\"layout === 'text-top' ? 'col-12' : 'col-6'\">\n <div class=\"summary\" [ngClass]=\"{ 'summary-row-wrap': layout === 'text-top' }\">\n @for (summaryField of summaryFields; track $index) {\n <div class=\"summary-field\">\n @if (summaryField.label) {\n <span>{{ summaryField.label | capitalize }}</span>\n }\n <div class=\"summary-row\">\n <mat-icon matPrefix fontSet=\"material-icons-outlined\">\n {{ summaryField.icon }}\n </mat-icon>\n <mat-label>{{ summaryField.value }}</mat-label>\n </div>\n </div>\n }\n </div>\n </div>\n }\n <div\n class=\"px-0\"\n [ngClass]=\"{\n 'col-12': layout === 'text-none' || layout === 'text-top',\n 'col-6': layout !== 'text-none' && layout !== 'text-top',\n }\">\n <ng-content></ng-content>\n </div>\n }\n </div>\n</div>\n", styles: [".summary-view-container{justify-self:center;width:90%;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px #373f4c14;border:1px solid rgba(0,0,0,.07)}.header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#dddde8;border-bottom:1px solid rgba(0,0,0,.08);min-height:52px}.header .header-title{margin:0;font-size:.9375rem;font-weight:600;color:#373f4c;letter-spacing:.01em}.header .header-edit-btn{height:32px!important;padding:0 12px!important;border-radius:6px!important;font-size:13px!important;font-weight:500!important;display:inline-flex!important;align-items:center!important;gap:4px}.header .header-edit-btn .btn-icon{font-size:15px!important;width:15px!important;height:15px!important}.header .loading{padding:.5rem;border-radius:4px}.content{display:flex;flex-wrap:wrap;padding:1.2rem .8rem;margin:0;background-color:#fff}.content.reverse{flex-direction:row-reverse}.content.flex-column{flex-direction:column}.summary{display:flex;flex-direction:column;gap:1rem}.summary.summary-row-wrap{flex-direction:row;flex-wrap:wrap;gap:1rem 2.5rem}.summary .summary-field{display:flex;flex-direction:column;gap:.1rem}.summary .summary-field span{font-size:14px;font-weight:300;color:var(--text-color)}.summary .summary-row{display:flex;align-items:flex-start;gap:.5rem}.summary .summary-row mat-icon{height:18px;width:18px;min-width:18px;margin-top:2px;font-size:20px;color:var(--text-color)}mat-label{font-weight:300}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }] });
|
|
1963
1963
|
}
|
|
1964
1964
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SummaryViewComponent, decorators: [{
|
|
1965
1965
|
type: Component,
|
|
@@ -1975,7 +1975,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
1975
1975
|
MatTooltip,
|
|
1976
1976
|
CapitalizePipe,
|
|
1977
1977
|
MatPrefix,
|
|
1978
|
-
], template: "<div class=\"summary-view-container\">\n <div class=\"header\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"loading col-6\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonTitleHeight }\" />\n } @else {\n <h5 class=\"header-title\">{{ title }}</h5>\n }\n <ng-content select=\"[header-actions]\">\n @if (editOptions) {\n <button\n mat-stroked-button\n class=\"header-edit-btn\"\n [matTooltip]=\"\n editOptions.tooltip ?? 'actions.edit' | translate | capitalize\n \"\n color=\"primary\"\n [routerLink]=\"editOptions.routerLink\"\n [disabled]=\"editOptions.disabled\">\n <mat-icon class=\"btn-icon\">edit</mat-icon>\n <span>{{ 'actions.edit' | translate | capitalize }}</span>\n </button>\n }\n </ng-content>\n </div>\n <div
|
|
1978
|
+
], template: "<div class=\"summary-view-container\">\n <div class=\"header\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"loading col-6\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonTitleHeight }\" />\n } @else {\n <h5 class=\"header-title\">{{ title }}</h5>\n }\n <ng-content select=\"[header-actions]\">\n @if (editOptions) {\n <button\n mat-stroked-button\n class=\"header-edit-btn\"\n [matTooltip]=\"\n editOptions.tooltip ?? 'actions.edit' | translate | capitalize\n \"\n color=\"primary\"\n [routerLink]=\"editOptions.routerLink\"\n [disabled]=\"editOptions.disabled\">\n <mat-icon class=\"btn-icon\">edit</mat-icon>\n <span>{{ 'actions.edit' | translate | capitalize }}</span>\n </button>\n }\n </ng-content>\n </div>\n <div\n class=\"content\"\n [ngClass]=\"{\n reverse: layout === 'text-right',\n 'flex-column': layout === 'text-top',\n }\">\n @if (loading) {\n <ngx-skeleton-loader\n class=\"col\"\n [count]=\"1\"\n [theme]=\"{ height: skeletonBodyHeight }\" />\n } @else {\n @if (layout !== 'text-none') {\n <div [ngClass]=\"layout === 'text-top' ? 'col-12' : 'col-6'\">\n <div class=\"summary\" [ngClass]=\"{ 'summary-row-wrap': layout === 'text-top' }\">\n @for (summaryField of summaryFields; track $index) {\n <div class=\"summary-field\">\n @if (summaryField.label) {\n <span>{{ summaryField.label | capitalize }}</span>\n }\n <div class=\"summary-row\">\n <mat-icon matPrefix fontSet=\"material-icons-outlined\">\n {{ summaryField.icon }}\n </mat-icon>\n <mat-label>{{ summaryField.value }}</mat-label>\n </div>\n </div>\n }\n </div>\n </div>\n }\n <div\n class=\"px-0\"\n [ngClass]=\"{\n 'col-12': layout === 'text-none' || layout === 'text-top',\n 'col-6': layout !== 'text-none' && layout !== 'text-top',\n }\">\n <ng-content></ng-content>\n </div>\n }\n </div>\n</div>\n", styles: [".summary-view-container{justify-self:center;width:90%;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px #373f4c14;border:1px solid rgba(0,0,0,.07)}.header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#dddde8;border-bottom:1px solid rgba(0,0,0,.08);min-height:52px}.header .header-title{margin:0;font-size:.9375rem;font-weight:600;color:#373f4c;letter-spacing:.01em}.header .header-edit-btn{height:32px!important;padding:0 12px!important;border-radius:6px!important;font-size:13px!important;font-weight:500!important;display:inline-flex!important;align-items:center!important;gap:4px}.header .header-edit-btn .btn-icon{font-size:15px!important;width:15px!important;height:15px!important}.header .loading{padding:.5rem;border-radius:4px}.content{display:flex;flex-wrap:wrap;padding:1.2rem .8rem;margin:0;background-color:#fff}.content.reverse{flex-direction:row-reverse}.content.flex-column{flex-direction:column}.summary{display:flex;flex-direction:column;gap:1rem}.summary.summary-row-wrap{flex-direction:row;flex-wrap:wrap;gap:1rem 2.5rem}.summary .summary-field{display:flex;flex-direction:column;gap:.1rem}.summary .summary-field span{font-size:14px;font-weight:300;color:var(--text-color)}.summary .summary-row{display:flex;align-items:flex-start;gap:.5rem}.summary .summary-row mat-icon{height:18px;width:18px;min-width:18px;margin-top:2px;font-size:20px;color:var(--text-color)}mat-label{font-weight:300}\n"] }]
|
|
1979
1979
|
}], propDecorators: { title: [{
|
|
1980
1980
|
type: Input
|
|
1981
1981
|
}], editOptions: [{
|
|
@@ -2314,16 +2314,17 @@ class ToggleComponent {
|
|
|
2314
2314
|
if (this.isDisabled)
|
|
2315
2315
|
return;
|
|
2316
2316
|
const ctrl = this.formControl;
|
|
2317
|
+
const newValue = !this.checked;
|
|
2317
2318
|
if (ctrl) {
|
|
2318
|
-
ctrl.setValue(
|
|
2319
|
+
ctrl.setValue(newValue);
|
|
2319
2320
|
ctrl.markAsTouched();
|
|
2320
2321
|
}
|
|
2321
2322
|
else {
|
|
2322
|
-
this.checked =
|
|
2323
|
-
this._onChange(
|
|
2323
|
+
this.checked = newValue;
|
|
2324
|
+
this._onChange(newValue);
|
|
2324
2325
|
this.onTouched();
|
|
2325
2326
|
}
|
|
2326
|
-
this.onChange.emit(
|
|
2327
|
+
this.onChange.emit(newValue);
|
|
2327
2328
|
}
|
|
2328
2329
|
writeValue(value) {
|
|
2329
2330
|
this.checked = !!value;
|