@inspark/inspark-components 1.0.39 → 1.0.41

package/full/bundles/inspark-inspark-components.umd.js

@@ -1074,7 +1074,7 @@
         InputTextComponent = InputTextComponent_1 = __decorate([
             core.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: forms.NG_VALUE_ACCESSOR,
@@ -1082,7 +1082,7 @@
                         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;
@@ -1442,6 +1442,10 @@
             core.Input(),
             __metadata("design:type", String)
         ], DropdownComponent.prototype, "name", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Number)
+        ], DropdownComponent.prototype, "defaultValue", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", Object)
@@ -3715,15 +3719,24 @@
     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 core.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;
+        };
+        ContentToggleComponent.prototype.toggleOpen = function (e) {
+            // Получаем родительский элемент div
+            var parentElement = this.elementButtons.nativeElement;
+            // Проверяем, входит ли цель события в родительский элемент
+            if (!parentElement.contains(e.target) || e.target === parentElement) {
+                this.isOpen = !this.isOpen;
+                this.toggle.emit(this.isOpen);
+                this.cdr.detectChanges();
+            }
         };
         ContentToggleComponent.ctorParameters = function () { return [
             { type: core.ChangeDetectorRef }
@@ -3732,6 +3745,10 @@
             core.Input(),
             __metadata("design:type", Object)
         ], ContentToggleComponent.prototype, "label", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], ContentToggleComponent.prototype, "defaultOpen", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", Object)
@@ -3748,11 +3765,15 @@
             core.Output(),
             __metadata("design:type", core.EventEmitter)
         ], ContentToggleComponent.prototype, "toggle", void 0);
+        __decorate([
+            core.ViewChild('buttons', { static: true }),
+            __metadata("design:type", core.ElementRef)
+        ], ContentToggleComponent.prototype, "elementButtons", void 0);
         ContentToggleComponent = __decorate([
             core.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;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.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", [core.ChangeDetectorRef])
         ], ContentToggleComponent);