@gov-design-system-ce/components 0.0.1

package/dist/types/components/gov-form/search/gov-form-search.d.ts

@@ -0,0 +1,16 @@
+import { SizesType, VariantType } from './constants';
+export declare class GovFormSearch {
+  host: HTMLGovFormSearchElement;
+  /**
+   * Size variation of the component.
+   */
+  readonly size: SizesType;
+  /**
+   * Style variation of the component.
+   */
+  readonly variant: VariantType;
+  validateSize(newValue: string): void;
+  validateVariant(newValue: string): void;
+  componentWillLoad(): void;
+  render(): any;
+}

package/dist/types/components/gov-form/select/constants.d.ts

@@ -0,0 +1,16 @@
+import { Sizes as GlobalSizes } from "../../../core/constants/sizes";
+import { Variants as GlobalVariants } from "../../../core/constants/variants";
+export declare const Sizes: readonly [any, GlobalSizes._M, GlobalSizes._L, GlobalSizes._XL];
+export declare type SizesType = typeof Sizes[number];
+export declare const Variants: readonly [any, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY];
+export declare type VariantType = typeof Variants[number];
+export declare const FormSelectClass: {
+  root: string;
+  icon: string;
+};
+export declare const FormMultiSelectClass: {
+  root: string;
+  wrap: string;
+  list: string;
+  item: string;
+};

package/dist/types/components/gov-form/select/gov-form-multi-select.d.ts

@@ -0,0 +1,105 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { SizesType, VariantType } from "./constants";
+import { GovFormMultiSelectItem } from './gov-form-multi-select.d';
+export declare class GovFormMultiSelect {
+  private selectRef?;
+  private autocompleteRef?;
+  private readonly selectId;
+  private readonly listId;
+  constructor();
+  host: HTMLGovFormSelectElement;
+  /**
+   * Custom select identifier.
+   */
+  readonly identifier: string;
+  /**
+   * Custom select placeholder.
+   */
+  readonly placeholder: string;
+  /**
+   * Style variation of the form select.
+   */
+  readonly variant: VariantType;
+  /**
+   * Select’s size.
+   */
+  readonly size: SizesType;
+  /**
+   * Name of the select.
+   */
+  readonly name: string;
+  /**
+   * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.
+   * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
+   */
+  readonly required: boolean;
+  /**
+   * Makes the select component disabled.
+   * This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies.
+   */
+  readonly disabled: boolean;
+  /**
+   * Indicates the entered value does not conform to the format expected by the application.
+   */
+  readonly invalid: boolean;
+  /**
+   * Indicates the id of a component that describes the input.
+   */
+  readonly wcagDescribedBy: string;
+  /**
+   * Indicates the id of a component that labels the input.
+   */
+  readonly wcagLabelledBy: string;
+  /**
+   * Indicates the id of a component that describes the input.
+   */
+  readonly wcagOwns: string;
+  /**
+   * Emitted when the select has focus.
+   */
+  govFocus: EventEmitter<FocusEvent>;
+  /**
+   * Emitted when the select loses focus.
+   */
+  govBlur: EventEmitter<FocusEvent>;
+  /**
+   * Emitted when the select change value.
+   */
+  govChange: EventEmitter;
+  focused: boolean;
+  value: string;
+  selectedOptions: GovFormMultiSelectItem[];
+  validateVariant(newValue: string): void;
+  validateSize(newValue: string): void;
+  emitChange(newValue: GovFormMultiSelectItem[]): void;
+  componentWillLoad(): void;
+  private getAvailableOptions;
+  private initAutocomplete;
+  private getOptionIndex;
+  private getOptionElement;
+  private selectOption;
+  private removeOption;
+  componentDidRender(): Promise<void>;
+  render(): any;
+  private onFocusHandler;
+  private onBlurHandler;
+  private onInputHandler;
+  private onSelectHandler;
+  private onTagRemove;
+  /**
+   * Returns the current state of the component
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /**
+   * Sets the ordered value of the element
+   */
+  setValue(value: string): Promise<void>;
+  /**
+   * Returns an instance of the native html select element
+   */
+  getInstance(): Promise<HTMLSelectElement>;
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  validateWcag(): Promise<void>;
+}

package/dist/types/components/gov-form/select/gov-form-multi-select.stories.d.ts

