ngx-sfc-components 0.0.16 → 0.0.18
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/carousel/carousel.component.mjs +2 -2
- package/esm2020/lib/components/index.mjs +2 -1
- package/esm2020/lib/components/menu/dropdown/dropdown-menu.component.mjs +28 -3
- package/esm2020/lib/components/menu/dropdown/parts/item/dropdown-menu-item.component.mjs +2 -2
- package/esm2020/lib/components/menu/navigation/navigation-menu.component.mjs +2 -2
- package/esm2020/lib/components/menu/navigation/parts/item/navigation-menu-item.component.mjs +2 -2
- package/esm2020/lib/components/menu/side/parts/header/side-menu-header.component.mjs +2 -2
- package/esm2020/lib/components/menu/side/parts/item/content/side-menu-item-content.component.mjs +2 -2
- package/esm2020/lib/components/menu/side/parts/title/side-menu-title.component.mjs +2 -2
- package/esm2020/lib/components/menu/side/side-menu.component.mjs +2 -2
- package/esm2020/lib/components/progress/circle/progress-circle.component.mjs +13 -7
- package/esm2020/lib/components/progress/line/progress-line.component.mjs +10 -5
- 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 +4 -4
- package/esm2020/lib/components/table/parts/columns/selectable/selectable-table-column.component.mjs +2 -2
- 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/table/parts/toggle/columns-toggle.component.mjs +2 -2
- package/esm2020/lib/components/tabs/models/tab.model.mjs +1 -1
- package/esm2020/lib/components/tabs/parts/labels/tab-label-icon/tab-label-icon.component.mjs +2 -2
- package/esm2020/lib/components/tabs/parts/labels/tab-label-line/tab-label-line.component.mjs +3 -3
- package/esm2020/lib/components/tabs/tabs.component.mjs +3 -3
- package/esm2020/lib/components/timeline/parts/item/timeline-item.component.mjs +2 -2
- package/fesm2015/ngx-sfc-components.mjs +143 -77
- package/fesm2015/ngx-sfc-components.mjs.map +1 -1
- package/fesm2020/ngx-sfc-components.mjs +143 -77
- package/fesm2020/ngx-sfc-components.mjs.map +1 -1
- package/lib/components/index.d.ts +1 -0
- 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 +2 -2
- package/lib/components/tabs/parts/labels/tab-label-line/tab-label-line.component.d.ts +1 -1
- package/package.json +2 -2
|
@@ -71,10 +71,10 @@ class TabsComponent {
|
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabsComponent, deps: [{ token: TabService }], target: i0.ɵɵFactoryTarget.Component });
|
|
74
|
-
TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabsComponent, selector: "sfc-tabs", inputs: { tabs: "tabs", label: "label", slider: "slider", body: "body" }, providers: [TabService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n <div class=\"tabs-container\">\r\n <div class=\"tabs\">\r\n <div class=\"tab\" [style.width.%]=\"vm.tabWidth\" *ngFor=\"let tab of vm.tabs; index as index\"\r\n (click)=\"selectTab(tab, index)\">\r\n\r\n <sfc-template-content [referenceContent]=\"label\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Label\" [defaultContent]=\"defaultLabel\" [contextData]=\"tab\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultLabel>{{ tab.label }}</ng-template>\r\n </div>\r\n </div>\r\n\r\n <sfc-template-content [referenceContent]=\"slider\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Slider\" [contextData]=\"vm.sliderContextData\"></sfc-template-content>\r\n\r\n </div>\r\n\r\n <div class=\"body-container\">\r\n <ng-container *ngIf=\"vm.selectedTab\">\r\n\r\n <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Body\" [contextData]=\"vm.selectedTab.data\">\r\n </sfc-template-content>\r\n\r\n </ng-container>\r\n </div>\r\n</div>", styles: [":host{width:100%}:host .container .tabs{display:flex;flex-wrap:wrap}:host .container .tabs .tab{text-align:center}:host .container .tabs .tab,:host-context(.sfc-default-theme)
|
|
74
|
+
TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabsComponent, selector: "sfc-tabs", inputs: { tabs: "tabs", label: "label", slider: "slider", body: "body" }, providers: [TabService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n <div class=\"tabs-container\">\r\n <div class=\"tabs\">\r\n <div class=\"tab\" [style.width.%]=\"vm.tabWidth\" *ngFor=\"let tab of vm.tabs; index as index\"\r\n (click)=\"selectTab(tab, index)\">\r\n\r\n <sfc-template-content [referenceContent]=\"label\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Label\" [defaultContent]=\"defaultLabel\" [contextData]=\"tab\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultLabel>{{ tab.label }}</ng-template>\r\n </div>\r\n </div>\r\n\r\n <sfc-template-content [referenceContent]=\"slider\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Slider\" [contextData]=\"vm.sliderContextData\"></sfc-template-content>\r\n\r\n </div>\r\n\r\n <div class=\"body-container\">\r\n <ng-container *ngIf=\"vm.selectedTab\">\r\n\r\n <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Body\" [contextData]=\"vm.selectedTab.data\">\r\n </sfc-template-content>\r\n\r\n </ng-container>\r\n </div>\r\n</div>", styles: [":host{width:100%}:host .container .tabs{display:flex;flex-wrap:wrap}:host .container .tabs .tab{text-align:center}:host .container .tabs .tab,:host-context(.sfc-default-theme) :host .container .tabs .tab{color:#545e61}:host-context(.sfc-dark-theme) :host .container .tabs .tab{color:#fff}:host .container .body-container{margin-top:.6em}:host .container .body-container,:host-context(.sfc-default-theme) :host .container .body-container{color:#545e61}:host-context(.sfc-dark-theme) :host .container .body-container{color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
|
|
75
75
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabsComponent, decorators: [{
|
|
76
76
|
type: Component,
|
|
77
|
-
args: [{ selector: 'sfc-tabs', providers: [TabService], template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n <div class=\"tabs-container\">\r\n <div class=\"tabs\">\r\n <div class=\"tab\" [style.width.%]=\"vm.tabWidth\" *ngFor=\"let tab of vm.tabs; index as index\"\r\n (click)=\"selectTab(tab, index)\">\r\n\r\n <sfc-template-content [referenceContent]=\"label\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Label\" [defaultContent]=\"defaultLabel\" [contextData]=\"tab\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultLabel>{{ tab.label }}</ng-template>\r\n </div>\r\n </div>\r\n\r\n <sfc-template-content [referenceContent]=\"slider\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Slider\" [contextData]=\"vm.sliderContextData\"></sfc-template-content>\r\n\r\n </div>\r\n\r\n <div class=\"body-container\">\r\n <ng-container *ngIf=\"vm.selectedTab\">\r\n\r\n <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Body\" [contextData]=\"vm.selectedTab.data\">\r\n </sfc-template-content>\r\n\r\n </ng-container>\r\n </div>\r\n</div>", styles: [":host{width:100%}:host .container .tabs{display:flex;flex-wrap:wrap}:host .container .tabs .tab{text-align:center}:host .container .tabs .tab,:host-context(.sfc-default-theme)
|
|
77
|
+
args: [{ selector: 'sfc-tabs', providers: [TabService], template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n <div class=\"tabs-container\">\r\n <div class=\"tabs\">\r\n <div class=\"tab\" [style.width.%]=\"vm.tabWidth\" *ngFor=\"let tab of vm.tabs; index as index\"\r\n (click)=\"selectTab(tab, index)\">\r\n\r\n <sfc-template-content [referenceContent]=\"label\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Label\" [defaultContent]=\"defaultLabel\" [contextData]=\"tab\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultLabel>{{ tab.label }}</ng-template>\r\n </div>\r\n </div>\r\n\r\n <sfc-template-content [referenceContent]=\"slider\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Slider\" [contextData]=\"vm.sliderContextData\"></sfc-template-content>\r\n\r\n </div>\r\n\r\n <div class=\"body-container\">\r\n <ng-container *ngIf=\"vm.selectedTab\">\r\n\r\n <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n [templateType]=\"TabsTemplate.Body\" [contextData]=\"vm.selectedTab.data\">\r\n </sfc-template-content>\r\n\r\n </ng-container>\r\n </div>\r\n</div>", styles: [":host{width:100%}:host .container .tabs{display:flex;flex-wrap:wrap}:host .container .tabs .tab{text-align:center}:host .container .tabs .tab,:host-context(.sfc-default-theme) :host .container .tabs .tab{color:#545e61}:host-context(.sfc-dark-theme) :host .container .tabs .tab{color:#fff}:host .container .body-container{margin-top:.6em}:host .container .body-container,:host-context(.sfc-default-theme) :host .container .body-container{color:#545e61}:host-context(.sfc-dark-theme) :host .container .body-container{color:#fff}\n"] }]
|
|
78
78
|
}], ctorParameters: function () { return [{ type: TabService }]; }, propDecorators: { tabs: [{
|
|
79
79
|
type: Input
|
|
80
80
|
}], label: [{
|
|
@@ -117,10 +117,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
117
117
|
class TabLabelLineComponent extends TabLabelContentBase {
|
|
118
118
|
}
|
|
119
119
|
TabLabelLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelLineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
120
|
-
TabLabelLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabLabelLineComponent, selector: "sfc-tab-label-line", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <span>{{label}}</span>\r\n </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none}:host,:host-context(.sfc-default-theme)
|
|
120
|
+
TabLabelLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabLabelLineComponent, selector: "sfc-tab-label-line", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <span>{{label}}</span>\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}: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.selected:not(.disabled),:host:hover:not(.disabled){color:#ffce54}:host .container{width:100%;display:flex;justify-content:center;align-items:center;transition:color .2s ease;border-bottom:1px solid #e6e9ed}:host .container .content{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;padding:1.25em 0}:host .container .content fa-icon{margin-right:.18em}@media (max-width: 430px){:host .container .content fa-icon{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
|
|
121
121
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelLineComponent, decorators: [{
|
|
122
122
|
type: Component,
|
|
123
|
-
args: [{ selector: 'sfc-tab-label-line', template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <span>{{label}}</span>\r\n </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none}:host,:host-context(.sfc-default-theme)
|
|
123
|
+
args: [{ selector: 'sfc-tab-label-line', template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <span>{{label}}</span>\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}: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.selected:not(.disabled),:host:hover:not(.disabled){color:#ffce54}:host .container{width:100%;display:flex;justify-content:center;align-items:center;transition:color .2s ease;border-bottom:1px solid #e6e9ed}:host .container .content{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;padding:1.25em 0}:host .container .content fa-icon{margin-right:.18em}@media (max-width: 430px){:host .container .content fa-icon{display:none}}\n"] }]
|
|
124
124
|
}] });
|
|
125
125
|
|
|
126
126
|
class TabLabelIconComponent extends TabLabelContentBase {
|
|
@@ -129,10 +129,10 @@ class TabLabelIconComponent extends TabLabelContentBase {
|
|
|
129
129
|
}
|
|
130
130
|
}
|
|
131
131
|
TabLabelIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
132
|
-
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)
|
|
132
|
+
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: 430px){: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: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
|
|
133
133
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelIconComponent, decorators: [{
|
|
134
134
|
type: Component,
|
|
135
|
-
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)
|
|
135
|
+
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: 430px){: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"] }]
|
|
136
136
|
}] });
|
|
137
137
|
|
|
138
138
|
class TabSliderBase {
|
|
@@ -199,10 +199,10 @@ class SideMenuHeaderComponent {
|
|
|
199
199
|
}
|
|
200
200
|
}
|
|
201
201
|
SideMenuHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
202
|
-
SideMenuHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: { label: "label", open: "open" }, outputs: { toggle: "toggle" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n <span>{{label}}</span>\r\n <sfc-hamburger [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</li>", styles: [":host li{display:flex;align-items:center;justify-content:center;padding:1.25em}:host li span{display:none;text-transform:uppercase;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li span,:host-context(.sfc-default-theme)
|
|
202
|
+
SideMenuHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: { label: "label", open: "open" }, outputs: { toggle: "toggle" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n <span>{{label}}</span>\r\n <sfc-hamburger [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</li>", styles: [":host li{display:flex;align-items:center;justify-content:center;padding:1.25em}:host li span{display:none;text-transform:uppercase;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li span,:host-context(.sfc-default-theme) :host li span{color:#545e61}:host-context(.sfc-dark-theme) :host li span{color:#fff}:host.open li{justify-content:space-between}:host.open li span{display:block}\n"], dependencies: [{ kind: "component", type: i1$1.HamburgerComponent, selector: "sfc-hamburger" }] });
|
|
203
203
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuHeaderComponent, decorators: [{
|
|
204
204
|
type: Component,
|
|
205
|
-
args: [{ selector: 'sfc-side-menu-header', template: "<li>\r\n <span>{{label}}</span>\r\n <sfc-hamburger [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</li>", styles: [":host li{display:flex;align-items:center;justify-content:center;padding:1.25em}:host li span{display:none;text-transform:uppercase;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li span,:host-context(.sfc-default-theme)
|
|
205
|
+
args: [{ selector: 'sfc-side-menu-header', template: "<li>\r\n <span>{{label}}</span>\r\n <sfc-hamburger [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</li>", styles: [":host li{display:flex;align-items:center;justify-content:center;padding:1.25em}:host li span{display:none;text-transform:uppercase;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li span,:host-context(.sfc-default-theme) :host li span{color:#545e61}:host-context(.sfc-dark-theme) :host li span{color:#fff}:host.open li{justify-content:space-between}:host.open li span{display:block}\n"] }]
|
|
206
206
|
}], propDecorators: { label: [{
|
|
207
207
|
type: Input
|
|
208
208
|
}], open: [{
|
|
@@ -238,10 +238,10 @@ class SideMenuItemContentComponent {
|
|
|
238
238
|
}
|
|
239
239
|
}
|
|
240
240
|
SideMenuItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
241
|
-
SideMenuItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuItemContentComponent, selector: "sfc-side-menu-item-content", inputs: { item: "item", active: "active", open: "open", openParent: "openParent", hasChildren: "hasChildren" }, outputs: { selectItem: "selectItem" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n <div class=\"item-container\">\r\n <div class=\"item\">\r\n <a>\r\n <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n </a>\r\n </div>\r\n <span class=\"label\">{{item.label}}</span>\r\n </div>\r\n\r\n <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n </div>\r\n</li>", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between}:host li,:host-context(.sfc-default-theme)
|
|
241
|
+
SideMenuItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuItemContentComponent, selector: "sfc-side-menu-item-content", inputs: { item: "item", active: "active", open: "open", openParent: "openParent", hasChildren: "hasChildren" }, outputs: { selectItem: "selectItem" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n <div class=\"item-container\">\r\n <div class=\"item\">\r\n <a>\r\n <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n </a>\r\n </div>\r\n <span class=\"label\">{{item.label}}</span>\r\n </div>\r\n\r\n <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n </div>\r\n</li>", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#fff}:host li .expand-container{visibility:hidden;opacity:0;transition:color .5s ease;width:0}:host li .expand-container>fa-icon{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{width:2em;height:1.9em;display:flex;justify-content:center;border-radius:.7em;align-items:center}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;font-size:1.3em;padding:.3em;transition:background-color .5s ease,color .5s ease,margin-right .3s ease-in-out}:host li .item-container .item a>fa-icon{font-size:1em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .5s,visibility .3s,opacity .5s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host.active li,:host:hover li{color:#fff}:host.active li .item-container .item a,:host:hover li .item-container .item a{background-color:#ffce54;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label,:host:hover li .item-container .label{color:#ffce54}:host.active li .expand-container,:host:hover li .expand-container{color:#ffce54}:host.open li .item-container .item a{margin-right:1em}:host.open li .item-container .label{visibility:visible;opacity:1;width:auto}:host.open li .expand-container{width:auto;visibility:visible;opacity:1}:host :host-context(.children) li{margin:.2em 0}:host :host-context(.children) li .item-container .item a{padding:.3em;border-radius:.35em}:host :host-context(.children) li .item-container .item a>fa-icon{font-size:.5em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
|
|
242
242
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuItemContentComponent, decorators: [{
|
|
243
243
|
type: Component,
|
|
244
|
-
args: [{ selector: 'sfc-side-menu-item-content', template: "<li>\r\n <div class=\"item-container\">\r\n <div class=\"item\">\r\n <a>\r\n <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n </a>\r\n </div>\r\n <span class=\"label\">{{item.label}}</span>\r\n </div>\r\n\r\n <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n </div>\r\n</li>", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between}:host li,:host-context(.sfc-default-theme)
|
|
244
|
+
args: [{ selector: 'sfc-side-menu-item-content', template: "<li>\r\n <div class=\"item-container\">\r\n <div class=\"item\">\r\n <a>\r\n <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n </a>\r\n </div>\r\n <span class=\"label\">{{item.label}}</span>\r\n </div>\r\n\r\n <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n </div>\r\n</li>", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#fff}:host li .expand-container{visibility:hidden;opacity:0;transition:color .5s ease;width:0}:host li .expand-container>fa-icon{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{width:2em;height:1.9em;display:flex;justify-content:center;border-radius:.7em;align-items:center}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;font-size:1.3em;padding:.3em;transition:background-color .5s ease,color .5s ease,margin-right .3s ease-in-out}:host li .item-container .item a>fa-icon{font-size:1em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .5s,visibility .3s,opacity .5s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host.active li,:host:hover li{color:#fff}:host.active li .item-container .item a,:host:hover li .item-container .item a{background-color:#ffce54;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label,:host:hover li .item-container .label{color:#ffce54}:host.active li .expand-container,:host:hover li .expand-container{color:#ffce54}:host.open li .item-container .item a{margin-right:1em}:host.open li .item-container .label{visibility:visible;opacity:1;width:auto}:host.open li .expand-container{width:auto;visibility:visible;opacity:1}:host :host-context(.children) li{margin:.2em 0}:host :host-context(.children) li .item-container .item a{padding:.3em;border-radius:.35em}:host :host-context(.children) li .item-container .item a>fa-icon{font-size:.5em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"] }]
|
|
245
245
|
}], propDecorators: { item: [{
|
|
246
246
|
type: Input
|
|
247
247
|
}], active: [{
|
|
@@ -347,10 +347,10 @@ class SideMenuTitleComponent {
|
|
|
347
347
|
}
|
|
348
348
|
}
|
|
349
349
|
SideMenuTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
350
|
-
SideMenuTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuTitleComponent, selector: "sfc-side-menu-title", inputs: { label: "label", open: "open" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<sfc-delimeter></sfc-delimeter>\r\n<li><span>{{label}}</span></li>", styles: [":host li{text-transform:uppercase;font-weight:700;font-size:.65em;padding:1.25em 0;transform:translate(7%);display:inline-block;transition:transform .5s ease-in-out}:host li,:host-context(.sfc-default-theme)
|
|
350
|
+
SideMenuTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuTitleComponent, selector: "sfc-side-menu-title", inputs: { label: "label", open: "open" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<sfc-delimeter></sfc-delimeter>\r\n<li><span>{{label}}</span></li>", styles: [":host li{text-transform:uppercase;font-weight:700;font-size:.65em;padding:1.25em 0;transform:translate(7%);display:inline-block;transition:transform .5s ease-in-out}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#fff}:host.open li{transform:translate(30%)}\n"], dependencies: [{ kind: "component", type: i1$1.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }] });
|
|
351
351
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuTitleComponent, decorators: [{
|
|
352
352
|
type: Component,
|
|
353
|
-
args: [{ selector: 'sfc-side-menu-title', template: "<sfc-delimeter></sfc-delimeter>\r\n<li><span>{{label}}</span></li>", styles: [":host li{text-transform:uppercase;font-weight:700;font-size:.65em;padding:1.25em 0;transform:translate(7%);display:inline-block;transition:transform .5s ease-in-out}:host li,:host-context(.sfc-default-theme)
|
|
353
|
+
args: [{ selector: 'sfc-side-menu-title', template: "<sfc-delimeter></sfc-delimeter>\r\n<li><span>{{label}}</span></li>", styles: [":host li{text-transform:uppercase;font-weight:700;font-size:.65em;padding:1.25em 0;transform:translate(7%);display:inline-block;transition:transform .5s ease-in-out}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#fff}:host.open li{transform:translate(30%)}\n"] }]
|
|
354
354
|
}], propDecorators: { label: [{
|
|
355
355
|
type: Input
|
|
356
356
|
}], open: [{
|
|
@@ -387,10 +387,10 @@ class SideMenuComponent {
|
|
|
387
387
|
}
|
|
388
388
|
}
|
|
389
389
|
SideMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
390
|
-
SideMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuComponent, selector: "sfc-side-menu", inputs: { model: "model" }, outputs: { selected: "selected" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n <ul>\r\n <sfc-side-menu-header [open]=\"open\" (toggle)=\"open =!open\"></sfc-side-menu-header>\r\n\r\n <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n (selectItem)=\"onItemSelect($event)\">\r\n </sfc-side-menu-item>\r\n\r\n <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n </sfc-side-menu-title>\r\n </ng-container>\r\n </ul>\r\n</div>", styles: [":host .container{width:5em;height:inherit;overflow:hidden;transition:width .5s ease-in-out}:host .container
|
|
390
|
+
SideMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuComponent, selector: "sfc-side-menu", inputs: { model: "model" }, outputs: { selected: "selected" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n <ul>\r\n <sfc-side-menu-header [open]=\"open\" (toggle)=\"open =!open\"></sfc-side-menu-header>\r\n\r\n <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n (selectItem)=\"onItemSelect($event)\">\r\n </sfc-side-menu-item>\r\n\r\n <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n </sfc-side-menu-title>\r\n </ng-container>\r\n </ul>\r\n</div>", styles: [":host .container{width:5em;height:inherit;overflow:hidden;transition:background .5s ease,width .5s ease-in-out}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}\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: "component", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: ["label", "open"], outputs: ["toggle"] }, { kind: "component", type: SideMenuItemComponent, selector: "sfc-side-menu-item", inputs: ["item", "open"], outputs: ["selectItem"] }, { kind: "component", type: SideMenuTitleComponent, selector: "sfc-side-menu-title", inputs: ["label", "open"] }] });
|
|
391
391
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuComponent, decorators: [{
|
|
392
392
|
type: Component,
|
|
393
|
-
args: [{ selector: 'sfc-side-menu', template: "<div class=\"container\">\r\n <ul>\r\n <sfc-side-menu-header [open]=\"open\" (toggle)=\"open =!open\"></sfc-side-menu-header>\r\n\r\n <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n (selectItem)=\"onItemSelect($event)\">\r\n </sfc-side-menu-item>\r\n\r\n <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n </sfc-side-menu-title>\r\n </ng-container>\r\n </ul>\r\n</div>", styles: [":host .container{width:5em;height:inherit;overflow:hidden;transition:width .5s ease-in-out}:host .container
|
|
393
|
+
args: [{ selector: 'sfc-side-menu', template: "<div class=\"container\">\r\n <ul>\r\n <sfc-side-menu-header [open]=\"open\" (toggle)=\"open =!open\"></sfc-side-menu-header>\r\n\r\n <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n (selectItem)=\"onItemSelect($event)\">\r\n </sfc-side-menu-item>\r\n\r\n <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n </sfc-side-menu-title>\r\n </ng-container>\r\n </ul>\r\n</div>", styles: [":host .container{width:5em;height:inherit;overflow:hidden;transition:background .5s ease,width .5s ease-in-out}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}\n"] }]
|
|
394
394
|
}], propDecorators: { model: [{
|
|
395
395
|
type: Input
|
|
396
396
|
}], selected: [{
|
|
@@ -411,10 +411,10 @@ class DropdownMenuItemComponent {
|
|
|
411
411
|
}
|
|
412
412
|
}
|
|
413
413
|
DropdownMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
414
|
-
DropdownMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownMenuItemComponent, selector: "sfc-dropdown-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.active": "this._active" } }, ngImport: i0, template: "<li>\r\n <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n <a>{{item.label}}</a>\r\n</li>\r\n\r\n<sfc-delimeter *ngIf=\"item.delimeter\"></sfc-delimeter>", styles: [":host{display:flex;flex-direction:column;padding:.1em 0}:host li{color:#545e61;display:flex;align-items:center;flex-wrap:wrap;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li:hover,:host li:focus-within{background:#f5f7fa;border-color:#f5f7fa;color:#2bbbad;cursor:pointer;outline:none}:host li sfc-icon{padding-right:.625em;width:10%}:host ::ng-deep sfc-delimeter,:host-context(.sfc-default-theme)
|
|
414
|
+
DropdownMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownMenuItemComponent, selector: "sfc-dropdown-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.active": "this._active" } }, ngImport: i0, template: "<li>\r\n <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n <a>{{item.label}}</a>\r\n</li>\r\n\r\n<sfc-delimeter *ngIf=\"item.delimeter\"></sfc-delimeter>", styles: [":host{display:flex;flex-direction:column;padding:.1em 0}:host li{color:#545e61;display:flex;align-items:center;flex-wrap:wrap;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none;transition:color .5s ease,border-color .5s ease,background .5s ease}:host li:hover,:host li:focus-within{background:#f5f7fa;border-color:#f5f7fa;color:#2bbbad;cursor:pointer;outline:none}:host li sfc-icon{padding-right:.625em;width:10%}:host ::ng-deep sfc-delimeter,:host-context(.sfc-default-theme) :host ::ng-deep sfc-delimeter{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host ::ng-deep sfc-delimeter{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host.active li{background:#e6e9ed;border-color:#e6e9ed;color:#2bbbad}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: i1$1.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
|
|
415
415
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownMenuItemComponent, decorators: [{
|
|
416
416
|
type: Component,
|
|
417
|
-
args: [{ selector: 'sfc-dropdown-menu-item', template: "<li>\r\n <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n <a>{{item.label}}</a>\r\n</li>\r\n\r\n<sfc-delimeter *ngIf=\"item.delimeter\"></sfc-delimeter>", styles: [":host{display:flex;flex-direction:column;padding:.1em 0}:host li{color:#545e61;display:flex;align-items:center;flex-wrap:wrap;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li:hover,:host li:focus-within{background:#f5f7fa;border-color:#f5f7fa;color:#2bbbad;cursor:pointer;outline:none}:host li sfc-icon{padding-right:.625em;width:10%}:host ::ng-deep sfc-delimeter,:host-context(.sfc-default-theme)
|
|
417
|
+
args: [{ selector: 'sfc-dropdown-menu-item', template: "<li>\r\n <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n <a>{{item.label}}</a>\r\n</li>\r\n\r\n<sfc-delimeter *ngIf=\"item.delimeter\"></sfc-delimeter>", styles: [":host{display:flex;flex-direction:column;padding:.1em 0}:host li{color:#545e61;display:flex;align-items:center;flex-wrap:wrap;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none;transition:color .5s ease,border-color .5s ease,background .5s ease}:host li:hover,:host li:focus-within{background:#f5f7fa;border-color:#f5f7fa;color:#2bbbad;cursor:pointer;outline:none}:host li sfc-icon{padding-right:.625em;width:10%}:host ::ng-deep sfc-delimeter,:host-context(.sfc-default-theme) :host ::ng-deep sfc-delimeter{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host ::ng-deep sfc-delimeter{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host.active li{background:#e6e9ed;border-color:#e6e9ed;color:#2bbbad}\n"] }]
|
|
418
418
|
}], propDecorators: { item: [{
|
|
419
419
|
type: Input
|
|
420
420
|
}], _active: [{
|
|
@@ -473,10 +473,34 @@ class DropdownMenuComponent {
|
|
|
473
473
|
}
|
|
474
474
|
}
|
|
475
475
|
DropdownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownMenuComponent, deps: [{ token: i1$1.ResizeService }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Component });
|
|
476
|
-
DropdownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownMenuComponent, selector: "sfc-dropdown-menu", inputs: { items: "items", icon: "icon", defaultDots: "defaultDots", label: "label", hideOnClick: "hideOnClick", hideOnClickOutside: "hideOnClickOutside", bordered: "bordered", position: "position", open: "open", autoResize: "autoResize" }, outputs: { selected: "selected" }, host: { properties: { "class.bordered": "this.bordered", "class": "this.position", "class.open": "this.open" } }, ngImport: i0, template: "<ul [sfcClickOutside]=\"hideOnClickOutside\" (action)=\"onClickOutside($event)\">\r\n <li>\r\n <div class=\"container\" (click)=\"open = !open\">\r\n <span *ngIf=\"label\">{{label}}</span>\r\n <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <sfc-dots *ngIf=\"showDots\" [open]=\"open\"></sfc-dots>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <ul *ngIf=\"items.length\" class=\"dropdown-container\">\r\n <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n </sfc-dropdown-menu-item>\r\n </ul
|
|
476
|
+
DropdownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownMenuComponent, selector: "sfc-dropdown-menu", inputs: { items: "items", icon: "icon", defaultDots: "defaultDots", label: "label", hideOnClick: "hideOnClick", hideOnClickOutside: "hideOnClickOutside", bordered: "bordered", position: "position", open: "open", autoResize: "autoResize" }, outputs: { selected: "selected" }, host: { properties: { "class.bordered": "this.bordered", "class": "this.position", "class.open": "this.open" } }, ngImport: i0, template: "<ul [sfcClickOutside]=\"hideOnClickOutside\" (action)=\"onClickOutside($event)\">\r\n <li>\r\n <div class=\"container\" (click)=\"open = !open\">\r\n <span *ngIf=\"label\">{{label}}</span>\r\n <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <sfc-dots *ngIf=\"showDots\" [open]=\"open\"></sfc-dots>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <ul *ngIf=\"items.length\" [@openClose]=\"open\" class=\"dropdown-container\">\r\n <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n </sfc-dropdown-menu-item>\r\n </ul>\r\n </li>\r\n</ul>", styles: [":host{display:inline-flex}:host ul{list-style:none;margin:0;padding-left:0}:host ul li{position:relative}:host ul li .container{display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .5s ease;padding:.3em}:host ul li .container,:host-context(.sfc-default-theme) :host ul li .container{color:#545e61}:host-context(.sfc-dark-theme) :host ul li .container{color:#fff}:host ul li .container span,:host ul li .container fa-icon{font-size:.8em;font-weight:700}:host ul li .container span~fa-icon{margin-left:.3em}:host ul li .container:hover{color:#ffce54}:host ul li .dropdown-container{flex-direction:column;width:max-content;background:#fff;position:absolute;right:0;transition:opacity .5s ease;margin-top:1em;display:none;padding:.6em;border:.0063em solid #f5f7fa;border-radius:.1875em;box-shadow:0 .125em .625em;z-index:9999}:host ul li .dropdown-container,:host-context(.sfc-default-theme) :host ul li .dropdown-container{color:#e6e9ed}:host-context(.sfc-dark-theme) :host ul li .dropdown-container{color:#656d78}:host.open ul li .dropdown-container{display:flex}:host.bordered ul li .container{border:.15em solid;border-radius:.3em}:host.bordered ul li .container,:host-context(.sfc-default-theme) :host.bordered ul li .container{border-color:#545e61}:host-context(.sfc-dark-theme) :host.bordered ul li .container{border-color:#fff}:host.bordered ul li .container:hover{border-color:#ffce54}:host.bordered ul li .container:hover ::ng-deep sfc-dots .dot{background:#ffce54}:host.top ul li .dropdown-container{bottom:0;margin-bottom:2.18em;margin-top:0}:host.center ul li .dropdown-container{left:50%;transform:translate(-50%)}:host.left ul li .dropdown-container{right:0}:host.right ul li .dropdown-container{left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i1$1.ClickOutsideDirective, selector: "[sfcClickOutside]", inputs: ["sfcClickOutside"], outputs: ["action"] }, { kind: "component", type: i1$1.DotsComponent, selector: "sfc-dots", inputs: ["open", "direction"] }, { kind: "component", type: DropdownMenuItemComponent, selector: "sfc-dropdown-menu-item", inputs: ["item"] }], animations: [
|
|
477
|
+
trigger('openClose', [
|
|
478
|
+
state('true', style({
|
|
479
|
+
opacity: 1
|
|
480
|
+
})),
|
|
481
|
+
state('false', style({
|
|
482
|
+
opacity: 0,
|
|
483
|
+
})),
|
|
484
|
+
transition('true <=> false', [
|
|
485
|
+
animate('0.5s')
|
|
486
|
+
])
|
|
487
|
+
])
|
|
488
|
+
] });
|
|
477
489
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownMenuComponent, decorators: [{
|
|
478
490
|
type: Component,
|
|
479
|
-
args: [{ selector: 'sfc-dropdown-menu',
|
|
491
|
+
args: [{ selector: 'sfc-dropdown-menu', animations: [
|
|
492
|
+
trigger('openClose', [
|
|
493
|
+
state('true', style({
|
|
494
|
+
opacity: 1
|
|
495
|
+
})),
|
|
496
|
+
state('false', style({
|
|
497
|
+
opacity: 0,
|
|
498
|
+
})),
|
|
499
|
+
transition('true <=> false', [
|
|
500
|
+
animate('0.5s')
|
|
501
|
+
])
|
|
502
|
+
])
|
|
503
|
+
], template: "<ul [sfcClickOutside]=\"hideOnClickOutside\" (action)=\"onClickOutside($event)\">\r\n <li>\r\n <div class=\"container\" (click)=\"open = !open\">\r\n <span *ngIf=\"label\">{{label}}</span>\r\n <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <sfc-dots *ngIf=\"showDots\" [open]=\"open\"></sfc-dots>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <ul *ngIf=\"items.length\" [@openClose]=\"open\" class=\"dropdown-container\">\r\n <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n </sfc-dropdown-menu-item>\r\n </ul>\r\n </li>\r\n</ul>", styles: [":host{display:inline-flex}:host ul{list-style:none;margin:0;padding-left:0}:host ul li{position:relative}:host ul li .container{display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .5s ease;padding:.3em}:host ul li .container,:host-context(.sfc-default-theme) :host ul li .container{color:#545e61}:host-context(.sfc-dark-theme) :host ul li .container{color:#fff}:host ul li .container span,:host ul li .container fa-icon{font-size:.8em;font-weight:700}:host ul li .container span~fa-icon{margin-left:.3em}:host ul li .container:hover{color:#ffce54}:host ul li .dropdown-container{flex-direction:column;width:max-content;background:#fff;position:absolute;right:0;transition:opacity .5s ease;margin-top:1em;display:none;padding:.6em;border:.0063em solid #f5f7fa;border-radius:.1875em;box-shadow:0 .125em .625em;z-index:9999}:host ul li .dropdown-container,:host-context(.sfc-default-theme) :host ul li .dropdown-container{color:#e6e9ed}:host-context(.sfc-dark-theme) :host ul li .dropdown-container{color:#656d78}:host.open ul li .dropdown-container{display:flex}:host.bordered ul li .container{border:.15em solid;border-radius:.3em}:host.bordered ul li .container,:host-context(.sfc-default-theme) :host.bordered ul li .container{border-color:#545e61}:host-context(.sfc-dark-theme) :host.bordered ul li .container{border-color:#fff}:host.bordered ul li .container:hover{border-color:#ffce54}:host.bordered ul li .container:hover ::ng-deep sfc-dots .dot{background:#ffce54}:host.top ul li .dropdown-container{bottom:0;margin-bottom:2.18em;margin-top:0}:host.center ul li .dropdown-container{left:50%;transform:translate(-50%)}:host.left ul li .dropdown-container{right:0}:host.right ul li .dropdown-container{left:0}\n"] }]
|
|
480
504
|
}], ctorParameters: function () {
|
|
481
505
|
return [{ type: i1$1.ResizeService }, { type: Window, decorators: [{
|
|
482
506
|
type: Inject,
|
|
@@ -528,10 +552,10 @@ class NavigationMenuItemComponent {
|
|
|
528
552
|
}
|
|
529
553
|
}
|
|
530
554
|
NavigationMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavigationMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
531
|
-
NavigationMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NavigationMenuItemComponent, selector: "sfc-navigation-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n <span>{{item.label}}</span>\r\n</div>", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;transition:color .2s ease-in-out}:host,:host-context(.sfc-default-theme)
|
|
555
|
+
NavigationMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NavigationMenuItemComponent, selector: "sfc-navigation-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n <span>{{item.label}}</span>\r\n</div>", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;transition:color .2s ease-in-out}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host .container{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1em .3em;margin:.625em;width:100%;border-radius:.625em;transition:background .2s ease-in-out}:host .container fa-icon{font-size:1.5em}:host .container span{font-size:1em;font-weight:700;margin-top:.625em;text-align:center}:host:hover,:host.active{color:#fff}:host:hover .container,:host.active .container{background:#ffce54}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
|
|
532
556
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavigationMenuItemComponent, decorators: [{
|
|
533
557
|
type: Component,
|
|
534
|
-
args: [{ selector: 'sfc-navigation-menu-item', template: "<div class=\"container\">\r\n <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n <span>{{item.label}}</span>\r\n</div>", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;transition:color .2s ease-in-out}:host,:host-context(.sfc-default-theme)
|
|
558
|
+
args: [{ selector: 'sfc-navigation-menu-item', template: "<div class=\"container\">\r\n <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n <span>{{item.label}}</span>\r\n</div>", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;transition:color .2s ease-in-out}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host .container{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1em .3em;margin:.625em;width:100%;border-radius:.625em;transition:background .2s ease-in-out}:host .container fa-icon{font-size:1.5em}:host .container span{font-size:1em;font-weight:700;margin-top:.625em;text-align:center}:host:hover,:host.active{color:#fff}:host:hover .container,:host.active .container{background:#ffce54}\n"] }]
|
|
535
559
|
}], propDecorators: { item: [{
|
|
536
560
|
type: Input
|
|
537
561
|
}], active: [{
|
|
@@ -554,10 +578,10 @@ class NavigationMenuComponent {
|
|
|
554
578
|
}
|
|
555
579
|
}
|
|
556
580
|
NavigationMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
557
|
-
NavigationMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NavigationMenuComponent, selector: "sfc-navigation-menu", inputs: { items: "items" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"items\">\r\n <sfc-navigation-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n </sfc-navigation-menu-item>\r\n </div>\r\n</div>", styles: [":host .container,:host-context(.sfc-default-theme)
|
|
581
|
+
NavigationMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NavigationMenuComponent, selector: "sfc-navigation-menu", inputs: { items: "items" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"items\">\r\n <sfc-navigation-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n </sfc-navigation-menu-item>\r\n </div>\r\n</div>", styles: [":host .container,:host-context(.sfc-default-theme) :host .container{background:#f5f7fa}:host-context(.sfc-dark-theme) :host .container{background:#1b1d1f}:host .container .items{display:flex;flex-wrap:wrap;padding:.625em}:host .container .items sfc-navigation-menu-item{flex:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NavigationMenuItemComponent, selector: "sfc-navigation-menu-item", inputs: ["item"] }] });
|
|
558
582
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavigationMenuComponent, decorators: [{
|
|
559
583
|
type: Component,
|
|
560
|
-
args: [{ selector: 'sfc-navigation-menu', template: "<div class=\"container\">\r\n <div class=\"items\">\r\n <sfc-navigation-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n </sfc-navigation-menu-item>\r\n </div>\r\n</div>", styles: [":host .container,:host-context(.sfc-default-theme)
|
|
584
|
+
args: [{ selector: 'sfc-navigation-menu', template: "<div class=\"container\">\r\n <div class=\"items\">\r\n <sfc-navigation-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n </sfc-navigation-menu-item>\r\n </div>\r\n</div>", styles: [":host .container,:host-context(.sfc-default-theme) :host .container{background:#f5f7fa}:host-context(.sfc-dark-theme) :host .container{background:#1b1d1f}:host .container .items{display:flex;flex-wrap:wrap;padding:.625em}:host .container .items sfc-navigation-menu-item{flex:50%}\n"] }]
|
|
561
585
|
}], propDecorators: { items: [{
|
|
562
586
|
type: Input
|
|
563
587
|
}], selected: [{
|
|
@@ -782,10 +806,10 @@ class AvatarComponent {
|
|
|
782
806
|
}
|
|
783
807
|
}
|
|
784
808
|
AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
785
|
-
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)
|
|
809
|
+
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: StarsComponent, selector: "sfc-stars", inputs: ["value", "count"] }] });
|
|
786
810
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
787
811
|
type: Component,
|
|
788
|
-
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)
|
|
812
|
+
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"] }]
|
|
789
813
|
}], propDecorators: { radius: [{
|
|
790
814
|
type: Input
|
|
791
815
|
}], stroke: [{
|
|
@@ -818,39 +842,70 @@ var ProgressColor;
|
|
|
818
842
|
ProgressColor["MAX_HIGH"] = "#8CC152";
|
|
819
843
|
})(ProgressColor || (ProgressColor = {}));
|
|
820
844
|
|
|
845
|
+
function getProgressColorDefaultFunc(value) {
|
|
846
|
+
if (value < 12) {
|
|
847
|
+
return ProgressColor.MIN_LOW;
|
|
848
|
+
}
|
|
849
|
+
else if (value >= 12 && value < 24) {
|
|
850
|
+
return ProgressColor.LOW;
|
|
851
|
+
}
|
|
852
|
+
else if (value >= 24 && value < 36) {
|
|
853
|
+
return ProgressColor.MAX_LOW;
|
|
854
|
+
}
|
|
855
|
+
else if (value >= 36 && value < 48) {
|
|
856
|
+
return ProgressColor.MIN_MEDIUM;
|
|
857
|
+
}
|
|
858
|
+
else if (value >= 48 && value < 60) {
|
|
859
|
+
return ProgressColor.MEDIUM;
|
|
860
|
+
}
|
|
861
|
+
else if (value >= 60 && value < 72) {
|
|
862
|
+
return ProgressColor.MAX_MEDIUM;
|
|
863
|
+
}
|
|
864
|
+
else if (value >= 72 && value < 84) {
|
|
865
|
+
return ProgressColor.MIN_HIGH;
|
|
866
|
+
}
|
|
867
|
+
else if (value >= 84 && value < 96) {
|
|
868
|
+
return ProgressColor.HIGH;
|
|
869
|
+
}
|
|
870
|
+
else {
|
|
871
|
+
return ProgressColor.MAX_HIGH;
|
|
872
|
+
}
|
|
873
|
+
}
|
|
874
|
+
function getProgressColorDynamicallyFunc(value, total) {
|
|
875
|
+
const colorsCount = Object.keys(ProgressColor).length, part = Math.ceil((total || CommonConstants.FULL_PERCENTAGE) / colorsCount);
|
|
876
|
+
if (value < part) {
|
|
877
|
+
return ProgressColor.MIN_LOW;
|
|
878
|
+
}
|
|
879
|
+
else if (value >= part && value < part * 2) {
|
|
880
|
+
return ProgressColor.LOW;
|
|
881
|
+
}
|
|
882
|
+
else if (value >= part * 2 && value < part * 3) {
|
|
883
|
+
return ProgressColor.MAX_LOW;
|
|
884
|
+
}
|
|
885
|
+
else if (value >= part * 3 && value < part * 4) {
|
|
886
|
+
return ProgressColor.MIN_MEDIUM;
|
|
887
|
+
}
|
|
888
|
+
else if (value >= part * 4 && value < part * 5) {
|
|
889
|
+
return ProgressColor.MEDIUM;
|
|
890
|
+
}
|
|
891
|
+
else if (value >= part * 5 && value < part * 6) {
|
|
892
|
+
return ProgressColor.MAX_MEDIUM;
|
|
893
|
+
}
|
|
894
|
+
else if (value >= part * 6 && value < part * 7) {
|
|
895
|
+
return ProgressColor.MIN_HIGH;
|
|
896
|
+
}
|
|
897
|
+
else if (value >= part * 7 && value < part * 8) {
|
|
898
|
+
return ProgressColor.HIGH;
|
|
899
|
+
}
|
|
900
|
+
else {
|
|
901
|
+
return ProgressColor.MAX_HIGH;
|
|
902
|
+
}
|
|
903
|
+
}
|
|
904
|
+
|
|
821
905
|
class ProgressBaseComponent {
|
|
822
906
|
constructor() {
|
|
823
907
|
this.progress = 0;
|
|
824
|
-
this.getColor =
|
|
825
|
-
}
|
|
826
|
-
getDefaultColor(value) {
|
|
827
|
-
if (value < 12) {
|
|
828
|
-
return ProgressColor.MIN_LOW;
|
|
829
|
-
}
|
|
830
|
-
else if (value >= 12 && value < 24) {
|
|
831
|
-
return ProgressColor.LOW;
|
|
832
|
-
}
|
|
833
|
-
else if (value >= 24 && value < 36) {
|
|
834
|
-
return ProgressColor.MAX_LOW;
|
|
835
|
-
}
|
|
836
|
-
else if (value >= 36 && value < 48) {
|
|
837
|
-
return ProgressColor.MIN_MEDIUM;
|
|
838
|
-
}
|
|
839
|
-
else if (value >= 48 && value < 60) {
|
|
840
|
-
return ProgressColor.MEDIUM;
|
|
841
|
-
}
|
|
842
|
-
else if (value >= 60 && value < 72) {
|
|
843
|
-
return ProgressColor.MAX_MEDIUM;
|
|
844
|
-
}
|
|
845
|
-
else if (value >= 72 && value < 84) {
|
|
846
|
-
return ProgressColor.MIN_HIGH;
|
|
847
|
-
}
|
|
848
|
-
else if (value >= 84 && value < 96) {
|
|
849
|
-
return ProgressColor.HIGH;
|
|
850
|
-
}
|
|
851
|
-
else {
|
|
852
|
-
return ProgressColor.MAX_HIGH;
|
|
853
|
-
}
|
|
908
|
+
this.getColor = getProgressColorDefaultFunc;
|
|
854
909
|
}
|
|
855
910
|
}
|
|
856
911
|
ProgressBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -869,6 +924,7 @@ class ProgressLineComponent extends ProgressBaseComponent {
|
|
|
869
924
|
constructor() {
|
|
870
925
|
super(...arguments);
|
|
871
926
|
this.total = CommonConstants.FULL_PERCENTAGE;
|
|
927
|
+
this.labelSuffix = null;
|
|
872
928
|
this.hideEnd = false;
|
|
873
929
|
}
|
|
874
930
|
ngOnInit() {
|
|
@@ -876,26 +932,30 @@ class ProgressLineComponent extends ProgressBaseComponent {
|
|
|
876
932
|
this.progress = this.total = CommonConstants.FULL_PERCENTAGE;
|
|
877
933
|
}
|
|
878
934
|
get label() {
|
|
879
|
-
|
|
935
|
+
const valueLabel = isNullOrEmptyString(this.labelEnd)
|
|
936
|
+
? `${this.progress}` : this.labelEnd;
|
|
937
|
+
return isNullOrEmptyString(this.labelSuffix) ? valueLabel : `${valueLabel}${this.labelSuffix}`;
|
|
880
938
|
}
|
|
881
939
|
get progressStyles() {
|
|
882
940
|
return {
|
|
883
941
|
width: getCssLikeValue((this.progress / this.total) * CommonConstants.FULL_PERCENTAGE, UIConstants.CSS_PERCENTAGE),
|
|
884
|
-
backgroundColor: this.getColor(this.progress)
|
|
942
|
+
backgroundColor: this.getColor(this.progress, this.total)
|
|
885
943
|
};
|
|
886
944
|
}
|
|
887
945
|
}
|
|
888
946
|
ProgressLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressLineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
889
|
-
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)
|
|
947
|
+
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"] }] });
|
|
890
948
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressLineComponent, decorators: [{
|
|
891
949
|
type: Component,
|
|
892
|
-
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)
|
|
950
|
+
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"] }]
|
|
893
951
|
}], propDecorators: { total: [{
|
|
894
952
|
type: Input
|
|
895
953
|
}], labelStart: [{
|
|
896
954
|
type: Input
|
|
897
955
|
}], labelEnd: [{
|
|
898
956
|
type: Input
|
|
957
|
+
}], labelSuffix: [{
|
|
958
|
+
type: Input
|
|
899
959
|
}], hideEnd: [{
|
|
900
960
|
type: Input
|
|
901
961
|
}] } });
|
|
@@ -916,7 +976,7 @@ class ProgressSemiCircleComponent extends ProgressBaseComponent {
|
|
|
916
976
|
this.progress = this.max;
|
|
917
977
|
}
|
|
918
978
|
get barStyles() {
|
|
919
|
-
const color = this.getColor(this.progress), differenceLimits = this.max - this.min, rotateValue = 45 + (180 - ((this.max - this.progress) * 180 / differenceLimits));
|
|
979
|
+
const color = this.getColor(this.progress, this.max), differenceLimits = this.max - this.min, rotateValue = 45 + (180 - ((this.max - this.progress) * 180 / differenceLimits));
|
|
920
980
|
return {
|
|
921
981
|
transform: `rotate(${getCssLikeValue(rotateValue, UIConstants.CSS_DEGREES)})`,
|
|
922
982
|
borderBottomColor: color,
|
|
@@ -925,10 +985,10 @@ class ProgressSemiCircleComponent extends ProgressBaseComponent {
|
|
|
925
985
|
}
|
|
926
986
|
}
|
|
927
987
|
ProgressSemiCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressSemiCircleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
928
|
-
ProgressSemiCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressSemiCircleComponent, selector: "sfc-progress-semi-circle", inputs: { limits: "limits", min: "min", max: "max" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"progress-bar\">\r\n <div class=\"bar\" [style.border-color]=\"background\" [ngStyle]=\"barStyles\"></div>\r\n </div>\r\n <span class=\"value\">{{progress}}</span>\r\n <div class=\"limits\" *ngIf=\"limits\">\r\n <span>{{min}}</span>\r\n <span>{{max}}</span>\r\n </div>\r\n</div>", styles: [":host .container{position:relative;width:1em;height:.5em;font-size:5em}:host .container,:host-context(.sfc-default-theme)
|
|
988
|
+
ProgressSemiCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressSemiCircleComponent, selector: "sfc-progress-semi-circle", inputs: { limits: "limits", min: "min", max: "max" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"progress-bar\">\r\n <div class=\"bar\" [style.border-color]=\"background\" [ngStyle]=\"barStyles\"></div>\r\n </div>\r\n <span class=\"value\">{{progress}}</span>\r\n <div class=\"limits\" *ngIf=\"limits\">\r\n <span>{{min}}</span>\r\n <span>{{max}}</span>\r\n </div>\r\n</div>", styles: [":host .container{position:relative;width:1em;height:.5em;font-size:5em}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container .progress-bar{position:relative;overflow:hidden;height:inherit}:host .container .progress-bar .bar{width:1em;height:1em;border-radius:50%;box-sizing:border-box;border:.1em solid;border-color:#e6e9ed;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container .value{font-weight:700;font-size:.2em;-webkit-user-select:none;user-select:none;position:absolute;z-index:1;top:50%;width:5em;text-align:center;white-space:nowrap;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container .limits{font-size:.06em;font-weight:700;display:flex;justify-content:space-between;align-items:center;margin-top:3px}:host .container:hover .progress-bar .bar{border-width:.08em}:host .container:hover .value{font-size:.3em;width:3.33em;top:30%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
929
989
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressSemiCircleComponent, decorators: [{
|
|
930
990
|
type: Component,
|
|
931
|
-
args: [{ selector: 'sfc-progress-semi-circle', template: "<div class=\"container\">\r\n <div class=\"progress-bar\">\r\n <div class=\"bar\" [style.border-color]=\"background\" [ngStyle]=\"barStyles\"></div>\r\n </div>\r\n <span class=\"value\">{{progress}}</span>\r\n <div class=\"limits\" *ngIf=\"limits\">\r\n <span>{{min}}</span>\r\n <span>{{max}}</span>\r\n </div>\r\n</div>", styles: [":host .container{position:relative;width:1em;height:.5em;font-size:5em}:host .container,:host-context(.sfc-default-theme)
|
|
991
|
+
args: [{ selector: 'sfc-progress-semi-circle', template: "<div class=\"container\">\r\n <div class=\"progress-bar\">\r\n <div class=\"bar\" [style.border-color]=\"background\" [ngStyle]=\"barStyles\"></div>\r\n </div>\r\n <span class=\"value\">{{progress}}</span>\r\n <div class=\"limits\" *ngIf=\"limits\">\r\n <span>{{min}}</span>\r\n <span>{{max}}</span>\r\n </div>\r\n</div>", styles: [":host .container{position:relative;width:1em;height:.5em;font-size:5em}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container .progress-bar{position:relative;overflow:hidden;height:inherit}:host .container .progress-bar .bar{width:1em;height:1em;border-radius:50%;box-sizing:border-box;border:.1em solid;border-color:#e6e9ed;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container .value{font-weight:700;font-size:.2em;-webkit-user-select:none;user-select:none;position:absolute;z-index:1;top:50%;width:5em;text-align:center;white-space:nowrap;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container .limits{font-size:.06em;font-weight:700;display:flex;justify-content:space-between;align-items:center;margin-top:3px}:host .container:hover .progress-bar .bar{border-width:.08em}:host .container:hover .value{font-size:.3em;width:3.33em;top:30%}\n"] }]
|
|
932
992
|
}], propDecorators: { limits: [{
|
|
933
993
|
type: Input
|
|
934
994
|
}], min: [{
|
|
@@ -938,19 +998,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
938
998
|
}] } });
|
|
939
999
|
|
|
940
1000
|
class ProgressCircleComponent extends ProgressBaseComponent {
|
|
1001
|
+
constructor() {
|
|
1002
|
+
super(...arguments);
|
|
1003
|
+
this.total = CommonConstants.FULL_PERCENTAGE;
|
|
1004
|
+
}
|
|
941
1005
|
get reversed() {
|
|
942
|
-
return this.progress > 50;
|
|
1006
|
+
return (this.progress / this.total) * CommonConstants.FULL_PERCENTAGE > 50;
|
|
943
1007
|
}
|
|
944
1008
|
get transformRotate() {
|
|
945
|
-
return `rotate(${getCssLikeValue((this.progress * 360) /
|
|
1009
|
+
return `rotate(${getCssLikeValue((this.progress * 360) / this.total, UIConstants.CSS_DEGREES)})`;
|
|
946
1010
|
}
|
|
947
1011
|
}
|
|
948
1012
|
ProgressCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressCircleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
949
|
-
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"] }] });
|
|
1013
|
+
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"] }] });
|
|
950
1014
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressCircleComponent, decorators: [{
|
|
951
1015
|
type: Component,
|
|
952
|
-
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"] }]
|
|
953
|
-
}], propDecorators: {
|
|
1016
|
+
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"] }]
|
|
1017
|
+
}], propDecorators: { total: [{
|
|
1018
|
+
type: Input
|
|
1019
|
+
}], reversed: [{
|
|
954
1020
|
type: HostBinding,
|
|
955
1021
|
args: ['class.reversed']
|
|
956
1022
|
}] } });
|
|
@@ -1284,10 +1350,10 @@ class TimelineItemComponent {
|
|
|
1284
1350
|
}
|
|
1285
1351
|
}
|
|
1286
1352
|
TimelineItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1287
|
-
TimelineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimelineItemComponent, selector: "sfc-timeline-item", inputs: { model: "model" }, host: { properties: { "class": "this.position", "class.period": "this.period" } }, ngImport: i0, template: "<li class=\"container\">\r\n <div class=\"date-time\">\r\n <span>{{model.dateTimeLabel}}</span>\r\n </div>\r\n <div class=\"marker\">\r\n <div class=\"delimeter\"></div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"title\">\r\n <sfc-icon [icon]=\"model.icon\" [imageSrc]=\"model.image\"></sfc-icon>\r\n <span>{{model.title}}</span>\r\n </div> \r\n <p>{{model.description}}</p>\r\n </div>\r\n</li>", styles: [":host{display:block}:host .container{padding:0 0 .5em 2.5em;position:relative}:host .container .date-time{font-size:.8em;font-weight:700;letter-spacing:.06em;margin:0 0 .5em;text-transform:uppercase;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}:host .container .date-time,:host-context(.sfc-default-theme)
|
|
1353
|
+
TimelineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimelineItemComponent, selector: "sfc-timeline-item", inputs: { model: "model" }, host: { properties: { "class": "this.position", "class.period": "this.period" } }, ngImport: i0, template: "<li class=\"container\">\r\n <div class=\"date-time\">\r\n <span>{{model.dateTimeLabel}}</span>\r\n </div>\r\n <div class=\"marker\">\r\n <div class=\"delimeter\"></div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"title\">\r\n <sfc-icon [icon]=\"model.icon\" [imageSrc]=\"model.image\"></sfc-icon>\r\n <span>{{model.title}}</span>\r\n </div> \r\n <p>{{model.description}}</p>\r\n </div>\r\n</li>", styles: [":host{display:block}:host .container{padding:0 0 .5em 2.5em;position:relative}:host .container .date-time{font-size:.8em;font-weight:700;letter-spacing:.06em;margin:0 0 .5em;text-transform:uppercase;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}:host .container .date-time,:host-context(.sfc-default-theme) :host .container .date-time{color:#545e61}:host-context(.sfc-dark-theme) :host .container .date-time{color:#fff}:host .container .marker{position:absolute;top:0;bottom:0;left:0}:host .container .marker:before{box-sizing:border-box;background:#2bbbad;border:.18em solid transparent;border-radius:100%;content:\"\";display:block;position:absolute;top:.25em;width:1em;height:1em;transition:background .3s ease-in-out,border .3s ease-in-out}:host .container .marker:after{content:\"\";width:.18em;display:block;position:absolute;top:1.5em;bottom:0;left:.375em;box-sizing:border-box}:host .container .marker:after,:host-context(.sfc-default-theme) :host .container .marker:after{background:#545e61}:host-context(.sfc-dark-theme) :host .container .marker:after{background:#fff}:host .container .marker .delimeter{display:none;width:1em;bottom:0;position:absolute;border-bottom:.18em solid}:host .container .marker .delimeter,:host-context(.sfc-default-theme) :host .container .marker .delimeter{border-color:#545e61}:host-context(.sfc-dark-theme) :host .container .marker .delimeter{border-color:#fff}:host .container .content{font-size:1em;font-weight:700;line-height:initial;padding-bottom:2.5em;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:flex;flex-flow:column wrap;align-items:flex-start}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content{color:#fff}:host .container .content p{font-size:.8em;line-height:1em;color:#aab2bd;margin:0}:host .container .content sfc-icon{margin-right:.31em}:host.period .container{padding:0}:host.period .container .date-time{display:none}:host.period .container .marker:before{background:transparent;content:\"\";height:auto;border:none;border-radius:0;top:0;bottom:1.875em;border-top:.18em solid;border-bottom:.18em solid;transition:none}:host.period .container .marker:before,:host-context(.sfc-default-theme) :host.period .container .marker:before{border-color:#545e61}:host-context(.sfc-dark-theme) :host.period .container .marker:before{border-color:#fff}:host.period .container .marker:after{content:\"\";height:2em;top:auto}:host.period .container .content{padding:2.5em 0 4.375em;justify-content:start}:host.period .container .content .title{width:100%}:host.period .container .content .title span{margin:0;font-size:1.875em;text-align:center}:host:not(.period):hover .container .marker:before{border:.18em solid #2bbbad}:host:not(.period):hover .container .marker:before,:host-context(.sfc-default-theme) :host:not(.period):hover .container .marker:before{background:transparent}:host-context(.sfc-dark-theme) :host:not(.period):hover .container .marker:before{background:#fff}@media (min-width: 435px){:host .container{padding:0 0 .31em;overflow:hidden}:host .container .date-time{width:50%}:host .container .marker{left:50%;margin-left:-.46em}:host .container .content{padding:0;width:50%}:host.period .container{padding:2em 0 3.5em}:host.period .container .content{padding:0;width:100%;text-align:center;justify-content:center;align-items:center}:host:not(.period).right .container .date-time{float:left;text-align:right;padding-right:1.875em}:host:not(.period).right .container .content{padding-left:1.5em;justify-content:start}:host:not(.period).left .container .date-time{float:right;padding-left:1.875em}:host:not(.period).left .container .content{padding-right:1.5em;justify-content:end;align-items:end}:host:not(.period).left .container .content .title{text-align:end}:host:not(.period).left .container .content span,:host:not(.period).left .container .content p{text-align:end}}\n"], dependencies: [{ kind: "component", type: i1$1.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
|
|
1288
1354
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineItemComponent, decorators: [{
|
|
1289
1355
|
type: Component,
|
|
1290
|
-
args: [{ selector: 'sfc-timeline-item', template: "<li class=\"container\">\r\n <div class=\"date-time\">\r\n <span>{{model.dateTimeLabel}}</span>\r\n </div>\r\n <div class=\"marker\">\r\n <div class=\"delimeter\"></div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"title\">\r\n <sfc-icon [icon]=\"model.icon\" [imageSrc]=\"model.image\"></sfc-icon>\r\n <span>{{model.title}}</span>\r\n </div> \r\n <p>{{model.description}}</p>\r\n </div>\r\n</li>", styles: [":host{display:block}:host .container{padding:0 0 .5em 2.5em;position:relative}:host .container .date-time{font-size:.8em;font-weight:700;letter-spacing:.06em;margin:0 0 .5em;text-transform:uppercase;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}:host .container .date-time,:host-context(.sfc-default-theme)
|
|
1356
|
+
args: [{ selector: 'sfc-timeline-item', template: "<li class=\"container\">\r\n <div class=\"date-time\">\r\n <span>{{model.dateTimeLabel}}</span>\r\n </div>\r\n <div class=\"marker\">\r\n <div class=\"delimeter\"></div>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"title\">\r\n <sfc-icon [icon]=\"model.icon\" [imageSrc]=\"model.image\"></sfc-icon>\r\n <span>{{model.title}}</span>\r\n </div> \r\n <p>{{model.description}}</p>\r\n </div>\r\n</li>", styles: [":host{display:block}:host .container{padding:0 0 .5em 2.5em;position:relative}:host .container .date-time{font-size:.8em;font-weight:700;letter-spacing:.06em;margin:0 0 .5em;text-transform:uppercase;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}:host .container .date-time,:host-context(.sfc-default-theme) :host .container .date-time{color:#545e61}:host-context(.sfc-dark-theme) :host .container .date-time{color:#fff}:host .container .marker{position:absolute;top:0;bottom:0;left:0}:host .container .marker:before{box-sizing:border-box;background:#2bbbad;border:.18em solid transparent;border-radius:100%;content:\"\";display:block;position:absolute;top:.25em;width:1em;height:1em;transition:background .3s ease-in-out,border .3s ease-in-out}:host .container .marker:after{content:\"\";width:.18em;display:block;position:absolute;top:1.5em;bottom:0;left:.375em;box-sizing:border-box}:host .container .marker:after,:host-context(.sfc-default-theme) :host .container .marker:after{background:#545e61}:host-context(.sfc-dark-theme) :host .container .marker:after{background:#fff}:host .container .marker .delimeter{display:none;width:1em;bottom:0;position:absolute;border-bottom:.18em solid}:host .container .marker .delimeter,:host-context(.sfc-default-theme) :host .container .marker .delimeter{border-color:#545e61}:host-context(.sfc-dark-theme) :host .container .marker .delimeter{border-color:#fff}:host .container .content{font-size:1em;font-weight:700;line-height:initial;padding-bottom:2.5em;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:flex;flex-flow:column wrap;align-items:flex-start}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content{color:#fff}:host .container .content p{font-size:.8em;line-height:1em;color:#aab2bd;margin:0}:host .container .content sfc-icon{margin-right:.31em}:host.period .container{padding:0}:host.period .container .date-time{display:none}:host.period .container .marker:before{background:transparent;content:\"\";height:auto;border:none;border-radius:0;top:0;bottom:1.875em;border-top:.18em solid;border-bottom:.18em solid;transition:none}:host.period .container .marker:before,:host-context(.sfc-default-theme) :host.period .container .marker:before{border-color:#545e61}:host-context(.sfc-dark-theme) :host.period .container .marker:before{border-color:#fff}:host.period .container .marker:after{content:\"\";height:2em;top:auto}:host.period .container .content{padding:2.5em 0 4.375em;justify-content:start}:host.period .container .content .title{width:100%}:host.period .container .content .title span{margin:0;font-size:1.875em;text-align:center}:host:not(.period):hover .container .marker:before{border:.18em solid #2bbbad}:host:not(.period):hover .container .marker:before,:host-context(.sfc-default-theme) :host:not(.period):hover .container .marker:before{background:transparent}:host-context(.sfc-dark-theme) :host:not(.period):hover .container .marker:before{background:#fff}@media (min-width: 435px){:host .container{padding:0 0 .31em;overflow:hidden}:host .container .date-time{width:50%}:host .container .marker{left:50%;margin-left:-.46em}:host .container .content{padding:0;width:50%}:host.period .container{padding:2em 0 3.5em}:host.period .container .content{padding:0;width:100%;text-align:center;justify-content:center;align-items:center}:host:not(.period).right .container .date-time{float:left;text-align:right;padding-right:1.875em}:host:not(.period).right .container .content{padding-left:1.5em;justify-content:start}:host:not(.period).left .container .date-time{float:right;padding-left:1.875em}:host:not(.period).left .container .content{padding-right:1.5em;justify-content:end;align-items:end}:host:not(.period).left .container .content .title{text-align:end}:host:not(.period).left .container .content span,:host:not(.period).left .container .content p{text-align:end}}\n"] }]
|
|
1291
1357
|
}], propDecorators: { model: [{
|
|
1292
1358
|
type: Input
|
|
1293
1359
|
}], position: [{
|
|
@@ -1846,10 +1912,10 @@ class SelectableTableColumnComponent {
|
|
|
1846
1912
|
}
|
|
1847
1913
|
}
|
|
1848
1914
|
SelectableTableColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SelectableTableColumnComponent, deps: [{ token: TableSelectService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1849
|
-
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)
|
|
1915
|
+
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: i1$1.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type"] }] });
|
|
1850
1916
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SelectableTableColumnComponent, decorators: [{
|
|
1851
1917
|
type: Component,
|
|
1852
|
-
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)
|
|
1918
|
+
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"] }]
|
|
1853
1919
|
}], ctorParameters: function () { return [{ type: TableSelectService }]; }, propDecorators: { selected: [{
|
|
1854
1920
|
type: Input
|
|
1855
1921
|
}, {
|
|
@@ -1888,10 +1954,10 @@ class ColumnsToggleComponent {
|
|
|
1888
1954
|
}
|
|
1889
1955
|
}
|
|
1890
1956
|
ColumnsToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ColumnsToggleComponent, deps: [{ token: ColumnsToggleService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1891
|
-
ColumnsToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ColumnsToggleComponent, selector: "sfc-columns-toggle", host: { listeners: { "click": "onToggle()" } }, ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n <div>\r\n <span class=\"icon\" [sfcShowHideElement]=\"!vm.show\">\r\n <fa-icon [icon]=\"vm.model.ICON\"></fa-icon>\r\n </span>\r\n <span class=\"icon\" [sfcShowHideElement]=\"vm.show\">\r\n <fa-icon [icon]=\"vm.model.ICON\"></fa-icon>\r\n </span>\r\n <span class=\"label\">{{vm.model.LABEL}}</span>\r\n </div>\r\n</div>", styles: [":host{display:flex;align-items:center}:host .container{font-size:.625em;font-weight:700;text-transform:uppercase;width:100%;text-align:end;display:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container,:host-context(.sfc-default-theme)
|
|
1957
|
+
ColumnsToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ColumnsToggleComponent, selector: "sfc-columns-toggle", host: { listeners: { "click": "onToggle()" } }, ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n <div>\r\n <span class=\"icon\" [sfcShowHideElement]=\"!vm.show\">\r\n <fa-icon [icon]=\"vm.model.ICON\"></fa-icon>\r\n </span>\r\n <span class=\"icon\" [sfcShowHideElement]=\"vm.show\">\r\n <fa-icon [icon]=\"vm.model.ICON\"></fa-icon>\r\n </span>\r\n <span class=\"label\">{{vm.model.LABEL}}</span>\r\n </div>\r\n</div>", styles: [":host{display:flex;align-items:center}:host .container{font-size:.625em;font-weight:700;text-transform:uppercase;width:100%;text-align:end;display:none;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:hover{color:#ffce54}:host .container span.icon{position:absolute}:host .container span.label{padding-left:1.3em}@media all and (max-width: 767px){:host .container{display:block}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i1$1.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
|
|
1892
1958
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ColumnsToggleComponent, decorators: [{
|
|
1893
1959
|
type: Component,
|
|
1894
|
-
args: [{ selector: 'sfc-columns-toggle', template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n <div>\r\n <span class=\"icon\" [sfcShowHideElement]=\"!vm.show\">\r\n <fa-icon [icon]=\"vm.model.ICON\"></fa-icon>\r\n </span>\r\n <span class=\"icon\" [sfcShowHideElement]=\"vm.show\">\r\n <fa-icon [icon]=\"vm.model.ICON\"></fa-icon>\r\n </span>\r\n <span class=\"label\">{{vm.model.LABEL}}</span>\r\n </div>\r\n</div>", styles: [":host{display:flex;align-items:center}:host .container{font-size:.625em;font-weight:700;text-transform:uppercase;width:100%;text-align:end;display:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container,:host-context(.sfc-default-theme)
|
|
1960
|
+
args: [{ selector: 'sfc-columns-toggle', template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n <div>\r\n <span class=\"icon\" [sfcShowHideElement]=\"!vm.show\">\r\n <fa-icon [icon]=\"vm.model.ICON\"></fa-icon>\r\n </span>\r\n <span class=\"icon\" [sfcShowHideElement]=\"vm.show\">\r\n <fa-icon [icon]=\"vm.model.ICON\"></fa-icon>\r\n </span>\r\n <span class=\"label\">{{vm.model.LABEL}}</span>\r\n </div>\r\n</div>", styles: [":host{display:flex;align-items:center}:host .container{font-size:.625em;font-weight:700;text-transform:uppercase;width:100%;text-align:end;display:none;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:hover{color:#ffce54}:host .container span.icon{position:absolute}:host .container span.label{padding-left:1.3em}@media all and (max-width: 767px){:host .container{display:block}}\n"] }]
|
|
1895
1961
|
}], ctorParameters: function () { return [{ type: ColumnsToggleService }]; }, propDecorators: { onToggle: [{
|
|
1896
1962
|
type: HostListener,
|
|
1897
1963
|
args: ['click']
|
|
@@ -1981,7 +2047,7 @@ class DefaultTableRowComponent extends BaseDefaultTableContentComponent {
|
|
|
1981
2047
|
}
|
|
1982
2048
|
}
|
|
1983
2049
|
DefaultTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTableRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1984
|
-
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: i1$1.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type"
|
|
2050
|
+
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: i1$1.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type"] }] });
|
|
1985
2051
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTableRowComponent, decorators: [{
|
|
1986
2052
|
type: Component,
|
|
1987
2053
|
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"] }]
|
|
@@ -1990,7 +2056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
1990
2056
|
class DefaultTableCardComponent extends BaseDefaultTableContentComponent {
|
|
1991
2057
|
}
|
|
1992
2058
|
DefaultTableCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTableCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1993
|
-
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: i1$1.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type"
|
|
2059
|
+
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: i1$1.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type"] }] });
|
|
1994
2060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTableCardComponent, decorators: [{
|
|
1995
2061
|
type: Component,
|
|
1996
2062
|
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"] }]
|
|
@@ -3797,7 +3863,7 @@ CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
3797
3863
|
CarouselService,
|
|
3798
3864
|
CarouselAnimateService,
|
|
3799
3865
|
CarouselLazyLoadService
|
|
3800
|
-
], queries: [{ propertyName: "slides", predicate: CarouselSlideDirective }], ngImport: i0, template: "<div class=\"container\" (mouseover)=\"pause()\" (mouseleave)=\"play()\">\r\n <div *ngIf=\"carouselLoaded\" class=\"stage\">\r\n <sfc-carousel-stage [stageModel]=\"stageModel\" [slidesModel]=\"slidesModel\"></sfc-carousel-stage>\r\n </div>\r\n <ng-container *ngIf=\"slides.toArray().length\">\r\n <div class=\"navigation\" [class.disabled]=\"navigationModel.disabled\">\r\n <div class=\"action previous\" [class.disabled]=\"navigationModel.previous.disabled\" (click)=\"previous()\">\r\n {{navigationModel.previous.label}}\r\n </div>\r\n <div class=\"action next\" [class.disabled]=\"navigationModel.next.disabled\" (click)=\"next()\">\r\n {{navigationModel.next.label}}\r\n </div>\r\n </div>\r\n <div class=\"dots\" [class.disabled]=\"navigationDotsModel.disabled\">\r\n <div *ngFor=\"let dot of navigationDotsModel?.dots\" class=\"dot\" [class.active]=\"dot.active\"\r\n (click)=\"moveByDot(dot.id)\">\r\n <span></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>", styles: [":host .container{display:block;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}:host .container .stage{position:relative;overflow:hidden;transform:translateZ(0)}:host .container .dots{text-align:center;-webkit-tap-highlight-color:transparent}:host .container .dots.disabled{display:none}:host .container .dots .dot{display:inline-block;zoom:1;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .dots .dot span{width:10px;height:10px;margin:5px 7px;display:block;-webkit-backface-visibility:visible;backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}:host .container .dots .dot span,:host-context(.sfc-default-theme)
|
|
3866
|
+
], queries: [{ propertyName: "slides", predicate: CarouselSlideDirective }], ngImport: i0, template: "<div class=\"container\" (mouseover)=\"pause()\" (mouseleave)=\"play()\">\r\n <div *ngIf=\"carouselLoaded\" class=\"stage\">\r\n <sfc-carousel-stage [stageModel]=\"stageModel\" [slidesModel]=\"slidesModel\"></sfc-carousel-stage>\r\n </div>\r\n <ng-container *ngIf=\"slides.toArray().length\">\r\n <div class=\"navigation\" [class.disabled]=\"navigationModel.disabled\">\r\n <div class=\"action previous\" [class.disabled]=\"navigationModel.previous.disabled\" (click)=\"previous()\">\r\n {{navigationModel.previous.label}}\r\n </div>\r\n <div class=\"action next\" [class.disabled]=\"navigationModel.next.disabled\" (click)=\"next()\">\r\n {{navigationModel.next.label}}\r\n </div>\r\n </div>\r\n <div class=\"dots\" [class.disabled]=\"navigationDotsModel.disabled\">\r\n <div *ngFor=\"let dot of navigationDotsModel?.dots\" class=\"dot\" [class.active]=\"dot.active\"\r\n (click)=\"moveByDot(dot.id)\">\r\n <span></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>", styles: [":host .container{display:block;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}:host .container .stage{position:relative;overflow:hidden;transform:translateZ(0)}:host .container .dots{text-align:center;-webkit-tap-highlight-color:transparent}:host .container .dots.disabled{display:none}:host .container .dots .dot{display:inline-block;zoom:1;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .dots .dot span{width:10px;height:10px;margin:5px 7px;display:block;-webkit-backface-visibility:visible;backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}:host .container .dots .dot span,:host-context(.sfc-default-theme) :host .container .dots .dot span{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .dots .dot span{background:#f6f6f6}:host .container .dots .dot.active span,:host-context(.sfc-default-theme) :host .container .dots .dot.active span,:host .container .dots .dot:hover span,:host-context(.sfc-default-theme) :host .container .dots .dot:hover span{background:#656d78}:host-context(.sfc-dark-theme) :host .container .dots .dot.active span,:host-context(.sfc-dark-theme) :host .container .dots .dot:hover span{background:#aab2bd}:host .container .navigation{margin-top:10px;text-align:center;-webkit-tap-highlight-color:transparent}:host .container .navigation .action{font-size:14px;margin:5px;padding:4px 7px;display:inline-block;cursor:pointer;border-radius:3px}:host .container .navigation .action,:host-context(.sfc-default-theme) :host .container .navigation .action{color:#fff}:host-context(.sfc-dark-theme) :host .container .navigation .action{color:#545e61}:host .container .navigation .action,:host-context(.sfc-default-theme) :host .container .navigation .action{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .navigation .action{background:#f6f6f6}:host .container .navigation .action:hover{text-decoration:none}:host .container .navigation .action:hover,:host-context(.sfc-default-theme) :host .container .navigation .action:hover{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container .navigation .action:hover{background:#d8d7d7}:host .container .navigation .action.previous,:host .container .navigation .action.next{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .navigation .action.disabled{opacity:.5;cursor:default}:host .container .navigation.disabled{display:none}:host .container .navigation.disabled+.dots{margin-top:10px}:host.rtl .container{direction:rtl}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CarouselStageComponent, selector: "sfc-carousel-stage", inputs: ["stageModel", "slidesModel"] }] });
|
|
3801
3867
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CarouselComponent, decorators: [{
|
|
3802
3868
|
type: Component,
|
|
3803
3869
|
args: [{ selector: 'sfc-carousel', providers: [
|
|
@@ -3806,7 +3872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
3806
3872
|
CarouselService,
|
|
3807
3873
|
CarouselAnimateService,
|
|
3808
3874
|
CarouselLazyLoadService
|
|
3809
|
-
], template: "<div class=\"container\" (mouseover)=\"pause()\" (mouseleave)=\"play()\">\r\n <div *ngIf=\"carouselLoaded\" class=\"stage\">\r\n <sfc-carousel-stage [stageModel]=\"stageModel\" [slidesModel]=\"slidesModel\"></sfc-carousel-stage>\r\n </div>\r\n <ng-container *ngIf=\"slides.toArray().length\">\r\n <div class=\"navigation\" [class.disabled]=\"navigationModel.disabled\">\r\n <div class=\"action previous\" [class.disabled]=\"navigationModel.previous.disabled\" (click)=\"previous()\">\r\n {{navigationModel.previous.label}}\r\n </div>\r\n <div class=\"action next\" [class.disabled]=\"navigationModel.next.disabled\" (click)=\"next()\">\r\n {{navigationModel.next.label}}\r\n </div>\r\n </div>\r\n <div class=\"dots\" [class.disabled]=\"navigationDotsModel.disabled\">\r\n <div *ngFor=\"let dot of navigationDotsModel?.dots\" class=\"dot\" [class.active]=\"dot.active\"\r\n (click)=\"moveByDot(dot.id)\">\r\n <span></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>", styles: [":host .container{display:block;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}:host .container .stage{position:relative;overflow:hidden;transform:translateZ(0)}:host .container .dots{text-align:center;-webkit-tap-highlight-color:transparent}:host .container .dots.disabled{display:none}:host .container .dots .dot{display:inline-block;zoom:1;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .dots .dot span{width:10px;height:10px;margin:5px 7px;display:block;-webkit-backface-visibility:visible;backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}:host .container .dots .dot span,:host-context(.sfc-default-theme)
|
|
3875
|
+
], template: "<div class=\"container\" (mouseover)=\"pause()\" (mouseleave)=\"play()\">\r\n <div *ngIf=\"carouselLoaded\" class=\"stage\">\r\n <sfc-carousel-stage [stageModel]=\"stageModel\" [slidesModel]=\"slidesModel\"></sfc-carousel-stage>\r\n </div>\r\n <ng-container *ngIf=\"slides.toArray().length\">\r\n <div class=\"navigation\" [class.disabled]=\"navigationModel.disabled\">\r\n <div class=\"action previous\" [class.disabled]=\"navigationModel.previous.disabled\" (click)=\"previous()\">\r\n {{navigationModel.previous.label}}\r\n </div>\r\n <div class=\"action next\" [class.disabled]=\"navigationModel.next.disabled\" (click)=\"next()\">\r\n {{navigationModel.next.label}}\r\n </div>\r\n </div>\r\n <div class=\"dots\" [class.disabled]=\"navigationDotsModel.disabled\">\r\n <div *ngFor=\"let dot of navigationDotsModel?.dots\" class=\"dot\" [class.active]=\"dot.active\"\r\n (click)=\"moveByDot(dot.id)\">\r\n <span></span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>", styles: [":host .container{display:block;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}:host .container .stage{position:relative;overflow:hidden;transform:translateZ(0)}:host .container .dots{text-align:center;-webkit-tap-highlight-color:transparent}:host .container .dots.disabled{display:none}:host .container .dots .dot{display:inline-block;zoom:1;cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .dots .dot span{width:10px;height:10px;margin:5px 7px;display:block;-webkit-backface-visibility:visible;backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}:host .container .dots .dot span,:host-context(.sfc-default-theme) :host .container .dots .dot span{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .dots .dot span{background:#f6f6f6}:host .container .dots .dot.active span,:host-context(.sfc-default-theme) :host .container .dots .dot.active span,:host .container .dots .dot:hover span,:host-context(.sfc-default-theme) :host .container .dots .dot:hover span{background:#656d78}:host-context(.sfc-dark-theme) :host .container .dots .dot.active span,:host-context(.sfc-dark-theme) :host .container .dots .dot:hover span{background:#aab2bd}:host .container .navigation{margin-top:10px;text-align:center;-webkit-tap-highlight-color:transparent}:host .container .navigation .action{font-size:14px;margin:5px;padding:4px 7px;display:inline-block;cursor:pointer;border-radius:3px}:host .container .navigation .action,:host-context(.sfc-default-theme) :host .container .navigation .action{color:#fff}:host-context(.sfc-dark-theme) :host .container .navigation .action{color:#545e61}:host .container .navigation .action,:host-context(.sfc-default-theme) :host .container .navigation .action{background:#d8d7d7}:host-context(.sfc-dark-theme) :host .container .navigation .action{background:#f6f6f6}:host .container .navigation .action:hover{text-decoration:none}:host .container .navigation .action:hover,:host-context(.sfc-default-theme) :host .container .navigation .action:hover{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container .navigation .action:hover{background:#d8d7d7}:host .container .navigation .action.previous,:host .container .navigation .action.next{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container .navigation .action.disabled{opacity:.5;cursor:default}:host .container .navigation.disabled{display:none}:host .container .navigation.disabled+.dots{margin-top:10px}:host.rtl .container{direction:rtl}\n"] }]
|
|
3810
3876
|
}], ctorParameters: function () {
|
|
3811
3877
|
return [{ type: i0.ElementRef }, { type: i1$1.ResizeService }, { type: CarouselService }, { type: CarouselNavigationService }, { type: CarouselAutoplayService }, { type: CarouselLazyLoadService }, { type: CarouselAnimateService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
3812
3878
|
type: Inject,
|
|
@@ -4044,6 +4110,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
4044
4110
|
* Generated bundle index. Do not edit.
|
|
4045
4111
|
*/
|
|
4046
4112
|
|
|
4047
|
-
export { AvatarBadgeComponent, AvatarBadgePosition, AvatarComponent, CarouselComponent, CarouselSlideDirective, ChartComponent, ChartThemeService, ColumnsToggleComponent, DefaultTableCardComponent, DefaultTableColumnComponent, DefaultTableRowComponent, DropdownMenuComponent, ExpandedTableRowComponent, ExpandedTableRowTemplate, NavigationMenuComponent, NgxSfcComponentsModule, NotificationComponent, NotificationTemplate, NotificationType, ProgressCircleComponent, ProgressLineComponent, ProgressSemiCircleComponent, SelectableTableColumnComponent, SideMenuComponent, SideMenuItemType, SliderComponent, SliderType, StarsComponent, TabLabelIconComponent, TabLabelIconSliderComponent, TabLabelLineComponent, TabLabelLineSliderComponent, TableComponent, TableDataType, TableTemplate, TabsComponent, TabsTemplate, TagsComponent, TimelineComponent, TimelineItemPosition };
|
|
4113
|
+
export { AvatarBadgeComponent, AvatarBadgePosition, AvatarComponent, CarouselComponent, CarouselSlideDirective, ChartComponent, ChartThemeService, ColumnsToggleComponent, DefaultTableCardComponent, DefaultTableColumnComponent, DefaultTableRowComponent, DropdownMenuComponent, ExpandedTableRowComponent, ExpandedTableRowTemplate, NavigationMenuComponent, NgxSfcComponentsModule, NotificationComponent, NotificationTemplate, NotificationType, ProgressCircleComponent, ProgressLineComponent, ProgressSemiCircleComponent, SelectableTableColumnComponent, SideMenuComponent, SideMenuItemType, SliderComponent, SliderType, StarsComponent, TabLabelIconComponent, TabLabelIconSliderComponent, TabLabelLineComponent, TabLabelLineSliderComponent, TableComponent, TableDataType, TableTemplate, TabsComponent, TabsTemplate, TagsComponent, TimelineComponent, TimelineItemPosition, getProgressColorDefaultFunc, getProgressColorDynamicallyFunc };
|
|
4048
4114
|
//# sourceMappingURL=ngx-sfc-components.mjs.map
|
|
4049
4115
|
//# sourceMappingURL=ngx-sfc-components.mjs.map
|