@ganpatiinfo/gids-web-dom-reference 3.1.0 → 5.0.0

package/src/components/GidsStepper/GidsStepper.ts

@@ -0,0 +1,94 @@
+import {
+  GidsStepperCommonUtils,
+  type StepClickProps,
+  type GidsStepperCommonProps,
+} from '@ganpatiinfo/gids-core-shared';
+import { GidsStepperWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { GidsButtonDom } from '../GidsButton/GidsButton.js';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+
+const { isStepperMinusDisabled } = GidsStepperCommonUtils;
+const { getGidsStepperClassNames } = GidsStepperWebUtils;
+
+export interface GidsStepperDomProps extends GidsStepperCommonProps {
+  extraClasses?: string;
+  onClickMinus?: (params: StepClickProps) => void;
+  onClickPlus?: (params: StepClickProps) => void;
+}
+
+export const GidsStepperDom = ({
+  disabled,
+  extraClasses,
+  onClickMinus,
+  onClickPlus,
+}: GidsStepperDomProps): HTMLDivElement => {
+  // 1. Maintain internal state within the closure
+  let currentValue = 0;
+
+  const stepper = document.createElement('div');
+  stepper.className = getGidsStepperClassNames(extraClasses);
+
+  // 2. Create the display label
+  const label = document.createElement('label');
+  label.className = `gids-stepper__label ${disabled ? 'gids-stepper__label-disabled' : ''}`;
+
+  // Helper to update the text content
+  const updateLabel = () => {
+    label.textContent = `${currentValue}`;
+  };
+  updateLabel();
+
+  // 3. Create the buttons
+  const minusButton = GidsButtonDom({
+    leadingIcon: GidsIconDom({
+      name: 'minus',
+      size: 'md',
+      appearance: 'regular',
+    }),
+    disabled: disabled || isStepperMinusDisabled({ stepText: currentValue }),
+    size: 'sm',
+    width: 'intrinsic',
+    appearance: 'default',
+    onClick: () => {
+      if (disabled) return;
+      currentValue -= 1;
+      updateLabel();
+
+      // Re-evaluate the disabled state of the minus button dynamically
+      const isMinusDisabled =
+        disabled || isStepperMinusDisabled({ stepText: currentValue });
+      minusButton.toggleAttribute('disabled', isMinusDisabled);
+
+      onClickMinus?.({ stepText: currentValue });
+    },
+  });
+
+  const plusButton = GidsButtonDom({
+    leadingIcon: GidsIconDom({
+      name: 'plus',
+      size: 'md',
+      appearance: 'regular',
+    }),
+    disabled: disabled,
+    size: 'sm',
+    width: 'intrinsic',
+    appearance: 'default',
+    onClick: () => {
+      if (disabled) return;
+      currentValue += 1;
+      updateLabel();
+
+      // Ensure the minus button is un-disabled if it was previously locked
+      const isMinusDisabled =
+        disabled || isStepperMinusDisabled({ stepText: currentValue });
+      minusButton.toggleAttribute('disabled', isMinusDisabled);
+
+      onClickPlus?.({ stepText: currentValue });
+    },
+  });
+
+  // 4. Assemble the DOM
+  stepper.append(minusButton, label, plusButton);
+
+  return stepper;
+};

package/src/components/GidsStrengthMeter/GidsStrengthMeter.ts

@@ -0,0 +1,78 @@
+import {
+  type GidsStrengthMeterCommonProps,
+  GidsStrengthMeterCommonUtils,
+} from '@ganpatiinfo/gids-core-shared';
+import { GidsStrengthMeterWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren } from '../../utils/domUtils.js';
+import { minLengthRuleCanBeApplied } from '@ganpatiinfo/gids-core-shared/dist/components/GidsRequirementsMeter/GidsRequirementsMeterCommonUtils.js';
+
+const { getGidsStrengthMeterClassNames } = GidsStrengthMeterWebUtils;
+const { getStrengthMeterScore, getColorModifierByScore } =
+  GidsStrengthMeterCommonUtils;
+
+export interface GidsStrengthMeterDomProps extends GidsStrengthMeterCommonProps {
+  extraClasses?: string;
+}
+
+export const GidsStrengthMeterDom = ({
+  text,
+  textMinLength,
+  meterRules = [
+    '1-uppercase',
+    '1-lowercase',
+    '1-digit',
+    '1-special-character',
+    'include-min-length',
+  ],
+  extraClasses,
+}: GidsStrengthMeterDomProps): HTMLDivElement => {
+  const strengthContainer = document.createElement('div');
+  strengthContainer.className = getGidsStrengthMeterClassNames(extraClasses);
+
+  const textScore = getStrengthMeterScore({
+    text,
+    textMinLength,
+    meterRules,
+  });
+
+  const maxScore = meterRules.length;
+  const colorModifier = getColorModifierByScore({ textScore, maxScore });
+
+  const renderStrengthLine = (
+    strengthLine: HTMLDivElement,
+    isActive: boolean,
+    index: number,
+  ) => {
+    // Class construction using the dynamic color modifier for active segments
+    strengthLine.className = [
+      `gids-strength-meter__strength-${index}`,
+      isActive ? 'is-active' : '',
+      isActive ? colorModifier : '',
+    ]
+      .filter(Boolean)
+      .join(' ');
+  };
+
+  for (let i = 1; i <= maxScore; i++) {
+    const strengthLine = document.createElement('div');
+
+    const isActive = i <= textScore;
+
+    if (meterRules[i - 1] === 'include-min-length') {
+      if (
+        minLengthRuleCanBeApplied({
+          requirementRule: 'include-min-length',
+          textMinLength,
+        })
+      ) {
+        renderStrengthLine(strengthLine, isActive, i);
+      }
+    } else {
+      renderStrengthLine(strengthLine, isActive, i);
+    }
+
+    appendAsChildren(strengthContainer, strengthLine);
+  }
+
+  return strengthContainer;
+};

package/src/components/GidsTextField/GidsTextField.ts

@@ -0,0 +1,59 @@
+import { type GidsTextFieldWebProps } from '@ganpatiinfo/gids-web-shared';
+import { assignToSlot } from '../../utils/domUtils.js';
+import { type HtmlInputAttributes } from '../GidsInput/GidsInput.js';
+
+export interface GidsTextFieldDomProps extends GidsTextFieldWebProps<
+  Element,
+  HtmlInputAttributes
+> {
+  info?: Element;
+  className?: string;
+  onGidsTextFieldClear?: (event: CustomEvent<void>) => void;
+  onChange?: (event: Event) => void;
+  onInput?: (event: InputEvent) => void;
+  onFocus?: (event: FocusEvent) => void;
+  onBlur?: (event: FocusEvent) => void;
+}
+
+export const GidsTextFieldDom = (props: GidsTextFieldDomProps): HTMLElement => {
+  const {
+    info,
+    leadingIcon,
+    trailingIcon,
+    onGidsTextFieldClear,
+    onChange,
+    onInput,
+    onFocus,
+    onBlur,
+    ...restProps
+  } = props;
+
+  const textFieldComponent = document.createElement('gids-text-field');
+  Object.assign(textFieldComponent, restProps);
+
+  assignToSlot(textFieldComponent, 'info', info);
+  assignToSlot(textFieldComponent, 'leadingIcon', leadingIcon);
+  assignToSlot(textFieldComponent, 'trailingIcon', trailingIcon);
+
+  if (onChange) {
+    textFieldComponent.addEventListener('change', onChange);
+  }
+  if (onInput) {
+    textFieldComponent.addEventListener('input', onInput as (e: Event) => void);
+  }
+  if (onFocus) {
+    textFieldComponent.addEventListener('focus', onFocus);
+  }
+  if (onBlur) {
+    textFieldComponent.addEventListener('blur', onBlur);
+  }
+  if (onGidsTextFieldClear) {
+    // @ts-expect-error This is a custom event so ts complaining
+    textFieldComponent.addEventListener(
+      'gidsTextFieldClear',
+      onGidsTextFieldClear,
+    );
+  }
+
+  return textFieldComponent;
+};

package/src/components/GidsTopNavigation/GidsTopNavigation.ts

@@ -0,0 +1,124 @@
+import {
+  type GidsTopNavigationWebProps,
+  GidsTopNavigationWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+  appendAsChildren,
+  DomChildren,
+  DomNodeOrString,
+} from '../../utils/domUtils.js';
+import {
+  GidsSearchBarDom,
+  GidsSearchBarDomProps,
+} from '../GidsSearchBar/GidsSearchBar.js';
+import {
+  GidsSegmentedControlDom,
+  GidsSegmentedControlDomProps,
+} from '../GidsSegmentedControl/GidsSegmentedControl.js';
+import { GidsLogoDom } from '../GidsLogo/GidsLogo.js';
+
+const { getGidsTopNavigationClassNames } = GidsTopNavigationWebUtils;
+
+export interface GidsTopNavigationDomProps
+  extends
+    GidsTopNavigationWebProps<
+      DomChildren,
+      DomChildren,
+      DomChildren,
+      DomNodeOrString,
+      string,
+      string,
+      string,
+      DomChildren
+    >,
+    Pick<GidsSearchBarDomProps, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'>,
+    Pick<GidsSegmentedControlDomProps, 'onPress'> {
+  extraClasses?: string;
+}
+
+export const GidsTopNavigationDom = (
+  props: GidsTopNavigationDomProps,
+): HTMLElement => {
+  const {
+    isDefaultLeftContentRender = true,
+    isDefaultMiddleContentRender = true,
+    isDefaultRightContentRender = true,
+    leftContent,
+    middleContent,
+    rightContent,
+    src,
+    imgHeight = '100',
+    href,
+    clickable,
+    onPress,
+    width,
+    tabItems = [],
+    extraClasses,
+    ...rest
+  } = props;
+
+  const topNavigation = document.createElement('nav');
+  topNavigation.className = getGidsTopNavigationClassNames(extraClasses);
+
+  const leftContentContainer = document.createElement('div');
+  leftContentContainer.className = 'gids-top-navigation__left-content';
+
+  if (leftContent || isDefaultLeftContentRender) {
+    if (leftContent) {
+      appendAsChildren(leftContentContainer, leftContent);
+    }
+    if (isDefaultLeftContentRender) {
+      leftContentContainer.append(
+        GidsLogoDom({
+          src: src,
+          imgHeight: imgHeight,
+          alt: 'logo-img',
+          href: href && href !== '' ? href : '/',
+          clickable,
+        }),
+      );
+    }
+    topNavigation.appendChild(leftContentContainer);
+  }
+
+  const middleContentContainer = document.createElement('div');
+  middleContentContainer.className = 'gids-top-navigation__middle-content';
+
+  if (middleContent || isDefaultMiddleContentRender) {
+    if (middleContent) {
+      appendAsChildren(middleContentContainer, middleContent);
+    }
+    if (isDefaultMiddleContentRender) {
+      middleContentContainer.append(
+        GidsSearchBarDom({
+          type: 'default',
+          appearance: 'default',
+          status: 'default',
+          ...rest,
+        }),
+      );
+    }
+    topNavigation.appendChild(middleContentContainer);
+  }
+
+  const rightContentContainer = document.createElement('div');
+  rightContentContainer.className = 'gids-top-navigation__right-content';
+
+  if (rightContent || isDefaultRightContentRender) {
+    if (rightContent) {
+      appendAsChildren(rightContentContainer, rightContent);
+    }
+    if (isDefaultRightContentRender) {
+      rightContentContainer.append(
+        GidsSegmentedControlDom({
+          width: width ? width : 'intrinsic',
+          tabItems: tabItems,
+          onPress,
+        }),
+      );
+    }
+    topNavigation.appendChild(rightContentContainer);
+  }
+
+  return topNavigation;
+};

package/src/components/_GidsNotificationContainer/GidsNotificationContainer.ts

@@ -0,0 +1,125 @@
+import { GidsNotificationContainerCommonProps } from '@ganpatiinfo/gids-core-shared';
+import {
+  ClassValue,
+  GidsNotificationContainerWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { type DomNodeOrString } from '../../utils/domUtils.js';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+import { IconName } from '@ganpatiinfo/gids-web-theme-interface';
+import { GidsButtonDom } from '../GidsButton/GidsButton.js';
+
+const {
+  getGidsNotificationContainerClassNames,
+  getNotificationContainerIconNames,
+} = GidsNotificationContainerWebUtils;
+
+export interface GidsNotificationContainerDomProps extends GidsNotificationContainerCommonProps<
+  DomNodeOrString,
+  DomNodeOrString
+> {
+  extraClasses?: ClassValue;
+  onCloseNotificationClick?: (this: HTMLButtonElement, event: Event) => void;
+}
+
+export const GidsNotificationContainerDom = (
+  props: GidsNotificationContainerDomProps,
+): HTMLDivElement => {
+  const {
+    notificationTitle,
+    children,
+    button,
+    appearance = 'default',
+    pronunciation = 'standard',
+    onCloseNotificationClick,
+    extraClasses,
+  } = props;
+
+  const notificationContainer = document.createElement('div');
+  notificationContainer.className = getGidsNotificationContainerClassNames(
+    { appearance },
+    extraClasses,
+  );
+
+  const iconWrapper = document.createElement('div');
+  iconWrapper.className = 'gids-notification-container__leading-icon-wrapper';
+  const iconName = getNotificationContainerIconNames<IconName>(appearance);
+  if (appearance !== 'default' && iconName) {
+    iconWrapper.appendChild(
+      GidsIconDom({
+        size: 'md',
+        name: iconName,
+        alt: '',
+        appearance: 'filled',
+      }),
+    );
+    notificationContainer.appendChild(iconWrapper);
+  }
+
+  const notificationContentWrapper = document.createElement('div');
+  notificationContentWrapper.className =
+    'gids-notification-container__content-wrapper';
+
+  const notificationTopContent = document.createElement('div');
+  notificationTopContent.className = 'gids-notification-container__top-content';
+
+  const notificationTextContent = document.createElement('div');
+  notificationTextContent.className =
+    'gids-notification-container__text-content';
+
+  if (notificationTitle && notificationTitle !== '') {
+    const notificationTitleEl = document.createElement('span');
+    notificationTitleEl.className = 'gids-notification-container__title';
+    notificationTitleEl.textContent = notificationTitle;
+
+    notificationTextContent.appendChild(notificationTitleEl);
+  }
+
+  if (children) {
+    if (typeof children === 'string') {
+      const textEl = document.createElement('p');
+      textEl.textContent = children;
+
+      notificationTextContent.appendChild(textEl);
+    } else {
+      notificationTextContent.appendChild(children);
+    }
+  }
+
+  notificationTopContent.appendChild(notificationTextContent);
+
+  const crossBtnWrapper = document.createElement('div');
+  crossBtnWrapper.className = 'gids-notification-container__cross-btn-wrapper';
+
+  if (pronunciation === 'standard') {
+    crossBtnWrapper.appendChild(
+      GidsButtonDom({
+        appearance: 'subtle',
+        size: 'sm',
+        width: 'intrinsic',
+        leadingIcon: GidsIconDom({
+          name: 'cross',
+          size: 'md',
+          appearance: 'regular',
+        }),
+        onClick: onCloseNotificationClick,
+      }),
+    );
+    notificationTopContent.appendChild(crossBtnWrapper);
+  }
+
+  notificationContentWrapper.appendChild(notificationTopContent);
+
+  if (button) {
+    const notificationBottomContent = document.createElement('div');
+    notificationBottomContent.className =
+      'gids-notification-container__bottom-content';
+
+    notificationBottomContent.append(button);
+
+    notificationContentWrapper.appendChild(notificationBottomContent);
+  }
+
+  notificationContainer.appendChild(notificationContentWrapper);
+
+  return notificationContainer;
+};

package/src/components/_GidsRequirementsMeterLabel/GidsRequirementsMeterLabel.ts

@@ -0,0 +1,50 @@
+import {
+  GidsRequirementsMeterLabelCommonUtils,
+  type GidsRequirementsMeterLabelCommonProps,
+} from '@ganpatiinfo/gids-core-shared';
+import { GidsRequirementsMeterLabelWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+
+const { getGidsRequirementsMeterLabelClassNames } =
+  GidsRequirementsMeterLabelWebUtils;
+
+const { getRequirementsMeterLabelLeadingIcon } =
+  GidsRequirementsMeterLabelCommonUtils;
+
+export interface GidsRequirementsMeterLabelDomProps extends GidsRequirementsMeterLabelCommonProps {
+  extraClasses?: string;
+}
+
+export const GidsRequirementsMeterLabelDom = ({
+  label,
+  status = 'default',
+  leadingIconVisible = true,
+  extraClasses,
+}: GidsRequirementsMeterLabelDomProps): HTMLDivElement => {
+  const labelContainer = document.createElement('div');
+  labelContainer.className = getGidsRequirementsMeterLabelClassNames(
+    { status },
+    extraClasses,
+  );
+
+  if (leadingIconVisible && status) {
+    const iconName = getRequirementsMeterLabelLeadingIcon(status);
+    if (iconName) {
+      labelContainer.append(
+        GidsIconDom({
+          name: iconName,
+          size: 'sm',
+          appearance: 'filled',
+        }),
+      );
+    }
+  }
+
+  if (label && label !== '') {
+    const textEl = document.createElement('span');
+    textEl.textContent = label;
+    labelContainer.appendChild(textEl);
+  }
+
+  return labelContainer;
+};

package/src/components/_GidsSideMenuItem/GidsSideMenuItem.ts

@@ -0,0 +1,108 @@
+import {
+  type GidsSideMenuItemOnPressEvent,
+  type GidsSideMenuItemWebProps,
+  GidsSideMenuItemWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+  appendAsChildren,
+  DomChildren,
+  DomNodeOrString,
+} from '../../utils/domUtils.js';
+import { GidsBadgeDom } from '../GidsBadge/GidsBadge.js';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+import { GidsSideMenuItemCommonUtils } from '@ganpatiinfo/gids-core-shared';
+import { IconName } from '@ganpatiinfo/gids-web-theme-interface';
+
+const { getGidsSideMenuItemClassNames } = GidsSideMenuItemWebUtils;
+const { getSideMenuTrailingIcon } = GidsSideMenuItemCommonUtils;
+
+export interface GidsSideMenuItemDomProps extends GidsSideMenuItemWebProps<
+  DomNodeOrString,
+  DomChildren,
+  DomChildren
+> {
+  extraClasses?: string;
+  onPressSideMenuItem?: GidsSideMenuItemOnPressEvent;
+}
+
+export const GidsSideMenuItemDom = ({
+  appearance = 'default',
+  index = 0,
+  selected,
+  isLeadingDotVisible = false,
+  leadingDotAppearance = 'information',
+  leadingAccessory,
+  trailingAccessory,
+  leadingIcon,
+  trailingIcon,
+  isTrailingArrowVisible = false,
+  trailingArrowDirection = 'right',
+  children,
+  extraClasses,
+  onPressSideMenuItem,
+}: GidsSideMenuItemDomProps): HTMLDivElement => {
+  const sideMenuItem = document.createElement('div');
+  sideMenuItem.className = getGidsSideMenuItemClassNames(
+    { selected, appearance },
+    extraClasses,
+  );
+
+  sideMenuItem.setAttribute('index', `${index}`);
+
+  if (leadingAccessory) {
+    appendAsChildren(sideMenuItem, leadingAccessory);
+  } else {
+    if (isLeadingDotVisible) {
+      sideMenuItem.append(
+        GidsBadgeDom({
+          appearance: leadingDotAppearance,
+          type: 'dot',
+        }),
+      );
+    }
+  }
+
+  if (leadingIcon) {
+    appendAsChildren(sideMenuItem, leadingIcon);
+  }
+
+  if (children) {
+    const textEl = document.createElement('span');
+    textEl.className = 'gids-side-menu-item__label';
+    if (typeof children === 'string') {
+      textEl.textContent = children;
+    } else {
+      textEl.appendChild(children);
+    }
+    appendAsChildren(sideMenuItem, textEl);
+  }
+
+  if (trailingAccessory) {
+    appendAsChildren(sideMenuItem, trailingAccessory);
+  }
+
+  if (trailingIcon) {
+    appendAsChildren(sideMenuItem, trailingIcon);
+  } else {
+    if (isTrailingArrowVisible) {
+      sideMenuItem.append(
+        GidsIconDom({
+          name: getSideMenuTrailingIcon<IconName>(trailingArrowDirection),
+          size: 'md',
+          alt: '',
+          appearance: 'regular',
+        }),
+      );
+    }
+  }
+
+  if (onPressSideMenuItem) {
+    sideMenuItem.addEventListener('click', () => {
+      onPressSideMenuItem({
+        selectedIndex: index,
+      });
+    });
+  }
+
+  return sideMenuItem;
+};

package/src/components/_GidsSnackbarContainer/GidsSnackbarContainer.ts

@@ -0,0 +1,68 @@
+import { type GidsSnackbarContainerCommonProps } from '@ganpatiinfo/gids-core-shared';
+import {
+  type ClassValue,
+  GidsSnackbarContainerWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+  appendAsChildren,
+  type DomNodeOrString,
+} from '../../utils/domUtils.js';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+import { IconName } from '@ganpatiinfo/gids-web-theme-interface';
+
+const { getGidsSnackbarContainerClassNames, getSnackbarContainerIconNames } =
+  GidsSnackbarContainerWebUtils;
+
+export interface GidsSnackbarContainerDomProps extends GidsSnackbarContainerCommonProps<
+  DomNodeOrString,
+  DomNodeOrString
+> {
+  extraClasses?: ClassValue;
+}
+
+export const GidsSnackbarContainerDom = (
+  props: GidsSnackbarContainerDomProps,
+): HTMLDivElement => {
+  const { appearance = 'default', children, button, extraClasses } = props;
+
+  const snackbarContainer = document.createElement('div');
+  snackbarContainer.className = getGidsSnackbarContainerClassNames(
+    { appearance },
+    extraClasses,
+  );
+
+  const snackbarContent = document.createElement('div');
+  snackbarContent.className = 'gids-snackbar-container__content';
+
+  const iconName = getSnackbarContainerIconNames<IconName>(appearance);
+  if (appearance !== 'default' && iconName) {
+    snackbarContent.appendChild(
+      GidsIconDom({
+        size: 'md',
+        name: iconName,
+        alt: '',
+        appearance: 'filled',
+        className: 'gids-snackbar-container__icon',
+      }),
+    );
+  }
+
+  if (children) {
+    if (typeof children === 'string') {
+      const textEl = document.createElement('p');
+      appendAsChildren(textEl, children);
+
+      snackbarContent.appendChild(textEl);
+    } else {
+      snackbarContent.appendChild(children);
+    }
+  }
+
+  snackbarContainer.appendChild(snackbarContent);
+
+  if (button) {
+    snackbarContainer.append(button);
+  }
+
+  return snackbarContainer;
+};