@@ -0,0 +1,31 @@
+import { Sizes as GlobalSizes } from "../../../core/constants/sizes";
+declare const StoryConfiguration: {
+  title: string;
+  args: {
+    size: GlobalSizes;
+    value: string;
+    label: string;
+    errorMessage: string;
+    message: string;
+    disabled: boolean;
+  };
+  argTypes: {
+    size: {
+      control: string;
+      options: any;
+    };
+    value: string;
+    label: string;
+    errorMessage: string;
+    message: string;
+    disabled: string;
+  };
+  parameters: {
+    notes: string;
+  };
+};
+export declare const Playground: any;
+export declare const Invalid: any;
+export declare const Disabled: any;
+export declare const WithMessage: any;
+export default StoryConfiguration;

package/dist/types/components/gov-form/select/gov-form-select.d.ts

@@ -0,0 +1,101 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { SizesType, VariantType } from "./constants";
+export declare class GovFormSelect {
+  private f;
+  private h;
+  private selectRef?;
+  private readonly selectId;
+  constructor();
+  host: HTMLGovFormSelectElement;
+  /**
+   * Value of select
+   */
+  value: string;
+  /**
+   * Custom select identifier.
+   */
+  readonly identifier: string;
+  /**
+   * Style variation of the form select.
+   */
+  readonly variant: VariantType;
+  /**
+   * Select’s size.
+   */
+  readonly size: SizesType;
+  /**
+   * Name of the select.
+   */
+  readonly name: string;
+  /**
+   * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.
+   * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
+   */
+  readonly required: boolean;
+  /**
+   * Makes the select component disabled.
+   * This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies.
+   */
+  readonly disabled: boolean;
+  /**
+   * Indicates the entered value does not conform to the format expected by the application.
+   */
+  readonly invalid: boolean;
+  /**
+   * Indicates the id of a related component’s visually focused element.
+   */
+  readonly wcagActiveDescendant: string;
+  /**
+   * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.
+   */
+  readonly wcagControls: string;
+  /**
+   * Indicates the id of a component that describes the input.
+   */
+  readonly wcagDescribedBy: string;
+  /**
+   * Indicates the id of a component that labels the input.
+   */
+  readonly wcagLabelledBy: string;
+  /**
+   * Indicates the id of a component that describes the input.
+   */
+  readonly wcagOwns: string;
+  /**
+   * Emitted when the select has focus.
+   */
+  govFocus: EventEmitter<FocusEvent>;
+  /**
+   * Emitted when the select loses focus.
+   */
+  govBlur: EventEmitter<FocusEvent>;
+  /**
+   * Emitted when the select change value.
+   */
+  govChange: EventEmitter;
+  focused: boolean;
+  validateVariant(newValue: string): void;
+  validateSize(newValue: string): void;
+  componentWillLoad(): void;
+  componentDidRender(): Promise<void>;
+  render(): any;
+  private onFocusHandler;
+  private onBlurHandler;
+  private onChangeHandler;
+  /**
+   * Returns the current state of the component
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /**
+   * Sets the ordered value of the element
+   */
+  setValue(value: string): Promise<void>;
+  /**
+   * Returns an instance of the native html select element
+   */
+  getInstance(): Promise<HTMLSelectElement>;
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  validateWcag(): Promise<void>;
+}

package/dist/types/components/gov-form/select/gov-form-select.stories.d.ts

@@ -0,0 +1,31 @@
+import { Sizes as GlobalSizes } from "../../../core/constants/sizes";
+declare const StoryConfiguration: {
+  title: string;
+  args: {
+    size: GlobalSizes;
+    value: string;
+    label: string;
+    errorMessage: string;
+    message: string;
+    disabled: boolean;
+  };
+  argTypes: {
+    size: {
+      control: string;
+      options: any;
+    };
+    value: string;
+    label: string;
+    errorMessage: string;
+    message: string;
+    disabled: string;
+  };
+  parameters: {
+    notes: string;
+  };
+};
+export declare const Playground: any;
+export declare const Invalid: any;
+export declare const Disabled: any;
+export declare const WithMessage: any;
+export default StoryConfiguration;

package/dist/types/components/gov-form/switch/constants.d.ts

@@ -0,0 +1,9 @@
+import { Sizes as GlobalSizes } from "../../../core/constants/sizes";
+export declare const Sizes: readonly [any, GlobalSizes._XS, GlobalSizes._S, GlobalSizes._M, GlobalSizes._L];
+export declare type SizesType = typeof Sizes[number];
+export declare const FormSwitchClass: {
+  root: string;
+  holder: string;
+  input: string;
+  indicator: string;
+};

