@ukic/canary-web-components 2.0.0-canary.0

package/dist/types/testspec.setup.d.ts

@@ -0,0 +1,15 @@
+type TestKeyboardEvent = {
+  key: string;
+  preventDefault: () => void;
+  stopImmediatePropagation: () => void;
+  shiftKey: boolean;
+  target: {
+    id: string;
+  };
+};
+export declare const waitForTimeout: (ms: number) => Promise<void>;
+export declare const mockDeviceSize: (size: number) => void;
+export declare const waitForNavGroupLoad: () => Promise<void>;
+export declare const resizeTo: (windowObj: typeof window, width: number, height: number) => void;
+export declare const testKeyboardEvent: (keyboardKey: string) => TestKeyboardEvent;
+export {};

package/dist/types/utils/constants.d.ts

@@ -0,0 +1,38 @@
+export declare const VARIANT_ICONS: {
+  neutral: {
+    icon: string;
+    ariaLabel: string;
+  };
+  info: {
+    icon: string;
+    ariaLabel: string;
+  };
+  warning: {
+    icon: string;
+    ariaLabel: string;
+  };
+  error: {
+    icon: string;
+    ariaLabel: string;
+  };
+  success: {
+    icon: string;
+    ariaLabel: string;
+  };
+};
+export declare const IC_INHERITED_ARIA: string[];
+export declare const IC_DEVICE_SIZES: {
+  XS: number;
+  S: number;
+  M: number;
+  L: number;
+  XL: number;
+};
+export declare const IC_BLOCK_COLOR_COMPONENTS: string[];
+export declare const IC_FIXED_COLOR_COMPONENTS: string[];
+export interface IcColorExceptions {
+  [details: string]: string[];
+}
+export declare const IC_BLOCK_COLOR_EXCEPTIONS: IcColorExceptions;
+export declare const BLACK_MIN_COLOR_BRIGHTNESS = 136.701;
+export declare const WHITE_MAX_COLOR_BRIGHTNESS = 130;

package/dist/types/utils/helpers.d.ts

