onshore-forms 0.0.20 → 0.0.22
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 +28 -4
- package/esm2020/lib/components/form-sort-item/form-sort-item.component.mjs +2 -3
- package/esm2020/lib/enums/form.enums.mjs +2 -1
- package/fesm2015/onshore-forms.mjs +29 -6
- package/fesm2015/onshore-forms.mjs.map +1 -1
- package/fesm2020/onshore-forms.mjs +28 -6
- 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 +4 -1
- package/lib/components/form-sort-item/form-sort-item.component.d.ts +1 -2
- 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, ViewChild, 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';
|
|
@@ -74,6 +74,7 @@ var OnshoreFormTemplateLayout;
|
|
|
74
74
|
(function (OnshoreFormTemplateLayout) {
|
|
75
75
|
OnshoreFormTemplateLayout["vertical"] = "vertical";
|
|
76
76
|
OnshoreFormTemplateLayout["horizontal"] = "horizontal";
|
|
77
|
+
OnshoreFormTemplateLayout["auto"] = "auto";
|
|
77
78
|
})(OnshoreFormTemplateLayout || (OnshoreFormTemplateLayout = {}));
|
|
78
79
|
var OnshoreImageError;
|
|
79
80
|
(function (OnshoreImageError) {
|
|
@@ -304,6 +305,7 @@ class OnshoreFormItemContainer {
|
|
|
304
305
|
constructor(cdr) {
|
|
305
306
|
this.cdr = cdr;
|
|
306
307
|
this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
|
|
308
|
+
this.layout = OnshoreFormTemplateLayout.auto;
|
|
307
309
|
}
|
|
308
310
|
enabled(enable) {
|
|
309
311
|
setTimeout(() => {
|
|
@@ -325,6 +327,17 @@ class OnshoreFormItemContainer {
|
|
|
325
327
|
}
|
|
326
328
|
this.cdr.markForCheck();
|
|
327
329
|
}
|
|
330
|
+
onWindowResize() {
|
|
331
|
+
const conatinerWidth = this.formContainer?.nativeElement.offsetWidth;
|
|
332
|
+
if (conatinerWidth > 500 && this.formTemplate.layout === OnshoreFormTemplateLayout.auto && this.layout !== OnshoreFormTemplateLayout.horizontal) {
|
|
333
|
+
this.layout = OnshoreFormTemplateLayout.horizontal;
|
|
334
|
+
this.cdr.markForCheck();
|
|
335
|
+
}
|
|
336
|
+
if (conatinerWidth <= 500 && this.formTemplate.layout === OnshoreFormTemplateLayout.auto && this.layout !== OnshoreFormTemplateLayout.vertical) {
|
|
337
|
+
this.layout = OnshoreFormTemplateLayout.vertical;
|
|
338
|
+
this.cdr.markForCheck();
|
|
339
|
+
}
|
|
340
|
+
}
|
|
328
341
|
ngOnInit() {
|
|
329
342
|
this.ngControl?.control?.valueChanges.subscribe(() => {
|
|
330
343
|
this.cdr.markForCheck();
|
|
@@ -336,6 +349,8 @@ class OnshoreFormItemContainer {
|
|
|
336
349
|
if (this.formTemplate.locked) {
|
|
337
350
|
this.enabled(false);
|
|
338
351
|
}
|
|
352
|
+
this.layout = this.formTemplate.layout;
|
|
353
|
+
this.onWindowResize();
|
|
339
354
|
}
|
|
340
355
|
ngOnChanges(changes) {
|
|
341
356
|
const previousValue = changes['formTemplate'].previousValue;
|
|
@@ -352,19 +367,29 @@ class OnshoreFormItemContainer {
|
|
|
352
367
|
this.enabled(currentValue.enabled);
|
|
353
368
|
}
|
|
354
369
|
}
|
|
370
|
+
if (previousValue?.layout !== currentValue?.layout) {
|
|
371
|
+
this.layout = this.formTemplate.layout;
|
|
372
|
+
this.onWindowResize();
|
|
373
|
+
}
|
|
355
374
|
this.cdr.markForCheck();
|
|
356
375
|
}
|
|
357
376
|
}
|
|
358
377
|
}
|
|
359
378
|
OnshoreFormItemContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormItemContainer, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
360
|
-
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]=\"
|
|
379
|
+
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)" } }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"mb-4\" #formContainer>\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 });
|
|
361
380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormItemContainer, decorators: [{
|
|
362
381
|
type: Component,
|
|
363
|
-
args: [{ selector: 'onshore-form-item-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-4\">\n <div class=\"flex w-full\"\n [class.flex-column]=\"
|
|
382
|
+
args: [{ selector: 'onshore-form-item-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-4\" #formContainer>\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" }]
|
|
364
383
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { formTemplate: [{
|
|
365
384
|
type: Input
|
|
366
385
|
}], ngControl: [{
|
|
367
386
|
type: Input
|
|
387
|
+
}], formContainer: [{
|
|
388
|
+
type: ViewChild,
|
|
389
|
+
args: ['formContainer']
|
|
390
|
+
}], onWindowResize: [{
|
|
391
|
+
type: HostListener,
|
|
392
|
+
args: ['window:resize', ['$event']]
|
|
368
393
|
}] } });
|
|
369
394
|
|
|
370
395
|
class OnshoreFormInputItemComponent {
|
|
@@ -377,7 +402,6 @@ class OnshoreFormInputItemComponent {
|
|
|
377
402
|
this.minLength = 0;
|
|
378
403
|
this.maxLength = 999999;
|
|
379
404
|
this.OnshoreFormTemplateType = OnshoreFormTemplateType;
|
|
380
|
-
this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
|
|
381
405
|
this.passwordVisible = false;
|
|
382
406
|
this.disabled = false;
|
|
383
407
|
this.ngControl.valueAccessor = this;
|
|
@@ -702,7 +726,6 @@ class OnshoreFormImageItemComponent {
|
|
|
702
726
|
this.imageReady = new EventEmitter();
|
|
703
727
|
this.selectFromMedia = new EventEmitter();
|
|
704
728
|
this.isLoading = new EventEmitter();
|
|
705
|
-
this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
|
|
706
729
|
this.defaultImageSettings = {
|
|
707
730
|
imageWidth: 400,
|
|
708
731
|
imageHeight: 400,
|
|
@@ -1121,7 +1144,6 @@ class OnshoreFormSortItemComponent {
|
|
|
1121
1144
|
this.cdr = cdr;
|
|
1122
1145
|
this.sortItems = [];
|
|
1123
1146
|
this.OnshoreFormTemplateType = OnshoreFormTemplateType;
|
|
1124
|
-
this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
|
|
1125
1147
|
this.disabled = false;
|
|
1126
1148
|
this.ngControl.valueAccessor = this;
|
|
1127
1149
|
}
|