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

package/src/components/GidsInput/GidsInput.ts

@@ -0,0 +1,64 @@
+import { type GidsInputWebProps } from '@ganpatiinfo/gids-web-shared';
+import { assignToSlot } from '../../utils/domUtils.js';
+
+export interface HtmlInputAttributes {
+  id?: string;
+  placeholder?: string;
+  pattern?: string;
+  autocompleted?: string;
+  type?: string;
+  maxlength?: number;
+}
+
+export interface GidsInputDomProps extends GidsInputWebProps<
+  Element,
+  HtmlInputAttributes
+> {
+  onChange?: (this: HTMLInputElement, event: Event) => void;
+  onInput?: (this: HTMLInputElement, event: Event) => void;
+  onFocus?: (this: HTMLInputElement, event: Event) => void;
+  onBlur?: (this: HTMLInputElement, event: Event) => void;
+  extraClasses?: string;
+}
+
+export const GidsInputDom = ({
+  leadingIcon,
+  leadingAccessory,
+  trailingAccessory,
+  trailingIcon,
+  onChange,
+  onInput,
+  onFocus,
+  onBlur,
+  extraClasses,
+  ...rest
+}: GidsInputDomProps): HTMLElement => {
+  const input = document.createElement('gids-input');
+
+  Object.assign(input, rest);
+
+  // Elements Slot
+  assignToSlot(input, 'leadingIcon', leadingIcon);
+  assignToSlot(input, 'leadingAccessory', leadingAccessory);
+  assignToSlot(input, 'trailingAccessory', trailingAccessory);
+  assignToSlot(input, 'trailingIcon', trailingIcon);
+
+  // Event Listeners
+  if (onChange) {
+    input.addEventListener('change', onChange);
+  }
+  if (onInput) {
+    input.addEventListener('input', onInput);
+  }
+  if (onFocus) {
+    input.addEventListener('focus', onFocus);
+  }
+  if (onBlur) {
+    input.addEventListener('blur', onBlur);
+  }
+  if (extraClasses) {
+    input.className = extraClasses;
+  }
+
+  return input;
+};

package/src/components/GidsLink/GidsLink.ts

@@ -1,37 +1,37 @@
 import { type GidsLinkCommonProps } from '@ganpatiinfo/gids-core-shared';
 import { appendAsChildren, type DomChildren } from '../../utils/domUtils.js';
 import {
-	type ClassValue,
-	GidsLinkWebUtils,
+  type ClassValue,
+  GidsLinkWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
 
 const { getGidsLinkClassNames } = GidsLinkWebUtils;
 
 export interface GidsLinkDomProps extends GidsLinkCommonProps<DomChildren> {
-	extraClasses?: ClassValue;
-	href?: string;
-	onClick?: (this: HTMLInputElement, event: Event) => void;
+  extraClasses?: ClassValue;
+  href?: string;
+  onClick?: (this: HTMLInputElement, event: Event) => void;
 }
 
 export const GidsLinkDom = ({
-	children,
-	size,
-	extraClasses,
-	href,
-	onClick,
+  children,
+  size,
+  extraClasses,
+  href,
+  onClick,
 }: GidsLinkDomProps): HTMLAnchorElement => {
-	const linkElement = document.createElement('a');
-	linkElement.className = getGidsLinkClassNames({ size }, extraClasses);
+  const linkElement = document.createElement('a');
+  linkElement.className = getGidsLinkClassNames({ size }, extraClasses);
 
-	appendAsChildren(linkElement, children);
+  appendAsChildren(linkElement, children);
 
-	if (href) {
-		linkElement.setAttribute('href', href);
-	}
+  if (href) {
+    linkElement.setAttribute('href', href);
+  }
 
-	if (onClick) {
-		linkElement.addEventListener('click', onClick);
-	}
+  if (onClick) {
+    linkElement.addEventListener('click', onClick);
+  }
 
-	return linkElement;
+  return linkElement;
 };

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

@@ -0,0 +1,25 @@
+import {
+  type GidsScrimWebProps,
+  GidsScrimWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, type DomChildren } from '../../utils/domUtils.js';
+
+const { getGidsScrimClassNames } = GidsScrimWebUtils;
+
+export interface GidsScrimDomProps extends GidsScrimWebProps<DomChildren> {
+  extraClasses?: string;
+}
+
+export const GidsScrimDom = ({
+  children,
+  extraClasses,
+}: GidsScrimDomProps): HTMLElement => {
+  const scrimEl = document.createElement('gids-scrim');
+  scrimEl.className = getGidsScrimClassNames(extraClasses);
+
+  if (children) {
+    appendAsChildren(scrimEl, children);
+  }
+
+  return scrimEl;
+};

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

@@ -6,14 +6,15 @@ import {
   type ClassValue,
   GidsSegmentedControlWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
-import { type DomNodeOrString } from '../../utils/domUtils.js';
+import { DomChildren, type DomNodeOrString } from '../../utils/domUtils.js';
 import { GidsSegmentedTabItemDom } from '../GidsSegmentedTabItem/GidsSegmentedTabItem.js';
 
 const { getGidsSegmentedControlClassNames } = GidsSegmentedControlWebUtils;
 
 export interface GidsSegmentedControlDomProps extends GidsSegmentedControlCommonProps<
   DomNodeOrString,
-  string
+  string,
+  DomChildren
 > {
   onPress?: (props: GidsSegmentedTabItemPressedReturnedProps) => void;
   className?: ClassValue;

package/src/components/GidsSegmentedTabItem/GidsSegmentedTabItem.ts

@@ -7,20 +7,27 @@ import {
   GidsSegmentedTabItemWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
 import clsx from 'clsx';
-import { type DomNodeOrString } from '../../utils/domUtils.js';
+import {
+  appendAsChildren,
+  DomChildren,
+  type DomNodeOrString,
+} from '../../utils/domUtils.js';
 import { GidsBadgeDom } from '../GidsBadge/GidsBadge.js';
 
 const { getGidsSegmentedTabItemClassNames } = GidsSegmentedTabItemWebUtils;
 
 export interface GidsSegmentedTabItemDomProps extends GidsSegmentedTabItemCommonProps<
   DomNodeOrString,
-  string
+  string,
+  DomChildren
 > {
   onPress?: (props: GidsSegmentedTabItemPressedReturnedProps) => void;
   className?: ClassValue;
 }
 
 export const GidsSegmentedTabItemDom = ({
+  leadingIcon,
+  trailingIcon,
   index,
   label,
   selected = false,
@@ -47,6 +54,13 @@ export const GidsSegmentedTabItemDom = ({
     }
   });
 
+  if (leadingIcon) {
+    const leadingIconContainer = document.createElement('div');
+    leadingIconContainer.className = 'gids-segmented-item__icons';
+    appendAsChildren(leadingIconContainer, leadingIcon);
+    segmentedTabItem.appendChild(leadingIconContainer);
+  }
+
   if (label && label !== '') {
     if (typeof label === 'string') {
       const labelElement = document.createElement('label');
@@ -60,6 +74,13 @@ export const GidsSegmentedTabItemDom = ({
     }
   }
 
+  if (trailingIcon) {
+    const trailingIconContainer = document.createElement('div');
+    trailingIconContainer.className = 'gids-segmented-item__selected-icons';
+    appendAsChildren(trailingIconContainer, trailingIcon);
+    segmentedTabItem.appendChild(trailingIconContainer);
+  }
+
   if (badge) {
     segmentedTabItem.appendChild(
       GidsBadgeDom({

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;
+};