ngx-sfc-components 0.0.27 → 0.0.29

package/fesm2020/ngx-sfc-components.mjs

@@ -1137,15 +1137,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 class TagsComponent {
     constructor() {
         this.tags = [];
+        this.remove = new EventEmitter();
+    }
+    onRemove(model) {
+        this.remove.emit(model);
     }
 }
 TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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 tags\" [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"] });
+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\" [remove]=\"tag.remove\" [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: i3.ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "component", type: i3.TagComponent, selector: "sfc-tag", inputs: ["remove", "model"], outputs: ["remove"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-tags', template: "<div class=\"container\">\r\n    <div class=\"tags\">\r\n        <!-- <sfc-tag *ngFor=\"let tag of tags\" [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"] }]
+            args: [{ selector: 'sfc-tags', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <sfc-tag *ngFor=\"let tag of tags\" [remove]=\"tag.remove\" [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"] }]
         }], propDecorators: { tags: [{
                 type: Input
+            }], remove: [{
+                type: Output
             }] } });
 
 var SliderButtonType;
@@ -4171,20 +4177,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: ['document:visibilitychange']
             }] } });
 
-class TagComponent {
-    constructor() {
-        this.model = { label: CommonConstants.EMPTY_STRING };
-    }
-}
-TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TagComponent, decorators: [{
-            type: Component,
-            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"] }]
-        }], propDecorators: { model: [{
-                type: Input
-            }] } });
-
 Chart.register(Title, Tooltip, Filler, Legend, LineController, LineElement, PointElement, LinearScale, CategoryScale, BarController, BarElement, DoughnutController, ArcElement, RadarController, RadialLinearScale, PieController, PolarAreaController, BubbleController, ScatterController, TimeSeriesScale);
 class NgxSfcComponentsModule {
 }
@@ -4219,7 +4211,6 @@ NgxSfcComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         ProgressCircleComponent,
         // Tags
         TagsComponent,
-        TagComponent,
         // Slider
         SliderComponent,
         SliderItemComponent,
@@ -4319,7 +4310,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         ProgressCircleComponent,
                         // Tags
                         TagsComponent,
-                        TagComponent,
                         // Slider
                         SliderComponent,
                         SliderItemComponent,