@futdevpro/fsm-dynamo 1.16.38 → 1.16.40

package/src/_modules/ngx-models/_models/control-models/button-params.control-model.ts

@@ -1,332 +1,332 @@
-
-import { DyFM_Array } from '../../../..';
-import { DyFM_Button_Type } from '../../_enums/button-type.enum';
-import { DyFM_MaterialColor } from '../../_enums/material-color.enum';
-import { DyFM_MaterialTooltipPosition } from '../../_enums/material-tooltip-position.enum';
-
-const defaultDescriptionPosition = DyFM_MaterialTooltipPosition.above;
-const defaultDescriptionDelay = 250;
-
-/* export interface DyFM_Button_Settings {
-
-} */
-
-export type DyFM_Button_Settings = Partial<DyFM_Button_Params>;
-
-/* type eventType = (mouseEvent?: MouseEvent) => void; */
-export type D_Button_P = DyFM_Button_Params;
-export type D_Button_Params = DyFM_Button_Params;
-
-/**
- * Runtime configuration for a button instance.
- * Handles style, behaviour and routing options.
- *
- * @example
- * ```ts
- * const btn = new DyFM_Button_Params({ label: 'Save' });
- * ```
- * 
- * @deprecated use DyFM_ButtonNew_Params instead
- */
-export class DyFM_Button_Params {
-  id?: string;
-  label?: string;
-  color?: DyFM_MaterialColor | string = DyFM_MaterialColor.primary;
-  /** https://fonts.google.com/icons */
-  icon?: string;
-  description?: string;
-  descriptionPosition?: DyFM_MaterialTooltipPosition;
-  descriptionDelay?: number;
-  type?: DyFM_Button_Type;
-  disabled?: boolean;
-  dontRoute?: boolean;
-  routerLink?: string;
-  routerLinkQueryParams?: any;
-  iconAfter?: boolean;
-  buttonType?: string;
-
-  // runtime values
-  class?: string;
-  contentClass?: string;
-  classOnActive?: string;
-  contentClassOnActive?: string;
-
-  // setting values
-  customClass?: string;
-  customContentClass?: string;
-  customClassOnActive?: string;
-  customContentClassOnActive?: string;
-
-  /* events?: eventType[] = []; */
-  /* onClick?: (mouseEvent?: MouseEvent) => Promise<void> | void; */
-  onClickEvents?: ((mouseEvent?: MouseEvent) => Promise<void> | void)[] = [];
-  useDisablerWhileEventsInProgress?: boolean;
-  
-  constructor(
-    set?: Partial<DyFM_Button_Settings>
-  ) {
-    if (set) {
-      Object.assign(this, set);
-    }
-
-    if (!this.type) {
-      if (this.icon && !this.label) {
-        this.type = DyFM_Button_Type.icon;
-      } else {
-        this.type = DyFM_Button_Type.default;
-      }
-    }
-
-    if (!this.id) {
-      this.id = `${this.label}-${this.type}-${this.color}-button`;
-    }
-
-    if (this.description || (this.type.includes('icon') && this.label)) {
-      if (!this.descriptionPosition) {
-        this.descriptionPosition = defaultDescriptionPosition;
-      }
-
-      if (!this.descriptionDelay) {
-        this.descriptionDelay = defaultDescriptionDelay;
-      }
-    }
-
-    this.class = getDefaultButtonClasses(
-      this.type, 
-      this.color,
-    ) + (this.customClass ?? '');
-
-    this.contentClass = getCustomContentClasses(
-      this.type,
-      this.customContentClass
-    ) + (this.customContentClass ?? '');
-
-    if (this.customClassOnActive || this.routerLink) {
-      this.classOnActive = getDefaultOnActiveButtonClasses(
-        this.type, 
-        this.color,
-      ) + (this.customClassOnActive ?? '');
-
-      this.contentClassOnActive = this.customContentClassOnActive ?? '';
-    }
-  }
-
-  async executeEvents(mouseEvent: MouseEvent): Promise<void> {
-    await DyFM_Array.asyncForEach(
-      this.onClickEvents,
-      async (event: (mouseEvent?: MouseEvent) => Promise<void> | void) => {
-        await event(mouseEvent);
-      }
-    );
-  }
-}
-
-function getDefaultButtonClasses(
-  type: DyFM_Button_Type, 
-  color: DyFM_MaterialColor | string,
-  dark: boolean = true
-): string {
-  let classes = '';
-
-  if (dark) {
-    classes += 'disabled:bg-neutral-800 ';
-    classes += 'disabled:hover:bg-neutral-600 ';
-    classes += 'disabled:text-neutral-600 ';
-    classes += 'disabled:hover:text-neutral-900 ';
-  } else {
-    classes += 'disabled:bg-neutral-200 ';
-    classes += 'disabled:hover:bg-neutral-400 ';
-    classes += 'disabled:text-neutral-400 ';
-    classes += 'disabled:hover:text-neutral-100 ';
-  }
-
-  classes += 'disabled:cursor-not-allowed ';
-
-  switch (type) {
-    case DyFM_Button_Type.default:
-    case DyFM_Button_Type.stroked:
-      classes += 'rounded-xl ';
-      break;
-
-    case DyFM_Button_Type.small:
-    case DyFM_Button_Type.smallStroked:
-      classes += 'rounded-md ';
-      break;
-
-    case DyFM_Button_Type.big:
-    case DyFM_Button_Type.bigStroked:
-      classes += 'rounded-2xl ';
-      break;
-  }
-
-  if (type.includes('stroked')) {
-    if (type.includes('big')) {
-      classes += 'border-4 ';
-    } else {
-      classes += 'border-2 ';
-    }
-
-    classes += `border-${color}-500 `;
-    classes += `text-${color}-500 `;
-    /* classes += `hover:text-${color}C-500 `; */
-
-    if (dark) {
-      classes += `hover:bg-${color}-950 `;
-      classes += `disabled:border-neutral-600 `;
-    } else {
-      classes += `hover:bg-${color}-50 `;
-      classes += `disabled:border-neutral-400 `;
-    }
-  } else {
-    classes += `bg-${color}-500 `;
-    classes += `text-${color}C-500 `;
-
-    if (dark) {
-      classes += `hover:bg-${color}-300 `;
-      classes += `hover:text-${color}C-300 `;
-    } else {
-      classes += `hover:bg-${color}-700 `;
-      classes += `hover:text-${color}C-700 `;
-    }
-  }
-
-  if (type.includes('round')) {
-    classes += 'rounded-full ';
-  }
-
-  if (type.includes('icon')) {
-    classes += 'rounded-full ';
-  } else {
-    classes += 'w-full ';
-  }
-
-  if (type.includes('outstanding')) {
-    classes += 'outstanding ';
-
-    if (!classes.includes('rounded-full')) {
-      classes += 'rounded-full ';
-    }
-  }
-
-  return classes;
-}
-
-function getDefaultOnActiveButtonClasses(
-  type: DyFM_Button_Type, 
-  color: DyFM_MaterialColor | string,
-  dark: boolean = true
-): string {
-  let classes = ' ';
-
-  if (type.includes('stroked')) {
-    if (dark) {
-      classes += `bg-${color}-950 `;
-    } else {
-      classes += `bg-${color}-50 `;
-    }
-  } else {
-    if (dark) {
-      classes += `bg-${color}-300 `;
-      classes += `text-${color}C-300 `;
-    } else {
-      classes += `bg-${color}-700 `;
-      classes += `text-${color}C-700 `;
-    }
-  }
-
-  return classes;
-}
-
-function getCustomContentClasses(
-  type: DyFM_Button_Type, 
-  customClass?: string
-): string {
-  let classes = 'flex ';
-
-  if (!customClass?.includes('items-')) {
-    classes += 'items-center ';
-  }
-
-  if (!customClass?.includes('justify-')) {
-    classes += 'justify-center ';
-  }
-
-  if (!type.includes('icon')) {
-    if (type.includes('big')) {
-      classes += 'text-2xl ';
-    } else {
-      classes += 'text-md ';
-    }
-  }
-
-  if (!type.includes('icon')) {
-    if (type.includes('small')) {
-      classes += 'mx-2 ';
-    } else {
-      classes += 'mx-5 ';
-    }
-  }
-
-  switch (type) {
-    case DyFM_Button_Type.default:
-    case DyFM_Button_Type.block:
-      classes += 'my-3 ';
-      break;
-
-    case DyFM_Button_Type.stroked:
-    case DyFM_Button_Type.strokedBlock:
-      classes += 'my-2.5 ';
-      break;
-
-    case DyFM_Button_Type.big:
-    case DyFM_Button_Type.bigBlock:
-    case DyFM_Button_Type.bigStroked:
-    case DyFM_Button_Type.bigStrokedBlock:
-      classes += 'my-3 ';
-      break;
-
-    case DyFM_Button_Type.round:
-      classes += 'my-3 ';
-      break;
-
-    case DyFM_Button_Type.strokedRound:
-      classes += 'my-2.5 ';
-      break;
-
-    case DyFM_Button_Type.outstanding:
-      classes += 'my-3 ';
-      break;
-
-    case DyFM_Button_Type.icon:
-      classes += 'p-2 ';
-      classes += 'text-2xl ';
-      break;
-
-    case DyFM_Button_Type.iconStroked:
-      classes += 'p-1.5 ';
-      classes += 'text-2xl ';
-      break;
-
-    case DyFM_Button_Type.iconSmall:
-    case DyFM_Button_Type.iconSmallStroked:
-      classes += 'p-1 ';
-      classes += 'text-lg ';
-      break;
-
-    case DyFM_Button_Type.iconBig:
-      classes += 'p-4 ';
-      classes += 'text-4xl ';
-      break;
-
-    case DyFM_Button_Type.iconBigStroked:
-      classes += 'p-3 ';
-      classes += 'text-4xl ';
-      break;
-
-    case DyFM_Button_Type.iconOutstanding:
-      classes += 'p-2.5 ';
-      break;
-  }
-
-  return classes;
-}
+
+import { DyFM_Array } from '../../../..';
+import { DyFM_Button_Type } from '../../_enums/button-type.enum';
+import { DyFM_MaterialColor } from '../../_enums/material-color.enum';
+import { DyFM_MaterialTooltipPosition } from '../../_enums/material-tooltip-position.enum';
+
+const defaultDescriptionPosition = DyFM_MaterialTooltipPosition.above;
+const defaultDescriptionDelay = 250;
+
+/* export interface DyFM_Button_Settings {
+
+} */
+
+export type DyFM_Button_Settings = Partial<DyFM_Button_Params>;
+
+/* type eventType = (mouseEvent?: MouseEvent) => void; */
+export type D_Button_P = DyFM_Button_Params;
+export type D_Button_Params = DyFM_Button_Params;
+
+/**
+ * Runtime configuration for a button instance.
+ * Handles style, behaviour and routing options.
+ *
+ * @example
+ * ```ts
+ * const btn = new DyFM_Button_Params({ label: 'Save' });
+ * ```
+ * 
+ * @deprecated use DyFM_ButtonNew_Params instead
+ */
+export class DyFM_Button_Params {
+  id?: string;
+  label?: string;
+  color?: DyFM_MaterialColor | string = DyFM_MaterialColor.primary;
+  /** https://fonts.google.com/icons */
+  icon?: string;
+  description?: string;
+  descriptionPosition?: DyFM_MaterialTooltipPosition;
+  descriptionDelay?: number;
+  type?: DyFM_Button_Type;
+  disabled?: boolean;
+  dontRoute?: boolean;
+  routerLink?: string;
+  routerLinkQueryParams?: any;
+  iconAfter?: boolean;
+  buttonType?: string;
+
+  // runtime values
+  class?: string;
+  contentClass?: string;
+  classOnActive?: string;
+  contentClassOnActive?: string;
+
+  // setting values
+  customClass?: string;
+  customContentClass?: string;
+  customClassOnActive?: string;
+  customContentClassOnActive?: string;
+
+  /* events?: eventType[] = []; */
+  /* onClick?: (mouseEvent?: MouseEvent) => Promise<void> | void; */
+  onClickEvents?: ((mouseEvent?: MouseEvent) => Promise<void> | void)[] = [];
+  useDisablerWhileEventsInProgress?: boolean;
+  
+  constructor(
+    set?: Partial<DyFM_Button_Settings>
+  ) {
+    if (set) {
+      Object.assign(this, set);
+    }
+
+    if (!this.type) {
+      if (this.icon && !this.label) {
+        this.type = DyFM_Button_Type.icon;
+      } else {
+        this.type = DyFM_Button_Type.default;
+      }
+    }
+
+    if (!this.id) {
+      this.id = `${this.label}-${this.type}-${this.color}-button`;
+    }
+
+    if (this.description || (this.type.includes('icon') && this.label)) {
+      if (!this.descriptionPosition) {
+        this.descriptionPosition = defaultDescriptionPosition;
+      }
+
+      if (!this.descriptionDelay) {
+        this.descriptionDelay = defaultDescriptionDelay;
+      }
+    }
+
+    this.class = getDefaultButtonClasses(
+      this.type, 
+      this.color,
+    ) + (this.customClass ?? '');
+
+    this.contentClass = getCustomContentClasses(
+      this.type,
+      this.customContentClass
+    ) + (this.customContentClass ?? '');
+
+    if (this.customClassOnActive || this.routerLink) {
+      this.classOnActive = getDefaultOnActiveButtonClasses(
+        this.type, 
+        this.color,
+      ) + (this.customClassOnActive ?? '');
+
+      this.contentClassOnActive = this.customContentClassOnActive ?? '';
+    }
+  }
+
+  async executeEvents(mouseEvent: MouseEvent): Promise<void> {
+    await DyFM_Array.asyncForEach(
+      this.onClickEvents,
+      async (event: (mouseEvent?: MouseEvent) => Promise<void> | void) => {
+        await event(mouseEvent);
+      }
+    );
+  }
+}
+
+function getDefaultButtonClasses(
+  type: DyFM_Button_Type, 
+  color: DyFM_MaterialColor | string,
+  dark: boolean = true
+): string {
+  let classes = '';
+
+  if (dark) {
+    classes += 'disabled:bg-neutral-800 ';
+    classes += 'disabled:hover:bg-neutral-600 ';
+    classes += 'disabled:text-neutral-600 ';
+    classes += 'disabled:hover:text-neutral-900 ';
+  } else {
+    classes += 'disabled:bg-neutral-200 ';
+    classes += 'disabled:hover:bg-neutral-400 ';
+    classes += 'disabled:text-neutral-400 ';
+    classes += 'disabled:hover:text-neutral-100 ';
+  }
+
+  classes += 'disabled:cursor-not-allowed ';
+
+  switch (type) {
+    case DyFM_Button_Type.default:
+    case DyFM_Button_Type.stroked:
+      classes += 'rounded-xl ';
+      break;
+
+    case DyFM_Button_Type.small:
+    case DyFM_Button_Type.smallStroked:
+      classes += 'rounded-md ';
+      break;
+
+    case DyFM_Button_Type.big:
+    case DyFM_Button_Type.bigStroked:
+      classes += 'rounded-2xl ';
+      break;
+  }
+
+  if (type.includes('stroked')) {
+    if (type.includes('big')) {
+      classes += 'border-4 ';
+    } else {
+      classes += 'border-2 ';
+    }
+
+    classes += `border-${color}-500 `;
+    classes += `text-${color}-500 `;
+    /* classes += `hover:text-${color}C-500 `; */
+
+    if (dark) {
+      classes += `hover:bg-${color}-950 `;
+      classes += `disabled:border-neutral-600 `;
+    } else {
+      classes += `hover:bg-${color}-50 `;
+      classes += `disabled:border-neutral-400 `;
+    }
+  } else {
+    classes += `bg-${color}-500 `;
+    classes += `text-${color}C-500 `;
+
+    if (dark) {
+      classes += `hover:bg-${color}-300 `;
+      classes += `hover:text-${color}C-300 `;
+    } else {
+      classes += `hover:bg-${color}-700 `;
+      classes += `hover:text-${color}C-700 `;
+    }
+  }
+
+  if (type.includes('round')) {
+    classes += 'rounded-full ';
+  }
+
+  if (type.includes('icon')) {
+    classes += 'rounded-full ';
+  } else {
+    classes += 'w-full ';
+  }
+
+  if (type.includes('outstanding')) {
+    classes += 'outstanding ';
+
+    if (!classes.includes('rounded-full')) {
+      classes += 'rounded-full ';
+    }
+  }
+
+  return classes;
+}
+
+function getDefaultOnActiveButtonClasses(
+  type: DyFM_Button_Type, 
+  color: DyFM_MaterialColor | string,
+  dark: boolean = true
+): string {
+  let classes = ' ';
+
+  if (type.includes('stroked')) {
+    if (dark) {
+      classes += `bg-${color}-950 `;
+    } else {
+      classes += `bg-${color}-50 `;
+    }
+  } else {
+    if (dark) {
+      classes += `bg-${color}-300 `;
+      classes += `text-${color}C-300 `;
+    } else {
+      classes += `bg-${color}-700 `;
+      classes += `text-${color}C-700 `;
+    }
+  }
+
+  return classes;
+}
+
+function getCustomContentClasses(
+  type: DyFM_Button_Type, 
+  customClass?: string
+): string {
+  let classes = 'flex ';
+
+  if (!customClass?.includes('items-')) {
+    classes += 'items-center ';
+  }
+
+  if (!customClass?.includes('justify-')) {
+    classes += 'justify-center ';
+  }
+
+  if (!type.includes('icon')) {
+    if (type.includes('big')) {
+      classes += 'text-2xl ';
+    } else {
+      classes += 'text-md ';
+    }
+  }
+
+  if (!type.includes('icon')) {
+    if (type.includes('small')) {
+      classes += 'mx-2 ';
+    } else {
+      classes += 'mx-5 ';
+    }
+  }
+
+  switch (type) {
+    case DyFM_Button_Type.default:
+    case DyFM_Button_Type.block:
+      classes += 'my-3 ';
+      break;
+
+    case DyFM_Button_Type.stroked:
+    case DyFM_Button_Type.strokedBlock:
+      classes += 'my-2.5 ';
+      break;
+
+    case DyFM_Button_Type.big:
+    case DyFM_Button_Type.bigBlock:
+    case DyFM_Button_Type.bigStroked:
+    case DyFM_Button_Type.bigStrokedBlock:
+      classes += 'my-3 ';
+      break;
+
+    case DyFM_Button_Type.round:
+      classes += 'my-3 ';
+      break;
+
+    case DyFM_Button_Type.strokedRound:
+      classes += 'my-2.5 ';
+      break;
+
+    case DyFM_Button_Type.outstanding:
+      classes += 'my-3 ';
+      break;
+
+    case DyFM_Button_Type.icon:
+      classes += 'p-2 ';
+      classes += 'text-2xl ';
+      break;
+
+    case DyFM_Button_Type.iconStroked:
+      classes += 'p-1.5 ';
+      classes += 'text-2xl ';
+      break;
+
+    case DyFM_Button_Type.iconSmall:
+    case DyFM_Button_Type.iconSmallStroked:
+      classes += 'p-1 ';
+      classes += 'text-lg ';
+      break;
+
+    case DyFM_Button_Type.iconBig:
+      classes += 'p-4 ';
+      classes += 'text-4xl ';
+      break;
+
+    case DyFM_Button_Type.iconBigStroked:
+      classes += 'p-3 ';
+      classes += 'text-4xl ';
+      break;
+
+    case DyFM_Button_Type.iconOutstanding:
+      classes += 'p-2.5 ';
+      break;
+  }
+
+  return classes;
+}