package/dist/types/components/gov-form/switch/gov-form-switch.d.ts

@@ -0,0 +1,75 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { SizesType } from "./constants";
+export declare class GovFormSwitch {
+  private f;
+  private readonly checkboxId;
+  constructor();
+  host: HTMLGovFormSwitchElement;
+  /**
+   * Value of switch
+   */
+  readonly value: string;
+  /**
+   * Switch default state
+   */
+  readonly checked: boolean;
+  /**
+   * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.
+   * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
+   */
+  readonly required: boolean;
+  /**
+   * Makes the switch component disabled.
+   * This prevents users from being able to interact with the switch, and conveys its inactive state to assistive technologies.
+   */
+  readonly disabled: boolean;
+  /**
+   * Name of the switch.
+   */
+  readonly name: string;
+  /**
+   * Switch's size.
+   */
+  readonly size: SizesType;
+  /**
+   * Custom switch identifier.
+   */
+  readonly identifier: string;
+  /**
+   * Indicates the entered value does not conform to the format expected by the application.
+   */
+  readonly invalid: boolean;
+  /**
+   * Indicates the id of a component that describes the input.
+   */
+  readonly wcagDescribedBy: string;
+  /**
+   * Indicates the id of a component that labels the input.
+   */
+  readonly wcagLabelledBy: string;
+  /**
+   * Emitted when the switch has focus.
+   */
+  govFocus: EventEmitter<FocusEvent>;
+  /**
+   * Emitted when the switch loses focus.
+   */
+  govBlur: EventEmitter<FocusEvent>;
+  /**
+   * Emitted when the switch change value.
+   */
+  govChange: EventEmitter;
+  isChecked: boolean;
+  updateCheckedState(newValue: boolean): void;
+  validateSize(newValue: string): void;
+  componentWillLoad(): void;
+  componentDidRender(): Promise<void>;
+  render(): any;
+  private onFocusHandler;
+  private onBlurHandler;
+  private onChangeHandler;
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  validateWcag(): Promise<void>;
+}

package/dist/types/components/gov-form/switch/gov-form-switch.stories.d.ts

@@ -0,0 +1,29 @@
+import { Sizes as GlobalSizes } from "../../../core/constants/sizes";
+declare const StoryConfiguration: {
+  title: string;
+  args: {
+    size: GlobalSizes;
+    label: string;
+    errorMessage: string;
+    message: string;
+    disabled: boolean;
+  };
+  argTypes: {
+    size: {
+      control: string;
+      options: any;
+    };
+    label: string;
+    errorMessage: string;
+    message: string;
+    disabled: string;
+  };
+  parameters: {
+    notes: string;
+  };
+};
+export declare const Playground: any;
+export declare const Invalid: any;
+export declare const Disabled: any;
+export declare const WithMessage: any;
+export default StoryConfiguration;

package/dist/types/components/gov-grid/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const GridClass: {
+  root: string;
+};

package/dist/types/components/gov-grid/gov-grid.d.ts

@@ -0,0 +1,10 @@
+export declare class GovGrid {
+  constructor();
+  /**
+   * Determide if component should have inversed colors to be used on dark background
+   */
+  readonly columns: number;
+  host: HTMLGovGridElement;
+  get classNames(): string;
+  render(): any;
+}

package/dist/types/components/gov-icon/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const Types: readonly ["basic", "complex", "colored"];
+export declare type Type = typeof Types[number];
+export declare const IconClass: {
+  root: string;
+  holder: string;
+};

package/dist/types/components/gov-icon/gov-icon.d.ts

@@ -0,0 +1,22 @@
+import { Type } from "./constants";
+export declare class GovIcon {
+  el: HTMLElement;
+  /**
+   * Name of icon
+   */
+  name: string;
+  /**
+   * Type of icon
+   */
+  type: Type;
+  private iconData;
+  private visible;
+  private error;
+  private intersectionObserver;
+  private loadIconPathData;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): Promise<void>;
+  private waitUntilVisible;
+  render(): any;
+}

package/dist/types/components/gov-icon/list.d.ts

@@ -0,0 +1,3 @@
+export declare const complexIcons: string[];
+export declare const basicIcons: string[];
+export declare const icons: string[];

package/dist/types/components/gov-message/constants.d.ts

