structra-ui 0.1.89 → 0.1.91
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/structra-ui.mjs
CHANGED
|
@@ -3399,6 +3399,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3399
3399
|
}] } });
|
|
3400
3400
|
|
|
3401
3401
|
class CheckboxFieldComponent extends BooleanFieldDirective {
|
|
3402
|
+
constructor() {
|
|
3403
|
+
super(...arguments);
|
|
3404
|
+
/** `true` (padrão): host ocupa 100%. Com `false`, usa largura intrínseca (útil em `app-form-row` com justify). */
|
|
3405
|
+
this.fullWidth = true;
|
|
3406
|
+
}
|
|
3407
|
+
get fullWidthClass() {
|
|
3408
|
+
return this.fullWidth;
|
|
3409
|
+
}
|
|
3402
3410
|
onCheckboxClick(ev) {
|
|
3403
3411
|
if (this.readonly || this.loading) {
|
|
3404
3412
|
ev.preventDefault();
|
|
@@ -3410,13 +3418,13 @@ class CheckboxFieldComponent extends BooleanFieldDirective {
|
|
|
3410
3418
|
this.setChecked(el.checked);
|
|
3411
3419
|
}
|
|
3412
3420
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CheckboxFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3413
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CheckboxFieldComponent, isStandalone: true, selector: "app-checkbox-field", providers: [
|
|
3421
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CheckboxFieldComponent, isStandalone: true, selector: "app-checkbox-field", inputs: { fullWidth: ["fullWidth", "fullWidth", booleanAttribute] }, host: { properties: { "class.checkbox-field--full-width": "this.fullWidthClass" } }, providers: [
|
|
3414
3422
|
{
|
|
3415
3423
|
provide: NG_VALUE_ACCESSOR,
|
|
3416
3424
|
useExisting: forwardRef(() => CheckboxFieldComponent),
|
|
3417
3425
|
multi: true,
|
|
3418
3426
|
},
|
|
3419
|
-
], usesInheritance: true, ngImport: i0, template: "@if (!loading) {\r\n<div class=\"checkbox-field\" [class.checkbox-field--invalid]=\"uiInvalid\"\r\n [class.checkbox-field--readonly]=\"readonly\">\r\n <label class=\"checkbox-field__row\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"checkbox-field__native\"\r\n [id]=\"controlId\"\r\n [attr.name]=\"name || null\"\r\n [attr.tabindex]=\"readonly ? -1 : null\"\r\n [checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n [required]=\"uiRequiredEffective\"\r\n [attr.aria-invalid]=\"uiInvalid\"\r\n [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n [attr.aria-readonly]=\"readonly ? true : null\"\r\n [attr.aria-label]=\"label || placeholder || 'Op\u00E7\u00E3o'\"\r\n (click)=\"onCheckboxClick($event)\"\r\n (change)=\"onNativeChange($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n @if (label) {\r\n <span class=\"checkbox-field__label\">{{ label }}</span>\r\n }\r\n </label>\r\n @if (showErrorMessage && uiInvalid && uiErrorMessage) {\r\n <p class=\"checkbox-field__error\" [id]=\"errorElementId\" role=\"alert\">{{ uiErrorMessage }}</p>\r\n }\r\n</div>\r\n} @else {\r\n<div class=\"checkbox-field checkbox-field--loading\" role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\"\r\n [attr.aria-label]=\"label || 'A carregar'\">\r\n <div class=\"checkbox-field__skeleton-row\" aria-hidden=\"true\">\r\n <app-skeleton-block width=\"1.1rem\" height=\"1.1rem\" radius=\"4px\" />\r\n <app-skeleton-block width=\"11rem\" height=\"0.72rem\" radius=\"6px\" />\r\n </div>\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:
|
|
3427
|
+
], usesInheritance: true, ngImport: i0, template: "@if (!loading) {\r\n<div class=\"checkbox-field\" [class.checkbox-field--invalid]=\"uiInvalid\"\r\n [class.checkbox-field--readonly]=\"readonly\">\r\n <label class=\"checkbox-field__row\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"checkbox-field__native\"\r\n [id]=\"controlId\"\r\n [attr.name]=\"name || null\"\r\n [attr.tabindex]=\"readonly ? -1 : null\"\r\n [checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n [required]=\"uiRequiredEffective\"\r\n [attr.aria-invalid]=\"uiInvalid\"\r\n [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n [attr.aria-readonly]=\"readonly ? true : null\"\r\n [attr.aria-label]=\"label || placeholder || 'Op\u00E7\u00E3o'\"\r\n (click)=\"onCheckboxClick($event)\"\r\n (change)=\"onNativeChange($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n @if (label) {\r\n <span class=\"checkbox-field__label\">{{ label }}</span>\r\n }\r\n </label>\r\n @if (showErrorMessage && uiInvalid && uiErrorMessage) {\r\n <p class=\"checkbox-field__error\" [id]=\"errorElementId\" role=\"alert\">{{ uiErrorMessage }}</p>\r\n }\r\n</div>\r\n} @else {\r\n<div class=\"checkbox-field checkbox-field--loading\" role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\"\r\n [attr.aria-label]=\"label || 'A carregar'\">\r\n <div class=\"checkbox-field__skeleton-row\" aria-hidden=\"true\">\r\n <app-skeleton-block width=\"1.1rem\" height=\"1.1rem\" radius=\"4px\" />\r\n <app-skeleton-block width=\"11rem\" height=\"0.72rem\" radius=\"6px\" />\r\n </div>\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:auto;box-sizing:border-box}:host(.checkbox-field--full-width){width:100%}.checkbox-field--invalid .checkbox-field__label{color:var(--ui-field-float-label-invalid-color)}.checkbox-field__row{display:flex;align-items:center;gap:.5rem;margin:0;cursor:pointer;width:fit-content;max-width:100%}.checkbox-field__native{appearance:none;-webkit-appearance:none;width:1.1rem;height:1.1rem;margin:0;flex-shrink:0;box-sizing:border-box;border:1px solid var(--ui-field-float-border);border-radius:4px;background-color:var(--ui-field-float-bg);background-repeat:no-repeat;background-position:center;background-size:.65rem auto;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}.checkbox-field__native:focus-visible{outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.checkbox-field__native:focus:not(:focus-visible){outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.checkbox-field__native:checked{border-color:var(--ui-field-float-border-focus);background-color:var(--ui-field-float-border-focus);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field__native:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.checkbox-field--invalid .checkbox-field__native{border-color:var(--ui-field-input-invalid-border)}.checkbox-field--invalid .checkbox-field__native:checked{border-color:var(--ui-field-input-invalid-border);background-color:var(--ui-field-input-invalid-border);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field--invalid .checkbox-field__native:focus-visible{outline-color:var(--ui-field-input-invalid-border)}.checkbox-field--invalid .checkbox-field__native:focus:not(:focus-visible){outline:2px solid var(--ui-field-input-invalid-border);outline-offset:2px}.checkbox-field__label{font-size:1rem;line-height:1.35;color:var(--ui-field-float-label-color);cursor:pointer;-webkit-user-select:none;user-select:none;padding-top:.1em}.checkbox-field__error{margin:.35rem 0 0 1.6rem;padding:0;font-size:.75rem;color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}.checkbox-field--loading{width:100%;max-width:100%;box-sizing:border-box}.checkbox-field--loading .checkbox-field__skeleton-row{display:flex;align-items:center;gap:.5rem;width:100%;max-width:100%;box-sizing:border-box}.checkbox-field--readonly .checkbox-field__row{cursor:default;pointer-events:none}.checkbox-field--readonly .checkbox-field__native{border-color:var(--ui-field-readonly-border);background-color:var(--ui-field-readonly-bg);cursor:default}.checkbox-field--readonly .checkbox-field__native:checked{border-color:var(--ui-field-readonly-border-focus);background-color:var(--ui-field-readonly-border-focus);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field--readonly .checkbox-field__native:focus,.checkbox-field--readonly .checkbox-field__native:focus-visible{outline:none}.checkbox-field--readonly .checkbox-field__label{color:var(--ui-field-readonly-label-color);cursor:default}\n"], dependencies: [{ kind: "component", type: SkeletonBlockComponent, selector: "app-skeleton-block", inputs: ["width", "height", "radius", "animate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3420
3428
|
}
|
|
3421
3429
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
|
|
3422
3430
|
type: Component,
|
|
@@ -3426,8 +3434,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3426
3434
|
useExisting: forwardRef(() => CheckboxFieldComponent),
|
|
3427
3435
|
multi: true,
|
|
3428
3436
|
},
|
|
3429
|
-
], template: "@if (!loading) {\r\n<div class=\"checkbox-field\" [class.checkbox-field--invalid]=\"uiInvalid\"\r\n [class.checkbox-field--readonly]=\"readonly\">\r\n <label class=\"checkbox-field__row\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"checkbox-field__native\"\r\n [id]=\"controlId\"\r\n [attr.name]=\"name || null\"\r\n [attr.tabindex]=\"readonly ? -1 : null\"\r\n [checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n [required]=\"uiRequiredEffective\"\r\n [attr.aria-invalid]=\"uiInvalid\"\r\n [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n [attr.aria-readonly]=\"readonly ? true : null\"\r\n [attr.aria-label]=\"label || placeholder || 'Op\u00E7\u00E3o'\"\r\n (click)=\"onCheckboxClick($event)\"\r\n (change)=\"onNativeChange($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n @if (label) {\r\n <span class=\"checkbox-field__label\">{{ label }}</span>\r\n }\r\n </label>\r\n @if (showErrorMessage && uiInvalid && uiErrorMessage) {\r\n <p class=\"checkbox-field__error\" [id]=\"errorElementId\" role=\"alert\">{{ uiErrorMessage }}</p>\r\n }\r\n</div>\r\n} @else {\r\n<div class=\"checkbox-field checkbox-field--loading\" role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\"\r\n [attr.aria-label]=\"label || 'A carregar'\">\r\n <div class=\"checkbox-field__skeleton-row\" aria-hidden=\"true\">\r\n <app-skeleton-block width=\"1.1rem\" height=\"1.1rem\" radius=\"4px\" />\r\n <app-skeleton-block width=\"11rem\" height=\"0.72rem\" radius=\"6px\" />\r\n </div>\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:
|
|
3430
|
-
}]
|
|
3437
|
+
], template: "@if (!loading) {\r\n<div class=\"checkbox-field\" [class.checkbox-field--invalid]=\"uiInvalid\"\r\n [class.checkbox-field--readonly]=\"readonly\">\r\n <label class=\"checkbox-field__row\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"checkbox-field__native\"\r\n [id]=\"controlId\"\r\n [attr.name]=\"name || null\"\r\n [attr.tabindex]=\"readonly ? -1 : null\"\r\n [checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n [required]=\"uiRequiredEffective\"\r\n [attr.aria-invalid]=\"uiInvalid\"\r\n [attr.aria-describedby]=\"uiAriaDescribedBy\"\r\n [attr.aria-readonly]=\"readonly ? true : null\"\r\n [attr.aria-label]=\"label || placeholder || 'Op\u00E7\u00E3o'\"\r\n (click)=\"onCheckboxClick($event)\"\r\n (change)=\"onNativeChange($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n @if (label) {\r\n <span class=\"checkbox-field__label\">{{ label }}</span>\r\n }\r\n </label>\r\n @if (showErrorMessage && uiInvalid && uiErrorMessage) {\r\n <p class=\"checkbox-field__error\" [id]=\"errorElementId\" role=\"alert\">{{ uiErrorMessage }}</p>\r\n }\r\n</div>\r\n} @else {\r\n<div class=\"checkbox-field checkbox-field--loading\" role=\"status\" aria-live=\"polite\" [attr.aria-busy]=\"true\"\r\n [attr.aria-label]=\"label || 'A carregar'\">\r\n <div class=\"checkbox-field__skeleton-row\" aria-hidden=\"true\">\r\n <app-skeleton-block width=\"1.1rem\" height=\"1.1rem\" radius=\"4px\" />\r\n <app-skeleton-block width=\"11rem\" height=\"0.72rem\" radius=\"6px\" />\r\n </div>\r\n</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:auto;box-sizing:border-box}:host(.checkbox-field--full-width){width:100%}.checkbox-field--invalid .checkbox-field__label{color:var(--ui-field-float-label-invalid-color)}.checkbox-field__row{display:flex;align-items:center;gap:.5rem;margin:0;cursor:pointer;width:fit-content;max-width:100%}.checkbox-field__native{appearance:none;-webkit-appearance:none;width:1.1rem;height:1.1rem;margin:0;flex-shrink:0;box-sizing:border-box;border:1px solid var(--ui-field-float-border);border-radius:4px;background-color:var(--ui-field-float-bg);background-repeat:no-repeat;background-position:center;background-size:.65rem auto;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}.checkbox-field__native:focus-visible{outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.checkbox-field__native:focus:not(:focus-visible){outline:2px solid var(--ui-field-float-border-focus);outline-offset:2px}.checkbox-field__native:checked{border-color:var(--ui-field-float-border-focus);background-color:var(--ui-field-float-border-focus);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field__native:disabled{cursor:not-allowed;opacity:var(--ui-field-input-disabled-opacity)}.checkbox-field--invalid .checkbox-field__native{border-color:var(--ui-field-input-invalid-border)}.checkbox-field--invalid .checkbox-field__native:checked{border-color:var(--ui-field-input-invalid-border);background-color:var(--ui-field-input-invalid-border);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field--invalid .checkbox-field__native:focus-visible{outline-color:var(--ui-field-input-invalid-border)}.checkbox-field--invalid .checkbox-field__native:focus:not(:focus-visible){outline:2px solid var(--ui-field-input-invalid-border);outline-offset:2px}.checkbox-field__label{font-size:1rem;line-height:1.35;color:var(--ui-field-float-label-color);cursor:pointer;-webkit-user-select:none;user-select:none;padding-top:.1em}.checkbox-field__error{margin:.35rem 0 0 1.6rem;padding:0;font-size:.75rem;color:var(--ui-field-error-text-color);user-select:none;-webkit-user-select:none}.checkbox-field--loading{width:100%;max-width:100%;box-sizing:border-box}.checkbox-field--loading .checkbox-field__skeleton-row{display:flex;align-items:center;gap:.5rem;width:100%;max-width:100%;box-sizing:border-box}.checkbox-field--readonly .checkbox-field__row{cursor:default;pointer-events:none}.checkbox-field--readonly .checkbox-field__native{border-color:var(--ui-field-readonly-border);background-color:var(--ui-field-readonly-bg);cursor:default}.checkbox-field--readonly .checkbox-field__native:checked{border-color:var(--ui-field-readonly-border-focus);background-color:var(--ui-field-readonly-border-focus);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E\")}.checkbox-field--readonly .checkbox-field__native:focus,.checkbox-field--readonly .checkbox-field__native:focus-visible{outline:none}.checkbox-field--readonly .checkbox-field__label{color:var(--ui-field-readonly-label-color);cursor:default}\n"] }]
|
|
3438
|
+
}], propDecorators: { fullWidth: [{
|
|
3439
|
+
type: Input,
|
|
3440
|
+
args: [{ transform: booleanAttribute }]
|
|
3441
|
+
}], fullWidthClass: [{
|
|
3442
|
+
type: HostBinding,
|
|
3443
|
+
args: ['class.checkbox-field--full-width']
|
|
3444
|
+
}] } });
|
|
3431
3445
|
|
|
3432
3446
|
class SwitchFieldComponent extends BooleanFieldDirective {
|
|
3433
3447
|
get labelId() {
|
|
@@ -7304,11 +7318,11 @@ class FormRowComponent {
|
|
|
7304
7318
|
return parts.join(' ');
|
|
7305
7319
|
}
|
|
7306
7320
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7307
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: FormRowComponent, isStandalone: true, selector: "app-form-row", inputs: { gap: "gap", align: "align", justify: "justify", grow: ["grow", "grow", booleanAttribute], wrap: ["wrap", "wrap", booleanAttribute], stackOnMobile: ["stackOnMobile", "stackOnMobile", booleanAttribute] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"form-row__grid\">\r\n <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-row__grid{display:grid;width:100%;min-width:0;box-sizing:border-box;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}.form-row__grid:not(:has(>app-form-col)){grid-template-columns:repeat(auto-fit,minmax(0,1fr))}:host(.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){display:flex;flex-wrap:wrap
|
|
7321
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: FormRowComponent, isStandalone: true, selector: "app-form-row", inputs: { gap: "gap", align: "align", justify: "justify", grow: ["grow", "grow", booleanAttribute], wrap: ["wrap", "wrap", booleanAttribute], stackOnMobile: ["stackOnMobile", "stackOnMobile", booleanAttribute] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"form-row__grid\">\r\n <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-row__grid{display:grid;width:100%;min-width:0;box-sizing:border-box;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}.form-row__grid:not(:has(>app-form-col)){grid-template-columns:repeat(auto-fit,minmax(0,1fr))}:host(.form-row--justify-center) .form-row__grid:not(:has(>app-form-col)),:host(.form-row--justify-end) .form-row__grid:not(:has(>app-form-col)),:host(.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){display:flex;flex-wrap:wrap}:host(.form-row--justify-center) .form-row__grid:not(:has(>app-form-col)){justify-content:center}:host(.form-row--justify-end) .form-row__grid:not(:has(>app-form-col)){justify-content:flex-end}:host(.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){justify-content:space-between}:host(.form-row--justify-center) .form-row__grid:not(:has(>app-form-col))>*,:host(.form-row--justify-end) .form-row__grid:not(:has(>app-form-col))>*,:host(.form-row--justify-between) .form-row__grid:not(:has(>app-form-col))>*{flex:0 1 auto;width:auto;max-width:100%}.form-row__grid:not(:has(>app-form-col))>*{min-width:0}:host(.form-row--gap-xs) .form-row__grid{gap:.5rem}:host(.form-row--gap-sm) .form-row__grid{gap:.75rem}:host(.form-row--gap-md) .form-row__grid{gap:1.25rem}:host(.form-row--gap-lg) .form-row__grid{gap:1.5rem}:host(.form-row--grow) .form-row__grid>:not(app-form-col){min-width:0;grid-column:1/-1}:host(.form-row--align-start) .form-row__grid{align-items:start}:host(.form-row--align-center) .form-row__grid{align-items:center}:host(.form-row--align-end) .form-row__grid{align-items:end}:host(.form-row--align-stretch) .form-row__grid{align-items:stretch}:host(.form-row--justify-start) .form-row__grid{justify-items:stretch;justify-content:start}:host(.form-row--justify-center) .form-row__grid{justify-content:center}:host(.form-row--justify-end) .form-row__grid{justify-content:end}:host(.form-row--justify-between) .form-row__grid{justify-content:space-between}@media(max-width:39.98rem){:host(.form-row--stack-mobile) .form-row__grid{grid-template-columns:1fr}:host(.form-row--stack-mobile) .form-row__grid ::ng-deep>app-form-col{grid-column:1/-1!important}:host(.form-row--stack-mobile.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){flex-direction:column;align-items:stretch;justify-content:flex-start}:host(.form-row--stack-mobile.form-row--justify-center) .form-row__grid:not(:has(>app-form-col)){flex-direction:column;align-items:center;justify-content:flex-start}:host(.form-row--stack-mobile.form-row--justify-end) .form-row__grid:not(:has(>app-form-col)){flex-direction:column;align-items:flex-end;justify-content:flex-start}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7308
7322
|
}
|
|
7309
7323
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormRowComponent, decorators: [{
|
|
7310
7324
|
type: Component,
|
|
7311
|
-
args: [{ selector: 'app-form-row', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-row__grid\">\r\n <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-row__grid{display:grid;width:100%;min-width:0;box-sizing:border-box;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}.form-row__grid:not(:has(>app-form-col)){grid-template-columns:repeat(auto-fit,minmax(0,1fr))}:host(.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){display:flex;flex-wrap:wrap
|
|
7325
|
+
args: [{ selector: 'app-form-row', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-row__grid\">\r\n <ng-content />\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;min-width:0;box-sizing:border-box}.form-row__grid{display:grid;width:100%;min-width:0;box-sizing:border-box;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}.form-row__grid:not(:has(>app-form-col)){grid-template-columns:repeat(auto-fit,minmax(0,1fr))}:host(.form-row--justify-center) .form-row__grid:not(:has(>app-form-col)),:host(.form-row--justify-end) .form-row__grid:not(:has(>app-form-col)),:host(.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){display:flex;flex-wrap:wrap}:host(.form-row--justify-center) .form-row__grid:not(:has(>app-form-col)){justify-content:center}:host(.form-row--justify-end) .form-row__grid:not(:has(>app-form-col)){justify-content:flex-end}:host(.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){justify-content:space-between}:host(.form-row--justify-center) .form-row__grid:not(:has(>app-form-col))>*,:host(.form-row--justify-end) .form-row__grid:not(:has(>app-form-col))>*,:host(.form-row--justify-between) .form-row__grid:not(:has(>app-form-col))>*{flex:0 1 auto;width:auto;max-width:100%}.form-row__grid:not(:has(>app-form-col))>*{min-width:0}:host(.form-row--gap-xs) .form-row__grid{gap:.5rem}:host(.form-row--gap-sm) .form-row__grid{gap:.75rem}:host(.form-row--gap-md) .form-row__grid{gap:1.25rem}:host(.form-row--gap-lg) .form-row__grid{gap:1.5rem}:host(.form-row--grow) .form-row__grid>:not(app-form-col){min-width:0;grid-column:1/-1}:host(.form-row--align-start) .form-row__grid{align-items:start}:host(.form-row--align-center) .form-row__grid{align-items:center}:host(.form-row--align-end) .form-row__grid{align-items:end}:host(.form-row--align-stretch) .form-row__grid{align-items:stretch}:host(.form-row--justify-start) .form-row__grid{justify-items:stretch;justify-content:start}:host(.form-row--justify-center) .form-row__grid{justify-content:center}:host(.form-row--justify-end) .form-row__grid{justify-content:end}:host(.form-row--justify-between) .form-row__grid{justify-content:space-between}@media(max-width:39.98rem){:host(.form-row--stack-mobile) .form-row__grid{grid-template-columns:1fr}:host(.form-row--stack-mobile) .form-row__grid ::ng-deep>app-form-col{grid-column:1/-1!important}:host(.form-row--stack-mobile.form-row--justify-between) .form-row__grid:not(:has(>app-form-col)){flex-direction:column;align-items:stretch;justify-content:flex-start}:host(.form-row--stack-mobile.form-row--justify-center) .form-row__grid:not(:has(>app-form-col)){flex-direction:column;align-items:center;justify-content:flex-start}:host(.form-row--stack-mobile.form-row--justify-end) .form-row__grid:not(:has(>app-form-col)){flex-direction:column;align-items:flex-end;justify-content:flex-start}}\n"] }]
|
|
7312
7326
|
}], propDecorators: { gap: [{
|
|
7313
7327
|
type: Input
|
|
7314
7328
|
}], align: [{
|