@@ -0,0 +1,123 @@
+import { EventEmitter } from "../stencil-public-runtime";
+import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA } from "./types";
+import { IcMenuOption, IcThemeForeground } from "../utils/types";
+/**
+ * Used to inherit global attributes set on the host. Called in componentWillLoad and assigned
+ * to a variable that is later used in the render function.
+ *
+ * This does not need to be reactive as changing attributes on the host element
+ * does not trigger a re-render.
+ */
+export declare const inheritAttributes: (element: HTMLElement, attributes?: string[]) => {
+  [key: string]: unknown;
+};
+export declare const debounceEvent: (event: EventEmitter, wait: number) => EventEmitter;
+export declare const debounce: (func: (...args: unknown[]) => void, wait?: number) => unknown;
+/**
+ * This method is used to add a hidden input to a host element that contains
+ * a Shadow DOM. It does not add the input inside of the Shadow root which
+ * allows it to be picked up inside of forms. It should contain the same
+ * values as the host element.
+ *
+ * @param always Add a hidden input even if the container does not use Shadow
+ * @param container The element where the input will be added
+ * @param name The name of the input
+ * @param value The value of the input
+ * @param disabled If true, the input is disabled
+ */
+export declare const renderHiddenInput: (always: boolean, container: HTMLElement, name: string, value: string | undefined | null, disabled: boolean) => void;
+export declare const removeHiddenInput: (container: HTMLElement) => void;
+export declare const hasShadowDom: (el: HTMLElement) => boolean;
+export declare const getInputHelperTextID: (id: string) => string;
+export declare const getInputValidationTextID: (id: string) => string;
+export declare const getInputDescribedByText: (inputId: string, helperText: boolean, validationText: boolean) => string;
+/**
+ * This method helps to understand the context in which a component exists,
+ * to assist with choosing appropriate foreground colours to use. For example,
+ * this method will help you use the 'white' version of a button if it's within
+ * a block colour element using white foreground text.
+ *
+ * This only works for components/elements passed via <slot> and not if they
+ * are part of an IC component.
+ *
+ * ""
+ * @returns IcThemeForeground depending on the context
+ */
+export declare const getThemeFromContext: (el: Element, themeFromEvent?: IcThemeForeground) => IcThemeForeground;
+export declare const isMobileOrTablet: () => boolean;
+/**
+ * Will create a button within the lightDOM which interacts with the parent form.
+ * This is required as buttons within the shadowDOM will not invoke a submit or reset
+ *
+ * @param form - parent form element which contains shadowDom button
+ * @param button - shadowDOM button
+ */
+export declare const handleHiddenFormButtonClick: (form: HTMLFormElement, button: HTMLIcButtonElement | HTMLButtonElement) => void;
+export declare const isEmptyString: (value: string) => boolean;
+/**
+ * Extracts the label using the value from an object. Requires the object to have a label and value property.
+ * @param value - value from object
+ * @param options - list of menu items
+ * @returns - label corresponding to value
+ */
+export declare const getLabelFromValue: (value: string, options: IcMenuOption[]) => string | undefined;
+/**
+ * Filters the options based on the search string.
+ * @param options - array of options
+ * @param includeDescriptions - determines whether option descriptions are included when filtering options
+ * @param searchString - string used to filter the options
+ * @param position - whether the search string matches the start of or anywhere in the options
+ * @returns filtered array of options
+ */
+export declare const getFilteredMenuOptions: (options: IcMenuOption[], includeDescriptions: boolean, searchString: string, position: IcSearchMatchPositions) => IcMenuOption[];
+export declare const deviceSizeMatches: (size: number) => boolean;
+export declare const getCurrentDeviceSize: () => number;
+export declare const getCssProperty: (cssVar: string) => string;
+/**
+ * Returns the brightness of the theme colour, calculated by using the theme RGB CSS values by:
+ * - Multiplying each RGB value by a set number: https://www.w3.org/TR/AERT/#color-contrast
+ * - Adding them together and dividing by 1000
+ * This is a similar calculation to its CSS counterpart: "--ic-theme-text"
+ * @returns number representing the brightness of the theme colour
+ */
+export declare const getThemeColorBrightness: () => number;
+/**
+ * Returns if dark or light foreground colors should be used for color contrast reasons
+ * @returns "dark" or "light"
+ */
+export declare const getThemeForegroundColor: () => IcThemeForeground;
+export declare const getSlot: (element: HTMLElement, name: string) => Element | null;
+export declare const slotHasContent: (element: HTMLElement, name: string) => boolean;
+export declare const getSlotContent: (element: HTMLElement, name: string) => Element[] | NodeListOf<ChildNode> | null;
+export declare const getSlotElements: (slot: Element) => NodeListOf<ChildNode> | Element[];
+export declare const getNavItemParentDetails: (el: HTMLElement) => IcNavParentDetails;
+export declare const DEVICE_SIZES: {
+  XS: number;
+  S: number;
+  M: number;
+  L: number;
+  XL: number;
+  UNDEFINED: number;
+};
+export declare const hasValidationStatus: (status: IcInformationStatusOrEmpty, disabled: boolean) => boolean;
+export declare const isSlotUsed: (element: HTMLElement, slotName: string) => boolean;
+export declare const onComponentPropUndefinedChange: (oldValue: string | undefined, newValue: string | undefined, callback: IcCallbackFunctionNoReturn) => void;
+export declare const onComponentRequiredPropUndefined: (props: IcPropObject[], component: string) => void;
+export declare const kebabToCamelCase: (kebabCase: string) => string;
+export declare const checkResizeObserver: (callbackFn: IcCallbackFunctionNoReturn) => void;
+export declare const hexToRgba: (hex: string) => IcColorRGBA;
+export declare const rgbaStrToObj: (rgbaStr: string) => IcColorRGBA;
+export declare const elementOverflowsX: (element: HTMLElement) => boolean;
+/**
+ *
+ * @param child - The child element
+ * @returns string
+ */
+export declare const getParentElementType: (child: HTMLElement) => string;
+export declare const getParentElement: (child: HTMLElement) => HTMLElement;
+export declare const hasClassificationBanner: () => boolean;
+export declare const getForm: (el: HTMLElement) => HTMLFormElement | null;
+export declare const addFormResetListener: (el: HTMLElement, callbackFn: IcCallbackFunctionNoReturn) => void;
+export declare const removeFormResetListener: (el: HTMLElement, callbackFn: IcCallbackFunctionNoReturn) => void;
+export declare const pxToRem: (px: string, base?: number) => string;
+export declare const removeDisabledFalse: (disabled: boolean, element: HTMLElement) => void;

package/dist/types/utils/testa11y.helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const checkShadowElementRendersCorrectly: (el: Element) => void;
+export declare const checkLightElementRendersCorrectly: (el: Element) => void;

package/dist/types/utils/types.d.ts

