ui-core-abv 0.6.47 → 0.6.51
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.
package/fesm2022/ui-core-abv.mjs
CHANGED
|
@@ -5604,14 +5604,40 @@ class ItemValueComponent {
|
|
|
5604
5604
|
switchConfirmed = new EventEmitter();
|
|
5605
5605
|
expanded = false;
|
|
5606
5606
|
checked = false;
|
|
5607
|
-
|
|
5608
|
-
|
|
5609
|
-
|
|
5610
|
-
|
|
5607
|
+
currentData = null;
|
|
5608
|
+
previousRow;
|
|
5609
|
+
previousRowData;
|
|
5610
|
+
previousKey = '';
|
|
5611
|
+
previousInputData = null;
|
|
5612
|
+
ngDoCheck() {
|
|
5613
|
+
this.syncCurrentData();
|
|
5614
|
+
}
|
|
5615
|
+
syncCurrentData() {
|
|
5616
|
+
const nextData = this.resolveCurrentData();
|
|
5617
|
+
if (this.previousRow !== this.row ||
|
|
5618
|
+
this.previousRowData !== this.row?.data ||
|
|
5619
|
+
this.previousKey !== this.key ||
|
|
5620
|
+
this.previousInputData !== this.data ||
|
|
5621
|
+
this.currentData !== nextData) {
|
|
5622
|
+
this.currentData = nextData;
|
|
5623
|
+
this.checked = nextData?.checked ?? false;
|
|
5624
|
+
this.previousRow = this.row;
|
|
5625
|
+
this.previousRowData = this.row?.data;
|
|
5626
|
+
this.previousKey = this.key;
|
|
5627
|
+
this.previousInputData = this.data;
|
|
5628
|
+
}
|
|
5629
|
+
}
|
|
5630
|
+
resolveCurrentData() {
|
|
5631
|
+
if (this.data) {
|
|
5632
|
+
return this.data;
|
|
5633
|
+
}
|
|
5634
|
+
if (!this.row) {
|
|
5635
|
+
return null;
|
|
5611
5636
|
}
|
|
5637
|
+
return this.row.data.find(f => f.key == this.key) ?? null;
|
|
5612
5638
|
}
|
|
5613
5639
|
switchHandler(rowId, value) {
|
|
5614
|
-
if (this.
|
|
5640
|
+
if (this.currentData && this.switchValidation.length > 0) {
|
|
5615
5641
|
const OK = this.switchValidation[0];
|
|
5616
5642
|
const CANCEL = this.switchValidation[1] ?? this.switchValidation[0];
|
|
5617
5643
|
this.alers.showAlert(value ? OK : CANCEL).then(r => {
|
|
@@ -5619,9 +5645,9 @@ class ItemValueComponent {
|
|
|
5619
5645
|
this.switchConfirmed.emit(value);
|
|
5620
5646
|
}
|
|
5621
5647
|
else {
|
|
5622
|
-
if (this.
|
|
5623
|
-
this.
|
|
5624
|
-
this.checked = this.
|
|
5648
|
+
if (this.currentData) {
|
|
5649
|
+
this.currentData.checked = !value;
|
|
5650
|
+
this.checked = this.currentData.checked;
|
|
5625
5651
|
}
|
|
5626
5652
|
setTimeout(() => {
|
|
5627
5653
|
}, 100);
|
|
@@ -5646,7 +5672,7 @@ class ItemValueComponent {
|
|
|
5646
5672
|
});
|
|
5647
5673
|
}
|
|
5648
5674
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ItemValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5649
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ItemValueComponent, isStandalone: true, selector: "ui-item-value", inputs: { key: "key", type: "type", alignment: "alignment", row: "row", disabled: "disabled", data: "data", switchValidation: "switchValidation" }, outputs: { switchConfirmed: "switchConfirmed" }, ngImport: i0, template: "@if (
|
|
5675
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ItemValueComponent, isStandalone: true, selector: "ui-item-value", inputs: { key: "key", type: "type", alignment: "alignment", row: "row", disabled: "disabled", data: "data", switchValidation: "switchValidation" }, outputs: { switchConfirmed: "switchConfirmed" }, ngImport: i0, template: "@if (currentData) {\r\n @if (type == 'text' || !type) {\r\n <div [class]=\"'ui-trc-' + currentData.textColor \">\r\n @if( currentData.icon ){ <i [class]=\"currentData.icon + ' ui-trc-' + currentData.iconColor\"></i>}\r\n {{ currentData.value }} \r\n @if( currentData.rightIcon ){ <i [class]=\"currentData.rightIcon + ' ui-trc-' + currentData.iconColor\"></i>}\r\n </div>\r\n }\r\n @if (type == 'copy') {\r\n <div class=\"copy-div\">\r\n {{ currentData.value }} \r\n <ui-button (click)=\"copyText((currentData.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n </div>\r\n }\r\n @if (type == 'money'){\r\n {{ (currentData.value??0) | currency: currentData.currencyCode||''}} \r\n }\r\n @if (type == 'bold'){\r\n <b>{{ currentData.value}}</b>\r\n }\r\n @if (type == 'date'){\r\n {{ (currentData.value??'').toString() | date: 'dd/MM/yyyy'}} \r\n }\r\n @if (type == 'bigtext') {\r\n <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\r\n {{ currentData.value }} \r\n @if( currentData.value && currentData.value.toString().length > 0){\r\n <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n }\r\n @if (!expanded && currentData.value && currentData.value.toString().length > 0) {\r\n <div class=\"fade-overlay\"></div>\r\n }\r\n </div>\r\n }\r\n @if (type == 'icon-list') {\r\n @for (alert of currentData.list; track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n }\r\n }\r\n @else if (type == 'list'){\r\n <uic-table-list [list]=\"currentData.list??[]\"></uic-table-list> \r\n }\r\n @else if (type == 'user'){\r\n <uic-table-user [user]=\"currentData.user\"></uic-table-user> \r\n }\r\n @else if (type == 'status'){\r\n @if (currentData.value) {\r\n <ui-status-label [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label> \r\n }@else {\r\n -\r\n }\r\n }\r\n @else if (type == 'tag'){\r\n <ui-status-label type=\"tag\" [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label> \r\n }\r\n @else if (type == 'switch'){\r\n <div (click)=\"$event.stopPropagation()\">\r\n <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch> \r\n </div>\r\n }\r\n\r\n @if( currentData.subtext ){\r\n <div [class]=\"'subtext ui-alignment-'+alignment\">{{ currentData.subtext }}</div>\r\n }\r\n}\r\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.ui-alignment-center{justify-content:center;text-align:center}.ui-alignment-right{justify-content:flex-end;text-align:right}b{font-weight:600}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}\n"], dependencies: [{ kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type", "icon"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
5650
5676
|
}
|
|
5651
5677
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ItemValueComponent, decorators: [{
|
|
5652
5678
|
type: Component,
|
|
@@ -5660,7 +5686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
5660
5686
|
UicButtonComponent,
|
|
5661
5687
|
CurrencyPipe,
|
|
5662
5688
|
DatePipe
|
|
5663
|
-
], template: "@if (
|
|
5689
|
+
], template: "@if (currentData) {\r\n @if (type == 'text' || !type) {\r\n <div [class]=\"'ui-trc-' + currentData.textColor \">\r\n @if( currentData.icon ){ <i [class]=\"currentData.icon + ' ui-trc-' + currentData.iconColor\"></i>}\r\n {{ currentData.value }} \r\n @if( currentData.rightIcon ){ <i [class]=\"currentData.rightIcon + ' ui-trc-' + currentData.iconColor\"></i>}\r\n </div>\r\n }\r\n @if (type == 'copy') {\r\n <div class=\"copy-div\">\r\n {{ currentData.value }} \r\n <ui-button (click)=\"copyText((currentData.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n </div>\r\n }\r\n @if (type == 'money'){\r\n {{ (currentData.value??0) | currency: currentData.currencyCode||''}} \r\n }\r\n @if (type == 'bold'){\r\n <b>{{ currentData.value}}</b>\r\n }\r\n @if (type == 'date'){\r\n {{ (currentData.value??'').toString() | date: 'dd/MM/yyyy'}} \r\n }\r\n @if (type == 'bigtext') {\r\n <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\r\n {{ currentData.value }} \r\n @if( currentData.value && currentData.value.toString().length > 0){\r\n <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n }\r\n @if (!expanded && currentData.value && currentData.value.toString().length > 0) {\r\n <div class=\"fade-overlay\"></div>\r\n }\r\n </div>\r\n }\r\n @if (type == 'icon-list') {\r\n @for (alert of currentData.list; track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n }\r\n }\r\n @else if (type == 'list'){\r\n <uic-table-list [list]=\"currentData.list??[]\"></uic-table-list> \r\n }\r\n @else if (type == 'user'){\r\n <uic-table-user [user]=\"currentData.user\"></uic-table-user> \r\n }\r\n @else if (type == 'status'){\r\n @if (currentData.value) {\r\n <ui-status-label [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label> \r\n }@else {\r\n -\r\n }\r\n }\r\n @else if (type == 'tag'){\r\n <ui-status-label type=\"tag\" [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label> \r\n }\r\n @else if (type == 'switch'){\r\n <div (click)=\"$event.stopPropagation()\">\r\n <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch> \r\n </div>\r\n }\r\n\r\n @if( currentData.subtext ){\r\n <div [class]=\"'subtext ui-alignment-'+alignment\">{{ currentData.subtext }}</div>\r\n }\r\n}\r\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.ui-alignment-center{justify-content:center;text-align:center}.ui-alignment-right{justify-content:flex-end;text-align:right}b{font-weight:600}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}\n"] }]
|
|
5664
5690
|
}], propDecorators: { key: [{
|
|
5665
5691
|
type: Input
|
|
5666
5692
|
}], type: [{
|
|
@@ -6600,11 +6626,11 @@ class UicWorkPanelComponent {
|
|
|
6600
6626
|
return !(this.isMinimized || !this.activeTabId) && this.fullView;
|
|
6601
6627
|
}
|
|
6602
6628
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6603
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicWorkPanelComponent, isStandalone: true, selector: "ui-work-panel", inputs: { moreActions: "moreActions", componentType: "componentType", componentInputs: "componentInputs", tabs: "tabs", closeWarning: "closeWarning", width: "width", duplicateValidationMessage: "duplicateValidationMessage", minPosition: "minPosition", showAddButton: "showAddButton" }, outputs: { actionSelected: "actionSelected", tabsChange: "tabsChange", tabClosed: "tabClosed", tabSelected: "tabSelected", tabAdded: "tabAdded", fullViewChange: "fullViewChange" }, host: { properties: { "style.--panel-width": "this.panelWidth" } }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\r\n [class.dynamic-width]=\"!fullView\"\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n @if (activeTabTitle) {\r\n <div class=\"wp-title\">{{activeTabTitle}}</div>\r\n }\r\n @if (moreActions.length > 0) { \r\n <ui-action-button [options]=\"moreActions\" (optionSelected)=\"emitAction($event)\"></ui-action-button>\r\n }\r\n <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" [tip]=\"'work_panel.minimize' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n @if (fullView) {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" [tip]=\"'work_panel.reduce' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n } @else {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" [tip]=\"'work_panel.expand' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"closeActiveTab()\" size=\"s\" [tip]=\"'work_panel.close' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n </div>\r\n <div class=\"panel-overflow\">\r\n <!-- contenido dinamico -->\r\n <ng-container #host></ng-container>\r\n </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n <div class=\"panel-nav-bar\">\r\n <div class=\"panel-tabs\">\r\n @for (tab of tabInstances; track tab.id) {\r\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n <div class=\"min-text\">{{ tab.label }}</div>\r\n </button>\r\n <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.wp-title{flex:1 1;font-weight:600}.mid-panel{position:fixed;height:80vh;min-width:30%;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}.dynamic-width{width:var(--panel-width)}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }] });
|
|
6629
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicWorkPanelComponent, isStandalone: true, selector: "ui-work-panel", inputs: { moreActions: "moreActions", componentType: "componentType", componentInputs: "componentInputs", tabs: "tabs", closeWarning: "closeWarning", width: "width", duplicateValidationMessage: "duplicateValidationMessage", minPosition: "minPosition", showAddButton: "showAddButton" }, outputs: { actionSelected: "actionSelected", tabsChange: "tabsChange", tabClosed: "tabClosed", tabSelected: "tabSelected", tabAdded: "tabAdded", fullViewChange: "fullViewChange" }, host: { properties: { "style.--panel-width": "this.panelWidth" } }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\r\n [class.dynamic-width]=\"!fullView\"\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n @if (activeTabTitle) {\r\n <div class=\"wp-title\">{{activeTabTitle}}</div>\r\n }\r\n @if (moreActions.length > 0) { \r\n <ui-action-button [options]=\"moreActions\" (optionSelected)=\"emitAction($event)\"></ui-action-button>\r\n }\r\n <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" [tip]=\"'work_panel.minimize' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n @if (fullView) {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" [tip]=\"'work_panel.reduce' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n } @else {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" [tip]=\"'work_panel.expand' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"closeActiveTab()\" size=\"s\" [tip]=\"'work_panel.close' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n </div>\r\n <div class=\"panel-overflow\">\r\n <!-- contenido dinamico -->\r\n <ng-container #host></ng-container>\r\n </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n <div class=\"panel-nav-bar\">\r\n <div class=\"panel-tabs\">\r\n @for (tab of tabInstances; track tab.id) {\r\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n <div class=\"min-text\">{{ tab.label }}</div>\r\n </button>\r\n <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.wp-title{flex:1 1;font-weight:600}.mid-panel{position:fixed;height:80vh;min-width:30%;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;align-items:center;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}.dynamic-width{width:var(--panel-width)}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }] });
|
|
6604
6630
|
}
|
|
6605
6631
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, decorators: [{
|
|
6606
6632
|
type: Component,
|
|
6607
|
-
args: [{ selector: 'ui-work-panel', imports: [UicButtonComponent, UicToolTipDirective, UicTranslatePipe, UicActionButtonComponent], template: "<div\r\n [class.dynamic-width]=\"!fullView\"\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n @if (activeTabTitle) {\r\n <div class=\"wp-title\">{{activeTabTitle}}</div>\r\n }\r\n @if (moreActions.length > 0) { \r\n <ui-action-button [options]=\"moreActions\" (optionSelected)=\"emitAction($event)\"></ui-action-button>\r\n }\r\n <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" [tip]=\"'work_panel.minimize' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n @if (fullView) {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" [tip]=\"'work_panel.reduce' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n } @else {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" [tip]=\"'work_panel.expand' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"closeActiveTab()\" size=\"s\" [tip]=\"'work_panel.close' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n </div>\r\n <div class=\"panel-overflow\">\r\n <!-- contenido dinamico -->\r\n <ng-container #host></ng-container>\r\n </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n <div class=\"panel-nav-bar\">\r\n <div class=\"panel-tabs\">\r\n @for (tab of tabInstances; track tab.id) {\r\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n <div class=\"min-text\">{{ tab.label }}</div>\r\n </button>\r\n <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.wp-title{flex:1 1;font-weight:600}.mid-panel{position:fixed;height:80vh;min-width:30%;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}.dynamic-width{width:var(--panel-width)}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"] }]
|
|
6633
|
+
args: [{ selector: 'ui-work-panel', imports: [UicButtonComponent, UicToolTipDirective, UicTranslatePipe, UicActionButtonComponent], template: "<div\r\n [class.dynamic-width]=\"!fullView\"\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n @if (activeTabTitle) {\r\n <div class=\"wp-title\">{{activeTabTitle}}</div>\r\n }\r\n @if (moreActions.length > 0) { \r\n <ui-action-button [options]=\"moreActions\" (optionSelected)=\"emitAction($event)\"></ui-action-button>\r\n }\r\n <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" [tip]=\"'work_panel.minimize' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n @if (fullView) {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" [tip]=\"'work_panel.reduce' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n } @else {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" [tip]=\"'work_panel.expand' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"closeActiveTab()\" size=\"s\" [tip]=\"'work_panel.close' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n </div>\r\n <div class=\"panel-overflow\">\r\n <!-- contenido dinamico -->\r\n <ng-container #host></ng-container>\r\n </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n <div class=\"panel-nav-bar\">\r\n <div class=\"panel-tabs\">\r\n @for (tab of tabInstances; track tab.id) {\r\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n <div class=\"min-text\">{{ tab.label }}</div>\r\n </button>\r\n <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.wp-title{flex:1 1;font-weight:600}.mid-panel{position:fixed;height:80vh;min-width:30%;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;align-items:center;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}.dynamic-width{width:var(--panel-width)}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"] }]
|
|
6608
6634
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { host: [{
|
|
6609
6635
|
type: ViewChild,
|
|
6610
6636
|
args: ['host', { read: ViewContainerRef, static: true }]
|
|
@@ -8538,18 +8564,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8538
8564
|
|
|
8539
8565
|
class UicUserFormbuilderComponent {
|
|
8540
8566
|
modalService = inject(UicModalService);
|
|
8567
|
+
tinyAlertService = inject(UicTinyAlertService);
|
|
8568
|
+
translateService = inject(UicTranslateService);
|
|
8541
8569
|
formTitle = 'Nuevo formulario';
|
|
8542
|
-
cols = 2;
|
|
8543
8570
|
readOnly = input(true);
|
|
8544
|
-
|
|
8571
|
+
editableFormInput = input({ cols: 2, blocks: [] }, { alias: 'editableForm' });
|
|
8545
8572
|
submitFormRequest = output();
|
|
8546
8573
|
nextBlockId = 1;
|
|
8547
8574
|
nextFieldId = 1;
|
|
8575
|
+
editableCols = signal(2);
|
|
8548
8576
|
editableBlocks = signal([]);
|
|
8549
8577
|
editingSnapshot = signal(null);
|
|
8550
8578
|
isReadOnly = signal(true);
|
|
8551
8579
|
selectedField = signal(null);
|
|
8552
|
-
previewSchema = computed(() => helperShowFormFromBuilder(this.editableBlocks(), this.
|
|
8580
|
+
previewSchema = computed(() => helperShowFormFromBuilder(this.editableBlocks(), this.editableCols()));
|
|
8553
8581
|
dependencyOptions = computed(() => {
|
|
8554
8582
|
const currentSelected = this.selectedField();
|
|
8555
8583
|
const options = this.editableBlocks()
|
|
@@ -8570,11 +8598,12 @@ class UicUserFormbuilderComponent {
|
|
|
8570
8598
|
}
|
|
8571
8599
|
});
|
|
8572
8600
|
effect(() => {
|
|
8573
|
-
const
|
|
8601
|
+
const sourceForm = this.editableFormInput();
|
|
8574
8602
|
if (!this.isReadOnly() && this.editingSnapshot()) {
|
|
8575
8603
|
return;
|
|
8576
8604
|
}
|
|
8577
|
-
this.
|
|
8605
|
+
this.editableCols.set(sourceForm.cols ?? 2);
|
|
8606
|
+
this.editableBlocks.set(this.prepareBlocksForLocalState(sourceForm.blocks ?? []));
|
|
8578
8607
|
});
|
|
8579
8608
|
effect(() => {
|
|
8580
8609
|
const blocks = this.editableBlocks();
|
|
@@ -8635,11 +8664,18 @@ class UicUserFormbuilderComponent {
|
|
|
8635
8664
|
}
|
|
8636
8665
|
printForm() {
|
|
8637
8666
|
this.modalService.openFloatingModal(FormPreviewComponent, {
|
|
8638
|
-
data: { schema: helperShowFormFromBuilder(this.editableBlocks(), this.
|
|
8667
|
+
data: { schema: helperShowFormFromBuilder(this.editableBlocks(), this.editableCols(), true) },
|
|
8639
8668
|
size: 'medium'
|
|
8640
8669
|
});
|
|
8641
8670
|
}
|
|
8642
8671
|
submitForm() {
|
|
8672
|
+
const duplicatedFieldName = this.getDuplicatedFieldName();
|
|
8673
|
+
if (duplicatedFieldName) {
|
|
8674
|
+
this.tinyAlertService.warning(this.translateService.translate('form_builder.validation.duplicate_identifier', {
|
|
8675
|
+
identifier: duplicatedFieldName
|
|
8676
|
+
}));
|
|
8677
|
+
return;
|
|
8678
|
+
}
|
|
8643
8679
|
const blocksWithOrderedFields = this.editableBlocks().map(block => ({
|
|
8644
8680
|
...block,
|
|
8645
8681
|
fields: block.fields.map((field, index) => ({
|
|
@@ -8651,20 +8687,40 @@ class UicUserFormbuilderComponent {
|
|
|
8651
8687
|
this.editableBlocks.set(blocksWithOrderedFields);
|
|
8652
8688
|
this.isReadOnly.set(true);
|
|
8653
8689
|
this.editingSnapshot.set(null);
|
|
8654
|
-
this.submitFormRequest.emit(
|
|
8655
|
-
|
|
8656
|
-
|
|
8657
|
-
|
|
8690
|
+
this.submitFormRequest.emit({
|
|
8691
|
+
cols: this.editableCols(),
|
|
8692
|
+
blocks: blocksWithOrderedFields.map(block => ({
|
|
8693
|
+
...block,
|
|
8694
|
+
fields: block.fields.map(({ field, ...restField }) => restField)
|
|
8695
|
+
}))
|
|
8696
|
+
});
|
|
8697
|
+
}
|
|
8698
|
+
getDuplicatedFieldName() {
|
|
8699
|
+
const usedNames = new Set();
|
|
8700
|
+
for (const field of this.editableBlocks().flatMap(block => block.fields)) {
|
|
8701
|
+
const fieldName = field.fieldData.name?.trim();
|
|
8702
|
+
if (!fieldName)
|
|
8703
|
+
continue;
|
|
8704
|
+
if (usedNames.has(fieldName)) {
|
|
8705
|
+
return fieldName;
|
|
8706
|
+
}
|
|
8707
|
+
usedNames.add(fieldName);
|
|
8708
|
+
}
|
|
8709
|
+
return null;
|
|
8658
8710
|
}
|
|
8659
8711
|
enableEditMode() {
|
|
8660
|
-
this.editingSnapshot.set(this.deepClone(
|
|
8712
|
+
this.editingSnapshot.set(this.deepClone({
|
|
8713
|
+
cols: this.editableCols(),
|
|
8714
|
+
blocks: this.editableBlocks()
|
|
8715
|
+
}));
|
|
8661
8716
|
this.isReadOnly.set(false);
|
|
8662
8717
|
}
|
|
8663
8718
|
discardChanges() {
|
|
8664
8719
|
const snapshot = this.editingSnapshot();
|
|
8665
8720
|
if (!snapshot)
|
|
8666
8721
|
return;
|
|
8667
|
-
this.
|
|
8722
|
+
this.editableCols.set(snapshot.cols ?? 2);
|
|
8723
|
+
this.editableBlocks.set(this.prepareBlocksForLocalState(snapshot.blocks ?? []));
|
|
8668
8724
|
this.selectedField.set(null);
|
|
8669
8725
|
this.editingSnapshot.set(null);
|
|
8670
8726
|
this.isReadOnly.set(true);
|
|
@@ -8759,7 +8815,7 @@ class UicUserFormbuilderComponent {
|
|
|
8759
8815
|
return value;
|
|
8760
8816
|
}
|
|
8761
8817
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicUserFormbuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8762
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicUserFormbuilderComponent, isStandalone: true, selector: "ui-user-formbuilder", inputs: { formTitle: { classPropertyName: "formTitle", publicName: "formTitle", isSignal: false, isRequired: false, transformFunction: null },
|
|
8818
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicUserFormbuilderComponent, isStandalone: true, selector: "ui-user-formbuilder", inputs: { formTitle: { classPropertyName: "formTitle", publicName: "formTitle", isSignal: false, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, editableFormInput: { classPropertyName: "editableFormInput", publicName: "editableForm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitFormRequest: "submitFormRequest" }, ngImport: i0, template: "<div class=\"formeditor\" [class.focused]=\"!isReadOnly()\">\r\n <div class=\"formeditor-header\">\r\n <div style=\"flex: 1 1;\">\r\n {{formTitle}} \r\n \r\n <div class=\"cols-selector\"> \r\n @if (isReadOnly()) {\r\n {{editableCols()}}\r\n }@else {\r\n <ui-select [options]=\"[{id: 1, text: '1'}, {id: 2, text: '2'}, {id: 3, text: '3'}, {id: 4, text: '4'}]\" [ngModel]=\"editableCols()\" (ngModelChange)=\"editableCols.set($event)\"></ui-select> \r\n }\r\n col(s)</div>\r\n </div>\r\n @if (isReadOnly()) {\r\n <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\r\n } @else {\r\n <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\r\n <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n }\r\n </div>\r\n @if (!isReadOnly()) {\r\n <div class=\"formeditor-body\">\r\n \r\n <!-- BLOCKS -->\r\n <div class=\"formeditor-overflow\">\r\n <div class=\"formeditor-workarea\">\r\n @for (block of editableBlocks(); track block.code; let i = $index) {\r\n <lib-block-editor \r\n [block]=\"block\"\r\n [selectedFieldId]=\"selectedField()?.code ?? null\"\r\n (blockChange)=\"onBlockChange(i, $event)\"\r\n (addFieldRequest)=\"addField(block.code, $event)\"\r\n (notifySelectedField)=\"selectedField.set($event)\"\r\n (deleteBlock)=\"deleteBlock($event)\">\r\n </lib-block-editor>\r\n }\r\n <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n </div>\r\n </div>\r\n <!-- PROPERTIES -->\r\n <div class=\"formeditor-properties\">\r\n <h3>Propiedades</h3>\r\n <div class=\"formeditor-properties-form\">\r\n @if (selectedField() ) {\r\n <lib-field-editor \r\n [config]=\"selectedField()!\"\r\n [options]=\"dependencyOptions()\"\r\n (fieldChange)=\"onFieldChange($event)\">\r\n </lib-field-editor>\r\n }@else{\r\n <div class=\"no-selected-field\">\r\n <i class=\"ri-edit-box-line\"></i>\r\n <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div class=\"form-preview\">\r\n <ui-form-wrapper \r\n [schema]=\"previewSchema()\"\r\n [showButtons]=\"false\">\r\n </ui-form-wrapper>\r\n </div>\r\n }\r\n </div>\r\n\r\n", styles: [".formeditor{display:flex;flex-direction:column;overflow:hidden;background-color:var(--grey-100);border:solid 1px var(--grey-300);border-radius:5px;max-height:500px}.formeditor-header{background-color:#fff;padding:5px 10px;align-items:center;display:flex;gap:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-body{display:flex;gap:10px;overflow:hidden;padding:10px}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto}.form-preview{padding:20px;overflow:auto;background-color:#fff}.focused{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.no-selected-field{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;font-size:13px;gap:15px;text-align:center;color:var(--grey-400)}.no-selected-field i{font-size:24px}.cols-selector{margin-left:8px;padding-left:8px;border-left:solid 1px var(--grey-400);display:inline-flex;align-items:center;gap:5px}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues"], outputs: ["formSubmit", "formChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: FieldEditorComponent, selector: "lib-field-editor", inputs: ["config", "options"], outputs: ["fieldChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BlockEditorComponent, selector: "lib-block-editor", inputs: ["block", "selectedFieldId"], outputs: ["blockChange", "addFieldRequest", "deleteBlock", "notifySelectedField"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "searcherEnabled", "loading", "nullable", "options"] }] });
|
|
8763
8819
|
}
|
|
8764
8820
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicUserFormbuilderComponent, decorators: [{
|
|
8765
8821
|
type: Component,
|
|
@@ -8769,12 +8825,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
8769
8825
|
UicTranslatePipe,
|
|
8770
8826
|
FieldEditorComponent,
|
|
8771
8827
|
FormsModule,
|
|
8772
|
-
BlockEditorComponent
|
|
8773
|
-
|
|
8828
|
+
BlockEditorComponent,
|
|
8829
|
+
UicSelectComponent
|
|
8830
|
+
], template: "<div class=\"formeditor\" [class.focused]=\"!isReadOnly()\">\r\n <div class=\"formeditor-header\">\r\n <div style=\"flex: 1 1;\">\r\n {{formTitle}} \r\n \r\n <div class=\"cols-selector\"> \r\n @if (isReadOnly()) {\r\n {{editableCols()}}\r\n }@else {\r\n <ui-select [options]=\"[{id: 1, text: '1'}, {id: 2, text: '2'}, {id: 3, text: '3'}, {id: 4, text: '4'}]\" [ngModel]=\"editableCols()\" (ngModelChange)=\"editableCols.set($event)\"></ui-select> \r\n }\r\n col(s)</div>\r\n </div>\r\n @if (isReadOnly()) {\r\n <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\r\n } @else {\r\n <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\r\n <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n }\r\n </div>\r\n @if (!isReadOnly()) {\r\n <div class=\"formeditor-body\">\r\n \r\n <!-- BLOCKS -->\r\n <div class=\"formeditor-overflow\">\r\n <div class=\"formeditor-workarea\">\r\n @for (block of editableBlocks(); track block.code; let i = $index) {\r\n <lib-block-editor \r\n [block]=\"block\"\r\n [selectedFieldId]=\"selectedField()?.code ?? null\"\r\n (blockChange)=\"onBlockChange(i, $event)\"\r\n (addFieldRequest)=\"addField(block.code, $event)\"\r\n (notifySelectedField)=\"selectedField.set($event)\"\r\n (deleteBlock)=\"deleteBlock($event)\">\r\n </lib-block-editor>\r\n }\r\n <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n </div>\r\n </div>\r\n <!-- PROPERTIES -->\r\n <div class=\"formeditor-properties\">\r\n <h3>Propiedades</h3>\r\n <div class=\"formeditor-properties-form\">\r\n @if (selectedField() ) {\r\n <lib-field-editor \r\n [config]=\"selectedField()!\"\r\n [options]=\"dependencyOptions()\"\r\n (fieldChange)=\"onFieldChange($event)\">\r\n </lib-field-editor>\r\n }@else{\r\n <div class=\"no-selected-field\">\r\n <i class=\"ri-edit-box-line\"></i>\r\n <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }@else {\r\n <div class=\"form-preview\">\r\n <ui-form-wrapper \r\n [schema]=\"previewSchema()\"\r\n [showButtons]=\"false\">\r\n </ui-form-wrapper>\r\n </div>\r\n }\r\n </div>\r\n\r\n", styles: [".formeditor{display:flex;flex-direction:column;overflow:hidden;background-color:var(--grey-100);border:solid 1px var(--grey-300);border-radius:5px;max-height:500px}.formeditor-header{background-color:#fff;padding:5px 10px;align-items:center;display:flex;gap:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-body{display:flex;gap:10px;overflow:hidden;padding:10px}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto}.form-preview{padding:20px;overflow:auto;background-color:#fff}.focused{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.no-selected-field{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;font-size:13px;gap:15px;text-align:center;color:var(--grey-400)}.no-selected-field i{font-size:24px}.cols-selector{margin-left:8px;padding-left:8px;border-left:solid 1px var(--grey-400);display:inline-flex;align-items:center;gap:5px}\n"] }]
|
|
8774
8831
|
}], ctorParameters: () => [], propDecorators: { formTitle: [{
|
|
8775
8832
|
type: Input
|
|
8776
|
-
}], cols: [{
|
|
8777
|
-
type: Input
|
|
8778
8833
|
}] } });
|
|
8779
8834
|
|
|
8780
8835
|
class RuleDefinirionComponent {
|