@inspark/inspark-components 1.0.38 → 1.0.40

package/full/fesm5/inspark-inspark-components.js

@@ -1,5 +1,5 @@
 import { __decorate, __metadata, __assign, __extends, __read, __values } from 'tslib';
-import { Pipe, NgModule, Injectable, ComponentFactoryResolver, ApplicationRef, Injector, EventEmitter, ChangeDetectorRef, Input, ViewChild, Output, Component, ViewEncapsulation, ChangeDetectionStrategy, forwardRef, ElementRef, TemplateRef, Directive, HostListener, ContentChildren, QueryList, NO_ERRORS_SCHEMA } from '@angular/core';
+import { Pipe, NgModule, Injectable, ComponentFactoryResolver, ApplicationRef, Injector, EventEmitter, ChangeDetectorRef, Input, ViewChild, HostBinding, Output, Component, ViewEncapsulation, ChangeDetectionStrategy, forwardRef, ElementRef, TemplateRef, Directive, HostListener, ContentChildren, QueryList, NO_ERRORS_SCHEMA } from '@angular/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 export { TranslateModule } from '@ngx-translate/core';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -527,6 +527,13 @@ var ButtonComponent = /** @class */ (function (_super) {
         _this.isMaterialIcon = false;
         return _this;
     }
+    Object.defineProperty(ButtonComponent.prototype, "pointerEvents", {
+        get: function () {
+            return this.disabled ? 'none' : 'auto';
+        },
+        enumerable: true,
+        configurable: true
+    });
     ButtonComponent.prototype.ngOnInit = function () {
         this.updateData();
     };
@@ -663,6 +670,11 @@ var ButtonComponent = /** @class */ (function (_super) {
         ViewChild(Menu, { static: false }),
         __metadata("design:type", Menu)
     ], ButtonComponent.prototype, "_menu", void 0);
