@unifylib/ui-lib 1.0.65 → 1.0.67

package/cli/generators/dashboard.js

@@ -0,0 +1,147 @@
+"use strict";
+
+/**
+ * @param {{
+ *  kebab: string,
+ *  pascal: string,
+ *  labelsSection: string,
+ *  importPath: string,
+ * }} ctx
+ */
+function generate(ctx) {
+  const fileBase = ctx.kebab;
+
+  const componentTs = `import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
+import { Router } from "@angular/router";
+import { TranslateModule } from "@ngx-translate/core";
+import { ActionCardComponent, FeatureItem } from "${ctx.importPath}";
+
+@Component({
+  selector: "app-${fileBase}",
+  standalone: true,
+  imports: [ActionCardComponent, TranslateModule],
+  templateUrl: "./${fileBase}.component.html",
+  styleUrls: ["./${fileBase}.component.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ${ctx.pascal}Component {
+  private readonly router = inject(Router);
+
+  readonly cardAFeatures: FeatureItem[] = [
+    { textKey: "${ctx.labelsSection}.FEATURE_1" },
+    { textKey: "${ctx.labelsSection}.FEATURE_2" },
+  ];
+
+  readonly cardBFeatures: FeatureItem[] = [
+    { textKey: "${ctx.labelsSection}.FEATURE_3" },
+    { textKey: "${ctx.labelsSection}.FEATURE_4" },
+  ];
+
+  navigateA(): void {
+    void this.router.navigate(["/${ctx.kebab}", "feature-a"]);
+  }
+
+  navigateB(): void {
+    void this.router.navigate(["/${ctx.kebab}", "feature-b"]);
+  }
+}
+`;
+
+  const componentHtml = `<div class="dashboard-container">
+  <div class="welcome-section">
+    <h1 class="welcome-title">{{ '${ctx.labelsSection}.TITLE' | translate }}</h1>
+    <p class="welcome-subtitle">{{ '${ctx.labelsSection}.SUBTITLE' | translate }}</p>
+  </div>
+
+  <div class="cards-grid">
+    <lib-action-card
+      class="action-card-item"
+      icon="dashboard"
+      [titleKey]="'${ctx.labelsSection}.CARD_A_TITLE'"
+      [descriptionKey]="'${ctx.labelsSection}.CARD_A_DESC'"
+      [buttonTextKey]="'${ctx.labelsSection}.CARD_A_CTA'"
+      iconColor="#0d4261"
+      borderColor="#bcd4e6"
+      [buttonGradient]="'linear-gradient(90deg, #e3f0ff 0%, #0d4261 100%)'"
+      [topBorderHeight]="14"
+      variant="extended"
+      [features]="cardAFeatures"
+      [featuresHeadingKey]="'${ctx.labelsSection}.FEATURES'"
+      [showDivider]="true"
+      (buttonClick)="navigateA()">
+    </lib-action-card>
+
+    <lib-action-card
+      class="action-card-item"
+      icon="add_to_queue"
+      [titleKey]="'${ctx.labelsSection}.CARD_B_TITLE'"
+      [descriptionKey]="'${ctx.labelsSection}.CARD_B_DESC'"
+      [buttonTextKey]="'${ctx.labelsSection}.CARD_B_CTA'"
+      iconColor="#8067A4"
+      borderColor="#BDB3CA"
+      [buttonGradient]="'linear-gradient(90deg, #D1CBD8 0%, #8168A5 100%)'"
+      [topBorderHeight]="14"
+      variant="extended"
+      [features]="cardBFeatures"
+      [featuresHeadingKey]="'${ctx.labelsSection}.FEATURES'"
+      [showDivider]="true"
+      (buttonClick)="navigateB()">
+    </lib-action-card>
+  </div>
+</div>
+`;
+
+  const componentScss = `.dashboard-container {
+  padding: 1.5rem;
+}
+
+.welcome-section {
+  margin-bottom: 2rem;
+}
+
+.welcome-title {
+  margin: 0 0 0.5rem;
+}
+
+.welcome-subtitle {
+  margin: 0;
+  opacity: 0.85;
+}
+
+.cards-grid {
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+
+.action-card-item {
+  min-height: 100%;
+}
+`;
+
+  return [
+    { relative: `${fileBase}.component.ts`, content: componentTs },
+    { relative: `${fileBase}.component.html`, content: componentHtml },
+    { relative: `${fileBase}.component.scss`, content: componentScss },
+  ];
+}
+
+function getTranslations(ctx) {
+  return {
+    [`${ctx.labelsSection}.TITLE`]: `${ctx.pascal} Dashboard`,
+    [`${ctx.labelsSection}.SUBTITLE`]: "Choose an option to continue",
+    [`${ctx.labelsSection}.FEATURES`]: "Features",
+    [`${ctx.labelsSection}.CARD_A_TITLE`]: "Card A",
+    [`${ctx.labelsSection}.CARD_A_DESC`]: "Description for card A",
+    [`${ctx.labelsSection}.CARD_A_CTA`]: "Open",
+    [`${ctx.labelsSection}.CARD_B_TITLE`]: "Card B",
+    [`${ctx.labelsSection}.CARD_B_DESC`]: "Description for card B",
+    [`${ctx.labelsSection}.CARD_B_CTA`]: "Open",
+    [`${ctx.labelsSection}.FEATURE_1`]: "Feature 1",
+    [`${ctx.labelsSection}.FEATURE_2`]: "Feature 2",
+    [`${ctx.labelsSection}.FEATURE_3`]: "Feature 3",
+    [`${ctx.labelsSection}.FEATURE_4`]: "Feature 4",
+  };
+}
+
+module.exports = { generate, getTranslations };

