@seniorsistemas/angular-components 17.16.14 → 17.17.0

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

@@ -18338,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;
@@ -20642,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",
@@ -20990,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;
@@ -21247,6 +21605,7 @@
     exports.ɵed = CollapsedItemsComponent;
     exports.ɵee = VerticalItemsComponent;
     exports.ɵef = ButtonModule;
+    exports.ɵeg = ChipItemComponent;
     exports.ɵf = TieredMenuComponent;
     exports.ɵg = TieredMenuNestedComponent;
     exports.ɵh = TieredMenuItemComponent;