+    __decorate([
+        HostBinding('style.pointer-events'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [])
+    ], ButtonComponent.prototype, "pointerEvents", null);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -868,7 +880,7 @@ var InputTextComponent = /** @class */ (function () {
     InputTextComponent = InputTextComponent_1 = __decorate([
         Component({
             selector: 'in-input-text',
-            template: "<label [ngStyle]=\"{width: width}\" class=\"label type_varchars\">\n    <span *ngIf=\"label\" class=\"c-label__content\">\n        {{label}}\n      <span *ngIf=\"required\" class=\"c-label__req\">*</span>\n        <span *ngIf=\"error\" class=\"c-label__sub_is-error\">{{error}}</span>\n      <span\n        *ngIf=\"maxlength && value && value.length && value.length >= maxlength\"\n        class=\"constraints-message__warning u-text_uppercase\">\n                     {{'maxlength: ' | translate}} {{maxlength}}</span>\n    </span>\n  <form class=\"c-label\">\n    <div class=\"input-wrapper u-margin-right-tiny\" [ngClass]=\"{'u-margin-right-tiny': right}\">\n      <input (blur)=\"this.blur.emit($event)\"\n             (change)=\"onChange($event)\"\n             (focus)=\"this.focus.emit($event)\"\n             (input)=\"onChange($event)\"\n             [(ngModel)]=\"value\"\n             [autocomplete]=\"autocomplete? 'on':'off'\"\n             [disabled]=\"disabled\"\n             [id]=\"id\"\n             [maxlength]=\"maxlength\"\n             [name]=\"name\"\n             [ngClass]=\"{'c-input_opaque' : opacity === false,\n                         'c-input_shadowed' : shadow,\n                         'c-input_large' : large,\n                         'c-input_small' : small,\n                         'c-input_margin_padding': widget,\n                         'c-input_padding_right': forms}\"\n             [ngModelOptions]=\"{standalone: true}\"\n             [placeholder]=\"placeholder\"\n             [required]=\"required\"\n             [size]=\"size\"\n             [min]=\"min\"\n             [max]=\"max\"\n             [step]=\"step\"\n             class=\"search-box c-input c-input_large c-input_small field_{{id}}\"\n             [type]=\"type\">\n      <button (click)=\"clear()\"\n              class=\"button-reset empty\"\n              [ngClass]=\"{empty: display}\"\n              type=\"reset\"\n              [attr.title]=\"'Reset' | translate\">\n        <i class=\"fa fa-close\"></i>\n      </button>\n    </div>\n  </form>\n</label>\n",
+            template: "<label [ngStyle]=\"{width: width}\" class=\"label type_varchars\">\n    <span *ngIf=\"label\" class=\"c-label__content\">\n        {{label}}\n      <span *ngIf=\"required\" class=\"c-label__req\">*</span>\n        <span *ngIf=\"error\" class=\"c-label__sub_is-error\">{{error}}</span>\n      <span\n        *ngIf=\"maxlength && value && value.length && value.length >= maxlength\"\n        class=\"constraints-message__warning u-text_uppercase\">\n                     {{'maxlength: ' | translate}} {{maxlength}}</span>\n    </span>\n  <div class=\"input-wrapper u-margin-right-tiny\" [ngClass]=\"{'u-margin-right-tiny': right}\">\n    <input (blur)=\"this.blur.emit($event)\"\n           (change)=\"onChange($event)\"\n           (focus)=\"this.focus.emit($event)\"\n           (input)=\"onChange($event)\"\n           [(ngModel)]=\"value\"\n           [autocomplete]=\"autocomplete? 'on':'off'\"\n           [disabled]=\"disabled\"\n           [id]=\"id\"\n           [maxlength]=\"maxlength\"\n           [name]=\"name\"\n           [ngClass]=\"{'c-input_opaque' : opacity === false,\n                         'c-input_shadowed' : shadow,\n                         'c-input_large' : large,\n                         'c-input_small' : small,\n                         'c-input_margin_padding': widget,\n                         'c-input_padding_right': forms}\"\n           [ngModelOptions]=\"{standalone: true}\"\n           [placeholder]=\"placeholder\"\n           [required]=\"required\"\n           [size]=\"size\"\n           [min]=\"min\"\n           [max]=\"max\"\n           [step]=\"step\"\n           class=\"search-box c-input field_{{id}}\"\n           [type]=\"type\">\n    <button (click)=\"clear()\"\n            class=\"button-reset empty\"\n            [ngClass]=\"{empty: display}\"\n            type=\"reset\"\n            [attr.title]=\"'Reset' | translate\">\n      <i class=\"fa fa-close\"></i>\n    </button>\n  </div>\n</label>\n",
             providers: [
                 {
                     provide: NG_VALUE_ACCESSOR,
@@ -876,7 +888,7 @@ var InputTextComponent = /** @class */ (function () {
                     multi: true,
                 }
             ],
-            styles: ["@charset \"UTF-8\";.label{display:inline-block;margin-bottom:0}.c-input{height:36px}.c-input_opaque{background:var(--colorBgLevel3)}.c-input_shadowed{box-shadow:0 2px 6px 0 rgba(0,0,0,.2)}.constraints-message__warning{color:red}.button-reset{display:flex;align-items:center;position:absolute;right:6px;top:5px;padding:6px;font-size:15px;border:none;outline:0;cursor:pointer;color:var(--colorTextMuted);background-color:transparent}.button-reset:hover{color:var(--ids-theme-btn-default-color,#fff)}.empty{display:none}.input-wrapper{position:relative;display:flex;align-items:baseline}.c-input:not(:valid)~.button-reset{display:none}.c-input_margin_padding{margin-left:56px;padding-right:10px;max-width:1200px}.c-input_padding_right{padding-right:28px}"]
+            styles: ["@charset \"UTF-8\";.label{display:inline-block;margin-bottom:0}.c-input{height:36px;width:100%}.c-input_opaque{background:var(--colorBgLevel3)}.c-input_shadowed{box-shadow:0 2px 6px 0 rgba(0,0,0,.2)}.constraints-message__warning{color:red}.button-reset{display:flex;align-items:center;position:absolute;right:6px;top:5px;padding:6px;font-size:15px;border:none;outline:0;cursor:pointer;color:var(--colorTextMuted);background-color:transparent}.button-reset:hover{color:var(--ids-theme-btn-default-color,#fff)}.empty{display:none}.input-wrapper{position:relative;display:flex;align-items:baseline}.c-input:not(:valid)~.button-reset{display:none}.c-input_margin_padding{margin-left:56px;padding-right:10px;max-width:1200px}.c-input_padding_right{padding-right:28px}"]
         })
     ], InputTextComponent);
     return InputTextComponent;
@@ -1236,6 +1248,10 @@ var DropdownComponent = /** @class */ (function (_super) {
         Input(),
         __metadata("design:type", String)
     ], DropdownComponent.prototype, "name", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], DropdownComponent.prototype, "defaultValue", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Object)
@@ -3509,15 +3525,26 @@ var ModalInputTextComponent = /** @class */ (function () {
 var ContentToggleComponent = /** @class */ (function () {
     function ContentToggleComponent(cdr) {
         this.cdr = cdr;
-        this.isOpen = true;
+        this.defaultOpen = true;
+        this.isOpen = this.defaultOpen;
         this.icon = null;
         this.manualArrow = true;
         this.toggle = new EventEmitter();
     }
-    ContentToggleComponent.prototype.toggleOpen = function () {
-        this.isOpen = !this.isOpen;
-        this.toggle.emit(this.isOpen);
-        this.cdr.detectChanges();
+    ContentToggleComponent.prototype.ngOnInit = function () {
+        this.isOpen = this.defaultOpen;
+        console.log('defaultOpen', this.defaultOpen);
+        console.log('isOpen', this.isOpen);
+    };
+    ContentToggleComponent.prototype.toggleOpen = function (e) {
+        // Получаем родительский элемент div
+        var parentElement = this.elementButtons.nativeElement;
+        // Проверяем, входит ли цель события в родительский элемент
+        if (!parentElement.contains(e.target)) {
+            this.isOpen = !this.isOpen;
+            this.toggle.emit(this.isOpen);
+            this.cdr.detectChanges();
+        }
     };
     ContentToggleComponent.ctorParameters = function () { return [
         { type: ChangeDetectorRef }
@@ -3526,6 +3553,10 @@ var ContentToggleComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Object)
     ], ContentToggleComponent.prototype, "label", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], ContentToggleComponent.prototype, "defaultOpen", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Object)
@@ -3542,11 +3573,15 @@ var ContentToggleComponent = /** @class */ (function () {
         Output(),
         __metadata("design:type", EventEmitter)
     ], ContentToggleComponent.prototype, "toggle", void 0);
+    __decorate([
+        ViewChild('buttons', { static: true }),
+        __metadata("design:type", ElementRef)
+    ], ContentToggleComponent.prototype, "elementButtons", void 0);
     ContentToggleComponent = __decorate([
         Component({
             selector: 'in-content-toggle',
-            template: "<div class=\"block\" (click)=\"toggleOpen()\" tabIndex=\"1\">\n    <span [ngClass]=\"{arrow: true, close: !isOpen}\">\n        <in-svg *ngIf=\"manualArrow\" [src]=\"'arrow-down.svg'\" width=\"48px\" height=\"48px\"></in-svg>\n        <ng-content select=\"[arrow]\"></ng-content>\n    </span>\n  <span class=\"label\">\n    <in-svg *ngIf=\"icon\" class=\"label-icon\" [src]=\"icon\"></in-svg>\n    {{label}}\n  </span>\n  <span class=\"counter\">\n    <ng-content select=\"[header]\"></ng-content>\n    </span>\n</div>\n<div class=\"container\" *ngIf=\"isOpen\">\n  <ng-content select=\"[body]\"></ng-content>\n</div>\n",
-            styles: ["@charset \"UTF-8\";.block{font-size:12px;text-transform:uppercase;cursor:pointer;display:flex;white-space:nowrap}.block:hover{background:var(--colorBgLevel2)}.block>span{display:inline-block;margin-right:4px}.block .label{margin-right:8px;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis}.block .counter{display:flex;align-items:center;padding-right:8px}.block .arrow{margin-right:0}.block .arrow.close{transform:rotate(-90deg)}.label-icon{margin-right:4px;width:16px;height:16px}"]
+            template: "<div class=\"block\" (click)=\"toggleOpen($event)\" tabIndex=\"1\">\n    <span [ngClass]=\"{arrow: true, close: !isOpen}\">\n        <in-svg *ngIf=\"manualArrow\" [src]=\"'arrow-down.svg'\" width=\"48px\" height=\"48px\"></in-svg>\n        <ng-content select=\"[arrow]\"></ng-content>\n    </span>\n  <span class=\"label\">\n    <in-svg *ngIf=\"icon\" class=\"label-icon\" [src]=\"icon\"></in-svg>\n    {{label}}\n  </span>\n  <span class=\"counter\">\n    <ng-content select=\"[header]\"></ng-content>\n  </span>\n  <div class=\"buttons\" #buttons>\n    <ng-content select=\"[buttons]\"></ng-content>\n  </div>\n</div>\n<div class=\"container\" *ngIf=\"isOpen\">\n  <ng-content select=\"[body]\"></ng-content>\n</div>\n",
+            styles: ["@charset \"UTF-8\";.block{font-size:12px;text-transform:uppercase;cursor:pointer;display:flex;white-space:nowrap}.block .buttons{flex:1;display:flex;justify-content:flex-end}.block:hover{background:var(--colorBgLevel2)}.block>span{display:inline-block;margin-right:4px}.block .label{margin-right:8px;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis}.block .counter{display:flex;align-items:center;padding-right:8px}.block .arrow{margin-right:0}.block .arrow.close{transform:rotate(-90deg)}.label-icon{margin-right:4px;width:16px;height:16px}"]
         }),
         __metadata("design:paramtypes", [ChangeDetectorRef])
     ], ContentToggleComponent);