@ukic/web-components 3.0.0 → 3.2.0

package/dist/types/stencil-public-runtime.d.ts

@@ -768,6 +768,7 @@ export declare namespace JSXBase {
         hrefLang?: string;
         hreflang?: string;
         media?: string;
+        ping?: string;
         rel?: string;
         target?: string;
         referrerPolicy?: ReferrerPolicy;
@@ -794,7 +795,6 @@ export declare namespace JSXBase {
         cite?: string;
     }
     interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
         disabled?: boolean;
         form?: string;
         formAction?: string;
@@ -921,8 +921,6 @@ export declare namespace JSXBase {
         autocapitalize?: string;
         autoComplete?: string;
         autocomplete?: string;
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         capture?: string;
         checked?: boolean;
         crossOrigin?: string;
@@ -979,8 +977,6 @@ export declare namespace JSXBase {
         popoverTarget?: string;
     }
     interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         challenge?: string;
         disabled?: boolean;
         form?: string;
@@ -993,7 +989,6 @@ export declare namespace JSXBase {
     interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
         form?: string;
         htmlFor?: string;
-        htmlfor?: string;
     }
     interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
         value?: string | string[] | number;
@@ -1020,6 +1015,8 @@ export declare namespace JSXBase {
         autoPlay?: boolean;
         autoplay?: boolean | string;
         controls?: boolean;
+        controlslist?: 'nodownload' | 'nofullscreen' | 'noremoteplayback';
+        controlsList?: 'nodownload' | 'nofullscreen' | 'noremoteplayback';
         crossOrigin?: string;
         crossorigin?: string;
         loop?: boolean;
@@ -1104,7 +1101,6 @@ export declare namespace JSXBase {
     interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
         form?: string;
         htmlFor?: string;
-        htmlfor?: string;
         name?: string;
     }
     interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -1129,7 +1125,6 @@ export declare namespace JSXBase {
         type?: string;
     }
     interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
         disabled?: boolean;
         form?: string;
         multiple?: boolean;
@@ -1164,8 +1159,6 @@ export declare namespace JSXBase {
     interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
         autoComplete?: string;
         autocomplete?: string;
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         cols?: number;
         disabled?: boolean;
         form?: string;
@@ -1218,6 +1211,8 @@ export declare namespace JSXBase {
     interface HTMLAttributes<T = HTMLElement> extends DOMAttributes<T> {
         innerHTML?: string;
         accessKey?: string;
+        autoFocus?: boolean;
+        autofocus?: boolean | string;
         class?: string | {
             [className: string]: boolean;
         };
@@ -1571,6 +1566,10 @@ export declare namespace JSXBase {
         onSubmitCapture?: (event: Event) => void;
         onInvalid?: (event: Event) => void;
         onInvalidCapture?: (event: Event) => void;
+        onBeforeToggle?: (event: Event) => void;
+        onBeforeToggleCapture?: (event: Event) => void;
+        onToggle?: (event: Event) => void;
+        onToggleCapture?: (event: Event) => void;
         onLoad?: (event: Event) => void;
         onLoadCapture?: (event: Event) => void;
         onError?: (event: Event) => void;

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

@@ -36,3 +36,4 @@ export interface IcColorExceptions {
 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;
+export declare const IGNORED_KEYBOARD_CHARACTERS: string[];

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../stencil-public-runtime";
-import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA, IcDeviceSizes, IcColor } from "./types";
-import { IcMenuOption, IcThemeForeground } from "../utils/types";
+import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA, IcDeviceSizes, IcColor, IcBrandForegroundNoDefault } from "./types";
+import { IcMenuOption, IcBrandForeground } from "../utils/types";
 /**
  * converts an enum of strings into an array of strings
  */
@@ -29,7 +29,7 @@ export declare const debounce: (func: (...args: unknown[]) => void, wait?: numbe
  * @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 | Date | undefined | null, disabled: boolean) => void;
+export declare const renderHiddenInput: (always: boolean, container: HTMLElement, name: string, value: string | Date | undefined | null, disabled: boolean | undefined) => void;
 /**
  * This method is used to add a hidden file input to a host element that contains
  * a Shadow DOM. It does not add the input inside of the Shadow root which
@@ -44,9 +44,9 @@ export declare const renderHiddenInput: (always: boolean, container: HTMLElement
  * @param disabled If true, the input is disabled
  * @param accept A string of the accepted files
  */
-export declare const renderFileHiddenInput: (event: EventEmitter, container: HTMLElement, multiple: boolean, name: string, value: FileList | undefined | null, disabled: boolean, accept: string) => void;
+export declare const renderFileHiddenInput: (event: EventEmitter, container: HTMLElement, multiple: boolean, name: string, value: FileList | undefined | null, disabled: boolean, accept: string | undefined | null) => void;
 export declare const removeHiddenInput: (container: HTMLElement) => void;
-export declare const hasShadowDom: (el: HTMLElement) => boolean;
+export declare const hasShadowDom: (el: HTMLElement | null | undefined) => 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;
@@ -60,9 +60,9 @@ export declare const getInputDescribedByText: (inputId: string, helperText: bool
  * are part of an IC component.
  *
  * ""
- * @returns IcThemeForeground depending on the context
+ * @returns IcBrandForeground depending on the context
  */
-export declare const getThemeFromContext: (el: Element, themeFromEvent?: IcThemeForeground) => IcThemeForeground;
+export declare const getBrandFromContext: (el: Element, brandFromEvent?: IcBrandForeground | null) => IcBrandForeground;
 /**
  * Checks if the current device is a mobile or tablet device.
  * @returns {boolean} Returns true if the device is a mobile or tablet device, otherwise returns false.
@@ -77,7 +77,7 @@ export declare const isMobileOrTablet: () => boolean;
  */
 export declare const handleHiddenFormButtonClick: (form: HTMLFormElement, button: HTMLIcButtonElement | HTMLButtonElement) => void;
 export declare const isEmptyString: (value: string) => boolean;
-export declare const isPropDefined: (prop: string) => string | null;
+export declare const isPropDefined: (prop: string | undefined) => string | undefined;
 /**
  * Extracts the label using the value from an object. Requires the object to have a label and value property.
  * @param value - value from object
@@ -93,7 +93,14 @@ export declare const getLabelFromValue: (value: string, options: IcMenuOption[],
  * @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, labelField?: string) => IcMenuOption[];
+export declare const getFilteredMenuOptions: (options: IcMenuOption[], includeDescriptions: boolean, searchString: string, position?: IcSearchMatchPositions, labelField?: string) => IcMenuOption[];
+/**
+ * Gets count of options where only group title "parent" options have been removed.
+ * Disabled options are included in the count.
+ * @param options - array of options
+ * @returns number of options not including group titles
+ */
+export declare const getOptionsWithoutGroupTitlesCount: (options: IcMenuOption[]) => number;
 export declare const deviceSizeMatches: (size: number) => boolean;
 export declare const getCurrentDeviceSize: () => number;
 export declare const getCssProperty: (cssVar: string) => string;
@@ -101,20 +108,20 @@ 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"
+ * This is a similar calculation to its CSS counterpart: "--ic-brand-text-color"
  * @returns number representing the brightness of the theme colour
  */
-export declare const getThemeColorBrightness: () => number;
+export declare const getBrandColorBrightness: () => number;
 /**
  * Returns if dark or light foreground colors should be used for color contrast reasons
  * @returns "dark" or "light"
- * @param brightness - Optional custom brightness value. Defaults to `getThemeColorBrightness`
+ * @param brightness - Optional custom brightness value. Defaults to `getBrandColorBrightness`
  */
-export declare const getThemeForegroundColor: (brightness?: number) => IcThemeForeground;
-export declare const getSlot: (element: HTMLElement, name: string) => Element | null;
+export declare const getBrandForegroundAppearance: (brightness?: number) => IcBrandForegroundNoDefault;
+export declare const getSlot: (element: HTMLElement | undefined, 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 getSlotElements: (slot: Element) => NodeListOf<ChildNode> | Element[] | null;
 export declare const getNavItemParentDetails: ({ parentElement, }: HTMLElement) => IcNavParentDetails;
 export declare const DEVICE_SIZES: {
     XS: IcDeviceSizes;
@@ -124,7 +131,7 @@ export declare const DEVICE_SIZES: {
     XL: IcDeviceSizes;
     UNDEFINED: number;
 };
-export declare const hasValidationStatus: (status: IcInformationStatusOrEmpty, disabled: boolean) => boolean;
+export declare const hasValidationStatus: (status?: IcInformationStatusOrEmpty, disabled?: boolean) => boolean;
 export declare const isSlotUsed: ({ children }: 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;
@@ -137,7 +144,11 @@ export declare const hasClassificationBanner: () => boolean;
 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;
+/**
+ * Removes the disabled attribute from the provided element when its value is set to false.
+ * This effectively makes it null, to not confuse screen readers that cannot interpret the false value
+ */
+export declare const removeDisabledFalse: (disabled: boolean | undefined, element: HTMLElement) => void;
 export declare const isMacDevice: () => boolean;
 export declare const isNumeric: (value: string) => boolean;
 export declare function waitForHydration(): Promise<boolean>;
@@ -145,3 +156,10 @@ export declare const convertToRGBA: (color: IcColor) => IcColorRGBA | null;
 export declare const capitalize: (text: string) => string;
 export declare const checkSlotInChildMutations: (addedNodes: NodeList, removedNodes: NodeList, slotName: string | string[]) => boolean;
 export declare const isElInAGGrid: (el: HTMLElement) => boolean;
+/**
+ * Checks if the component is slotted in its relevant 'group' component
+ * @param component - the component to check
+ */
+export declare const isSlottedInGroup: (component: HTMLElement) => boolean;
+export declare const hasDynamicChildSlots: (mutationList: MutationRecord[], slotNames: string | string[]) => boolean;
+export declare const renderDynamicChildSlots: (mutationList: MutationRecord[], slotNames: string | string[], ref: any) => void;

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

@@ -5,21 +5,22 @@ export declare enum IcInformationStatus {
     Error = "error",
     Success = "success"
 }
-export type IcSizes = "default" | "large" | "small";
-export type IcSizesNoLarge = "default" | "small";
+export type IcSizes = "medium" | "large" | "small";
+export type IcSizesNoLarge = "medium" | "small";
 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 {
+export declare enum IcBrandForegroundEnum {
     Default = "default",
     Dark = "dark",
     Light = "light"
 }
-export type IcThemeForeground = "default" | "dark" | "light";
-export type IcThemeForegroundNoDefault = "dark" | "light";
-export type IcTheme = {
-    mode: IcThemeForeground;
+export type IcThemeMode = "dark" | "light" | "inherit";
+export type IcBrandForeground = "default" | "dark" | "light";
+export type IcBrandForegroundNoDefault = "dark" | "light";
+export type IcBrand = {
+    mode: IcBrandForeground;
     color: IcColorRGB;
 };
 export type IcAdditionalFieldTypes = "static" | "dynamic";
@@ -35,7 +36,7 @@ export type IcActivationTypes = "automatic" | "manual";
 export type IcAutocorrectStates = "on" | "off";
 export type IcNavParentDetails = {
     navType: IcNavType | "";
-    parent: HTMLElement;
+    parent: HTMLElement | null;
 };
 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" | "badge" | "badge-small";
 /**
@@ -59,7 +60,7 @@ export interface IcMenuOption {
 }
 export type IcSearchMatchPositions = "start" | "anywhere";
 export type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;
-export type IcRequiredPropsTypes = string | boolean | number | HTMLElement | IcMenuOption[];
+export type IcRequiredPropsTypes = string | boolean | number | HTMLElement | IcMenuOption[] | undefined;
 export type IcPropObject = {
     prop: IcRequiredPropsTypes;
     propName: string;
@@ -71,8 +72,12 @@ export interface IcValueEventDetail {
     value: string;
     keyPressed?: string;
 }
+export interface IcMultiValueEventDetail {
+    value: string | string[] | null;
+    keyPressed?: string;
+}
 export interface IcBlurEventDetail {
-    relatedTarget: IcRelatedTarget;
+    relatedTarget: IcRelatedTarget | null;
 }
 export type IcSelectTypes = "single" | "multi";
 export type IcSelectMethodTypes = "auto" | "manual";
@@ -81,4 +86,7 @@ type RGB = `rgb(${string})`;
 type RGBA = `rgba(${string})`;
 type HEX = `#${string}`;
 export type IcColor = RGB | RGBA | HEX;
+export type IcIconPlacementOptions = "left" | "right" | "top";
+export type IcButtonTooltipPlacement = "top" | "right" | "bottom" | "left";
+export type IcThemeSettings = "dark" | "light" | "system";
 export {};

package/hydrate/index.d.ts

@@ -1,6 +1,9 @@
-// Generated by dts-bundle-generator v9.2.4
+// Generated by dts-bundle-generator v9.5.1
+
+import { Readable } from 'node:stream';
 
 export declare function createWindowFromHtml(templateHtml: string, uniqueId: string): any;
+export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
 export interface HydrateDocumentOptions {
 	/**
 	 * Build ID that will be added to `<html data-stencil-build="BUILD_ID">`. By default
@@ -134,6 +137,41 @@ export interface SerializeDocumentOptions extends HydrateDocumentOptions {
 	 * Remove HTML comments. Defaults to `true`.
 	 */
 	removeHtmlComments?: boolean;
+	/**
+	 * Configure how Stencil serializes the components shadow root.
+	 * - If set to `declarative-shadow-dom` the component will be rendered within a Declarative Shadow DOM.
+	 * - If set to `scoped` Stencil will render the contents of the shadow root as a `scoped: true` component
+	 *   and the shadow DOM will be created during client-side hydration.
+	 * - Alternatively you can mix and match the two by providing an object with `declarative-shadow-dom` and `scoped` keys,
+	 * the value arrays containing the tag names of the components that should be rendered in that mode.
+	 *
+	 * Examples:
+	 * - `{ 'declarative-shadow-dom': ['my-component-1', 'another-component'], default: 'scoped' }`
+	 * Render all components as `scoped` apart from `my-component-1` and `another-component`
+	 * -  `{ 'scoped': ['an-option-component'], default: 'declarative-shadow-dom' }`
+	 * Render all components within `declarative-shadow-dom` apart from `an-option-component`
+	 * - `'scoped'` Render all components as `scoped`
+	 * - `false` disables shadow root serialization
+	 *
+	 * *NOTE* `true` has been deprecated in favor of `declarative-shadow-dom` and `scoped`
+	 * @default 'declarative-shadow-dom'
+	 */
+	serializeShadowRoot?: "declarative-shadow-dom" | "scoped" | {
+		"declarative-shadow-dom"?: string[];
+		scoped?: string[];
+		default: "declarative-shadow-dom" | "scoped";
+	} | boolean;
+	/**
+	 * The `fullDocument` flag determines the format of the rendered output. Set it to true to
+	 * generate a complete HTML document, or false to render only the component.
+	 * @default true
+	 */
+	fullDocument?: boolean;
+	/**
+	 * Style modes to render the component in.
+	 * @see https://stenciljs.com/docs/styling#style-modes
+	 */
+	modes?: ResolutionHandler[];
 }
 export interface HydrateFactoryOptions extends SerializeDocumentOptions {
 	serializeToHtml: boolean;
@@ -165,23 +203,23 @@ 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;
+	host: string | null;
+	hostname: string | null;
+	href: string | null;
+	port: string | null;
+	pathname: string | null;
+	search: string | null;
+	hash: string | null;
+	html: string | null;
 	components: HydrateComponent[];
 	anchors: HydrateAnchorElement[];
 	imgs: HydrateImgElement[];
 	scripts: HydrateScriptElement[];
 	styles: HydrateStyleElement[];
 	staticData: HydrateStaticData[];
-	title: string;
+	title: string | null;
 	hydratedCount: number;
-	httpStatus: number;
+	httpStatus: number | null;
 }
 export interface HydrateComponent {
 	tag: string;
@@ -211,8 +249,11 @@ export interface HydrateStaticData {
 	type: string;
 	content: string;
 }
+export declare function streamToString(html: string | any, option?: SerializeDocumentOptions): Readable;
 export declare function renderToString(html: string | any, options?: SerializeDocumentOptions): Promise<HydrateResults>;
+export declare function renderToString(html: string | any, options: SerializeDocumentOptions | undefined, asStream: true): Readable;
 export declare function hydrateDocument(doc: any | string, options?: HydrateDocumentOptions): Promise<HydrateResults>;
-export declare function serializeDocumentToString(doc: any, opts: HydrateFactoryOptions): string;
+export declare function hydrateDocument(doc: any | string, options: HydrateDocumentOptions | undefined, asStream?: boolean): Readable;
+export declare function serializeDocumentToString(doc: Document, opts: HydrateFactoryOptions): string;
 
 export {};