@@ -0,0 +1,65 @@
+export type IcFocusableComponents = HTMLIcBreadcrumbElement | HTMLIcButtonElement | HTMLIcCardElement | HTMLIcCheckboxElement | HTMLIcChipElement | HTMLIcLinkElement | HTMLIcNavigationButtonElement | HTMLIcNavigationGroupElement | HTMLIcNavigationItemElement | HTMLIcRadioOptionElement | HTMLIcSearchBarElement | HTMLIcSelectElement | HTMLIcSwitchElement | HTMLIcTabElement | HTMLIcTextFieldElement;
+export type IcStatusVariants = "neutral" | "info" | "warning" | "error" | "success";
+export declare enum IcInformationStatus {
+  Warning = "warning",
+  Error = "error",
+  Success = "success"
+}
+export type IcInformationStatusOrEmpty = "warning" | "error" | "success" | "";
+export type IcNavType = "side" | "top" | "page-header";
+export type IcAutocompleteTypes = "on" | "off" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo";
+export type IcAlignment = "left" | "center" | "full-width";
+export declare enum IcThemeForegroundEnum {
+  Default = "default",
+  Dark = "dark",
+  Light = "light"
+}
+export type IcThemeForeground = "default" | "dark" | "light";
+export type IcThemeForegroundNoDefault = "dark" | "light";
+export type IcTheme = {
+  mode: IcThemeForeground;
+  color: IcColorRGB;
+};
+export type IcAdditionalFieldTypes = "static" | "dynamic";
+export type IcColorRGB = {
+  r: number;
+  g: number;
+  b: number;
+};
+export type IcColorRGBA = IcColorRGB & {
+  a: number;
+};
+export type IcActivationTypes = "automatic" | "manual";
+export type IcAutocorrectStates = "on" | "off";
+export type IcNavParentDetails = {
+  navType: IcNavType | "";
+  parent: HTMLElement;
+};
+export type IcTypographyVariants = "h1" | "h2" | "h3" | "h4" | "subtitle-large" | "subtitle-small" | "body" | "label" | "label-uppercase" | "caption" | "caption-uppercase" | "code-large" | "code-small" | "code-extra-small";
+export interface IcMenuOption {
+  value?: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  recommended?: boolean;
+  children?: IcMenuOption[];
+  loading?: boolean;
+  timedOut?: boolean;
+}
+export type IcSearchMatchPositions = "start" | "anywhere";
+export type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;
+export type IcRequiredPropsTypes = string | boolean | number | HTMLElement | IcMenuOption[];
+export type IcPropObject = {
+  prop: IcRequiredPropsTypes;
+  propName: string;
+};
+export type IcRelatedTarget = EventTarget | undefined;
+export type IcOrientation = "horizontal" | "vertical";
+export type IcSizes = "default" | "large" | "small";
+export interface IcValueEventDetail {
+  value: string;
+  keyPressed?: string;
+}
+export interface IcBlurEventDetail {
+  relatedTarget: IcRelatedTarget;
+}

package/hydrate/index.d.ts

