onshore-forms 0.0.19 → 0.0.21
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/esm2020/lib/components/form-image-item/form-image-item.component.mjs +1 -3
- package/esm2020/lib/components/form-input-item/form-input-item.component.mjs +2 -3
- package/esm2020/lib/components/form-item-container/form-item-container.component.mjs +24 -4
- package/esm2020/lib/components/form-sort-item/form-sort-item.component.mjs +19 -10
- package/esm2020/lib/enums/form.enums.mjs +2 -1
- package/fesm2015/onshore-forms.mjs +42 -14
- package/fesm2015/onshore-forms.mjs.map +1 -1
- package/fesm2020/onshore-forms.mjs +41 -13
- package/fesm2020/onshore-forms.mjs.map +1 -1
- package/lib/components/form-image-item/form-image-item.component.d.ts +0 -2
- package/lib/components/form-input-item/form-input-item.component.d.ts +1 -2
- package/lib/components/form-item-container/form-item-container.component.d.ts +2 -0
- package/lib/components/form-sort-item/form-sort-item.component.d.ts +2 -3
- package/lib/enums/form.enums.d.ts +2 -1
- package/package.json +1 -1
- package/styles/scss/main.css +1 -1
- package/styles/scss/theme1.css +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, ChangeDetectionStrategy, Input, Self, Optional, EventEmitter, Output, NgModule } from '@angular/core';
|
|
2
|
+
import { Injectable, Component, ChangeDetectionStrategy, Input, HostListener, Self, Optional, EventEmitter, Output, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
4
|
import { FormGroup, FormControl, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
5
5
|
import { Subject, debounceTime, distinctUntilChanged, skip } from 'rxjs';
|
|
@@ -75,6 +75,7 @@ var OnshoreFormTemplateLayout;
|
|
|
75
75
|
(function (OnshoreFormTemplateLayout) {
|
|
76
76
|
OnshoreFormTemplateLayout["vertical"] = "vertical";
|
|
77
77
|
OnshoreFormTemplateLayout["horizontal"] = "horizontal";
|
|
78
|
+
OnshoreFormTemplateLayout["auto"] = "auto";
|
|
78
79
|
})(OnshoreFormTemplateLayout || (OnshoreFormTemplateLayout = {}));
|
|
79
80
|
var OnshoreImageError;
|
|
80
81
|
(function (OnshoreImageError) {
|
|
@@ -316,6 +317,7 @@ class OnshoreFormItemContainer {
|
|
|
316
317
|
constructor(cdr) {
|
|
317
318
|
this.cdr = cdr;
|
|
318
319
|
this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
|
|
320
|
+
this.layout = OnshoreFormTemplateLayout.auto;
|
|
319
321
|
}
|
|
320
322
|
enabled(enable) {
|
|
321
323
|
setTimeout(() => {
|
|
@@ -338,6 +340,16 @@ class OnshoreFormItemContainer {
|
|
|
338
340
|
}
|
|
339
341
|
this.cdr.markForCheck();
|
|
340
342
|
}
|
|
343
|
+
onWindowResize() {
|
|
344
|
+
if (window.innerWidth > 500 && this.formTemplate.layout === OnshoreFormTemplateLayout.auto) {
|
|
345
|
+
this.layout = OnshoreFormTemplateLayout.horizontal;
|
|
346
|
+
}
|
|
347
|
+
if (window.innerWidth <= 500 && this.formTemplate.layout === OnshoreFormTemplateLayout.auto) {
|
|
348
|
+
this.layout = OnshoreFormTemplateLayout.vertical;
|
|
349
|
+
}
|
|
350
|
+
console.log("resize", window.innerWidth, this.layout);
|
|
351
|
+
this.cdr.markForCheck();
|
|
352
|
+
}
|
|
341
353
|
ngOnInit() {
|
|
342
354
|
var _a, _b, _c, _d;
|
|
343
355
|
(_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.valueChanges.subscribe(() => {
|
|
@@ -350,6 +362,8 @@ class OnshoreFormItemContainer {
|
|
|
350
362
|
if (this.formTemplate.locked) {
|
|
351
363
|
this.enabled(false);
|
|
352
364
|
}
|
|
365
|
+
this.layout = this.formTemplate.layout;
|
|
366
|
+
this.onWindowResize();
|
|
353
367
|
}
|
|
354
368
|
ngOnChanges(changes) {
|
|
355
369
|
const previousValue = changes['formTemplate'].previousValue;
|
|
@@ -366,19 +380,26 @@ class OnshoreFormItemContainer {
|
|
|
366
380
|
this.enabled(currentValue.enabled);
|
|
367
381
|
}
|
|
368
382
|
}
|
|
383
|
+
if ((previousValue === null || previousValue === void 0 ? void 0 : previousValue.layout) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.layout)) {
|
|
384
|
+
this.layout = this.formTemplate.layout;
|
|
385
|
+
this.onWindowResize();
|
|
386
|
+
}
|
|
369
387
|
this.cdr.markForCheck();
|
|
370
388
|
}
|
|
371
389
|
}
|
|
372
390
|
}
|
|
373
391
|
OnshoreFormItemContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormItemContainer, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
374
|
-
OnshoreFormItemContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: { formTemplate: "formTemplate", ngControl: "ngControl" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mb-4\">\n <div class=\"flex w-full\"\n [class.flex-column]=\"
|
|
392
|
+
OnshoreFormItemContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: { formTemplate: "formTemplate", ngControl: "ngControl" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mb-4\">\n <div class=\"flex w-full\"\n [class.flex-column]=\"layout == OnshoreFormTemplateLayout.vertical\"\n [class.flex-row]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n [class.justify-content-between]=\"layout == OnshoreFormTemplateLayout.horizontal\">\n\n <div #formLabel\n class=\"flex justify-content-between\"\n [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n <b [class.mr-2]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n [class.mb-2]=\"layout == OnshoreFormTemplateLayout.vertical\">\n {{formTemplate.label}}\n <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n </b>\n\n <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.vertical\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\" appendTo=\"body\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n\n </div>\n\n <div class=\"flex w-full\">\n <p-toggleButton\n *ngIf=\"formTemplate.locked\"\n (onChange)=\"lockChanged($event.checked)\"\n onIcon=\"fa fa-lock-open\"\n offIcon=\"fa fa-lock\"\n class=\"mr-2\"\n [style]=\"{height: '36px'}\"\n [disabled]=\"!formTemplate.enabled\">\n </p-toggleButton>\n\n <ng-content></ng-content>\n </div>\n\n <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n </div>\n\n <div *ngIf=\"ngControl.control.touched\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control.errors\">\n </onshore-form-validation-output>\n </div>\n\n <div [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n <small *ngIf=\"formTemplate.description\" class=\"mt-2 onshore-color-gray-5\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i3$1.ToggleButton, selector: "p-toggleButton", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabelledBy", "disabled", "style", "styleClass", "inputId", "tabindex", "iconPos"], outputs: ["onChange"] }, { kind: "component", type: OnshoreFormValidationOutputComponent, selector: "onshore-form-validation-output", inputs: ["validationErrors", "validationItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
375
393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormItemContainer, decorators: [{
|
|
376
394
|
type: Component,
|
|
377
|
-
args: [{ selector: 'onshore-form-item-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-4\">\n <div class=\"flex w-full\"\n [class.flex-column]=\"
|
|
395
|
+
args: [{ selector: 'onshore-form-item-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-4\">\n <div class=\"flex w-full\"\n [class.flex-column]=\"layout == OnshoreFormTemplateLayout.vertical\"\n [class.flex-row]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n [class.justify-content-between]=\"layout == OnshoreFormTemplateLayout.horizontal\">\n\n <div #formLabel\n class=\"flex justify-content-between\"\n [style]=\"formTemplate.labelStyle ?? 'min-width: 200px'\">\n\n <b [class.mr-2]=\"layout == OnshoreFormTemplateLayout.horizontal\"\n [class.mb-2]=\"layout == OnshoreFormTemplateLayout.vertical\">\n {{formTemplate.label}}\n <small *ngIf=\"formTemplate.required\" class=\"onshore-color-danger\">*</small>\n </b>\n\n <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.vertical\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\" appendTo=\"body\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n\n </div>\n\n <div class=\"flex w-full\">\n <p-toggleButton\n *ngIf=\"formTemplate.locked\"\n (onChange)=\"lockChanged($event.checked)\"\n onIcon=\"fa fa-lock-open\"\n offIcon=\"fa fa-lock\"\n class=\"mr-2\"\n [style]=\"{height: '36px'}\"\n [disabled]=\"!formTemplate.enabled\">\n </p-toggleButton>\n\n <ng-content></ng-content>\n </div>\n\n <div *ngIf=\"formTemplate.tooltip && layout == OnshoreFormTemplateLayout.horizontal\" class=\"ml-2 align-self-center\" [pTooltip]=\"formTemplate.tooltip\" [escape]=\"false\"><i class=\"fa fa-circle-question onshore-color-gray-5\"></i></div>\n </div>\n\n <div *ngIf=\"ngControl.control.touched\" [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n <onshore-form-validation-output\n [validationItems]=\"formTemplate.validationItems\"\n [validationErrors]=\"ngControl.control.errors\">\n </onshore-form-validation-output>\n </div>\n\n <div [style]=\"{'margin-left': layout == OnshoreFormTemplateLayout.horizontal ? formLabel.clientWidth + 'px' : '0px'}\">\n <small *ngIf=\"formTemplate.description\" class=\"mt-2 onshore-color-gray-5\"><i class=\"fa fa-info-circle\"></i> {{formTemplate.description}}</small>\n </div>\n\n</div>\n" }]
|
|
378
396
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { formTemplate: [{
|
|
379
397
|
type: Input
|
|
380
398
|
}], ngControl: [{
|
|
381
399
|
type: Input
|
|
400
|
+
}], onWindowResize: [{
|
|
401
|
+
type: HostListener,
|
|
402
|
+
args: ['window:resize', ['$event']]
|
|
382
403
|
}] } });
|
|
383
404
|
|
|
384
405
|
class OnshoreFormInputItemComponent {
|
|
@@ -391,7 +412,6 @@ class OnshoreFormInputItemComponent {
|
|
|
391
412
|
this.minLength = 0;
|
|
392
413
|
this.maxLength = 999999;
|
|
393
414
|
this.OnshoreFormTemplateType = OnshoreFormTemplateType;
|
|
394
|
-
this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
|
|
395
415
|
this.passwordVisible = false;
|
|
396
416
|
this.disabled = false;
|
|
397
417
|
this.ngControl.valueAccessor = this;
|
|
@@ -726,7 +746,6 @@ class OnshoreFormImageItemComponent {
|
|
|
726
746
|
this.imageReady = new EventEmitter();
|
|
727
747
|
this.selectFromMedia = new EventEmitter();
|
|
728
748
|
this.isLoading = new EventEmitter();
|
|
729
|
-
this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
|
|
730
749
|
this.defaultImageSettings = {
|
|
731
750
|
imageWidth: 400,
|
|
732
751
|
imageHeight: 400,
|
|
@@ -1180,7 +1199,6 @@ class OnshoreFormSortItemComponent {
|
|
|
1180
1199
|
this.cdr = cdr;
|
|
1181
1200
|
this.sortItems = [];
|
|
1182
1201
|
this.OnshoreFormTemplateType = OnshoreFormTemplateType;
|
|
1183
|
-
this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
|
|
1184
1202
|
this.disabled = false;
|
|
1185
1203
|
this.ngControl.valueAccessor = this;
|
|
1186
1204
|
}
|
|
@@ -1192,18 +1210,30 @@ class OnshoreFormSortItemComponent {
|
|
|
1192
1210
|
this.cdr.markForCheck();
|
|
1193
1211
|
}
|
|
1194
1212
|
// ControlValueAccessor interface
|
|
1195
|
-
writeValue(obj) {
|
|
1196
|
-
|
|
1213
|
+
writeValue(obj) {
|
|
1214
|
+
if (obj) {
|
|
1215
|
+
this.cdr.markForCheck();
|
|
1216
|
+
}
|
|
1217
|
+
}
|
|
1218
|
+
registerOnChange(fn) {
|
|
1219
|
+
if (this.ngControl.value) {
|
|
1220
|
+
this.cdr.markForCheck();
|
|
1221
|
+
}
|
|
1222
|
+
}
|
|
1197
1223
|
registerOnTouched(fn) { }
|
|
1198
1224
|
setDisabledState(isDisabled) {
|
|
1199
1225
|
this.disabled = isDisabled;
|
|
1200
1226
|
}
|
|
1201
1227
|
ngOnInit() {
|
|
1202
|
-
var _a, _b;
|
|
1228
|
+
var _a, _b, _c;
|
|
1203
1229
|
if (((_a = this.ngControl.control) === null || _a === void 0 ? void 0 : _a.value) == '' && this.formTemplate.default != undefined) {
|
|
1204
1230
|
(_b = this.ngControl.control) === null || _b === void 0 ? void 0 : _b.setValue(this.formTemplate.default);
|
|
1205
|
-
this.
|
|
1231
|
+
this.sortItems = this.formTemplate.default;
|
|
1232
|
+
}
|
|
1233
|
+
else {
|
|
1234
|
+
this.sortItems = (_c = this.ngControl.control) === null || _c === void 0 ? void 0 : _c.value;
|
|
1206
1235
|
}
|
|
1236
|
+
this.cdr.markForCheck();
|
|
1207
1237
|
}
|
|
1208
1238
|
ngOnChanges(changes) {
|
|
1209
1239
|
this.cdr.markForCheck();
|
|
@@ -1214,10 +1244,10 @@ class OnshoreFormSortItemComponent {
|
|
|
1214
1244
|
}
|
|
1215
1245
|
}
|
|
1216
1246
|
OnshoreFormSortItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormSortItemComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1217
|
-
OnshoreFormSortItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormSortItemComponent, selector: "onshore-form-sort-item", inputs: { formTemplate: "formTemplate"
|
|
1247
|
+
OnshoreFormSortItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: OnshoreFormSortItemComponent, selector: "onshore-form-sort-item", inputs: { formTemplate: "formTemplate" }, usesOnChanges: true, ngImport: i0, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n\n <div *ngIf=\"formTemplate.type == OnshoreFormTemplateType.sort\"\n class=\"w-full\" [dragula]=\"ngControl.enabled\"\n [dragulaModel]=\"sortItems\"\n (dragulaModelChange)=\"sortItemsChanged($event)\">\n <div [class.cursor-move]=\"ngControl.enabled\"\n class=\"onshore-sort-item flex justify-content-between align-items-center onshore-border-gray-4 border-solid border-1 p-2 mb-2 onshore-background-color-gray-1\" *ngFor=\"let item of sortItems\">\n <span [class.onshore-color-blocked]=\"!ngControl.enabled\">{{ item.label }}</span>\n <i [class.onshore-color-blocked]=\"!ngControl.enabled\" class=\"fa fa-arrows-v\"></i>\n </div>\n </div>\n\n</onshore-form-item-container>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$6.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel"], outputs: ["dragulaModelChange"] }, { kind: "component", type: OnshoreFormItemContainer, selector: "onshore-form-item-container", inputs: ["formTemplate", "ngControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1218
1248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormSortItemComponent, decorators: [{
|
|
1219
1249
|
type: Component,
|
|
1220
|
-
args: [{ selector: 'onshore-form-sort-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n\n <div *ngIf=\"formTemplate.type == OnshoreFormTemplateType.sort\"
|
|
1250
|
+
args: [{ selector: 'onshore-form-sort-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<onshore-form-item-container [formTemplate]=\"formTemplate\" [ngControl]=\"ngControl\">\n\n <div *ngIf=\"formTemplate.type == OnshoreFormTemplateType.sort\"\n class=\"w-full\" [dragula]=\"ngControl.enabled\"\n [dragulaModel]=\"sortItems\"\n (dragulaModelChange)=\"sortItemsChanged($event)\">\n <div [class.cursor-move]=\"ngControl.enabled\"\n class=\"onshore-sort-item flex justify-content-between align-items-center onshore-border-gray-4 border-solid border-1 p-2 mb-2 onshore-background-color-gray-1\" *ngFor=\"let item of sortItems\">\n <span [class.onshore-color-blocked]=\"!ngControl.enabled\">{{ item.label }}</span>\n <i [class.onshore-color-blocked]=\"!ngControl.enabled\" class=\"fa fa-arrows-v\"></i>\n </div>\n </div>\n\n</onshore-form-item-container>\n" }]
|
|
1221
1251
|
}], ctorParameters: function () {
|
|
1222
1252
|
return [{ type: i1.NgControl, decorators: [{
|
|
1223
1253
|
type: Self
|
|
@@ -1226,8 +1256,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
|
|
|
1226
1256
|
}] }, { type: i0.ChangeDetectorRef }];
|
|
1227
1257
|
}, propDecorators: { formTemplate: [{
|
|
1228
1258
|
type: Input
|
|
1229
|
-
}], sortItems: [{
|
|
1230
|
-
type: Input
|
|
1231
1259
|
}] } });
|
|
1232
1260
|
|
|
1233
1261
|
class OnshoreFormsModule {
|