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

package/src/components/GidsSearchBar/GidsSearchBar.ts

@@ -0,0 +1,103 @@
+import {
+  type GidsSearchBarWebProps,
+  GidsSearchBarWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { type HtmlInputAttributes } from '../GidsInput/GidsInput.js';
+import {
+  GidsTextFieldDom,
+  GidsTextFieldDomProps,
+} from '../GidsTextField/GidsTextField.js';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+import { GidsSearchBarCommonUtils } from '@ganpatiinfo/gids-core-shared';
+
+const { getSearchBarValue } = GidsSearchBarCommonUtils;
+const { getSearchBarType, getSearchBarClassNames } = GidsSearchBarWebUtils;
+
+export interface GidsSearchBarDomProps
+  extends
+    GidsSearchBarWebProps<Element, HtmlInputAttributes>,
+    Pick<
+      GidsTextFieldDomProps,
+      'className' | 'onChange' | 'onInput' | 'onFocus' | 'onBlur'
+    > {
+  wrapperClass?: string;
+  onGidsSearchBarClear?: (event: CustomEvent<void>) => void;
+}
+
+export const GidsSearchBarDom = (
+  props: GidsSearchBarDomProps,
+): HTMLDivElement => {
+  const {
+    wrapperClass,
+    leadingIcon,
+    onGidsSearchBarClear,
+    onChange,
+    onInput,
+    onFocus,
+    onBlur,
+    type = 'default',
+    value = '',
+    inputProps,
+    ...restProps
+  } = props;
+
+  const newValue = getSearchBarValue(value);
+  const textFieldType = getSearchBarType(type);
+
+  // 2. Render your initial DOM exactly once
+  const searchBar = document.createElement('div');
+  searchBar.className = getSearchBarClassNames(wrapperClass);
+
+  const updatedLeadingIcon = leadingIcon
+    ? leadingIcon
+    : GidsIconDom({
+        name: 'search',
+        appearance: 'regular',
+        size: 'md',
+      });
+
+  const gidsSearchBarClear = (event: CustomEvent<void>) => {
+    onGidsSearchBarClear?.(event);
+  };
+
+  const gidsOnChange = (event: Event) => {
+    if (onChange) {
+      onChange(event);
+    }
+  };
+
+  const gidsOnInput = (event: InputEvent) => {
+    if (onInput) {
+      onInput(event);
+    }
+  };
+
+  const textFieldProps: GidsTextFieldDomProps = {
+    ...restProps,
+    leadingAccessory: undefined,
+    showClearButton: true,
+    leadingIcon: updatedLeadingIcon,
+    onGidsTextFieldClear: gidsSearchBarClear,
+    onChange: gidsOnChange,
+    onInput: gidsOnInput,
+    onFocus,
+    onBlur,
+    type: textFieldType,
+    label: undefined,
+    value: newValue,
+    inputProps: {
+      ...inputProps,
+      placeholder:
+        inputProps?.placeholder && inputProps.placeholder !== ''
+          ? inputProps.placeholder
+          : 'Search',
+    },
+  };
+
+  // 3. Create the text field once
+  const textField = GidsTextFieldDom(textFieldProps);
+
+  searchBar.append(textField);
+
+  return searchBar;
+};

package/src/components/GidsSnackbar/GidsSnackbar.ts

@@ -0,0 +1,40 @@
+import { type GidsSnackbarWebProps } from '@ganpatiinfo/gids-web-shared';
+
+export type GidsSnackbarDomProps = GidsSnackbarWebProps;
+
+export const GidsSnackbarDom = ({
+  message,
+  appearance = 'default',
+  show,
+  onQueueSnackbar,
+  buttonLabel,
+  onButtonClick,
+  position = 'bottom-center',
+  timerInMs,
+}: GidsSnackbarDomProps): HTMLElement => {
+  const snackbar = document.createElement('gids-snackbar');
+
+  if (message) {
+    snackbar.setAttribute('message', message);
+  }
+  if (appearance) {
+    snackbar.setAttribute('appearance', appearance);
+  }
+  snackbar.setAttribute('position', position);
+  snackbar.setAttribute('timer-in-ms', timerInMs ? `${timerInMs}` : '0');
+
+  snackbar.toggleAttribute('show', show ? show : false);
+
+  if (onQueueSnackbar) {
+    snackbar.addEventListener('queueSnackbar', onQueueSnackbar);
+  }
+  if (buttonLabel) {
+    snackbar.setAttribute('button-label', buttonLabel);
+  }
+  if (onButtonClick) {
+    // @ts-expect-error Expected
+    snackbar.onButtonClick = onButtonClick;
+  }
+
+  return snackbar;
+};

package/src/components/GidsStatusTag/GidsStatusTag.ts

@@ -0,0 +1,43 @@
+import { type GidsStatusTagCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { GidsStatusTagWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+import { type IconName } from '@ganpatiinfo/gids-web-theme-interface';
+
+const { getGidsStatusTagClassNames, getStatusTagText, getStatusTagIconName } =
+  GidsStatusTagWebUtils;
+
+export interface GidsStatusTagDomProps extends GidsStatusTagCommonProps {
+  extraClasses?: string;
+}
+
+export const GidsStatusTagDom = (
+  props: GidsStatusTagDomProps,
+): HTMLDivElement => {
+  const {
+    type = 'new',
+    appearance = 'subtlest',
+    size = 'sm',
+    extraClasses,
+  } = props;
+
+  const statusTag = document.createElement('div');
+  statusTag.className = getGidsStatusTagClassNames(
+    { appearance, size, type },
+    extraClasses,
+  );
+
+  const statusTagIconName = getStatusTagIconName<IconName>(type);
+  statusTag.append(
+    GidsIconDom({
+      name: statusTagIconName,
+      appearance: 'filled',
+    }),
+  );
+
+  const label = document.createElement('label');
+  label.textContent = getStatusTagText(type) ?? '';
+
+  statusTag.appendChild(label);
+
+  return statusTag;
+};

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,123 @@
+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
+    >,
+    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;
+};