package/cli/generators/form-screen.js

@@ -0,0 +1,95 @@
+"use strict";
+
+const { buildFieldInfoLines } = require("../utils");
+
+/**
+ * @param {{
+ *  kebab: string,
+ *  pascal: string,
+ *  labelsSection: string,
+ *  apiUri: string,
+ *  importPath: string,
+ *  fieldsCount: number,
+ * }} ctx
+ */
+function generate(ctx) {
+  const fileBase = ctx.kebab;
+  const fieldsBlock = buildFieldInfoLines(ctx.fieldsCount, 2, "  ");
+
+  const settings = `import { Validators } from "@angular/forms";
+import { FieldInfo, PageInfo } from "${ctx.importPath}";
+
+export const PAGE_INFO: PageInfo = {
+  id: "${ctx.kebab}",
+  labelsSection: "${ctx.labelsSection}",
+  hasAddButton: false,
+  apiUri: "${ctx.apiUri}",
+  draftSupported: false,
+  selfRouting: true,
+};
+
+export const FIELDS: FieldInfo[] = [
+${fieldsBlock}
+];
+`;
+
+  const componentTs = `import { ChangeDetectionStrategy, Component } from "@angular/core";
+import { FormGroup, ReactiveFormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { BaseFormCanvasComponent } from "${ctx.importPath}";
+import { FIELDS, PAGE_INFO } from "./${fileBase}.settings";
+
+@Component({
+  selector: "app-${fileBase}",
+  standalone: true,
+  imports: [BaseFormCanvasComponent, ReactiveFormsModule, TranslateModule],
+  templateUrl: "./${fileBase}.component.html",
+  styleUrls: ["./${fileBase}.component.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ${ctx.pascal}Component {
+  readonly pageInfo = PAGE_INFO;
+  readonly fields = FIELDS;
+  item: Record<string, unknown> = {};
+  editable = true;
+  form: FormGroup | null = null;
+
+  onFormUpdated(form: FormGroup): void {
+    this.form = form;
+  }
+}
+`;
+
+  const componentHtml = `<app-base-form-canvas
+  *ngIf="fields?.length"
+  [pageInfo]="pageInfo"
+  [fields]="fields"
+  [editable]="editable"
+  [item]="item"
+  (formUpdated)="onFormUpdated($event)">
+</app-base-form-canvas>
+`;
+
+  const componentScss = `:host {
+  display: block;
+}
+`;
+
+  return [
+    { relative: `${fileBase}.settings.ts`, content: settings },
+    { relative: `${fileBase}.component.ts`, content: componentTs },
+    { relative: `${fileBase}.component.html`, content: componentHtml },
+    { relative: `${fileBase}.component.scss`, content: componentScss },
+  ];
+}
+
+function getTranslations(ctx) {
+  const out = {};
+  out[`${ctx.labelsSection}.list_title`] = `${ctx.pascal} List`;
+  for (let i = 1; i <= ctx.fieldsCount; i++) {
+    out[`${ctx.labelsSection}.field${i}`] = `Field ${i}`;
+  }
+  return out;
+}
+
+module.exports = { generate, getTranslations };

