ngx-sfc-components 0.0.26 → 0.0.28
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/no-export-index.mjs +2 -2
- package/esm2020/lib/components/table/parts/content/cards/default/default-table-card.component.mjs +2 -2
- package/esm2020/lib/components/table/parts/content/rows/default/default-table-row.component.mjs +2 -2
- package/esm2020/lib/components/tabs/parts/labels/tab-label-line/tab-label-line.component.mjs +2 -2
- package/esm2020/lib/components/tags/parts/tag/tag.component.mjs +6 -6
- package/esm2020/lib/components/tags/tags.component.mjs +7 -4
- package/esm2020/lib/ngx-sfc-components.module.mjs +4 -4
- package/fesm2015/ngx-sfc-components.mjs +27 -25
- package/fesm2015/ngx-sfc-components.mjs.map +1 -1
- package/fesm2020/ngx-sfc-components.mjs +27 -25
- package/fesm2020/ngx-sfc-components.mjs.map +1 -1
- package/lib/components/no-export-index.d.ts +1 -1
- package/lib/components/tags/parts/tag/tag.component.d.ts +3 -3
- package/lib/components/tags/tags.component.d.ts +3 -1
- package/lib/ngx-sfc-components.module.d.ts +1 -1
- package/package.json +2 -2
|
@@ -132,10 +132,10 @@ class TabLabelLineComponent extends TabLabelContentBase {
|
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
134
|
TabLabelLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelLineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
135
|
-
TabLabelLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabLabelLineComponent, selector: "sfc-tab-label-line", inputs: { image: "image" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <sfc-icon [icon]=\"tabLineIcon\" [imageSrc]=\"image\"></sfc-icon>\r\n <span>{{label}}</span>\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer
|
|
135
|
+
TabLabelLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabLabelLineComponent, selector: "sfc-tab-label-line", inputs: { image: "image" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <sfc-icon [icon]=\"tabLineIcon\" [imageSrc]=\"image\"></sfc-icon>\r\n <span>{{label}}</span>\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer}:host.disabled{cursor:default;pointer-events:none}:host.disabled .container .content{transition:color .5s ease}:host.disabled .container .content,:host-context(.sfc-default-theme) :host.disabled .container .content{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .content{color:#656d78}:host.selected:not(.disabled) .container .content,:host:hover:not(.disabled) .container .content{color:#ffce54}:host .container{width:100%;height: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;overflow:hidden;font-weight:700;-webkit-user-select:none;user-select:none;transition:color .5s ease}: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{text-overflow:ellipsis;overflow:hidden}:host .container .content sfc-icon{display:none}@media (max-width: 425px){:host{padding-bottom:.6em}:host .container .content{padding:.8em;border-radius:.3em;text-overflow:initial}:host .container .content sfc-icon{display:block}:host .container .content span{display:none}}\n"], dependencies: [{ kind: "component", type: i3.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
|
|
136
136
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabLabelLineComponent, decorators: [{
|
|
137
137
|
type: Component,
|
|
138
|
-
args: [{ selector: 'sfc-tab-label-line', template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <sfc-icon [icon]=\"tabLineIcon\" [imageSrc]=\"image\"></sfc-icon>\r\n <span>{{label}}</span>\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer
|
|
138
|
+
args: [{ selector: 'sfc-tab-label-line', template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <sfc-icon [icon]=\"tabLineIcon\" [imageSrc]=\"image\"></sfc-icon>\r\n <span>{{label}}</span>\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [":host{width:100%;cursor:pointer}:host.disabled{cursor:default;pointer-events:none}:host.disabled .container .content{transition:color .5s ease}:host.disabled .container .content,:host-context(.sfc-default-theme) :host.disabled .container .content{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .content{color:#656d78}:host.selected:not(.disabled) .container .content,:host:hover:not(.disabled) .container .content{color:#ffce54}:host .container{width:100%;height: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;overflow:hidden;font-weight:700;-webkit-user-select:none;user-select:none;transition:color .5s ease}: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{text-overflow:ellipsis;overflow:hidden}:host .container .content sfc-icon{display:none}@media (max-width: 425px){:host{padding-bottom:.6em}:host .container .content{padding:.8em;border-radius:.3em;text-overflow:initial}:host .container .content sfc-icon{display:block}:host .container .content span{display:none}}\n"] }]
|
|
139
139
|
}], propDecorators: { image: [{
|
|
140
140
|
type: Input
|
|
141
141
|
}] } });
|
|
@@ -1134,32 +1134,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
1134
1134
|
args: ['class.reversed']
|
|
1135
1135
|
}] } });
|
|
1136
1136
|
|
|
1137
|
-
class TagComponent {
|
|
1138
|
-
constructor() {
|
|
1139
|
-
this.model = { label: CommonConstants.EMPTY_STRING };
|
|
1140
|
-
}
|
|
1141
|
-
}
|
|
1142
|
-
TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1143
|
-
TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TagComponent, selector: "sfc-tag", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n <a class=\"tag\">\r\n <div class=\"content\">\r\n <sfc-icon *ngIf=\"model.icon || model.imageSrc\" [icon]=\"model.icon\" [imageSrc]=\"model.imageSrc\"></sfc-icon>\r\n <span>{{model.label}}</span>\r\n </div>\r\n </a>\r\n</div>", styles: [":host{display:inline-flex;margin:0 .18em}:host .container{margin-top:.3em;font-size:.8em;-webkit-user-select:none;user-select:none}:host .container .tag{display:inline-flex;border-radius:1em;font-weight:700;color:#545e61;transition:color .5s ease;transition:background-color .5s ease;transition:color .5s ease,background-color .5s ease;border:.125em solid transparent;padding:.3em}:host .container .tag,:host-context(.sfc-default-theme) :host .container .tag{color:#fff}:host-context(.sfc-dark-theme) :host .container .tag{color:#545e61}:host .container .tag,:host-context(.sfc-default-theme) :host .container .tag{background-color:#545e61}:host-context(.sfc-dark-theme) :host .container .tag{background-color:#fff}:host .container .tag .content{display:flex;align-items:center;text-align:center;padding:0 .8em}:host .container .tag .content fa-icon{margin-right:.18em}:host .container:hover .tag{background-color:#ffce54;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
|
|
1144
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagComponent, decorators: [{
|
|
1145
|
-
type: Component,
|
|
1146
|
-
args: [{ selector: 'sfc-tag', template: "<div class=\"container\">\r\n <a class=\"tag\">\r\n <div class=\"content\">\r\n <sfc-icon *ngIf=\"model.icon || model.imageSrc\" [icon]=\"model.icon\" [imageSrc]=\"model.imageSrc\"></sfc-icon>\r\n <span>{{model.label}}</span>\r\n </div>\r\n </a>\r\n</div>", styles: [":host{display:inline-flex;margin:0 .18em}:host .container{margin-top:.3em;font-size:.8em;-webkit-user-select:none;user-select:none}:host .container .tag{display:inline-flex;border-radius:1em;font-weight:700;color:#545e61;transition:color .5s ease;transition:background-color .5s ease;transition:color .5s ease,background-color .5s ease;border:.125em solid transparent;padding:.3em}:host .container .tag,:host-context(.sfc-default-theme) :host .container .tag{color:#fff}:host-context(.sfc-dark-theme) :host .container .tag{color:#545e61}:host .container .tag,:host-context(.sfc-default-theme) :host .container .tag{background-color:#545e61}:host-context(.sfc-dark-theme) :host .container .tag{background-color:#fff}:host .container .tag .content{display:flex;align-items:center;text-align:center;padding:0 .8em}:host .container .tag .content fa-icon{margin-right:.18em}:host .container:hover .tag{background-color:#ffce54;color:#fff}\n"] }]
|
|
1147
|
-
}], propDecorators: { model: [{
|
|
1148
|
-
type: Input
|
|
1149
|
-
}] } });
|
|
1150
|
-
|
|
1151
1137
|
class TagsComponent {
|
|
1152
1138
|
constructor() {
|
|
1153
1139
|
this.tags = [];
|
|
1140
|
+
this.tags1 = [];
|
|
1154
1141
|
}
|
|
1155
1142
|
}
|
|
1156
1143
|
TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1157
|
-
TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TagsComponent, selector: "sfc-tags", inputs: { tags: "tags" }, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"tags\">\r\n <sfc-tag *ngFor=\"let tag of
|
|
1144
|
+
TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TagsComponent, selector: "sfc-tags", inputs: { tags: "tags", tags1: "tags1" }, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"tags\">\r\n <sfc-tag *ngFor=\"let tag of tags1\" [model]=\"tag\"></sfc-tag> \r\n </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .tags{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.TagComponent, selector: "sfc-tag", inputs: ["close", "model"], outputs: ["remove"] }] });
|
|
1158
1145
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagsComponent, decorators: [{
|
|
1159
1146
|
type: Component,
|
|
1160
|
-
args: [{ selector: 'sfc-tags', template: "<div class=\"container\">\r\n <div class=\"tags\">\r\n <sfc-tag *ngFor=\"let tag of
|
|
1147
|
+
args: [{ selector: 'sfc-tags', template: "<div class=\"container\">\r\n <div class=\"tags\">\r\n <sfc-tag *ngFor=\"let tag of tags1\" [model]=\"tag\"></sfc-tag> \r\n </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .tags{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}\n"] }]
|
|
1161
1148
|
}], propDecorators: { tags: [{
|
|
1162
1149
|
type: Input
|
|
1150
|
+
}], tags1: [{
|
|
1151
|
+
type: Input
|
|
1163
1152
|
}] } });
|
|
1164
1153
|
|
|
1165
1154
|
var SliderButtonType;
|
|
@@ -2242,19 +2231,19 @@ class DefaultTableRowComponent extends BaseDefaultTableContentComponent {
|
|
|
2242
2231
|
}
|
|
2243
2232
|
}
|
|
2244
2233
|
DefaultTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTableRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2245
|
-
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 [style.width]=\"column.calculatedWidth\" [style.text-align]=\"position\" class=\"content-container\"\r\n *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.selected || false\" [type]=\"CheckmarkType.Circle\"></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.data[column.field]}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{display:block;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);margin:1em 0;
|
|
2234
|
+
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 [style.width]=\"column.calculatedWidth\" [style.text-align]=\"position\" class=\"content-container\"\r\n *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.selected || false\" [type]=\"CheckmarkType.Circle\"></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.data[column.field]}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{display:block;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);margin:1em 0;cursor:default;-webkit-user-select:none;user-select:none}: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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type"] }] });
|
|
2246
2235
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTableRowComponent, decorators: [{
|
|
2247
2236
|
type: Component,
|
|
2248
|
-
args: [{ selector: 'sfc-default-table-row', template: "<div class=\"container\">\r\n <div [style.width]=\"column.calculatedWidth\" [style.text-align]=\"position\" class=\"content-container\"\r\n *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.selected || false\" [type]=\"CheckmarkType.Circle\"></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.data[column.field]}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{display:block;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);margin:1em 0;
|
|
2237
|
+
args: [{ selector: 'sfc-default-table-row', template: "<div class=\"container\">\r\n <div [style.width]=\"column.calculatedWidth\" [style.text-align]=\"position\" class=\"content-container\"\r\n *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.selected || false\" [type]=\"CheckmarkType.Circle\"></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.data[column.field]}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{display:block;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);margin:1em 0;cursor:default;-webkit-user-select:none;user-select:none}: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"] }]
|
|
2249
2238
|
}] });
|
|
2250
2239
|
|
|
2251
2240
|
class DefaultTableCardComponent extends BaseDefaultTableContentComponent {
|
|
2252
2241
|
}
|
|
2253
2242
|
DefaultTableCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTableCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2254
|
-
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.selected || false\" [type]=\"CheckmarkType.Circle\"></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.data[column.field]}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{display:inline-block;box-shadow:0 .625em 1.25em #00000030,0 .3753em .3753em #0000003b;transition:all .2s ease-in-out;border-radius:.75em;margin:.5em;
|
|
2243
|
+
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.selected || false\" [type]=\"CheckmarkType.Circle\"></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.data[column.field]}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{display:inline-block;box-shadow:0 .625em 1.25em #00000030,0 .3753em .3753em #0000003b;transition:all .2s ease-in-out;border-radius:.75em;margin:.5em;cursor:default;-webkit-user-select:none;user-select:none}: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: i3.CheckmarkComponent, selector: "sfc-checkmark", inputs: ["active", "disabled", "icon", "type"] }] });
|
|
2255
2244
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultTableCardComponent, decorators: [{
|
|
2256
2245
|
type: Component,
|
|
2257
|
-
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.selected || false\" [type]=\"CheckmarkType.Circle\"></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.data[column.field]}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{display:inline-block;box-shadow:0 .625em 1.25em #00000030,0 .3753em .3753em #0000003b;transition:all .2s ease-in-out;border-radius:.75em;margin:.5em;
|
|
2246
|
+
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.selected || false\" [type]=\"CheckmarkType.Circle\"></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.data[column.field]}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{display:inline-block;box-shadow:0 .625em 1.25em #00000030,0 .3753em .3753em #0000003b;transition:all .2s ease-in-out;border-radius:.75em;margin:.5em;cursor:default;-webkit-user-select:none;user-select:none}: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"] }]
|
|
2258
2247
|
}] });
|
|
2259
2248
|
|
|
2260
2249
|
class TableComponent {
|
|
@@ -4185,6 +4174,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
4185
4174
|
args: ['document:visibilitychange']
|
|
4186
4175
|
}] } });
|
|
4187
4176
|
|
|
4177
|
+
class Tag2Component {
|
|
4178
|
+
constructor() {
|
|
4179
|
+
this.model = { label: CommonConstants.EMPTY_STRING };
|
|
4180
|
+
}
|
|
4181
|
+
}
|
|
4182
|
+
Tag2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: Tag2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4183
|
+
Tag2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: Tag2Component, selector: "sfc-tag2", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n <a class=\"tag\">\r\n <div class=\"content\">\r\n <sfc-icon *ngIf=\"model.icon || model.imageSrc\" [icon]=\"model.icon\" [imageSrc]=\"model.imageSrc\"></sfc-icon>\r\n <span>{{model.label}}</span>\r\n </div>\r\n </a>\r\n</div>", styles: [":host{display:inline-flex;margin:0 .18em}:host .container{margin-top:.3em;font-size:.8em;-webkit-user-select:none;user-select:none}:host .container .tag{display:inline-flex;border-radius:1em;font-weight:700;color:#545e61;transition:color .5s ease;transition:background-color .5s ease;transition:color .5s ease,background-color .5s ease;border:.125em solid transparent;padding:.3em}:host .container .tag,:host-context(.sfc-default-theme) :host .container .tag{color:#fff}:host-context(.sfc-dark-theme) :host .container .tag{color:#545e61}:host .container .tag,:host-context(.sfc-default-theme) :host .container .tag{background-color:#545e61}:host-context(.sfc-dark-theme) :host .container .tag{background-color:#fff}:host .container .tag .content{display:flex;align-items:center;text-align:center;padding:0 .8em}:host .container .tag .content fa-icon{margin-right:.18em}:host .container:hover .tag{background-color:#ffce54;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
|
|
4184
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: Tag2Component, decorators: [{
|
|
4185
|
+
type: Component,
|
|
4186
|
+
args: [{ selector: 'sfc-tag2', template: "<div class=\"container\">\r\n <a class=\"tag\">\r\n <div class=\"content\">\r\n <sfc-icon *ngIf=\"model.icon || model.imageSrc\" [icon]=\"model.icon\" [imageSrc]=\"model.imageSrc\"></sfc-icon>\r\n <span>{{model.label}}</span>\r\n </div>\r\n </a>\r\n</div>", styles: [":host{display:inline-flex;margin:0 .18em}:host .container{margin-top:.3em;font-size:.8em;-webkit-user-select:none;user-select:none}:host .container .tag{display:inline-flex;border-radius:1em;font-weight:700;color:#545e61;transition:color .5s ease;transition:background-color .5s ease;transition:color .5s ease,background-color .5s ease;border:.125em solid transparent;padding:.3em}:host .container .tag,:host-context(.sfc-default-theme) :host .container .tag{color:#fff}:host-context(.sfc-dark-theme) :host .container .tag{color:#545e61}:host .container .tag,:host-context(.sfc-default-theme) :host .container .tag{background-color:#545e61}:host-context(.sfc-dark-theme) :host .container .tag{background-color:#fff}:host .container .tag .content{display:flex;align-items:center;text-align:center;padding:0 .8em}:host .container .tag .content fa-icon{margin-right:.18em}:host .container:hover .tag{background-color:#ffce54;color:#fff}\n"] }]
|
|
4187
|
+
}], propDecorators: { model: [{
|
|
4188
|
+
type: Input
|
|
4189
|
+
}] } });
|
|
4190
|
+
|
|
4188
4191
|
Chart.register(Title, Tooltip, Filler, Legend, LineController, LineElement, PointElement, LinearScale, CategoryScale, BarController, BarElement, DoughnutController, ArcElement, RadarController, RadialLinearScale, PieController, PolarAreaController, BubbleController, ScatterController, TimeSeriesScale);
|
|
4189
4192
|
class NgxSfcComponentsModule {
|
|
4190
4193
|
}
|
|
@@ -4219,7 +4222,7 @@ NgxSfcComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
|
|
|
4219
4222
|
ProgressCircleComponent,
|
|
4220
4223
|
// Tags
|
|
4221
4224
|
TagsComponent,
|
|
4222
|
-
|
|
4225
|
+
Tag2Component,
|
|
4223
4226
|
// Slider
|
|
4224
4227
|
SliderComponent,
|
|
4225
4228
|
SliderItemComponent,
|
|
@@ -4319,7 +4322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
4319
4322
|
ProgressCircleComponent,
|
|
4320
4323
|
// Tags
|
|
4321
4324
|
TagsComponent,
|
|
4322
|
-
|
|
4325
|
+
Tag2Component,
|
|
4323
4326
|
// Slider
|
|
4324
4327
|
SliderComponent,
|
|
4325
4328
|
SliderItemComponent,
|
|
@@ -4402,4 +4405,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
4402
4405
|
|
|
4403
4406
|
export { AvatarBadgePosition, AvatarComponent, CarouselComponent, CarouselSlideDirective, ChartComponent, ChartThemeService, ColumnsToggleComponent, 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 };
|
|
4404
4407
|
//# sourceMappingURL=ngx-sfc-components.mjs.map
|
|
4405
|
-
//# sourceMappingURL=ngx-sfc-components.mjs.map
|