@haiilo/catalyst 0.5.6 → 0.5.9

package/dist/types/components/cat-button/cat-button.d.ts

@@ -0,0 +1,134 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Breakpoint } from '../../utils/breakpoints';
+/**
+ * Buttons are used for interface actions. Primary style should be used only
+ * once per view for main call-to-action.
+ *
+ * @part button - The native anchor or button element.
+ * @part content - The textual content of the button.
+ * @part prefix - The prefix icon.
+ * @part suffix - The suffix icon.
+ */
+export declare class CatButton {
+  private button;
+  private mediaMatcher?;
+  private mediaQueryList?;
+  private mediaQueryListener?;
+  _iconOnly: boolean;
+  /**
+   * The rendering style of the button.
+   */
+  variant: 'filled' | 'outlined' | 'text';
+  /**
+   * The color palette of the button.
+   */
+  color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning';
+  /**
+   * Show an active status indicator on the left side of the button.
+   */
+  active: boolean;
+  /**
+   * The size of the button.
+   */
+  size: 'xs' | 's' | 'm' | 'l' | 'xl';
+  /**
+   * The name of the button, which gets paired with the button's value when
+   * submitted as part of a form. Corresponds with the native HTML name
+   * attribute.
+   */
+  name?: string;
+  /**
+   * The value of the button, which gets paired with the button's name when
+   * submitted as part of a form. Corresponds with the native HTML value
+   * attribute.
+   */
+  value?: string;
+  /**
+   * Specifies that the button should be disabled. A disabled button is unusable
+   * and un-clickable. Corresponds with the native HTML disabled attribute.
+   */
+  disabled: boolean;
+  /**
+   * Displays the button in a loading state with a spinner. Just like a disabled
+   * button, an inactive button is unusable and un-clickable. However, it
+   * retains the current focus state.
+   */
+  loading: boolean;
+  /**
+   * Allows the button to submit a form.
+   */
+  submit: boolean;
+  /**
+   * Ellipse overflowing button content.
+   */
+  ellipsed: boolean;
+  /**
+   * Use round button edges.
+   */
+  round: boolean;
+  /**
+   * A destination to link to, rendered in the href attribute of a link.
+   */
+  url?: string;
+  /**
+   * Specifies where to open the linked document.
+   */
+  urlTarget?: '_blank' | '_self';
+  /**
+   * The name of an icon to be displayed in the button.
+   */
+  icon?: string;
+  /**
+   * Hide the actual button content and only display the icon.
+   */
+  iconOnly: boolean | Breakpoint;
+  /**
+   * Display the icon on the right.
+   */
+  iconRight: boolean;
+  /**
+   * Adds a unique identifier for the button. Please note that with this
+   * particular component this ID is added inside the web component. If you need
+   * an ID on the HTML element, use the regular `id` attribute instead.
+   */
+  buttonId?: string;
+  /**
+   * Adds accessible label for the button that is only shown for screen
+   * readers. Typically, this label text replaces the visible text on the
+   * button for users who use assistive technology.
+   */
+  a11yLabel?: string;
+  onIconOnlyChanged(value: boolean | Breakpoint): void;
+  /**
+   * Emitted when the button is clicked.
+   */
+  catClick: EventEmitter<MouseEvent>;
+  /**
+   * Emitted when the button received focus.
+   */
+  catFocus: EventEmitter<FocusEvent>;
+  /**
+   * Emitted when the button loses focus.
+   */
+  catBlur: EventEmitter<FocusEvent>;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  haltDisabledEvents(event: Event): void;
+  /**
+   * Sets focus on the button. Use this method instead of `button.focus()`.
+   *
+   * @param options An optional object providing options to control aspects of
+   * the focusing process.
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  render(): any;
+  private get iconSize();
+  private get spinnerSize();
+  private get isIconButton();
+  private get hasPrefixIcon();
+  private get hasSuffixIcon();
+  private get content();
+  private onClick;
+  private onFocus;
+  private onBlur;
+}

package/dist/types/components/cat-card/cat-card.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Cards are surfaces that display content and actions on a single topic. They
+ * should be easy to scan for relevant and actionable information.
+ */
+export declare class CatCard {
+  render(): any;
+}

package/dist/types/components/cat-checkbox/cat-checkbox.d.ts

@@ -0,0 +1,69 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Checkboxes are used to let a user choose one or more options from a limited
+ * number of options.
+ *
+ * @part checkbox - The checkbox element.
+ * @part label - The label content.
+ */
+export declare class CatCheckbox {
+  private readonly id;
+  private input;
+  /**
+   * Checked state of the checkbox
+   */
+  checked: boolean;
+  /**
+   * Disabled state of the checkbox
+   */
+  disabled: boolean;
+  /**
+   * Indeterminate state of the checkbox
+   */
+  indeterminate: boolean;
+  /**
+   * Label of the checkbox which is presented in the UI
+   */
+  label: string;
+  /**
+   * Visually hide the label, but still show it to assistive technologies like screen readers.
+   */
+  labelHidden: boolean;
+  /**
+   * The name of the input
+   */
+  name?: string;
+  /**
+   * Required state of the checkbox
+   */
+  required: boolean;
+  /**
+   * The value of the checkbox
+   */
+  value?: string;
+  /**
+   * Emitted when the checked status of the checkbox is changed.
+   */
+  catChange: EventEmitter;
+  /**
+   * Emitted when the checkbox received focus.
+   */
+  catFocus: EventEmitter<FocusEvent>;
+  /**
+   * Emitted when the checkbox loses focus.
+   */
+  catBlur: EventEmitter<FocusEvent>;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  /**
+   * Sets focus on the checkbox. Use this method instead of `checkbox.focus()`.
+   *
+   * @param options An optional object providing options to control aspects of
+   * the focusing process.
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  render(): any;
+  private onInput;
+  private onFocus;
+  private onBlur;
+}

package/dist/types/components/cat-i18n/cat-i18n-registry.d.ts

@@ -0,0 +1,18 @@
+export declare class CatI18nRegistry {
+  private static instance;
+  private lang;
+  private readonly messages;
+  private constructor();
+  static getInstance(): CatI18nRegistry;
+  getLanguage(): string;
+  setLanguage(lang: string): void;
+  getMessage(key: string): string | undefined;
+  addMessage(lang: string, key: string, message: string): CatI18nRegistry;
+  addMessages(lang: string, i18n: {
+    [key: string]: string;
+  }): CatI18nRegistry;
+  removeMessage(lang: string, key: string): CatI18nRegistry;
+  removeMessages(lang: string, keys: string[]): CatI18nRegistry;
+  private buildEvent;
+  private getDict;
+}

package/dist/types/components/cat-icon/cat-icon-registry.d.ts

@@ -0,0 +1,15 @@
+export declare class CatIconRegistry {
+  private static instance;
+  private readonly icons;
+  private constructor();
+  static getInstance(): CatIconRegistry;
+  getIcon(name: string, setName?: string): string | undefined;
+  addIcon(name: string, data: string, setName?: string): CatIconRegistry;
+  addIcons(icons: {
+    [name: string]: string;
+  }, setName?: string): CatIconRegistry;
+  removeIcon(name: string, setName?: string): CatIconRegistry;
+  removeIcons(names: string[], setName?: string): CatIconRegistry;
+  private buildName;
+  private buildEvent;
+}

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

@@ -0,0 +1,23 @@
+/**
+ * Icons are used to provide additional meaning or in places where text label
+ * doesn't fit.
+ *
+ * @part icon - The span element wrapping the SVG icon.
+ */
+export declare class CatIcon {
+  private readonly iconRegistry;
+  /**
+   * The name of the icon.
+   */
+  icon: string;
+  /**
+   * The size of the icon.
+   */
+  size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline';
+  /**
+   * Adds accessible label for the icon that is only shown for screen
+   * readers. The `aria-hidden` attribute will be set if no label is present.
+   */
+  a11yLabel?: string;
+  render(): any;
+}

package/dist/types/components/cat-input/cat-input.d.ts

@@ -0,0 +1,130 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Inputs are used to allow users to provide text input when the expected input
+ * is short. As well as plain text, Input supports various types of text,
+ * including passwords and numbers.
+ *
+ * @part label - The label content.
+ * @part prefix - The text prefix.
+ * @part suffix - The text suffix.
+ */
+export declare class CatInput {
+  private readonly i18n;
+  private readonly id;
+  private input;
+  private inputValue;
+  /**
+   * Hint for form autofill feature.
+   */
+  autoComplete?: string;
+  /**
+   * Whether the input should show a clear button.
+   */
+  clearable: boolean;
+  /**
+   * Whether the input is disabled.
+   */
+  disabled: boolean;
+  /**
+   * Optional hint text to be displayed with the input.
+   */
+  hint?: string;
+  /**
+   * The name of an icon to be displayed in the input.
+   */
+  icon?: string;
+  /**
+   * Display the icon on the right.
+   */
+  iconRight: boolean;
+  /**
+   * The label for the input.
+   */
+  label: string;
+  /**
+   * Visually hide the label, but still show it to assistive technologies like screen readers.
+   */
+  labelHidden: boolean;
+  /**
+   * A maximum value for numeric values.
+   */
+  max?: number;
+  /**
+   * A maximum length (number of characters) for textual values.
+   */
+  maxLength?: number;
+  /**
+   * A minimum value for numeric values.
+   */
+  min?: number;
+  /**
+   * A minimum length (number of characters) for textual values.
+   */
+  minLength?: number;
+  /**
+   * The name of the form control. Submitted with the form as part of a name/value pair.
+   */
+  name: string;
+  /**
+   * The placeholder text to display within the input.
+   */
+  placeholder?: string;
+  /**
+   * A textual prefix to be displayed in the input.
+   */
+  textPrefix?: string;
+  /**
+   * A textual suffix to be displayed in the input.
+   */
+  textSuffix?: string;
+  /**
+   * The value is not editable.
+   */
+  readonly: boolean;
+  /**
+   * A value is required or must be check for the form to be submittable.
+   */
+  required: boolean;
+  /**
+   * Use round input edges.
+   */
+  round: boolean;
+  /**
+   * Type of form control.
+   */
+  type: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number';
+  /**
+   * The initial value of the control.
+   */
+  value?: string | number;
+  /**
+   * Emitted when the value is changed.
+   */
+  catChange: EventEmitter;
+  /**
+   * Emitted when the input received focus.
+   */
+  catFocus: EventEmitter<FocusEvent>;
+  /**
+   * Emitted when the input loses focus.
+   */
+  catBlur: EventEmitter<FocusEvent>;
+  onValueChange(value?: string | number): void;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  /**
+   * Sets focus on the input. Use this method instead of `input.focus()`.
+   *
+   * @param options An optional object providing options to control aspects of
+   * the focusing process.
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /**
+   * Clear the input.
+   */
+  clear(): Promise<void>;
+  render(): any;
+  private onInput;
+  private onFocus;
+  private onBlur;
+}

package/dist/types/components/cat-menu/cat-menu.d.ts

@@ -0,0 +1,31 @@
+import { Placement } from '@floating-ui/dom';
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class CatMenu {
+  private static readonly OFFSET;
+  private readonly id;
+  private triggerSlot?;
+  private trigger?;
+  private content?;
+  private trap?;
+  private keyListener?;
+  /**
+   * The placement of the menu.
+   */
+  placement: Placement;
+  /**
+   * Emitted when the menu is opened.
+   */
+  catOpen: EventEmitter<FocusEvent>;
+  /**
+   * Emitted when the menu is closed.
+   */
+  catClose: EventEmitter<FocusEvent>;
+  clickHandler(event: CustomEvent<MouseEvent>): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+  private get contentId();
+  private show;
+  private hide;
+  private update;
+}

package/dist/types/components/cat-radio/cat-radio.d.ts

@@ -0,0 +1,63 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Radio Buttons are graphical interface elements that allow user to choose
+ * only one of a predefined set of mutually exclusive options.
+ *
+ * @part label - The label content.
+ */
+export declare class CatRadio {
+  private readonly id;
+  private input;
+  /**
+   * Whether this radio is checked.
+   */
+  checked: boolean;
+  /**
+   * Whether this radio is disabled.
+   */
+  disabled: boolean;
+  /**
+   * The label of the radio that is visible.
+   */
+  label: string;
+  /**
+   * Visually hide the label, but still show it to assistive technologies like screen readers.
+   */
+  labelHidden: boolean;
+  /**
+   * The name of the radio component.
+   */
+  name?: string;
+  /**
+   * Whether the radio is required.
+   */
+  required: boolean;
+  /**
+   * The value of the radio component.
+   */
+  value?: string;
+  /**
+   * Emitted when the radio is changed.
+   */
+  catChange: EventEmitter;
+  /**
+   * Emitted when the radio received focus.
+   */
+  catFocus: EventEmitter<FocusEvent>;
+  /**
+   * Emitted when the radio loses focus.
+   */
+  catBlur: EventEmitter<FocusEvent>;
+  componentWillRender(): void;
+  /**
+   * Sets focus on the radio. Use this method instead of `radio.focus()`.
+   *
+   * @param options An optional object providing options to control aspects of
+   * the focusing process.
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  render(): any;
+  private onChange;
+  private onFocus;
+  private onBlur;
+}

package/dist/types/components/cat-scrollable/cat-scrollable.d.ts

@@ -0,0 +1,52 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * An element to display scrollable content.
+ */
+export declare class CatScrollable {
+  scrollElement?: HTMLElement;
+  scrollWrapperElement?: HTMLElement;
+  private readonly init;
+  private readonly destroyed;
+  private scrolled;
+  /** Flags to enable/disable scroll shadowX. */
+  shadowX: boolean;
+  /** Flags to enable/disable scroll shadowY. */
+  shadowY: boolean;
+  /** Flags to enable/disable overflowX. */
+  overflowX: boolean;
+  /** Flags to enable/disable overflowY. */
+  overflowY: boolean;
+  /** Flag to enable/disable overscroll behavior. */
+  overscroll: boolean;
+  /**
+   * Flag to fire an initial event after content initialization.
+   */
+  scrolledInit: boolean;
+  /**
+   * Buffer to be used to calculate the scroll distance.
+   */
+  scrolledBuffer: number;
+  /**
+   * Emitted when the content is fully scrolled to the top.
+   */
+  scrolledTop: EventEmitter<void>;
+  /**
+   * Emitted when the content is fully scrolled to the left.
+   */
+  scrolledLeft: EventEmitter<void>;
+  /**
+   * Emitted when the content is fully scrolled to the right.
+   */
+  scrolledRight: EventEmitter<void>;
+  /**
+   * Emitted when the content is fully scrolled to the bottom.
+   */
+  scrolledBottom: EventEmitter<void>;
+  componentDidRender(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any[];
+  private attachEmitter;
+  private getScrollOffset;
+  private toggleClass;
+}

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

@@ -0,0 +1,28 @@
+/**
+ * Skeletons are used to show where content will eventually be drawn.
+ */
+export declare class CatSkeleton {
+  /**
+   * The animation style of the skeleton.
+   */
+  effect: 'plain' | 'sheen' | 'pulse';
+  /**
+   * The rendering style of the skeleton.
+   */
+  variant: 'rectangle' | 'square' | 'circle' | 'head' | 'body';
+  /**
+   * The size of the skeleton. If the variant is set to "head", the size values
+   * "xs" to "xl" translate to the head levels `h1` to `h5`.
+   */
+  size: 'xs' | 's' | 'm' | 'l' | 'xl';
+  /**
+   * The number of text lines to be rendered for "head" and "body" variants.
+   * Defaults to 1 for "head" and 3 for "body". Will be ignored for other
+   * variants.
+   */
+  lines?: number;
+  render(): any;
+  private get count();
+  private get style();
+  private random;
+}

package/dist/types/components/cat-spinner/cat-spinner.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Spinners are used to indicate users that their action is being processed.
+ */
+export declare class CatSpinner {
+  /**
+   * The size of the spinner.
+   */
+  size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline';
+  /**
+   * Adds accessible label for the spinner that is only shown for screen
+   * readers. The `aria-hidden` attribute will be set if no label is present.
+   */
+  a11yLabel?: string;
+  render(): any;
+}

package/dist/types/components/cat-textarea/cat-textarea.d.ts

@@ -0,0 +1,85 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Textarea specifies a control that allows user to write text over multiple
+ * rows. Used when the expected user input is long. For shorter input, use the
+ * input component.
+ *
+ * @part label - The label content.
+ */
+export declare class CatTextarea {
+  private readonly id;
+  private textarea;
+  /**
+   * Whether the textarea is disabled.
+   */
+  disabled: boolean;
+  /**
+   * Optional hint text to be displayed with the textarea.
+   */
+  hint?: string;
+  /**
+   * The label for the textarea.
+   */
+  label: string;
+  /**
+   * Visually hide the label, but still show it to assistive technologies like screen readers.
+   */
+  labelHidden: boolean;
+  /**
+   * A maximum length (number of characters) for textual values.
+   */
+  maxLength?: number;
+  /**
+   * A minimum length (number of characters) for textual values.
+   */
+  minLength?: number;
+  /**
+   * The name of the form control. Submitted with the form as part of a name/value pair.
+   */
+  name: string;
+  /**
+   * The placeholder text to display within the input.
+   */
+  placeholder?: string;
+  /**
+   * The value is not editable.
+   */
+  readonly: boolean;
+  /**
+   * A value is required or must be check for the form to be submittable.
+   */
+  required: boolean;
+  /**
+   * Specifies the initial number of lines in the textarea.
+   */
+  rows: number;
+  /**
+   * The initial value of the control.
+   */
+  value?: string | number;
+  /**
+   * Emitted when the value is changed.
+   */
+  catChange: EventEmitter;
+  /**
+   * Emitted when the textarea received focus.
+   */
+  catFocus: EventEmitter<FocusEvent>;
+  /**
+   * Emitted when the textarea loses focus.
+   */
+  catBlur: EventEmitter<FocusEvent>;
+  componentWillRender(): void;
+  componentDidLoad(): void;
+  /**
+   * Sets focus on the textarea. Use this method instead of `textarea.focus()`.
+   *
+   * @param options An optional object providing options to control aspects of
+   * the focusing process.
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  render(): any;
+  private onInput;
+  private onFocus;
+  private onBlur;
+}