package/cli/generators/line-editor.js

@@ -0,0 +1,110 @@
+"use strict";
+
+const { buildFieldInfoLines } = require("../utils");
+
+/**
+ * @param {{
+ *  kebab: string,
+ *  pascal: string,
+ *  labelsSection: string,
+ *  importPath: string,
+ *  fieldsCount: number,
+ * }} ctx
+ */
+function generate(ctx) {
+  const fileBase = ctx.kebab;
+  const fieldsBlock = buildFieldInfoLines(ctx.fieldsCount, 2, "  ");
+
+  const settings = `import { Validators } from "@angular/forms";
+import { FieldInfo, PageInfo } from "${ctx.importPath}";
+
+export const PAGE_INFO: PageInfo = {
+  id: "${ctx.kebab}",
+  labelsSection: "${ctx.labelsSection}",
+  hasAddButton: false,
+  draftSupported: false,
+};
+
+/** Shared schema for every line row; adjust \`row\` / \`visible\` for header vs body fields in your feature. */
+export const LINE_FIELDS: FieldInfo[] = [
+${fieldsBlock}
+];
+
+/** Grid columns for the line header row (length matches number of line fields). */
+export const COLUMN_HEADER_WIDTHS: string[] = [
+${Array.from({ length: ctx.fieldsCount }, () => '  "minmax(0,1fr)"').join(",\n")}
+];
+`;
+
+  const componentTs = `import { ChangeDetectionStrategy, Component } from "@angular/core";
+import { TranslateModule } from "@ngx-translate/core";
+import {
+  ItemLineEditorComponent,
+  ItemsTotal,
+  LineItem,
+} from "${ctx.importPath}";
+import { COLUMN_HEADER_WIDTHS, LINE_FIELDS, PAGE_INFO } from "./${fileBase}.settings";
+
+@Component({
+  selector: "app-${fileBase}",
+  standalone: true,
+  imports: [ItemLineEditorComponent, TranslateModule],
+  templateUrl: "./${fileBase}.component.html",
+  styleUrls: ["./${fileBase}.component.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ${ctx.pascal}Component {
+  readonly pageInfo = PAGE_INFO;
+  readonly lineFields = LINE_FIELDS;
+  readonly columnHeaderWidths = COLUMN_HEADER_WIDTHS;
+  lines: LineItem[] = [];
+  currency = "QAR";
+
+  onLinesChange(items: LineItem[]): void {
+    this.lines = items;
+  }
+
+  onTotalsChange(_totals: ItemsTotal): void {
+    // Optional: patch a parent form or show summary.
+  }
+}
+`;
+
+  const componentHtml = `<app-item-line-editor
+  [pageInfo]="pageInfo"
+  [fields]="lineFields"
+  [columnHeaderWidths]="columnHeaderWidths"
+  [items]="lines"
+  [currency]="currency"
+  [title]="'${ctx.labelsSection}.linesTitle'"
+  [subtitle]="'${ctx.labelsSection}.linesSubtitle'"
+  (itemsChange)="onLinesChange($event)"
+  (totalsChange)="onTotalsChange($event)">
+</app-item-line-editor>
+`;
+
+  const componentScss = `:host {
+  display: block;
+}
+`;
+
+  return [
+    { relative: `${fileBase}.settings.ts`, content: settings },
+    { relative: `${fileBase}.component.ts`, content: componentTs },
+    { relative: `${fileBase}.component.html`, content: componentHtml },
+    { relative: `${fileBase}.component.scss`, content: componentScss },
+  ];
+}
+
+function getTranslations(ctx) {
+  const out = {
+    [`${ctx.labelsSection}.linesTitle`]: `${ctx.pascal} Lines`,
+    [`${ctx.labelsSection}.linesSubtitle`]: "Review and edit line items",
+  };
+  for (let i = 1; i <= ctx.fieldsCount; i++) {
+    out[`${ctx.labelsSection}.field${i}`] = `Field ${i}`;
+  }
+  return out;
+}
+
+module.exports = { generate, getTranslations };

