@axinom/mosaic-ui 0.32.0-rc.9 → 0.33.0-rc.0

package/src/initialize.ts

@@ -1,18 +1,46 @@
-import { ShowNotification } from './types/ui-config';
+import {
+  AddIndicator,
+  CustomEventEmitter,
+  RemoveIndicator,
+  ShowNotification,
+} from './types/ui-config';
 
 export let showNotification: ShowNotification | (() => void) =
   polyfill('showNotification');
 
+export let addIndicator: AddIndicator | (() => void) = polyfill('addIndicator');
+
+export let removeIndicator: RemoveIndicator | (() => void) =
+  polyfill('removeIndicator');
+
+export let on: CustomEventEmitter['on'] | (() => void) = polyfill('on');
+
+export let showSaveIndicator: () => void = polyfill('showSaveIndicator');
+
+export let hideSaveIndicator: () => void = polyfill('hideSaveIndicator');
+
 /**
  * Passes the PiralApi methods to the UI library.
  * @param app {UiConfig} object containing PiralApi methods for use in UI library.
  */
 export function initializeUi(app: UiConfig): void {
-  ({ showNotification } = app);
+  ({
+    showNotification,
+    addIndicator,
+    removeIndicator,
+    on,
+    showSaveIndicator,
+    hideSaveIndicator,
+  } = app);
 }
 
 export interface UiConfig {
   showNotification: ShowNotification;
+  addIndicator: AddIndicator;
+  removeIndicator: RemoveIndicator;
+  on: CustomEventEmitter['on'];
+  showSaveIndicator: () => void;
+  hideSaveIndicator: () => void;
 }
 
 function polyfill(methodName: string): () => void {

package/src/styles/variables.scss

@@ -71,6 +71,8 @@ $filter-font-size: 16px;
 $filter-width: 360px;
 $filter-controller-background-color: $light-gray-2;
 $filter-border-color: $blue;
+$multi-option-checbox-border: $blue;
+$multi-option-label-color: $dark-gray;
 
 /* Details vars */
 $details-background-color: #ffffff;
@@ -195,6 +197,7 @@ $date-picker-max-width: $width-small;
 $form-element-min-height: 50px;
 $read-only-text-background-color: $light-gray-2;
 $select-background-color: white;
+$form-indicator-color: $green;
 
 /* Dynamic Data List */
 $dynamic-list-row-bg-color: white;

package/src/types/ui-config.ts

@@ -28,3 +28,18 @@ export type NotificationId = string | number;
 export type NotificationBody = string | ReactNode | Component;
 
 export type NotificationType = 'success' | 'error' | 'info' | 'warning';
+
+export type IndicatorId = number;
+
+export type AddIndicator = (content: React.ReactNode) => IndicatorId;
+
+export type RemoveIndicator = (id: IndicatorId) => void;
+
+export type UpdateIndicator = (
+  id: IndicatorId,
+  content: React.ReactNode,
+) => void;
+
+export interface CustomEventEmitter {
+  on(eventName: string, listener: (...args: unknown[]) => void): void;
+}