@wizishop/wizi-block 3.3.45 → 3.3.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -507,6 +507,7 @@
507
507
  var FORM_NAME_ID = 'id';
508
508
  var FORM_NAME_ID_FORM = 'id_form';
509
509
  var FORM_NAME_MARGIN = 'margin';
510
+ var FORM_NAME_MARGIN_TOP = 'margin_top';
510
511
  var FORM_NAME_AMPLIFY_TYPE = 'amplify_type';
511
512
  var FORM_NAME_AMPLIFY_NBLIGNE = 'amplify_nbligne';
512
513
  var FORM_NAME_APP_ID = 'app_id';
@@ -710,6 +711,14 @@
710
711
  translateBlockService.translateProperties(this.block);
711
712
  if (hasMargin) {
712
713
  this.forms.push(new FormsContentDto(FORM_NAME_HIDE_BLOCK, 'wb.forms.FormsContentDto.4', FORM_TYPE_CHECKBOX, block[FORM_NAME_HIDE_BLOCK], '', '', [], [], [true, false]));
714
+ }
715
+ this.forms.push(new FormsContentDto(FORM_NAME_MARGIN_TOP, 'wb.forms.FormsContentDto.13', FORM_TYPE_TAG, block[FORM_NAME_MARGIN_TOP], '#122231', '', [
716
+ 'wb.blocks.FormContentDto.101',
717
+ 'wb.blocks.FormContentDto.94',
718
+ 'wb.blocks.FormContentDto.95',
719
+ 'wb.blocks.FormContentDto.96',
720
+ ], ['none', 'small', 'medium', 'large']));
721
+ if (hasMargin) {
713
722
  this.forms.push(new FormsContentDto(FORM_NAME_MARGIN, 'wb.forms.FormsContentDto.1', FORM_TYPE_TAG, block[FORM_NAME_MARGIN], '#122231', '', [
714
723
  'wb.blocks.FormContentDto.101',
715
724
  'wb.blocks.FormContentDto.94',
@@ -737,6 +746,7 @@
737
746
  this.uuid = uuid.v4();
738
747
  this.type = type;
739
748
  this[FORM_NAME_MARGIN] = 'medium';
749
+ this[FORM_NAME_MARGIN_TOP] = 'small';
740
750
  this[FORM_NAME_WIDTH_BLOCK] = 'medium';
741
751
  }
742
752
  return ParentBlockDto;
@@ -9486,6 +9496,8 @@
9486
9496
  this.components = null;
9487
9497
  this.translation = null;
9488
9498
  this.isHiddenConfig = [];
9499
+ this.isFirstInLoop = false;
9500
+ this.loopIndex = 0;
9489
9501
  this.unsubscribe = new rxjs.Subject();
9490
9502
  this.currentTopTool = 0;
9491
9503
  this.toolUnpin = false;
@@ -9547,7 +9559,28 @@
9547
9559
  .configEvent()
9548
9560
  .pipe(operators.takeUntil(this.unsubscribe))
9549
9561
  .subscribe(function () {
9562
+ var e_2, _a;
9550
9563
  _this.selectedConfig = _this.configService.config;
9564
+ _this.isFirstInLoop = false;
9565
+ _this.loopIndex = 0;
9566
+ if (_this.selectedConfig) {
9567
+ try {
9568
+ for (var _b = __values(_this.blocksContents), _c = _b.next(); !_c.done; _c = _b.next()) {
9569
+ var b = _c.value;
9570
+ if (b['block']['uuid'] === _this.selectedConfig.block.uuid && _this.loopIndex < 1) {
9571
+ _this.isFirstInLoop = true;
9572
+ }
9573
+ _this.loopIndex += 1;
9574
+ }
9575
+ }
9576
+ catch (e_2_1) { e_2 = { error: e_2_1 }; }
9577
+ finally {
9578
+ try {
9579
+ if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
9580
+ }
9581
+ finally { if (e_2) throw e_2.error; }
9582
+ }
9583
+ }
9551
9584
  if (_this.toolHidden) {
9552
9585
  _this.setHidden();
9553
9586
  }
@@ -9670,7 +9703,7 @@
9670
9703
  }
9671
9704
  };
9672
9705
  WiziBlockComponent.prototype.changeConfigWiziblocks = function (event) {
9673
- var e_2, _a;
9706
+ var e_3, _a;
9674
9707
  var _this = this;
9675
9708
  this.selectedConfig = event.config;
9676
9709
  if (typeof this.selectedConfig.forms !== typeof undefined) {
@@ -9685,12 +9718,12 @@
9685
9718
  }
9686
9719
  }
9687
9720
  }
9688
- catch (e_2_1) { e_2 = { error: e_2_1 }; }
9721
+ catch (e_3_1) { e_3 = { error: e_3_1 }; }
9689
9722
  finally {
9690
9723
  try {
9691
9724
  if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
9692
9725
  }
9693
- finally { if (e_2) throw e_2.error; }
9726
+ finally { if (e_3) throw e_3.error; }
9694
9727
  }
9695
9728
  }
9696
9729
  };