package/cli/generators/permission-matrix.js

@@ -0,0 +1,115 @@
+"use strict";
+
+/**
+ * @param {{
+ *  kebab: string,
+ *  pascal: string,
+ *  labelsSection: string,
+ *  importPath: string,
+ * }} ctx
+ */
+function generate(ctx) {
+  const fileBase = ctx.kebab;
+
+  const settings = `import {
+  PermissionConfig,
+  PermissionMatrixItem,
+} from "${ctx.importPath}";
+
+export const PERMISSION_COLUMNS: PermissionConfig[] = [
+  { key: "view", labelKey: "${ctx.labelsSection}.view" },
+  { key: "edit", labelKey: "${ctx.labelsSection}.edit" },
+  {
+    key: "completeAndTerminate",
+    labelKey: "${ctx.labelsSection}.completeAndTerminate",
+    combinedKeys: ["completePermission", "terminatePermission"],
+  },
+];
+
+export const SAMPLE_GROUPS: PermissionMatrixItem[] = [
+  {
+    id: "sample-group",
+    title: "Sample group",
+    description: "Replace with data from your API",
+    expanded: true,
+    permissions: {
+      view: false,
+      edit: false,
+      completePermission: false,
+      terminatePermission: false,
+    },
+  },
+];
+`;
+
+  const componentTs = `import { ChangeDetectionStrategy, Component } from "@angular/core";
+import { TranslateModule } from "@ngx-translate/core";
+import {
+  PermissionChangeEvent,
+  PermissionMatrixComponent,
+  PermissionMatrixItem,
+} from "${ctx.importPath}";
+import { PERMISSION_COLUMNS, SAMPLE_GROUPS } from "./${fileBase}.settings";
+
+@Component({
+  selector: "app-${fileBase}",
+  standalone: true,
+  imports: [PermissionMatrixComponent, TranslateModule],
+  templateUrl: "./${fileBase}.component.html",
+  styleUrls: ["./${fileBase}.component.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ${ctx.pascal}Component {
+  readonly permissionConfig = PERMISSION_COLUMNS;
+  groups: PermissionMatrixItem[] = SAMPLE_GROUPS;
+  readonly canEdit = true;
+
+  onMatrixChange(items: PermissionMatrixItem[]): void {
+    this.groups = items;
+  }
+
+  onCell(_event: PermissionChangeEvent): void {
+    // Optional: audit / incremental API
+  }
+}
+`;
+
+  const componentHtml = `<lib-permission-matrix
+  [items]="groups"
+  [permissions]="permissionConfig"
+  [titleKey]="'${ctx.labelsSection}.groupMatrix'"
+  [selectAllLabelKey]="'${ctx.labelsSection}.selectAll'"
+  [expandAllLabelKey]="'${ctx.labelsSection}.expandAll'"
+  [collapseAllLabelKey]="'${ctx.labelsSection}.collapseAll'"
+  [readonly]="!canEdit"
+  (itemsChange)="onMatrixChange($event)"
+  (permissionChange)="onCell($event)">
+</lib-permission-matrix>
+`;
+
+  const componentScss = `:host {
+  display: block;
+}
+`;
+
+  return [
+    { relative: `${fileBase}.settings.ts`, content: settings },
+    { relative: `${fileBase}.component.ts`, content: componentTs },
+    { relative: `${fileBase}.component.html`, content: componentHtml },
+    { relative: `${fileBase}.component.scss`, content: componentScss },
+  ];
+}
+
+function getTranslations(ctx) {
+  return {
+    [`${ctx.labelsSection}.groupMatrix`]: "Group matrix",
+    [`${ctx.labelsSection}.selectAll`]: "Select all",
+    [`${ctx.labelsSection}.expandAll`]: "Expand all",
+    [`${ctx.labelsSection}.collapseAll`]: "Collapse all",
+    [`${ctx.labelsSection}.view`]: "View",
+    [`${ctx.labelsSection}.edit`]: "Edit",
+    [`${ctx.labelsSection}.completeAndTerminate`]: "Complete and terminate",
+  };
+}
+
+module.exports = { generate, getTranslations };

