ngx-sfc-common 0.0.32 → 0.0.34

package/fesm2020/ngx-sfc-common.mjs

@@ -1569,6 +1569,11 @@ function findChangedPropertyKey(previous, current) {
     const path = findChangedPropertyPath(previous, current), parts = path?.split('.');
     return parts && parts.length ? parts[parts.length - 1] : undefined;
 }
+/**
+ * Clone object without any reference
+ * @param value  Object to clone
+ * @returns Cloned object
+ */
 function deepClone(value) {
     return JSON.parse(JSON.stringify(value));
 }
@@ -3523,12 +3528,12 @@ TagConstants.DEFAULT_LABEL = 'Tag';
 
 class TagComponent {
     constructor() {
-        this.remove = false;
         this.model = {
             key: CommonConstants.DEFAULT_KEY_VALUE,
             label: TagConstants.DEFAULT_LABEL
         };
         this.removeAction = new EventEmitter();
+        this.disabled = false;
     }
     _onClick() { if (this.model.click)
         this.model.click(this.model); }
@@ -3537,17 +3542,20 @@ class TagComponent {
     }
 }
 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: { remove: "remove", model: "model" }, outputs: { removeAction: "remove" }, host: { listeners: { "click": "_onClick()" } }, ngImport: i0, template: "<div class=\"container\">\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        <sfc-close *ngIf=\"model.remove\" (click)=\"onRemove()\"></sfc-close>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .content{display:flex;align-items:center;text-align:center;padding:.3em .8em;display:inline-flex;border-radius:1em;font-weight:700;-webkit-user-select:none;user-select:none;transition:color .5s ease;transition:background-color .5s ease;transition:color .5s ease,background-color .5s ease,border-color .5s ease;border:.125em solid transparent}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{color:#fff}:host-context(.sfc-dark-theme) :host .container .content{color:#545e61}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{background-color:#545e61}:host-context(.sfc-dark-theme) :host .container .content{background-color:#fff}:host .container .content sfc-icon{margin-right:.2em}:host .container .content sfc-icon ::ng-deep .container img{max-width:1em;max-height:1em}:host .container .content sfc-close{margin-left:.6em;color:#ed5565;font-size:.8em}:host:hover .container .content{background-color:#ffce54;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CloseComponent, selector: "sfc-close" }, { kind: "component", type: IconComponent, selector: "sfc-icon", inputs: ["icon", "imageSrc"] }] });
+TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TagComponent, selector: "sfc-tag", inputs: { model: "model", disabled: "disabled" }, outputs: { removeAction: "remove" }, host: { listeners: { "click": "_onClick()" }, properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <sfc-icon [icon]=\"model.icon\" [imageSrc]=\"model.imageSrc\"></sfc-icon>\r\n        <span>{{model.label}}</span>\r\n        <sfc-close *ngIf=\"model.allowRemove\" (click)=\"onRemove()\"></sfc-close>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;-webkit-user-select:none;user-select:none;display:inline-block}:host .container .content{display:flex;align-items:center;text-align:center;padding:.3em .8em;display:inline-flex;border-radius:1em;font-weight:700;-webkit-user-select:none;user-select:none;transition:color .5s ease;transition:background-color .5s ease;transition:color .5s ease,background-color .5s ease,border-color .5s ease;border:.125em solid transparent}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{color:#fff}:host-context(.sfc-dark-theme) :host .container .content{color:#545e61}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{background-color:#545e61}:host-context(.sfc-dark-theme) :host .container .content{background-color:#fff}:host .container .content sfc-icon{margin-right:.2em}:host .container .content sfc-icon ::ng-deep .container img{max-width:1em;max-height:1em}:host .container .content sfc-close{margin-left:.6em;color:#ed5565;font-size:.8em}:host:hover .container .content{background-color:#ffce54;color:#fff}:host.disabled .container .content{pointer-events:none;transition:color .5s ease;transition:background-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:#e9e9e9}:host.disabled .container .content,:host-context(.sfc-default-theme) :host.disabled .container .content{background-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container .content{background-color:#656d78}:host.disabled .container .content sfc-close{transition:color .5s ease}:host.disabled .container .content sfc-close,:host-context(.sfc-default-theme) :host.disabled .container .content sfc-close{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .content sfc-close{color:#656d78}:host.disabled:hover .container .content{background-color:initial}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CloseComponent, selector: "sfc-close" }, { kind: "component", type: 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    <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        <sfc-close *ngIf=\"model.remove\" (click)=\"onRemove()\"></sfc-close>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .content{display:flex;align-items:center;text-align:center;padding:.3em .8em;display:inline-flex;border-radius:1em;font-weight:700;-webkit-user-select:none;user-select:none;transition:color .5s ease;transition:background-color .5s ease;transition:color .5s ease,background-color .5s ease,border-color .5s ease;border:.125em solid transparent}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{color:#fff}:host-context(.sfc-dark-theme) :host .container .content{color:#545e61}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{background-color:#545e61}:host-context(.sfc-dark-theme) :host .container .content{background-color:#fff}:host .container .content sfc-icon{margin-right:.2em}:host .container .content sfc-icon ::ng-deep .container img{max-width:1em;max-height:1em}:host .container .content sfc-close{margin-left:.6em;color:#ed5565;font-size:.8em}:host:hover .container .content{background-color:#ffce54;color:#fff}\n"] }]
-        }], propDecorators: { remove: [{
-                type: Input
-            }], model: [{
+            args: [{ selector: 'sfc-tag', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <sfc-icon [icon]=\"model.icon\" [imageSrc]=\"model.imageSrc\"></sfc-icon>\r\n        <span>{{model.label}}</span>\r\n        <sfc-close *ngIf=\"model.allowRemove\" (click)=\"onRemove()\"></sfc-close>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;-webkit-user-select:none;user-select:none;display:inline-block}:host .container .content{display:flex;align-items:center;text-align:center;padding:.3em .8em;display:inline-flex;border-radius:1em;font-weight:700;-webkit-user-select:none;user-select:none;transition:color .5s ease;transition:background-color .5s ease;transition:color .5s ease,background-color .5s ease,border-color .5s ease;border:.125em solid transparent}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{color:#fff}:host-context(.sfc-dark-theme) :host .container .content{color:#545e61}:host .container .content,:host-context(.sfc-default-theme) :host .container .content{background-color:#545e61}:host-context(.sfc-dark-theme) :host .container .content{background-color:#fff}:host .container .content sfc-icon{margin-right:.2em}:host .container .content sfc-icon ::ng-deep .container img{max-width:1em;max-height:1em}:host .container .content sfc-close{margin-left:.6em;color:#ed5565;font-size:.8em}:host:hover .container .content{background-color:#ffce54;color:#fff}:host.disabled .container .content{pointer-events:none;transition:color .5s ease;transition:background-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:#e9e9e9}:host.disabled .container .content,:host-context(.sfc-default-theme) :host.disabled .container .content{background-color:#f6f6f6}:host-context(.sfc-dark-theme) :host.disabled .container .content{background-color:#656d78}:host.disabled .container .content sfc-close{transition:color .5s ease}:host.disabled .container .content sfc-close,:host-context(.sfc-default-theme) :host.disabled .container .content sfc-close{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .content sfc-close{color:#656d78}:host.disabled:hover .container .content{background-color:initial}\n"] }]
+        }], propDecorators: { model: [{
                 type: Input
             }], removeAction: [{
                 type: Output,
                 args: ['remove']
+            }], disabled: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: [`class.${UIClass.Disabled}`]
             }], _onClick: [{
                 type: HostListener,
                 args: ['click']