@@ -9712,7 +9745,7 @@
9712
9745
  WiziBlockComponent.decorators = [
9713
9746
  { type: i0.Component, args: [{
9714
9747
  selector: 'wb-wizi-block',
9715
- template: "<div\n id=\"wb-container\"\n class=\"columns wb-container\"\n *ngIf=\"translation\"\n #container\n (window:resize)=\"onResize($event)\"\n [ngClass]=\"{ 'is-smallscreen': smallScreen }\"\n>\n <div\n cdkDrag\n [cdkDragDisabled]=\"!toolUnpin\"\n class=\"column wb-container__tools\"\n [ngClass]=\"{ 'is-unpinned': toolUnpin && !toolHidden, 'is-smallscreen': smallScreen, 'has-no-tool': toolHidden }\"\n [style.top.px]=\"currentTopTool\"\n >\n <div [ngClass]=\"{ 'is-hidden': !toolHidden }\" (click)=\"setHidden(); $event.stopPropagation()\">\n <div [nwbToolTip]=\"'wb.panel.html.1' | translate\" nwbToolTipPosition=\"right\" class=\"is-tooltip-info\">\n <i class=\"far fa-arrow-alt-circle-right\"></i>\n </div>\n </div>\n <div [ngClass]=\"{ 'is-hidden': toolHidden }\">\n <div class=\"wb-tools\" *ngIf=\"selectedStructure === null\">\n <div class=\"wb-tools__header\">\n <p class=\"wb-tools__header__action\">\n <a\n class=\"button is-rounded is-tooltip-link\"\n [nwbToolTip]=\"toolUnpin ? 'wb.panel.html.2' : ('wb.panel.html.3' | translate)\"\n nwbToolTipPosition=\"bottom\"\n (click)=\"this.setUnpin(); $event.stopPropagation()\"\n ><i class=\"fal\" [ngClass]=\"{ 'fa-unlink': !toolUnpin, 'fa-link': toolUnpin }\"></i\n ></a>\n <a\n class=\"button is-rounded is-tooltip-link\"\n [nwbToolTip]=\"'wb.panel.html.4' | translate\"\n nwbToolTipPosition=\"bottom\"\n (click)=\"setHidden(); $event.stopPropagation()\"\n ><i class=\"far fa-arrow-alt-circle-left\"></i\n ></a>\n </p>\n <p class=\"wb-tools__header__list\">{{ translation.list_component | translate }}</p>\n </div>\n <ng-scrollbar [visibility]=\"'hover'\" *ngIf=\"components\" style=\"position: relative; max-height: 85vh\">\n <div class=\"wb-tools__content\">\n <div class=\"columns is-multiline\" [@animateListFromLeft]=\"components.components.length\">\n <div\n class=\"column is-6\"\n *ngFor=\"let component of components.components\"\n (click)=\"selectedStructure = component; selectedConfig = null\"\n >\n <div>\n <img\n [src]=\"'assets/blocks/images/icons/' + component.image\"\n [alt]=\"component.text | translate\"\n *ngIf=\"component.image\"\n />\n <p>{{ component.text | translate }}</p>\n </div>\n </div>\n </div>\n </div>\n </ng-scrollbar>\n </div>\n <div class=\"wb-configuration\" *ngIf=\"selectedStructure !== null\">\n <div class=\"wb-configuration__header\">\n <p class=\"wb-tools__header__action\">\n <a\n class=\"button is-rounded is-tooltip-link\"\n [nwbToolTip]=\"toolUnpin ? 'wb.panel.html.2' : ('wb.panel.html.3' | translate)\"\n nwbToolTipPosition=\"bottom\"\n (click)=\"this.setUnpin(); $event.stopPropagation()\"\n ><i class=\"fal\" [ngClass]=\"{ 'fa-unlink': !toolUnpin, 'fa-link': toolUnpin }\"></i\n ></a>\n <a\n class=\"button is-rounded is-tooltip-link\"\n [nwbToolTip]=\"'wb.panel.html.4' | translate\"\n nwbToolTipPosition=\"bottom\"\n (click)=\"setHidden(); $event.stopPropagation()\"\n ><i class=\"far fa-arrow-alt-circle-left\"></i\n ></a>\n </p>\n <p class=\"wb-configuration__header-click wb-tools__header__list\" (click)=\"selectedStructure = null; closeConfig()\">\n <i class=\"far fa-angle-left\"></i> {{ selectedStructure.text | translate }}\n </p>\n </div>\n <div class=\"wb-configuration__subheader\">\n <a (click)=\"closeConfig()\" [ngClass]=\"{ 'is-active': selectedConfig === null }\">{{\n translation.structure | translate\n }}</a>\n <a [ngClass]=\"{ 'is-active': selectedConfig !== null }\" *ngIf=\"selectedConfig !== null\">{{\n translation.config | translate\n }}</a>\n </div>\n <ng-scrollbar [visibility]=\"'hover'\" class=\"ps\" perfectScrollbar style=\"position: relative; max-height: 80vh\">\n <div class=\"wb-configuration__content\">\n <div\n *ngIf=\"selectedConfig === null\"\n class=\"wb-configuration__content_structures\"\n [@animateListFromRight]=\"selectedStructure.contents.length\"\n >\n <div\n cdkDropList\n [cdkDropListDisabled]=\"blocksContents.length === 0\"\n [cdkDropListConnectedTo]=\"['block-content']\"\n *ngFor=\"let selected of selectedStructure.contents\"\n >\n <img [src]=\"selected.image | imgPath\" />\n <p>{{ selected.name | translate }}</p>\n <div\n class=\"wb-configuration__content_structures__dragger\"\n [id]=\"selected.type\"\n cdkDrag\n cdkDragHandle\n [ngClass]=\"{ 'is-draggable': blocksContents.length }\"\n (click)=\"addThis(selected)\"\n >\n <p class=\"wb-configuration__content_structures__preview\" *cdkDragPreview></p>\n <p class=\"wb-configuration__content_structures__placeholder\" *cdkDragPlaceholder><span></span></p>\n </div>\n </div>\n </div>\n <div *ngIf=\"selectedConfig !== null\" class=\"wb-configuration__content_configuration\">\n <wb-configs [configs]=\"selectedConfig\" (changeConfig)=\"changeConfigWiziblocks($event)\"></wb-configs>\n </div>\n </div>\n </ng-scrollbar>\n </div>\n </div>\n </div>\n <div class=\"column wb-container__content\" [ngClass]=\"{ 'has-no-tool': toolHidden }\">\n <div class=\"wb-content\">\n <div class=\"wb-content__header\">\n <p><i class=\"fas fa-lock-alt\"></i> {{ translation.header | translate }}</p>\n </div>\n <div class=\"wb-content__content\">\n <wb-blocks [dynamicHidden]=\"isHiddenConfig\" #block [contents]=\"blocksContents\"></wb-blocks>\n </div>\n <div class=\"wb-content__footer\">\n <p><i class=\"fas fa-lock-alt\"></i> {{ translation.footer | translate }}</p>\n </div>\n </div>\n </div>\n</div>\n<hr id=\"wb-footer__block\" />\n",
9748
+ template: "<div\n id=\"wb-container\"\n class=\"columns wb-container\"\n *ngIf=\"translation\"\n #container\n (window:resize)=\"onResize($event)\"\n [ngClass]=\"{ 'is-smallscreen': smallScreen }\"\n>\n <div\n cdkDrag\n [cdkDragDisabled]=\"!toolUnpin\"\n class=\"column wb-container__tools\"\n [ngClass]=\"{ 'is-unpinned': toolUnpin && !toolHidden, 'is-smallscreen': smallScreen, 'has-no-tool': toolHidden }\"\n [style.top.px]=\"currentTopTool\"\n >\n <div [ngClass]=\"{ 'is-hidden': !toolHidden }\" (click)=\"setHidden(); $event.stopPropagation()\">\n <div [nwbToolTip]=\"'wb.panel.html.1' | translate\" nwbToolTipPosition=\"right\" class=\"is-tooltip-info\">\n <i class=\"far fa-arrow-alt-circle-right\"></i>\n </div>\n </div>\n <div [ngClass]=\"{ 'is-hidden': toolHidden }\">\n <div class=\"wb-tools\" *ngIf=\"selectedStructure === null\">\n <div class=\"wb-tools__header\">\n <p class=\"wb-tools__header__action\">\n <a\n class=\"button is-rounded is-tooltip-link\"\n [nwbToolTip]=\"toolUnpin ? 'wb.panel.html.2' : ('wb.panel.html.3' | translate)\"\n nwbToolTipPosition=\"bottom\"\n (click)=\"this.setUnpin(); $event.stopPropagation()\"\n ><i class=\"fal\" [ngClass]=\"{ 'fa-unlink': !toolUnpin, 'fa-link': toolUnpin }\"></i\n ></a>\n <a\n class=\"button is-rounded is-tooltip-link\"\n [nwbToolTip]=\"'wb.panel.html.4' | translate\"\n nwbToolTipPosition=\"bottom\"\n (click)=\"setHidden(); $event.stopPropagation()\"\n ><i class=\"far fa-arrow-alt-circle-left\"></i\n ></a>\n </p>\n <p class=\"wb-tools__header__list\">{{ translation.list_component | translate }}</p>\n </div>\n <ng-scrollbar [visibility]=\"'hover'\" *ngIf=\"components\" style=\"position: relative; max-height: 85vh\">\n <div class=\"wb-tools__content\">\n <div class=\"columns is-multiline\" [@animateListFromLeft]=\"components.components.length\">\n <div\n class=\"column is-6\"\n *ngFor=\"let component of components.components\"\n (click)=\"selectedStructure = component; selectedConfig = null\"\n >\n <div>\n <img\n [src]=\"'assets/blocks/images/icons/' + component.image\"\n [alt]=\"component.text | translate\"\n *ngIf=\"component.image\"\n />\n <p>{{ component.text | translate }}</p>\n </div>\n </div>\n </div>\n </div>\n </ng-scrollbar>\n </div>\n <div class=\"wb-configuration\" *ngIf=\"selectedStructure !== null\">\n <div class=\"wb-configuration__header\">\n <p class=\"wb-tools__header__action\">\n <a\n class=\"button is-rounded is-tooltip-link\"\n [nwbToolTip]=\"toolUnpin ? 'wb.panel.html.2' : ('wb.panel.html.3' | translate)\"\n nwbToolTipPosition=\"bottom\"\n (click)=\"this.setUnpin(); $event.stopPropagation()\"\n ><i class=\"fal\" [ngClass]=\"{ 'fa-unlink': !toolUnpin, 'fa-link': toolUnpin }\"></i\n ></a>\n <a\n class=\"button is-rounded is-tooltip-link\"\n [nwbToolTip]=\"'wb.panel.html.4' | translate\"\n nwbToolTipPosition=\"bottom\"\n (click)=\"setHidden(); $event.stopPropagation()\"\n ><i class=\"far fa-arrow-alt-circle-left\"></i\n ></a>\n </p>\n <p class=\"wb-configuration__header-click wb-tools__header__list\" (click)=\"selectedStructure = null; closeConfig()\">\n <i class=\"far fa-angle-left\"></i> {{ selectedStructure.text | translate }}\n </p>\n </div>\n <div class=\"wb-configuration__subheader\">\n <a (click)=\"closeConfig()\" [ngClass]=\"{ 'is-active': selectedConfig === null }\">{{\n translation.structure | translate\n }}</a>\n <a [ngClass]=\"{ 'is-active': selectedConfig !== null }\" *ngIf=\"selectedConfig !== null\">{{\n translation.config | translate\n }}</a>\n </div>\n <ng-scrollbar [visibility]=\"'hover'\" class=\"ps\" perfectScrollbar style=\"position: relative; max-height: 80vh\">\n <div class=\"wb-configuration__content\">\n <div\n *ngIf=\"selectedConfig === null\"\n class=\"wb-configuration__content_structures\"\n [@animateListFromRight]=\"selectedStructure.contents.length\"\n >\n <div\n cdkDropList\n [cdkDropListDisabled]=\"blocksContents.length === 0\"\n [cdkDropListConnectedTo]=\"['block-content']\"\n *ngFor=\"let selected of selectedStructure.contents\"\n >\n <img [src]=\"selected.image | imgPath\" />\n <p>{{ selected.name | translate }}</p>\n <div\n class=\"wb-configuration__content_structures__dragger\"\n [id]=\"selected.type\"\n cdkDrag\n cdkDragHandle\n [ngClass]=\"{ 'is-draggable': blocksContents.length }\"\n (click)=\"addThis(selected)\"\n >\n <p class=\"wb-configuration__content_structures__preview\" *cdkDragPreview></p>\n <p class=\"wb-configuration__content_structures__placeholder\" *cdkDragPlaceholder><span></span></p>\n </div>\n </div>\n </div>\n <div *ngIf=\"selectedConfig !== null\" class=\"wb-configuration__content_configuration\">\n <wb-configs\n [isFirst]=\"isFirstInLoop\"\n [configs]=\"selectedConfig\"\n (changeConfig)=\"changeConfigWiziblocks($event)\"\n ></wb-configs>\n </div>\n </div>\n </ng-scrollbar>\n </div>\n </div>\n </div>\n <div class=\"column wb-container__content\" [ngClass]=\"{ 'has-no-tool': toolHidden }\">\n <div class=\"wb-content\">\n <div class=\"wb-content__header\">\n <p><i class=\"fas fa-lock-alt\"></i> {{ translation.header | translate }}</p>\n </div>\n <div class=\"wb-content__content\">\n <wb-blocks [dynamicHidden]=\"isHiddenConfig\" #block [contents]=\"blocksContents\"></wb-blocks>\n </div>\n <div class=\"wb-content__footer\">\n <p><i class=\"fas fa-lock-alt\"></i> {{ translation.footer | translate }}</p>\n </div>\n </div>\n </div>\n</div>\n<hr id=\"wb-footer__block\" />\n",
9716
9749
  animations: [animateListFromRight('200ms ease-in-out', '100ms'), animateListFromLeft('100ms ease-in-out')]
9717
9750
  },] }
9718
9751
  ];
