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

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

package/src/index.ts

@@ -40,6 +40,25 @@ export * from './components/_GidsPaginationItem/GidsPaginationItem.js';
 export * from './components/GidsPagination/GidsPagination.js';
 export * from './components/GidsSegmentedTabItem/GidsSegmentedTabItem.js';
 export * from './components/GidsSegmentedControl/GidsSegmentedControl.js';
+export * from './components/GidsLogo/GidsLogo.js';
+export * from './components/GidsDismissButton/GidsDismissButton.js';
+export * from './components/GidsInput/GidsInput.js';
+export * from './components/GidsField/GidsField.js';
+export * from './components/GidsTextField/GidsTextField.js';
+export * from './components/GidsSearchBar/GidsSearchBar.js';
+export * from './components/GidsTopNavigation/GidsTopNavigation.js';
+export * from './components/GidsStrengthMeter/GidsStrengthMeter.js';
+export * from './components/_GidsRequirementsMeterLabel/GidsRequirementsMeterLabel.js';
+export * from './components/GidsRequirementsMeter/GidsRequirementsMeter.js';
+export * from './components/GidsStepper/GidsStepper.js';
+export * from './components/GidsStatusTag/GidsStatusTag.js';
+export * from './components/GidsHeading/GidsHeading.js';
+export * from './components/GidsPasswordField/GidsPasswordField.js';
+export * from './components/_GidsSnackbarContainer/GidsSnackbarContainer.js';
+export * from './components/GidsOverlayProvider/GidsOverlayProvider.js';
+export * from './components/GidsSnackbar/GidsSnackbar.js';
+export * from './components/_GidsNotificationContainer/GidsNotificationContainer.js';
+export * from './components/GidsNotification/GidsNotification.js';
 
 /**
  * Utilities

package/src/utils/domUtils.ts

@@ -3,65 +3,92 @@ export type DomNodeOrString = Node | string;
 export type DomChildren = DomNodeOrString | DomNodeOrString[];
 
 export const toElementArray = <E extends DomNodeOrString = DomNodeOrString>(
-	singleOrArr: E | E[] | undefined,
+  singleOrArr: E | E[] | undefined,
 ): E[] => {
-	if (singleOrArr === undefined) {
-		return [];
-	}
-	return Array.isArray(singleOrArr) ? singleOrArr : [singleOrArr];
+  if (singleOrArr === undefined) {
+    return [];
+  }
+  return Array.isArray(singleOrArr) ? singleOrArr : [singleOrArr];
 };
 
 export const appendAsChildren = (
-	parent: Element,
-	children: DomChildren | undefined,
+  parent: Element,
+  children: DomChildren | undefined,
 ): void => {
-	toElementArray(children).forEach((child) => {
-		parent.append(child);
-	});
+  toElementArray(children).forEach((child) => {
+    parent.append(child);
+  });
 };
 
 export const toggleAttribute = (
-	element: Element,
-	attributeName: string,
-	force?: boolean,
+  element: Element,
+  attributeName: string,
+  force?: boolean,
 ): boolean => {
-	if (typeof element.toggleAttribute === 'function') {
-		return element.toggleAttribute(attributeName, force);
-	} else {
-		if (element.hasAttribute(attributeName) || !force) {
-			element.removeAttribute(attributeName);
-			return false;
-		} else {
-			element.setAttribute(attributeName, '');
-			return true;
-		}
-	}
+  if (typeof element.toggleAttribute === 'function') {
+    return element.toggleAttribute(attributeName, force);
+  } else {
+    if (element.hasAttribute(attributeName) || !force) {
+      element.removeAttribute(attributeName);
+      return false;
+    } else {
+      element.setAttribute(attributeName, '');
+      return true;
+    }
+  }
 };
 
 export const applyStatefulInputProps = (
-	inputElement: HTMLInputElement,
-	{
-		value,
-		defaultValue,
-		checked,
-		defaultChecked,
-	}: {
-		value?: string;
-		defaultValue?: string;
-		checked?: boolean;
-		defaultChecked?: boolean;
-	},
+  inputElement: HTMLInputElement,
+  {
+    value,
+    defaultValue,
+    checked,
+    defaultChecked,
+  }: {
+    value?: string;
+    defaultValue?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+  },
 ): void => {
-	if (value !== undefined) {
-		inputElement.value = value;
-	}
-	if (defaultValue !== undefined) {
-		inputElement.defaultValue = defaultValue;
-	}
-	if (checked !== undefined) {
-		inputElement.checked = checked;
-	}
-	if (defaultChecked !== undefined) {
-		inputElement.defaultChecked = defaultChecked;
-	}
+  if (value !== undefined) {
+    inputElement.value = value;
+  }
+  if (defaultValue !== undefined) {
+    inputElement.defaultValue = defaultValue;
+  }
+  if (checked !== undefined) {
+    inputElement.checked = checked;
+  }
+  if (defaultChecked !== undefined) {
+    inputElement.defaultChecked = defaultChecked;
+  }
+};
+
+export const htmlToDomChildren = (
+  html: DomChildren | undefined,
+): DomChildren | undefined => {
+  if (Array.isArray(html)) {
+    return html.flatMap(htmlToDomChildren).filter((x) => x !== undefined);
+  }
+
+  if (typeof html === 'string') {
+    const template = document.createElement('template');
+    template.innerHTML = html;
+    return Array.from(template.content.childNodes);
+  }
+
+  return html;
+};
+
+export const assignToSlot = (
+  parent: Element,
+  slotName: string,
+  element?: Element,
+): void => {
+  if (element) {
+    element.slot = slotName;
+    parent.appendChild(element);
+  }
 };