@@ -0,0 +1,218 @@
+// Generated by dts-bundle-generator v7.2.0
+
+export declare function createWindowFromHtml(templateHtml: string, uniqueId: string): any;
+export interface HydrateDocumentOptions {
+	/**
+	 * Build ID that will be added to `<html data-stencil-build="BUILD_ID">`. By default
+	 * a random ID will be generated
+	 */
+	buildId?: string;
+	/**
+	 * Sets the `href` attribute on the `<link rel="canonical">`
+	 * tag within the `<head>`. If the value is not defined it will
+	 * ensure a canonical link tag is no included in the `<head>`.
+	 */
+	canonicalUrl?: string;
+	/**
+	 * Include the HTML comments and attributes used by the clientside
+	 * JavaScript to read the structure of the HTML and rebuild each
+	 * component. Defaults to `true`.
+	 */
+	clientHydrateAnnotations?: boolean;
+	/**
+	 * Constrain `setTimeout()` to 1ms, but still async. Also
+	 * only allows `setInterval()` to fire once, also constrained to 1ms.
+	 * Defaults to `true`.
+	 */
+	constrainTimeouts?: boolean;
+	/**
+	 * Sets `document.cookie`
+	 */
+	cookie?: string;
+	/**
+	 * Sets the `dir` attribute on the top level `<html>`.
+	 */
+	direction?: string;
+	/**
+	 * Component tag names listed here will not be prerendered, nor will
+	 * hydrated on the clientside. Components listed here will be ignored
+	 * as custom elements and treated no differently than a `<div>`.
+	 */
+	excludeComponents?: string[];
+	/**
+	 * Sets the `lang` attribute on the top level `<html>`.
+	 */
+	language?: string;
+	/**
+	 * Maximum number of components to hydrate on one page. Defaults to `300`.
+	 */
+	maxHydrateCount?: number;
+	/**
+	 * Sets `document.referrer`
+	 */
+	referrer?: string;
+	/**
+	 * Removes every `<script>` element found in the `document`. Defaults to `false`.
+	 */
+	removeScripts?: boolean;
+	/**
+	 * Removes CSS not used by elements within the `document`. Defaults to `true`.
+	 */
+	removeUnusedStyles?: boolean;
+	/**
+	 * The url the runtime uses for the resources, such as the assets directory.
+	 */
+	resourcesUrl?: string;
+	/**
+	 * Prints out runtime console logs to the NodeJS process. Defaults to `false`.
+	 */
+	runtimeLogging?: boolean;
+	/**
+	 * Component tags listed here will only be prerendered or serverside-rendered
+	 * and will not be clientside hydrated. This is useful for components that
+	 * are not dynamic and do not need to be defined as a custom element within the
+	 * browser. For example, a header or footer component would be a good example that
+	 * may not require any clientside JavaScript.
+	 */
+	staticComponents?: string[];
+	/**
+	 * The amount of milliseconds to wait for a page to finish rendering until
+	 * a timeout error is thrown. Defaults to `15000`.
+	 */
+	timeout?: number;
+	/**
+	 * Sets `document.title`.
+	 */
+	title?: string;
+	/**
+	 * Sets `location.href`
+	 */
+	url?: string;
+	/**
+	 * Sets `navigator.userAgent`
+	 */
+	userAgent?: string;
+}
+export interface SerializeDocumentOptions extends HydrateDocumentOptions {
+	/**
+	 * Runs after the `document` has been hydrated.
+	 */
+	afterHydrate?(document: any): any | Promise<any>;
+	/**
+	 * Sets an approximate line width the HTML should attempt to stay within.
+	 * Note that this is "approximate", in that HTML may often not be able
+	 * to be split at an exact line width. Additionally, new lines created
+	 * is where HTML naturally already has whitespace, such as before an
+	 * attribute or spaces between words. Defaults to `100`.
+	 */
+	approximateLineWidth?: number;
+	/**
+	 * Runs before the `document` has been hydrated.
+	 */
+	beforeHydrate?(document: any): any | Promise<any>;
+	/**
+	 * Format the HTML in a nicely indented format.
+	 * Defaults to `false`.
+	 */
+	prettyHtml?: boolean;
+	/**
+	 * Remove quotes from attribute values when possible.
+	 * Defaults to `true`.
+	 */
+	removeAttributeQuotes?: boolean;
+	/**
+	 * Remove the `=""` from standardized `boolean` attributes,
+	 * such as `hidden` or `checked`. Defaults to `true`.
+	 */
+	removeBooleanAttributeQuotes?: boolean;
+	/**
+	 * Remove these standardized attributes when their value is empty:
+	 * `class`, `dir`, `id`, `lang`, and `name`, `title`. Defaults to `true`.
+	 */
+	removeEmptyAttributes?: boolean;
+	/**
+	 * Remove HTML comments. Defaults to `true`.
+	 */
+	removeHtmlComments?: boolean;
+}
+export interface HydrateFactoryOptions extends SerializeDocumentOptions {
+	serializeToHtml: boolean;
+	destroyWindow: boolean;
+	destroyDocument: boolean;
+}
+export interface Diagnostic {
+	absFilePath?: string | undefined;
+	code?: string;
+	columnNumber?: number | undefined;
+	debugText?: string;
+	header?: string;
+	language?: string;
+	level: "error" | "warn" | "info" | "log" | "debug";
+	lineNumber?: number | undefined;
+	lines: PrintLine[];
+	messageText: string;
+	relFilePath?: string | undefined;
+	type: string;
+}
+export interface PrintLine {
+	lineIndex: number;
+	lineNumber: number;
+	text?: string;
+	errorCharStart: number;
+	errorLength?: number;
+}
+export interface HydrateResults {
+	buildId: string;
+	diagnostics: Diagnostic[];
+	url: string;
+	host: string;
+	hostname: string;
+	href: string;
+	port: string;
+	pathname: string;
+	search: string;
+	hash: string;
+	html: string;
+	components: HydrateComponent[];
+	anchors: HydrateAnchorElement[];
+	imgs: HydrateImgElement[];
+	scripts: HydrateScriptElement[];
+	styles: HydrateStyleElement[];
+	staticData: HydrateStaticData[];
+	title: string;
+	hydratedCount: number;
+	httpStatus: number;
+}
+export interface HydrateComponent {
+	tag: string;
+	mode: string;
+	count: number;
+	depth: number;
+}
+export interface HydrateElement {
+	[attrName: string]: string | undefined;
+}
+export interface HydrateAnchorElement extends HydrateElement {
+	href?: string;
+	target?: string;
+}
+export interface HydrateImgElement extends HydrateElement {
+	src?: string;
+}
+export interface HydrateScriptElement extends HydrateElement {
+	src?: string;
+	type?: string;
+}
+export interface HydrateStyleElement extends HydrateElement {
+	href?: string;
+}
+export interface HydrateStaticData {
+	id: string;
+	type: string;
+	content: string;
+}
+export declare function renderToString(html: string | any, options?: SerializeDocumentOptions): Promise<HydrateResults>;
+export declare function hydrateDocument(doc: any | string, options?: HydrateDocumentOptions): Promise<HydrateResults>;
+export declare function serializeDocumentToString(doc: any, opts: HydrateFactoryOptions): string;
+
+export {};