@@ -0,0 +1,9 @@
+import { Variants as GlobalVariants } from '../../core/constants/variants';
+export declare const Variants: readonly [any, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY, GlobalVariants.WARNING, GlobalVariants.ERROR, GlobalVariants.SUCCESS];
+export declare type VariantType = typeof Variants[number];
+export declare const MessageClass: {
+  root: string;
+  icon: string;
+  content: string;
+  close: string;
+};

package/dist/types/components/gov-message/gov-message.d.ts

@@ -0,0 +1,12 @@
+import { VariantType } from './constants';
+export declare class GovMessage {
+  private h;
+  constructor();
+  host: HTMLGovMessageElement;
+  /**
+   * Style variation of the content message.
+   */
+  readonly variant: VariantType;
+  validateVariant(newValue: string): void;
+  render(): any;
+}

package/dist/types/components/gov-message/gov-message.stories.d.ts

@@ -0,0 +1,33 @@
+import { Variants as GlobalVariants } from "../../core/constants/variants";
+declare const StoryConfiguration: {
+  title: string;
+  args: {
+    variant: GlobalVariants;
+    copy: string;
+    icon: any;
+    inverse: boolean;
+  };
+  argTypes: {
+    icon: {
+      control: string;
+      options: any[];
+    };
+    variant: {
+      control: string;
+      options: any;
+    };
+    copy: string;
+    inverse: string;
+  };
+  parameters: {
+    notes: string;
+  };
+};
+export declare const Playground: any;
+export declare const Primary: any;
+export declare const Secondary: any;
+export declare const Error: any;
+export declare const Success: any;
+export declare const Warning: any;
+export declare const Inverse: any;
+export default StoryConfiguration;

package/dist/types/components/gov-modal/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const ModalClass: {
+  root: string;
+  rootPrompt: string;
+  dialog: string;
+  inner: string;
+  header: string;
+  icon: string;
+  title: string;
+  content: string;
+  close: string;
+  actions: string;
+  bodyFix: string;
+};

package/dist/types/components/gov-modal/gov-modal.d.ts

@@ -0,0 +1,63 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+export declare class GovModal {
+  private h;
+  private readonly labelId;
+  private readonly contentId;
+  constructor();
+  host: HTMLGovModalElement;
+  /**
+   * Attribute for modal window display
+   */
+  open: boolean;
+  /**
+   * Title of modal window
+   */
+  label: string;
+  /**
+   * Role of modal
+   */
+  role: string;
+  /**
+   * Used to change the HMTL tag in the modal label for correct semantic structure
+   */
+  readonly labelTag: string;
+  /**
+   * String of id's that indicate alternative labels elements
+   */
+  wcaglabelledBy: string;
+  /**
+   * Indicates the id of a component that describes the modal.
+   */
+  wcagDescribedBy: string;
+  /**
+   * Adds accessible label for the modal close button that is only shown for screen readers.
+   */
+  wcagCloseLabel: string;
+  /**
+   * A string of identifiers that indicate alternative label elements for closing the modal window
+   */
+  wcagCloseLabelledBy: string;
+  /**
+   * Emitted when modal window closes.
+   */
+  govClose: EventEmitter<PointerEvent>;
+  validateLabelTag(newValue: string): void;
+  private showModal;
+  private hideModal;
+  componentWillRender(): Promise<void>;
+  componentDidRender(): Promise<void>;
+  render(): any;
+  private onCloseHandler;
+  /**
+   * Showing the modal
+   */
+  show(): Promise<void>;
+  /**
+   * Hidding the modal
+   */
+  hide(): Promise<void>;
+  /**
+   * Validate the WCAG attributes of the component
+   */
+  validateWcag(): Promise<void>;
+}

package/dist/types/components/gov-modal/gov-modal.stories.d.ts

@@ -0,0 +1,25 @@
+declare const StoryConfiguration: {
+  title: string;
+  args: {
+    label: string;
+    'wcag-close-label': string;
+    icon: any;
+  };
+  argTypes: {
+    icon: {
+      control: string;
+      options: any[];
+    };
+    label: {
+      control: string;
+    };
+    'wcag-close-label': {
+      control: string;
+    };
+  };
+  parameters: {
+    notes: string;
+  };
+};
+export declare const Playground: any;
+export default StoryConfiguration;

package/dist/types/components/gov-pagination/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const PaginationClass: {
+  root: string;
+  list: string;
+  item: string;
+  itemArrow: string;
+  itemSelect: string;
+  inner: string;
+};