ngx-sfc-components 0.0.17 → 0.0.19
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/esm2020/lib/components/avatar/avatar.component.mjs +2 -2
- package/esm2020/lib/components/index.mjs +2 -1
- package/esm2020/lib/components/menu/dropdown/parts/item/dropdown-menu-item.model.mjs +1 -1
- package/esm2020/lib/components/progress/circle/progress-circle.component.mjs +13 -7
- package/esm2020/lib/components/progress/line/progress-line.component.mjs +9 -4
- package/esm2020/lib/components/progress/progress.component.mjs +3 -32
- package/esm2020/lib/components/progress/progress.utils.mjs +62 -0
- package/esm2020/lib/components/progress/semi-circle/progress-semi-circle.component.mjs +2 -2
- package/esm2020/lib/components/table/parts/columns/selectable/selectable-table-column.component.mjs +1 -1
- package/esm2020/lib/components/table/parts/content/cards/default/default-table-card.component.mjs +1 -1
- package/esm2020/lib/components/table/parts/content/rows/default/default-table-row.component.mjs +1 -1
- package/esm2020/lib/components/tabs/models/tab.model.mjs +1 -1
- package/esm2020/lib/components/tabs/parts/labels/tab-label-content-base.component.mjs +6 -2
- package/esm2020/lib/components/tabs/parts/labels/tab-label-icon/tab-label-icon.component.mjs +3 -8
- package/esm2020/lib/components/tabs/parts/labels/tab-label-line/tab-label-line.component.mjs +16 -7
- package/esm2020/lib/components/tabs/tabs.component.mjs +1 -1
- package/esm2020/lib/components/timeline/parts/item/timeline-item.model.mjs +1 -1
- package/fesm2015/ngx-sfc-components.mjs +107 -55
- package/fesm2015/ngx-sfc-components.mjs.map +1 -1
- package/fesm2020/ngx-sfc-components.mjs +107 -55
- package/fesm2020/ngx-sfc-components.mjs.map +1 -1
- package/lib/components/index.d.ts +1 -0
- package/lib/components/menu/dropdown/parts/item/dropdown-menu-item.model.d.ts +2 -2
- package/lib/components/progress/circle/progress-circle.component.d.ts +2 -1
- package/lib/components/progress/line/progress-line.component.d.ts +2 -1
- package/lib/components/progress/progress.component.d.ts +1 -2
- package/lib/components/progress/progress.utils.d.ts +2 -0
- package/lib/components/tabs/models/tab.model.d.ts +3 -2
- package/lib/components/tabs/parts/labels/tab-label-content-base.component.d.ts +1 -0
- package/lib/components/tabs/parts/labels/tab-label-icon/tab-label-icon.component.d.ts +1 -3
- package/lib/components/tabs/parts/labels/tab-label-line/tab-label-line.component.d.ts +4 -1
- package/lib/components/timeline/parts/item/timeline-item.model.d.ts +2 -2
- package/package.json +2 -2
|
@@ -58,10 +58,10 @@ export class AvatarComponent {
|
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
61
|
-
AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AvatarComponent, selector: "sfc-avatar", inputs: { radius: "radius", stroke: "stroke", progress: "progress", progressModel: "progressModel", data: "data", stars: "stars", starsValue: "starsValue" }, queries: [{ propertyName: "badges", predicate: AvatarBadgeComponent, read: AvatarBadgeComponent }], ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"avatar-image-container\">\r\n <div class=\"avatar\" (mouseenter)=\"stroke = stroke * STROKE_HOVER_VALUE\"\r\n (mouseleave)=\"stroke = stroke / STROKE_HOVER_VALUE\">\r\n\r\n <div class=\"avatar-image\">\r\n <svg [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n <defs>\r\n <pattern id=\"{{imageModel.ImageId}}\" patternUnits=\"userSpaceOnUse\"\r\n [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n <image [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\"\r\n [attr.xlink:href]=\"data.image\" preserveAspectRatio=\"xMidYMid slice\"></image>\r\n </pattern>\r\n </defs>\r\n <circle class=\"progress\" [attr.stroke]=\"progressModel.color\" [attr.stroke-width]=\"stroke\"\r\n fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n [attr.cy]=\"radius\" />\r\n <circle class=\"progress\" [attr.stroke]=\"progressModel.filledColor\"\r\n [attr.stroke-dasharray]=\"imageModel.Circumference + ' ' + imageModel.Circumference\"\r\n [ngStyle]=\"{'stroke-dashoffset':strokeDashOffset}\" [attr.stroke-width]=\"stroke\"\r\n fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n [attr.cy]=\"radius\" />\r\n\r\n <circle [attr.cx]=\"radius\" [attr.cy]=\"radius\" [attr.r]=\"imageModel.ImageRadius\"\r\n attr.fill=\"url('#{{imageModel.ImageId}}')\" />\r\n </svg>\r\n </div>\r\n\r\n <ng-content></ng-content>\r\n\r\n </div>\r\n\r\n <sfc-stars *ngIf=\"stars\" [value]=\"starsValue\"></sfc-stars>\r\n </div>\r\n\r\n <div class=\"avatar-data-container\">\r\n <div class=\"fullname\" [style.fontSize.px]=\"radius / FULLNAME_PART_VALUE\">\r\n <span>{{data.firstName}} {{data.lastName}}</span>\r\n </div>\r\n <div class=\"title\" [style.fontSize.px]=\"radius / TITLE_PART_VALUE\">\r\n <span>{{data.title}}</span>\r\n </div>\r\n </div>\r\n</div>", styles: [":host .container .avatar-image-container{display:flex;justify-content:center;flex-direction:column;align-items:center}:host .container .avatar-image-container .avatar{position:relative;margin-bottom:.5em}:host .container .avatar-image-container .avatar .avatar-image{display:flex;overflow:hidden;align-items:center;justify-content:center}:host .container .avatar-image-container .avatar .avatar-image circle{transform-origin:50% 50%;transition:stroke-dashoffset .35s,stroke-width .3s}:host .container .avatar-image-container .avatar .avatar-image circle.progress{transform:rotate(-90deg)}:host .container .avatar-data-container{display:flex;flex-direction:column;align-items:center;font-size:1em;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .avatar-data-container .fullname,:host-context(.sfc-default-theme) :host .container .avatar-data-container .fullname{color:#545e61}:host-context(.sfc-dark-theme) :host .container .avatar-data-container .fullname{color:#f5f7fa}:host .container .avatar-data-container .title{color:#aab2bd}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.StarsComponent, selector: "sfc-stars", inputs: ["value", "count"] }] });
|
|
61
|
+
AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: AvatarComponent, selector: "sfc-avatar", inputs: { radius: "radius", stroke: "stroke", progress: "progress", progressModel: "progressModel", data: "data", stars: "stars", starsValue: "starsValue" }, queries: [{ propertyName: "badges", predicate: AvatarBadgeComponent, read: AvatarBadgeComponent }], ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"avatar-image-container\">\r\n <div class=\"avatar\" (mouseenter)=\"stroke = stroke * STROKE_HOVER_VALUE\"\r\n (mouseleave)=\"stroke = stroke / STROKE_HOVER_VALUE\">\r\n\r\n <div class=\"avatar-image\">\r\n <svg [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n <defs>\r\n <pattern id=\"{{imageModel.ImageId}}\" patternUnits=\"userSpaceOnUse\"\r\n [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n <image [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\"\r\n [attr.xlink:href]=\"data.image\" preserveAspectRatio=\"xMidYMid slice\"></image>\r\n </pattern>\r\n </defs>\r\n <circle class=\"progress\" [attr.stroke]=\"progressModel.color\" [attr.stroke-width]=\"stroke\"\r\n fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n [attr.cy]=\"radius\" />\r\n <circle class=\"progress\" [attr.stroke]=\"progressModel.filledColor\"\r\n [attr.stroke-dasharray]=\"imageModel.Circumference + ' ' + imageModel.Circumference\"\r\n [ngStyle]=\"{'stroke-dashoffset':strokeDashOffset}\" [attr.stroke-width]=\"stroke\"\r\n fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n [attr.cy]=\"radius\" />\r\n\r\n <circle [attr.cx]=\"radius\" [attr.cy]=\"radius\" [attr.r]=\"imageModel.ImageRadius\"\r\n attr.fill=\"url('#{{imageModel.ImageId}}')\" />\r\n </svg>\r\n </div>\r\n\r\n <ng-content></ng-content>\r\n\r\n </div>\r\n\r\n <sfc-stars *ngIf=\"stars\" [value]=\"starsValue\"></sfc-stars>\r\n </div>\r\n\r\n <div class=\"avatar-data-container\">\r\n <div class=\"fullname\" [style.fontSize.px]=\"radius / FULLNAME_PART_VALUE\">\r\n <span>{{data.firstName}} {{data.lastName}}</span>\r\n </div>\r\n <div class=\"title\" [style.fontSize.px]=\"radius / TITLE_PART_VALUE\">\r\n <span>{{data.title}}</span>\r\n </div>\r\n </div>\r\n</div>", styles: [":host .container .avatar-image-container{display:flex;justify-content:center;flex-direction:column;align-items:center}:host .container .avatar-image-container .avatar{position:relative;margin-bottom:.5em}:host .container .avatar-image-container .avatar .avatar-image{display:flex;overflow:hidden;align-items:center;justify-content:center}:host .container .avatar-image-container .avatar .avatar-image circle{transform-origin:50% 50%;transition:stroke-dashoffset .35s,stroke-width .3s}:host .container .avatar-image-container .avatar .avatar-image circle.progress{transform:rotate(-90deg)}:host .container .avatar-data-container{display:flex;flex-direction:column;align-items:center;font-size:1em;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .avatar-data-container .fullname,:host-context(.sfc-default-theme) :host .container .avatar-data-container .fullname{color:#545e61}:host-context(.sfc-dark-theme) :host .container .avatar-data-container .fullname{color:#f5f7fa}:host .container .avatar-data-container .title{color:#aab2bd}:host .container .avatar-data-container .fullname,:host .container .avatar-data-container .title{transition:color .5s ease}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.StarsComponent, selector: "sfc-stars", inputs: ["value", "count"] }] });
|
|
62
62
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
63
63
|
type: Component,
|
|
64
|
-
args: [{ selector: 'sfc-avatar', template: "<div class=\"container\">\r\n <div class=\"avatar-image-container\">\r\n <div class=\"avatar\" (mouseenter)=\"stroke = stroke * STROKE_HOVER_VALUE\"\r\n (mouseleave)=\"stroke = stroke / STROKE_HOVER_VALUE\">\r\n\r\n <div class=\"avatar-image\">\r\n <svg [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n <defs>\r\n <pattern id=\"{{imageModel.ImageId}}\" patternUnits=\"userSpaceOnUse\"\r\n [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n <image [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\"\r\n [attr.xlink:href]=\"data.image\" preserveAspectRatio=\"xMidYMid slice\"></image>\r\n </pattern>\r\n </defs>\r\n <circle class=\"progress\" [attr.stroke]=\"progressModel.color\" [attr.stroke-width]=\"stroke\"\r\n fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n [attr.cy]=\"radius\" />\r\n <circle class=\"progress\" [attr.stroke]=\"progressModel.filledColor\"\r\n [attr.stroke-dasharray]=\"imageModel.Circumference + ' ' + imageModel.Circumference\"\r\n [ngStyle]=\"{'stroke-dashoffset':strokeDashOffset}\" [attr.stroke-width]=\"stroke\"\r\n fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n [attr.cy]=\"radius\" />\r\n\r\n <circle [attr.cx]=\"radius\" [attr.cy]=\"radius\" [attr.r]=\"imageModel.ImageRadius\"\r\n attr.fill=\"url('#{{imageModel.ImageId}}')\" />\r\n </svg>\r\n </div>\r\n\r\n <ng-content></ng-content>\r\n\r\n </div>\r\n\r\n <sfc-stars *ngIf=\"stars\" [value]=\"starsValue\"></sfc-stars>\r\n </div>\r\n\r\n <div class=\"avatar-data-container\">\r\n <div class=\"fullname\" [style.fontSize.px]=\"radius / FULLNAME_PART_VALUE\">\r\n <span>{{data.firstName}} {{data.lastName}}</span>\r\n </div>\r\n <div class=\"title\" [style.fontSize.px]=\"radius / TITLE_PART_VALUE\">\r\n <span>{{data.title}}</span>\r\n </div>\r\n </div>\r\n</div>", styles: [":host .container .avatar-image-container{display:flex;justify-content:center;flex-direction:column;align-items:center}:host .container .avatar-image-container .avatar{position:relative;margin-bottom:.5em}:host .container .avatar-image-container .avatar .avatar-image{display:flex;overflow:hidden;align-items:center;justify-content:center}:host .container .avatar-image-container .avatar .avatar-image circle{transform-origin:50% 50%;transition:stroke-dashoffset .35s,stroke-width .3s}:host .container .avatar-image-container .avatar .avatar-image circle.progress{transform:rotate(-90deg)}:host .container .avatar-data-container{display:flex;flex-direction:column;align-items:center;font-size:1em;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .avatar-data-container .fullname,:host-context(.sfc-default-theme) :host .container .avatar-data-container .fullname{color:#545e61}:host-context(.sfc-dark-theme) :host .container .avatar-data-container .fullname{color:#f5f7fa}:host .container .avatar-data-container .title{color:#aab2bd}\n"] }]
|
|
64
|
+
args: [{ selector: 'sfc-avatar', template: "<div class=\"container\">\r\n <div class=\"avatar-image-container\">\r\n <div class=\"avatar\" (mouseenter)=\"stroke = stroke * STROKE_HOVER_VALUE\"\r\n (mouseleave)=\"stroke = stroke / STROKE_HOVER_VALUE\">\r\n\r\n <div class=\"avatar-image\">\r\n <svg [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n <defs>\r\n <pattern id=\"{{imageModel.ImageId}}\" patternUnits=\"userSpaceOnUse\"\r\n [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\">\r\n <image [attr.height]=\"imageModel.Height\" [attr.width]=\"imageModel.Width\"\r\n [attr.xlink:href]=\"data.image\" preserveAspectRatio=\"xMidYMid slice\"></image>\r\n </pattern>\r\n </defs>\r\n <circle class=\"progress\" [attr.stroke]=\"progressModel.color\" [attr.stroke-width]=\"stroke\"\r\n fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n [attr.cy]=\"radius\" />\r\n <circle class=\"progress\" [attr.stroke]=\"progressModel.filledColor\"\r\n [attr.stroke-dasharray]=\"imageModel.Circumference + ' ' + imageModel.Circumference\"\r\n [ngStyle]=\"{'stroke-dashoffset':strokeDashOffset}\" [attr.stroke-width]=\"stroke\"\r\n fill=\"transparent\" [attr.r]=\"imageModel.NormalizedRadius\" [attr.cx]=\"radius\"\r\n [attr.cy]=\"radius\" />\r\n\r\n <circle [attr.cx]=\"radius\" [attr.cy]=\"radius\" [attr.r]=\"imageModel.ImageRadius\"\r\n attr.fill=\"url('#{{imageModel.ImageId}}')\" />\r\n </svg>\r\n </div>\r\n\r\n <ng-content></ng-content>\r\n\r\n </div>\r\n\r\n <sfc-stars *ngIf=\"stars\" [value]=\"starsValue\"></sfc-stars>\r\n </div>\r\n\r\n <div class=\"avatar-data-container\">\r\n <div class=\"fullname\" [style.fontSize.px]=\"radius / FULLNAME_PART_VALUE\">\r\n <span>{{data.firstName}} {{data.lastName}}</span>\r\n </div>\r\n <div class=\"title\" [style.fontSize.px]=\"radius / TITLE_PART_VALUE\">\r\n <span>{{data.title}}</span>\r\n </div>\r\n </div>\r\n</div>", styles: [":host .container .avatar-image-container{display:flex;justify-content:center;flex-direction:column;align-items:center}:host .container .avatar-image-container .avatar{position:relative;margin-bottom:.5em}:host .container .avatar-image-container .avatar .avatar-image{display:flex;overflow:hidden;align-items:center;justify-content:center}:host .container .avatar-image-container .avatar .avatar-image circle{transform-origin:50% 50%;transition:stroke-dashoffset .35s,stroke-width .3s}:host .container .avatar-image-container .avatar .avatar-image circle.progress{transform:rotate(-90deg)}:host .container .avatar-data-container{display:flex;flex-direction:column;align-items:center;font-size:1em;font-weight:700;-webkit-user-select:none;user-select:none}:host .container .avatar-data-container .fullname,:host-context(.sfc-default-theme) :host .container .avatar-data-container .fullname{color:#545e61}:host-context(.sfc-dark-theme) :host .container .avatar-data-container .fullname{color:#f5f7fa}:host .container .avatar-data-container .title{color:#aab2bd}:host .container .avatar-data-container .fullname,:host .container .avatar-data-container .title{transition:color .5s ease}\n"] }]
|
|
65
65
|
}], propDecorators: { radius: [{
|
|
66
66
|
type: Input
|
|
67
67
|
}], stroke: [{
|
|
@@ -15,6 +15,7 @@ export { AvatarBadgePosition } from './avatar/parts/badge/avatar-badge-position.
|
|
|
15
15
|
export { ProgressLineComponent } from './progress/line/progress-line.component';
|
|
16
16
|
export { ProgressSemiCircleComponent } from './progress/semi-circle/progress-semi-circle.component';
|
|
17
17
|
export { ProgressCircleComponent } from './progress/circle/progress-circle.component';
|
|
18
|
+
export { getProgressColorDefaultFunc, getProgressColorDynamicallyFunc } from './progress/progress.utils';
|
|
18
19
|
export { TagsComponent } from './tags/tags.component';
|
|
19
20
|
export { SliderComponent } from './slider/slider.component';
|
|
20
21
|
export { SliderType } from './slider/slider-type.enum';
|
|
@@ -37,4 +38,4 @@ export { ExpandedTableRowTemplate } from './table/parts/content/rows/expanded/ex
|
|
|
37
38
|
export { DefaultTableCardComponent } from './table/parts/content/cards/default/default-table-card.component';
|
|
38
39
|
export { CarouselComponent } from './carousel/carousel.component';
|
|
39
40
|
export { CarouselSlideDirective } from './carousel/directive/carousel-slide.directive';
|
|
40
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
41
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ZjLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQztBQUVsRSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFDckUsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0seUVBQXlFLENBQUM7QUFDaEgsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0seUVBQXlFLENBQUM7QUFDaEgsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0scUVBQXFFLENBQUM7QUFDbEgsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0scUVBQXFFLENBQUM7QUFDbEgsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDcEUsT0FBTyxFQUFzQyxnQkFBZ0IsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ25HLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHlDQUF5QyxDQUFDO0FBRWhGLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDZDQUE2QyxDQUFDO0FBRXRGLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDNUQsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sNkNBQTZDLENBQUM7QUFHbkYsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0saURBQWlELENBQUM7QUFDdEYsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFDaEYsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sdURBQXVELENBQUM7QUFDcEcsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sNkNBQTZDLENBQUM7QUFDdEYsT0FBTyxFQUFFLDJCQUEyQixFQUFFLCtCQUErQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFFekcsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ3RELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUM1RCxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFFdkQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFFbEUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sbURBQW1ELENBQUM7QUFDekYsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFDOUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sNkNBQTZDLENBQUM7QUFDL0UsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0saURBQWlELENBQUM7QUFHdkYsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ3pELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDJDQUEyQyxDQUFDO0FBRzlFLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUd6RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFDbkUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBRWxFLE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxNQUFNLDhEQUE4RCxDQUFDO0FBRTNHLE9BQU8sRUFBRSw4QkFBOEIsRUFBRSxNQUFNLG9FQUFvRSxDQUFDO0FBQ3BILE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLCtDQUErQyxDQUFDO0FBQ3ZGLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLGdFQUFnRSxDQUFDO0FBQzFHLE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLGtFQUFrRSxDQUFDO0FBQzdHLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLHNFQUFzRSxDQUFDO0FBQ2hILE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLGtFQUFrRSxDQUFDO0FBQzdHLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLCtDQUErQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHsgVGFic0NvbXBvbmVudCB9IGZyb20gJy4uL2NvbXBvbmVudHMvdGFicy90YWJzLmNvbXBvbmVudCc7XHJcbmV4cG9ydCB7IElUYWJNb2RlbCB9IGZyb20gJy4uL2NvbXBvbmVudHMvdGFicy9tb2RlbHMvdGFiLm1vZGVsJztcclxuZXhwb3J0IHsgVGFic1RlbXBsYXRlIH0gZnJvbSAnLi4vY29tcG9uZW50cy90YWJzL3RhYnMtdGVtcGxhdGUuZW51bSc7XHJcbmV4cG9ydCB7IFRhYkxhYmVsTGluZUNvbXBvbmVudCB9IGZyb20gJy4uL2NvbXBvbmVudHMvdGFicy9wYXJ0cy9sYWJlbHMvdGFiLWxhYmVsLWxpbmUvdGFiLWxhYmVsLWxpbmUuY29tcG9uZW50JztcclxuZXhwb3J0IHsgVGFiTGFiZWxJY29uQ29tcG9uZW50IH0gZnJvbSAnLi4vY29tcG9uZW50cy90YWJzL3BhcnRzL2xhYmVscy90YWItbGFiZWwtaWNvbi90YWItbGFiZWwtaWNvbi5jb21wb25lbnQnO1xyXG5leHBvcnQgeyBUYWJMYWJlbEljb25TbGlkZXJDb21wb25lbnQgfSBmcm9tICcuL3RhYnMvcGFydHMvc2xpZGVycy90YWItbGFiZWwtaWNvbi90YWItbGFiZWwtaWNvbi1zbGlkZXIuY29tcG9uZW50JztcclxuZXhwb3J0IHsgVGFiTGFiZWxMaW5lU2xpZGVyQ29tcG9uZW50IH0gZnJvbSAnLi90YWJzL3BhcnRzL3NsaWRlcnMvdGFiLWxhYmVsLWxpbmUvdGFiLWxhYmVsLWxpbmUtc2xpZGVyLmNvbXBvbmVudCc7XHJcbmV4cG9ydCB7IFNpZGVNZW51Q29tcG9uZW50IH0gZnJvbSAnLi9tZW51L3NpZGUvc2lkZS1tZW51LmNvbXBvbmVudCc7XHJcbmV4cG9ydCB7IElTaWRlTWVudU1vZGVsLCBJU2lkZU1lbnVJdGVtTW9kZWwsIFNpZGVNZW51SXRlbVR5cGUgfSBmcm9tICcuL21lbnUvc2lkZS9zaWRlLW1lbnUubW9kZWwnO1xyXG5leHBvcnQgeyBEcm9wZG93bk1lbnVDb21wb25lbnQgfSBmcm9tICcuL21lbnUvZHJvcGRvd24vZHJvcGRvd24tbWVudS5jb21wb25lbnQnO1xyXG5leHBvcnQgeyBJRHJvcGRvd25NZW51SXRlbU1vZGVsIH0gZnJvbSAnLi9tZW51L2Ryb3Bkb3duL3BhcnRzL2l0ZW0vZHJvcGRvd24tbWVudS1pdGVtLm1vZGVsJztcclxuZXhwb3J0IHsgTmF2aWdhdGlvbk1lbnVDb21wb25lbnQgfSBmcm9tICcuL21lbnUvbmF2aWdhdGlvbi9uYXZpZ2F0aW9uLW1lbnUuY29tcG9uZW50JztcclxuZXhwb3J0IHsgSU5hdmlnYXRpb25NZW51SXRlbU1vZGVsIH0gZnJvbSAnLi9tZW51L25hdmlnYXRpb24vcGFydHMvaXRlbS9uYXZpZ2F0aW9uLW1lbnUtaXRlbS5tb2RlbCc7XHJcbmV4cG9ydCB7IFN0YXJzQ29tcG9uZW50IH0gZnJvbSAnLi9zdGFycy9zdGFycy5jb21wb25lbnQnO1xyXG5leHBvcnQgeyBBdmF0YXJDb21wb25lbnQgfSBmcm9tICcuL2F2YXRhci9hdmF0YXIuY29tcG9uZW50JztcclxuZXhwb3J0IHsgQXZhdGFyQmFkZ2VDb21wb25lbnQgfSBmcm9tICcuL2F2YXRhci9wYXJ0cy9iYWRnZS9hdmF0YXItYmFkZ2UuY29tcG9uZW50JztcclxuZXhwb3J0IHsgSUF2YXRhckRhdGFNb2RlbCB9IGZyb20gJy4vYXZhdGFyL21vZGVscy9hdmF0YXItZGF0YS5tb2RlbCc7XHJcbmV4cG9ydCB7IElBdmF0YXJQcm9ncmVzc01vZGVsIH0gZnJvbSAnLi9hdmF0YXIvbW9kZWxzL2F2YXRhci1wcm9ncmVzcy5tb2RlbCc7XHJcbmV4cG9ydCB7IEF2YXRhckJhZGdlUG9zaXRpb24gfSBmcm9tICcuL2F2YXRhci9wYXJ0cy9iYWRnZS9hdmF0YXItYmFkZ2UtcG9zaXRpb24uZW51bSc7XHJcbmV4cG9ydCB7IFByb2dyZXNzTGluZUNvbXBvbmVudCB9IGZyb20gJy4vcHJvZ3Jlc3MvbGluZS9wcm9ncmVzcy1saW5lLmNvbXBvbmVudCc7XHJcbmV4cG9ydCB7IFByb2dyZXNzU2VtaUNpcmNsZUNvbXBvbmVudCB9IGZyb20gJy4vcHJvZ3Jlc3Mvc2VtaS1jaXJjbGUvcHJvZ3Jlc3Mtc2VtaS1jaXJjbGUuY29tcG9uZW50JztcclxuZXhwb3J0IHsgUHJvZ3Jlc3NDaXJjbGVDb21wb25lbnQgfSBmcm9tICcuL3Byb2dyZXNzL2NpcmNsZS9wcm9ncmVzcy1jaXJjbGUuY29tcG9uZW50JztcclxuZXhwb3J0IHsgZ2V0UHJvZ3Jlc3NDb2xvckRlZmF1bHRGdW5jLCBnZXRQcm9ncmVzc0NvbG9yRHluYW1pY2FsbHlGdW5jIH0gZnJvbSAnLi9wcm9ncmVzcy9wcm9ncmVzcy51dGlscyc7XHJcbmV4cG9ydCB7IElUYWdNb2RlbCB9IGZyb20gJy4vdGFncy9wYXJ0cy90YWcvdGFnLm1vZGVsJztcclxuZXhwb3J0IHsgVGFnc0NvbXBvbmVudCB9IGZyb20gJy4vdGFncy90YWdzLmNvbXBvbmVudCc7XHJcbmV4cG9ydCB7IFNsaWRlckNvbXBvbmVudCB9IGZyb20gJy4vc2xpZGVyL3NsaWRlci5jb21wb25lbnQnO1xyXG5leHBvcnQgeyBTbGlkZXJUeXBlIH0gZnJvbSAnLi9zbGlkZXIvc2xpZGVyLXR5cGUuZW51bSc7XHJcbmV4cG9ydCB7IElTbGlkZXJJdGVtTW9kZWwgfSBmcm9tICcuL3NsaWRlci9wYXJ0cy9pdGVtL3NsaWRlci1pdGVtLm1vZGVsJztcclxuZXhwb3J0IHsgVGltZWxpbmVDb21wb25lbnQgfSBmcm9tICcuL3RpbWVsaW5lL3RpbWVsaW5lLmNvbXBvbmVudCc7XHJcbmV4cG9ydCB7IElUaW1lbGluZUl0ZW1Nb2RlbCB9IGZyb20gJy4vdGltZWxpbmUvcGFydHMvaXRlbS90aW1lbGluZS1pdGVtLm1vZGVsJztcclxuZXhwb3J0IHsgVGltZWxpbmVJdGVtUG9zaXRpb24gfSBmcm9tICcuL3RpbWVsaW5lL3BhcnRzL2l0ZW0vdGltZWxpbmUtaXRlbS1wb3NpdGlvbi5lbnVtJztcclxuZXhwb3J0IHsgTm90aWZpY2F0aW9uQ29tcG9uZW50IH0gZnJvbSAnLi9ub3RpZmljYXRpb24vbm90aWZpY2F0aW9uLmNvbXBvbmVudCc7XHJcbmV4cG9ydCB7IE5vdGlmaWNhdGlvblR5cGUgfSBmcm9tICcuL25vdGlmaWNhdGlvbi9lbnVtcy9ub3RpZmljYXRpb24tdHlwZS5lbnVtJztcclxuZXhwb3J0IHsgTm90aWZpY2F0aW9uVGVtcGxhdGUgfSBmcm9tICcuL25vdGlmaWNhdGlvbi9lbnVtcy9ub3RpZmljYXRpb24tdGVtcGxhdGUuZW51bSc7XHJcbmV4cG9ydCB7IElOb3RpZmljYXRpb25Db250ZW50TW9kZWwgfSBmcm9tICcuL25vdGlmaWNhdGlvbi9wYXJ0cy9jb250ZW50L25vdGlmaWNhdGlvbi1jb250ZW50Lm1vZGVsJztcclxuZXhwb3J0IHsgSU5vdGlmaWNhdGlvbkF1dG9DbG9zZU1vZGVsIH0gZnJvbSAnLi9ub3RpZmljYXRpb24vbm90aWZpY2F0aW9uLWF1dG8tY2xvc2UubW9kZWwnO1xyXG5leHBvcnQgeyBDaGFydENvbXBvbmVudCB9IGZyb20gJy4vY2hhcnQvY2hhcnQuY29tcG9uZW50JztcclxuZXhwb3J0IHsgQ2hhcnRUaGVtZVNlcnZpY2UgfSBmcm9tICcuL2NoYXJ0L3NlcnZpY2UvdGhlbWUvY2hhcnQtdGhlbWUuc2VydmljZSc7XHJcbmV4cG9ydCB7IENoYXJ0VGhlbWVNb2RlbCB9IGZyb20gJy4vY2hhcnQvc2VydmljZS90aGVtZS9jaGFydC10aGVtZS5tb2RlbCc7XHJcbmV4cG9ydCB7IENoYXJ0T3B0aW9uTW9kZWwgfSBmcm9tICcuL2NoYXJ0L2NoYXJ0LW9wdGlvbi5tb2RlbCc7XHJcbmV4cG9ydCB7IFRhYmxlQ29tcG9uZW50IH0gZnJvbSAnLi90YWJsZS90YWJsZS5jb21wb25lbnQnO1xyXG5leHBvcnQgeyBJVGFibGVEYXRhTW9kZWwsIElUYWJsZU1vZGVsIH0gZnJvbSAnLi90YWJsZS9tb2RlbHMvdGFibGUubW9kZWwnO1xyXG5leHBvcnQgeyBJVGFibGVQYWdpbmF0aW9uTW9kZWwgfSBmcm9tICcuL3RhYmxlL21vZGVscy90YWJsZS1wYWdpbmF0aW9uLm1vZGVsJztcclxuZXhwb3J0IHsgVGFibGVEYXRhVHlwZSB9IGZyb20gJy4vdGFibGUvZW51bXMvdGFibGUtZGF0YS10eXBlLmVudW0nO1xyXG5leHBvcnQgeyBUYWJsZVRlbXBsYXRlIH0gZnJvbSAnLi90YWJsZS9lbnVtcy90YWJsZS10ZW1wbGF0ZS5lbnVtJztcclxuZXhwb3J0IHsgSVRhYmxlU2VsZWN0RXZlbnQgfSBmcm9tICcuL3RhYmxlL3NlcnZpY2Uvc2VsZWN0L3RhYmxlLXNlbGVjdC5ldmVudCc7XHJcbmV4cG9ydCB7IERlZmF1bHRUYWJsZUNvbHVtbkNvbXBvbmVudCB9IGZyb20gJy4vdGFibGUvcGFydHMvY29sdW1ucy9kZWZhdWx0L2RlZmF1bHQtdGFibGUtY29sdW1uLmNvbXBvbmVudCc7XHJcbmV4cG9ydCB7IElEZWZhdWx0VGFibGVDb2x1bW5Nb2RlbCB9IGZyb20gJy4vdGFibGUvcGFydHMvY29sdW1ucy90YWJsZS1jb2x1bW4ubW9kZWwnO1xyXG5leHBvcnQgeyBTZWxlY3RhYmxlVGFibGVDb2x1bW5Db21wb25lbnQgfSBmcm9tICcuL3RhYmxlL3BhcnRzL2NvbHVtbnMvc2VsZWN0YWJsZS9zZWxlY3RhYmxlLXRhYmxlLWNvbHVtbi5jb21wb25lbnQnO1xyXG5leHBvcnQgeyBDb2x1bW5zVG9nZ2xlQ29tcG9uZW50IH0gZnJvbSAnLi90YWJsZS9wYXJ0cy90b2dnbGUvY29sdW1ucy10b2dnbGUuY29tcG9uZW50JztcclxuZXhwb3J0IHsgRGVmYXVsdFRhYmxlUm93Q29tcG9uZW50IH0gZnJvbSAnLi90YWJsZS9wYXJ0cy9jb250ZW50L3Jvd3MvZGVmYXVsdC9kZWZhdWx0LXRhYmxlLXJvdy5jb21wb25lbnQnO1xyXG5leHBvcnQgeyBFeHBhbmRlZFRhYmxlUm93Q29tcG9uZW50IH0gZnJvbSAnLi90YWJsZS9wYXJ0cy9jb250ZW50L3Jvd3MvZXhwYW5kZWQvZXhwYW5kZWQtdGFibGUtcm93LmNvbXBvbmVudCc7XHJcbmV4cG9ydCB7IEV4cGFuZGVkVGFibGVSb3dUZW1wbGF0ZSB9IGZyb20gJy4vdGFibGUvcGFydHMvY29udGVudC9yb3dzL2V4cGFuZGVkL2V4cGFuZGVkLXRhYmxlLXJvdy10ZW1wbGF0ZS5lbnVtJztcclxuZXhwb3J0IHsgRGVmYXVsdFRhYmxlQ2FyZENvbXBvbmVudCB9IGZyb20gJy4vdGFibGUvcGFydHMvY29udGVudC9jYXJkcy9kZWZhdWx0L2RlZmF1bHQtdGFibGUtY2FyZC5jb21wb25lbnQnO1xyXG5leHBvcnQgeyBDYXJvdXNlbENvbXBvbmVudCB9IGZyb20gJy4vY2Fyb3VzZWwvY2Fyb3VzZWwuY29tcG9uZW50JztcclxuZXhwb3J0IHsgQ2Fyb3VzZWxTbGlkZURpcmVjdGl2ZSB9IGZyb20gJy4vY2Fyb3VzZWwvZGlyZWN0aXZlL2Nhcm91c2VsLXNsaWRlLmRpcmVjdGl2ZSc7XHJcbmV4cG9ydCB7IENhcm91c2VsT3B0aW9uc01vZGVsIH0gZnJvbSAnLi9jYXJvdXNlbC9tb2RlbHMvb3B0aW9ucy5tb2RlbCc7XHJcbmV4cG9ydCB7IENhcm91c2VsU2xpZGVFdmVudCB9IGZyb20gJy4vY2Fyb3VzZWwvbW9kZWxzL3NsaWRlLm1vZGVsJztcclxuXHJcbiJdfQ==
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tbWVudS1pdGVtLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNmYy1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9tZW51L2Ryb3Bkb3duL3BhcnRzL2l0ZW0vZHJvcGRvd24tbWVudS1pdGVtLm1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJY29uRGVmaW5pdGlvbiB9IGZyb20gJ0Bmb3J0YXdlc29tZS9mcmVlLXNvbGlkLXN2Zy1pY29ucyc7XHJcblxyXG5leHBvcnQgaW50ZXJmYWNlIElEcm9wZG93bk1lbnVJdGVtTW9kZWwge1xyXG4gICAgbGFiZWw6IHN0cmluZztcclxuICAgIGljb24/
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tbWVudS1pdGVtLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNmYy1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9tZW51L2Ryb3Bkb3duL3BhcnRzL2l0ZW0vZHJvcGRvd24tbWVudS1pdGVtLm1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJY29uRGVmaW5pdGlvbiB9IGZyb20gJ0Bmb3J0YXdlc29tZS9mcmVlLXNvbGlkLXN2Zy1pY29ucyc7XHJcblxyXG5leHBvcnQgaW50ZXJmYWNlIElEcm9wZG93bk1lbnVJdGVtTW9kZWwge1xyXG4gICAgbGFiZWw6IHN0cmluZztcclxuICAgIGljb24/OiBJY29uRGVmaW5pdGlvbiB8IG51bGw7XHJcbiAgICBpbWFnZT86IHN0cmluZyB8IG51bGw7XHJcbiAgICBkZWxpbWV0ZXI/OiBib29sZWFuO1xyXG4gICAgYWN0aXZlPzogYm9vbGVhbjtcclxuICAgIHZhbHVlPzogYW55O1xyXG4gICAgY2xpY2s/OiAoaXRlbTogSURyb3Bkb3duTWVudUl0ZW1Nb2RlbCkgPT4gdm9pZDtcclxufVxyXG4iXX0=
|
|
@@ -1,23 +1,29 @@
|
|
|
1
|
-
import { Component, HostBinding } from '@angular/core';
|
|
1
|
+
import { Component, HostBinding, Input } from '@angular/core';
|
|
2
2
|
import { CommonConstants, getCssLikeValue, UIConstants } from 'ngx-sfc-common';
|
|
3
3
|
import { ProgressBaseComponent } from '../progress.component';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
import * as i1 from "@angular/common";
|
|
6
6
|
export class ProgressCircleComponent extends ProgressBaseComponent {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(...arguments);
|
|
9
|
+
this.total = CommonConstants.FULL_PERCENTAGE;
|
|
10
|
+
}
|
|
7
11
|
get reversed() {
|
|
8
|
-
return this.progress > 50;
|
|
12
|
+
return (this.progress / this.total) * CommonConstants.FULL_PERCENTAGE > 50;
|
|
9
13
|
}
|
|
10
14
|
get transformRotate() {
|
|
11
|
-
return `rotate(${getCssLikeValue((this.progress * 360) /
|
|
15
|
+
return `rotate(${getCssLikeValue((this.progress * 360) / this.total, UIConstants.CSS_DEGREES)})`;
|
|
12
16
|
}
|
|
13
17
|
}
|
|
14
18
|
ProgressCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressCircleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
15
|
-
ProgressCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressCircleComponent, selector: "sfc-progress-circle", host: { properties: { "class.reversed": "this.reversed" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\" [style.background]=\"background\">\r\n <span>{{progress}}</span>\r\n <div class=\"circle\">\r\n <div class=\"bar\" [ngStyle]=\"{'transform': transformRotate, \r\n 'border-color': getColor(progress)}\"></div>\r\n <div class=\"fill\" [ngStyle]=\"{'border-color': getColor(progress)}\"></div>\r\n </div>\r\n</div>", styles: [":host .container .circle .bar{position:absolute;border:.09em solid;clip:rect(0,.5em,1em,0);border-radius:50%;width:.82em;height:.82em}:host .container{position:relative;border-radius:50%;background:#e6e9ed;font-size:5em;text-align:initial;width:1em;height:1em}:host .container:after{position:absolute;top:.082em;left:.09em;content:\" \";border-radius:50%;background:#fff;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in;width:.83em;height:.83em}:host .container span{position:absolute;z-index:1;width:5em;line-height:5em;font-size:.2em;color:#545e61;font-weight:700;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container:hover:after{top:.07em;left:.07em;width:.86em;height:.86em}:host .container:hover span{width:3.33em;line-height:3.33em;font-size:.3em}:host .container .circle{position:absolute;clip:rect(0,1em,1em,.5em);width:1em;height:1em}:host .container .circle .bar{transition:transform .2s ease-out,border-color .2s ease-out}:host.reversed .container .circle{clip:rect(auto,auto,auto,auto)}:host.reversed .container .circle .fill{transform:rotate(180deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
19
|
+
ProgressCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressCircleComponent, selector: "sfc-progress-circle", inputs: { total: "total" }, host: { properties: { "class.reversed": "this.reversed" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\" [style.background]=\"background\">\r\n <span>{{progress}}</span>\r\n <div class=\"circle\">\r\n <div class=\"bar\" [ngStyle]=\"{'transform': transformRotate, \r\n 'border-color': getColor(progress, total)}\"></div>\r\n <div class=\"fill\" [ngStyle]=\"{'border-color': getColor(progress, total)}\"></div>\r\n </div>\r\n</div>", styles: [":host.reversed .container .circle .fill,:host .container .circle .bar{position:absolute;border:.09em solid;clip:rect(0,.5em,1em,0);border-radius:50%;width:.82em;height:.82em}:host .container{position:relative;border-radius:50%;background:#e6e9ed;font-size:5em;text-align:initial;width:1em;height:1em}:host .container:after{position:absolute;top:.082em;left:.09em;content:\" \";border-radius:50%;background:#fff;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in;width:.83em;height:.83em}:host .container span{position:absolute;z-index:1;width:5em;line-height:5em;font-size:.2em;color:#545e61;font-weight:700;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container:hover:after{top:.07em;left:.07em;width:.86em;height:.86em}:host .container:hover span{width:3.33em;line-height:3.33em;font-size:.3em}:host .container .circle{position:absolute;clip:rect(0,1em,1em,.5em);width:1em;height:1em}:host .container .circle .bar{transition:transform .2s ease-out,border-color .2s ease-out}:host.reversed .container .circle{clip:rect(auto,auto,auto,auto)}:host.reversed .container .circle .fill{transform:rotate(180deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
16
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressCircleComponent, decorators: [{
|
|
17
21
|
type: Component,
|
|
18
|
-
args: [{ selector: 'sfc-progress-circle', template: "<div class=\"container\" [style.background]=\"background\">\r\n <span>{{progress}}</span>\r\n <div class=\"circle\">\r\n <div class=\"bar\" [ngStyle]=\"{'transform': transformRotate, \r\n 'border-color': getColor(progress)}\"></div>\r\n <div class=\"fill\" [ngStyle]=\"{'border-color': getColor(progress)}\"></div>\r\n </div>\r\n</div>", styles: [":host .container .circle .bar{position:absolute;border:.09em solid;clip:rect(0,.5em,1em,0);border-radius:50%;width:.82em;height:.82em}:host .container{position:relative;border-radius:50%;background:#e6e9ed;font-size:5em;text-align:initial;width:1em;height:1em}:host .container:after{position:absolute;top:.082em;left:.09em;content:\" \";border-radius:50%;background:#fff;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in;width:.83em;height:.83em}:host .container span{position:absolute;z-index:1;width:5em;line-height:5em;font-size:.2em;color:#545e61;font-weight:700;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container:hover:after{top:.07em;left:.07em;width:.86em;height:.86em}:host .container:hover span{width:3.33em;line-height:3.33em;font-size:.3em}:host .container .circle{position:absolute;clip:rect(0,1em,1em,.5em);width:1em;height:1em}:host .container .circle .bar{transition:transform .2s ease-out,border-color .2s ease-out}:host.reversed .container .circle{clip:rect(auto,auto,auto,auto)}:host.reversed .container .circle .fill{transform:rotate(180deg)}\n"] }]
|
|
19
|
-
}], propDecorators: {
|
|
22
|
+
args: [{ selector: 'sfc-progress-circle', template: "<div class=\"container\" [style.background]=\"background\">\r\n <span>{{progress}}</span>\r\n <div class=\"circle\">\r\n <div class=\"bar\" [ngStyle]=\"{'transform': transformRotate, \r\n 'border-color': getColor(progress, total)}\"></div>\r\n <div class=\"fill\" [ngStyle]=\"{'border-color': getColor(progress, total)}\"></div>\r\n </div>\r\n</div>", styles: [":host.reversed .container .circle .fill,:host .container .circle .bar{position:absolute;border:.09em solid;clip:rect(0,.5em,1em,0);border-radius:50%;width:.82em;height:.82em}:host .container{position:relative;border-radius:50%;background:#e6e9ed;font-size:5em;text-align:initial;width:1em;height:1em}:host .container:after{position:absolute;top:.082em;left:.09em;content:\" \";border-radius:50%;background:#fff;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in;width:.83em;height:.83em}:host .container span{position:absolute;z-index:1;width:5em;line-height:5em;font-size:.2em;color:#545e61;font-weight:700;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container:hover:after{top:.07em;left:.07em;width:.86em;height:.86em}:host .container:hover span{width:3.33em;line-height:3.33em;font-size:.3em}:host .container .circle{position:absolute;clip:rect(0,1em,1em,.5em);width:1em;height:1em}:host .container .circle .bar{transition:transform .2s ease-out,border-color .2s ease-out}:host.reversed .container .circle{clip:rect(auto,auto,auto,auto)}:host.reversed .container .circle .fill{transform:rotate(180deg)}\n"] }]
|
|
23
|
+
}], propDecorators: { total: [{
|
|
24
|
+
type: Input
|
|
25
|
+
}], reversed: [{
|
|
20
26
|
type: HostBinding,
|
|
21
27
|
args: ['class.reversed']
|
|
22
28
|
}] } });
|
|
23
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
29
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MtY2lyY2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvcHJvZ3Jlc3MvY2lyY2xlL3Byb2dyZXNzLWNpcmNsZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ZjLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3Byb2dyZXNzL2NpcmNsZS9wcm9ncmVzcy1jaXJjbGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzlELE9BQU8sRUFBRSxlQUFlLEVBQUUsZUFBZSxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQy9FLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHVCQUF1QixDQUFDOzs7QUFPOUQsTUFBTSxPQUFPLHVCQUNYLFNBQVEscUJBQXFCO0lBTi9COztRQVNFLFVBQUssR0FBVyxlQUFlLENBQUMsZUFBZSxDQUFDO0tBV2pEO0lBVEMsSUFDSSxRQUFRO1FBQ1YsT0FBTyxDQUFDLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLGVBQWUsQ0FBQyxlQUFlLEdBQUcsRUFBRSxDQUFDO0lBQzdFLENBQUM7SUFFRCxJQUFJLGVBQWU7UUFDakIsT0FBTyxVQUFVLGVBQWUsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLEdBQUcsR0FBRyxDQUFDLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFDakUsV0FBVyxDQUFDLFdBQVcsQ0FBQyxHQUFHLENBQUM7SUFDaEMsQ0FBQzs7b0hBZFUsdUJBQXVCO3dHQUF2Qix1QkFBdUIsMktDVHBDLGlZQU9NOzJGREVPLHVCQUF1QjtrQkFMbkMsU0FBUzsrQkFDRSxxQkFBcUI7OEJBUS9CLEtBQUs7c0JBREosS0FBSztnQkFJRixRQUFRO3NCQURYLFdBQVc7dUJBQUMsZ0JBQWdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29tbW9uQ29uc3RhbnRzLCBnZXRDc3NMaWtlVmFsdWUsIFVJQ29uc3RhbnRzIH0gZnJvbSAnbmd4LXNmYy1jb21tb24nO1xyXG5pbXBvcnQgeyBQcm9ncmVzc0Jhc2VDb21wb25lbnQgfSBmcm9tICcuLi9wcm9ncmVzcy5jb21wb25lbnQnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzZmMtcHJvZ3Jlc3MtY2lyY2xlJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vcHJvZ3Jlc3MtY2lyY2xlLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9wcm9ncmVzcy1jaXJjbGUuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgUHJvZ3Jlc3NDaXJjbGVDb21wb25lbnRcclxuICBleHRlbmRzIFByb2dyZXNzQmFzZUNvbXBvbmVudCB7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgdG90YWw6IG51bWJlciA9IENvbW1vbkNvbnN0YW50cy5GVUxMX1BFUkNFTlRBR0U7XHJcblxyXG4gIEBIb3N0QmluZGluZygnY2xhc3MucmV2ZXJzZWQnKVxyXG4gIGdldCByZXZlcnNlZCgpOiBib29sZWFuIHtcclxuICAgIHJldHVybiAodGhpcy5wcm9ncmVzcyAvIHRoaXMudG90YWwpICogQ29tbW9uQ29uc3RhbnRzLkZVTExfUEVSQ0VOVEFHRSA+IDUwO1xyXG4gIH1cclxuXHJcbiAgZ2V0IHRyYW5zZm9ybVJvdGF0ZSgpIHtcclxuICAgIHJldHVybiBgcm90YXRlKCR7Z2V0Q3NzTGlrZVZhbHVlKCh0aGlzLnByb2dyZXNzICogMzYwKSAvIHRoaXMudG90YWwsXHJcbiAgICAgIFVJQ29uc3RhbnRzLkNTU19ERUdSRUVTKX0pYDtcclxuICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cImNvbnRhaW5lclwiIFtzdHlsZS5iYWNrZ3JvdW5kXT1cImJhY2tncm91bmRcIj5cclxuICAgIDxzcGFuPnt7cHJvZ3Jlc3N9fTwvc3Bhbj5cclxuICAgIDxkaXYgY2xhc3M9XCJjaXJjbGVcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiYmFyXCIgW25nU3R5bGVdPVwieyd0cmFuc2Zvcm0nOiB0cmFuc2Zvcm1Sb3RhdGUsIFxyXG4gICAgICAgICAgICAnYm9yZGVyLWNvbG9yJzogZ2V0Q29sb3IocHJvZ3Jlc3MsIHRvdGFsKX1cIj48L2Rpdj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZmlsbFwiIFtuZ1N0eWxlXT1cInsnYm9yZGVyLWNvbG9yJzogZ2V0Q29sb3IocHJvZ3Jlc3MsIHRvdGFsKX1cIj48L2Rpdj5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj4iXX0=
|
|
@@ -7,6 +7,7 @@ export class ProgressLineComponent extends ProgressBaseComponent {
|
|
|
7
7
|
constructor() {
|
|
8
8
|
super(...arguments);
|
|
9
9
|
this.total = CommonConstants.FULL_PERCENTAGE;
|
|
10
|
+
this.labelSuffix = null;
|
|
10
11
|
this.hideEnd = false;
|
|
11
12
|
}
|
|
12
13
|
ngOnInit() {
|
|
@@ -14,17 +15,19 @@ export class ProgressLineComponent extends ProgressBaseComponent {
|
|
|
14
15
|
this.progress = this.total = CommonConstants.FULL_PERCENTAGE;
|
|
15
16
|
}
|
|
16
17
|
get label() {
|
|
17
|
-
|
|
18
|
+
const valueLabel = isNullOrEmptyString(this.labelEnd)
|
|
19
|
+
? `${this.progress}` : this.labelEnd;
|
|
20
|
+
return isNullOrEmptyString(this.labelSuffix) ? valueLabel : `${valueLabel}${this.labelSuffix}`;
|
|
18
21
|
}
|
|
19
22
|
get progressStyles() {
|
|
20
23
|
return {
|
|
21
24
|
width: getCssLikeValue((this.progress / this.total) * CommonConstants.FULL_PERCENTAGE, UIConstants.CSS_PERCENTAGE),
|
|
22
|
-
backgroundColor: this.getColor(this.progress)
|
|
25
|
+
backgroundColor: this.getColor(this.progress, this.total)
|
|
23
26
|
};
|
|
24
27
|
}
|
|
25
28
|
}
|
|
26
29
|
ProgressLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressLineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
27
|
-
ProgressLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressLineComponent, selector: "sfc-progress-line", inputs: { total: "total", labelStart: "labelStart", labelEnd: "labelEnd", hideEnd: "hideEnd" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"labels\">\r\n <span>{{labelStart}}</span>\r\n <span *ngIf=\"!hideEnd\">{{label}}</span>\r\n </div>\r\n <div class=\"progress-bar\" [style.background]=\"background\">\r\n <div class=\"progress\" [ngStyle]=\"progressStyles\"></div>\r\n </div>\r\n</div>", styles: [":host{width:100%}:host .container .progress-bar{border-radius:.5em;background:#e6e9ed}:host .container .progress-bar .progress{height:.4em;border-radius:.5em;background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(255,255,255,.05));transition:.4s linear;transition-property:width,background-color}:host .container .labels{display:flex;justify-content:space-between;margin-bottom:.3em;font-weight:700;-webkit-user-select:none;user-select:none;font-size:.8em}:host .container .labels,:host-context(.sfc-default-theme) :host .container .labels{color:#545e61}:host-context(.sfc-dark-theme) :host .container .labels{color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
30
|
+
ProgressLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressLineComponent, selector: "sfc-progress-line", inputs: { total: "total", labelStart: "labelStart", labelEnd: "labelEnd", labelSuffix: "labelSuffix", hideEnd: "hideEnd" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"labels\">\r\n <span>{{labelStart}}</span>\r\n <span *ngIf=\"!hideEnd\">{{label}}</span>\r\n </div>\r\n <div class=\"progress-bar\" [style.background]=\"background\">\r\n <div class=\"progress\" [ngStyle]=\"progressStyles\"></div>\r\n </div>\r\n</div>", styles: [":host{width:100%}:host .container .progress-bar{border-radius:.5em;background:#e6e9ed}:host .container .progress-bar .progress{height:.4em;border-radius:.5em;background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(255,255,255,.05));transition:.4s linear;transition-property:width,background-color}:host .container .labels{display:flex;justify-content:space-between;margin-bottom:.3em;font-weight:700;-webkit-user-select:none;user-select:none;font-size:.8em}:host .container .labels,:host-context(.sfc-default-theme) :host .container .labels{color:#545e61}:host-context(.sfc-dark-theme) :host .container .labels{color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
28
31
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressLineComponent, decorators: [{
|
|
29
32
|
type: Component,
|
|
30
33
|
args: [{ selector: 'sfc-progress-line', template: "<div class=\"container\">\r\n <div class=\"labels\">\r\n <span>{{labelStart}}</span>\r\n <span *ngIf=\"!hideEnd\">{{label}}</span>\r\n </div>\r\n <div class=\"progress-bar\" [style.background]=\"background\">\r\n <div class=\"progress\" [ngStyle]=\"progressStyles\"></div>\r\n </div>\r\n</div>", styles: [":host{width:100%}:host .container .progress-bar{border-radius:.5em;background:#e6e9ed}:host .container .progress-bar .progress{height:.4em;border-radius:.5em;background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(255,255,255,.05));transition:.4s linear;transition-property:width,background-color}:host .container .labels{display:flex;justify-content:space-between;margin-bottom:.3em;font-weight:700;-webkit-user-select:none;user-select:none;font-size:.8em}:host .container .labels,:host-context(.sfc-default-theme) :host .container .labels{color:#545e61}:host-context(.sfc-dark-theme) :host .container .labels{color:#fff}\n"] }]
|
|
@@ -34,7 +37,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
34
37
|
type: Input
|
|
35
38
|
}], labelEnd: [{
|
|
36
39
|
type: Input
|
|
40
|
+
}], labelSuffix: [{
|
|
41
|
+
type: Input
|
|
37
42
|
}], hideEnd: [{
|
|
38
43
|
type: Input
|
|
39
44
|
}] } });
|
|
40
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
45
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MtbGluZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ZjLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3Byb2dyZXNzL2xpbmUvcHJvZ3Jlc3MtbGluZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ZjLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3Byb2dyZXNzL2xpbmUvcHJvZ3Jlc3MtbGluZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUN6RCxPQUFPLEVBQ0wsZUFBZSxFQUFFLGVBQWUsRUFDaEMsbUJBQW1CLEVBQUUsV0FBVyxFQUNqQyxNQUFNLGdCQUFnQixDQUFDO0FBQ3hCLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHVCQUF1QixDQUFDOzs7QUFPOUQsTUFBTSxPQUFPLHFCQUNYLFNBQVEscUJBQXFCO0lBTi9COztRQVVFLFVBQUssR0FBVyxlQUFlLENBQUMsZUFBZSxDQUFDO1FBU2hELGdCQUFXLEdBQWtCLElBQUksQ0FBQztRQUdsQyxZQUFPLEdBQVksS0FBSyxDQUFDO0tBcUIxQjtJQW5CQyxRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxLQUFLO1lBQzVCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssR0FBRyxlQUFlLENBQUMsZUFBZSxDQUFDO0lBQ2pFLENBQUM7SUFFRCxJQUFJLEtBQUs7UUFDUCxNQUFNLFVBQVUsR0FBRyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDO1lBQ25ELENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQWtCLENBQUM7UUFFakQsT0FBTyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsR0FBRyxVQUFVLEdBQUcsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFBO0lBQ2hHLENBQUM7SUFFRCxJQUFJLGNBQWM7UUFDaEIsT0FBTztZQUNMLEtBQUssRUFBRSxlQUFlLENBQUMsQ0FBQyxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxlQUFlLENBQUMsZUFBZSxFQUNuRixXQUFXLENBQUMsY0FBYyxDQUFDO1lBQzdCLGVBQWUsRUFBRSxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQztTQUMxRCxDQUFBO0lBQ0gsQ0FBQzs7a0hBckNVLHFCQUFxQjtzR0FBckIscUJBQXFCLDRNQ1psQyx3VUFRTTsyRkRJTyxxQkFBcUI7a0JBTGpDLFNBQVM7K0JBQ0UsbUJBQW1COzhCQVM3QixLQUFLO3NCQURKLEtBQUs7Z0JBSU4sVUFBVTtzQkFEVCxLQUFLO2dCQUlOLFFBQVE7c0JBRFAsS0FBSztnQkFJTixXQUFXO3NCQURWLEtBQUs7Z0JBSU4sT0FBTztzQkFETixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7XHJcbiAgQ29tbW9uQ29uc3RhbnRzLCBnZXRDc3NMaWtlVmFsdWUsXHJcbiAgaXNOdWxsT3JFbXB0eVN0cmluZywgVUlDb25zdGFudHNcclxufSBmcm9tICduZ3gtc2ZjLWNvbW1vbic7XHJcbmltcG9ydCB7IFByb2dyZXNzQmFzZUNvbXBvbmVudCB9IGZyb20gJy4uL3Byb2dyZXNzLmNvbXBvbmVudCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3NmYy1wcm9ncmVzcy1saW5lJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vcHJvZ3Jlc3MtbGluZS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vcHJvZ3Jlc3MtbGluZS5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBQcm9ncmVzc0xpbmVDb21wb25lbnRcclxuICBleHRlbmRzIFByb2dyZXNzQmFzZUNvbXBvbmVudFxyXG4gIGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbiAgQElucHV0KClcclxuICB0b3RhbDogbnVtYmVyID0gQ29tbW9uQ29uc3RhbnRzLkZVTExfUEVSQ0VOVEFHRTtcclxuXHJcbiAgQElucHV0KClcclxuICBsYWJlbFN0YXJ0Pzogc3RyaW5nO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIGxhYmVsRW5kPzogc3RyaW5nO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIGxhYmVsU3VmZml4OiBzdHJpbmcgfCBudWxsID0gbnVsbDtcclxuXHJcbiAgQElucHV0KClcclxuICBoaWRlRW5kOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgaWYgKHRoaXMucHJvZ3Jlc3MgPiB0aGlzLnRvdGFsKVxyXG4gICAgICB0aGlzLnByb2dyZXNzID0gdGhpcy50b3RhbCA9IENvbW1vbkNvbnN0YW50cy5GVUxMX1BFUkNFTlRBR0U7XHJcbiAgfVxyXG5cclxuICBnZXQgbGFiZWwoKTogc3RyaW5nIHtcclxuICAgIGNvbnN0IHZhbHVlTGFiZWwgPSBpc051bGxPckVtcHR5U3RyaW5nKHRoaXMubGFiZWxFbmQpXHJcbiAgICAgID8gYCR7dGhpcy5wcm9ncmVzc31gIDogdGhpcy5sYWJlbEVuZCBhcyBzdHJpbmc7XHJcblxyXG4gICAgcmV0dXJuIGlzTnVsbE9yRW1wdHlTdHJpbmcodGhpcy5sYWJlbFN1ZmZpeCkgPyB2YWx1ZUxhYmVsIDogYCR7dmFsdWVMYWJlbH0ke3RoaXMubGFiZWxTdWZmaXh9YFxyXG4gIH1cclxuXHJcbiAgZ2V0IHByb2dyZXNzU3R5bGVzKCkge1xyXG4gICAgcmV0dXJuIHtcclxuICAgICAgd2lkdGg6IGdldENzc0xpa2VWYWx1ZSgodGhpcy5wcm9ncmVzcyAvIHRoaXMudG90YWwpICogQ29tbW9uQ29uc3RhbnRzLkZVTExfUEVSQ0VOVEFHRSxcclxuICAgICAgICBVSUNvbnN0YW50cy5DU1NfUEVSQ0VOVEFHRSksXHJcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhpcy5nZXRDb2xvcih0aGlzLnByb2dyZXNzLCB0aGlzLnRvdGFsKVxyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiY29udGFpbmVyXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwibGFiZWxzXCI+XHJcbiAgICAgICAgPHNwYW4+e3tsYWJlbFN0YXJ0fX08L3NwYW4+XHJcbiAgICAgICAgPHNwYW4gKm5nSWY9XCIhaGlkZUVuZFwiPnt7bGFiZWx9fTwvc3Bhbj5cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiBjbGFzcz1cInByb2dyZXNzLWJhclwiIFtzdHlsZS5iYWNrZ3JvdW5kXT1cImJhY2tncm91bmRcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwicHJvZ3Jlc3NcIiBbbmdTdHlsZV09XCJwcm9ncmVzc1N0eWxlc1wiPjwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PiJdfQ==
|
|
@@ -1,39 +1,10 @@
|
|
|
1
1
|
import { Directive, Input } from "@angular/core";
|
|
2
|
-
import {
|
|
2
|
+
import { getProgressColorDefaultFunc } from "./progress.utils";
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export class ProgressBaseComponent {
|
|
5
5
|
constructor() {
|
|
6
6
|
this.progress = 0;
|
|
7
|
-
this.getColor =
|
|
8
|
-
}
|
|
9
|
-
getDefaultColor(value) {
|
|
10
|
-
if (value < 12) {
|
|
11
|
-
return ProgressColor.MIN_LOW;
|
|
12
|
-
}
|
|
13
|
-
else if (value >= 12 && value < 24) {
|
|
14
|
-
return ProgressColor.LOW;
|
|
15
|
-
}
|
|
16
|
-
else if (value >= 24 && value < 36) {
|
|
17
|
-
return ProgressColor.MAX_LOW;
|
|
18
|
-
}
|
|
19
|
-
else if (value >= 36 && value < 48) {
|
|
20
|
-
return ProgressColor.MIN_MEDIUM;
|
|
21
|
-
}
|
|
22
|
-
else if (value >= 48 && value < 60) {
|
|
23
|
-
return ProgressColor.MEDIUM;
|
|
24
|
-
}
|
|
25
|
-
else if (value >= 60 && value < 72) {
|
|
26
|
-
return ProgressColor.MAX_MEDIUM;
|
|
27
|
-
}
|
|
28
|
-
else if (value >= 72 && value < 84) {
|
|
29
|
-
return ProgressColor.MIN_HIGH;
|
|
30
|
-
}
|
|
31
|
-
else if (value >= 84 && value < 96) {
|
|
32
|
-
return ProgressColor.HIGH;
|
|
33
|
-
}
|
|
34
|
-
else {
|
|
35
|
-
return ProgressColor.MAX_HIGH;
|
|
36
|
-
}
|
|
7
|
+
this.getColor = getProgressColorDefaultFunc;
|
|
37
8
|
}
|
|
38
9
|
}
|
|
39
10
|
ProgressBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -47,4 +18,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
47
18
|
}], getColor: [{
|
|
48
19
|
type: Input
|
|
49
20
|
}] } });
|
|
50
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
21
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNmYy1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9wcm9ncmVzcy9wcm9ncmVzcy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7O0FBRy9ELE1BQU0sT0FBZ0IscUJBQXFCO0lBRDNDO1FBSUksYUFBUSxHQUFXLENBQUMsQ0FBQztRQU1yQixhQUFRLEdBQThDLDJCQUEyQixDQUFDO0tBQ3JGOztrSEFWcUIscUJBQXFCO3NHQUFyQixxQkFBcUI7MkZBQXJCLHFCQUFxQjtrQkFEMUMsU0FBUzs4QkFJTixRQUFRO3NCQURQLEtBQUs7Z0JBSU4sVUFBVTtzQkFEVCxLQUFLO2dCQUlOLFFBQVE7c0JBRFAsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgSW5wdXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xyXG5pbXBvcnQgeyBnZXRQcm9ncmVzc0NvbG9yRGVmYXVsdEZ1bmMgfSBmcm9tIFwiLi9wcm9ncmVzcy51dGlsc1wiO1xyXG5cclxuQERpcmVjdGl2ZSgpXHJcbmV4cG9ydCBhYnN0cmFjdCBjbGFzcyBQcm9ncmVzc0Jhc2VDb21wb25lbnQge1xyXG5cclxuICAgIEBJbnB1dCgpXHJcbiAgICBwcm9ncmVzczogbnVtYmVyID0gMDtcclxuXHJcbiAgICBASW5wdXQoKVxyXG4gICAgYmFja2dyb3VuZD86IHN0cmluZztcclxuXHJcbiAgICBASW5wdXQoKVxyXG4gICAgZ2V0Q29sb3I6ICh2YWx1ZTogbnVtYmVyLCB0b3RhbD86IG51bWJlcikgPT4gc3RyaW5nID0gZ2V0UHJvZ3Jlc3NDb2xvckRlZmF1bHRGdW5jO1xyXG59Il19
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { CommonConstants } from "ngx-sfc-common";
|
|
2
|
+
import { ProgressColor } from "./progress-color.enum";
|
|
3
|
+
export function getProgressColorDefaultFunc(value) {
|
|
4
|
+
if (value < 12) {
|
|
5
|
+
return ProgressColor.MIN_LOW;
|
|
6
|
+
}
|
|
7
|
+
else if (value >= 12 && value < 24) {
|
|
8
|
+
return ProgressColor.LOW;
|
|
9
|
+
}
|
|
10
|
+
else if (value >= 24 && value < 36) {
|
|
11
|
+
return ProgressColor.MAX_LOW;
|
|
12
|
+
}
|
|
13
|
+
else if (value >= 36 && value < 48) {
|
|
14
|
+
return ProgressColor.MIN_MEDIUM;
|
|
15
|
+
}
|
|
16
|
+
else if (value >= 48 && value < 60) {
|
|
17
|
+
return ProgressColor.MEDIUM;
|
|
18
|
+
}
|
|
19
|
+
else if (value >= 60 && value < 72) {
|
|
20
|
+
return ProgressColor.MAX_MEDIUM;
|
|
21
|
+
}
|
|
22
|
+
else if (value >= 72 && value < 84) {
|
|
23
|
+
return ProgressColor.MIN_HIGH;
|
|
24
|
+
}
|
|
25
|
+
else if (value >= 84 && value < 96) {
|
|
26
|
+
return ProgressColor.HIGH;
|
|
27
|
+
}
|
|
28
|
+
else {
|
|
29
|
+
return ProgressColor.MAX_HIGH;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
export function getProgressColorDynamicallyFunc(value, total) {
|
|
33
|
+
const colorsCount = Object.keys(ProgressColor).length, part = Math.ceil((total || CommonConstants.FULL_PERCENTAGE) / colorsCount);
|
|
34
|
+
if (value < part) {
|
|
35
|
+
return ProgressColor.MIN_LOW;
|
|
36
|
+
}
|
|
37
|
+
else if (value >= part && value < part * 2) {
|
|
38
|
+
return ProgressColor.LOW;
|
|
39
|
+
}
|
|
40
|
+
else if (value >= part * 2 && value < part * 3) {
|
|
41
|
+
return ProgressColor.MAX_LOW;
|
|
42
|
+
}
|
|
43
|
+
else if (value >= part * 3 && value < part * 4) {
|
|
44
|
+
return ProgressColor.MIN_MEDIUM;
|
|
45
|
+
}
|
|
46
|
+
else if (value >= part * 4 && value < part * 5) {
|
|
47
|
+
return ProgressColor.MEDIUM;
|
|
48
|
+
}
|
|
49
|
+
else if (value >= part * 5 && value < part * 6) {
|
|
50
|
+
return ProgressColor.MAX_MEDIUM;
|
|
51
|
+
}
|
|
52
|
+
else if (value >= part * 6 && value < part * 7) {
|
|
53
|
+
return ProgressColor.MIN_HIGH;
|
|
54
|
+
}
|
|
55
|
+
else if (value >= part * 7 && value < part * 8) {
|
|
56
|
+
return ProgressColor.HIGH;
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
return ProgressColor.MAX_HIGH;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MudXRpbHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ZjLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3Byb2dyZXNzL3Byb2dyZXNzLnV0aWxzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNqRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFFdEQsTUFBTSxVQUFVLDJCQUEyQixDQUFDLEtBQWE7SUFDckQsSUFBSSxLQUFLLEdBQUcsRUFBRSxFQUFFO1FBQ1osT0FBTyxhQUFhLENBQUMsT0FBTyxDQUFDO0tBQ2hDO1NBQU0sSUFBSSxLQUFLLElBQUksRUFBRSxJQUFJLEtBQUssR0FBRyxFQUFFLEVBQUU7UUFDbEMsT0FBTyxhQUFhLENBQUMsR0FBRyxDQUFDO0tBQzVCO1NBQU0sSUFBSSxLQUFLLElBQUksRUFBRSxJQUFJLEtBQUssR0FBRyxFQUFFLEVBQUU7UUFDbEMsT0FBTyxhQUFhLENBQUMsT0FBTyxDQUFDO0tBQ2hDO1NBQU0sSUFBSSxLQUFLLElBQUksRUFBRSxJQUFJLEtBQUssR0FBRyxFQUFFLEVBQUU7UUFDbEMsT0FBTyxhQUFhLENBQUMsVUFBVSxDQUFDO0tBQ25DO1NBQU0sSUFBSSxLQUFLLElBQUksRUFBRSxJQUFJLEtBQUssR0FBRyxFQUFFLEVBQUU7UUFDbEMsT0FBTyxhQUFhLENBQUMsTUFBTSxDQUFDO0tBQy9CO1NBQU0sSUFBSSxLQUFLLElBQUksRUFBRSxJQUFJLEtBQUssR0FBRyxFQUFFLEVBQUU7UUFDbEMsT0FBTyxhQUFhLENBQUMsVUFBVSxDQUFDO0tBQ25DO1NBQU0sSUFBSSxLQUFLLElBQUksRUFBRSxJQUFJLEtBQUssR0FBRyxFQUFFLEVBQUU7UUFDbEMsT0FBTyxhQUFhLENBQUMsUUFBUSxDQUFDO0tBQ2pDO1NBQU0sSUFBSSxLQUFLLElBQUksRUFBRSxJQUFJLEtBQUssR0FBRyxFQUFFLEVBQUU7UUFDbEMsT0FBTyxhQUFhLENBQUMsSUFBSSxDQUFDO0tBQzdCO1NBQU07UUFDSCxPQUFPLGFBQWEsQ0FBQyxRQUFRLENBQUM7S0FDakM7QUFDTCxDQUFDO0FBRUQsTUFBTSxVQUFVLCtCQUErQixDQUFDLEtBQWEsRUFBRSxLQUFjO0lBQ3pFLE1BQU0sV0FBVyxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsTUFBTSxFQUNqRCxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLEtBQUssSUFBSSxlQUFlLENBQUMsZUFBZSxDQUFDLEdBQUcsV0FBVyxDQUFDLENBQUM7SUFFL0UsSUFBSSxLQUFLLEdBQUcsSUFBSSxFQUFFO1FBQ2QsT0FBTyxhQUFhLENBQUMsT0FBTyxDQUFDO0tBQ2hDO1NBQU0sSUFBSSxLQUFLLElBQUksSUFBSSxJQUFJLEtBQUssR0FBRyxJQUFJLEdBQUcsQ0FBQyxFQUFFO1FBQzFDLE9BQU8sYUFBYSxDQUFDLEdBQUcsQ0FBQztLQUM1QjtTQUFNLElBQUksS0FBSyxJQUFJLElBQUksR0FBRyxDQUFDLElBQUksS0FBSyxHQUFHLElBQUksR0FBRyxDQUFDLEVBQUU7UUFDOUMsT0FBTyxhQUFhLENBQUMsT0FBTyxDQUFDO0tBQ2hDO1NBQU0sSUFBSSxLQUFLLElBQUksSUFBSSxHQUFHLENBQUMsSUFBSSxLQUFLLEdBQUcsSUFBSSxHQUFHLENBQUMsRUFBRTtRQUM5QyxPQUFPLGFBQWEsQ0FBQyxVQUFVLENBQUM7S0FDbkM7U0FBTSxJQUFJLEtBQUssSUFBSSxJQUFJLEdBQUcsQ0FBQyxJQUFJLEtBQUssR0FBRyxJQUFJLEdBQUcsQ0FBQyxFQUFFO1FBQzlDLE9BQU8sYUFBYSxDQUFDLE1BQU0sQ0FBQztLQUMvQjtTQUFNLElBQUksS0FBSyxJQUFJLElBQUksR0FBRyxDQUFDLElBQUksS0FBSyxHQUFHLElBQUksR0FBRyxDQUFDLEVBQUU7UUFDOUMsT0FBTyxhQUFhLENBQUMsVUFBVSxDQUFDO0tBQ25DO1NBQU0sSUFBSSxLQUFLLElBQUksSUFBSSxHQUFHLENBQUMsSUFBSSxLQUFLLEdBQUcsSUFBSSxHQUFHLENBQUMsRUFBRTtRQUM5QyxPQUFPLGFBQWEsQ0FBQyxRQUFRLENBQUM7S0FDakM7U0FBTSxJQUFJLEtBQUssSUFBSSxJQUFJLEdBQUcsQ0FBQyxJQUFJLEtBQUssR0FBRyxJQUFJLEdBQUcsQ0FBQyxFQUFFO1FBQzlDLE9BQU8sYUFBYSxDQUFDLElBQUksQ0FBQztLQUM3QjtTQUFNO1FBQ0gsT0FBTyxhQUFhLENBQUMsUUFBUSxDQUFDO0tBQ2pDO0FBQ0wsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbkNvbnN0YW50cyB9IGZyb20gXCJuZ3gtc2ZjLWNvbW1vblwiO1xyXG5pbXBvcnQgeyBQcm9ncmVzc0NvbG9yIH0gZnJvbSBcIi4vcHJvZ3Jlc3MtY29sb3IuZW51bVwiO1xyXG5cclxuZXhwb3J0IGZ1bmN0aW9uIGdldFByb2dyZXNzQ29sb3JEZWZhdWx0RnVuYyh2YWx1ZTogbnVtYmVyKTogc3RyaW5nIHtcclxuICAgIGlmICh2YWx1ZSA8IDEyKSB7XHJcbiAgICAgICAgcmV0dXJuIFByb2dyZXNzQ29sb3IuTUlOX0xPVztcclxuICAgIH0gZWxzZSBpZiAodmFsdWUgPj0gMTIgJiYgdmFsdWUgPCAyNCkge1xyXG4gICAgICAgIHJldHVybiBQcm9ncmVzc0NvbG9yLkxPVztcclxuICAgIH0gZWxzZSBpZiAodmFsdWUgPj0gMjQgJiYgdmFsdWUgPCAzNikge1xyXG4gICAgICAgIHJldHVybiBQcm9ncmVzc0NvbG9yLk1BWF9MT1c7XHJcbiAgICB9IGVsc2UgaWYgKHZhbHVlID49IDM2ICYmIHZhbHVlIDwgNDgpIHtcclxuICAgICAgICByZXR1cm4gUHJvZ3Jlc3NDb2xvci5NSU5fTUVESVVNO1xyXG4gICAgfSBlbHNlIGlmICh2YWx1ZSA+PSA0OCAmJiB2YWx1ZSA8IDYwKSB7XHJcbiAgICAgICAgcmV0dXJuIFByb2dyZXNzQ29sb3IuTUVESVVNO1xyXG4gICAgfSBlbHNlIGlmICh2YWx1ZSA+PSA2MCAmJiB2YWx1ZSA8IDcyKSB7XHJcbiAgICAgICAgcmV0dXJuIFByb2dyZXNzQ29sb3IuTUFYX01FRElVTTtcclxuICAgIH0gZWxzZSBpZiAodmFsdWUgPj0gNzIgJiYgdmFsdWUgPCA4NCkge1xyXG4gICAgICAgIHJldHVybiBQcm9ncmVzc0NvbG9yLk1JTl9ISUdIO1xyXG4gICAgfSBlbHNlIGlmICh2YWx1ZSA+PSA4NCAmJiB2YWx1ZSA8IDk2KSB7XHJcbiAgICAgICAgcmV0dXJuIFByb2dyZXNzQ29sb3IuSElHSDtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgICAgcmV0dXJuIFByb2dyZXNzQ29sb3IuTUFYX0hJR0g7XHJcbiAgICB9XHJcbn1cclxuXHJcbmV4cG9ydCBmdW5jdGlvbiBnZXRQcm9ncmVzc0NvbG9yRHluYW1pY2FsbHlGdW5jKHZhbHVlOiBudW1iZXIsIHRvdGFsPzogbnVtYmVyKTogc3RyaW5nIHtcclxuICAgIGNvbnN0IGNvbG9yc0NvdW50ID0gT2JqZWN0LmtleXMoUHJvZ3Jlc3NDb2xvcikubGVuZ3RoLFxyXG4gICAgICAgIHBhcnQgPSBNYXRoLmNlaWwoKHRvdGFsIHx8IENvbW1vbkNvbnN0YW50cy5GVUxMX1BFUkNFTlRBR0UpIC8gY29sb3JzQ291bnQpO1xyXG5cclxuICAgIGlmICh2YWx1ZSA8IHBhcnQpIHtcclxuICAgICAgICByZXR1cm4gUHJvZ3Jlc3NDb2xvci5NSU5fTE9XO1xyXG4gICAgfSBlbHNlIGlmICh2YWx1ZSA+PSBwYXJ0ICYmIHZhbHVlIDwgcGFydCAqIDIpIHtcclxuICAgICAgICByZXR1cm4gUHJvZ3Jlc3NDb2xvci5MT1c7XHJcbiAgICB9IGVsc2UgaWYgKHZhbHVlID49IHBhcnQgKiAyICYmIHZhbHVlIDwgcGFydCAqIDMpIHtcclxuICAgICAgICByZXR1cm4gUHJvZ3Jlc3NDb2xvci5NQVhfTE9XO1xyXG4gICAgfSBlbHNlIGlmICh2YWx1ZSA+PSBwYXJ0ICogMyAmJiB2YWx1ZSA8IHBhcnQgKiA0KSB7XHJcbiAgICAgICAgcmV0dXJuIFByb2dyZXNzQ29sb3IuTUlOX01FRElVTTtcclxuICAgIH0gZWxzZSBpZiAodmFsdWUgPj0gcGFydCAqIDQgJiYgdmFsdWUgPCBwYXJ0ICogNSkge1xyXG4gICAgICAgIHJldHVybiBQcm9ncmVzc0NvbG9yLk1FRElVTTtcclxuICAgIH0gZWxzZSBpZiAodmFsdWUgPj0gcGFydCAqIDUgJiYgdmFsdWUgPCBwYXJ0ICogNikge1xyXG4gICAgICAgIHJldHVybiBQcm9ncmVzc0NvbG9yLk1BWF9NRURJVU07XHJcbiAgICB9IGVsc2UgaWYgKHZhbHVlID49IHBhcnQgKiA2ICYmIHZhbHVlIDwgcGFydCAqIDcpIHtcclxuICAgICAgICByZXR1cm4gUHJvZ3Jlc3NDb2xvci5NSU5fSElHSDtcclxuICAgIH0gZWxzZSBpZiAodmFsdWUgPj0gcGFydCAqIDcgJiYgdmFsdWUgPCBwYXJ0ICogOCkge1xyXG4gICAgICAgIHJldHVybiBQcm9ncmVzc0NvbG9yLkhJR0g7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICAgIHJldHVybiBQcm9ncmVzc0NvbG9yLk1BWF9ISUdIO1xyXG4gICAgfVxyXG59Il19
|
|
@@ -19,7 +19,7 @@ export class ProgressSemiCircleComponent extends ProgressBaseComponent {
|
|
|
19
19
|
this.progress = this.max;
|
|
20
20
|
}
|
|
21
21
|
get barStyles() {
|
|
22
|
-
const color = this.getColor(this.progress), differenceLimits = this.max - this.min, rotateValue = 45 + (180 - ((this.max - this.progress) * 180 / differenceLimits));
|
|
22
|
+
const color = this.getColor(this.progress, this.max), differenceLimits = this.max - this.min, rotateValue = 45 + (180 - ((this.max - this.progress) * 180 / differenceLimits));
|
|
23
23
|
return {
|
|
24
24
|
transform: `rotate(${getCssLikeValue(rotateValue, UIConstants.CSS_DEGREES)})`,
|
|
25
25
|
borderBottomColor: color,
|
|
@@ -39,4 +39,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
39
39
|
}], max: [{
|
|
40
40
|
type: Input
|
|
41
41
|
}] } });
|
|
42
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
42
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3Mtc2VtaS1jaXJjbGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNmYy1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9wcm9ncmVzcy9zZW1pLWNpcmNsZS9wcm9ncmVzcy1zZW1pLWNpcmNsZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ZjLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3Byb2dyZXNzL3NlbWktY2lyY2xlL3Byb2dyZXNzLXNlbWktY2lyY2xlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ3pELE9BQU8sRUFBRSxlQUFlLEVBQUUsZUFBZSxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQy9FLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHVCQUF1QixDQUFDOzs7QUFPOUQsTUFBTSxPQUFPLDJCQUNYLFNBQVEscUJBQXFCO0lBTi9COztRQVVFLFdBQU0sR0FBWSxJQUFJLENBQUM7UUFHdkIsUUFBRyxHQUFXLENBQUMsQ0FBQztRQUdoQixRQUFHLEdBQVcsZUFBZSxDQUFDLGVBQWUsQ0FBQztLQXdCL0M7SUF0QkMsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsR0FBRztZQUNyQixJQUFJLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQztRQUVmLElBQUksSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsR0FBRztZQUMxQixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUM7UUFFM0IsSUFBSSxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxHQUFHO1lBQzFCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQztJQUM3QixDQUFDO0lBRUQsSUFBSSxTQUFTO1FBQ1gsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsRUFDbEQsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsR0FBRyxFQUN0QyxXQUFXLEdBQUcsRUFBRSxHQUFHLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxHQUFHLEdBQUcsZ0JBQWdCLENBQUMsQ0FBQyxDQUFDO1FBRW5GLE9BQU87WUFDTCxTQUFTLEVBQUUsVUFBVSxlQUFlLENBQUMsV0FBVyxFQUFFLFdBQVcsQ0FBQyxXQUFXLENBQUMsR0FBRztZQUM3RSxpQkFBaUIsRUFBRSxLQUFLO1lBQ3hCLGdCQUFnQixFQUFFLEtBQUs7U0FDeEIsQ0FBQTtJQUNILENBQUM7O3dIQWxDVSwyQkFBMkI7NEdBQTNCLDJCQUEyQiw2SUNUeEMsc1dBU007MkZEQU8sMkJBQTJCO2tCQUx2QyxTQUFTOytCQUNFLDBCQUEwQjs4QkFTcEMsTUFBTTtzQkFETCxLQUFLO2dCQUlOLEdBQUc7c0JBREYsS0FBSztnQkFJTixHQUFHO3NCQURGLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29tbW9uQ29uc3RhbnRzLCBnZXRDc3NMaWtlVmFsdWUsIFVJQ29uc3RhbnRzIH0gZnJvbSAnbmd4LXNmYy1jb21tb24nO1xyXG5pbXBvcnQgeyBQcm9ncmVzc0Jhc2VDb21wb25lbnQgfSBmcm9tICcuLi9wcm9ncmVzcy5jb21wb25lbnQnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzZmMtcHJvZ3Jlc3Mtc2VtaS1jaXJjbGUnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9wcm9ncmVzcy1zZW1pLWNpcmNsZS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vcHJvZ3Jlc3Mtc2VtaS1jaXJjbGUuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgUHJvZ3Jlc3NTZW1pQ2lyY2xlQ29tcG9uZW50XHJcbiAgZXh0ZW5kcyBQcm9ncmVzc0Jhc2VDb21wb25lbnRcclxuICBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgbGltaXRzOiBib29sZWFuID0gdHJ1ZTtcclxuXHJcbiAgQElucHV0KClcclxuICBtaW46IG51bWJlciA9IDA7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgbWF4OiBudW1iZXIgPSBDb21tb25Db25zdGFudHMuRlVMTF9QRVJDRU5UQUdFO1xyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIGlmICh0aGlzLm1pbiA+IHRoaXMubWF4KVxyXG4gICAgICB0aGlzLm1pbiA9IDA7XHJcblxyXG4gICAgaWYgKHRoaXMucHJvZ3Jlc3MgPCB0aGlzLm1pbilcclxuICAgICAgdGhpcy5wcm9ncmVzcyA9IHRoaXMubWluO1xyXG5cclxuICAgIGlmICh0aGlzLnByb2dyZXNzID4gdGhpcy5tYXgpXHJcbiAgICAgIHRoaXMucHJvZ3Jlc3MgPSB0aGlzLm1heDtcclxuICB9XHJcblxyXG4gIGdldCBiYXJTdHlsZXMoKSB7XHJcbiAgICBjb25zdCBjb2xvciA9IHRoaXMuZ2V0Q29sb3IodGhpcy5wcm9ncmVzcywgdGhpcy5tYXgpLFxyXG4gICAgICBkaWZmZXJlbmNlTGltaXRzID0gdGhpcy5tYXggLSB0aGlzLm1pbixcclxuICAgICAgcm90YXRlVmFsdWUgPSA0NSArICgxODAgLSAoKHRoaXMubWF4IC0gdGhpcy5wcm9ncmVzcykgKiAxODAgLyBkaWZmZXJlbmNlTGltaXRzKSk7XHJcblxyXG4gICAgcmV0dXJuIHtcclxuICAgICAgdHJhbnNmb3JtOiBgcm90YXRlKCR7Z2V0Q3NzTGlrZVZhbHVlKHJvdGF0ZVZhbHVlLCBVSUNvbnN0YW50cy5DU1NfREVHUkVFUyl9KWAsXHJcbiAgICAgIGJvcmRlckJvdHRvbUNvbG9yOiBjb2xvcixcclxuICAgICAgYm9yZGVyUmlnaHRDb2xvcjogY29sb3JcclxuICAgIH1cclxuICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cImNvbnRhaW5lclwiPlxyXG4gICAgPGRpdiBjbGFzcz1cInByb2dyZXNzLWJhclwiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJiYXJcIiBbc3R5bGUuYm9yZGVyLWNvbG9yXT1cImJhY2tncm91bmRcIiBbbmdTdHlsZV09XCJiYXJTdHlsZXNcIj48L2Rpdj5cclxuICAgIDwvZGl2PlxyXG4gICAgPHNwYW4gY2xhc3M9XCJ2YWx1ZVwiPnt7cHJvZ3Jlc3N9fTwvc3Bhbj5cclxuICAgIDxkaXYgY2xhc3M9XCJsaW1pdHNcIiAqbmdJZj1cImxpbWl0c1wiPlxyXG4gICAgICAgIDxzcGFuPnt7bWlufX08L3NwYW4+XHJcbiAgICAgICAgPHNwYW4+e3ttYXh9fTwvc3Bhbj5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj4iXX0=
|
package/esm2020/lib/components/table/parts/columns/selectable/selectable-table-column.component.mjs
CHANGED
|
@@ -14,7 +14,7 @@ export class SelectableTableColumnComponent {
|
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
SelectableTableColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SelectableTableColumnComponent, deps: [{ token: i1.TableSelectService }], target: i0.ɵɵFactoryTarget.Component });
|
|
17
|
-
SelectableTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SelectableTableColumnComponent, selector: "sfc-selectable-table-column", inputs: { selected: "selected" }, host: { listeners: { "click": "selectAll()" }, properties: { "class.active": "this.selected" } }, ngImport: i0, template: "<div class=\"container\">\r\n <sfc-checkmark [active]=\"selected\"></sfc-checkmark>\r\n <span>ALL</span>\r\n</div>", styles: [":host{display:inline-block}:host:hover{color:#ffce54}:host:hover span{color:#ffce54}:host .container{text-transform:uppercase;font-size:1em;font-weight:700;display:flex;align-items:center;justify-content:center;transition:color .3s;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container span{padding-left:.31em}\n"], dependencies: [{ kind: "component", type: i2.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type"
|
|
17
|
+
SelectableTableColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SelectableTableColumnComponent, selector: "sfc-selectable-table-column", inputs: { selected: "selected" }, host: { listeners: { "click": "selectAll()" }, properties: { "class.active": "this.selected" } }, ngImport: i0, template: "<div class=\"container\">\r\n <sfc-checkmark [active]=\"selected\"></sfc-checkmark>\r\n <span>ALL</span>\r\n</div>", styles: [":host{display:inline-block}:host:hover{color:#ffce54}:host:hover span{color:#ffce54}:host .container{text-transform:uppercase;font-size:1em;font-weight:700;display:flex;align-items:center;justify-content:center;transition:color .3s;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container span{padding-left:.31em}\n"], dependencies: [{ kind: "component", type: i2.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type"] }] });
|
|
18
18
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SelectableTableColumnComponent, decorators: [{
|
|
19
19
|
type: Component,
|
|
20
20
|
args: [{ selector: 'sfc-selectable-table-column', template: "<div class=\"container\">\r\n <sfc-checkmark [active]=\"selected\"></sfc-checkmark>\r\n <span>ALL</span>\r\n</div>", styles: [":host{display:inline-block}:host:hover{color:#ffce54}:host:hover span{color:#ffce54}:host .container{text-transform:uppercase;font-size:1em;font-weight:700;display:flex;align-items:center;justify-content:center;transition:color .3s;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container span{padding-left:.31em}\n"] }]
|
package/esm2020/lib/components/table/parts/content/cards/default/default-table-card.component.mjs
CHANGED
|
@@ -6,7 +6,7 @@ import * as i2 from "ngx-sfc-common";
|
|
|
6
6
|
export class DefaultTableCardComponent extends BaseDefaultTableContentComponent {
|
|
7
7
|
}
|
|
8
8
|
DefaultTableCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTableCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
9
|
-
DefaultTableCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultTableCardComponent, selector: "sfc-default-table-card", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"content-container\" *ngFor=\"let column of columns\">\r\n <div class=\"content\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <div #columnCheckmark *ngSwitchCase=\"TableColumnType.Selectable\">\r\n <sfc-checkmark [active]=\"model.dataModel.selected || false\"></sfc-checkmark>\r\n </div>\r\n <div *ngSwitchCase=\"TableColumnType.Sequence\">\r\n <span class=\"name\">{{column.name}}</span>\r\n <span>{{model.sequence}}</span>\r\n </div>\r\n <div *ngSwitchDefault>\r\n <span class=\"name\">{{column.name}}</span>\r\n <span>{{model.dataModel.data[column.field]}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{box-shadow:0 .625em 1.25em #00000030,0 .3753em .3753em #0000003b;transition:all .2s ease-in-out;border-radius:.75em;background-color:#f5f7fa}:host.even{background-color:#e6e9ed}:host.even:hover{background-color:#ccd1d9}:host:hover{background-color:#ccd1d9}:host.pointer{cursor:pointer}:host .container{flex-flow:column wrap;justify-content:center;width:min-content;display:flex;align-items:center}:host .container .content-container{color:#545e61;font-weight:700;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;user-select:none;text-align:center;text-align:left}:host .container .content-container .content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:.625em 1.25em}:host .container .content-container .content div{width:100%;padding:0 5em}:host .container .content-container .content .name{display:block;font-size:.625em;line-height:.625em;font-weight:700;text-transform:uppercase;color:#656d78}@media all and (max-width: 430px){:host .container{width:initial}:host .container .content-container .content div{width:initial;padding:0}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type"
|
|
9
|
+
DefaultTableCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultTableCardComponent, selector: "sfc-default-table-card", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"content-container\" *ngFor=\"let column of columns\">\r\n <div class=\"content\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <div #columnCheckmark *ngSwitchCase=\"TableColumnType.Selectable\">\r\n <sfc-checkmark [active]=\"model.dataModel.selected || false\"></sfc-checkmark>\r\n </div>\r\n <div *ngSwitchCase=\"TableColumnType.Sequence\">\r\n <span class=\"name\">{{column.name}}</span>\r\n <span>{{model.sequence}}</span>\r\n </div>\r\n <div *ngSwitchDefault>\r\n <span class=\"name\">{{column.name}}</span>\r\n <span>{{model.dataModel.data[column.field]}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{box-shadow:0 .625em 1.25em #00000030,0 .3753em .3753em #0000003b;transition:all .2s ease-in-out;border-radius:.75em;background-color:#f5f7fa}:host.even{background-color:#e6e9ed}:host.even:hover{background-color:#ccd1d9}:host:hover{background-color:#ccd1d9}:host.pointer{cursor:pointer}:host .container{flex-flow:column wrap;justify-content:center;width:min-content;display:flex;align-items:center}:host .container .content-container{color:#545e61;font-weight:700;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;user-select:none;text-align:center;text-align:left}:host .container .content-container .content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:.625em 1.25em}:host .container .content-container .content div{width:100%;padding:0 5em}:host .container .content-container .content .name{display:block;font-size:.625em;line-height:.625em;font-weight:700;text-transform:uppercase;color:#656d78}@media all and (max-width: 430px){:host .container{width:initial}:host .container .content-container .content div{width:initial;padding:0}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type"] }] });
|
|
10
10
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTableCardComponent, decorators: [{
|
|
11
11
|
type: Component,
|
|
12
12
|
args: [{ selector: 'sfc-default-table-card', template: "<div class=\"container\">\r\n <div class=\"content-container\" *ngFor=\"let column of columns\">\r\n <div class=\"content\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <div #columnCheckmark *ngSwitchCase=\"TableColumnType.Selectable\">\r\n <sfc-checkmark [active]=\"model.dataModel.selected || false\"></sfc-checkmark>\r\n </div>\r\n <div *ngSwitchCase=\"TableColumnType.Sequence\">\r\n <span class=\"name\">{{column.name}}</span>\r\n <span>{{model.sequence}}</span>\r\n </div>\r\n <div *ngSwitchDefault>\r\n <span class=\"name\">{{column.name}}</span>\r\n <span>{{model.dataModel.data[column.field]}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{box-shadow:0 .625em 1.25em #00000030,0 .3753em .3753em #0000003b;transition:all .2s ease-in-out;border-radius:.75em;background-color:#f5f7fa}:host.even{background-color:#e6e9ed}:host.even:hover{background-color:#ccd1d9}:host:hover{background-color:#ccd1d9}:host.pointer{cursor:pointer}:host .container{flex-flow:column wrap;justify-content:center;width:min-content;display:flex;align-items:center}:host .container .content-container{color:#545e61;font-weight:700;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;user-select:none;text-align:center;text-align:left}:host .container .content-container .content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:.625em 1.25em}:host .container .content-container .content div{width:100%;padding:0 5em}:host .container .content-container .content .name{display:block;font-size:.625em;line-height:.625em;font-weight:700;text-transform:uppercase;color:#656d78}@media all and (max-width: 430px){:host .container{width:initial}:host .container .content-container .content div{width:initial;padding:0}}\n"] }]
|
package/esm2020/lib/components/table/parts/content/rows/default/default-table-row.component.mjs
CHANGED
|
@@ -20,7 +20,7 @@ export class DefaultTableRowComponent extends BaseDefaultTableContentComponent {
|
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
DefaultTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTableRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
23
|
-
DefaultTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultTableRowComponent, selector: "sfc-default-table-row", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n <div [ngStyle]=\"width\" [style.text-align]=\"position\" class=\"content-container\" *ngFor=\"let column of columns\">\r\n <div class=\"content\" [style.align-items]=\"contentPosition\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <div class=\"checkmark\" #columnCheckmark *ngSwitchCase=\"TableColumnType.Selectable\">\r\n <sfc-checkmark [active]=\"model.dataModel.selected || false\"></sfc-checkmark>\r\n </div>\r\n <div *ngSwitchCase=\"TableColumnType.Sequence\">\r\n <span class=\"name\">{{column.name}}</span>\r\n <span>{{model.sequence}}</span>\r\n </div>\r\n <div *ngSwitchDefault>\r\n <span class=\"name\">{{column.name}}</span>\r\n <span>{{model.dataModel.data[column.field]}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{width:100%;border-radius:1.25em;box-shadow:0 .625em 1em #00000005;transition:background-color .3s,box-shadow .6s cubic-bezier(.25,1,.5,.1);background-color:#f5f7fa}:host.even{background-color:#e6e9ed}:host.even:hover{background-color:#ccd1d9}:host:hover{background-color:#ccd1d9}:host.pointer{cursor:pointer}:host .container{flex-flow:row wrap;padding:0 .31em;display:flex;align-items:center}:host .container .content-container{color:#545e61;font-weight:700;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;user-select:none}:host .container .content-container .content{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:.7em .5em}:host .container .content-container .content .name{display:none;font-size:.625em;line-height:.625em;font-weight:700;text-transform:uppercase;color:#656d78}@media all and (max-width: 767px){:host .container{align-items:flex-start}:host .container .content-container .content{align-items:flex-start;padding:.625em 1.25em}:host .container .content-container .content .name{display:block}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type"
|
|
23
|
+
DefaultTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultTableRowComponent, selector: "sfc-default-table-row", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n <div [ngStyle]=\"width\" [style.text-align]=\"position\" class=\"content-container\" *ngFor=\"let column of columns\">\r\n <div class=\"content\" [style.align-items]=\"contentPosition\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <div class=\"checkmark\" #columnCheckmark *ngSwitchCase=\"TableColumnType.Selectable\">\r\n <sfc-checkmark [active]=\"model.dataModel.selected || false\"></sfc-checkmark>\r\n </div>\r\n <div *ngSwitchCase=\"TableColumnType.Sequence\">\r\n <span class=\"name\">{{column.name}}</span>\r\n <span>{{model.sequence}}</span>\r\n </div>\r\n <div *ngSwitchDefault>\r\n <span class=\"name\">{{column.name}}</span>\r\n <span>{{model.dataModel.data[column.field]}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{width:100%;border-radius:1.25em;box-shadow:0 .625em 1em #00000005;transition:background-color .3s,box-shadow .6s cubic-bezier(.25,1,.5,.1);background-color:#f5f7fa}:host.even{background-color:#e6e9ed}:host.even:hover{background-color:#ccd1d9}:host:hover{background-color:#ccd1d9}:host.pointer{cursor:pointer}:host .container{flex-flow:row wrap;padding:0 .31em;display:flex;align-items:center}:host .container .content-container{color:#545e61;font-weight:700;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;user-select:none}:host .container .content-container .content{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:.7em .5em}:host .container .content-container .content .name{display:none;font-size:.625em;line-height:.625em;font-weight:700;text-transform:uppercase;color:#656d78}@media all and (max-width: 767px){:host .container{align-items:flex-start}:host .container .content-container .content{align-items:flex-start;padding:.625em 1.25em}:host .container .content-container .content .name{display:block}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type"] }] });
|
|
24
24
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTableRowComponent, decorators: [{
|
|
25
25
|
type: Component,
|
|
26
26
|
args: [{ selector: 'sfc-default-table-row', template: "<div class=\"container\">\r\n <div [ngStyle]=\"width\" [style.text-align]=\"position\" class=\"content-container\" *ngFor=\"let column of columns\">\r\n <div class=\"content\" [style.align-items]=\"contentPosition\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <div class=\"checkmark\" #columnCheckmark *ngSwitchCase=\"TableColumnType.Selectable\">\r\n <sfc-checkmark [active]=\"model.dataModel.selected || false\"></sfc-checkmark>\r\n </div>\r\n <div *ngSwitchCase=\"TableColumnType.Sequence\">\r\n <span class=\"name\">{{column.name}}</span>\r\n <span>{{model.sequence}}</span>\r\n </div>\r\n <div *ngSwitchDefault>\r\n <span class=\"name\">{{column.name}}</span>\r\n <span>{{model.dataModel.data[column.field]}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{width:100%;border-radius:1.25em;box-shadow:0 .625em 1em #00000005;transition:background-color .3s,box-shadow .6s cubic-bezier(.25,1,.5,.1);background-color:#f5f7fa}:host.even{background-color:#e6e9ed}:host.even:hover{background-color:#ccd1d9}:host:hover{background-color:#ccd1d9}:host.pointer{cursor:pointer}:host .container{flex-flow:row wrap;padding:0 .31em;display:flex;align-items:center}:host .container .content-container{color:#545e61;font-weight:700;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;user-select:none}:host .container .content-container .content{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:.7em .5em}:host .container .content-container .content .name{display:none;font-size:.625em;line-height:.625em;font-weight:700;text-transform:uppercase;color:#656d78}@media all and (max-width: 767px){:host .container{align-items:flex-start}:host .container .content-container .content{align-items:flex-start;padding:.625em 1.25em}:host .container .content-container .content .name{display:block}}\n"] }]
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNmYy1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy90YWJzL21vZGVscy90YWIubW9kZWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEljb25EZWZpbml0aW9uIH0gZnJvbSAnQGZvcnRhd2Vzb21lL2ZyZWUtc29saWQtc3ZnLWljb25zJztcclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgSVRhYk1vZGVsIHtcclxuICAgIGxhYmVsPzogc3RyaW5nO1xyXG4gICAgaWNvbj86IEljb25EZWZpbml0aW9uO1xyXG4gICAgaW1hZ2U/OnN0cmluZztcclxuICAgIHNlbGVjdGVkPzogYm9vbGVhbjtcclxuICAgIGRpc2FibGVkPzogYm9vbGVhbjtcclxuICAgIGRhdGE6IGFueTtcclxufSJdfQ==
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import { Directive, HostBinding, Input } from "@angular/core";
|
|
2
|
-
import {
|
|
2
|
+
import { faCircle } from "@fortawesome/free-solid-svg-icons";
|
|
3
|
+
import { isDefined, UIClass } from "ngx-sfc-common";
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
5
|
export class TabLabelContentBase {
|
|
5
6
|
constructor() {
|
|
6
7
|
this.disabled = false;
|
|
7
8
|
this.selected = false;
|
|
8
9
|
}
|
|
10
|
+
get tabIcon() {
|
|
11
|
+
return isDefined(this.icon) ? this.icon : faCircle;
|
|
12
|
+
}
|
|
9
13
|
}
|
|
10
14
|
TabLabelContentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelContentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
11
15
|
TabLabelContentBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: TabLabelContentBase, inputs: { label: "label", icon: "icon", disabled: "disabled", selected: "selected" }, host: { properties: { "class.disabled": "this.disabled", "class.selected": "this.selected" } }, ngImport: i0 });
|
|
@@ -26,4 +30,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
26
30
|
type: HostBinding,
|
|
27
31
|
args: ['class.' + UIClass.Selected]
|
|
28
32
|
}] } });
|
|
29
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
33
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWxhYmVsLWNvbnRlbnQtYmFzZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ZjLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3RhYnMvcGFydHMvbGFiZWxzL3RhYi1sYWJlbC1jb250ZW50LWJhc2UuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCxTQUFTLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFDaEMsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFFBQVEsRUFBa0IsTUFBTSxtQ0FBbUMsQ0FBQztBQUM3RSxPQUFPLEVBQUUsU0FBUyxFQUFFLE9BQU8sRUFBRSxNQUFNLGdCQUFnQixDQUFDOztBQUdwRCxNQUFNLE9BQU8sbUJBQW1CO0lBRGhDO1FBV0ksYUFBUSxHQUFZLEtBQUssQ0FBQztRQUkxQixhQUFRLEdBQUcsS0FBSyxDQUFDO0tBS3BCO0lBSEcsSUFBSSxPQUFPO1FBQ1AsT0FBTyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBc0IsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDO0lBQ3pFLENBQUM7O2dIQWxCUSxtQkFBbUI7b0dBQW5CLG1CQUFtQjsyRkFBbkIsbUJBQW1CO2tCQUQvQixTQUFTOzhCQUlOLEtBQUs7c0JBREosS0FBSztnQkFJTixJQUFJO3NCQURILEtBQUs7Z0JBS04sUUFBUTtzQkFGUCxLQUFLOztzQkFDTCxXQUFXO3VCQUFDLFFBQVEsR0FBRyxPQUFPLENBQUMsUUFBUTtnQkFLeEMsUUFBUTtzQkFGUCxLQUFLOztzQkFDTCxXQUFXO3VCQUFDLFFBQVEsR0FBRyxPQUFPLENBQUMsUUFBUSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgICBEaXJlY3RpdmUsIEhvc3RCaW5kaW5nLCBJbnB1dFxyXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XHJcbmltcG9ydCB7IGZhQ2lyY2xlLCBJY29uRGVmaW5pdGlvbiB9IGZyb20gXCJAZm9ydGF3ZXNvbWUvZnJlZS1zb2xpZC1zdmctaWNvbnNcIjtcclxuaW1wb3J0IHsgaXNEZWZpbmVkLCBVSUNsYXNzIH0gZnJvbSBcIm5neC1zZmMtY29tbW9uXCI7XHJcblxyXG5ARGlyZWN0aXZlKClcclxuZXhwb3J0IGNsYXNzIFRhYkxhYmVsQ29udGVudEJhc2Uge1xyXG5cclxuICAgIEBJbnB1dCgpXHJcbiAgICBsYWJlbD86IHN0cmluZztcclxuXHJcbiAgICBASW5wdXQoKVxyXG4gICAgaWNvbj86IEljb25EZWZpbml0aW9uO1xyXG5cclxuICAgIEBJbnB1dCgpXHJcbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzLicgKyBVSUNsYXNzLkRpc2FibGVkKVxyXG4gICAgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgICBASW5wdXQoKVxyXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy4nICsgVUlDbGFzcy5TZWxlY3RlZClcclxuICAgIHNlbGVjdGVkID0gZmFsc2U7XHJcblxyXG4gICAgZ2V0IHRhYkljb24oKTogSWNvbkRlZmluaXRpb24ge1xyXG4gICAgICAgIHJldHVybiBpc0RlZmluZWQodGhpcy5pY29uKSA/IHRoaXMuaWNvbiBhcyBJY29uRGVmaW5pdGlvbiA6IGZhQ2lyY2xlO1xyXG4gICAgfVxyXG59XHJcbiJdfQ==
|
package/esm2020/lib/components/tabs/parts/labels/tab-label-icon/tab-label-icon.component.mjs
CHANGED
|
@@ -1,18 +1,13 @@
|
|
|
1
1
|
import { Component } from '@angular/core';
|
|
2
|
-
import { isDefined } from 'ngx-sfc-common';
|
|
3
2
|
import { TabLabelContentBase } from '../tab-label-content-base.component';
|
|
4
|
-
import { faCircle } from '@fortawesome/free-solid-svg-icons';
|
|
5
3
|
import * as i0 from "@angular/core";
|
|
6
4
|
import * as i1 from "@fortawesome/angular-fontawesome";
|
|
7
5
|
export class TabLabelIconComponent extends TabLabelContentBase {
|
|
8
|
-
get tabIcon() {
|
|
9
|
-
return isDefined(this.icon) ? this.icon : faCircle;
|
|
10
|
-
}
|
|
11
6
|
}
|
|
12
7
|
TabLabelIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
13
|
-
TabLabelIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabLabelIconComponent, selector: "sfc-tab-label-icon", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n <fa-icon [icon]=\"tabIcon\"></fa-icon>\r\n <span>{{label}}</span>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none;padding-bottom:1.25em;display:inline-block;transition:all .2s ease-in-out}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host.selected:not(.disabled),:host:hover:not(.disabled){color:#ffce54}:host.disabled{cursor:default;pointer-events:none}:host.disabled,:host-context(.sfc-default-theme) :host.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled{color:#656d78}:host .container{display:inline-flex;align-items:center;flex-flow:column wrap;justify-content:center;text-align:center;overflow:hidden;text-overflow:ellipsis}:host .container fa-icon{height:1.2em;margin-bottom:.2em}:host .container span{font-size:.8em}@media (max-width:
|
|
8
|
+
TabLabelIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabLabelIconComponent, selector: "sfc-tab-label-icon", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n <fa-icon [icon]=\"tabIcon\"></fa-icon>\r\n <span>{{label}}</span>\r\n <ng-content></ng-content>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none;padding-bottom:1.25em;display:inline-block;transition:all .2s ease-in-out}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host.selected:not(.disabled),:host:hover:not(.disabled){color:#ffce54}:host.disabled{cursor:default;pointer-events:none}:host.disabled,:host-context(.sfc-default-theme) :host.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled{color:#656d78}:host .container{display:inline-flex;align-items:center;flex-flow:column wrap;justify-content:center;text-align:center;overflow:hidden;text-overflow:ellipsis}:host .container fa-icon{height:1.2em;margin-bottom:.2em}:host .container span{font-size:.8em}@media (max-width: 425px){:host{padding-bottom:.6em}:host .container{padding:.8em;border-radius:.3em;text-overflow:initial}:host .container fa-icon{height:auto;margin-bottom:0}:host .container span{display:none}:host.selected .container,:host-context(.sfc-default-theme) :host.selected .container{background:#e6e9ed}:host-context(.sfc-dark-theme) :host.selected .container{background:#f5f7fa}}\n"], dependencies: [{ kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
|
|
14
9
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelIconComponent, decorators: [{
|
|
15
10
|
type: Component,
|
|
16
|
-
args: [{ selector: 'sfc-tab-label-icon', template: "<div class=\"container\">\r\n <fa-icon [icon]=\"tabIcon\"></fa-icon>\r\n <span>{{label}}</span>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none;padding-bottom:1.25em;display:inline-block;transition:all .2s ease-in-out}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host.selected:not(.disabled),:host:hover:not(.disabled){color:#ffce54}:host.disabled{cursor:default;pointer-events:none}:host.disabled,:host-context(.sfc-default-theme) :host.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled{color:#656d78}:host .container{display:inline-flex;align-items:center;flex-flow:column wrap;justify-content:center;text-align:center;overflow:hidden;text-overflow:ellipsis}:host .container fa-icon{height:1.2em;margin-bottom:.2em}:host .container span{font-size:.8em}@media (max-width:
|
|
11
|
+
args: [{ selector: 'sfc-tab-label-icon', template: "<div class=\"container\">\r\n <fa-icon [icon]=\"tabIcon\"></fa-icon>\r\n <span>{{label}}</span>\r\n <ng-content></ng-content>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none;padding-bottom:1.25em;display:inline-block;transition:all .2s ease-in-out}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host.selected:not(.disabled),:host:hover:not(.disabled){color:#ffce54}:host.disabled{cursor:default;pointer-events:none}:host.disabled,:host-context(.sfc-default-theme) :host.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled{color:#656d78}:host .container{display:inline-flex;align-items:center;flex-flow:column wrap;justify-content:center;text-align:center;overflow:hidden;text-overflow:ellipsis}:host .container fa-icon{height:1.2em;margin-bottom:.2em}:host .container span{font-size:.8em}@media (max-width: 425px){:host{padding-bottom:.6em}:host .container{padding:.8em;border-radius:.3em;text-overflow:initial}:host .container fa-icon{height:auto;margin-bottom:0}:host .container span{display:none}:host.selected .container,:host-context(.sfc-default-theme) :host.selected .container{background:#e6e9ed}:host-context(.sfc-dark-theme) :host.selected .container{background:#f5f7fa}}\n"] }]
|
|
17
12
|
}] });
|
|
18
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
13
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWxhYmVsLWljb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNmYy1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy90YWJzL3BhcnRzL2xhYmVscy90YWItbGFiZWwtaWNvbi90YWItbGFiZWwtaWNvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ZjLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3RhYnMvcGFydHMvbGFiZWxzL3RhYi1sYWJlbC1pY29uL3RhYi1sYWJlbC1pY29uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0scUNBQXFDLENBQUM7OztBQU8xRSxNQUFNLE9BQU8scUJBQ1gsU0FBUSxtQkFBbUI7O2tIQURoQixxQkFBcUI7c0dBQXJCLHFCQUFxQixpRkNSbEMsNElBSU07MkZESU8scUJBQXFCO2tCQUxqQyxTQUFTOytCQUNFLG9CQUFvQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBUYWJMYWJlbENvbnRlbnRCYXNlIH0gZnJvbSAnLi4vdGFiLWxhYmVsLWNvbnRlbnQtYmFzZS5jb21wb25lbnQnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzZmMtdGFiLWxhYmVsLWljb24nLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi90YWItbGFiZWwtaWNvbi5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vdGFiLWxhYmVsLWljb24uY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgVGFiTGFiZWxJY29uQ29tcG9uZW50XHJcbiAgZXh0ZW5kcyBUYWJMYWJlbENvbnRlbnRCYXNlIHtcclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiY29udGFpbmVyXCI+XHJcbiAgPGZhLWljb24gW2ljb25dPVwidGFiSWNvblwiPjwvZmEtaWNvbj5cclxuICA8c3Bhbj57e2xhYmVsfX08L3NwYW4+XHJcbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG48L2Rpdj4iXX0=
|