commons-shared-web-ui 0.0.22 → 0.0.24

package/index.d.ts

@@ -342,6 +342,94 @@ interface RangeConfig {
     minDate?: string;
     maxDate?: string;
 }
+/**
+ * Describes a single query-parameter for a parameterised API URL.
+ * Supports static values (baked into the JSON config) and dynamic values
+ * resolved at runtime from a context object via dot-notation `sourcePath`.
+ *
+ * Used inside `LibraryUploadConfig.params` to declaratively list all
+ * query params the library-image sync API needs.
+ */
+interface ApiQueryParam {
+    /** The query-param key sent to the backend (e.g. 'entityType', 'completeUrl'). */
+    key: string;
+    /**
+     * A static value baked into the JSON config
+     * (e.g. 'ENTITY_TYPE.OPPORTUNITY_GALLERY').
+     * Leave unset when the value must be resolved dynamically at runtime.
+     */
+    staticValue?: string;
+    /**
+     * A dot-notation path resolved against a runtime context object
+     * (e.g. 'libraryItem.url'). Takes precedence over `staticValue`
+     * when the context provides a non-null value.
+     */
+    sourcePath?: string;
+    /**
+     * When true the HTTP request is aborted if this param cannot be resolved
+     * to a non-empty value.
+     */
+    required?: boolean;
+}
+/**
+ * Structured config for the library-image sync POST API.
+ * Declare each query param as an `ApiQueryParam` so the set can grow
+ * without any code changes.
+ *
+ * Example:
+ * {
+ *   "baseUrl": "gateway/commons-opportunity-service/api/v1/attachments/upload-url",
+ *   "params": [
+ *     { "key": "entityType", "staticValue": "ENTITY_TYPE.OPPORTUNITY_GALLERY", "required": true },
+ *     { "key": "completeUrl", "sourcePath": "libraryItem.url", "required": true }
+ *   ]
+ * }
+ */
+interface LibraryUploadConfig {
+    /** Base URL without any query string. */
+    baseUrl: string;
+    /**
+     * Declared query params. Static values are embedded in the config;
+     * dynamic values (e.g. `completeUrl`) are resolved at call time from
+     * a runtime context object using `sourcePath`.
+     */
+    params?: ApiQueryParam[];
+}
+/**
+ * All library-image picker settings grouped under one roof.
+ * Used as the `libraryConfig` key inside `AttachmentConfig`.
+ *
+ * Example:
+ * {
+ *   "apiUrl": "gateway/.../attachments/bulk/public?entityIds=1&entityType=...",
+ *   "dataPath": "data",
+ *   "urlPath": "completeURL",
+ *   "idPath": "id",
+ *   "uploadConfig": {
+ *     "baseUrl": "gateway/.../attachments/upload-url",
+ *     "params": [
+ *       { "key": "entityType", "staticValue": "ENTITY_TYPE.OPPORTUNITY_GALLERY", "required": true },
+ *       { "key": "completeUrl", "sourcePath": "libraryItem.url", "required": true }
+ *     ]
+ *   }
+ * }
+ */
+interface LibraryConfig {
+    /** API endpoint (GET) to load the library image list. */
+    apiUrl: string;
+    /** Dot-notation path to the image array in the API response (e.g. 'data.items'). */
+    dataPath?: string;
+    /** Dot-notation path to the image URL within each item (e.g. 'completeURL'). */
+    urlPath?: string;
+    /** Dot-notation path to the image ID within each item (e.g. 'id'). */
+    idPath?: string;
+    /**
+     * Structured config for the library-image sync POST API.
+     * Declare each query param as an `ApiQueryParam` so the set can
+     * grow without any code changes.
+     */
+    uploadConfig?: LibraryUploadConfig;
+}
 /**
  * Unified attachment / file-upload configuration.
  * Used by FILE_UPLOAD fields for any kind of upload — images, documents, PDFs, etc.
@@ -374,22 +462,20 @@ interface AttachmentConfig {
      * API endpoint to delete the file. Called when an uploaded file with an ID != 0 is removed.
      */
     deleteUrl?: string;
