@seniorsistemas/angular-components 17.16.13 → 17.17.0

package/bundles/seniorsistemas-angular-components.umd.js

@@ -5628,7 +5628,7 @@
     var Field = /** @class */ (function () {
         function Field(config) {
             var _this = this;
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             if ((_a = config.footer) === null || _a === void 0 ? void 0 : _a.help) {
                 config.footer.help = __assign({ visible: function () { return true; } }, (_b = config.footer) === null || _b === void 0 ? void 0 : _b.help);
             }
@@ -5654,7 +5654,7 @@
             this.representedBy = config.representedBy;
             this.CustomFieldClass = config.CustomFieldClass;
             this.CustomFieldComponentClass = config.CustomFieldComponentClass;
-            this.displayTimeInfoSign = config.displayTimeInfoSign;
+            this.displayTimeInfoSign = (_e = config.displayTimeInfoSign) !== null && _e !== void 0 ? _e : 5000;
         }
         return Field;
     }());
@@ -11061,6 +11061,7 @@
 
     var RowComponent = /** @class */ (function () {
         function RowComponent() {
+            this.FieldType = exports.FieldType;
         }
         RowComponent.prototype.ngOnInit = function () { };
         RowComponent.prototype.getErrorMessages = function (errorMessages) {
@@ -11085,7 +11086,7 @@
         ], RowComponent.prototype, "errorMessages", void 0);
         RowComponent = __decorate([
             core.Component({
-                template: "\n        <div class=\"ui-fluid\" [formGroup]=\"group\">\n        <div class=\"ui-g\">\n            <ng-container *ngFor=\"let field of config.fields\">\n                <div [ngClass]=\"field.gridClass\" *ngIf=\"field.visible()\">\n                    <ng-container *sDynamicForm=\"{ id: id, config: field, group: group}\"></ng-container>\n\n                    <s-control-errors [form]=\"group\" [control]=\"group.controls[field.name]\"\n                        [errorMessages]=\"getErrorMessages(field.errorMessages)\"></s-control-errors>\n\n                    <ng-container *ngIf=\"field.footer\">\n                        <ng-container *ngIf=\"field.footer.help\">\n                            <span *ngIf=\"field.footer.help.visible({ abstractControl: group.controls[field.name], formField: field })\" style=\"color: #888B99\">{{ field.footer.help.text }}</span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"field.footer.link\">\n                            <div\n                                *ngIf=\"field.footer.link.visible({ abstractControl: group.controls[field.name], formField: field })\"\n                                class=\"ui-g\"\n                                style=\"margin-left: -17px\"\n                            >\n                                <s-button\n                                    [label]=\"field.footer.link.label\"\n                                    priority=\"link\"\n                                    (onClick)=\"field.footer.link.onClick({ abstractControl: group.controls[field.name], formField: field })\"\n                                    [auxiliary]=\"true\"\n                                ></s-button>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n\n                    <ng-template *ngIf=\"field?.bottomTemplate\" [ngTemplateOutlet]=\"field.bottomTemplate\"></ng-template>\n                </div>\n            </ng-container>\n        </div>\n    "
+                template: "\n        <div class=\"ui-fluid\" [formGroup]=\"group\">\n        <div class=\"ui-g\">\n            <ng-container *ngFor=\"let field of config.fields\">\n                <div [ngClass]=\"field.gridClass\" *ngIf=\"field.visible()\">\n                    <ng-container *ngIf=\"field.type === FieldType.Custom && field.label\" >\n                        <label *sInfoSign=\"field.infoSign\" [for]=\"field.name\" [ngClass]=\"{ required: field.required() }\" >\n                            {{ field.label }}\n                        </label>\n                    </ng-container>\n\n                    <ng-container *sDynamicForm=\"{ id: id, config: field, group: group}\"></ng-container>\n\n                    <s-control-errors [form]=\"group\" [control]=\"group.controls[field.name]\"\n                        [errorMessages]=\"getErrorMessages(field.errorMessages)\"></s-control-errors>\n\n                    <ng-container *ngIf=\"field.footer\">\n                        <ng-container *ngIf=\"field.footer.help\">\n                            <span *ngIf=\"field.footer.help.visible({ abstractControl: group.controls[field.name], formField: field })\" style=\"color: #888B99\">{{ field.footer.help.text }}</span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"field.footer.link\">\n                            <div\n                                *ngIf=\"field.footer.link.visible({ abstractControl: group.controls[field.name], formField: field })\"\n                                class=\"ui-g\"\n                                style=\"margin-left: -17px\"\n                            >\n                                <s-button\n                                    [label]=\"field.footer.link.label\"\n                                    priority=\"link\"\n                                    (onClick)=\"field.footer.link.onClick({ abstractControl: group.controls[field.name], formField: field })\"\n                                    [auxiliary]=\"true\"\n                                ></s-button>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n\n                    <ng-template *ngIf=\"field?.bottomTemplate\" [ngTemplateOutlet]=\"field.bottomTemplate\"></ng-template>\n                </div>\n            </ng-container>\n        </div>\n    "
             })
         ], RowComponent);
         return RowComponent;
@@ -11093,6 +11094,7 @@
 
     var DynamicFieldComponent = /** @class */ (function () {
         function DynamicFieldComponent() {
+            this.FieldType = exports.FieldType;
         }
         DynamicFieldComponent.prototype.getErrorMessages = function (errorMessages) {
             if (errorMessages)
@@ -11118,7 +11120,7 @@
         DynamicFieldComponent = __decorate([
             core.Component({
                 selector: "s-dynamic-field",
-                template: "<div class=\"ui-fluid\" [formGroup]=\"form\">\n    <div class=\"ui-g\">\n        <ng-container *ngFor=\"let field of fields\">\n            <div\n                *ngIf=\"!field.visible || field.visible()\"\n                [ngClass]=\"field.gridClass\">\n\n                <ng-container\n                    *sDynamicForm=\"{\n                        id: id,\n                        config: field,\n                        group: form\n                    }\"\n                ></ng-container>\n\n                <s-control-errors\n                    [form]=\"form\"\n                    [control]=\"form.controls[field.name]\"\n                    [errorMessages]=\"getErrorMessages(field.errorMessages)\"\n                ></s-control-errors>\n\n                <ng-container *ngIf=\"field.footer\">\n                    <ng-container *ngIf=\"field.footer.help\">\n                        <span\n                            *ngIf=\"\n                                field.footer.help.visible({\n                                    abstractControl: form.controls[field.name],\n                                    formField: field\n                                })\n                            \"\n                            style=\"color: #888b99\"\n                        >\n                            {{ field.footer.help.text }}\n                        </span>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"field.footer.link\">\n                        <div\n                            *ngIf=\"\n                                field.footer.link.visible({\n                                    abstractControl: form.controls[field.name],\n                                    formField: field\n                                })\n                            \"\n                            class=\"ui-g\"\n                            style=\"margin-left: -10px\"\n                        >\n                            <s-button\n                                [label]=\"field.footer.link.label\"\n                                priority=\"link\"\n                                (onClick)=\"\n                                    field.footer.link.onClick({\n                                        abstractControl:\n                                            form.controls[field.name],\n                                        formField: field\n                                    })\n                                \"\n                                [auxiliary]=\"true\"\n                            ></s-button>\n                        </div>\n                    </ng-container>\n                </ng-container>\n\n                <ng-template\n                    *ngIf=\"field?.bottomTemplate\"\n                    [ngTemplateOutlet]=\"field.bottomTemplate\"\n                ></ng-template>\n            </div>\n        </ng-container>\n    </div>\n</div>\n"
+                template: "<div class=\"ui-fluid\" [formGroup]=\"form\">\n    <div class=\"ui-g\">\n        <ng-container *ngFor=\"let field of fields\">\n            <div\n                *ngIf=\"!field.visible || field.visible()\"\n                [ngClass]=\"field.gridClass\">\n\n                <ng-container *ngIf=\"field.label && field.type === FieldType.Custom\">\n                    <label\n                        *sInfoSign=\"\n                            field.infoSign;\n                            displayTime: field.displayTimeInfoSign\n                        \"\n                        [for]=\"field.name\"\n                        [ngClass]=\"{ required: field.required() }\"\n                    >\n                        {{ field.label }}\n                    </label>\n                </ng-container>\n\n                <ng-container\n                    *sDynamicForm=\"{\n                        id: id,\n                        config: field,\n                        group: form\n                    }\"\n                ></ng-container>\n\n                <s-control-errors\n                    [form]=\"form\"\n                    [control]=\"form.controls[field.name]\"\n                    [errorMessages]=\"getErrorMessages(field.errorMessages)\"\n                ></s-control-errors>\n\n                <ng-container *ngIf=\"field.footer\">\n                    <ng-container *ngIf=\"field.footer.help\">\n                        <span\n                            *ngIf=\"\n                                field.footer.help.visible({\n                                    abstractControl: form.controls[field.name],\n                                    formField: field\n                                })\n                            \"\n                            style=\"color: #888b99\"\n                        >\n                            {{ field.footer.help.text }}\n                        </span>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"field.footer.link\">\n                        <div\n                            *ngIf=\"\n                                field.footer.link.visible({\n                                    abstractControl: form.controls[field.name],\n                                    formField: field\n                                })\n                            \"\n                            class=\"ui-g\"\n                            style=\"margin-left: -10px\"\n                        >\n                            <s-button\n                                [label]=\"field.footer.link.label\"\n                                priority=\"link\"\n                                (onClick)=\"\n                                    field.footer.link.onClick({\n                                        abstractControl:\n                                            form.controls[field.name],\n                                        formField: field\n                                    })\n                                \"\n                                [auxiliary]=\"true\"\n                            ></s-button>\n                        </div>\n                    </ng-container>\n                </ng-container>\n\n                <ng-template\n                    *ngIf=\"field?.bottomTemplate\"\n                    [ngTemplateOutlet]=\"field.bottomTemplate\"\n                ></ng-template>\n            </div>\n        </ng-container>\n    </div>\n</div>\n"
             })
         ], DynamicFieldComponent);
         return DynamicFieldComponent;
@@ -11880,21 +11882,17 @@
 
     var FieldLabelComponent = /** @class */ (function () {
         function FieldLabelComponent() {
-            this.displayTimeInfoSign = 5000;
         }
         __decorate([
             core.Input()
         ], FieldLabelComponent.prototype, "field", void 0);
-        __decorate([
-            core.Input()
-        ], FieldLabelComponent.prototype, "displayTimeInfoSign", void 0);
         __decorate([
             core.Input()
         ], FieldLabelComponent.prototype, "fieldContainerRef", void 0);
         FieldLabelComponent = __decorate([
             core.Component({
                 selector: 's-field-label',
-                template: "<span *ngIf=\"field.label\">\n    <label\n        *sInfoSign=\"\n            field.infoSign;\n            displayTime: field.displayTimeInfoSign;\n            focusedInputRef: fieldContainerRef\n        \"\n        [for]=\"field.name\"\n        [ngClass]=\"{ required: field.required() }\">\n        {{ field.label }}\n    </label>\n</span>\n"
+                template: "<!--\n    Caso esse componente seja alterado/removido/movido,\n    alterar a label no row.component.ts e dynamic-field.component.ts\n-->\n\n<span *ngIf=\"field.label\">\n    <label\n        *sInfoSign=\"field.infoSign; displayTime: field.displayTimeInfoSign; focusedInputRef: fieldContainerRef\"\n        [for]=\"field.name\"\n        [ngClass]=\"{ required: field.required() }\"\n    >\n        {{ field.label }}\n    </label>\n</span>\n"
             })
         ], FieldLabelComponent);
         return FieldLabelComponent;
@@ -18340,6 +18338,41 @@
         return SelectButtonModule;
     }());
 
+    /**
+     * A decorator that can be used to disable functions based on a boolean property on the component.
+     *
+     * @param disabledField The name of the boolean property that will be used to determine if the decorated
+     * function should be disabled. Defaults to 'disabled'.
+     * @returns A decorator function that can be used to decorate a function.
+     *
+     * @example
+     * class MyComponent {
+     *   disabled = true;
+     *
+     *   @CheckDisabled()
+     *   onClick() {
+     *     console.log('Button was clicked');
+     *   }
+     * }
+     */
+    function CheckDisabled(disabledField) {
+        if (disabledField === void 0) { disabledField = 'disabled'; }
+        return function (_target, _propertyKey, descriptor) {
+            var originalMethod = descriptor.value;
+            descriptor.value = function () {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                if (this[disabledField]) {
+                    return;
+                }
+                return originalMethod.apply(this, args);
+            };
+            return descriptor;
+        };
+    }
+
     var SidebarComponent = /** @class */ (function () {
         function SidebarComponent(focusTrapFactory) {
             this.focusTrapFactory = focusTrapFactory;
@@ -20644,6 +20677,326 @@
         return PicklistModule;
     }());
 
+    var ChipsComponent = /** @class */ (function () {
+        function ChipsComponent(cdr) {
+            this.cdr = cdr;
+            this.newItem = '';
+            this.value = [];
+            this.placeholder = '';
+            this.inputId = "chips-" + ChipsComponent_1._id++;
+            this.allowDuplicated = true;
+            this.caseSensitiveDuplication = false;
+            this.addOnTab = true;
+            this.addOnBlur = true;
+            this.autofocus = false;
+            this.infoLabel = '';
+            this.showTooltip = true;
+            this.maxLengthRenderWithoutTooltip = 20;
+            this.onAdd = new core.EventEmitter();
+            this.onRemove = new core.EventEmitter();
+            this.onFocus = new core.EventEmitter();
+            this.onBlur = new core.EventEmitter();
+            this.onChipClick = new core.EventEmitter();
+            this.valueChange = new core.EventEmitter();
+            this.isTabEventActive = false;
+            this.onChange = function () { };
+            this.onTouched = function () { };
+        }
+        ChipsComponent_1 = ChipsComponent;
+        ChipsComponent.prototype.ngAfterViewInit = function () {
+            var _a;
+            if (this.autofocus && this.input) {
+                this.input.nativeElement.focus();
+            }
+            this.chipTemplate = (_a = this.templates.find(function (x) { return x.type === 'chip-container'; })) === null || _a === void 0 ? void 0 : _a.template;
+            this.cdr.detectChanges();
+        };
+        ChipsComponent.prototype.writeValue = function (obj) {
+            this.value = obj;
+        };
+        ChipsComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        ChipsComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        ChipsComponent.prototype.setDisabledState = function (isDisabled) {
+            this.disabled = isDisabled;
+        };
+        ChipsComponent.prototype.onKeydown = function ($event) {
+            var _this = this;
+            var isEnter = $event.key === 'Enter';
+            var isSeparator = this.separator && $event.key === this.separator;
+            var eventKeyIsTab = $event.key === 'Tab';
+            if (eventKeyIsTab) {
+                this.isTabEventActive = true;
+                setTimeout(function () {
+                    _this.isTabEventActive = false;
+                }, 50);
+            }
+            var isTab = this.addOnTab && eventKeyIsTab;
+            if (isEnter || isSeparator || isTab) {
+                $event.preventDefault();
+                this.addItem();
+            }
+        };
+        ChipsComponent.prototype.onInputFocus = function ($event) {
+            this.onFocus.emit($event);
+        };
+        ChipsComponent.prototype.onInputLostFocus = function ($event) {
+            if (!this.addOnBlur || this.isTabEventActive) {
+                return;
+            }
+            this.addItem();
+            this.onBlur.emit($event);
+        };
+        ChipsComponent.prototype.removeItem = function (_a) {
+            var itemIndex = _a.itemIndex, event = _a.event;
+            var _removedItem = this.value[itemIndex];
+            this.value.splice(itemIndex, 1);
+            this.onRemove.emit({ value: _removedItem, originalEvent: event });
+        };
+        ChipsComponent.prototype.chipClicked = function (_a) {
+            var event = _a.event, data = _a.data;
+            this.onChipClick.emit({ value: data, originalEvent: event });
+        };
+        ChipsComponent.prototype.addItem = function () {
+            var _a;
+            var _this = this;
+            var hasValue = !!this.newItem;
+            if (!hasValue) {
+                return;
+            }
+            if (this.max && this.value.length === this.max) {
+                return;
+            }
+            var validItemLength = this.maxLength ? this.newItem.length <= this.maxLength : true;
+            if (!validItemLength) {
+                return;
+            }
+            var hasField = !!this.field;
+            var _mappedValues = this.field ? this.value.map(function (x) { return x[_this.field]; }) : this.value;
+            var valueToAdd = hasField ? (_a = {}, _a[this.field] = this.newItem, _a) : this.newItem;
+            var duplicatedItem = _mappedValues.find(function (x) {
+                if (_this.caseSensitiveDuplication) {
+                    return x === _this.newItem;
+                }
+                else {
+                    return x.toLowerCase() === _this.newItem.toLowerCase();
+                }
+            });
+            var hasDuplicatedItem = false;
+            if (!this.allowDuplicated) {
+                hasDuplicatedItem = duplicatedItem ? Boolean(duplicatedItem) : false;
+            }
+            if (!hasDuplicatedItem) {
+                this.storeValue(valueToAdd);
+            }
+            this.newItem = '';
+        };
+        ChipsComponent.prototype.storeValue = function (value) {
+            this.value = __spread(this.value, [value]);
+            this.onAdd.emit({ value: value });
+            this.valueChange.emit(this.value);
+            this.writeValue(this.value);
+            this.onChange(this.value);
+            this.onTouched(this.value);
+        };
+        var ChipsComponent_1;
+        ChipsComponent._id = 0;
+        ChipsComponent.ctorParameters = function () { return [
+            { type: core.ChangeDetectorRef }
+        ]; };
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "disabled", void 0);
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "field", void 0);
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "value", void 0);
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "placeholder", void 0);
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "max", void 0);
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "maxLength", void 0);
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "inputId", void 0);
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "allowDuplicated", void 0);
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "caseSensitiveDuplication", void 0);
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "addOnTab", void 0);
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "addOnBlur", void 0);
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "separator", void 0);
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "autofocus", void 0);
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "infoLabel", void 0);
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "keyFilter", void 0);
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "showTooltip", void 0);
+        __decorate([
+            core.Input()
+        ], ChipsComponent.prototype, "maxLengthRenderWithoutTooltip", void 0);
+        __decorate([
+            core.Output()
+        ], ChipsComponent.prototype, "onAdd", void 0);
+        __decorate([
+            core.Output()
+        ], ChipsComponent.prototype, "onRemove", void 0);
+        __decorate([
+            core.Output()
+        ], ChipsComponent.prototype, "onFocus", void 0);
+        __decorate([
+            core.Output()
+        ], ChipsComponent.prototype, "onBlur", void 0);
+        __decorate([
+            core.Output()
+        ], ChipsComponent.prototype, "onChipClick", void 0);
+        __decorate([
+            core.Output()
+        ], ChipsComponent.prototype, "valueChange", void 0);
+        __decorate([
+            core.ContentChildren(TemplateDirective)
+        ], ChipsComponent.prototype, "templates", void 0);
+        __decorate([
+            core.ViewChild('input', { read: core.ElementRef })
+        ], ChipsComponent.prototype, "input", void 0);
+        __decorate([
+            core.HostListener("document:keydown", ["$event"]),
+            CheckDisabled()
+        ], ChipsComponent.prototype, "onKeydown", null);
+        __decorate([
+            CheckDisabled()
+        ], ChipsComponent.prototype, "onInputLostFocus", null);
+        ChipsComponent = ChipsComponent_1 = __decorate([
+            core.Component({
+                selector: 's-chips',
+                template: "<ul class=\"chips-container\">\n    <li *ngFor=\"let item of value; let index = index\">\n        <s-chip-item\n            [templateRef]=\"chipTemplate\"\n            [dataRender]=\"item\"\n            [objectField]=\"field\"\n            [itemIndex]=\"index\"\n            [disabled]=\"disabled\"\n            [showTooltip]=\"showTooltip\"\n            [maxLengthRenderWithoutTooltip]=\"maxLengthRenderWithoutTooltip\"\n            (clickRemove)=\"removeItem($event)\"\n            (chipClicked)=\"chipClicked($event)\">\n        </s-chip-item>\n    </li>\n    <ng-container *ngIf=\"keyFilter\">\n        <input\n            #input\n            [disabled]=\"disabled || max === value?.length\"\n            [placeholder]=\"placeholder\"\n            [maxlength]=\"maxLength\"\n            [id]=\"inputId\"\n            [(ngModel)]=\"newItem\"\n            [pKeyFilter]=\"keyFilter\"\n            (focus)=\"onInputFocus($event)\"\n            (blur)=\"onInputLostFocus($event)\">\n    </ng-container>\n    <ng-container *ngIf=\"!keyFilter\">\n        <input\n        #input\n        [disabled]=\"disabled || max === value?.length\"\n        [placeholder]=\"placeholder\"\n        [maxlength]=\"maxLength\"\n        [id]=\"inputId\"\n        [(ngModel)]=\"newItem\"\n        (focus)=\"onInputFocus($event)\"\n        (blur)=\"onInputLostFocus($event)\">\n    </ng-container>\n</ul>\n<ng-container *ngIf=\"infoLabel\">\n    <span class=\"info-label\">\n        {{ infoLabel }}\n    </span>\n</ng-container>\n",
+                providers: [
+                    {
+                        provide: forms.NG_VALUE_ACCESSOR,
+                        useExisting: core.forwardRef(function () { return ChipsComponent_1; }),
+                        multi: true
+                    }
+                ],
+                styles: [".chips-container{width:100%;padding:8px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;border-radius:3px;border:1px solid #c1c1cc;background-color:#fff;list-style:none;gap:8px}.chips-container input{background-color:#fff;width:100%;border:none;min-height:2em;min-width:15%;-ms-flex:1;flex:1}.chips-container input:focus-visible{outline:0}.info-label{color:#888b99;font-size:12px;font-style:normal;font-weight:400}"]
+            })
+        ], ChipsComponent);
+        return ChipsComponent;
+    }());
+
+    var ChipItemComponent = /** @class */ (function () {
+        function ChipItemComponent() {
+            this.disabled = false;
+            this.itemIndex = -1;
+            this.showTooltip = true;
+            this.maxLengthRenderWithoutTooltip = 20;
+            this.clickRemove = new core.EventEmitter();
+            this.chipClicked = new core.EventEmitter();
+        }
+        ChipItemComponent.prototype.clickedRemove = function ($event) {
+            this.clickRemove.emit({ index: this.itemIndex, event: $event });
+        };
+        ChipItemComponent.prototype.onChipClicked = function ($event) {
+            this.chipClicked.emit({ event: $event, data: this.dataRender });
+        };
+        Object.defineProperty(ChipItemComponent.prototype, "_text", {
+            get: function () {
+                var _text = this._rawText;
+                return _text.substring(0, _text.length > this.maxLengthRenderWithoutTooltip ? this.maxLengthRenderWithoutTooltip : _text.length) + (_text.length > this.maxLengthRenderWithoutTooltip ? '...' : '');
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ChipItemComponent.prototype, "_rawText", {
+            get: function () {
+                return this.objectField ? this.dataRender[this.objectField] || '' : this.dataRender || '';
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            core.Input()
+        ], ChipItemComponent.prototype, "dataRender", void 0);
+        __decorate([
+            core.Input()
+        ], ChipItemComponent.prototype, "objectField", void 0);
+        __decorate([
+            core.Input()
+        ], ChipItemComponent.prototype, "disabled", void 0);
+        __decorate([
+            core.Input()
+        ], ChipItemComponent.prototype, "templateRef", void 0);
+        __decorate([
+            core.Input()
+        ], ChipItemComponent.prototype, "itemIndex", void 0);
+        __decorate([
+            core.Input()
+        ], ChipItemComponent.prototype, "showTooltip", void 0);
+        __decorate([
+            core.Input()
+        ], ChipItemComponent.prototype, "maxLengthRenderWithoutTooltip", void 0);
+        __decorate([
+            core.Output()
+        ], ChipItemComponent.prototype, "clickRemove", void 0);
+        __decorate([
+            core.Output()
+        ], ChipItemComponent.prototype, "chipClicked", void 0);
+        __decorate([
+            CheckDisabled()
+        ], ChipItemComponent.prototype, "clickedRemove", null);
+        __decorate([
+            CheckDisabled()
+        ], ChipItemComponent.prototype, "onChipClicked", null);
+        ChipItemComponent = __decorate([
+            core.Component({
+                selector: 's-chip-item',
+                template: "<ng-template #itemRender>\n    <div\n        class=\"chip-item\"\n        [class.chip-item-disabled]=\"disabled\"\n        (click)=\"onChipClicked($event)\"\n        [sTooltip]=\"_rawText\"\n        [showDelay]=\"0\"\n        [visible]=\"showTooltip ? _rawText.length > maxLengthRenderWithoutTooltip : false\">\n            <ng-container *ngIf=\"templateRef\">\n                <ng-container *ngTemplateOutlet=\"templateRef; context: { $implicit: dataRender, text: _text }\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!templateRef\">\n                {{ _text }}\n            </ng-container>\n            <i class=\"fas fa-times\" (click)=\"clickedRemove($event)\"></i>\n    </div>\n</ng-template>\n\n\n<ng-container *ngIf=\"objectField && !templateRef\">\n    <ng-container *ngTemplateOutlet=\"itemRender;\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!objectField && !templateRef\">\n    <ng-container *ngTemplateOutlet=\"itemRender;\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"templateRef\">\n    <ng-container *ngTemplateOutlet=\"itemRender\"></ng-container>\n</ng-container>\n",
+                styles: [".chip-item{border-radius:4px;border:1px solid #888b99;background-color:#eeebf2;word-break:break-word;font-size:12px;font-weight:400;text-align:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px;padding:0 8px}.chip-item i{cursor:pointer}.chip-item:hover:not(.chip-item-disabled){background:#c1c1cc}.chip-item-disabled{opacity:.5}.chip-item-disabled i{cursor:default}"]
+            })
+        ], ChipItemComponent);
+        return ChipItemComponent;
+    }());
+
+    var ChipsModule = /** @class */ (function () {
+        function ChipsModule() {
+        }
+        ChipsModule = __decorate([
+            core.NgModule({
+                declarations: [ChipsComponent, ChipItemComponent],
+                imports: [
+                    common.CommonModule,
+                    forms.FormsModule,
+                    TooltipModule,
+                    keyfilter.KeyFilterModule
+                ],
+                exports: [ChipsComponent]
+            })
+        ], ChipsModule);
+        return ChipsModule;
+    }());
+
     var fallback = {
         "platform.angular_components.drag_your_photo_or": "Arraste sua foto ou",
         "platform.angular_components.select_a_file": "selecione um arquivo",
@@ -20992,9 +21345,12 @@
     exports.CalendarMaskModule = CalendarMaskModule;
     exports.CardComponent = CardComponent;
     exports.CardModule = CardModule;
+    exports.CheckDisabled = CheckDisabled;
     exports.CheckboxComponent = CheckboxComponent;
     exports.CheckboxModule = CheckboxModule;
+    exports.ChipsComponent = ChipsComponent;
     exports.ChipsField = ChipsField;
+    exports.ChipsModule = ChipsModule;
     exports.CodeEditorModule = CodeEditorModule;
     exports.CollapseLinkComponent = CollapseLinkComponent;
     exports.CollapseLinkModule = CollapseLinkModule;
@@ -21249,6 +21605,7 @@
     exports.ɵed = CollapsedItemsComponent;
     exports.ɵee = VerticalItemsComponent;
     exports.ɵef = ButtonModule;
+    exports.ɵeg = ChipItemComponent;
     exports.ɵf = TieredMenuComponent;
     exports.ɵg = TieredMenuNestedComponent;
     exports.ɵh = TieredMenuItemComponent;