@dev-tcloud/tcloud-ui 0.1.18 → 0.1.20

package/fesm2020/dev-tcloud-tcloud-ui.mjs

@@ -2112,7 +2112,15 @@ class BytesPipe {
         const c = 0 > b ? 0 : b, d = Math.floor(Math.log(a) / Math.log(1024));
         return parseFloat((a / Math.pow(1024, d)).toFixed(c)) + ' ' + ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"][d];
     }
-    transform(value) {
+    transform(value, typeValue) {
+        if (typeValue !== undefined && typeValue !== null && typeValue !== '') {
+            if ((typeValue).toLowerCase() === 'kb') {
+                value = value * 1024;
+            }
+            if ((typeValue).toLowerCase() === 'mb') {
+                value = (value * 1024) * 1024;
+            }
+        }
         const b = +value;
         return this.formatBytes(b);
     }
@@ -4410,38 +4418,41 @@ class TCloudUiTooltipDirective {
             }
         };
         hoverOutCallback;
-        const scrollTop = window.scrollY || window.pageYOffset;
-        const tooltip = this.renderer.createElement('div');
-        const rect = this.el.nativeElement?.getBoundingClientRect();
-        const direction = this.el.nativeElement?.attributes['ng-reflect--t-cdirection']?.value || 'top';
-        const el_position_x = (rect?.left) ? parseInt(rect?.left) : 0;
-        const el_position_y = (rect?.top) ? parseInt(rect?.top + scrollTop) : 0;
-        let width = 0;
-        let height = 0;
-        if (event && event.target) {
-            const _event = event.target;
-            height = _event.offsetHeight;
-            width = _event.offsetWidth;
-        }
-        const top = `${(el_position_y - ((height / 2) + 10))}px`;
-        const left = `${el_position_x + (width / 2)}px`;
-        this.renderer.setStyle(tooltip, 'top', '0px');
-        this.renderer.setStyle(tooltip, 'left', '0px');
-        this.renderer.setStyle(tooltip, 'opacity', '0');
-        this.renderer.addClass(tooltip, 'tc-directive-tooltip');
-        this.renderer.addClass(tooltip, `tc-directive-tooltip-${direction}`);
-        const id = this.generateID();
-        this.renderer.setAttribute(tooltip, 'id', id);
-        const textNode = this.info_text;
-        if (textNode !== undefined && textNode !== null && textNode !== '') {
-            tooltip.innerHTML = textNode;
-            this.renderer.appendChild(document.body, tooltip);
-            this.start_tooltip(id, height, width, el_position_x, el_position_y, direction);
-            if (tooltip) {
-                tooltip.addEventListener('mouseenter', hoverInCallback);
-                tooltip.addEventListener('mouseleave', hoverOutCallback);
+        setTimeout(() => {
+            const scrollTop = window.scrollY || window.pageYOffset;
+            const tooltip = this.renderer.createElement('div');
+            const rect = this.el.nativeElement?.getBoundingClientRect();
+            // const direction = this.el.nativeElement?.attributes['ng-reflect--t-cdirection']?.value || 'top';
+            const direction = this._direction || 'top';
+            const el_position_x = (rect?.left) ? parseInt(rect?.left) : 0;
+            const el_position_y = (rect?.top) ? parseInt(rect?.top + scrollTop) : 0;
+            let width = 0;
+            let height = 0;
+            if (event && event.target) {
+                const _event = event.target;
+                height = _event.offsetHeight;
+                width = _event.offsetWidth;
             }
-        }
+            const top = `${(el_position_y - ((height / 2) + 10))}px`;
+            const left = `${el_position_x + (width / 2)}px`;
+            this.renderer.setStyle(tooltip, 'top', '0px');
+            this.renderer.setStyle(tooltip, 'left', '0px');
+            this.renderer.setStyle(tooltip, 'opacity', '0');
+            this.renderer.addClass(tooltip, 'tc-directive-tooltip');
+            this.renderer.addClass(tooltip, `tc-directive-tooltip-${direction}`);
+            const id = this.generateID();
+            this.renderer.setAttribute(tooltip, 'id', id);
+            const textNode = this.info_text;
+            if (textNode !== undefined && textNode !== null && textNode !== '') {
+                tooltip.innerHTML = textNode;
+                this.renderer.appendChild(document.body, tooltip);
+                this.start_tooltip(id, height, width, el_position_x, el_position_y, direction);
+                if (tooltip) {
+                    tooltip.addEventListener('mouseenter', hoverInCallback);
+                    tooltip.addEventListener('mouseleave', hoverOutCallback);
+                }
+            }
+        });
     }
     onMouseOut(event) {
         this.remove = true;
@@ -4544,7 +4555,13 @@ class TCloudUiElCopyDirective {
         const btn_copy = this.renderer.createElement('i');
         var copyText = () => {
             const elementWithCopyAttribute = document.querySelector(`[data-el-copy="${id}"]`);
-            const copyText = elementWithCopyAttribute?.textContent;
+            let copyText = '';
+            if (elementWithCopyAttribute && elementWithCopyAttribute.tagName && (elementWithCopyAttribute.tagName).toUpperCase() === 'INPUT') {
+                copyText = elementWithCopyAttribute?.value;
+            }
+            else {
+                copyText = elementWithCopyAttribute?.textContent;
+            }
             navigator.clipboard.writeText(copyText);
             this.renderer.removeClass(btn_copy, 'fa-copy');
             this.renderer.addClass(btn_copy, 'fa-check');
@@ -4563,7 +4580,19 @@ class TCloudUiElCopyDirective {
         this.renderer.setAttribute(btn_copy, 'id', id);
         this.renderer.setAttribute(btn_copy, 'title', 'Copy');
         this.renderer.listen(btn_copy, 'click', () => { copyText(); });
-        this.renderer.appendChild(this.el.nativeElement, btn_copy);
+        if (((this.el.nativeElement).tagName).toUpperCase() === 'INPUT') {
+            let classList = this.el.nativeElement?.classList;
+            if (classList && (classList).length > 0 && ('tc-form-control').indexOf(classList) > -1) {
+                this.renderer.addClass(btn_copy, 'tcloud-ui-el-input-copy-tc-form-control');
+            }
+            else {
+                this.renderer.addClass(btn_copy, 'tcloud-ui-el-input-copy');
+            }
+            this.renderer.appendChild(this.el.nativeElement.parentNode, btn_copy);
+        }
+        else {
+            this.renderer.appendChild(this.el.nativeElement, btn_copy);
+        }
     }
     generateID(target) {
         const ref = (target) ? `-${target}` : '';
@@ -5120,6 +5149,9 @@ const noop = () => {
 };
 class TCloudUiInputPasswordComponent {
     constructor() {
+        this.actionView = true;
+        this.actionCopy = true;
+        this.actionGeneratePassword = true;
         this.numberOfCharacter = 14;
         this.atLeastOneUppercaseLetter = true;
         this.atLeastOneLowercaseLetter = true;
@@ -5221,11 +5253,17 @@ class TCloudUiInputPasswordComponent {
     }
 }
 TCloudUiInputPasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiInputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TCloudUiInputPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiInputPasswordComponent, selector: "tcloud-ui-input-password", inputs: { numberOfCharacter: "numberOfCharacter", atLeastOneUppercaseLetter: "atLeastOneUppercaseLetter", atLeastOneLowercaseLetter: "atLeastOneLowercaseLetter", atLeastOneSpecialCharacter: "atLeastOneSpecialCharacter", ngModel: "ngModel" }, outputs: { ngModelChange: "ngModelChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"tcloud-ui-input-password\">\r\n    <table>\r\n        <tr>\r\n            <!-- input password -->\r\n            <td>\r\n                <form #_form=\"ngForm\">\r\n                    <ng-container *ngIf=\"passwordRegex\">\r\n                        <input class=\"tc-form-control\" *ngIf=\"mode == 'password'\" type=\"password\" name=\"tc_password\" [pattern]=\"passwordRegex\" autoComplete=\"new-password\" [(ngModel)]=\"innerValue\" required>\r\n                        <input class=\"tc-form-control\" *ngIf=\"mode == 'text'\" type=\"text\" name=\"tc_text\" [pattern]=\"passwordRegex\" [(ngModel)]=\"innerValue\" required>\r\n                    </ng-container>\r\n                </form>\r\n            </td>\r\n\r\n            <!-- action show hide -->\r\n            <td>\r\n                <button type=\"button\" (click)=\"toggleMode()\" [title]=\"(mode == 'password') ? 'Visualizar Senha' : 'Esconder Senha'\">\r\n                    <i *ngIf=\"mode == 'password'\" class=\"far fa-eye-slash\"></i>\r\n                    <i *ngIf=\"mode == 'text'\" class=\"far fa-eye\"></i> \r\n                </button>\r\n            </td>\r\n\r\n            <!-- action generate pass -->\r\n            <td>\r\n                <button type=\"button\" [title]=\"'Gerar Senha'\" (click)=\"generatePassword()\">\r\n                    <i class=\"fa-solid fa-key\"></i>\r\n                </button>\r\n            </td>\r\n\r\n            <!-- action copy pass -->\r\n            <td>\r\n                <button type=\"button\" [title]=\"'Copiar Senha'\" (click)=\"copyText()\">\r\n                    <i *ngIf=\"!isCopy\" class=\"fa-regular fa-copy\"></i>\r\n                    <i *ngIf=\"isCopy\" class=\"fa-solid fa-check\"></i>\r\n                </button>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>", styles: [".tcloud-ui-input-password{border:1px solid var(--tc-gray-300);border-radius:3px}.tcloud-ui-input-password table{width:100%}.tcloud-ui-input-password table td:first-child{width:100%!important}.tcloud-ui-input-password table td:first-child input{width:100%;border:none;height:38px;padding-left:8px}.tcloud-ui-input-password table td{width:50px;height:40px;background-color:#fff}.tcloud-ui-input-password table td button{background:transparent;border:none;margin-right:3px;cursor:pointer;color:var(--tc-gray-500)}.tcloud-ui-input-password table td button:hover{color:var(--tc-primary2)}.tcloud-ui-input-password .ng-invalid.ng-touched{border:1px solid var(--red)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+TCloudUiInputPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TCloudUiInputPasswordComponent, selector: "tcloud-ui-input-password", inputs: { actionView: "actionView", actionCopy: "actionCopy", actionGeneratePassword: "actionGeneratePassword", numberOfCharacter: "numberOfCharacter", atLeastOneUppercaseLetter: "atLeastOneUppercaseLetter", atLeastOneLowercaseLetter: "atLeastOneLowercaseLetter", atLeastOneSpecialCharacter: "atLeastOneSpecialCharacter", ngModel: "ngModel" }, outputs: { ngModelChange: "ngModelChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"tcloud-ui-input-password\">\r\n    <table>\r\n        <tr>\r\n            <!-- input password -->\r\n            <td>\r\n                <form #_form=\"ngForm\">\r\n                    <ng-container *ngIf=\"passwordRegex\">\r\n                        <input class=\"tc-form-control\" *ngIf=\"mode == 'password'\" type=\"password\" name=\"tc_password\" [pattern]=\"passwordRegex\" autoComplete=\"new-password\" [(ngModel)]=\"innerValue\" required>\r\n                        <input class=\"tc-form-control\" *ngIf=\"mode == 'text'\" type=\"text\" name=\"tc_text\" [pattern]=\"passwordRegex\" [(ngModel)]=\"innerValue\" required>\r\n                    </ng-container>\r\n                </form>\r\n            </td>\r\n\r\n            <!-- action show hide -->\r\n            <td *ngIf=\"actionView\">\r\n                <button type=\"button\" (click)=\"toggleMode()\" [title]=\"(mode == 'password') ? 'Visualizar Senha' : 'Esconder Senha'\">\r\n                    <i *ngIf=\"mode == 'password'\" class=\"far fa-eye-slash\"></i>\r\n                    <i *ngIf=\"mode == 'text'\" class=\"far fa-eye\"></i> \r\n                </button>\r\n            </td>\r\n\r\n            <!-- action generate pass -->\r\n            <td *ngIf=\"actionGeneratePassword\">\r\n                <button type=\"button\" [title]=\"'Gerar Senha'\" (click)=\"generatePassword()\">\r\n                    <i class=\"fa-solid fa-key\"></i>\r\n                </button>\r\n            </td>\r\n\r\n            <!-- action copy pass -->\r\n            <td *ngIf=\"actionCopy\">\r\n                <button type=\"button\" [title]=\"'Copiar Senha'\" (click)=\"copyText()\">\r\n                    <i *ngIf=\"!isCopy\" class=\"fa-regular fa-copy\"></i>\r\n                    <i *ngIf=\"isCopy\" class=\"fa-solid fa-check\"></i>\r\n                </button>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>", styles: [".tcloud-ui-input-password{border:1px solid var(--tc-gray-300);border-radius:3px}.tcloud-ui-input-password table{width:100%}.tcloud-ui-input-password table td:first-child{width:100%!important}.tcloud-ui-input-password table td:first-child input{width:100%;border:none;height:38px;padding-left:8px}.tcloud-ui-input-password table td{width:50px;height:40px;background-color:#fff}.tcloud-ui-input-password table td button{background:transparent;border:none;margin-right:3px;cursor:pointer;color:var(--tc-gray-500)}.tcloud-ui-input-password table td button:hover{color:var(--tc-primary2)}.tcloud-ui-input-password .ng-invalid.ng-touched{border:1px solid var(--red)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TCloudUiInputPasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tcloud-ui-input-password', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], template: "<div class=\"tcloud-ui-input-password\">\r\n    <table>\r\n        <tr>\r\n            <!-- input password -->\r\n            <td>\r\n                <form #_form=\"ngForm\">\r\n                    <ng-container *ngIf=\"passwordRegex\">\r\n                        <input class=\"tc-form-control\" *ngIf=\"mode == 'password'\" type=\"password\" name=\"tc_password\" [pattern]=\"passwordRegex\" autoComplete=\"new-password\" [(ngModel)]=\"innerValue\" required>\r\n                        <input class=\"tc-form-control\" *ngIf=\"mode == 'text'\" type=\"text\" name=\"tc_text\" [pattern]=\"passwordRegex\" [(ngModel)]=\"innerValue\" required>\r\n                    </ng-container>\r\n                </form>\r\n            </td>\r\n\r\n            <!-- action show hide -->\r\n            <td>\r\n                <button type=\"button\" (click)=\"toggleMode()\" [title]=\"(mode == 'password') ? 'Visualizar Senha' : 'Esconder Senha'\">\r\n                    <i *ngIf=\"mode == 'password'\" class=\"far fa-eye-slash\"></i>\r\n                    <i *ngIf=\"mode == 'text'\" class=\"far fa-eye\"></i> \r\n                </button>\r\n            </td>\r\n\r\n            <!-- action generate pass -->\r\n            <td>\r\n                <button type=\"button\" [title]=\"'Gerar Senha'\" (click)=\"generatePassword()\">\r\n                    <i class=\"fa-solid fa-key\"></i>\r\n                </button>\r\n            </td>\r\n\r\n            <!-- action copy pass -->\r\n            <td>\r\n                <button type=\"button\" [title]=\"'Copiar Senha'\" (click)=\"copyText()\">\r\n                    <i *ngIf=\"!isCopy\" class=\"fa-regular fa-copy\"></i>\r\n                    <i *ngIf=\"isCopy\" class=\"fa-solid fa-check\"></i>\r\n                </button>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>", styles: [".tcloud-ui-input-password{border:1px solid var(--tc-gray-300);border-radius:3px}.tcloud-ui-input-password table{width:100%}.tcloud-ui-input-password table td:first-child{width:100%!important}.tcloud-ui-input-password table td:first-child input{width:100%;border:none;height:38px;padding-left:8px}.tcloud-ui-input-password table td{width:50px;height:40px;background-color:#fff}.tcloud-ui-input-password table td button{background:transparent;border:none;margin-right:3px;cursor:pointer;color:var(--tc-gray-500)}.tcloud-ui-input-password table td button:hover{color:var(--tc-primary2)}.tcloud-ui-input-password .ng-invalid.ng-touched{border:1px solid var(--red)!important}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { numberOfCharacter: [{
+            args: [{ selector: 'tcloud-ui-input-password', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], template: "<div class=\"tcloud-ui-input-password\">\r\n    <table>\r\n        <tr>\r\n            <!-- input password -->\r\n            <td>\r\n                <form #_form=\"ngForm\">\r\n                    <ng-container *ngIf=\"passwordRegex\">\r\n                        <input class=\"tc-form-control\" *ngIf=\"mode == 'password'\" type=\"password\" name=\"tc_password\" [pattern]=\"passwordRegex\" autoComplete=\"new-password\" [(ngModel)]=\"innerValue\" required>\r\n                        <input class=\"tc-form-control\" *ngIf=\"mode == 'text'\" type=\"text\" name=\"tc_text\" [pattern]=\"passwordRegex\" [(ngModel)]=\"innerValue\" required>\r\n                    </ng-container>\r\n                </form>\r\n            </td>\r\n\r\n            <!-- action show hide -->\r\n            <td *ngIf=\"actionView\">\r\n                <button type=\"button\" (click)=\"toggleMode()\" [title]=\"(mode == 'password') ? 'Visualizar Senha' : 'Esconder Senha'\">\r\n                    <i *ngIf=\"mode == 'password'\" class=\"far fa-eye-slash\"></i>\r\n                    <i *ngIf=\"mode == 'text'\" class=\"far fa-eye\"></i> \r\n                </button>\r\n            </td>\r\n\r\n            <!-- action generate pass -->\r\n            <td *ngIf=\"actionGeneratePassword\">\r\n                <button type=\"button\" [title]=\"'Gerar Senha'\" (click)=\"generatePassword()\">\r\n                    <i class=\"fa-solid fa-key\"></i>\r\n                </button>\r\n            </td>\r\n\r\n            <!-- action copy pass -->\r\n            <td *ngIf=\"actionCopy\">\r\n                <button type=\"button\" [title]=\"'Copiar Senha'\" (click)=\"copyText()\">\r\n                    <i *ngIf=\"!isCopy\" class=\"fa-regular fa-copy\"></i>\r\n                    <i *ngIf=\"isCopy\" class=\"fa-solid fa-check\"></i>\r\n                </button>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>", styles: [".tcloud-ui-input-password{border:1px solid var(--tc-gray-300);border-radius:3px}.tcloud-ui-input-password table{width:100%}.tcloud-ui-input-password table td:first-child{width:100%!important}.tcloud-ui-input-password table td:first-child input{width:100%;border:none;height:38px;padding-left:8px}.tcloud-ui-input-password table td{width:50px;height:40px;background-color:#fff}.tcloud-ui-input-password table td button{background:transparent;border:none;margin-right:3px;cursor:pointer;color:var(--tc-gray-500)}.tcloud-ui-input-password table td button:hover{color:var(--tc-primary2)}.tcloud-ui-input-password .ng-invalid.ng-touched{border:1px solid var(--red)!important}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { actionView: [{
+                type: Input
+            }], actionCopy: [{
+                type: Input
+            }], actionGeneratePassword: [{
+                type: Input
+            }], numberOfCharacter: [{
                 type: Input
             }], atLeastOneUppercaseLetter: [{
                 type: Input