package/cli/generators/section-form.js

@@ -0,0 +1,103 @@
+"use strict";
+
+const { buildFieldInfoLines } = require("../utils");
+
+/**
+ * @param {{
+ *  kebab: string,
+ *  pascal: string,
+ *  labelsSection: string,
+ *  apiUri: string,
+ *  importPath: string,
+ *  fieldsCount: number,
+ * }} ctx
+ */
+function generate(ctx) {
+  const fileBase = ctx.kebab;
+  const fieldsBlock = buildFieldInfoLines(ctx.fieldsCount, 2, "  ");
+
+  const settings = `import { Validators } from "@angular/forms";
+import { FieldInfo, PageInfo } from "${ctx.importPath}";
+
+export const PAGE_INFO: PageInfo = {
+  id: "${ctx.kebab}",
+  labelsSection: "${ctx.labelsSection}",
+  hasAddButton: false,
+  apiUri: "${ctx.apiUri}",
+  draftSupported: false,
+  selfRouting: true,
+};
+
+export const FIELDS: FieldInfo[] = [
+${fieldsBlock}
+];
+`;
+
+  const componentTs = `import { ChangeDetectionStrategy, Component } from "@angular/core";
+import { FormGroup, ReactiveFormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { SectionFormCanvasComponent } from "${ctx.importPath}";
+import { FIELDS, PAGE_INFO } from "./${fileBase}.settings";
+
+@Component({
+  selector: "app-${fileBase}",
+  standalone: true,
+  imports: [SectionFormCanvasComponent, ReactiveFormsModule, TranslateModule],
+  templateUrl: "./${fileBase}.component.html",
+  styleUrls: ["./${fileBase}.component.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ${ctx.pascal}Component {
+  readonly pageInfo = PAGE_INFO;
+  readonly fields = FIELDS;
+  item: Record<string, unknown> = {};
+  editable = true;
+  form: FormGroup | null = null;
+  readonly sectionKey = 1;
+
+  onFormEdit(form: FormGroup): void {
+    this.form = form;
+  }
+}
+`;
+
+  const componentHtml = `<lib-section-form-canvas
+  [pageInfo]="pageInfo"
+  [fields]="fields"
+  [editable]="editable"
+  [item]="item"
+  [title]="'sectionTitle'"
+  [isTranslateTitle]="true"
+  [key]="sectionKey"
+  (formEdit)="onFormEdit($event)">
+</lib-section-form-canvas>
+`;
+
+  const componentScss = `:host {
+  display: block;
+}
+
+.location-card {
+  margin-bottom: 1rem;
+}
+`;
+
+  return [
+    { relative: `${fileBase}.settings.ts`, content: settings },
+    { relative: `${fileBase}.component.ts`, content: componentTs },
+    { relative: `${fileBase}.component.html`, content: componentHtml },
+    { relative: `${fileBase}.component.scss`, content: componentScss },
+  ];
+}
+
+function getTranslations(ctx) {
+  const out = {
+    [`${ctx.labelsSection}.sectionTitle`]: `${ctx.pascal} Section`,
+  };
+  for (let i = 1; i <= ctx.fieldsCount; i++) {
+    out[`${ctx.labelsSection}.field${i}`] = `Field ${i}`;
+  }
+  return out;
+}
+
+module.exports = { generate, getTranslations };