@@ -27859,6 +27892,7 @@
27859
27892
  this.wiziBlockService = wiziBlockService;
27860
27893
  this.contentService = contentService;
27861
27894
  this.configService = configService;
27895
+ this.isFirst = false;
27862
27896
  this.changeConfig = new i0.EventEmitter();
27863
27897
  this.FORM_TYPE_TEXT = FORM_TYPE_TEXT;
27864
27898
  this.FORM_TYPE_NUMBER = FORM_TYPE_NUMBER;
@@ -27949,7 +27983,7 @@
27949
27983
  ConfigsComponent.decorators = [
27950
27984
  { type: i0.Component, args: [{
27951
27985
  selector: 'wb-configs',
27952
- template: "<div class=\"wb-configs\" [@animateListFromLeft]=\"temporizeConfig\" *ngIf=\"temporizeConfig\">\n <div class=\"field\" *ngFor=\"let form of configs.forms; let i = index\">\n <label class=\"label\" [ngClass]=\"{ 'icon-help': form.iconHelp }\"\n >{{ form.label | translate }}\n <i *ngIf=\"form.iconHelp\" class=\"fas fa-info-circle\"\n ><span>{{ form.help | translate }}</span></i\n ></label\n >\n <div class=\"control\" *ngIf=\"form.type === FORM_TYPE_TEXT\">\n <input\n class=\"input\"\n [type]=\"form.type\"\n [placeholder]=\"form.placeholder | translate\"\n [ngModel]=\"form.value | translate\"\n (ngModelChange)=\"form.value = $event\"\n (keyup)=\"updateContent()\"\n />\n </div>\n <div class=\"control\" *ngIf=\"form.type === FORM_TYPE_NUMBER\">\n <input\n class=\"input\"\n [type]=\"form.type\"\n [maxlength]=\"999999999\"\n [placeholder]=\"form.placeholder | translate\"\n [(ngModel)]=\"form.value\"\n (keyup)=\"updateNumber($event, i)\"\n />\n </div>\n <div class=\"control\" *ngIf=\"form.type === FORM_TYPE_CHECKBOX\">\n <input\n [id]=\"'switchRoundedDefault' + i\"\n [type]=\"form.type\"\n [name]=\"'switchRoundedDefault' + i\"\n class=\"switch is-rounded is-info\"\n [checked]=\"form.value === (form.state[0] ? form.state[0] : true)\"\n (change)=\"updateChanges($event, i)\"\n />\n <label [for]=\"'switchRoundedDefault' + i\"></label>\n </div>\n <div class=\"control\" *ngIf=\"form.type === FORM_TYPE_TAG\">\n <a\n class=\"button is-info\"\n [ngClass]=\"{ 'is-outlined': step !== form.value && (!form.stepKey.length || form.stepKey[i] !== form.value) }\"\n *ngFor=\"let step of form.step; let i = index\"\n (click)=\"form.value = form.stepKey.length && form.stepKey[i] ? form.stepKey[i] : step; updateContent()\"\n >\n {{ step | translate }}\n </a>\n </div>\n <div class=\"control\" *ngIf=\"form.type === FORM_TYPE_COLOR\" #colors>\n <div\n [class]=\"'wb-configs__color wb-configs__colorjs' + i\"\n [style.background]=\"form.value\"\n (click)=\"colors.show = !colors.show\"\n ></div>\n <div\n class=\"wb-configs__picker\"\n wbAutoHide\n [triggerElement]=\"'wb-configs__colorjs' + i\"\n (clickOutside)=\"colors.show = false\"\n [ngClass]=\"{ 'is-active': colors.show }\"\n >\n <div\n [(colorPicker)]=\"form.value\"\n [style.background]=\"form.value\"\n [cpPosition]=\"'top'\"\n [cpWidth]=\"'auto'\"\n [cpToggle]=\"true\"\n [cpDialogDisplay]=\"'inline'\"\n (colorPickerChange)=\"updateContent()\"\n ></div>\n </div>\n </div>\n <p *ngIf=\"!form.iconHelp && !checkHelp(i)\" class=\"help\" [innerHTML]=\"form.help | translate\"></p>\n <p *ngIf=\"!form.iconHelp && checkHelp(i)\" class=\"help\" [innerHTML]=\"getValueHelp(form.value, i) | translate\"></p>\n </div>\n</div>\n",
27986
+ template: "<div class=\"wb-configs\" [ngClass]=\"{ 'is-not-first': !isFirst }\" [@animateListFromLeft]=\"temporizeConfig\" *ngIf=\"temporizeConfig\">\n <div class=\"field\" *ngFor=\"let form of configs.forms; let i = index\">\n <label class=\"label\" [ngClass]=\"{ 'icon-help': form.iconHelp }\"\n >{{ form.label | translate }}\n <i *ngIf=\"form.iconHelp\" class=\"fas fa-info-circle\"\n ><span>{{ form.help | translate }}</span></i\n ></label\n >\n <div class=\"control\" *ngIf=\"form.type === FORM_TYPE_TEXT\">\n <input\n class=\"input\"\n [type]=\"form.type\"\n [placeholder]=\"form.placeholder | translate\"\n [ngModel]=\"form.value | translate\"\n (ngModelChange)=\"form.value = $event\"\n (keyup)=\"updateContent()\"\n />\n </div>\n <div class=\"control\" *ngIf=\"form.type === FORM_TYPE_NUMBER\">\n <input\n class=\"input\"\n [type]=\"form.type\"\n [maxlength]=\"999999999\"\n [placeholder]=\"form.placeholder | translate\"\n [(ngModel)]=\"form.value\"\n (keyup)=\"updateNumber($event, i)\"\n />\n </div>\n <div class=\"control\" *ngIf=\"form.type === FORM_TYPE_CHECKBOX\">\n <input\n [id]=\"'switchRoundedDefault' + i\"\n [type]=\"form.type\"\n [name]=\"'switchRoundedDefault' + i\"\n class=\"switch is-rounded is-info\"\n [checked]=\"form.value === (form.state[0] ? form.state[0] : true)\"\n (change)=\"updateChanges($event, i)\"\n />\n <label [for]=\"'switchRoundedDefault' + i\"></label>\n </div>\n <div class=\"control\" *ngIf=\"form.type === FORM_TYPE_TAG\">\n <a\n class=\"button is-info\"\n [ngClass]=\"{ 'is-outlined': step !== form.value && (!form.stepKey.length || form.stepKey[i] !== form.value) }\"\n *ngFor=\"let step of form.step; let i = index\"\n (click)=\"form.value = form.stepKey.length && form.stepKey[i] ? form.stepKey[i] : step; updateContent()\"\n >\n {{ step | translate }}\n </a>\n </div>\n <div class=\"control\" *ngIf=\"form.type === FORM_TYPE_COLOR\" #colors>\n <div\n [class]=\"'wb-configs__color wb-configs__colorjs' + i\"\n [style.background]=\"form.value\"\n (click)=\"colors.show = !colors.show\"\n ></div>\n <div\n class=\"wb-configs__picker\"\n wbAutoHide\n [triggerElement]=\"'wb-configs__colorjs' + i\"\n (clickOutside)=\"colors.show = false\"\n [ngClass]=\"{ 'is-active': colors.show }\"\n >\n <div\n [(colorPicker)]=\"form.value\"\n [style.background]=\"form.value\"\n [cpPosition]=\"'top'\"\n [cpWidth]=\"'auto'\"\n [cpToggle]=\"true\"\n [cpDialogDisplay]=\"'inline'\"\n (colorPickerChange)=\"updateContent()\"\n ></div>\n </div>\n </div>\n <p *ngIf=\"!form.iconHelp && !checkHelp(i)\" class=\"help\" [innerHTML]=\"form.help | translate\"></p>\n <p *ngIf=\"!form.iconHelp && checkHelp(i)\" class=\"help\" [innerHTML]=\"getValueHelp(form.value, i) | translate\"></p>\n </div>\n</div>\n",
27953
27987
  animations: [animateListFromLeft('200ms ease-in-out')]
27954
27988
  },] }
27955
27989
  ];
@@ -27960,6 +27994,7 @@
27960
27994
  ]; };
27961
27995
  ConfigsComponent.propDecorators = {
27962
27996
  configs: [{ type: i0.Input }],
27997
+ isFirst: [{ type: i0.Input }],
27963
27998
  changeConfig: [{ type: i0.Output }]
27964
27999
  };
27965
28000