ud-components 0.1.9 → 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: [{
|
|
@@ -2287,7 +2287,8 @@ class ToggleComponent {
|
|
|
2287
2287
|
isDisabled = false;
|
|
2288
2288
|
controlContainer = inject(ControlContainer, { optional: true, skipSelf: true });
|
|
2289
2289
|
destroy$ = new Subject();
|
|
2290
|
-
onChange = ()
|
|
2290
|
+
onChange = new EventEmitter();
|
|
2291
|
+
_onChange = () => { };
|
|
2291
2292
|
onTouched = () => { };
|
|
2292
2293
|
get formControl() {
|
|
2293
2294
|
if (!this.controlName || !this.controlContainer?.control)
|
|
@@ -2313,21 +2314,23 @@ class ToggleComponent {
|
|
|
2313
2314
|
if (this.isDisabled)
|
|
2314
2315
|
return;
|
|
2315
2316
|
const ctrl = this.formControl;
|
|
2317
|
+
const newValue = !this.checked;
|
|
2316
2318
|
if (ctrl) {
|
|
2317
|
-
ctrl.setValue(
|
|
2319
|
+
ctrl.setValue(newValue);
|
|
2318
2320
|
ctrl.markAsTouched();
|
|
2319
2321
|
}
|
|
2320
2322
|
else {
|
|
2321
|
-
this.checked =
|
|
2322
|
-
this.
|
|
2323
|
+
this.checked = newValue;
|
|
2324
|
+
this._onChange(newValue);
|
|
2323
2325
|
this.onTouched();
|
|
2324
2326
|
}
|
|
2327
|
+
this.onChange.emit(newValue);
|
|
2325
2328
|
}
|
|
2326
2329
|
writeValue(value) {
|
|
2327
2330
|
this.checked = !!value;
|
|
2328
2331
|
}
|
|
2329
2332
|
registerOnChange(fn) {
|
|
2330
|
-
this.
|
|
2333
|
+
this._onChange = fn;
|
|
2331
2334
|
}
|
|
2332
2335
|
registerOnTouched(fn) {
|
|
2333
2336
|
this.onTouched = fn;
|
|
@@ -2336,7 +2339,7 @@ class ToggleComponent {
|
|
|
2336
2339
|
this.isDisabled = isDisabled;
|
|
2337
2340
|
}
|
|
2338
2341
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2339
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: ToggleComponent, isStandalone: true, selector: "ud-toggle", inputs: { controlName: "controlName", size: "size", label: "label", labelPosition: "labelPosition", ariaLabel: "ariaLabel" }, host: { properties: { "class.size-sm": "this.isSm", "class.size-md": "this.isMd", "class.size-lg": "this.isLg" } }, providers: [
|
|
2342
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: ToggleComponent, isStandalone: true, selector: "ud-toggle", inputs: { controlName: "controlName", size: "size", label: "label", labelPosition: "labelPosition", ariaLabel: "ariaLabel" }, outputs: { onChange: "onChange" }, host: { properties: { "class.size-sm": "this.isSm", "class.size-md": "this.isMd", "class.size-lg": "this.isLg" } }, providers: [
|
|
2340
2343
|
{
|
|
2341
2344
|
provide: NG_VALUE_ACCESSOR,
|
|
2342
2345
|
useExisting: forwardRef(() => ToggleComponent),
|
|
@@ -2382,6 +2385,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2382
2385
|
}], isLg: [{
|
|
2383
2386
|
type: HostBinding,
|
|
2384
2387
|
args: ['class.size-lg']
|
|
2388
|
+
}], onChange: [{
|
|
2389
|
+
type: Output
|
|
2385
2390
|
}] } });
|
|
2386
2391
|
|
|
2387
2392
|
/*
|