@ukic/canary-web-components 2.0.0-canary.3 → 2.0.0-canary.5

package/dist/types/interface.d.ts

@@ -1,14 +1 @@
 export * from "./components";
-export * from "./utils/types";
-export * from "./components/ic-button/ic-button.types";
-export * from "./components/ic-classification-banner/ic-classification-banner.types";
-export * from "./components/ic-footer/ic-footer.types";
-export * from "./components/ic-hero/ic-hero.types";
-export * from "./components/ic-input-validation/ic-input-validation.types";
-export * from "./components/ic-loading-indicator/ic-loading-indicator.types";
-export * from "./components/ic-navigation-button/ic-navigation-button.types";
-export * from "./components/ic-skeleton/ic-skeleton.types";
-export * from "./components/ic-status-tag/ic-status-tag.types";
-export * from "./components/ic-step/ic-step.types";
-export * from "./components/ic-text-field/ic-text-field.types";
-export * from "./components/ic-tooltip/ic-tooltip.types";

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

@@ -3,6 +3,16 @@ export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
 }
 export interface ComponentOptions {
+    /**
+     * When set to `true` this component will be form-associated. See
+     * https://stenciljs.com/docs/next/form-associated documentation on how to
+     * build form-associated Stencil components that integrate into forms like
+     * native browser elements such as `<input>` and `<textarea>`.
+     *
+     * The {@link AttachInternals} decorator allows for access to the
+     * `ElementInternals` object to modify the associated form.
+     */
+    formAssociated?: boolean;
     /**
      * Tag name of the web component. Ideally, the tag name must be globally unique,
      * so it's recommended to choose an unique prefix for all your components within the same collection.
@@ -107,6 +117,9 @@ export interface EventOptions {
      */
     composed?: boolean;
 }
+export interface AttachInternalsDecorator {
+    (): PropertyDecorator;
+}
 export interface ListenDecorator {
     (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;
 }
@@ -175,6 +188,12 @@ export declare const Element: ElementDecorator;
  * https://stenciljs.com/docs/events
  */
 export declare const Event: EventDecorator;
+/**
+ * If the `formAssociated` option is set in options passed to the
+ * `@Component()` decorator then this decorator may be used to get access to the
+ * `ElementInternals` instance associated with the component.
+ */
+export declare const AttachInternals: AttachInternalsDecorator;
 /**
  * The `Listen()` decorator is for listening DOM events, including the ones
  * dispatched from `@Events()`.
@@ -791,6 +810,9 @@ export declare namespace JSXBase {
         name?: string;
         type?: string;
         value?: string | string[] | number;
+        popoverTargetAction?: string;
+        popoverTargetElement?: Element | null;
+        popoverTarget?: string;
     }
     interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
         height?: number | string;
@@ -952,6 +974,9 @@ export declare namespace JSXBase {
         webkitdirectory?: boolean;
         webkitEntries?: any;
         width?: number | string;
+        popoverTargetAction?: string;
+        popoverTargetElement?: Element | null;
+        popoverTarget?: string;
     }
     interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
         autoFocus?: boolean;
@@ -1115,11 +1140,13 @@ export declare namespace JSXBase {
         autocomplete?: string;
     }
     interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
+        height?: number;
         media?: string;
         sizes?: string;
         src?: string;
         srcSet?: string;
         type?: string;
+        width?: number;
     }
     interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
         media?: string;
@@ -1202,6 +1229,7 @@ export declare namespace JSXBase {
         draggable?: boolean;
         hidden?: boolean;
         id?: string;
+        inert?: boolean;
         lang?: string;
         spellcheck?: 'true' | 'false' | any;
         style?: {
@@ -1210,6 +1238,7 @@ export declare namespace JSXBase {
         tabIndex?: number;
         tabindex?: number | string;
         title?: string;
+        popover?: string | null;
         inputMode?: string;
         inputmode?: string;
         enterKeyHint?: string;

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

@@ -1,11 +1,11 @@
 type TestKeyboardEvent = {
-  key: string;
-  preventDefault: () => void;
-  stopImmediatePropagation: () => void;
-  shiftKey: boolean;
-  target: {
-    id: string;
-  };
+    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;

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

@@ -1,123 +1,11 @@
-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[], valueField?: string, labelField?: string) => 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, labelField?: string) => IcMenuOption[];
-export declare const deviceSizeMatches: (size: number) => boolean;
-export declare const getCurrentDeviceSize: () => number;
+import { IcCallbackFunctionNoReturn } from "@ukic/web-components";
+export declare const checkResizeObserver: (callbackFn: IcCallbackFunctionNoReturn) => void;
 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;
+    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/hydrate/index.d.ts

@@ -1,4 +1,4 @@
-// Generated by dts-bundle-generator v8.0.1
+// Generated by dts-bundle-generator v9.0.0
 
 export declare function createWindowFromHtml(templateHtml: string, uniqueId: string): any;
 export interface HydrateDocumentOptions {
@@ -157,7 +157,7 @@ export interface Diagnostic {
 export interface PrintLine {
 	lineIndex: number;
 	lineNumber: number;
-	text?: string;
+	text: string;
 	errorCharStart: number;
 	errorLength?: number;
 }