bways-report 0.1.0

package/esm2022/lib/features/designer/components/property-editor/property-editor-validation.component.mjs

@@ -0,0 +1,137 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+export class PropertyEditorValidationComponent {
+    comp = input.required();
+    updateValidation = output();
+    onMessageChange(val) {
+        const current = this.comp().validation?.messages ?? {};
+        this.updateValidation.emit({
+            key: 'messages',
+            value: { ...current, required: val },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PropertyEditorValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: PropertyEditorValidationComponent, isStandalone: true, selector: "rpt-property-editor-validation", inputs: { comp: { classPropertyName: "comp", publicName: "comp", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { updateValidation: "updateValidation" }, ngImport: i0, template: `
+    <div class="property-group">
+      <div class="group-title">Validation</div>
+
+      <div class="field-row">
+        <label class="checkbox-toggle">
+          <input
+            type="checkbox"
+            [ngModel]="comp().validation?.required ?? false"
+            (ngModelChange)="updateValidation.emit({ key: 'required', value: $event })"
+          />
+          <span>Required</span>
+        </label>
+      </div>
+
+      <div class="field-row">
+        <label class="field-label">Min Value / Length</label>
+        <input
+          type="number"
+          class="field-input"
+          [ngModel]="comp().validation?.min"
+          (ngModelChange)="updateValidation.emit({ key: 'min', value: $event ? +$event : undefined })"
+        />
+      </div>
+
+      <div class="field-row">
+        <label class="field-label">Max Value / Length</label>
+        <input
+          type="number"
+          class="field-input"
+          [ngModel]="comp().validation?.max"
+          (ngModelChange)="updateValidation.emit({ key: 'max', value: $event ? +$event : undefined })"
+        />
+      </div>
+
+      <div class="field-row">
+        <label class="field-label">Pattern (RegEx)</label>
+        <input
+          type="text"
+          class="field-input"
+          placeholder="e.g. ^[0-9]+$"
+          [ngModel]="comp().validation?.pattern"
+          (ngModelChange)="updateValidation.emit({ key: 'pattern', value: $event })"
+        />
+      </div>
+
+      <div class="field-row">
+        <label class="field-label">Custom Error Message</label>
+        <input
+          type="text"
+          class="field-input"
+          placeholder="e.g. Please enter a valid value"
+          [ngModel]="comp().validation?.messages?.['required'] || ''"
+          (ngModelChange)="onMessageChange($event)"
+        />
+      </div>
+    </div>
+  `, isInline: true, styles: [".property-group{display:flex;flex-direction:column;gap:12px}.group-title{font-size:.7rem;font-weight:700;color:var(--rpt-color-text-muted, #64748b);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:4px}.field-row{display:flex;flex-direction:column;gap:4px}.field-label-row{display:flex;align-items:center;justify-content:space-between}.field-badge-val{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.field-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.field-input,.field-select,.field-textarea{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-sm, 4px);padding:6px 10px;font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all var(--rpt-transition-speed, .15s) ease}.field-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:13px 13px;padding-right:28px;cursor:pointer}.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.checkbox-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:500;color:var(--rpt-color-text, #0f172a);cursor:pointer}.preset-pill-group{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.preset-pill{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#475569;cursor:pointer;transition:all .12s ease}.preset-pill:hover{background:#e2e8f0;color:#0f172a;border-color:#cbd5e1}.preset-pill-active{background:var(--rpt-color-primary, #2563eb)!important;color:#fff!important;border-color:var(--rpt-color-primary, #2563eb)!important}.preset-pill-reset{color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border-color:#bfdbfe}.preset-pill-reset:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PropertyEditorValidationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rpt-property-editor-validation', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="property-group">
+      <div class="group-title">Validation</div>
+
+      <div class="field-row">
+        <label class="checkbox-toggle">
+          <input
+            type="checkbox"
+            [ngModel]="comp().validation?.required ?? false"
+            (ngModelChange)="updateValidation.emit({ key: 'required', value: $event })"
+          />
+          <span>Required</span>
+        </label>
+      </div>
+
+      <div class="field-row">
+        <label class="field-label">Min Value / Length</label>
+        <input
+          type="number"
+          class="field-input"
+          [ngModel]="comp().validation?.min"
+          (ngModelChange)="updateValidation.emit({ key: 'min', value: $event ? +$event : undefined })"
+        />
+      </div>
+
+      <div class="field-row">
+        <label class="field-label">Max Value / Length</label>
+        <input
+          type="number"
+          class="field-input"
+          [ngModel]="comp().validation?.max"
+          (ngModelChange)="updateValidation.emit({ key: 'max', value: $event ? +$event : undefined })"
+        />
+      </div>
+
+      <div class="field-row">
+        <label class="field-label">Pattern (RegEx)</label>
+        <input
+          type="text"
+          class="field-input"
+          placeholder="e.g. ^[0-9]+$"
+          [ngModel]="comp().validation?.pattern"
+          (ngModelChange)="updateValidation.emit({ key: 'pattern', value: $event })"
+        />
+      </div>
+
+      <div class="field-row">
+        <label class="field-label">Custom Error Message</label>
+        <input
+          type="text"
+          class="field-input"
+          placeholder="e.g. Please enter a valid value"
+          [ngModel]="comp().validation?.messages?.['required'] || ''"
+          (ngModelChange)="onMessageChange($event)"
+        />
+      </div>
+    </div>
+  `, styles: [".property-group{display:flex;flex-direction:column;gap:12px}.group-title{font-size:.7rem;font-weight:700;color:var(--rpt-color-text-muted, #64748b);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--rpt-color-border, #e2e8f0);padding-bottom:4px}.field-row{display:flex;flex-direction:column;gap:4px}.field-label-row{display:flex;align-items:center;justify-content:space-between}.field-badge-val{font-size:.65rem;font-weight:600;color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border:1px solid #bfdbfe;padding:1px 6px;border-radius:9999px}.field-label{font-size:.7rem;font-weight:600;color:var(--rpt-color-text, #0f172a)}.field-input,.field-select,.field-textarea{width:100%;box-sizing:border-box;border:1px solid var(--rpt-color-border, #cbd5e1);border-radius:var(--rpt-border-radius-sm, 4px);padding:6px 10px;font-size:var(--rpt-font-size-sm, .75rem);color:var(--rpt-color-text, #0f172a);background:#fff;outline:none;transition:all var(--rpt-transition-speed, .15s) ease}.field-select{appearance:none;-webkit-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:13px 13px;padding-right:28px;cursor:pointer}.field-input:focus,.field-select:focus,.field-textarea:focus{border-color:var(--rpt-color-primary, #2563eb);box-shadow:var(--rpt-box-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25))}.checkbox-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:500;color:var(--rpt-color-text, #0f172a);cursor:pointer}.preset-pill-group{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.preset-pill{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:2px 8px;font-size:.65rem;font-weight:600;color:#475569;cursor:pointer;transition:all .12s ease}.preset-pill:hover{background:#e2e8f0;color:#0f172a;border-color:#cbd5e1}.preset-pill-active{background:var(--rpt-color-primary, #2563eb)!important;color:#fff!important;border-color:var(--rpt-color-primary, #2563eb)!important}.preset-pill-reset{color:var(--rpt-color-primary, #2563eb);background:#eff6ff;border-color:#bfdbfe}.preset-pill-reset:hover{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvcGVydHktZWRpdG9yLXZhbGlkYXRpb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYndheXMtcmVwb3J0L3NyYy9saWIvZmVhdHVyZXMvZGVzaWduZXIvY29tcG9uZW50cy9wcm9wZXJ0eS1lZGl0b3IvcHJvcGVydHktZWRpdG9yLXZhbGlkYXRpb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNsRixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7QUFvRTdDLE1BQU0sT0FBTyxpQ0FBaUM7SUFDbkMsSUFBSSxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQTZCLENBQUM7SUFDbkQsZ0JBQWdCLEdBQUcsTUFBTSxFQUFtQyxDQUFDO0lBRXRFLGVBQWUsQ0FBQyxHQUFXO1FBQ3pCLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxVQUFVLEVBQUUsUUFBUSxJQUFJLEVBQUUsQ0FBQztRQUN2RCxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDO1lBQ3pCLEdBQUcsRUFBRSxVQUFVO1lBQ2YsS0FBSyxFQUFFLEVBQUUsR0FBRyxPQUFPLEVBQUUsUUFBUSxFQUFFLEdBQUcsRUFBRTtTQUNyQyxDQUFDLENBQUM7SUFDTCxDQUFDO3dHQVZVLGlDQUFpQzs0RkFBakMsaUNBQWlDLDZRQTNEbEM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXlEVCxpOUVBNURTLFlBQVksOEJBQUUsV0FBVzs7NEZBOER4QixpQ0FBaUM7a0JBakU3QyxTQUFTOytCQUNFLGdDQUFnQyxjQUM5QixJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsV0FBVyxDQUFDLG1CQUNuQix1QkFBdUIsQ0FBQyxNQUFNLFlBRXJDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F5RFQiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBpbnB1dCwgb3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBSZXBvcnRDb21wb25lbnREZWZpbml0aW9uIH0gZnJvbSAnLi4vLi4vLi4vLi4vY29yZS9tb2RlbHMvcmVwb3J0LWNvbXBvbmVudC5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3JwdC1wcm9wZXJ0eS1lZGl0b3ItdmFsaWRhdGlvbicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEZvcm1zTW9kdWxlXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHN0eWxlVXJsczogWycuL3Byb3BlcnR5LWVkaXRvci5jb21tb24uY3NzJ10sXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBjbGFzcz1cInByb3BlcnR5LWdyb3VwXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiZ3JvdXAtdGl0bGVcIj5WYWxpZGF0aW9uPC9kaXY+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJmaWVsZC1yb3dcIj5cbiAgICAgICAgPGxhYmVsIGNsYXNzPVwiY2hlY2tib3gtdG9nZ2xlXCI+XG4gICAgICAgICAgPGlucHV0XG4gICAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAgICAgW25nTW9kZWxdPVwiY29tcCgpLnZhbGlkYXRpb24/LnJlcXVpcmVkID8/IGZhbHNlXCJcbiAgICAgICAgICAgIChuZ01vZGVsQ2hhbmdlKT1cInVwZGF0ZVZhbGlkYXRpb24uZW1pdCh7IGtleTogJ3JlcXVpcmVkJywgdmFsdWU6ICRldmVudCB9KVwiXG4gICAgICAgICAgLz5cbiAgICAgICAgICA8c3Bhbj5SZXF1aXJlZDwvc3Bhbj5cbiAgICAgICAgPC9sYWJlbD5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8ZGl2IGNsYXNzPVwiZmllbGQtcm93XCI+XG4gICAgICAgIDxsYWJlbCBjbGFzcz1cImZpZWxkLWxhYmVsXCI+TWluIFZhbHVlIC8gTGVuZ3RoPC9sYWJlbD5cbiAgICAgICAgPGlucHV0XG4gICAgICAgICAgdHlwZT1cIm51bWJlclwiXG4gICAgICAgICAgY2xhc3M9XCJmaWVsZC1pbnB1dFwiXG4gICAgICAgICAgW25nTW9kZWxdPVwiY29tcCgpLnZhbGlkYXRpb24/Lm1pblwiXG4gICAgICAgICAgKG5nTW9kZWxDaGFuZ2UpPVwidXBkYXRlVmFsaWRhdGlvbi5lbWl0KHsga2V5OiAnbWluJywgdmFsdWU6ICRldmVudCA/ICskZXZlbnQgOiB1bmRlZmluZWQgfSlcIlxuICAgICAgICAvPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJmaWVsZC1yb3dcIj5cbiAgICAgICAgPGxhYmVsIGNsYXNzPVwiZmllbGQtbGFiZWxcIj5NYXggVmFsdWUgLyBMZW5ndGg8L2xhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICB0eXBlPVwibnVtYmVyXCJcbiAgICAgICAgICBjbGFzcz1cImZpZWxkLWlucHV0XCJcbiAgICAgICAgICBbbmdNb2RlbF09XCJjb21wKCkudmFsaWRhdGlvbj8ubWF4XCJcbiAgICAgICAgICAobmdNb2RlbENoYW5nZSk9XCJ1cGRhdGVWYWxpZGF0aW9uLmVtaXQoeyBrZXk6ICdtYXgnLCB2YWx1ZTogJGV2ZW50ID8gKyRldmVudCA6IHVuZGVmaW5lZCB9KVwiXG4gICAgICAgIC8+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPGRpdiBjbGFzcz1cImZpZWxkLXJvd1wiPlxuICAgICAgICA8bGFiZWwgY2xhc3M9XCJmaWVsZC1sYWJlbFwiPlBhdHRlcm4gKFJlZ0V4KTwvbGFiZWw+XG4gICAgICAgIDxpbnB1dFxuICAgICAgICAgIHR5cGU9XCJ0ZXh0XCJcbiAgICAgICAgICBjbGFzcz1cImZpZWxkLWlucHV0XCJcbiAgICAgICAgICBwbGFjZWhvbGRlcj1cImUuZy4gXlswLTldKyRcIlxuICAgICAgICAgIFtuZ01vZGVsXT1cImNvbXAoKS52YWxpZGF0aW9uPy5wYXR0ZXJuXCJcbiAgICAgICAgICAobmdNb2RlbENoYW5nZSk9XCJ1cGRhdGVWYWxpZGF0aW9uLmVtaXQoeyBrZXk6ICdwYXR0ZXJuJywgdmFsdWU6ICRldmVudCB9KVwiXG4gICAgICAgIC8+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPGRpdiBjbGFzcz1cImZpZWxkLXJvd1wiPlxuICAgICAgICA8bGFiZWwgY2xhc3M9XCJmaWVsZC1sYWJlbFwiPkN1c3RvbSBFcnJvciBNZXNzYWdlPC9sYWJlbD5cbiAgICAgICAgPGlucHV0XG4gICAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICAgIGNsYXNzPVwiZmllbGQtaW5wdXRcIlxuICAgICAgICAgIHBsYWNlaG9sZGVyPVwiZS5nLiBQbGVhc2UgZW50ZXIgYSB2YWxpZCB2YWx1ZVwiXG4gICAgICAgICAgW25nTW9kZWxdPVwiY29tcCgpLnZhbGlkYXRpb24/Lm1lc3NhZ2VzPy5bJ3JlcXVpcmVkJ10gfHwgJydcIlxuICAgICAgICAgIChuZ01vZGVsQ2hhbmdlKT1cIm9uTWVzc2FnZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgLz5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICBgLFxufSlcbmV4cG9ydCBjbGFzcyBQcm9wZXJ0eUVkaXRvclZhbGlkYXRpb25Db21wb25lbnQge1xuICByZWFkb25seSBjb21wID0gaW5wdXQucmVxdWlyZWQ8UmVwb3J0Q29tcG9uZW50RGVmaW5pdGlvbj4oKTtcbiAgcmVhZG9ubHkgdXBkYXRlVmFsaWRhdGlvbiA9IG91dHB1dDx7IGtleTogc3RyaW5nOyB2YWx1ZTogdW5rbm93biB9PigpO1xuXG4gIG9uTWVzc2FnZUNoYW5nZSh2YWw6IHN0cmluZyk6IHZvaWQge1xuICAgIGNvbnN0IGN1cnJlbnQgPSB0aGlzLmNvbXAoKS52YWxpZGF0aW9uPy5tZXNzYWdlcyA/PyB7fTtcbiAgICB0aGlzLnVwZGF0ZVZhbGlkYXRpb24uZW1pdCh7XG4gICAgICBrZXk6ICdtZXNzYWdlcycsXG4gICAgICB2YWx1ZTogeyAuLi5jdXJyZW50LCByZXF1aXJlZDogdmFsIH0sXG4gICAgfSk7XG4gIH1cbn1cbiJdfQ==