@ukic/web-components 2.0.0-alpha.121

package/dist/types/components/ic-search-bar/ic-search-bar.d.ts

@@ -0,0 +1,211 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcAutocompleteTypes, IcAutocorrectStates, IcMenuOption } from "../../utils/types";
+import { IcSearchBarBlurEventDetail } from "./ic-search-bar.types";
+import { IcValueEventDetail, IcBlurEventDetail } from "../../interface";
+import { IcMenuChangeEventDetail, IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
+export declare class SearchBar {
+  el: HTMLIcSearchBarElement;
+  private inputId;
+  private inputEl;
+  private menuId;
+  private searchSubmitButton;
+  private menu;
+  private menuCloseFromMenuChangeEvent;
+  private anchorEl;
+  private truncateValue;
+  private assistiveHintEl;
+  private preventSubmit;
+  /**
+   * Provide a label for the input.
+   */
+  label: string;
+  /**
+   * Specify if the input requires a value.
+   */
+  required?: boolean;
+  /**
+   * Specify whether the input is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Specify whether the input is read only.
+   */
+  readonly?: boolean;
+  /**
+   * Provide a placeholder value to display.
+   */
+  placeholder?: string;
+  /**
+   * Specify whether the component fills the full width of the container.
+   * If true, this overrides the --input-width css prop.
+   */
+  fullWidth?: boolean;
+  /**
+   * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.
+   * If true, all options provided will be displayed.
+   */
+  disableFilter?: boolean;
+  /**
+   * Hides the label and applies the required label value as an aria-label.
+   */
+  hideLabel?: boolean;
+  /**
+   * Provide helper text to display additional field guidance.
+   */
+  helperText?: string;
+  /**
+   * Specify whether dense styling is to be applied to the element.
+   */
+  dense?: boolean;
+  /**
+   * Value of Search input.
+   */
+  value: string;
+  /**
+   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
+   * Available options: "off", "none", "on", "sentences", "words", "characters".
+   */
+  autocapitalize: string;
+  /**
+   * Indicates whether the value of the control can be automatically completed by the browser.
+   */
+  autocomplete?: IcAutocompleteTypes;
+  /**
+   * Whether auto correction should be enabled when the user is entering/editing the text value.
+   */
+  autocorrect?: IcAutocorrectStates;
+  /**
+   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+   */
+  autofocus: boolean;
+  /**
+   * Set the amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+   */
+  debounce?: number;
+  private debounceChanged;
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name: string;
+  /**
+   * If `true`, the element will have its spelling and grammar checked.
+   */
+  spellcheck: boolean;
+  /**
+   * Provide the suggested search options
+   */
+  options?: IcMenuOption[];
+  watchOptionsHandler(newOptions: IcMenuOption[]): void;
+  /**
+   * Specify whether the input should be focussed when component loaded.
+   */
+  focusOnLoad?: boolean;
+  /**
+   * Determines whether the dark variant of the search bar should be displayed.
+   */
+  dark?: boolean;
+  /**
+   * Provide hint text for hidden assistive description element.
+   */
+  hintText?: string;
+  /**
+   * Provide text for empty results list
+   */
+  emptyOptionListText: string;
+  /**
+   * Number of characters until suggestions appear
+   */
+  charactersUntilSuggestion: number;
+  watchValueHandler(newValue: string): void;
+  /**
+   * Sets focus on the native `input`
+   */
+  setFocus(): Promise<void>;
+  handleKeyDown(ev: CustomEvent): void;
+  handleKeyUp(ev: KeyboardEvent): void;
+  private handleSubmitSearch;
+  /**
+   * Emitted when a keyboard input occurred.
+   */
+  icInput: EventEmitter<IcValueEventDetail>;
+  private onInput;
+  private debounceAriaLiveUpdate;
+  /**
+   * Emitted when input loses focus.
+   */
+  icInputBlur: EventEmitter<IcSearchBarBlurEventDetail>;
+  private onInputBlur;
+  /**
+   * Emitted when input gains focus.
+   */
+  icInputFocus: EventEmitter<IcValueEventDetail>;
+  private onInputFocus;
+  /**
+   * Emitted when the value has changed.
+   */
+  icChange: EventEmitter<IcValueEventDetail>;
+  /**
+   * Emitted when value is cleared with clear button
+   */
+  icClear: EventEmitter<void>;
+  private handleClear;
+  /**
+   * Emitted when the search value has been submitted
+   */
+  icSubmitSearch: EventEmitter<IcValueEventDetail>;
+  /**
+   * Emitted when option is highlighted within the menu
+   */
+  icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;
+  /**
+   * Emitted when the state of the menu changes (i.e. open or close)
+   */
+  icMenuChange: EventEmitter<IcMenuChangeEventDetail>;
+  /**
+   * @internal - Emitted when blur is invoked from clear button
+   */
+  icClearBlur: EventEmitter<IcBlurEventDetail>;
+  private handleClearBlur;
+  /**
+   * @internal - Emitted when blur is invoked from search submit button
+   */
+  icSubmitSearchBlur: EventEmitter<IcBlurEventDetail>;
+  private handleSubmitSearchBlur;
+  private handleSubmitSearchFocus;
+  /**
+   * Emitted when blur is invoked from ic-search-bar
+   */
+  icSearchBarBlur: EventEmitter<IcSearchBarBlurEventDetail>;
+  /**
+   * Emitted when focus is invoked from ic-search-bar
+   */
+  icSearchBarFocus: EventEmitter<void>;
+  open: boolean;
+  filteredOptions: IcMenuOption[];
+  ariaActiveDescendant: string;
+  showClearButton: boolean;
+  clearButtonFocused: boolean;
+  searchSubmitFocused: boolean;
+  prevNoOption: boolean;
+  private handleOptionSelect;
+  private handleMenuChange;
+  private setMenuChange;
+  private handleHostFocus;
+  private handleHostBlur;
+  onMenuClose(ev: CustomEvent): void;
+  onMenuOptionHighlighted(ev: CustomEvent): void;
+  private handleShowClearButton;
+  private handleFocusClearButton;
+  private handleMenuCloseFromMenuChange;
+  private handleTruncateValue;
+  private renderAssistiveHintEl;
+  private updateSearchResultAriaLive;
+  private hasOptionsOrFilterDisabled;
+  private highlightFirstOptionAfterNoResults;
+  connectedCallback(): void;
+  componentWillRender(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/ic-search-bar/ic-search-bar.test.a11y.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/ic-search-bar/ic-search-bar.types.d.ts

@@ -0,0 +1,4 @@
+import { IcValueEventDetail, IcRelatedTarget } from "../../interface";
+export interface IcSearchBarBlurEventDetail extends IcValueEventDetail {
+  relatedTarget: IcRelatedTarget;
+}

package/dist/types/components/ic-section-container/ic-section-container.d.ts

@@ -0,0 +1,12 @@
+import { IcAlignment } from "../../utils/types";
+export declare class SectionContainer {
+  /**
+   * How the container should be aligned.
+   */
+  aligned?: IcAlignment;
+  /**
+   * Removes the standard vertical padding from the container.
+   */
+  fullHeight?: boolean;
+  render(): any;
+}

package/dist/types/components/ic-select/ic-select.d.ts

@@ -0,0 +1,108 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcInformationStatusOrEmpty, IcMenuOption } from "../../utils/types";
+import { IcValueEventDetail } from "../../interface";
+export declare class Select {
+  private nativeSelectElement;
+  private customSelectElement;
+  private menu;
+  private anchorEl;
+  private inputId;
+  private menuId;
+  private inheritedAttributes;
+  /**
+   * Provide a label for the input.
+   */
+  label: string;
+  /**
+   * Provide the possible selection options.
+   */
+  options?: IcMenuOption[];
+  /**
+   * Specify if the input requires a value.
+   */
+  required?: boolean;
+  /**
+   * Hides the label and applies the required label value as an aria-label.
+   */
+  hideLabel?: boolean;
+  /**
+   * Specify whether the input is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Specify whether the input is read only.
+   */
+  readonly?: boolean;
+  /**
+   * Provide a placeholder value to display.
+   */
+  placeholder?: string;
+  /**
+   * Provide helper text to display additional field guidance.
+   */
+  helperText?: string;
+  /**
+   * Specify whether dense styling is to be applied to the element.
+   */
+  dense?: boolean;
+  /**
+   * If true, then fill width of container.
+   */
+  fullWidth: boolean;
+  /**
+   * Provide a validation status.
+   */
+  validationStatus?: IcInformationStatusOrEmpty;
+  /**
+   * Provide the text to display as the validation message.
+   */
+  validationText?: string;
+  /**
+   * The value of the currently selected option.
+   */
+  value?: string;
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name?: string;
+  /**
+   * Display a button which clears the input when clicked.
+   */
+  showClearButton?: boolean;
+  open: boolean;
+  clearButtonFocused: boolean;
+  /**
+   * Emitted when a value is selected.
+   */
+  icChange: EventEmitter<IcValueEventDetail>;
+  /**
+   * Emitted when select has focus.
+   */
+  icFocus: EventEmitter<void>;
+  /**
+   * Emitted when select has blur.
+   */
+  icBlur: EventEmitter<void>;
+  host: HTMLIcSelectElement;
+  /**
+   * Sets focus on the input box.
+   */
+  setFocus(): Promise<void>;
+  private setTextColor;
+  private getLabelFromValue;
+  private handleNativeSelectChange;
+  private handleCustomSelectChange;
+  private handleMenuChange;
+  private handleMouseDown;
+  private handleClick;
+  private handleClear;
+  private handleKeyDown;
+  private handleClearButtonFocus;
+  private handleClearButtonBlur;
+  private onFocus;
+  private onBlur;
+  componentWillLoad(): void;
+  componentDidRender(): void;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components/ic-select/ic-select.test.a11y.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/ic-side-navigation/ic-side-navigation-test-examples.d.ts

@@ -0,0 +1,5 @@
+export declare const icSideNavigation = "\n  <div style=\"display:flex; height: 100%;\">\n    <ic-side-navigation\n      app-title=\"ACME\"\n      version=\"v0.0.0\"\n      status=\"BETA\"\n    >\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n      <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-navigation-item>\n      <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-navigation-item>\n    </ic-side-navigation>\n    <div\n      class=\"content-wrapper\"\n      style=\"display:flex; flex-direction: column;\"\n    >\n      <main style=\"flex: 1 0 auto\">This is the content</main>\n      <footer>Footer</footer>\n    </div>\n  </div>";
+export declare const icSideNavigationExpanded = "\n  <div style=\"display:flex; height: 100%;\">\n    <ic-side-navigation\n      app-title=\"ACME\"\n      version=\"v0.0.0\"\n      status=\"BETA\"\n      expanded=\"true\"\n    >\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n      <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-navigation-item>\n      <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"This is a very very very very very long label\">\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-navigation-item>\n      <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-navigation-item>\n    </ic-side-navigation>\n    <div\n      class=\"content-wrapper\"\n      style=\"display:flex; flex-direction: column;\"\n    >\n      <main style=\"flex: 1 0 auto\">This is the content</main>\n      <footer>Footer</footer>\n    </div>\n  </div>";
+export declare const icSideNavigationGroupedNav = "\n  <div style=\"display:flex; height: 100%;\">\n    <ic-side-navigation\n      app-title=\"ACME\"\n      version=\"v0.0.0\"\n      status=\"BETA\"\n    >\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n      <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-navigation-item>\n      <ic-navigation-group\n      slot=\"primary-navigation\"\n      label=\"Second navigation group\"\n      expandable=\"true\"\n    >\n      <ic-navigation-item label=\"Different navigation\" href=\"/\">\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M23 8C23 9.1 22.1 10 21 10C20.82 10 20.65 9.98 20.49 9.93L16.93 13.48C16.98 13.64 17 13.82 17 14C17 15.1 16.1 16 15 16C13.9 16 13 15.1 13 14C13 13.82 13.02 13.64 13.07 13.48L10.52 10.93C10.36 10.98 10.18 11 10 11C9.82 11 9.64 10.98 9.48 10.93L4.93 15.49C4.98 15.65 5 15.82 5 16C5 17.1 4.1 18 3 18C1.9 18 1 17.1 1 16C1 14.9 1.9 14 3 14C3.18 14 3.35 14.02 3.51 14.07L8.07 9.52C8.02 9.36 8 9.18 8 9C8 7.9 8.9 7 10 7C11.1 7 12 7.9 12 9C12 9.18 11.98 9.36 11.93 9.52L14.48 12.07C14.64 12.02 14.82 12 15 12C15.18 12 15.36 12.02 15.52 12.07L19.07 8.51C19.02 8.35 19 8.18 19 8C19 6.9 19.9 6 21 6C22.1 6 23 6.9 23 8Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-navigation-item>\n    </ic-navigation-group>\n    </ic-side-navigation>\n    <div\n      class=\"content-wrapper\"\n      style=\"display:flex; flex-direction: column;\"\n    >\n      <main style=\"flex: 1 0 auto\">This is the content</main>\n      <footer>Footer</footer>\n    </div>\n  </div>";
+export declare const icSideNavigationStatic = "\n  <div style=\"display:flex; height: 100%;\">\n    <ic-side-navigation\n      app-title=\"ACME\"\n      version=\"v0.0.0\"\n      status=\"BETA\"\n      expanded=\"true\"\n      static=\"true\"\n    >\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n      <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-navigation-item>\n      <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-navigation-item>\n    </ic-side-navigation>\n    <div\n      class=\"content-wrapper\"\n      style=\"display:flex; flex-direction: column;\"\n    >\n      <main style=\"flex: 1 0 auto\">This is the content</main>\n      <footer>Footer</footer>\n    </div>\n  </div>";
+export declare const icSideNavigationTheme = "\n  <ic-theme color=\"rgb(131, 166, 195)\"></ic-theme>\n  <div style=\"display:flex; height: 100%;\">\n    <ic-side-navigation\n      app-title=\"ACME\"\n      version=\"v0.0.0\"\n      status=\"BETA\"\n    >\n      <svg\n        slot=\"app-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n      <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-navigation-item>\n      <ic-navigation-item slot=\"secondary-navigation\" href=\"/\" label=\"a11y\">\n        <svg\n          slot=\"icon\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9H15V22H13V16H11V22H9V9H3V7H21V9Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </ic-navigation-item>\n    </ic-side-navigation>\n    <div\n      class=\"content-wrapper\"\n      style=\"display:flex; flex-direction: column;\"\n    >\n      <main style=\"flex: 1 0 auto\">This is the content</main>\n      <footer>Footer</footer>\n    </div>\n  </div>";

package/dist/types/components/ic-side-navigation/ic-side-navigation.d.ts

@@ -0,0 +1,89 @@
+import { IcThemeForeground } from "../../utils/types";
+/**
+ * @slot app-icon - Content will be rendered adjacent to the application title at the very top of the side navigation
+ * @slot primary-navigation - Content will be rendered at the top of the side navigation
+ * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation
+ */
+export declare class SideNavigation {
+  el: HTMLIcSideNavigationElement;
+  /**
+   * Title to display.
+   */
+  appTitle: string;
+  /**
+   * Status of application
+   */
+  status: string;
+  /**
+   * Version of application
+   */
+  version: string;
+  /**
+   * If true, the ic-side-navigation will load in an expanded state
+   */
+  expanded: boolean;
+  /**
+   * Set application title link
+   */
+  href: string;
+  /**
+   * If true, the menu expand button is removed (PLEASE NOTE: This takes effect on screen sizes 992px and above)
+   */
+  static: boolean;
+  /**
+   * If true, the icon and label will appear when side navigation is collapsed
+   */
+  collapsedIconLabels: boolean;
+  /**
+   * If true, side navigation will be contained by parent element
+   */
+  inline: boolean;
+  /**
+   * If true, disable automatic parent wrapper styling
+   */
+  disableAutoParentStyling: boolean;
+  foregroundColor: IcThemeForeground;
+  menuOpen: boolean;
+  menuExpanded: boolean;
+  deviceSize: number;
+  deviceSizeAppTitle: number;
+  hasSecondaryNavigation: boolean;
+  private ANIMATION_DURATION;
+  themeChangeHandler(ev: CustomEvent): void;
+  private emitSideNavigationExpanded;
+  private toggleMenu;
+  private setToggleMenuFlyoutMenuVisibility;
+  private setMobileMenuAriaAttributes;
+  private setAndRemoveNoWrapAfterMenuExpanded;
+  private toggleMenuExpanded;
+  /**
+   * In order to style nested slotted elements (e.g. using React Router components), this method
+   * rearranges the a tag and labels and adds inline styling expand/collaped animations as external CSS classes are not
+   * do not take affect.
+   * @param menuExpanded boolean - true or false depending on seide navigation state
+   */
+  private arrangeSlottedNavigationItem;
+  private styleSlottedCollapsedIconLabels;
+  private styleSlottedIconLabels;
+  private animateCollapsedIconLabels;
+  private paddingIconWidth;
+  private displayTooltipWithExpandedLongLabel;
+  private setMenuExpanded;
+  /**
+   * As the mobile top bar is fixed, a padding top is required
+   * to push main content down the height of the mobile top bar
+   * @param value - padding-top css value
+   */
+  private setParentPaddingTop;
+  private setParentPaddingLeft;
+  private resizeObserver;
+  private resizeObserverCallback;
+  private runResizeObserver;
+  private setCollapsedIconLabels;
+  private styleSlottedCollapsedIconLabel;
+  private renderTopBar;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/ic-side-navigation/ic-side-navigation.test.a11y.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/ic-side-navigation/ic-side-navigation.types.d.ts

@@ -0,0 +1,9 @@
+import { IcThemeForeground } from "../../utils/types";
+export interface IcTopBar {
+  isSDevice: boolean;
+  foregroundColor: IcThemeForeground;
+  menuOpen: boolean;
+  href: string;
+  isAppNameSubtitleVariant: boolean;
+  appTitle: string;
+}

package/dist/types/components/ic-skeleton/ic-skeleton.d.ts

@@ -0,0 +1,18 @@
+import { IcSkeletonVariants } from "./ic-skeleton.types";
+export declare class Skeleton {
+  el: HTMLIcSkeletonElement;
+  /**
+   * The variant of the skeleton that will be displayed
+   */
+  variant?: IcSkeletonVariants;
+  /**
+   * Set the skeleton to the dark variant
+   */
+  dark?: boolean;
+  hasChild: boolean;
+  default: boolean;
+  heightOnly: boolean;
+  widthOnly: boolean;
+  componentWillLoad(): void;
+  render(): any;
+}

package/dist/types/components/ic-skeleton/ic-skeleton.test.a11y.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/ic-skeleton/ic-skeleton.types.d.ts

@@ -0,0 +1 @@
+export declare type IcSkeletonVariants = "rectangular" | "text" | "circular";

package/dist/types/components/ic-status-tag/ic-status-tag.d.ts

@@ -0,0 +1,21 @@
+import { IcStatusTagStatuses, IcStatusTagVariants } from "./ic-status-tag.types";
+export declare class StatusTag {
+  /**
+   * The content rendered within the status tag.
+   */
+  label: string;
+  /**
+   * The colour of the status tag.
+   */
+  status?: IcStatusTagStatuses;
+  /**
+   * The emphasis of the status tag.
+   */
+  variant?: IcStatusTagVariants;
+  /**
+   * The size of the status tag.
+   */
+  dense?: boolean;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components/ic-status-tag/ic-status-tag.test.a11y.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/ic-status-tag/ic-status-tag.types.d.ts

@@ -0,0 +1,2 @@
+export declare type IcStatusTagStatuses = "neutral" | "success" | "warning" | "danger";
+export declare type IcStatusTagVariants = "primary" | "secondary";

package/dist/types/components/ic-step/ic-step.d.ts

@@ -0,0 +1,26 @@
+import { IcStepTypes } from "./ic-step.types";
+export declare class Step {
+  el: HTMLIcStepElement;
+  /**
+   * State of step
+   */
+  stepType?: IcStepTypes;
+  /**
+   * Name of step
+   */
+  stepTitle?: string;
+  /**
+   * Additional information about step
+   */
+  stepSubtitle?: string;
+  /**
+   * @internal The step number, managed by ic-stepper
+   */
+  stepNum: number;
+  /**
+   * @internal Final step in series flag, managed by ic-stepper
+   */
+  lastStep: boolean;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components/ic-step/ic-step.types.d.ts

@@ -0,0 +1 @@
+export declare type IcStepTypes = "active" | "current" | "completed" | "disabled";

package/dist/types/components/ic-stepper/ic-stepper.d.ts

@@ -0,0 +1,26 @@
+import { IcStepperAlignment } from "./ic-stepper.types";
+export declare class IcStepper {
+  el: HTMLIcStepperElement;
+  /**
+   * How the stepper should be aligned in its container.
+   */
+  aligned?: IcStepperAlignment;
+  /**
+   * The length of the connnector between each step in pixels. Minimum length is 100px.
+   */
+  connectorWidth?: number;
+  stepperWidth: number;
+  lastStepWidth: number;
+  private steps;
+  private resizeObserver;
+  /**
+   * Get all steps currently within this stepper
+   */
+  private getChildren;
+  private initialiseStepStates;
+  private runResizeObserver;
+  private setStepperWidth;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/ic-stepper/ic-stepper.test.a11y.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/ic-stepper/ic-stepper.types.d.ts

@@ -0,0 +1 @@
+export declare type IcStepperAlignment = "left" | "full-width";

package/dist/types/components/ic-switch/ic-switch.d.ts

@@ -0,0 +1,67 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcSwitchChangeEventDetail } from "./ic-switch.types";
+/**
+ * @slot right-adornment - Content is placed to the right of switch before state label.
+ */
+export declare class Switch {
+  private inputId;
+  el: HTMLIcSwitchElement;
+  /**
+   * Applies an aria-label to the component, for when no visual 'name' is provided.
+   */
+  label: string;
+  /**
+   * Hides the label and applies the required label value as an aria-label.
+   */
+  hideLabel?: boolean;
+  /**
+   * Provide helper text to display additional field guidance.
+   */
+  helperText?: string;
+  /**
+   * If true, the component is checked, if null the components state will be uncontrolled.
+   */
+  checked?: boolean | null;
+  /**
+   * If true, the component reduces in size to the dense state.
+   */
+  dense?: boolean;
+  /**
+   * If true, the component is not interactive.
+   */
+  disabled?: boolean;
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name?: string;
+  /**
+   * If true, the component will render the On/Off state text.
+   */
+  showState?: boolean;
+  /**
+   * The value of the toggle does not mean if it's checked or not, use the `checked`
+   * property for that.
+   *
+   * The value of a toggle is analogous to the value of a `<input type="checkbox">`,
+   * it's only used when the toggle participates in a native `<form>`.
+   */
+  value?: string | null;
+  /**
+   * Emitted when the value property has changed.
+   */
+  icChange: EventEmitter<IcSwitchChangeEventDetail>;
+  /**
+   * Emitted when the toggle has focus.
+   */
+  icFocus: EventEmitter<void>;
+  /**
+   * Emitted when the toggle loses focus.
+   */
+  icBlur: EventEmitter<void>;
+  checkedState: boolean;
+  private handleChange;
+  private onFocus;
+  private onBlur;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components/ic-switch/ic-switch.test.a11y.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/ic-switch/ic-switch.types.d.ts

@@ -0,0 +1,4 @@
+export interface IcSwitchChangeEventDetail {
+  value: string | null;
+  checked: boolean;
+}