ud-components 0.3.15 → 0.3.16
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/ud-components.mjs +3 -212
- package/fesm2022/ud-components.mjs.map +1 -1
- package/package.json +1 -9
- package/public-api.d.ts +0 -5
- package/lib/ionic/ion-pill-toggle/ion-pill-toggle.component.d.ts +0 -19
- package/lib/ionic/ion-select/ion-select.component.d.ts +0 -21
- package/lib/ionic/ion-text-input/ion-text-input.component.d.ts +0 -19
- package/lib/ionic/ion-textarea/ion-textarea.component.d.ts +0 -15
- package/lib/ionic/ion-toggle/ion-toggle.component.d.ts +0 -19
|
@@ -48,7 +48,6 @@ import * as i2$4 from '@angular/material/timepicker';
|
|
|
48
48
|
import { MatTimepickerModule } from '@angular/material/timepicker';
|
|
49
49
|
import * as i1$4 from '@angular/platform-browser';
|
|
50
50
|
import { MatFormField as MatFormField$1 } from '@angular/material/form-field';
|
|
51
|
-
import { IonInput, IonSpinner, IonSelect, IonSelectOption, IonTextarea, IonToggle, IonSegment, IonSegmentButton, IonLabel } from '@ionic/angular/standalone';
|
|
52
51
|
|
|
53
52
|
class CarouselComponent {
|
|
54
53
|
pictures = [];
|
|
@@ -2710,7 +2709,7 @@ class SummaryViewComponent {
|
|
|
2710
2709
|
skeletonTitleHeight = '20px';
|
|
2711
2710
|
skeletonBodyHeight = '150px';
|
|
2712
2711
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SummaryViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2713
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: SummaryViewComponent, isStandalone: true, selector: "ud-summary-view", inputs: { title: "title", actions: "actions", 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 <div class=\"header-actions\">\n @for (action of actions; track action.label) {\n @if (action.isAuthorized) {\n @if (action.path) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n [routerLink]=\"action.path\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n } @else if (action.onClick) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n (click)=\"action.onClick!()\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n }\n }\n }\n <ng-content select=\"[header-actions]\" />\n </div>\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=\"content-body\"\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:12px;overflow:hidden;box-shadow:0 0 0 1px #1b253512,0 4px 16px #1b253514;font-family:DM Sans,system-ui,sans-serif}.header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#1b2535;min-height:52px}.header .header-title{margin:0;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;font-weight:600;color:#fff;letter-spacing:.02em}.header .header-actions{display:flex;align-items:center;gap:8px}.header .header-actions ::ng-deep .ud-btn{border-color:#ffffff4d!important;color:#ffffffd9!important}.header .header-actions ::ng-deep .ud-btn:hover{background:#ffffff1a!important;border-color:#ffffff80!important;color:#fff!important}.header .header-actions ::ng-deep .ud-btn .mat-icon{color:inherit!important}.header .loading{padding:.5rem;border-radius:4px}.content{display:flex;flex-wrap:wrap;background:#fff}.content:not(.flex-column):has(.content-body>*)>.col-6:first-child{border-right:1px solid #e8eaee}.content.reverse:has(.content-body>*)>.col-6:last-child{border-right:1px solid #e8eaee;border-left:none}.summary{display:flex;flex-direction:column;gap:0;padding:20px 24px}.summary.summary-row-wrap{flex-direction:row;flex-wrap:wrap;gap:.25rem;padding:16px 8px}.summary-field{display:flex;flex-direction:column;gap:3px;padding:10px 16px;border-radius:8px;transition:background .15s ease}.summary-field:hover{background:#f4f5f7}.summary-row-wrap .summary-field{padding:12px 16px;min-width:140px;border:1px solid #e8eaee}.summary-field span{font-family:DM Sans,system-ui,sans-serif;font-size:.65rem;font-weight:700;color:#6b7585;text-transform:uppercase;letter-spacing:.08em}.summary-row{display:flex;align-items:center;gap:6px}.summary-row mat-icon{height:16px;width:16px;min-width:16px;font-size:16px;color:#6b7585;flex-shrink:0}mat-label{font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;font-weight:600;color:#1b2535;line-height:1.3}.content-body:has(>*){background:#f4f5f7;padding:20px 24px}.flex-column>.content-body:has(>*){border-top:1px solid #e8eaee}\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$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: UdButtonComponent, selector: "ud-button", inputs: ["variant", "color", "size", "type", "icon", "iconPosition", "iconFontSet", "loading", "disabled", "fullWidth"] }] });
|
|
2712
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: SummaryViewComponent, isStandalone: true, selector: "ud-summary-view", inputs: { title: "title", actions: "actions", 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 <div class=\"header-actions\">\n @for (action of actions; track action.label) {\n @if (action.isAuthorized) {\n @if (action.path) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n [routerLink]=\"action.path\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n } @else if (action.onClick) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n (click)=\"action.onClick!()\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n }\n }\n }\n <ng-content select=\"[header-actions]\" />\n </div>\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=\"content-body\"\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:12px;overflow:hidden;box-shadow:0 0 0 1px #1b253512,0 4px 16px #1b253514;font-family:DM Sans,system-ui,sans-serif}.header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#1b2535;min-height:52px}.header .header-title{margin:0;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;font-weight:600;color:#fff;letter-spacing:.02em}.header .header-actions{display:flex;align-items:center;gap:8px}.header .header-actions ::ng-deep .ud-btn{border-color:#ffffff4d!important;color:#ffffffd9!important}.header .header-actions ::ng-deep .ud-btn:hover{background:#ffffff1a!important;border-color:#ffffff80!important;color:#fff!important}.header .header-actions ::ng-deep .ud-btn .mat-icon{color:inherit!important}.header .loading{padding:.5rem;border-radius:4px}.header .loading ::ng-deep .skeleton-loader{background:#ffffff1f!important;background-image:linear-gradient(90deg,#ffffff1f,#ffffff38,#ffffff1f 80px)!important}.content{display:flex;flex-wrap:wrap;background:#fff}.content:not(.flex-column):has(.content-body>*)>.col-6:first-child{border-right:1px solid #e8eaee}.content.reverse:has(.content-body>*)>.col-6:last-child{border-right:1px solid #e8eaee;border-left:none}.summary{display:flex;flex-direction:column;gap:0;padding:20px 24px}.summary.summary-row-wrap{flex-direction:row;flex-wrap:wrap;gap:.25rem;padding:16px 8px}.summary-field{display:flex;flex-direction:column;gap:3px;padding:10px 16px;border-radius:8px;transition:background .15s ease}.summary-field:hover{background:#f4f5f7}.summary-row-wrap .summary-field{padding:12px 16px;min-width:140px;border:1px solid #e8eaee}.summary-field span{font-family:DM Sans,system-ui,sans-serif;font-size:.65rem;font-weight:700;color:#6b7585;text-transform:uppercase;letter-spacing:.08em}.summary-row{display:flex;align-items:center;gap:6px}.summary-row mat-icon{height:16px;width:16px;min-width:16px;font-size:16px;color:#6b7585;flex-shrink:0}mat-label{font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;font-weight:600;color:#1b2535;line-height:1.3}.content-body:has(>*){background:#f4f5f7;padding:20px 24px}.flex-column>.content-body:has(>*){border-top:1px solid #e8eaee}\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$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: UdButtonComponent, selector: "ud-button", inputs: ["variant", "color", "size", "type", "icon", "iconPosition", "iconFontSet", "loading", "disabled", "fullWidth"] }] });
|
|
2714
2713
|
}
|
|
2715
2714
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SummaryViewComponent, decorators: [{
|
|
2716
2715
|
type: Component,
|
|
@@ -2725,7 +2724,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2725
2724
|
CapitalizePipe,
|
|
2726
2725
|
MatPrefix,
|
|
2727
2726
|
UdButtonComponent,
|
|
2728
|
-
], 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 <div class=\"header-actions\">\n @for (action of actions; track action.label) {\n @if (action.isAuthorized) {\n @if (action.path) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n [routerLink]=\"action.path\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n } @else if (action.onClick) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n (click)=\"action.onClick!()\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n }\n }\n }\n <ng-content select=\"[header-actions]\" />\n </div>\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=\"content-body\"\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:12px;overflow:hidden;box-shadow:0 0 0 1px #1b253512,0 4px 16px #1b253514;font-family:DM Sans,system-ui,sans-serif}.header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#1b2535;min-height:52px}.header .header-title{margin:0;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;font-weight:600;color:#fff;letter-spacing:.02em}.header .header-actions{display:flex;align-items:center;gap:8px}.header .header-actions ::ng-deep .ud-btn{border-color:#ffffff4d!important;color:#ffffffd9!important}.header .header-actions ::ng-deep .ud-btn:hover{background:#ffffff1a!important;border-color:#ffffff80!important;color:#fff!important}.header .header-actions ::ng-deep .ud-btn .mat-icon{color:inherit!important}.header .loading{padding:.5rem;border-radius:4px}.content{display:flex;flex-wrap:wrap;background:#fff}.content:not(.flex-column):has(.content-body>*)>.col-6:first-child{border-right:1px solid #e8eaee}.content.reverse:has(.content-body>*)>.col-6:last-child{border-right:1px solid #e8eaee;border-left:none}.summary{display:flex;flex-direction:column;gap:0;padding:20px 24px}.summary.summary-row-wrap{flex-direction:row;flex-wrap:wrap;gap:.25rem;padding:16px 8px}.summary-field{display:flex;flex-direction:column;gap:3px;padding:10px 16px;border-radius:8px;transition:background .15s ease}.summary-field:hover{background:#f4f5f7}.summary-row-wrap .summary-field{padding:12px 16px;min-width:140px;border:1px solid #e8eaee}.summary-field span{font-family:DM Sans,system-ui,sans-serif;font-size:.65rem;font-weight:700;color:#6b7585;text-transform:uppercase;letter-spacing:.08em}.summary-row{display:flex;align-items:center;gap:6px}.summary-row mat-icon{height:16px;width:16px;min-width:16px;font-size:16px;color:#6b7585;flex-shrink:0}mat-label{font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;font-weight:600;color:#1b2535;line-height:1.3}.content-body:has(>*){background:#f4f5f7;padding:20px 24px}.flex-column>.content-body:has(>*){border-top:1px solid #e8eaee}\n"] }]
|
|
2727
|
+
], 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 <div class=\"header-actions\">\n @for (action of actions; track action.label) {\n @if (action.isAuthorized) {\n @if (action.path) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n [routerLink]=\"action.path\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n } @else if (action.onClick) {\n <ud-button\n variant=\"stroked\"\n color=\"primary\"\n size=\"sm\"\n [icon]=\"action.icon\"\n (click)=\"action.onClick!()\">\n {{ action.label | translate | capitalize }}\n </ud-button>\n }\n }\n }\n <ng-content select=\"[header-actions]\" />\n </div>\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=\"content-body\"\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:12px;overflow:hidden;box-shadow:0 0 0 1px #1b253512,0 4px 16px #1b253514;font-family:DM Sans,system-ui,sans-serif}.header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#1b2535;min-height:52px}.header .header-title{margin:0;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;font-weight:600;color:#fff;letter-spacing:.02em}.header .header-actions{display:flex;align-items:center;gap:8px}.header .header-actions ::ng-deep .ud-btn{border-color:#ffffff4d!important;color:#ffffffd9!important}.header .header-actions ::ng-deep .ud-btn:hover{background:#ffffff1a!important;border-color:#ffffff80!important;color:#fff!important}.header .header-actions ::ng-deep .ud-btn .mat-icon{color:inherit!important}.header .loading{padding:.5rem;border-radius:4px}.header .loading ::ng-deep .skeleton-loader{background:#ffffff1f!important;background-image:linear-gradient(90deg,#ffffff1f,#ffffff38,#ffffff1f 80px)!important}.content{display:flex;flex-wrap:wrap;background:#fff}.content:not(.flex-column):has(.content-body>*)>.col-6:first-child{border-right:1px solid #e8eaee}.content.reverse:has(.content-body>*)>.col-6:last-child{border-right:1px solid #e8eaee;border-left:none}.summary{display:flex;flex-direction:column;gap:0;padding:20px 24px}.summary.summary-row-wrap{flex-direction:row;flex-wrap:wrap;gap:.25rem;padding:16px 8px}.summary-field{display:flex;flex-direction:column;gap:3px;padding:10px 16px;border-radius:8px;transition:background .15s ease}.summary-field:hover{background:#f4f5f7}.summary-row-wrap .summary-field{padding:12px 16px;min-width:140px;border:1px solid #e8eaee}.summary-field span{font-family:DM Sans,system-ui,sans-serif;font-size:.65rem;font-weight:700;color:#6b7585;text-transform:uppercase;letter-spacing:.08em}.summary-row{display:flex;align-items:center;gap:6px}.summary-row mat-icon{height:16px;width:16px;min-width:16px;font-size:16px;color:#6b7585;flex-shrink:0}mat-label{font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;font-weight:600;color:#1b2535;line-height:1.3}.content-body:has(>*){background:#f4f5f7;padding:20px 24px}.flex-column>.content-body:has(>*){border-top:1px solid #e8eaee}\n"] }]
|
|
2729
2728
|
}], propDecorators: { title: [{
|
|
2730
2729
|
type: Input
|
|
2731
2730
|
}], actions: [{
|
|
@@ -3013,214 +3012,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
3013
3012
|
type: Output
|
|
3014
3013
|
}] } });
|
|
3015
3014
|
|
|
3016
|
-
class IonTextInputComponent {
|
|
3017
|
-
controlName;
|
|
3018
|
-
label = '';
|
|
3019
|
-
placeholder = '';
|
|
3020
|
-
type = 'text';
|
|
3021
|
-
loading = false;
|
|
3022
|
-
disabled = false;
|
|
3023
|
-
step = 1;
|
|
3024
|
-
controlContainer = inject(ControlContainer);
|
|
3025
|
-
ngOnChanges(changes) {
|
|
3026
|
-
if (changes['disabled']) {
|
|
3027
|
-
this.disabled ? this.control.disable() : this.control.enable();
|
|
3028
|
-
}
|
|
3029
|
-
}
|
|
3030
|
-
get control() {
|
|
3031
|
-
return this.controlContainer.control.get(this.controlName);
|
|
3032
|
-
}
|
|
3033
|
-
increment() {
|
|
3034
|
-
const current = Number(this.control.value ?? 0);
|
|
3035
|
-
this.control.setValue(current + this.step);
|
|
3036
|
-
this.control.markAsDirty();
|
|
3037
|
-
}
|
|
3038
|
-
decrement() {
|
|
3039
|
-
const current = Number(this.control.value ?? 0);
|
|
3040
|
-
this.control.setValue(current - this.step);
|
|
3041
|
-
this.control.markAsDirty();
|
|
3042
|
-
}
|
|
3043
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3044
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: IonTextInputComponent, isStandalone: true, selector: "ud-ion-text-input", inputs: { controlName: "controlName", label: "label", placeholder: "placeholder", type: "type", loading: "loading", disabled: "disabled", step: "step" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-ion-field-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n <ion-input\n class=\"ud-ion-input\"\n [formControlName]=\"controlName\"\n [type]=\"type\"\n [label]=\"label\"\n labelPlacement=\"floating\"\n fill=\"outline\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled || control.disabled\">\n @if (loading) {\n <ion-spinner slot=\"end\" name=\"crescent\" class=\"ud-ion-spinner\" />\n } @else if (type === 'number') {\n <div slot=\"end\" class=\"ud-number-arrows\">\n <button\n type=\"button\"\n class=\"ud-arrow-btn\"\n [disabled]=\"disabled || control.disabled\"\n (mousedown)=\"$event.preventDefault(); increment()\">▲</button>\n <button\n type=\"button\"\n class=\"ud-arrow-btn\"\n [disabled]=\"disabled || control.disabled\"\n (mousedown)=\"$event.preventDefault(); decrement()\">▼</button>\n </div>\n }\n </ion-input>\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-field-wrap{width:100%}.ud-ion-field-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-input.ud-ion-input{--border-radius: 12px;--border-color: #e2e5ea;--border-width: 1.5px;--background: #ffffff;--color: #1b2535;--placeholder-color: #6b7585;--placeholder-opacity: 1;--highlight-color-focused: #1b2535;--highlight-color-valid: #1b2535;--padding-start: 14px;--padding-end: 14px;--padding-top: 10px;--padding-bottom: 10px;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem}ion-input.ud-ion-input::part(label){font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:.85rem}.ud-ion-spinner{color:#6b7585;width:16px;height:16px}.ud-number-arrows{display:flex;flex-direction:column;gap:1px;margin-right:2px}.ud-arrow-btn{display:flex;align-items:center;justify-content:center;width:18px;height:14px;background:#f4f5f7;border:1px solid #e2e5ea;border-radius:3px;cursor:pointer;font-size:8px;color:#6b7585;padding:0;line-height:1;transition:background .15s ease}.ud-arrow-btn:hover:not([disabled]){background:#e2e5ea;color:#1b2535}.ud-arrow-btn[disabled]{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
|
|
3045
|
-
}
|
|
3046
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonTextInputComponent, decorators: [{
|
|
3047
|
-
type: Component,
|
|
3048
|
-
args: [{ selector: 'ud-ion-text-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonInput, IonSpinner], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div class=\"ud-ion-field-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n <ion-input\n class=\"ud-ion-input\"\n [formControlName]=\"controlName\"\n [type]=\"type\"\n [label]=\"label\"\n labelPlacement=\"floating\"\n fill=\"outline\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled || control.disabled\">\n @if (loading) {\n <ion-spinner slot=\"end\" name=\"crescent\" class=\"ud-ion-spinner\" />\n } @else if (type === 'number') {\n <div slot=\"end\" class=\"ud-number-arrows\">\n <button\n type=\"button\"\n class=\"ud-arrow-btn\"\n [disabled]=\"disabled || control.disabled\"\n (mousedown)=\"$event.preventDefault(); increment()\">▲</button>\n <button\n type=\"button\"\n class=\"ud-arrow-btn\"\n [disabled]=\"disabled || control.disabled\"\n (mousedown)=\"$event.preventDefault(); decrement()\">▼</button>\n </div>\n }\n </ion-input>\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-field-wrap{width:100%}.ud-ion-field-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-input.ud-ion-input{--border-radius: 12px;--border-color: #e2e5ea;--border-width: 1.5px;--background: #ffffff;--color: #1b2535;--placeholder-color: #6b7585;--placeholder-opacity: 1;--highlight-color-focused: #1b2535;--highlight-color-valid: #1b2535;--padding-start: 14px;--padding-end: 14px;--padding-top: 10px;--padding-bottom: 10px;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem}ion-input.ud-ion-input::part(label){font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:.85rem}.ud-ion-spinner{color:#6b7585;width:16px;height:16px}.ud-number-arrows{display:flex;flex-direction:column;gap:1px;margin-right:2px}.ud-arrow-btn{display:flex;align-items:center;justify-content:center;width:18px;height:14px;background:#f4f5f7;border:1px solid #e2e5ea;border-radius:3px;cursor:pointer;font-size:8px;color:#6b7585;padding:0;line-height:1;transition:background .15s ease}.ud-arrow-btn:hover:not([disabled]){background:#e2e5ea;color:#1b2535}.ud-arrow-btn[disabled]{opacity:.4;cursor:not-allowed}\n"] }]
|
|
3049
|
-
}], propDecorators: { controlName: [{
|
|
3050
|
-
type: Input,
|
|
3051
|
-
args: [{ required: true }]
|
|
3052
|
-
}], label: [{
|
|
3053
|
-
type: Input
|
|
3054
|
-
}], placeholder: [{
|
|
3055
|
-
type: Input
|
|
3056
|
-
}], type: [{
|
|
3057
|
-
type: Input
|
|
3058
|
-
}], loading: [{
|
|
3059
|
-
type: Input
|
|
3060
|
-
}], disabled: [{
|
|
3061
|
-
type: Input
|
|
3062
|
-
}], step: [{
|
|
3063
|
-
type: Input
|
|
3064
|
-
}] } });
|
|
3065
|
-
|
|
3066
|
-
class IonSelectComponent {
|
|
3067
|
-
controlName;
|
|
3068
|
-
label = '';
|
|
3069
|
-
options = [];
|
|
3070
|
-
multiple = false;
|
|
3071
|
-
placeholder = 'Select...';
|
|
3072
|
-
loading = false;
|
|
3073
|
-
disabled = false;
|
|
3074
|
-
controlContainer = inject(ControlContainer);
|
|
3075
|
-
ngOnChanges(changes) {
|
|
3076
|
-
if (changes['disabled']) {
|
|
3077
|
-
this.disabled ? this.control.disable() : this.control.enable();
|
|
3078
|
-
}
|
|
3079
|
-
}
|
|
3080
|
-
get control() {
|
|
3081
|
-
return this.controlContainer.control.get(this.controlName);
|
|
3082
|
-
}
|
|
3083
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3084
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: IonSelectComponent, isStandalone: true, selector: "ud-ion-select", inputs: { controlName: "controlName", label: "label", options: "options", multiple: "multiple", placeholder: "placeholder", loading: "loading", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-ion-field-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n @if (loading) {\n <div class=\"ud-ion-skeleton\"></div>\n } @else {\n <ion-select\n class=\"ud-ion-select\"\n [formControlName]=\"controlName\"\n [label]=\"label\"\n labelPlacement=\"floating\"\n fill=\"outline\"\n [multiple]=\"multiple\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled || control.disabled\">\n @for (option of options; track option.value) {\n <ion-select-option [value]=\"option.value\">{{ option.label }}</ion-select-option>\n }\n </ion-select>\n }\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-field-wrap{width:100%}.ud-ion-field-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-select.ud-ion-select{--border-radius: 12px;--border-color: #e2e5ea;--border-width: 1.5px;--background: #ffffff;--color: #1b2535;--placeholder-color: #6b7585;--placeholder-opacity: 1;--highlight-color-focused: #1b2535;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;width:100%}ion-select.ud-ion-select::part(label){font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:.85rem}.ud-ion-skeleton{height:56px;border-radius:12px;background:linear-gradient(90deg,#f4f5f7 25%,#eaecef,#f4f5f7 75%);background-size:800px 100%;animation:shimmer 1.4s infinite linear}@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
|
|
3085
|
-
}
|
|
3086
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonSelectComponent, decorators: [{
|
|
3087
|
-
type: Component,
|
|
3088
|
-
args: [{ selector: 'ud-ion-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonSelect, IonSelectOption], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div class=\"ud-ion-field-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n @if (loading) {\n <div class=\"ud-ion-skeleton\"></div>\n } @else {\n <ion-select\n class=\"ud-ion-select\"\n [formControlName]=\"controlName\"\n [label]=\"label\"\n labelPlacement=\"floating\"\n fill=\"outline\"\n [multiple]=\"multiple\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled || control.disabled\">\n @for (option of options; track option.value) {\n <ion-select-option [value]=\"option.value\">{{ option.label }}</ion-select-option>\n }\n </ion-select>\n }\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-field-wrap{width:100%}.ud-ion-field-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-select.ud-ion-select{--border-radius: 12px;--border-color: #e2e5ea;--border-width: 1.5px;--background: #ffffff;--color: #1b2535;--placeholder-color: #6b7585;--placeholder-opacity: 1;--highlight-color-focused: #1b2535;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;width:100%}ion-select.ud-ion-select::part(label){font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:.85rem}.ud-ion-skeleton{height:56px;border-radius:12px;background:linear-gradient(90deg,#f4f5f7 25%,#eaecef,#f4f5f7 75%);background-size:800px 100%;animation:shimmer 1.4s infinite linear}@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}\n"] }]
|
|
3089
|
-
}], propDecorators: { controlName: [{
|
|
3090
|
-
type: Input,
|
|
3091
|
-
args: [{ required: true }]
|
|
3092
|
-
}], label: [{
|
|
3093
|
-
type: Input
|
|
3094
|
-
}], options: [{
|
|
3095
|
-
type: Input
|
|
3096
|
-
}], multiple: [{
|
|
3097
|
-
type: Input
|
|
3098
|
-
}], placeholder: [{
|
|
3099
|
-
type: Input
|
|
3100
|
-
}], loading: [{
|
|
3101
|
-
type: Input
|
|
3102
|
-
}], disabled: [{
|
|
3103
|
-
type: Input
|
|
3104
|
-
}] } });
|
|
3105
|
-
|
|
3106
|
-
class IonTextareaComponent {
|
|
3107
|
-
controlName;
|
|
3108
|
-
label = '';
|
|
3109
|
-
placeholder = '';
|
|
3110
|
-
rows = 4;
|
|
3111
|
-
disabled = false;
|
|
3112
|
-
controlContainer = inject(ControlContainer);
|
|
3113
|
-
ngOnChanges(changes) {
|
|
3114
|
-
if (changes['disabled']) {
|
|
3115
|
-
this.disabled ? this.control.disable() : this.control.enable();
|
|
3116
|
-
}
|
|
3117
|
-
}
|
|
3118
|
-
get control() {
|
|
3119
|
-
return this.controlContainer.control.get(this.controlName);
|
|
3120
|
-
}
|
|
3121
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3122
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: IonTextareaComponent, isStandalone: true, selector: "ud-ion-textarea", inputs: { controlName: "controlName", label: "label", placeholder: "placeholder", rows: "rows", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-ion-field-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n <ion-textarea\n class=\"ud-ion-textarea\"\n [formControlName]=\"controlName\"\n [label]=\"label\"\n labelPlacement=\"floating\"\n fill=\"outline\"\n [placeholder]=\"placeholder\"\n [rows]=\"rows\"\n [disabled]=\"disabled || control.disabled\" />\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-field-wrap{width:100%}.ud-ion-field-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-textarea.ud-ion-textarea{--border-radius: 12px;--border-color: #e2e5ea;--border-width: 1.5px;--background: #ffffff;--color: #1b2535;--placeholder-color: #6b7585;--placeholder-opacity: 1;--highlight-color-focused: #1b2535;--padding-start: 14px;--padding-end: 14px;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem}ion-textarea.ud-ion-textarea::part(label){font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:.85rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
|
|
3123
|
-
}
|
|
3124
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonTextareaComponent, decorators: [{
|
|
3125
|
-
type: Component,
|
|
3126
|
-
args: [{ selector: 'ud-ion-textarea', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonTextarea], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div class=\"ud-ion-field-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n <ion-textarea\n class=\"ud-ion-textarea\"\n [formControlName]=\"controlName\"\n [label]=\"label\"\n labelPlacement=\"floating\"\n fill=\"outline\"\n [placeholder]=\"placeholder\"\n [rows]=\"rows\"\n [disabled]=\"disabled || control.disabled\" />\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-field-wrap{width:100%}.ud-ion-field-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-textarea.ud-ion-textarea{--border-radius: 12px;--border-color: #e2e5ea;--border-width: 1.5px;--background: #ffffff;--color: #1b2535;--placeholder-color: #6b7585;--placeholder-opacity: 1;--highlight-color-focused: #1b2535;--padding-start: 14px;--padding-end: 14px;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem}ion-textarea.ud-ion-textarea::part(label){font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:.85rem}\n"] }]
|
|
3127
|
-
}], propDecorators: { controlName: [{
|
|
3128
|
-
type: Input,
|
|
3129
|
-
args: [{ required: true }]
|
|
3130
|
-
}], label: [{
|
|
3131
|
-
type: Input
|
|
3132
|
-
}], placeholder: [{
|
|
3133
|
-
type: Input
|
|
3134
|
-
}], rows: [{
|
|
3135
|
-
type: Input
|
|
3136
|
-
}], disabled: [{
|
|
3137
|
-
type: Input
|
|
3138
|
-
}] } });
|
|
3139
|
-
|
|
3140
|
-
class IonToggleComponent {
|
|
3141
|
-
controlName;
|
|
3142
|
-
label = '';
|
|
3143
|
-
labelPosition = 'end';
|
|
3144
|
-
disabled = false;
|
|
3145
|
-
ionChange = new EventEmitter();
|
|
3146
|
-
controlContainer = inject(ControlContainer);
|
|
3147
|
-
destroy$ = new Subject();
|
|
3148
|
-
ngOnInit() {
|
|
3149
|
-
this.control.valueChanges
|
|
3150
|
-
.pipe(startWith(this.control.value), takeUntil(this.destroy$))
|
|
3151
|
-
.subscribe(() => { });
|
|
3152
|
-
}
|
|
3153
|
-
ngOnChanges(changes) {
|
|
3154
|
-
if (changes['disabled']) {
|
|
3155
|
-
this.disabled ? this.control.disable() : this.control.enable();
|
|
3156
|
-
}
|
|
3157
|
-
}
|
|
3158
|
-
ngOnDestroy() {
|
|
3159
|
-
this.destroy$.next();
|
|
3160
|
-
this.destroy$.complete();
|
|
3161
|
-
}
|
|
3162
|
-
get control() {
|
|
3163
|
-
return this.controlContainer.control.get(this.controlName);
|
|
3164
|
-
}
|
|
3165
|
-
onToggleChange(event) {
|
|
3166
|
-
this.ionChange.emit(event.detail.checked);
|
|
3167
|
-
}
|
|
3168
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3169
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: IonToggleComponent, isStandalone: true, selector: "ud-ion-toggle", inputs: { controlName: "controlName", label: "label", labelPosition: "labelPosition", disabled: "disabled" }, outputs: { ionChange: "ionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-ion-toggle-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n <ion-toggle\n class=\"ud-ion-toggle\"\n [formControlName]=\"controlName\"\n [labelPlacement]=\"labelPosition\"\n [disabled]=\"disabled || control.disabled\"\n (ionChange)=\"onToggleChange($event)\">\n {{ label }}\n </ion-toggle>\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-toggle-wrap{display:inline-flex;align-items:center}.ud-ion-toggle-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-toggle.ud-ion-toggle{--track-background: #e2e5ea;--track-background-checked: #1b2535;--handle-background: #ffffff;--handle-background-checked: #ffffff;--handle-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;color:#1b2535}ion-toggle.ud-ion-toggle::part(label){font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;color:#1b2535;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "enableOnOffLabels", "errorText", "helperText", "justify", "labelPlacement", "mode", "name", "value"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
|
|
3170
|
-
}
|
|
3171
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonToggleComponent, decorators: [{
|
|
3172
|
-
type: Component,
|
|
3173
|
-
args: [{ selector: 'ud-ion-toggle', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonToggle], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div class=\"ud-ion-toggle-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n <ion-toggle\n class=\"ud-ion-toggle\"\n [formControlName]=\"controlName\"\n [labelPlacement]=\"labelPosition\"\n [disabled]=\"disabled || control.disabled\"\n (ionChange)=\"onToggleChange($event)\">\n {{ label }}\n </ion-toggle>\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-toggle-wrap{display:inline-flex;align-items:center}.ud-ion-toggle-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-toggle.ud-ion-toggle{--track-background: #e2e5ea;--track-background-checked: #1b2535;--handle-background: #ffffff;--handle-background-checked: #ffffff;--handle-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;color:#1b2535}ion-toggle.ud-ion-toggle::part(label){font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;color:#1b2535;font-weight:500}\n"] }]
|
|
3174
|
-
}], propDecorators: { controlName: [{
|
|
3175
|
-
type: Input,
|
|
3176
|
-
args: [{ required: true }]
|
|
3177
|
-
}], label: [{
|
|
3178
|
-
type: Input
|
|
3179
|
-
}], labelPosition: [{
|
|
3180
|
-
type: Input
|
|
3181
|
-
}], disabled: [{
|
|
3182
|
-
type: Input
|
|
3183
|
-
}], ionChange: [{
|
|
3184
|
-
type: Output
|
|
3185
|
-
}] } });
|
|
3186
|
-
|
|
3187
|
-
class IonPillToggleComponent {
|
|
3188
|
-
controlName;
|
|
3189
|
-
label = '';
|
|
3190
|
-
options = [];
|
|
3191
|
-
disabled = false;
|
|
3192
|
-
controlContainer = inject(ControlContainer);
|
|
3193
|
-
ngOnChanges(changes) {
|
|
3194
|
-
if (changes['disabled']) {
|
|
3195
|
-
this.disabled ? this.control.disable() : this.control.enable();
|
|
3196
|
-
}
|
|
3197
|
-
}
|
|
3198
|
-
get control() {
|
|
3199
|
-
return this.controlContainer.control.get(this.controlName);
|
|
3200
|
-
}
|
|
3201
|
-
onSegmentChange(event) {
|
|
3202
|
-
if (this.control.disabled)
|
|
3203
|
-
return;
|
|
3204
|
-
this.control.setValue(event.detail.value);
|
|
3205
|
-
this.control.markAsTouched();
|
|
3206
|
-
}
|
|
3207
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonPillToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3208
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: IonPillToggleComponent, isStandalone: true, selector: "ud-ion-pill-toggle", inputs: { controlName: "controlName", label: "label", options: "options", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-ion-pill-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n @if (label) {\n <span class=\"ud-ion-pill-label\">{{ label }}</span>\n }\n <ion-segment\n class=\"ud-ion-segment\"\n [value]=\"control.value\"\n [disabled]=\"disabled || control.disabled\"\n (ionChange)=\"onSegmentChange($event)\">\n @for (option of options; track option.value) {\n <ion-segment-button [value]=\"option.value\" class=\"ud-ion-segment-btn\">\n <ion-label>{{ option.label }}</ion-label>\n </ion-segment-button>\n }\n </ion-segment>\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-pill-wrap{display:flex;flex-direction:column;gap:6px}.ud-ion-pill-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.ud-ion-pill-label{font-family:DM Sans,system-ui,sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6b7585}ion-segment.ud-ion-segment{--background: #f4f5f7;border-radius:10px;padding:3px;height:40px}ion-segment-button.ud-ion-segment-btn{--background: transparent;--background-checked: #1b2535;--color: #6b7585;--color-checked: #ffffff;--border-radius: 8px;--indicator-height: 0;--padding-top: 0;--padding-bottom: 0;min-height:unset;font-family:DM Sans,system-ui,sans-serif;font-size:.8rem;font-weight:500;transition:background .15s ease}ion-segment-button.ud-ion-segment-btn ion-label{font-family:DM Sans,system-ui,sans-serif;font-size:.8rem;font-weight:500;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: IonSegmentButton, selector: "ion-segment-button", inputs: ["contentId", "disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
|
|
3209
|
-
}
|
|
3210
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonPillToggleComponent, decorators: [{
|
|
3211
|
-
type: Component,
|
|
3212
|
-
args: [{ selector: 'ud-ion-pill-toggle', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonSegment, IonSegmentButton, IonLabel], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div class=\"ud-ion-pill-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n @if (label) {\n <span class=\"ud-ion-pill-label\">{{ label }}</span>\n }\n <ion-segment\n class=\"ud-ion-segment\"\n [value]=\"control.value\"\n [disabled]=\"disabled || control.disabled\"\n (ionChange)=\"onSegmentChange($event)\">\n @for (option of options; track option.value) {\n <ion-segment-button [value]=\"option.value\" class=\"ud-ion-segment-btn\">\n <ion-label>{{ option.label }}</ion-label>\n </ion-segment-button>\n }\n </ion-segment>\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-pill-wrap{display:flex;flex-direction:column;gap:6px}.ud-ion-pill-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.ud-ion-pill-label{font-family:DM Sans,system-ui,sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6b7585}ion-segment.ud-ion-segment{--background: #f4f5f7;border-radius:10px;padding:3px;height:40px}ion-segment-button.ud-ion-segment-btn{--background: transparent;--background-checked: #1b2535;--color: #6b7585;--color-checked: #ffffff;--border-radius: 8px;--indicator-height: 0;--padding-top: 0;--padding-bottom: 0;min-height:unset;font-family:DM Sans,system-ui,sans-serif;font-size:.8rem;font-weight:500;transition:background .15s ease}ion-segment-button.ud-ion-segment-btn ion-label{font-family:DM Sans,system-ui,sans-serif;font-size:.8rem;font-weight:500;margin:0}\n"] }]
|
|
3213
|
-
}], propDecorators: { controlName: [{
|
|
3214
|
-
type: Input,
|
|
3215
|
-
args: [{ required: true }]
|
|
3216
|
-
}], label: [{
|
|
3217
|
-
type: Input
|
|
3218
|
-
}], options: [{
|
|
3219
|
-
type: Input
|
|
3220
|
-
}], disabled: [{
|
|
3221
|
-
type: Input
|
|
3222
|
-
}] } });
|
|
3223
|
-
|
|
3224
3015
|
const generateTimeOptions = (start, end, intervalMinutes = 5) => {
|
|
3225
3016
|
const options = [];
|
|
3226
3017
|
const cursor = new Date(start);
|
|
@@ -3244,5 +3035,5 @@ const generateTimeOptions = (start, end, intervalMinutes = 5) => {
|
|
|
3244
3035
|
* Generated bundle index. Do not edit.
|
|
3245
3036
|
*/
|
|
3246
3037
|
|
|
3247
|
-
export { ActionType, ApplicationStatus, AutocompleteComponent, CapitalizePipe, CarouselComponent, CustomInputComponent, CustomSnackbarComponent, CustomTableComponent, DateInputComponent, DateOperator, DateRangeInputComponent, DynamicComponentComponent, EditViewComponent, EditViewSectionDirective, FileInputComponent, FilterType, IconColor,
|
|
3038
|
+
export { ActionType, ApplicationStatus, AutocompleteComponent, CapitalizePipe, CarouselComponent, CustomInputComponent, CustomSnackbarComponent, CustomTableComponent, DateInputComponent, DateOperator, DateRangeInputComponent, DynamicComponentComponent, EditViewComponent, EditViewSectionDirective, FileInputComponent, FilterType, IconColor, KpiComponent, KpiDataType, KpiPillType, KpiProgressBarType, KpiVariant, ModalComponent, ModalInputType, MultiSelectComponent, NumberOperator, PhoneInputComponent, PillComponent, PillToggleComponent, PluralizePipe, ProgressBarComponent, Role, SafePipe, SingularPipe, SnackbarType, StringOperator, SummaryViewComponent, TableDisplayColumnType, TabsComponent, TelInputComponent, TextInputComponent, TextareaComponent, TimePickerComponent, ToggleComponent, TranslateWrapperService, UdButtonComponent, capitalize, formatLocalDate, formatLocalDateTime, formatLocalDateTimeLongForm, formatLocalTime, formatLocalTimeWithMinutes, formatLocalTimeWithMinutesAmPm, formatMonthYear, formatPhoneNumber, formatStringDate, formatStringDateTime, generateTimeOptions, inListValidator, parseLocalDate, pluralize, spaceCase, updateArray };
|
|
3248
3039
|
//# sourceMappingURL=ud-components.mjs.map
|