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

package/src/components/GidsLogo/GidsLogo.ts

@@ -0,0 +1,60 @@
+import {
+  type ClassValue,
+  type GidsLogoWebProps,
+  GidsLogoWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import clsx from 'clsx';
+
+const { getGidsLogoClassNames } = GidsLogoWebUtils;
+
+export interface GidsLogoDomProps
+  extends
+    GidsLogoWebProps<string, string>,
+    Omit<Partial<HTMLAnchorElement>, 'href' | 'class'> {
+  extraClasses?: ClassValue;
+  imgClasses?: ClassValue;
+  imgProps?: Omit<
+    Partial<HTMLImageElement>,
+    'src' | 'alt' | 'class' | 'height'
+  >;
+}
+
+export const GidsLogoDom = ({
+  src,
+  href,
+  alt,
+  clickable,
+  extraClasses,
+  imgClasses,
+  imgProps,
+  imgHeight = '100',
+  ...restProps
+}: GidsLogoDomProps): HTMLAnchorElement => {
+  const linkElement = document.createElement('a');
+  linkElement.className = getGidsLogoClassNames(extraClasses);
+  if (restProps) {
+    Object.assign(linkElement, restProps);
+  }
+
+  if (clickable && href && href !== '') {
+    linkElement.setAttribute('href', href);
+  }
+
+  if (src && src !== '') {
+    const imgElement = document.createElement('img');
+    imgElement.className = clsx(
+      `gids-logo__img gids-logo__img-height-${imgHeight}`,
+      imgClasses,
+    );
+    imgElement.setAttribute('src', src);
+    imgElement.setAttribute('alt', alt ? alt : 'logo');
+
+    if (imgProps) {
+      Object.assign(imgElement, imgProps);
+    }
+
+    linkElement.appendChild(imgElement);
+  }
+
+  return linkElement;
+};

package/src/components/GidsNotification/GidsNotification.ts

@@ -0,0 +1,48 @@
+import { type GidsNotificationWebProps } from '@ganpatiinfo/gids-web-shared';
+
+export type GidsNotificationDomProps = GidsNotificationWebProps;
+
+export const GidsNotificationDom = ({
+  notificationTitle,
+  message,
+  pronunciation,
+  appearance = 'default',
+  show,
+  onQueueNotification,
+  buttonLabel,
+  onButtonClick,
+  position = 'bottom-center',
+  timerInMs,
+}: GidsNotificationDomProps): HTMLElement => {
+  const notification = document.createElement('gids-notification');
+
+  if (notificationTitle) {
+    notification.setAttribute('notification-title', notificationTitle);
+  }
+  if (message) {
+    notification.setAttribute('message', message);
+  }
+  if (pronunciation) {
+    notification.setAttribute('pronunciation', pronunciation);
+  }
+  if (appearance) {
+    notification.setAttribute('appearance', appearance);
+  }
+  notification.setAttribute('position', position);
+  notification.setAttribute('timer-in-ms', timerInMs ? `${timerInMs}` : '0');
+
+  notification.toggleAttribute('show', show ? show : false);
+
+  if (onQueueNotification) {
+    notification.addEventListener('queueNotification', onQueueNotification);
+  }
+  if (buttonLabel) {
+    notification.setAttribute('button-label', buttonLabel);
+  }
+  if (onButtonClick) {
+    // @ts-expect-error Expected
+    notification.onButtonClick = onButtonClick;
+  }
+
+  return notification;
+};

package/src/components/GidsOverlayProvider/GidsOverlayProvider.ts

@@ -0,0 +1,16 @@
+import { GidsOverlayProviderCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
+
+export interface GidsOverlayProviderDomProps extends GidsOverlayProviderCommonProps<DomChildren> {
+  extraClasses?: string;
+}
+
+export const GidsOverlayProviderDom = ({
+  children,
+}: GidsOverlayProviderDomProps): HTMLElement => {
+  const overlayProvider = document.createElement('gids-overlay-provider');
+
+  appendAsChildren(overlayProvider, children);
+
+  return overlayProvider;
+};

package/src/components/GidsPasswordField/GidsPasswordField.ts

@@ -0,0 +1,77 @@
+import { type GidsPasswordFieldWebProps } from '@ganpatiinfo/gids-web-shared';
+import { assignToSlot } from '../../utils/domUtils.js';
+import { type HtmlInputAttributes } from '../GidsInput/GidsInput.js';
+
+export interface GidsPasswordFieldDomProps extends GidsPasswordFieldWebProps<
+  Element,
+  HtmlInputAttributes
+> {
+  info?: Element;
+  className?: string;
+  onGidsPasswordFieldClear?: (event: CustomEvent<void>) => void;
+  onGidsPasswordFieldRevealPassword?: (
+    event: CustomEvent<{ passwordRevealed: boolean }>,
+  ) => void;
+  onChange?: (event: Event) => void;
+  onInput?: (event: InputEvent) => void;
+  onFocus?: (event: FocusEvent) => void;
+  onBlur?: (event: FocusEvent) => void;
+}
+
+export const GidsPasswordFieldDom = (
+  props: GidsPasswordFieldDomProps,
+): HTMLElement => {
+  const {
+    info,
+    leadingIcon,
+    onGidsPasswordFieldClear,
+    onGidsPasswordFieldRevealPassword,
+    onChange,
+    onInput,
+    onFocus,
+    onBlur,
+    ...restProps
+  } = props;
+
+  const passwordFieldComponent = document.createElement('gids-password-field');
+  Object.assign(passwordFieldComponent, restProps);
+  passwordFieldComponent.setAttribute('type', 'password');
+
+  assignToSlot(passwordFieldComponent, 'info', info);
+  assignToSlot(passwordFieldComponent, 'leadingIcon', leadingIcon);
+
+  if (onChange) {
+    passwordFieldComponent.addEventListener('change', onChange);
+  }
+  if (onInput) {
+    passwordFieldComponent.addEventListener(
+      'input',
+      onInput as (e: Event) => void,
+    );
+  }
+  if (onFocus) {
+    passwordFieldComponent.addEventListener('focus', onFocus);
+  }
+  if (onBlur) {
+    passwordFieldComponent.addEventListener('blur', onBlur);
+  }
+  if (onGidsPasswordFieldClear) {
+    // @ts-expect-error This is a custom event so ts complaining
+    passwordFieldComponent.addEventListener(
+      'gidsPasswordFieldClear',
+      onGidsPasswordFieldClear,
+    );
+  }
+  if (onGidsPasswordFieldRevealPassword) {
+    // @ts-expect-error This is a custom event so ts complaining
+    passwordFieldComponent.addEventListener(
+      'gidsPasswordFieldRevealPassword',
+      (event: CustomEvent) => {
+        // Stencil data is always nested inside 'detail'
+        onGidsPasswordFieldRevealPassword(event.detail);
+      },
+    );
+  }
+
+  return passwordFieldComponent;
+};

package/src/components/GidsRequirementsMeter/GidsRequirementsMeter.ts

@@ -0,0 +1,71 @@
+import {
+  type GidsRequirementsMeterCommonProps,
+  GidsRequirementsMeterCommonUtils,
+  GidsRequirementsProps,
+} from '@ganpatiinfo/gids-core-shared';
+import { GidsRequirementsMeterWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { GidsRequirementsMeterLabelDom } from '../_GidsRequirementsMeterLabel/GidsRequirementsMeterLabel.js';
+import { minLengthRuleCanBeApplied } from '@ganpatiinfo/gids-core-shared/dist/components/GidsRequirementsMeter/GidsRequirementsMeterCommonUtils.js';
+
+const { getGidsRequirementsMeterClassNames } = GidsRequirementsMeterWebUtils;
+const { checkRequirementRuleSatisfied } = GidsRequirementsMeterCommonUtils;
+
+export interface GidsRequirementsMeterDomProps extends GidsRequirementsMeterCommonProps {
+  extraClasses?: string;
+}
+
+export const GidsRequirementsMeterDom = (
+  props: GidsRequirementsMeterDomProps,
+): HTMLDivElement => {
+  const { text, textMinLength, requirements = [], extraClasses } = props;
+
+  const requirementsMeter = document.createElement('div');
+  requirementsMeter.className =
+    getGidsRequirementsMeterClassNames(extraClasses);
+
+  const renderRequirements = (
+    isSatisfied: boolean,
+    requirement: GidsRequirementsProps,
+  ) => {
+    if (isSatisfied) {
+      requirementsMeter.append(
+        GidsRequirementsMeterLabelDom({
+          label: requirement.requirementText,
+          status: 'success',
+        }),
+      );
+    } else {
+      requirementsMeter.append(
+        GidsRequirementsMeterLabelDom({
+          label: requirement.requirementText,
+          status: 'error',
+        }),
+      );
+    }
+  };
+
+  requirements.map((requirement) => {
+    if (requirement?.requirementText && requirement?.requirementRule) {
+      const isSatisfied = checkRequirementRuleSatisfied({
+        rule: requirement.requirementRule,
+        textMinLength,
+        text,
+      });
+
+      if (requirement.requirementRule == 'include-min-length') {
+        if (
+          minLengthRuleCanBeApplied({
+            requirementRule: requirement.requirementRule,
+            textMinLength,
+          })
+        ) {
+          renderRequirements(isSatisfied, requirement);
+        }
+      } else {
+        renderRequirements(isSatisfied, requirement);
+      }
+    }
+  });
+
+  return requirementsMeter;
+};

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/GidsSectionNotice/GidsSectionNotice.ts

@@ -1,12 +1,12 @@
 import {
-	GidsSectionNoticeCommonUtils,
-	type GidsSectionNoticeCommonProps,
+  GidsSectionNoticeCommonUtils,
+  type GidsSectionNoticeCommonProps,
 } from '@ganpatiinfo/gids-core-shared';
 import { GidsSectionNoticeWebUtils } from '@ganpatiinfo/gids-web-shared';
 import {
-	appendAsChildren,
-	type DomChildren,
-	type DomNodeOrString,
+  appendAsChildren,
+  type DomChildren,
+  type DomNodeOrString,
 } from '../../utils/domUtils.js';
 import { type IconName } from '@ganpatiinfo/gids-web-theme-interface';
 import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
@@ -17,89 +17,89 @@ const { getGidsSectionNoticeClassNames } = GidsSectionNoticeWebUtils;
 const { getSectionNoticeIconName } = GidsSectionNoticeCommonUtils;
 
 export interface GidsSectionNoticeDomProps
-	extends GidsSectionNoticeCommonProps<DomNodeOrString, DomChildren> {
-	onClickDismiss?: (event: MouseEvent) => void;
+  extends GidsSectionNoticeCommonProps<DomNodeOrString, DomChildren> {
+  onClickDismiss?: (event: MouseEvent) => void;
 }
 
 export const GidsSectionNoticeDom = ({
-	appearance = 'information',
-	title,
-	supportingText,
-	children,
-	dismissible = true,
-	onClickDismiss,
+  appearance = 'information',
+  title,
+  supportingText,
+  children,
+  dismissible = true,
+  onClickDismiss,
 }: GidsSectionNoticeDomProps): HTMLDivElement => {
-	const sectionNotice = document.createElement('div');
-	sectionNotice.className = getGidsSectionNoticeClassNames({ appearance });
+  const sectionNotice = document.createElement('div');
+  sectionNotice.className = getGidsSectionNoticeClassNames({ appearance });
 
-	const innerContainer = document.createElement('div');
-	innerContainer.className = 'gids-section-notice__inner-container';
+  const innerContainer = document.createElement('div');
+  innerContainer.className = 'gids-section-notice__inner-container';
 
-	const leadingIconContainer = document.createElement('div');
-	leadingIconContainer.className =
-		'gids-section-notice__leading-icon-container';
+  const leadingIconContainer = document.createElement('div');
+  leadingIconContainer.className =
+    'gids-section-notice__leading-icon-container';
 
-	const leadingIconName = getSectionNoticeIconName({ appearance }) as IconName;
+  const leadingIconName = getSectionNoticeIconName({ appearance }) as IconName;
 
-	const leadingIcon = GidsIconDom({
-		size: 'md',
-		appearance: 'filled',
-		name: leadingIconName,
-		alt: '',
-		className: `gids-section-notice__${appearance}-icon`,
-	});
-	leadingIconContainer.appendChild(leadingIcon);
-	innerContainer.appendChild(leadingIconContainer);
+  const leadingIcon = GidsIconDom({
+    size: 'md',
+    appearance: 'filled',
+    name: leadingIconName,
+    alt: '',
+    className: `gids-section-notice__${appearance}-icon`,
+  });
+  leadingIconContainer.appendChild(leadingIcon);
+  innerContainer.appendChild(leadingIconContainer);
 
-	const contentContainer = document.createElement('div');
-	contentContainer.className = 'gids-section-notice__content-container';
+  const contentContainer = document.createElement('div');
+  contentContainer.className = 'gids-section-notice__content-container';
 
-	const titleElement = document.createElement('div');
-	titleElement.className = 'gids-section-notice__title';
-	appendAsChildren(titleElement, title);
-	contentContainer.appendChild(titleElement);
+  const titleElement = document.createElement('div');
+  titleElement.className = 'gids-section-notice__title';
+  appendAsChildren(titleElement, title);
+  contentContainer.appendChild(titleElement);
 
-	if (supportingText) {
-		const supportingTextElement = document.createElement('div');
-		supportingTextElement.className = 'gids-section-notice__supporting-text';
-		appendAsChildren(supportingTextElement, supportingText);
-		contentContainer.appendChild(supportingTextElement);
-	}
+  if (supportingText) {
+    const supportingTextElement = document.createElement('div');
+    supportingTextElement.className = 'gids-section-notice__supporting-text';
+    appendAsChildren(supportingTextElement, supportingText);
+    contentContainer.appendChild(supportingTextElement);
+  }
 
-	if (children) {
-		contentContainer.appendChild(
-			GidsButtonGroupDom({
-				layout: 'wrap',
-				children: children,
-			}),
-		);
-	}
+  if (children) {
+    contentContainer.appendChild(
+      GidsButtonGroupDom({
+        layout: 'wrap',
+        children: children,
+      }),
+    );
+  }
 
-	innerContainer.appendChild(contentContainer);
+  innerContainer.appendChild(contentContainer);
 
-	if (dismissible && onClickDismiss) {
-		const leadingIcon = GidsIconDom({
-			size: 'sm',
-			appearance: 'filled',
-			name: 'cross',
-			alt: '',
-		});
-		const crossButton = GidsButtonDom({
-			as: 'button',
-			type: 'button',
-			appearance: 'subtle',
-			size: 'sm',
-			width: 'intrinsic',
-			leadingIcon: leadingIcon,
-		});
-		crossButton.addEventListener('click', onClickDismiss);
-		const crossBtnContainer = document.createElement('div');
-		crossBtnContainer.className = 'gids-section-notice__cross-button-container';
-		crossBtnContainer.appendChild(crossButton);
-		innerContainer.appendChild(crossBtnContainer);
-	}
+  if (dismissible && onClickDismiss) {
+    const leadingIcon = GidsIconDom({
+      size: 'sm',
+      appearance: 'filled',
+      name: 'cross',
+      alt: '',
+    });
+    const crossButton = GidsButtonDom({
+      as: 'button',
+      type: 'button',
+      appearance: 'subtle',
+      size: 'sm',
+      width: 'intrinsic',
+      leadingIcon: leadingIcon,
+    });
+    crossButton.addEventListener('click', onClickDismiss);
+    const crossBtnContainer = document.createElement('div');
+    crossBtnContainer.className = 'gids-section-notice__cross-button-container';
+    crossBtnContainer.appendChild(crossButton);
+    innerContainer.appendChild(crossBtnContainer);
+  }
 
-	sectionNotice.appendChild(innerContainer);
+  sectionNotice.appendChild(innerContainer);
 
-	return sectionNotice;
+  return sectionNotice;
 };

package/src/components/GidsSegmentedControl/GidsSegmentedControl.ts

@@ -0,0 +1,75 @@
+import {
+  GidsSegmentedTabItemPressedReturnedProps,
+  type GidsSegmentedControlCommonProps,
+} from '@ganpatiinfo/gids-core-shared';
+import {
+  type ClassValue,
+  GidsSegmentedControlWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { type DomNodeOrString } from '../../utils/domUtils.js';
+import { GidsSegmentedTabItemDom } from '../GidsSegmentedTabItem/GidsSegmentedTabItem.js';
+
+const { getGidsSegmentedControlClassNames } = GidsSegmentedControlWebUtils;
+
+export interface GidsSegmentedControlDomProps extends GidsSegmentedControlCommonProps<
+  DomNodeOrString,
+  string
+> {
+  onPress?: (props: GidsSegmentedTabItemPressedReturnedProps) => void;
+  className?: ClassValue;
+}
+
+export const GidsSegmentedControlDom = ({
+  width = 'intrinsic',
+  tabItems,
+  onPress,
+  className,
+}: GidsSegmentedControlDomProps): HTMLDivElement => {
+  const segmentedControl = document.createElement('div');
+  segmentedControl.className = getGidsSegmentedControlClassNames(
+    { width },
+    className,
+  );
+
+  if (tabItems && tabItems.length > 0) {
+    // This function renders (or re-renders) the tabs
+    const renderTabs = (selectedIndex?: number) => {
+      // Clear existing tabs
+      segmentedControl.innerHTML = '';
+
+      if (tabItems && tabItems.length > 0) {
+        tabItems.forEach((tabItem, index) => {
+          // Determine if this tab is selected
+          // Priority: 1. The newly clicked index, 2. The initial tabItem.selected state
+
+          let isSelected = false;
+          if (selectedIndex !== undefined && selectedIndex !== null) {
+            isSelected = index === selectedIndex;
+          } else {
+            isSelected = index === 0 ? true : false;
+          }
+
+          const tabElement = GidsSegmentedTabItemDom({
+            ...tabItem,
+            index,
+            selected: isSelected,
+            width: width,
+            onPress: (returnedProps) => {
+              // Re-render all tabs with the new selection
+              renderTabs(returnedProps.selectedIndex);
+              // Notify external listeners
+              if (onPress) onPress(returnedProps);
+            },
+          });
+
+          segmentedControl.appendChild(tabElement);
+        });
+      }
+    };
+
+    // Initial render
+    renderTabs();
+  }
+
+  return segmentedControl;
+};