onshore-forms 0.0.20 → 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 +2 -3
- package/esm2020/lib/enums/form.enums.mjs +2 -1
- package/fesm2015/onshore-forms.mjs +24 -6
- package/fesm2015/onshore-forms.mjs.map +1 -1
- package/fesm2020/onshore-forms.mjs +24 -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 +2 -0
- 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, 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,16 @@ class OnshoreFormItemContainer {
|
|
|
325
327
|
}
|
|
326
328
|
this.cdr.markForCheck();
|
|
327
329
|
}
|
|
330
|
+
onWindowResize() {
|
|
331
|
+
if (window.innerWidth > 500 && this.formTemplate.layout === OnshoreFormTemplateLayout.auto) {
|
|
332
|
+
this.layout = OnshoreFormTemplateLayout.horizontal;
|
|
333
|
+
}
|
|
334
|
+
if (window.innerWidth <= 500 && this.formTemplate.layout === OnshoreFormTemplateLayout.auto) {
|
|
335
|
+
this.layout = OnshoreFormTemplateLayout.vertical;
|
|
336
|
+
}
|
|
337
|
+
console.log("resize", window.innerWidth, this.layout);
|
|
338
|
+
this.cdr.markForCheck();
|
|
339
|
+
}
|
|
328
340
|
ngOnInit() {
|
|
329
341
|
this.ngControl?.control?.valueChanges.subscribe(() => {
|
|
330
342
|
this.cdr.markForCheck();
|
|
@@ -336,6 +348,8 @@ class OnshoreFormItemContainer {
|
|
|
336
348
|
if (this.formTemplate.locked) {
|
|
337
349
|
this.enabled(false);
|
|
338
350
|
}
|
|
351
|
+
this.layout = this.formTemplate.layout;
|
|
352
|
+
this.onWindowResize();
|
|
339
353
|
}
|
|
340
354
|
ngOnChanges(changes) {
|
|
341
355
|
const previousValue = changes['formTemplate'].previousValue;
|
|
@@ -352,19 +366,26 @@ class OnshoreFormItemContainer {
|
|
|
352
366
|
this.enabled(currentValue.enabled);
|
|
353
367
|
}
|
|
354
368
|
}
|
|
369
|
+
if (previousValue?.layout !== currentValue?.layout) {
|
|
370
|
+
this.layout = this.formTemplate.layout;
|
|
371
|
+
this.onWindowResize();
|
|
372
|
+
}
|
|
355
373
|
this.cdr.markForCheck();
|
|
356
374
|
}
|
|
357
375
|
}
|
|
358
376
|
}
|
|
359
377
|
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]=\"
|
|
378
|
+
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 });
|
|
361
379
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: OnshoreFormItemContainer, decorators: [{
|
|
362
380
|
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]=\"
|
|
381
|
+
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" }]
|
|
364
382
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { formTemplate: [{
|
|
365
383
|
type: Input
|
|
366
384
|
}], ngControl: [{
|
|
367
385
|
type: Input
|
|
386
|
+
}], onWindowResize: [{
|
|
387
|
+
type: HostListener,
|
|
388
|
+
args: ['window:resize', ['$event']]
|
|
368
389
|
}] } });
|
|
369
390
|
|
|
370
391
|
class OnshoreFormInputItemComponent {
|
|
@@ -377,7 +398,6 @@ class OnshoreFormInputItemComponent {
|
|
|
377
398
|
this.minLength = 0;
|
|
378
399
|
this.maxLength = 999999;
|
|
379
400
|
this.OnshoreFormTemplateType = OnshoreFormTemplateType;
|
|
380
|
-
this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
|
|
381
401
|
this.passwordVisible = false;
|
|
382
402
|
this.disabled = false;
|
|
383
403
|
this.ngControl.valueAccessor = this;
|
|
@@ -702,7 +722,6 @@ class OnshoreFormImageItemComponent {
|
|
|
702
722
|
this.imageReady = new EventEmitter();
|
|
703
723
|
this.selectFromMedia = new EventEmitter();
|
|
704
724
|
this.isLoading = new EventEmitter();
|
|
705
|
-
this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
|
|
706
725
|
this.defaultImageSettings = {
|
|
707
726
|
imageWidth: 400,
|
|
708
727
|
imageHeight: 400,
|
|
@@ -1121,7 +1140,6 @@ class OnshoreFormSortItemComponent {
|
|
|
1121
1140
|
this.cdr = cdr;
|
|
1122
1141
|
this.sortItems = [];
|
|
1123
1142
|
this.OnshoreFormTemplateType = OnshoreFormTemplateType;
|
|
1124
|
-
this.OnshoreFormTemplateLayout = OnshoreFormTemplateLayout;
|
|
1125
1143
|
this.disabled = false;
|
|
1126
1144
|
this.ngControl.valueAccessor = this;
|
|
1127
1145
|
}
|