ngx-sfc-components 0.0.33 → 0.0.34
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/menu/router/parts/item/router-menu-item.component.mjs +2 -2
- package/esm2020/lib/components/stars/stars.component.mjs +2 -2
- package/esm2020/lib/components/table/parts/columns/sorting/sorting-column.component.mjs +2 -2
- package/esm2020/lib/components/table/table.component.mjs +3 -3
- package/esm2020/lib/components/tags/tags.component.mjs +2 -2
- package/fesm2015/ngx-sfc-components.mjs +12 -12
- package/fesm2015/ngx-sfc-components.mjs.map +1 -1
- package/fesm2020/ngx-sfc-components.mjs +11 -12
- package/fesm2020/ngx-sfc-components.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -645,10 +645,10 @@ class RouterMenuItemComponent {
|
|
|
645
645
|
}
|
|
646
646
|
}
|
|
647
647
|
RouterMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RouterMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
648
|
-
RouterMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: RouterMenuItemComponent, selector: "sfc-router-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.selected": "this._selected" } }, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n <span>{{item.label}}</span>\r\n </div>\r\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container{display:flex;align-items:center;justify-content:center;height:100%}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;transition:color .5s ease;padding:.5em .8em;width:100%}: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 span{font-size:.7em;font-weight:700}:host .container .content sfc-icon{margin-right:.5em}:host.selected .container .content,:host:hover .container .content{color:#ffce54}:host.selected .container .content{border:1px solid #ffce54;border-radius:3em;background:#ffce54;color:#fff}\n"], dependencies: [{ kind: "component", type: i1$1.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
|
|
648
|
+
RouterMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: RouterMenuItemComponent, selector: "sfc-router-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.selected": "this._selected" } }, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n <span>{{item.label}}</span>\r\n </div>\r\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container{display:flex;align-items:center;justify-content:center;height:100%}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1em;transition:color .5s ease;padding:.5em .8em;width:100%}: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 span{font-size:.7em;font-weight:700}:host .container .content sfc-icon{margin-right:.5em}:host.selected .container .content,:host:hover .container .content{color:#ffce54}:host.selected .container .content{border:1px solid #ffce54;border-radius:3em;background:#ffce54;color:#fff}\n"], dependencies: [{ kind: "component", type: i1$1.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
|
|
649
649
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: RouterMenuItemComponent, decorators: [{
|
|
650
650
|
type: Component,
|
|
651
|
-
args: [{ selector: 'sfc-router-menu-item', template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n <span>{{item.label}}</span>\r\n </div>\r\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container{display:flex;align-items:center;justify-content:center;height:100%}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;transition:color .5s ease;padding:.5em .8em;width:100%}: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 span{font-size:.7em;font-weight:700}:host .container .content sfc-icon{margin-right:.5em}:host.selected .container .content,:host:hover .container .content{color:#ffce54}:host.selected .container .content{border:1px solid #ffce54;border-radius:3em;background:#ffce54;color:#fff}\n"] }]
|
|
651
|
+
args: [{ selector: 'sfc-router-menu-item', template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <sfc-icon [icon]=\"item.icon\" [imageSrc]=\"item.image\"></sfc-icon>\r\n <span>{{item.label}}</span>\r\n </div>\r\n</div>", styles: [":host{cursor:pointer;-webkit-user-select:none;user-select:none}:host .container{display:flex;align-items:center;justify-content:center;height:100%}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1em;transition:color .5s ease;padding:.5em .8em;width:100%}: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 span{font-size:.7em;font-weight:700}:host .container .content sfc-icon{margin-right:.5em}:host.selected .container .content,:host:hover .container .content{color:#ffce54}:host.selected .container .content{border:1px solid #ffce54;border-radius:3em;background:#ffce54;color:#fff}\n"] }]
|
|
652
652
|
}], propDecorators: { item: [{
|
|
653
653
|
type: Input
|
|
654
654
|
}], _selected: [{
|
|
@@ -723,10 +723,10 @@ class StarsComponent {
|
|
|
723
723
|
}
|
|
724
724
|
}
|
|
725
725
|
StarsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StarsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
726
|
-
StarsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: StarsComponent, selector: "sfc-stars", inputs: { value: "value", count: "count" }, ngImport: i0, template: "<div class=\"container\">\r\n <button *ngFor=\"let star of stars; let i = index;\" [ngClass]=\"getStarType(i)\"></button>\r\n</div>", styles: [":host{display:inline-block}:host .container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}:host .container button{width:1.8em;height:1.8em;font-size:1em;background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat;cursor:pointer;border:0;outline:none;transition:transform .5s,background .5s ease}:host .container button:hover{transform:scale(1.1)}:host .container button.none{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.s25{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M196.208 415.2v-224.8l-139.504 20.272 100.944 98.384-23.84 138.928z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.half{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M258.672 64l-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6v-318.4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.s75{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M321.616 190.496l-0.656-0.096-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 63.024 33.136z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.full{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
726
|
+
StarsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: StarsComponent, selector: "sfc-stars", inputs: { value: "value", count: "count" }, ngImport: i0, template: "<div class=\"container\">\r\n <button *ngFor=\"let star of stars; let i = index;\" [ngClass]=\"getStarType(i)\"></button>\r\n</div>", styles: [":host{display:inline-block}:host .container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0}:host .container button{width:1.8em;height:1.8em;font-size:1em;background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat;cursor:pointer;border:0;outline:none;transition:transform .5s,background .5s ease}:host .container button:hover{transform:scale(1.1)}:host .container button.none{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.s25{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M196.208 415.2v-224.8l-139.504 20.272 100.944 98.384-23.84 138.928z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.half{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M258.672 64l-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6v-318.4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.s75{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M321.616 190.496l-0.656-0.096-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 63.024 33.136z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.full{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
727
727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StarsComponent, decorators: [{
|
|
728
728
|
type: Component,
|
|
729
|
-
args: [{ selector: 'sfc-stars', template: "<div class=\"container\">\r\n <button *ngFor=\"let star of stars; let i = index;\" [ngClass]=\"getStarType(i)\"></button>\r\n</div>", styles: [":host{display:inline-block}:host .container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}:host .container button{width:1.8em;height:1.8em;font-size:1em;background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat;cursor:pointer;border:0;outline:none;transition:transform .5s,background .5s ease}:host .container button:hover{transform:scale(1.1)}:host .container button.none{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.s25{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M196.208 415.2v-224.8l-139.504 20.272 100.944 98.384-23.84 138.928z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.half{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M258.672 64l-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6v-318.4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.s75{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M321.616 190.496l-0.656-0.096-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 63.024 33.136z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.full{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}\n"] }]
|
|
729
|
+
args: [{ selector: 'sfc-stars', template: "<div class=\"container\">\r\n <button *ngFor=\"let star of stars; let i = index;\" [ngClass]=\"getStarType(i)\"></button>\r\n</div>", styles: [":host{display:inline-block}:host .container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0}:host .container button{width:1.8em;height:1.8em;font-size:1em;background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat;cursor:pointer;border:0;outline:none;transition:transform .5s,background .5s ease}:host .container button:hover{transform:scale(1.1)}:host .container button.none{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.s25{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M196.208 415.2v-224.8l-139.504 20.272 100.944 98.384-23.84 138.928z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.half{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M258.672 64l-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6v-318.4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.s75{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M321.616 190.496l-0.656-0.096-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 63.024 33.136z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat,url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}:host .container button.full{background:url(\"data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22gold%22%20d%3D%22M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E\") center/cover no-repeat}\n"] }]
|
|
730
730
|
}], propDecorators: { value: [{
|
|
731
731
|
type: Input
|
|
732
732
|
}], count: [{
|
|
@@ -915,10 +915,10 @@ class AvatarComponent {
|
|
|
915
915
|
}
|
|
916
916
|
}
|
|
917
917
|
AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
918
|
-
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", badges: "badges" }, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"avatar-image-container\">\r\n <div class=\"avatar\" (mouseenter)=\"stroke = imageModel.Stroke * STROKE_HOVER_VALUE\"\r\n (mouseleave)=\"stroke = imageModel.Stroke\">\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\r\n <ng-content></ng-content>\r\n </div> \r\n\r\n <sfc-avatar-badge *ngFor=\"let badge of badges\" [model]=\"badge\" [radius]=\"radius\"\r\n [stroke]=\"imageModel.Stroke\" [normalizedRadius]=\"imageModel.NormalizedRadius\"\r\n [background]=\"progressModel.filledColor\">\r\n </sfc-avatar-badge>\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;align-items:center;justify-content:center;flex-direction:column}:host .container .avatar-image-container .avatar{position:relative}:host .container .avatar-image-container .avatar .avatar-image{display:flex;align-items:center;justify-content:center;overflow:hidden}: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{transition:color .5s ease}: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:#
|
|
918
|
+
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", badges: "badges" }, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"avatar-image-container\">\r\n <div class=\"avatar\" (mouseenter)=\"stroke = imageModel.Stroke * STROKE_HOVER_VALUE\"\r\n (mouseleave)=\"stroke = imageModel.Stroke\">\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\r\n <ng-content></ng-content>\r\n </div> \r\n\r\n <sfc-avatar-badge *ngFor=\"let badge of badges\" [model]=\"badge\" [radius]=\"radius\"\r\n [stroke]=\"imageModel.Stroke\" [normalizedRadius]=\"imageModel.NormalizedRadius\"\r\n [background]=\"progressModel.filledColor\">\r\n </sfc-avatar-badge>\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;align-items:center;justify-content:center;flex-direction:column}:host .container .avatar-image-container .avatar{position:relative}:host .container .avatar-image-container .avatar .avatar-image{display:flex;align-items:center;justify-content:center;overflow:hidden}: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{text-align:center;transition:color .5s ease}: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:#ffce54}:host .container .avatar-data-container .fullname,:host .container .avatar-data-container .title{transition:color .5s ease}\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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StarsComponent, selector: "sfc-stars", inputs: ["value", "count"] }, { kind: "component", type: AvatarBadgeComponent, selector: "sfc-avatar-badge", inputs: ["background", "model", "radius", "normalizedRadius", "stroke"] }] });
|
|
919
919
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
920
920
|
type: Component,
|
|
921
|
-
args: [{ selector: 'sfc-avatar', template: "<div class=\"container\">\r\n <div class=\"avatar-image-container\">\r\n <div class=\"avatar\" (mouseenter)=\"stroke = imageModel.Stroke * STROKE_HOVER_VALUE\"\r\n (mouseleave)=\"stroke = imageModel.Stroke\">\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\r\n <ng-content></ng-content>\r\n </div> \r\n\r\n <sfc-avatar-badge *ngFor=\"let badge of badges\" [model]=\"badge\" [radius]=\"radius\"\r\n [stroke]=\"imageModel.Stroke\" [normalizedRadius]=\"imageModel.NormalizedRadius\"\r\n [background]=\"progressModel.filledColor\">\r\n </sfc-avatar-badge>\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;align-items:center;justify-content:center;flex-direction:column}:host .container .avatar-image-container .avatar{position:relative}:host .container .avatar-image-container .avatar .avatar-image{display:flex;align-items:center;justify-content:center;overflow:hidden}: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{transition:color .5s ease}: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:#
|
|
921
|
+
args: [{ selector: 'sfc-avatar', template: "<div class=\"container\">\r\n <div class=\"avatar-image-container\">\r\n <div class=\"avatar\" (mouseenter)=\"stroke = imageModel.Stroke * STROKE_HOVER_VALUE\"\r\n (mouseleave)=\"stroke = imageModel.Stroke\">\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\r\n <ng-content></ng-content>\r\n </div> \r\n\r\n <sfc-avatar-badge *ngFor=\"let badge of badges\" [model]=\"badge\" [radius]=\"radius\"\r\n [stroke]=\"imageModel.Stroke\" [normalizedRadius]=\"imageModel.NormalizedRadius\"\r\n [background]=\"progressModel.filledColor\">\r\n </sfc-avatar-badge>\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;align-items:center;justify-content:center;flex-direction:column}:host .container .avatar-image-container .avatar{position:relative}:host .container .avatar-image-container .avatar .avatar-image{display:flex;align-items:center;justify-content:center;overflow:hidden}: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{text-align:center;transition:color .5s ease}: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:#ffce54}:host .container .avatar-data-container .fullname,:host .container .avatar-data-container .title{transition:color .5s ease}\n"] }]
|
|
922
922
|
}], propDecorators: { radius: [{
|
|
923
923
|
type: Input
|
|
924
924
|
}], stroke: [{
|
|
@@ -1142,10 +1142,10 @@ class TagsComponent {
|
|
|
1142
1142
|
}
|
|
1143
1143
|
}
|
|
1144
1144
|
TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1145
|
-
TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TagsComponent, selector: "sfc-tags", inputs: { tags: "tags" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <sfc-tag *ngFor=\"let tag of tags\" [model]=\"tag\" [sfcComponentSize] [customSize]=\"0.8\"\r\n (remove)=\"onRemove($event)\">\r\n </sfc-tag>\r\n </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}:host .container .content sfc-tag{margin:.2em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "component", type: i1$1.TagComponent, selector: "sfc-tag", inputs: ["model", "disabled"], outputs: ["remove"] }] });
|
|
1145
|
+
TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TagsComponent, selector: "sfc-tags", inputs: { tags: "tags" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <sfc-tag *ngFor=\"let tag of tags\" [model]=\"tag\" [sfcComponentSize] [customSize]=\"0.8\"\r\n (remove)=\"onRemove($event)\">\r\n </sfc-tag>\r\n </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0}:host .container .content sfc-tag{margin:.2em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "component", type: i1$1.TagComponent, selector: "sfc-tag", inputs: ["model", "disabled"], outputs: ["remove"] }] });
|
|
1146
1146
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagsComponent, decorators: [{
|
|
1147
1147
|
type: Component,
|
|
1148
|
-
args: [{ selector: 'sfc-tags', template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <sfc-tag *ngFor=\"let tag of tags\" [model]=\"tag\" [sfcComponentSize] [customSize]=\"0.8\"\r\n (remove)=\"onRemove($event)\">\r\n </sfc-tag>\r\n </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}:host .container .content sfc-tag{margin:.2em}\n"] }]
|
|
1148
|
+
args: [{ selector: 'sfc-tags', template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <sfc-tag *ngFor=\"let tag of tags\" [model]=\"tag\" [sfcComponentSize] [customSize]=\"0.8\"\r\n (remove)=\"onRemove($event)\">\r\n </sfc-tag>\r\n </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0}:host .container .content sfc-tag{margin:.2em}\n"] }]
|
|
1149
1149
|
}], propDecorators: { tags: [{
|
|
1150
1150
|
type: Input
|
|
1151
1151
|
}], remove: [{
|
|
@@ -2137,7 +2137,7 @@ class SortingColumnComponent {
|
|
|
2137
2137
|
});
|
|
2138
2138
|
}
|
|
2139
2139
|
ngOnDestroy() {
|
|
2140
|
-
this._subscription
|
|
2140
|
+
this._subscription?.unsubscribe();
|
|
2141
2141
|
}
|
|
2142
2142
|
}
|
|
2143
2143
|
SortingColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingColumnComponent, deps: [{ token: i1$1.SortingService }], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -2492,10 +2492,10 @@ class TableComponent {
|
|
|
2492
2492
|
}
|
|
2493
2493
|
}
|
|
2494
2494
|
TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableComponent, deps: [{ token: ColumnsToggleService }, { token: WINDOW }, { token: TableSelectService }, { token: i1$1.SortingService }, { token: i0.ChangeDetectorRef }, { token: i1$1.ResizeService }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
|
|
2495
|
-
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TableComponent, selector: "sfc-table", inputs: { position: "position", delimeter: "delimeter", dataType: "dataType", dataToggle: "dataToggle", showColumns: "showColumns", columnsToggle: "columnsToggle", columnsShowOnInit: "columnsShowOnInit", pagination: "pagination", sequence: "sequence", expanded: "expanded", notFoundLabel: "notFoundLabel", loadMoreLabel: "loadMoreLabel", showTotal: "showTotal", totalLabel: "totalLabel", paginationCount: "paginationCount", paginationLimits: "paginationLimits", showLoading: "showLoading", columnContent: "columnContent", rowContent: "rowContent", cardContent: "cardContent", data: "data", data$: "data$", columns: "columns", showColumnsLabel: "showColumnsLabel", hideColumnsLabel: "hideColumnsLabel", resize: "resize", loadType: "loadType", loader: "loader", filter: "filter", predicate$: "predicate$", selectable: "selectable", selectOnClick: "selectOnClick", selectMultiple: "selectMultiple", dataListLabel: "dataListLabel", dataCardsLabel: "dataCardsLabel" }, outputs: { selected: "selected" }, host: { properties: { "class": "this.dataType", "class.loading": "this.loading" } }, providers: [SortingService, TableSelectService, ColumnsToggleService, ResizeService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\">\r\n <div *ngIf=\"showLoading\" class=\"table-loader\"></div>\r\n <div class=\"columns-container\">\r\n <div class=\"columns-actions\">\r\n <div class=\"left\">\r\n <sfc-columns-toggle *ngIf=\"columnsToggle\" [showLabel]=\"showColumnsLabel\" [hideLabel]=\"hideColumnsLabel\">\r\n </sfc-columns-toggle>\r\n </div>\r\n\r\n <div class=\"right\">\r\n <p *ngIf=\"showTotal\">{{totalLabel}}: <span>{{total}}</span></p>\r\n <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n [leftModel]=\"toggleSwitcherLeftModel\" [rightModel]=\"toggleSwitcherRightModel\"\r\n (click)=\"onDataTypeToggle()\">\r\n </sfc-toggle-switcher>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showColumns && columnsToggleService.show\" class=\"columns\">\r\n <div class=\"column\" [style.justifyContent]=\"position\" [style.minWidth]=\"column.calculatedWidth\"\r\n *ngFor=\"let column of tableColumns\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <sfc-selectable-table-column *ngSwitchCase=\"TableColumnType.Selectable\"\r\n [selected]=\"allRowsSelected\">\r\n </sfc-selectable-table-column>\r\n\r\n <sfc-sorting-column *ngSwitchDefault [model]=\"column.sorting!\" [id]=\"column.field\">\r\n\r\n <sfc-template-content [referenceContent]=\"columnContent\" [templatesContent]=\"templates\"\r\n [templateType]=\"TableTemplate.Column\" [defaultContent]=\"defaultColumn\"\r\n [contextData]=\"column\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultColumn>\r\n <sfc-default-table-column [model]=\"column\"></sfc-default-table-column>\r\n </ng-template>\r\n\r\n </sfc-sorting-column>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <sfc-delimeter *ngIf=\"delimeter\" class=\"table-delimeter\"></sfc-delimeter>\r\n\r\n <div class=\"rows-container\">\r\n <sfc-load-container [id]=\"loadContainerId\" [type]=\"LoadContainerType.Table\" [model]=\"loadModel\"\r\n [paginationCount]=\"paginationCount\" [paginationLimits]=\"paginationLimits\" [showLoading]=\"showLoading\"\r\n (handleSuccess)=\"handleSuccess($event)\" (handleLoading)=\"loading = $event\" [emptyLabel]=\"notFoundLabel\"\r\n [loadMoreLabel]=\"loadMoreLabel\">\r\n <div class=\"row\" *ngFor=\"let item of items; index as i;\">\r\n <ng-container [ngSwitch]=\"dataType\">\r\n <sfc-template-content *ngSwitchCase=\"TableDataType.Rows\" [referenceContent]=\"rowContent\"\r\n [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Row\" [defaultContent]=\"defaultRow\"\r\n [contextData]=\"{model: item, columns: tableColumns, position: position}\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultRow>\r\n <sfc-default-table-row [columns]=\"tableColumns\" [model]=\"item\" [position]=\"position\"\r\n [selectOnClick]=\"selectOnClick\">\r\n </sfc-default-table-row>\r\n </ng-template>\r\n\r\n <sfc-template-content *ngSwitchCase=\"TableDataType.Cards\" [referenceContent]=\"cardContent\"\r\n [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Card\"\r\n [defaultContent]=\"defaultCard\" [contextData]=\"{model: item, columns: tableColumns}\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultCard>\r\n <sfc-default-table-card [columns]=\"tableColumns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\">\r\n </sfc-default-table-card>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n\r\n </sfc-load-container>\r\n </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%;position:relative}:host .container .columns-container{display:flex;flex-flow:row wrap;transition:.5s;justify-content:space-between}:host .container .columns-container .columns-actions{display:flex;align-items:center;width:100%}:host .container .columns-container .columns-actions .right{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;margin-left:auto}:host .container .columns-container .columns-actions .right>p{transition:color .5s ease;margin:0;font-size:.8em;padding-right:1em;font-weight:700;-webkit-user-select:none;user-select:none;text-align:center}:host .container .columns-container .columns-actions .right>p,:host-context(.sfc-default-theme) :host .container .columns-container .columns-actions .right>p{color:#545e61}:host-context(.sfc-dark-theme) :host .container .columns-container .columns-actions .right>p{color:#fff}:host .container .columns-container .columns-actions .right>p span{font-size:1.1em;color:#ffce54}:host .container .columns-container .columns{text-align:center;padding:.5em;width:100%;display:flex;flex-flow:row wrap}:host .container .columns-container .columns .column{text-align:center;padding:.5em;display:flex;align-items:center;justify-content:center;box-sizing:border-box}:host .container .rows-container{display:flex;flex-wrap:wrap;justify-content:center;transition:.5s;margin-block:1em 2em}:host .container .rows-container sfc-load-container ::ng-deep>.container .content{background:transparent}:host .container .rows-container sfc-load-container ::ng-deep>.container .content .items{gap:1em;margin:1em 0}:host .container .rows-container sfc-load-container.loading{cursor:initial;z-index:9999}:host .container .rows-container sfc-load-container.loading .preloader{transition:background .5s ease}:host .container .rows-container sfc-load-container.loading .preloader,:host-context(.sfc-default-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:#fff}:host-context(.sfc-dark-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:transparent}:host .container .rows-container .row{display:contents}:host.loading .container .table-loader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;z-index:9998;position:absolute;transition:background-color .5s ease;opacity:.7}:host.loading .container .table-loader,:host-context(.sfc-default-theme) :host.loading .container .table-loader{background-color:#fff}:host-context(.sfc-dark-theme) :host.loading .container .table-loader{background-color:transparent}:host.rows .container .rows-container .row{display:block;width:100%}\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: "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.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: i1$1.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "component", type: i1$1.ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: ["active", "disabled", "leftModel", "rightModel"], outputs: ["toggle"] }, { kind: "component", type: i1$1.LoadContainerComponent, selector: "sfc-load-container", inputs: ["id", "type", "open", "loadMore", "loadMoreLabel", "showEmpty", "emptyLabel", "model", "scrollTarget", "paginationCount", "paginationLimits", "showLoading"], outputs: ["handleError", "handleSuccess", "handleLoading"] }, { kind: "component", type: DefaultTableColumnComponent, selector: "sfc-default-table-column", inputs: ["model"] }, { kind: "component", type: SelectableTableColumnComponent, selector: "sfc-selectable-table-column", inputs: ["selected"] }, { kind: "component", type: ColumnsToggleComponent, selector: "sfc-columns-toggle", inputs: ["showLabel", "hideLabel"] }, { kind: "component", type: SortingColumnComponent, selector: "sfc-sorting-column", inputs: ["id", "model"] }, { kind: "component", type: DefaultTableRowComponent, selector: "sfc-default-table-row" }, { kind: "component", type: DefaultTableCardComponent, selector: "sfc-default-table-card" }] });
|
|
2495
|
+
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TableComponent, selector: "sfc-table", inputs: { position: "position", delimeter: "delimeter", dataType: "dataType", dataToggle: "dataToggle", showColumns: "showColumns", columnsToggle: "columnsToggle", columnsShowOnInit: "columnsShowOnInit", pagination: "pagination", sequence: "sequence", expanded: "expanded", notFoundLabel: "notFoundLabel", loadMoreLabel: "loadMoreLabel", showTotal: "showTotal", totalLabel: "totalLabel", paginationCount: "paginationCount", paginationLimits: "paginationLimits", showLoading: "showLoading", columnContent: "columnContent", rowContent: "rowContent", cardContent: "cardContent", data: "data", data$: "data$", columns: "columns", showColumnsLabel: "showColumnsLabel", hideColumnsLabel: "hideColumnsLabel", resize: "resize", loadType: "loadType", loader: "loader", filter: "filter", predicate$: "predicate$", selectable: "selectable", selectOnClick: "selectOnClick", selectMultiple: "selectMultiple", dataListLabel: "dataListLabel", dataCardsLabel: "dataCardsLabel" }, outputs: { selected: "selected" }, host: { properties: { "class": "this.dataType", "class.loading": "this.loading" } }, providers: [SortingService, TableSelectService, ColumnsToggleService, ResizeService], queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\">\r\n <div *ngIf=\"showLoading\" class=\"table-loader\"></div>\r\n <div class=\"columns-container\">\r\n <div class=\"columns-actions\">\r\n <div class=\"left\">\r\n <sfc-columns-toggle *ngIf=\"columnsToggle\" [showLabel]=\"showColumnsLabel\" [hideLabel]=\"hideColumnsLabel\">\r\n </sfc-columns-toggle>\r\n </div>\r\n\r\n <div class=\"right\">\r\n <p *ngIf=\"showTotal\">{{totalLabel}}: <span>{{total}}</span></p>\r\n <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n [leftModel]=\"toggleSwitcherLeftModel\" [rightModel]=\"toggleSwitcherRightModel\"\r\n (click)=\"onDataTypeToggle()\">\r\n </sfc-toggle-switcher>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showColumns && columnsToggleService.show\" class=\"columns\">\r\n <div class=\"column\" [style.justifyContent]=\"position\" [style.minWidth]=\"column.calculatedWidth\"\r\n *ngFor=\"let column of tableColumns\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n\r\n <ng-container *ngIf=\"selectMultiple\">\r\n <sfc-selectable-table-column *ngSwitchCase=\"TableColumnType.Selectable\"\r\n [selected]=\"allRowsSelected\">\r\n </sfc-selectable-table-column>\r\n </ng-container>\r\n\r\n <sfc-sorting-column *ngSwitchDefault [model]=\"column.sorting!\" [id]=\"column.field\">\r\n\r\n <sfc-template-content [referenceContent]=\"columnContent\" [templatesContent]=\"templates\"\r\n [templateType]=\"TableTemplate.Column\" [defaultContent]=\"defaultColumn\"\r\n [contextData]=\"column\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultColumn>\r\n <sfc-default-table-column [model]=\"column\"></sfc-default-table-column>\r\n </ng-template>\r\n\r\n </sfc-sorting-column>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <sfc-delimeter *ngIf=\"delimeter\" class=\"table-delimeter\"></sfc-delimeter>\r\n\r\n <div class=\"rows-container\">\r\n <sfc-load-container [id]=\"loadContainerId\" [type]=\"LoadContainerType.Table\" [model]=\"loadModel\"\r\n [paginationCount]=\"paginationCount\" [paginationLimits]=\"paginationLimits\" [showLoading]=\"showLoading\"\r\n (handleSuccess)=\"handleSuccess($event)\" (handleLoading)=\"loading = $event\" [emptyLabel]=\"notFoundLabel\"\r\n [loadMoreLabel]=\"loadMoreLabel\">\r\n <div class=\"row\" *ngFor=\"let item of items; index as i;\">\r\n <ng-container [ngSwitch]=\"dataType\">\r\n <sfc-template-content *ngSwitchCase=\"TableDataType.Rows\" [referenceContent]=\"rowContent\"\r\n [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Row\" [defaultContent]=\"defaultRow\"\r\n [contextData]=\"{model: item, columns: tableColumns, position: position}\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultRow>\r\n <sfc-default-table-row [columns]=\"tableColumns\" [model]=\"item\" [position]=\"position\"\r\n [selectOnClick]=\"selectOnClick\">\r\n </sfc-default-table-row>\r\n </ng-template>\r\n\r\n <sfc-template-content *ngSwitchCase=\"TableDataType.Cards\" [referenceContent]=\"cardContent\"\r\n [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Card\"\r\n [defaultContent]=\"defaultCard\" [contextData]=\"{model: item, columns: tableColumns}\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultCard>\r\n <sfc-default-table-card [columns]=\"tableColumns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\">\r\n </sfc-default-table-card>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n\r\n </sfc-load-container>\r\n </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%;position:relative}:host .container .columns-container{display:flex;flex-flow:row wrap;transition:.5s;justify-content:space-between}:host .container .columns-container .columns-actions{display:flex;align-items:center;width:100%}:host .container .columns-container .columns-actions .right{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;margin-left:auto}:host .container .columns-container .columns-actions .right>p{transition:color .5s ease;margin:0;font-size:.8em;padding-right:1em;font-weight:700;-webkit-user-select:none;user-select:none;text-align:center}:host .container .columns-container .columns-actions .right>p,:host-context(.sfc-default-theme) :host .container .columns-container .columns-actions .right>p{color:#545e61}:host-context(.sfc-dark-theme) :host .container .columns-container .columns-actions .right>p{color:#fff}:host .container .columns-container .columns-actions .right>p span{font-size:1.1em;color:#ffce54}:host .container .columns-container .columns{text-align:center;padding:.5em;width:100%;display:flex;flex-flow:row wrap}:host .container .columns-container .columns .column{text-align:center;padding:.5em;display:flex;align-items:center;justify-content:center;box-sizing:border-box}:host .container .rows-container{display:flex;flex-wrap:wrap;justify-content:center;transition:.5s;margin-block:1em 2em}:host .container .rows-container sfc-load-container ::ng-deep>.container .content{background:transparent}:host .container .rows-container sfc-load-container ::ng-deep>.container .content .items{gap:1em;margin:1em 0}:host .container .rows-container sfc-load-container.loading{cursor:initial;z-index:9999}:host .container .rows-container sfc-load-container.loading .preloader{transition:background .5s ease}:host .container .rows-container sfc-load-container.loading .preloader,:host-context(.sfc-default-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:#fff}:host-context(.sfc-dark-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:transparent}:host .container .rows-container .row{display:contents}:host.loading .container .table-loader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;z-index:9998;position:absolute;transition:background-color .5s ease;opacity:.7}:host.loading .container .table-loader,:host-context(.sfc-default-theme) :host.loading .container .table-loader{background-color:#fff}:host-context(.sfc-dark-theme) :host.loading .container .table-loader{background-color:transparent}:host.rows .container .rows-container .row{display:block;width:100%}\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: "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.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "component", type: i1$1.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "component", type: i1$1.ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: ["active", "disabled", "leftModel", "rightModel"], outputs: ["toggle"] }, { kind: "component", type: i1$1.LoadContainerComponent, selector: "sfc-load-container", inputs: ["id", "type", "open", "loadMore", "loadMoreLabel", "showEmpty", "emptyLabel", "model", "scrollTarget", "paginationCount", "paginationLimits", "showLoading"], outputs: ["handleError", "handleSuccess", "handleLoading"] }, { kind: "component", type: DefaultTableColumnComponent, selector: "sfc-default-table-column", inputs: ["model"] }, { kind: "component", type: SelectableTableColumnComponent, selector: "sfc-selectable-table-column", inputs: ["selected"] }, { kind: "component", type: ColumnsToggleComponent, selector: "sfc-columns-toggle", inputs: ["showLabel", "hideLabel"] }, { kind: "component", type: SortingColumnComponent, selector: "sfc-sorting-column", inputs: ["id", "model"] }, { kind: "component", type: DefaultTableRowComponent, selector: "sfc-default-table-row" }, { kind: "component", type: DefaultTableCardComponent, selector: "sfc-default-table-card" }] });
|
|
2496
2496
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableComponent, decorators: [{
|
|
2497
2497
|
type: Component,
|
|
2498
|
-
args: [{ selector: 'sfc-table', providers: [SortingService, TableSelectService, ColumnsToggleService, ResizeService], template: "<div class=\"container\">\r\n <div *ngIf=\"showLoading\" class=\"table-loader\"></div>\r\n <div class=\"columns-container\">\r\n <div class=\"columns-actions\">\r\n <div class=\"left\">\r\n <sfc-columns-toggle *ngIf=\"columnsToggle\" [showLabel]=\"showColumnsLabel\" [hideLabel]=\"hideColumnsLabel\">\r\n </sfc-columns-toggle>\r\n </div>\r\n\r\n <div class=\"right\">\r\n <p *ngIf=\"showTotal\">{{totalLabel}}: <span>{{total}}</span></p>\r\n <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n [leftModel]=\"toggleSwitcherLeftModel\" [rightModel]=\"toggleSwitcherRightModel\"\r\n (click)=\"onDataTypeToggle()\">\r\n </sfc-toggle-switcher>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showColumns && columnsToggleService.show\" class=\"columns\">\r\n <div class=\"column\" [style.justifyContent]=\"position\" [style.minWidth]=\"column.calculatedWidth\"\r\n *ngFor=\"let column of tableColumns\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <sfc-selectable-table-column *ngSwitchCase=\"TableColumnType.Selectable\"\r\n
|
|
2498
|
+
args: [{ selector: 'sfc-table', providers: [SortingService, TableSelectService, ColumnsToggleService, ResizeService], template: "<div class=\"container\">\r\n <div *ngIf=\"showLoading\" class=\"table-loader\"></div>\r\n <div class=\"columns-container\">\r\n <div class=\"columns-actions\">\r\n <div class=\"left\">\r\n <sfc-columns-toggle *ngIf=\"columnsToggle\" [showLabel]=\"showColumnsLabel\" [hideLabel]=\"hideColumnsLabel\">\r\n </sfc-columns-toggle>\r\n </div>\r\n\r\n <div class=\"right\">\r\n <p *ngIf=\"showTotal\">{{totalLabel}}: <span>{{total}}</span></p>\r\n <sfc-toggle-switcher *ngIf=\"dataToggle\" [active]=\"dataType === TableDataType.Cards\"\r\n [leftModel]=\"toggleSwitcherLeftModel\" [rightModel]=\"toggleSwitcherRightModel\"\r\n (click)=\"onDataTypeToggle()\">\r\n </sfc-toggle-switcher>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showColumns && columnsToggleService.show\" class=\"columns\">\r\n <div class=\"column\" [style.justifyContent]=\"position\" [style.minWidth]=\"column.calculatedWidth\"\r\n *ngFor=\"let column of tableColumns\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n\r\n <ng-container *ngIf=\"selectMultiple\">\r\n <sfc-selectable-table-column *ngSwitchCase=\"TableColumnType.Selectable\"\r\n [selected]=\"allRowsSelected\">\r\n </sfc-selectable-table-column>\r\n </ng-container>\r\n\r\n <sfc-sorting-column *ngSwitchDefault [model]=\"column.sorting!\" [id]=\"column.field\">\r\n\r\n <sfc-template-content [referenceContent]=\"columnContent\" [templatesContent]=\"templates\"\r\n [templateType]=\"TableTemplate.Column\" [defaultContent]=\"defaultColumn\"\r\n [contextData]=\"column\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultColumn>\r\n <sfc-default-table-column [model]=\"column\"></sfc-default-table-column>\r\n </ng-template>\r\n\r\n </sfc-sorting-column>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <sfc-delimeter *ngIf=\"delimeter\" class=\"table-delimeter\"></sfc-delimeter>\r\n\r\n <div class=\"rows-container\">\r\n <sfc-load-container [id]=\"loadContainerId\" [type]=\"LoadContainerType.Table\" [model]=\"loadModel\"\r\n [paginationCount]=\"paginationCount\" [paginationLimits]=\"paginationLimits\" [showLoading]=\"showLoading\"\r\n (handleSuccess)=\"handleSuccess($event)\" (handleLoading)=\"loading = $event\" [emptyLabel]=\"notFoundLabel\"\r\n [loadMoreLabel]=\"loadMoreLabel\">\r\n <div class=\"row\" *ngFor=\"let item of items; index as i;\">\r\n <ng-container [ngSwitch]=\"dataType\">\r\n <sfc-template-content *ngSwitchCase=\"TableDataType.Rows\" [referenceContent]=\"rowContent\"\r\n [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Row\" [defaultContent]=\"defaultRow\"\r\n [contextData]=\"{model: item, columns: tableColumns, position: position}\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultRow>\r\n <sfc-default-table-row [columns]=\"tableColumns\" [model]=\"item\" [position]=\"position\"\r\n [selectOnClick]=\"selectOnClick\">\r\n </sfc-default-table-row>\r\n </ng-template>\r\n\r\n <sfc-template-content *ngSwitchCase=\"TableDataType.Cards\" [referenceContent]=\"cardContent\"\r\n [templatesContent]=\"templates\" [templateType]=\"TableTemplate.Card\"\r\n [defaultContent]=\"defaultCard\" [contextData]=\"{model: item, columns: tableColumns}\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultCard>\r\n <sfc-default-table-card [columns]=\"tableColumns\" [model]=\"item\" [selectOnClick]=\"selectOnClick\">\r\n </sfc-default-table-card>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n\r\n </sfc-load-container>\r\n </div>\r\n</div>", styles: [":host .container{display:block;margin:2em auto;width:90%;position:relative}:host .container .columns-container{display:flex;flex-flow:row wrap;transition:.5s;justify-content:space-between}:host .container .columns-container .columns-actions{display:flex;align-items:center;width:100%}:host .container .columns-container .columns-actions .right{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;margin-left:auto}:host .container .columns-container .columns-actions .right>p{transition:color .5s ease;margin:0;font-size:.8em;padding-right:1em;font-weight:700;-webkit-user-select:none;user-select:none;text-align:center}:host .container .columns-container .columns-actions .right>p,:host-context(.sfc-default-theme) :host .container .columns-container .columns-actions .right>p{color:#545e61}:host-context(.sfc-dark-theme) :host .container .columns-container .columns-actions .right>p{color:#fff}:host .container .columns-container .columns-actions .right>p span{font-size:1.1em;color:#ffce54}:host .container .columns-container .columns{text-align:center;padding:.5em;width:100%;display:flex;flex-flow:row wrap}:host .container .columns-container .columns .column{text-align:center;padding:.5em;display:flex;align-items:center;justify-content:center;box-sizing:border-box}:host .container .rows-container{display:flex;flex-wrap:wrap;justify-content:center;transition:.5s;margin-block:1em 2em}:host .container .rows-container sfc-load-container ::ng-deep>.container .content{background:transparent}:host .container .rows-container sfc-load-container ::ng-deep>.container .content .items{gap:1em;margin:1em 0}:host .container .rows-container sfc-load-container.loading{cursor:initial;z-index:9999}:host .container .rows-container sfc-load-container.loading .preloader{transition:background .5s ease}:host .container .rows-container sfc-load-container.loading .preloader,:host-context(.sfc-default-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:#fff}:host-context(.sfc-dark-theme) :host .container .rows-container sfc-load-container.loading .preloader{background:transparent}:host .container .rows-container .row{display:contents}:host.loading .container .table-loader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;z-index:9998;position:absolute;transition:background-color .5s ease;opacity:.7}:host.loading .container .table-loader,:host-context(.sfc-default-theme) :host.loading .container .table-loader{background-color:#fff}:host-context(.sfc-dark-theme) :host.loading .container .table-loader{background-color:transparent}:host.rows .container .rows-container .row{display:block;width:100%}\n"] }]
|
|
2499
2499
|
}], ctorParameters: function () { return [{ type: ColumnsToggleService }, { type: Window, decorators: [{
|
|
2500
2500
|
type: Inject,
|
|
2501
2501
|
args: [WINDOW]
|
|
@@ -4411,4 +4411,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
4411
4411
|
|
|
4412
4412
|
export { AvatarBadgePosition, AvatarComponent, CarouselComponent, CarouselSlideDirective, ChartComponent, ChartThemeService, ColumnsToggleComponent, DEFAULT_CHART_OPTIONS, DefaultTableCardComponent, DefaultTableColumnComponent, DefaultTableRowComponent, DropdownMenuComponent, ExpandedTableRowComponent, ExpandedTableRowTemplate, NavigationMenuComponent, NgxSfcComponentsModule, NotificationComponent, NotificationTemplate, NotificationType, ProgressCircleComponent, ProgressColor, ProgressLineComponent, ProgressSemiCircleComponent, RouterMenuComponent, SelectableTableColumnComponent, SideMenuComponent, SideMenuItemType, SliderComponent, SliderType, StarsComponent, TabLabelIconComponent, TabLabelIconSliderComponent, TabLabelLineComponent, TabLabelLineSliderComponent, TableColumnType, TableComponent, TableDataType, TableSelectService, TableTemplate, TabsComponent, TabsTemplate, TagsComponent, TimelineComponent, TimelineItemPosition, getProgressColorDefaultFunc, getProgressColorDynamicallyFunc };
|
|
4413
4413
|
//# sourceMappingURL=ngx-sfc-components.mjs.map
|
|
4414
|
-
//# sourceMappingURL=ngx-sfc-components.mjs.map
|