-    /** API endpoint to GET the default library images list */
-    libraryApiUrl?: string;
-    /** Dot-notation path to the image array in the library API response (e.g. 'data.items') */
-    libraryDataPath?: string;
-    /** Dot-notation path to the image URL within each library item (e.g. 'url') */
-    libraryUrlPath?: string;
-    /** Dot-notation path to the image ID within each library item */
-    libraryIdPath?: string;
+    /**
+     * All library-image picker settings (API, response paths, sync upload).
+     * Replaces the former flat `libraryApiUrl`, `libraryDataPath`,
+     * `libraryUrlPath`, `libraryIdPath`, and `libraryUploadConfig` fields.
+     */
+    libraryConfig?: LibraryConfig;
     /** Optional description shown in the left info panel for media upload */
     description?: string;
     /** Optional bullet-point feature lines shown in the left info panel for media upload */
     features?: string[];
 }
 interface LocationConfig {
-    /** Default active tab: 'VENUE' | 'ONLINE' | 'TBA'. Defaults to 'VENUE'. */
-    defaultTab?: 'VENUE' | 'ONLINE' | 'TBA';
+    /** Default active tab (e.g. 'VENUE', 'ONLINE', 'TBA'). Defaults to 'VENUE' when not provided. */
+    defaultTab?: string;
     /** Allow multiple locations. Replaces the need for maxLocations. */
     allowMulti?: boolean;
     /** Maximum number of venue locations allowed. Defaults to 5 if allowMulti is true. */
@@ -438,7 +524,8 @@ interface LocationItem {
  * `tab` indicates which mode is active.
  */
 interface LocationFieldValue {
-    tab: 'VENUE' | 'ONLINE' | 'TBA';
+    /** Active location tab (e.g. 'VENUE', 'ONLINE', 'TBA'). Defaults to 'VENUE'. */
+    tab: string;
     /** Array of venue locations (only valid when tab === 'VENUE') */
     venues?: LocationItem[];
     /** Event URL (only valid when tab === 'ONLINE') */
@@ -468,8 +555,8 @@ interface ValidationResult {
 interface MediaItem {
     /** Server-assigned ID (for pre-filled items) */
     id?: number;
-    /** 'image' | 'youtube' */
-    mediaType: 'image' | 'youtube';
+    /** Media type (e.g. 'image', 'youtube'). Defaults to 'image'. */
+    mediaType: string;
     /** Remote URL of the image returned by the upload API, or the YouTube embed URL */
     url: string;
     /** Thumbnail URL (for YouTube previews) */
@@ -1057,8 +1144,8 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
     libraryLoading: boolean;
     libraryError: string;
     mediaUploadError: string;
-    /** Active tab: VENUE | ONLINE | TBA */
-    locationActiveTab: 'VENUE' | 'ONLINE' | 'TBA';
+    /** Active tab: any string, e.g. 'VENUE', 'ONLINE', 'TBA'. Defaults to 'VENUE'. */
+    locationActiveTab: string;
     /** Current text in the venue search box */
     locationSearchText: string;
     /** Google Places autocomplete suggestions */
@@ -1227,6 +1314,11 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
     private _extractYoutubeId;
     onMediaMenuDevice(): void;
     onMediaFileSelected(event: Event): void;
+    /**
+     * Resolves the library-image sync POST endpoint from `attachmentConfig.libraryConfig.uploadConfig`.
+     * Returns `null` when not configured; the caller skips the API call.
+     */
+    private buildLibraryUploadRequest;
     onMediaMenuLibrary(): void;
     private _loadLibraryImages;
     getLibraryItemUrl(item: any): string;
@@ -1240,7 +1332,7 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
     private showMediaError;
     private initLocationField;
     private _ensureGoogleMapsScript;
-    onLocationTabChange(tab: 'VENUE' | 'ONLINE' | 'TBA'): void;
+    onLocationTabChange(tab: string): void;
     get locationValue(): LocationFieldValue;
     get locationVenues(): LocationItem[];
     get locationOnlineUrl(): string;
@@ -3157,6 +3249,7 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
         key: string;
         direction: 'ASC' | 'DESC';
     };
+    private isSortActive;
     activeFilters: {
         [key: string]: any;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "commons-shared-web-ui",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "peerDependencies": {
     "@angular/animations": "20.3.15",
     "@angular/cdk": "20.2.14",

package/src/lib/styles/global.scss

@@ -1,6 +1,7 @@
 @use '../modules/side-nav/side-nav.theme' as sideNav;
 @use '../modules/form-builder/form-builder.theme' as fb;
 @import 'quill/dist/quill.snow.css';
+@import './utilities.scss';
 
 :root {
   @include sideNav.side-nav-theme();

package/src/lib/styles/utilities.scss

@@ -0,0 +1,250 @@
+/* utilities.scss */
+
+/* Display Classes */
+.d-flex { display: flex; }
+.d-inline-flex { display: inline-flex; }
+.d-grid { display: grid; }
+.d-block { display: block; }
+.d-none { display: none; }
+
+/* Flexbox Directions & Wraps */
+.flex-column { flex-direction: column; }
+.flex-row { flex-direction: row; }
+.flex-row-reverse { flex-direction: row-reverse; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-1 { flex: 1; }
+
+/* Alignments */
+.align-items-center { align-items: center; }
+.align-items-start { align-items: flex-start; }
+.align-items-end { align-items: flex-end; }
+.justify-content-center { justify-content: center; }
+.justify-content-between { justify-content: space-between; }
+.justify-content-start { justify-content: flex-start; }
+.justify-content-end { justify-content: flex-end; }
+
+/* Grid */
+.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
+
+/* Width & Height (Percentages) */
+.w-100 { width: 100%; }
+.h-100 { height: 100%; }
+
+/* Positioning */
+.position-relative { position: relative; }
+.position-absolute { position: absolute; }
+
+/* Text Alignment */
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+/* Fonts */
+.font-poppins { font-family: var(--cc-sf-font-family, 'Poppins', sans-serif); }
+.font-weight-400 { font-weight: 400; }
+.font-weight-500 { font-weight: 500; }
+.font-weight-600 { font-weight: 600; }
+
+.text-13 { font-size: 13px; }
+.text-14 { font-size: 14px; }
+.text-16 { font-size: 16px; }
+
+/* Colors (from variables) */
+.color-white { color: #ffffff; }
+.color-dark { color: #111827; }
+.color-gray { color: #6B7280; }
+.color-error { color: var(--cc-sf-error-text-color, #DC2626); }
+.bg-white { background-color: #ffffff; }
+.bg-transparent { background-color: transparent; }
+
+/* Margins */
+.m-0 { margin: 0; }
+.mt-4 { margin-top: 4px; }
+.mt-8 { margin-top: 8px; }
+.mt-10 { margin-top: 10px; }
+.mt-12 { margin-top: 12px; }
+.mt-16 { margin-top: 16px; }
+.mt-20 { margin-top: 20px; }
+.mt-24 { margin-top: 24px; }
+
+.mb-0 { margin-bottom: 0px; }
+.mb-4 { margin-bottom: 4px; }
+.mb-8 { margin-bottom: 8px; }
+.mb-10 { margin-bottom: 10px; }
+.mb-12 { margin-bottom: 12px; }
+.mb-16 { margin-bottom: 16px; }
+.mb-20 { margin-bottom: 20px; }
+.mb-24 { margin-bottom: 24px; }
+
+.ml-16 { margin-left: 16px; }
+.ml-20 { margin-left: 20px; }
+
+/* Paddings */
+.p-0 { padding: 0; }
+.p-16 { padding: 16px; }
+.p-20 { padding: 20px; }
+.p-24 { padding: 24px; }
+.pt-20 { padding-top: 20px; }
+.pb-10 { padding-bottom: 10px; }
+
+/* Gaps */
+.gap-4 { gap: 4px; }
+.gap-6 { gap: 6px; }
+.gap-8 { gap: 8px; }
+.gap-10 { gap: 10px; }
+.gap-12 { gap: 12px; }
+.gap-16 { gap: 16px; }
+.gap-20 { gap: 20px; }
+
+/* Border Radius */
+.rounded-4 { border-radius: 4px; }
+.rounded-6 { border-radius: 6px; }
+.rounded-8 { border-radius: 8px; }
+.rounded-10 { border-radius: 10px; }
+.rounded-12 { border-radius: 12px; }
+.rounded-20 { border-radius: 20px; }
+.rounded-24 { border-radius: 24px; }
+.rounded-50 { border-radius: 50%; }
+
+/* Utilities */
+.cursor-pointer { cursor: pointer; }
+.overflow-hidden { overflow: hidden; }
+.resize-vertical { resize: vertical; }
+.box-sizing-border { box-sizing: border-box; }
+
+/* Form Auto Extracted Utilities 2 */
+.border-none { border: none !important; }
+.mb-16px { margin-bottom: var(--cc-sf-grid-gap, 16px) !important; }
+.c-DC2626 { color: var(--cc-sf-label-required-color, #DC2626) !important; }
+.ml-0-125rem { margin-left: 0.125rem !important; }
+.fs-0-875rem { font-size: 0.875rem !important; }
+.c-111827 { color: var(--cc-sf-label-color, #111827) !important; }
+.br-7px { border-radius: var(--cc-sf-input-radius, 7px) !important; }
+.c-6B7280 { color: var(--cc-sf-hint-color, #6B7280) !important; }
+.fs-0-75rem { font-size: var(--cc-sf-error-text-size, 0.75rem) !important; }
+.b-none { background: none !important; }
+.p-32px-24px { padding: 32px 24px !important; }
+.us-none { user-select: none !important; }
+.c-1E293B { color: var(--cc-sf-label-color, #1E293B) !important; }
+.c-3B82F6 { color: var(--cc-sf-chip-selected-bg, #3B82F6) !important; }
+.fs-0-78rem { font-size: 0.78rem !important; }
+.p-10px-14px { padding: 10px 14px !important; }
+.fs-0-85rem { font-size: 0.85rem !important; }
+.fs-0-72rem { font-size: 0.72rem !important; }
+.c-94A3B8 { color: #94A3B8 !important; }
+.p-4px { padding: 4px !important; }
+.br-8px { border-radius: var(--cc-sf-input-radius, 8px) !important; }
+.bc-F3F4F6 { background-color: var(--cc-sf-input-disabled-bg, #F3F4F6) !important; }
+.br-none { border-right: none !important; }
+.bl-none { border-left: none !important; }
+.pe-none { pointer-events: none !important; }
+.fs-1-1rem { font-size: 1.1rem !important; }
+.c-9CA3AF { color: var(--cc-sf-hint-color, #9CA3AF) !important; }
+.pl-2-4rem { padding-left: 2.4rem !important; }
+.fs-0-8125rem { font-size: 0.8125rem !important; }
+.ls-none { list-style: none !important; }
+.br-12px { border-radius: var(--mu-carousel-radius, 12px) !important; }
+.b-FFFAF1 { background: var(--cc-sf-dropzone-bg, #FFFAF1) !important; }
+.fs-18px { font-size: 18px !important; }
+.b-FEF2F2 { background: var(--cc-sf-error-bg, #FEF2F2) !important; }
+
+/* Form Auto Extracted Utilities 3 */
+.bc-DC2626 { border-color: var(--cc-sf-error-border, #DC2626) !important; }
+.c-202124 { color: var(--cc-sf-label-color, #202124) !important; }
+.fs-18px { font-size: var(--cc-sf-label-size, 18px) !important; }
+.mb-0-5rem { margin-bottom: 0.5rem !important; }
+.pt-0-625rem { padding-top: var(--cc-sf-input-padding-y, 0.625rem) !important; }
+.pb-0-625rem { padding-bottom: var(--cc-sf-input-padding-y, 0.625rem) !important; }
+.pl-16px { padding-left: var(--cc-sf-input-padding-x, 16px) !important; }
+.pr-16px { padding-right: var(--cc-sf-input-padding-x, 16px) !important; }
+.bc-ffffff { background-color: var(--cc-sf-section-bg, #ffffff) !important; }
+.b-1px-solid-D1D5DB { border: 1px solid var(--cc-sf-input-border, #D1D5DB) !important; }
+.fs-0-75rem { font-size: 0.75rem !important; }
+.c-1F2937 { color: var(--cc-sf-section-label-color, #1F2937) !important; }
+.p-6px-14px { padding: var(--cc-sf-chip-padding, 6px 14px) !important; }
+.b-ffffff { background: var(--loc-suggestion-bg, #ffffff) !important; }
+.c-374151 { color: var(--cc-sf-label-color, #374151) !important; }
+.br-20px { border-radius: var(--cc-sf-chip-radius, 20px) !important; }
+.fs-0-875rem { font-size: var(--cc-sf-btn-font-size, 0.875rem) !important; }
+.bc-D1D5DB { background-color: var(--cc-sf-switch-track-off, #D1D5DB) !important; }
+.pr-2-75rem { padding-right: 2.75rem !important; }
+.p-0-25rem { padding: 0.25rem !important; }
+.p-0-625rem-0-875rem { padding: var(--cc-sf-generated-padding, 0.625rem 0.875rem) !important; }
+.b-F3F4F6 { background: var(--cc-sf-generated-bg, #F3F4F6) !important; }
+.b-1px-solid-E5E7EB { border: 1px solid var(--cc-sf-input-disabled-border, #E5E7EB) !important; }
+.br-8px { border-radius: var(--cc-sf-uploaded-item-radius, 8px) !important; }
+.c-6B7280 { color: var(--ms-desc-color, #6B7280) !important; }
+.mb-20px { margin-bottom: var(--cc-sf-section-gap, 20px) !important; }
+.br-10px { border-radius: var(--cc-sf-input-radius, 10px) !important; }
+.p-20px { padding: var(--cc-sf-section-padding, 20px) !important; }
+.fs-1rem { font-size: 1rem !important; }
+.m-0-0-16px-0 { margin: 0 0 16px 0 !important; }
+.bb-2px-solid-E5E7EB { border-bottom: var(--cc-sf-section-label-border, 2px solid #E5E7EB) !important; }
+.p-16px { padding: var(--cc-sf-instance-padding, 16px) !important; }
+.b-F9FAFB { background: var(--loc-tba-bg, #F9FAFB) !important; }
+.bb-1px-dashed-D1D5DB { border-bottom: var(--cc-sf-instance-divider, 1px dashed #D1D5DB) !important; }
+.c-4B5563 { color: var(--cc-sf-instance-num-color, #4B5563) !important; }
+.fs-0-8125rem { font-size: var(--cc-sf-hint-size, 0.8125rem) !important; }
+.pb-0 { padding-bottom: 0 !important; }
+.p-18px-24px { padding: 18px 24px !important; }
+.c-111827 { color: var(--ms-title-color, #111827) !important; }
+.bt-1px-solid-E5E7EB { border-top: 1px solid #E5E7EB !important; }
+.p-4px-10px { padding: 4px 10px !important; }
+.b-FFF5F5 { background: var(--cc-sf-btn-remove-bg, #FFF5F5) !important; }
+.c-E53E3E { color: var(--loc-delete-color, #E53E3E) !important; }
+.b-1px-solid-FED7D7 { border: var(--cc-sf-btn-remove-border, 1px solid #FED7D7) !important; }
+.br-4px { border-radius: var(--cc-sf-btn-remove-radius, 4px) !important; }
+.p-8px-16px { padding: 8px 16px !important; }
+.b-transparent { background: var(--cc-sf-btn-add-bg, transparent) !important; }
+.c-3B82F6 { color: var(--cc-sf-input-focus-border, #3B82F6) !important; }
+.b-1px-dashed-CBD5E1 { border: var(--cc-sf-btn-add-border, 1px dashed #CBD5E1) !important; }
+.br-6px { border-radius: var(--cc-sf-btn-add-radius, 6px) !important; }
+.b-1-5px-dashed-CBD5E1 { border: var(--cc-sf-dropzone-border, 1.5px dashed #CBD5E1) !important; }
+.br-12px { border-radius: var(--cc-sf-dropzone-radius, 12px) !important; }
+.bc-FFFAF1 { background-color: var(--cc-sf-dropzone-bg, #FFFAF1) !important; }
+.c-94A3B8 { color: var(--cc-sf-uploaded-remove-color, #94A3B8) !important; }
+.fs-0-9rem { font-size: var(--cc-sf-input-font-size, 0.9rem) !important; }
+.c-64748B { color: var(--cc-sf-dropzone-hint-color, #64748B) !important; }
+.b-1px-solid-E2E8F0 { border: var(--cc-sf-uploaded-item-border, 1px solid #E2E8F0) !important; }
+.b-2px-solid-E2E8F0 { border: 2px solid #E2E8F0 !important; }
+.pr-3-5rem { padding-right: 3.5rem !important; }
+.p-0-0-875rem { padding: 0 0.875rem !important; }
+.bc-FFFFFF { background-color: var(--cc-sf-input-bg, #FFFFFF) !important; }
+.b-1-5px-solid-D1D5DB { border: var(--cc-sf-input-border, 1.5px solid #D1D5DB) !important; }
+.mb-0-75rem { margin-bottom: 0.75rem !important; }
+.mt-6px { margin-top: 6px !important; }
+.pr-2-4rem { padding-right: 2.4rem !important; }
+.p-0-2rem { padding: 0.2rem !important; }
+.fs-1-35rem { font-size: 1.35rem !important; }
+.p-4px-12px { padding: 4px 12px !important; }
+.b-111827 { background: var(--cc-sf-label-color, #111827) !important; }
+.b-2px-dashed-CBD5E1 { border: 2px dashed var(--cc-sf-dropzone-border, #CBD5E1) !important; }
+.fs-52px { font-size: 52px !important; }
+.p-12px-16px { padding: 12px 16px !important; }
+.bb-1px-solid-F3F4F6 { border-bottom: 1px solid var(--cc-sf-input-disabled-border, #F3F4F6) !important; }
+.b-0F172A { background: var(--mu-carousel-bg, #0F172A) !important; }
+.b-3px-solid-rgba-255-255-255-0-15 { border: 3px solid rgba(255, 255, 255, 0.15) !important; }
+.b-rgba-255-255-255-0-85 { background: rgba(255, 255, 255, 0.85) !important; }
+.b-rgba-0-0-0-0-55 { background: rgba(0, 0, 0, 0.55) !important; }
+.b-rgba-255-255-255-0-45 { background: rgba(255, 255, 255, 0.45) !important; }
+.pb-4px { padding-bottom: 4px !important; }
+.b-2px-solid-transparent { border: 2px solid transparent !important; }
+.b-E2E8F0 { background: var(--mu-thumb-bg, #E2E8F0) !important; }
+.b-1E293B { background: #1E293B !important; }
+.c-EF4444 { color: #EF4444 !important; }
+.b-rgba-0-0-0-0-5 { background: rgba(0, 0, 0, 0.5) !important; }
+.br-16px { border-radius: var(--mu-modal-radius, 16px) !important; }
+.p-24px-28px { padding: 24px 28px !important; }
+.bb-1px-solid-E5E7EB { border-bottom: 1px solid var(--cc-sf-input-disabled-border, #E5E7EB) !important; }
+.fs-1-25rem { font-size: 1.25rem !important; }
+.p-48px-24px { padding: 48px 24px !important; }
+.b-3px-solid-E2E8F0 { border: 3px solid #E2E8F0 !important; }
+.p-16px-24px { padding: 16px 24px !important; }
+.p-28px { padding: 28px !important; }
+.b-3px-solid-transparent { border: 3px solid transparent !important; }
+.b-rgba-59-130-246-0-12 { background: rgba(59, 130, 246, 0.12) !important; }
+.p-20px-28px { padding: 20px 28px !important; }
+.c-1A56DB { color: var(--loc-add-color, #1A56DB) !important; }
+.b-1px-dashed-D1D5DB { border: 1px dashed var(--cc-sf-input-disabled-border, #D1D5DB) !important; }
+.fs-40px { font-size: 40px !important; }
+.c-9CA3AF { color: var(--loc-tba-icon-color, #9CA3AF) !important; }