/* eslint-disable */
/* tslint:disable */
/**
* This is an autogenerated file created by the Stencil compiler.
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
import { CalendarViewType, EventType } from "./components/application/calendar/calendar/types";
import { Language } from "./components/application/code-highlighter/constants";
export { CalendarViewType, EventType } from "./components/application/calendar/calendar/types";
export { Language } from "./components/application/code-highlighter/constants";
export namespace Components {
/**
* @name Accordion
* @description An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.
* @overview The accordion component delivers large amounts of content in a small space through progressive disclosure. The header title give the user a high level overview of the content allowing the user to decide which sections to read.
* Accordions can make information processing and discovering more effective. However, it does hide content from users and it’s important to account for a user not noticing or reading all of the included content. If a user is likely to read all of the content then don’t use an accordion as it adds the burden of an extra click; instead use a full scrolling page with normal headers.
* @category Data Display
* @subcategory Accordion
* @tags display
* @img /assets/img/accordion.webp
* @imgDark /assets/img/accordion-dark.webp
*/
interface GoatAccordion {
/**
* Accordion item dropdown alignment.
*/
"align": 'start' | 'end';
"multiple": boolean;
/**
* The According size.
*/
"size": 'sm' | 'md' | 'lg';
}
/**
* @name Accordion Item
* @description An accordion item is single item in an accordion list. It contains a header and a content section that can be expanded or collapsed by the user.
* @overview The accordion item component is a single item in an accordion list. It contains a header and a content section that can be expanded or collapsed by the user. The accordion item can be used in conjunction with the accordion component to create a list of expandable items.
* @category Data Display
* @subcategory Accordion
* @childComponent true
*/
interface GoatAccordionItem {
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"disabled": boolean;
/**
* The menu item value.
*/
"heading": string;
/**
* Menu item selection state.
*/
"open": boolean;
}
/**
* @name Avatar
* @description The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
* @category Data Display
* @tags display
* @example
*/
interface GoatAvatar {
"name": string;
/**
* Avatar size.
*/
"size": string;
"src": string;
}
/**
* @name Badge
* @description The badge component is used to display a small amount of information to the user.
* @category Informational
* @tag content
* @example
*/
interface GoatBadge {
"color": | 'primary'
| 'secondary'
| 'success'
| 'error'
| 'warning';
"content": string;
}
/**
* @name Breadcrumb
* @description A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or web application.
* @category Navigation
* @tags navigation
* @example HomePage
*/
interface GoatBreadcrumb {
}
interface GoatBreadcrumbItem {
"active": boolean;
/**
* Hyperlink to navigate to on click.
*/
"href": string;
"position": string;
/**
* Sets or retrieves the window or frame at which to target content.
*/
"target": string;
}
/**
* @name Button
* @description Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
* @overview Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.
* @category General
* @tags controls
* @example
* Button CTA
*
*/
interface GoatButton {
/**
* The `appendData` property allows you to attach additional data to the button component. This data can be of any type, making it versatile for various use cases. It's particularly useful for passing extra context or information that can be accessed in event handlers or other component logic.
*/
"appendData": any;
/**
* Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
*/
"color": | 'primary'
| 'secondary'
| 'success'
| 'danger'
| 'warning'
| 'white'
| 'black';
"configAria": any;
/**
* Color variant for dark mode, applicable when [data-theme="dark"] is set.
*/
"darkModeColor"?: | 'primary'
| 'secondary'
| 'success'
| 'danger'
| 'warning'
| 'white'
| 'black';
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"disabled": boolean;
/**
* If button is disabled, the reason why it is disabled.
*/
"disabledReason": string;
/**
* Hyperlink to navigate to on click.
*/
"href": string;
/**
* Icon which will displayed on button. Possible values are icon names.
*/
"icon"?: string;
/**
* Icon alignment. Possible values are `"start"`, `"end"`. Defaults to `"end"`.
*/
"iconAlign": 'start' | 'end';
/**
* Button selection state.
*/
"selected": boolean;
/**
* Sets blur on the native `button` in `goat-button`. Use this method instead of the global `button.blur()`.
*/
"setBlur": () => Promise;
/**
* Sets focus on the native `button` in `goat-button`. Use this method instead of the global `button.focus()`.
*/
"setFocus": () => Promise;
/**
* If true, a loader will be displayed on button.
*/
"showLoader": boolean;
/**
* Button size. Possible values are `"sm"`, `"md"`, `"lg"`, `"xl"`, `"2xl"`, `"full"`. Defaults to `"md"`.
*/
"size": 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
/**
* Sets or retrieves the window or frame at which to target content.
*/
"target": string;
/**
* Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
*/
"throttleDelay": number;
/**
* If true, the button will be in a toggled state.
*/
"toggle": boolean;
/**
* Triggers a click event on the native `button` in `goat-button`. Use this method instead of the global `button.click()`.
*/
"triggerClick": () => Promise;
/**
* Button type based on which actions are performed when the button is clicked.
*/
"type": 'button' | 'submit' | 'reset';
/**
* The visual style of the button. Possible variant values: `"default"` is a filled button. `"outline"` is an outlined button. `"ghost"` is a transparent button. `"light"` is a light color button. Possible sub-variant values: `"simple"` is a simple button without default padding at end. `"block"` is a full-width button that spans the full width of its container. Mix and match the `variant` and `sub-variant` to create a variety of buttons. `"default.simple"`, `"outline.block"` etc.
*/
"variant": | 'default'
| 'outline'
| 'ghost'
| 'light'
| 'neo'
| 'link'
| 'default.simple'
| 'outline.simple'
| 'ghost.simple'
| 'light.simple'
| 'neo.simple'
| 'link.simple';
}
/**
* @name Button Group
* @description Group a series of buttons together on a single line with the button group, and super-power.
* @category General
* @tags controls
* @example
*
*
*
*/
interface GoatButtonGroup {
}
/**
* @name Calendar
* @description The calendar component is used to display information in a daily, weekly, monthly, or category view.
* @category Data Display
* @tags calendar
* @img /assets/img/calendar.webp
* @imgDark /assets/img/calendar-dark.webp
*/
interface GoatCalendar {
/**
* Available views.
*/
"availableViews": CalendarViewType[];
/**
* Context date.
*/
"contextDate": Date;
/**
* Event clickable.
*/
"eventClickable": boolean;
/**
* Calendar events.
*/
"events": EventType[];
/**
* Show loader.
*/
"showLoader": boolean;
/**
* Timezone.
*/
"timezone": string;
/**
* Calendar view.
*/
"view": 'day' | 'week' | 'month' | string;
}
interface GoatCalendarColumnView {
"contextDate": Date;
"currentTime": Date;
"days": number;
"eventClickable": boolean;
"events": any[];
"view": string;
}
interface GoatCalendarColumnViewBackground {
"currentTime": Date;
"dateRange": any;
}
interface GoatCalendarMonthView {
"contextDate": Date;
"currentTime": Date;
"eventClickable": boolean;
"events": any[];
}
interface GoatCalendarMonthViewBackground {
"columns": number;
}
/**
* @name Canvas
* @category Up coming
* @description Canvas for drawing lines and shapes on.
* @img /assets/img/canvas.webp
*/
interface GoatCanvas {
"padding": number;
"shapes": any[];
"viewbox"?: string;
"zoom": number;
}
interface GoatCard {
"shadowLevel": 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | undefined;
}
interface GoatCbCompoundExpression {
"conditionOperator": 'and' | 'or';
"fieldLabel": string;
"fieldName": string;
}
interface GoatCbDivider {
"connectEnd": boolean;
"connectStart": boolean;
"vertical": boolean;
}
interface GoatCbExpression {
"operatorValue": string;
"operators": any[];
}
interface GoatCbPredicate {
"conditionOperator": 'and' | 'or';
"vertical": boolean;
}
/**
* @name Chart Doughnut
* @description A doughnut chart is a circular chart with a blank center. The chart is similar to a pie chart with the center cut out. The area in the center can be used to display information.
* @category Charts
* @tag chart
* @img /assets/img/chart-doughnut.webp
* @imgDark /assets/img/chart-doughnut-dark.webp
*/
interface GoatChartDoughnut {
"data": any;
"label": string;
"margin": number;
"showLabels": boolean;
"width": number;
}
/**
* @name Chart Pie
* @description A pie chart (also known as a circle chart) is a circular statistical graphic that visually represents numerical proportions. It is commonly used to illustrate how parts relate to the whole for a specific categorical variable.
* @category Charts
* @tag chart
* @img /assets/img/chart-pie.webp
* @imgDark /assets/img/chart-pie-dark.webp
*/
interface GoatChartPie {
"data": any;
"label": string;
"margin": number;
"showLabels": boolean;
"width": number;
}
/**
* @name Checkbox
* @description Captures boolean input with an optional indeterminate mode.
* @category Form Inputs
* @tags input, form
* @example Want ice cream?
*/
interface GoatCheckbox {
"configAria": any;
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"disabled": boolean;
"getComponentId": () => Promise;
"intermediate": boolean;
/**
* The checkbox label.
*/
"label": string;
"layer"?: 'background' | '01' | '02';
/**
* The input field name.
*/
"name": string;
"readonly": boolean;
/**
* If true, required icon is show. Defaults to `false`.
*/
"required": boolean;
"rounded": boolean;
/**
* Sets blur on the native `input` in `goat-input`. Use this method instead of the global `input.blur()`.
*/
"setBlur": () => Promise;
/**
* Sets focus on the native `input` in `goat-input`. Use this method instead of the global `input.focus()`.
*/
"setFocus": () => Promise;
/**
* The button size. Possible values are: `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
*/
"size": 'sm' | 'md' | 'lg';
/**
* The input field value.
*/
"value": boolean;
}
/**
* @name Code Editor
* @description A browser based code editor.
* @category Form Inputs
* @tags input, form
* @img /assets/img/code-editor.webp
* @imgDark /assets/img/code-editor-dark.webp
*/
interface GoatCodeEditor {
/**
* Set the amount of time, in milliseconds, to wait to trigger the `onChange` event after each keystroke.
*/
"debounce": number;
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"disabled": boolean;
"getComponentId": () => Promise;
"language": 'javascript' | 'json' | 'html';
"libSource": any;
"lineNumbers": 'off' | 'on';
"minimap": boolean;
/**
* The input field name.
*/
"name": string;
"readonly": boolean;
/**
* If true, required icon is show. Defaults to `false`.
*/
"required": boolean;
/**
* Sets blur on the native `input` in `goat-input`. Use this method instead of the global `input.blur()`.
*/
"setBlur": () => Promise;
/**
* Sets focus on the native `input` in `goat-input`. Use this method instead of the global `input.focus()`.
*/
"setFocus": () => Promise;
/**
* The input field value.
*/
"value": string;
}
/**
* @name Code Highlighter
* @description A browser based code highlighter.
* @category Data Display
* @tag display, code
* @img /assets/img/code-highlighter.webp
* @imgDark /assets/img/code-highlighter-dark.webp
*/
interface GoatCodeHighlighter {
/**
* Format the code snippet.
*/
"format": boolean;
/**
* Hide the copy button.
*/
"hideCopy": boolean;
/**
* Display the code snippet inline.
*/
"inline": boolean;
/**
* The language of the code snippet.
*/
"language": Language;
/**
* Display line numbers.
*/
"lineNumbers": boolean;
/**
* The code snippet to highlight.
*/
"value": string;
}
/**
* @name Condition Builder
* @description A condition builder is a component that allows users to build a condition using a set of rules.
* @category Up coming
* @tag content
* @img /assets/img/condition-builder.webp
*/
interface GoatConditionBuilder {
"content": string;
}
interface GoatContainer {
"size": 'max' | 'xl' | 'lg' | 'md' | 'sm' | 'full';
}
/**
* @name Current Time
* @description Displays the current time in a given timezone.
* @category Others
* @example
*/
interface GoatCurrentTime {
"timezone": string;
}
/**
* @name Date Picker
* @category Form Inputs
* @description Captures date input.
* @example
*/
interface GoatDatePicker {
"configAria": any;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `goatChange` event after each keystroke.
*/
"debounce": number;
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"disabled": boolean;
"getComponentId": () => Promise;
"helperText": string;
"inline": boolean;
"invalid": boolean;
"invalidText": string;
"label": string;
/**
* The input field name.
*/
"name": string;
/**
* The input field placeholder.
*/
"placeholder": string;
/**
* If true, the user read the value cannot modify it. Defaults to `false`.
*/
"readonly": boolean;
/**
* If true, required icon is show. Defaults to `false`.
*/
"required": boolean;
/**
* Sets blur on the native `input` in `goat-input`. Use this method instead of the global `input.blur()`.
*/
"setBlur": () => Promise;
/**
* Sets focus on the native `input` in `goat-input`. Use this method instead of the global `input.focus()`.
*/
"setFocus": () => Promise;
/**
* The input field size. Possible values are: `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
*/
"size": 'sm' | 'md' | 'lg';
/**
* The input field value.
*/
"value"?: string | number | null;
"warn": boolean;
"warnText": string;
}
/**
* @name Divider
* @description A divider can be used to segment content vertically or horizontally.
* @category Layout
* @example or
*/
interface GoatDivider {
"vertical": boolean;
}
/**
* @name Dropdown
* @description Enables native inputs to be used within a Form field.
* @category Navigation
* @subcategory Dropdown
* @img /assets/img/dropdown.webp
* @imgDark /assets/img/dropdown-dark.webp
*/
interface GoatDropdown {
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"disabled": boolean;
"managed": boolean;
"open": boolean;
"placements": string;
"setFocus": () => Promise;
"trigger": 'click' | 'hover' | 'manual';
}
/**
* @name Dropdown Menu
* @description The Dropdown Menu component is used to display a list of options.
* @category Navigation
* @subcategory Dropdown
* @childComponent true
*/
interface GoatDropdownMenu {
/**
* Sets focus on first menu item. Use this method instead of the global `element.focus()`.
*/
"setFocus": () => Promise;
}
/**
* @name Empty State
* @description A message that displays when there is no information to display.
* @category Data Display
* @img /assets/img/empty-state.webp
* @imgDark /assets/img/empty-state-dark.webp
*/
interface GoatEmptyState {
"action": string;
"actionDisabled": boolean;
"actionUrl": string;
"actionVariant": 'default' | 'outline' | 'ghost';
"description": string;
"headline": string;
"illustration": 'no-document';
}
/**
* @name Flow Designer
* @category Up coming
* @description Flow Designer is a component that allows users to create and edit flows.
* @img /assets/img/flow-designer.webp
*/
interface GoatFlowDesigner {
"blockSize": number;
"data": any[];
"disabled": boolean;
}
/**
* @name Footer
* @description The footer component provides a container for displaying additional navigation information about a site.
* @overview The footer is one of the most underestimated sections of a website being located at the very bottom of every page, however, it can be used as a way to try to convince users to stay on your website if they haven’t found the information they’ve been looking for inside the main content area.
* @category Navigation
* @img /assets/img/footer.webp
* @imgDark /assets/img/footer-dark.webp
*/
interface GoatFooter {
"variant": 'simple';
"year": number;
}
interface GoatFooterCopyright {
"copyright": string;
"copyrightHref": string;
"year": number;
}
interface GoatFooterLinks {
"links": { name: string; href: string }[];
}
/**
* @name Form Control
* @description The Form Control component adds a label and caption for its child control.
* @category Form Inputs
* @tags form
* @example
*
*
*/
interface GoatFormControl {
"helperText": string;
"inline": boolean;
"invalid": boolean;
"invalidText": string;
"label": string;
/**
* Whether the form control is required.
*/
"required": boolean;
"skeleton": boolean;
"warn": boolean;
"warnText": string;
}
/**
* @name Header
* @description Header component is used to display a header with a brand, navigation, and actions.
* @category Navigation
* @img /assets/img/header.webp
* @imgDark /assets/img/header-dark.webp
*/
interface GoatHeader {
/**
* Defines the primary color of the header. This can be set to predefined color names to apply specific color themes.
*/
"color": | 'primary'
| 'secondary'
| 'success'
| 'danger'
| 'warning'
| 'white'
| 'black'
| string;
/**
* Color variant for dark mode, applicable when [data-theme="dark"] is set.
*/
"darkModeColor"?: | 'primary'
| 'secondary'
| 'success'
| 'danger'
| 'warning'
| 'white'
| 'black'
| string;
"float": boolean;
}
interface GoatHeaderAction {
"badge": string;
"configAria": any;
/**
* Hyperlink to navigate to on click.
*/
"href": string;
/**
* Icon which will displayed on button. Possible values are icon names.
*/
"icon": string;
/**
* Button selection state.
*/
"selected": boolean;
"setColor": (color: string) => Promise;
/**
* Button size. Possible values are `"sm"`, `"md"`, `"lg"`, `"xl"`, `"xxl"`, `"none"`. Defaults to `"md"`.
*/
"size": 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'none';
/**
* Sets or retrieves the window or frame at which to target content.
*/
"target": string;
}
interface GoatHeaderBrand {
"href": string;
"logo": string;
"name": string;
"setColor": (color: string) => Promise;
"subTitle": string;
}
/**
* @name HTML Editor
* @description HTML Editor component is a WYSIWYG editor that allows users to edit HTML content.
* @category Up coming
* @tags input, form
* @img /assets/img/html-editor.webp
* @imgDark /assets/img/html-editor-dark.webp
*/
interface GoatHtmlEditor {
/**
* Set the amount of time, in milliseconds, to wait to trigger the `onChange` event after each keystroke.
*/
"debounce": number;
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"disabled": boolean;
"getComponentId": () => Promise;
"layer"?: 'background' | '01' | '02';
"lineNumbers": 'off' | 'on';
"mentions": { label: string; value: string }[];
"mentionsSearch": 'contains' | 'managed';
/**
* The input field name.
*/
"name": string;
/**
* The input field placeholder.
*/
"placeholder": string;
"readonly": boolean;
/**
* If true, required icon is show. Defaults to `false`.
*/
"required": boolean;
/**
* Sets blur on the native `input` in `goat-input`. Use this method instead of the global `input.blur()`.
*/
"setBlur": () => Promise;
/**
* Sets focus on the native `input` in `goat-input`. Use this method instead of the global `input.focus()`.
*/
"setFocus": () => Promise;
"showSuggestionCharacter": boolean;
"showToolbar": boolean;
"suggestionCharacter": string;
"theme": 'vs-light' | 'vs-dark';
/**
* The input field value.
*/
"value": string;
}
/**
* @name Icon
* @description Icons are visual symbols used to represent ideas, objects, or actions.
* @overview Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
* @category General
* @example
*/
interface GoatIcon {
/**
* The identifier for the icon. This name corresponds to a specific SVG asset in the icon set.
*/
"name": string;
/**
* The size of the icon. This can be specified in pixels (px) or rem units to control the icon's dimensions. If a number is provided, it will be treated as rem units. For example, '16px', '2rem', or 2 would be valid values.
*/
"size": string;
}
interface GoatImage {
"darkSrc": string;
"imageTitle": string;
"src": string;
}
/**
* @name Input
* @description Enables native inputs to be used within a Form field.
* @category Form Inputs
* @tags input, form
* @example
*/
interface GoatInput {
/**
* Indicates whether the value of the control can be automatically completed by the browser.
*/
"autocomplete": 'on' | 'off';
"configAria": any;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `goatChange` event after each keystroke.
*/
"debounce": number;
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"disabled": boolean;
"getComponentId": () => Promise;
"helperText": string;
"inline": boolean;
"invalid": boolean;
"invalidText": string;
"label": string;
/**
* The input field name.
*/
"name": string;
/**
* The input field placeholder.
*/
"placeholder": string;
/**
* If true, the user read the value cannot modify it. Defaults to `false`.
*/
"readonly": boolean;
/**
* If true, required icon is show. Defaults to `false`.
*/
"required": boolean;
/**
* Sets blur on the native `input` in `goat-input`. Use this method instead of the global `input.blur()`.
*/
"setBlur": () => Promise;
/**
* Sets focus on the native `input` in `goat-input`. Use this method instead of the global `input.focus()`.
*/
"setFocus": () => Promise;
/**
* The input field size. Possible values are: `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
*/
"size": 'sm' | 'md' | 'lg';
"skeleton": boolean;
/**
* The type of control to display. Possible values are: `"text"`, `"password"`, `"email"`, `"tel"`. Defaults to `"text"`.
*/
"type": 'text' | 'password' | 'email' | 'tel';
/**
* The input field value.
*/
"value": string;
"warn": boolean;
"warnText": string;
}
/**
* @name Input URL
* @description A specialized input field for URL validation.
* @category Up coming
* @tags input, form, url
* @example
*/
interface GoatInputUrl {
/**
* Set the amount of time, in milliseconds, to wait to trigger the `valueChange` event after each keystroke.
*/
"debounce": number;
/**
* If true, the user cannot interact with the input. Defaults to `false`.
*/
"disabled": boolean;
"editing": boolean;
/**
* Get the component's unique ID
*/
"getComponentId": () => Promise;
/**
* The input field name.
*/
"name": string;
/**
* The input field placeholder.
*/
"placeholder": string;
/**
* Sets blur on the native `input`. Use this method instead of the global `input.blur()`.
*/
"setBlur": () => Promise;
/**
* Sets focus on the native `input`. Use this method instead of the global `input.focus()`.
*/
"setFocus": () => Promise;
/**
* The input field size. Possible values are: `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
*/
"size": 'sm' | 'md' | 'lg';
/**
* The input field value.
*/
"value": string;
}
/**
* @name Link
* @description Links allow users to click their way from page to page.
* @category Navigation
* @example Link
*/
interface GoatLink {
/**
* Hyperlink to navigate to on click.
*/
"href": string;
/**
* Sets or retrieves the window or frame at which to target content.
*/
"target": string;
"triggerClick": () => Promise;
}
/**
* @name Menu
* @description Menus display a list of choices on temporary surfaces.
* @category Navigation
* @subcategory Menu
* @img /assets/img/menu.webp
* @imgDark /assets/img/menu-dark.webp
*/
interface GoatMenu {
"empty": boolean;
"emptyStateDescription": string;
"emptyStateHeadline": string;
"layer"?: 'background' | '01' | '02';
/**
* Sets focus on first menu item. Use this method instead of the global `element.focus()`.
*/
"setFocus": () => Promise;
"showLoader": boolean;
/**
* The menu item size. Possible values are: `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
*/
"size": 'sm' | 'md' | 'lg';
"value"?: string | number;
}
/**
* @name MenuDivider
* @description A divider to separate menu items.
* @category Layout
* @subcategory Menu
* @childComponents true
* @example or
*/
interface GoatMenuDivider {
}
/**
* @name Menu Item
* @description Menu items display a list of choices on temporary surfaces.
* @category Navigation
* @subcategory Menu
* @childComponent true
*/
interface GoatMenuItem {
"color": | 'default'
| 'primary'
| 'secondary'
| 'success'
| 'danger'
| 'warning'
| 'white'
| 'black';
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"disabled": boolean;
/**
* Hyperlink to navigate to on click.
*/
"href": string;
"layer"?: 'background' | '01' | '02';
"selectable": boolean;
/**
* Menu item selection state.
*/
"selected": boolean;
/**
* Sets blur on the native `input` in `goat-input`. Use this method instead of the global `input.blur()`.
*/
"setBlur": () => Promise;
/**
* Sets focus on the native `input` in `goat-input`. Use this method instead of the global `input.focus()`.
*/
"setFocus": () => Promise;
/**
* Sets or retrieves the window or frame at which to target content.
*/
"target": string;
/**
* The menu item value.
*/
"value"?: string | number | null;
}
/**
* @name Modal
* @description Modals are used to display content in a layer above the app.
* @category Informational
* @subcategory Modal
* @tags controls
* @img /assets/img/modal.webp
* @imgDark /assets/img/modal-dark.webp
*/
interface GoatModal {
"heading": string;
"hideClose": boolean;
/**
* Specify whether the Modal is managed by the parent component
*/
"managed": boolean;
/**
* Specify whether the Modal is currently open
*/
"open": boolean;
"showLoader": boolean;
"size": 'sm' | 'md' | 'lg';
"subheading": string;
}
/**
* @name Modal Content
* @description The Modal Content component is used to display the content within a modal.
* @category Informational
* @subcategory Modal
* @childComponent true
*/
interface GoatModalContent {
"type": 'text' | 'borderless' | 'default';
}
/**
* @name Notification
* @description Notifications are messages that communicate information to the user.
* @category Informational
* @tags notification
* @example
* Successful saved the record
*
*/
interface GoatNotification {
/**
* Action to be displayed on the notification
*/
"action": string;
/**
* Whether the notification is dismissible
*/
"dismissible": boolean;
/**
* Whether to use high contrast mode
*/
"highContrast": boolean;
/**
* Whether the notification should be displayed inline
*/
"inline": boolean;
/**
* Whether the notification is managed by the notification manager
*/
"managed": boolean;
/**
* The state of the notification. Possible values are: 'success', 'error', 'info', 'warning'
*/
"state": 'success' | 'error' | 'info' | 'warning';
}
/**
* @name Notification Manager
* @description The Notification Manager handles the organization and display of notifications within the application.
* @category Informational
* @tags notification
* @img /assets/img/notification-manager.webp
* @imgDark /assets/img/notification-manager-dark.webp
*/
interface GoatNotificationManager {
"name": string;
"position": | 'top-right'
| 'top-left'
| 'bottom-right'
| 'bottom-left';
}
/**
* @name Number
* @description Number input lets users enter a numeric value and incrementally increase or decrease the value with a two-segment control.
* @category Form Inputs
* @tags input, form
* @example
*/
interface GoatNumber {
/**
* Indicates whether the value of the control can be automatically completed by the browser.
*/
"autocomplete": 'on' | 'off';
"configAria": any;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `goatChange` event after each keystroke.
*/
"debounce": number;
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"disabled": boolean;
"getComponentId": () => Promise;
"helperText": string;
"hideActions": boolean;
"inline": boolean;
"invalid": boolean;
"invalidText": string;
"label": string;
/**
* The input field name.
*/
"name": string;
/**
* The input field placeholder.
*/
"placeholder": string;
/**
* If true, the user read the value cannot modify it. Defaults to `false`.
*/
"readonly": boolean;
/**
* If true, required icon is show. Defaults to `false`.
*/
"required": boolean;
/**
* Sets blur on the native `input` in `goat-input`. Use this method instead of the global `input.blur()`.
*/
"setBlur": () => Promise;
/**
* Sets focus on the native `input` in `goat-input`. Use this method instead of the global `input.focus()`.
*/
"setFocus": () => Promise;
/**
* The input field size. Possible values are: `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
*/
"size": 'sm' | 'md' | 'lg';
"skeleton": boolean;
/**
* The input state. Possible values are: `"success"`, `"error"`, `"warning"`, 'default'. Defaults to `"default"`.
*/
"state": 'success' | 'error' | 'warning' | 'default';
/**
* The input field value.
*/
"value"?: number | null;
"warn": boolean;
"warnText": string;
}
/**
* @name Popover
* @description The Popover component is used to display additional information.
* @category Informational
* @subcategory Popover
* @img /assets/img/dropdown.webp
* @imgDark /assets/img/dropdown-dark.webp
*/
interface GoatPopover {
/**
* Time in milliseconds to wait before hiding the popover when the trigger is set to `"hover"`.
*/
"dismissTimeout": number;
/**
* Hides the popover. This method is useful when the trigger is set to `"manual"`.
*/
"hide": () => Promise;
/**
* The offset of the popover relative to the trigger element. This value is used to adjust the position of the popover along the axis of the trigger element.
*/
"offset": number;
/**
* Determines whether the popover is open.
*/
"open": boolean;
/**
* Time in milliseconds to wait before showing the popover when the trigger is set to `"hover"`.
*/
"openTimeout": number;
/**
* The placement of the popover relative to the trigger element. Possible values are: - `"top"`: The popover is placed above the trigger element. - `"top-start"`: The popover is placed above the trigger element, aligned to the start. - `"top-end"`: The popover is placed above the trigger element, aligned to the end. - `"right"`: The popover is placed to the right of the trigger element. - `"right-start"`: The popover is placed to the right of the trigger element, aligned to the start. - `"right-end"`: The popover is placed to the right of the trigger element, aligned to the end. - `"bottom"`: The popover is placed below the trigger element. - `"bottom-start"`: The popover is placed below the trigger element, aligned to the start. - `"bottom-end"`: The popover is placed below the trigger element, aligned to the end. - `"left"`: The popover is placed to the left of the trigger element. - `"left-start"`: The popover is placed to the left of the trigger element, aligned to the start. - `"left-end"`: The popover is placed to the left of the trigger element, aligned to the end.
*/
"placements": string;
/**
* Shows the popover. This method is particularly useful when the trigger mode is set to `"manual"`. It allows for programmatic control over the visibility of the popover, making it visible regardless of the trigger mode. Optionally, a target HTMLElement can be provided to dynamically set the trigger element for the popover.
*/
"show": (target?: HTMLElement) => Promise;
/**
* The tip of the popover. Possible values are: - `"caret"`: A triangle tip. - `"tab"`: A tab tip. - `"none"`: No tip.
*/
"tip": 'caret' | 'tab' | 'none';
/**
* Determines how the popover is triggered. Possible values are: - `"click"`: The popover is shown or hidden when the trigger element is clicked. - `"hover"`: The popover is shown when the mouse hovers over the trigger element and hidden when it leaves. - `"manual"`: The visibility of the popover must be manually controlled through the `open` property.
*/
"trigger": 'click' | 'hover' | 'manual';
}
/**
* @name Popover Content
* @description The PopoverContent component is used to display additional information.
* @category Informational
* @subcategory Popover
* @childComponent true
*/
interface GoatPopoverContent {
}
/**
* @name Progress
* @description Progress indicators express an unspecified wait time or display the length of a process.
* @category Informational
* @tags feedback, loading, progress, spinner
* @example
*/
interface GoatProgress {
"helperText": string;
"hideLabel": boolean;
/**
* A label describing the progress bar.
*/
"label": string;
/**
* Possible values are: `"sm"` and `"md"` in pixel. Defaults to `"md"`.
*/
"size": 'sm' | 'md';
"status": 'active' | 'success' | 'error';
"value": number;
}
/**
* @name Select
* @description Allows the user to select one or more options using a dropdown.
* @category Form Inputs
* @tags input, form
* @img /assets/img/select.webp
* @imgDark /assets/img/select-dark.webp
*/
interface GoatSelect {
/**
* If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
*/
"clearable": boolean;
"configAria": any;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `goatChange` event after each keystroke.
*/
"debounce": number;
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"disabled": boolean;
"getComponentId": () => Promise;
"helperText": string;
"hideDropdownIcon": boolean;
"inline": boolean;
"invalid": boolean;
"invalidText": string;
/**
* [{ label: 'Shivaji Varma', value: 'shivaji-varma', icon: 'person' }]
*/
"items": {
label: string | number;
value: string | number;
icon?: string;
}[];
"label": string;
"layer"?: 'background' | '01' | '02';
"multiple": boolean;
/**
* The input field name.
*/
"name": string;
"open": boolean;
"openSelectList": () => Promise;
/**
* The input field placeholder.
*/
"placeholder": string;
"placements": string;
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"readonly": boolean;
/**
* If true, required icon is show. Defaults to `false`.
*/
"required": boolean;
/**
* Search type Possible values are `"none"`, `"initial"`, `"contains"`, `"managed"`. Defaults to `"none"`.
*/
"search": 'none' | 'initial' | 'contains' | 'managed';
/**
* Sets blur on the native `input` in `goat-input`. Use this method instead of the global `input.blur()`.
*/
"setBlur": () => Promise;
/**
* Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.t
*/
"setFocus": () => Promise;
"showLoader": boolean;
/**
* The select input size. Possible values are: `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
*/
"size": 'sm' | 'md' | 'lg';
/**
* The input state. Possible values are: `"success"`, `"error"`, `"warning"`, 'default'. Defaults to `"default"`.
*/
"state": 'success' | 'error' | 'warning' | 'default';
/**
* The input field value.
*/
"value"?: string | number;
"warn": boolean;
"warnText": string;
}
/**
* @name1 Side Navigation
* @description1 The side navigation component provides an easy way to navigate through your website / application.
* @img1 /assets/img/sidenav.webp
*/
interface GoatSidenav {
"showLoader": boolean;
}
interface GoatSidenavMenu {
"empty": boolean;
"emptyState": any;
/**
* Sets focus on first menu item. Use this method instead of the global `element.focus()`.
*/
"setFocus": () => Promise;
"showLoader": boolean;
"value"?: string | number;
}
interface GoatSidenavMenuItem {
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"disabled": boolean;
/**
* Menu item selection state.
*/
"selected": boolean;
/**
* Sets blur on the native `input` in `goat-input`. Use this method instead of the global `input.blur()`.
*/
"setBlur": () => Promise;
/**
* Sets focus on the native `input` in `goat-input`. Use this method instead of the global `input.focus()`.
*/
"setFocus": () => Promise;
/**
* The menu item value.
*/
"value"?: string | number | null;
}
/**
* @name Slider
* @description Sliders allow users to make selections from a range of values.
* @category Form Inputs
* @tags input, form
* @img /assets/img/slider.webp
* @imgDark /assets/img/slider-dark.webp
*/
interface GoatSlider {
"configAria": any;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `goatChange` event after each keystroke.
*/
"debounce": number;
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"disabled": boolean;
/**
* function to format the value of the input
*/
"formatter": (value: string | number) => string;
"getComponentId": () => Promise;
"max": number;
"min": number;
/**
* The input field name.
*/
"name": string;
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"readonly": boolean;
/**
* If true, required icon is show. Defaults to `false`.
*/
"required": boolean;
/**
* Sets blur on the native `input` in `goat-input`. Use this method instead of the global `input.blur()`.
*/
"setBlur": () => Promise;
/**
* Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.
*/
"setFocus": () => Promise;
"showOnlySlider": boolean;
"step": number;
/**
* The input field value.
*/
"value"?: number;
}
/**
* @name Spinner
* @description Spinners provide a visual cue that an action is processing awaiting a course of change or a result.
* @category Informational
* @tags feedback, loading, progress, spinner
* @example
*/
interface GoatSpinner {
"description": string;
"hideBackground": boolean;
/**
* The Icon size. Possible values are: `"sm"`, `"md"`, `"lg"` and size in pixel. Defaults to `"md"`.
*/
"size": 'sm' | 'md' | 'lg' | string;
}
/**
* @name SVG
* @description Render SVG content from an external source.
* @category Data Display
* @example
*/
interface GoatSvg {
/**
* The Icon size.
*/
"size": string;
"src": string;
}
interface GoatTab {
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"disabled": boolean;
"disabledReason": string;
/**
* Hyperlink to navigate to on click.
*/
"href": string;
/**
* Icon which will displayed on button. Possible values are bootstrap icon names.
*/
"icon": string;
"label": string;
/**
* Button selection state.
*/
"selected": boolean;
"setFocus": () => Promise;
/**
* Show loader.
*/
"showLoader": boolean;
"target": string;
"triggerClick": () => Promise;
"type": 'contained' | 'contained-bottom' | 'default';
"value": string;
}
interface GoatTabPanel {
"active": boolean;
"layer"?: 'background' | '01' | '02';
"value": string;
}
/**
* @name Table
* @description A configurable component for displaying tabular data.
* @category Data Display
* @img /assets/img/table.webp
* @imgDark /assets/img/table-dark.webp
*/
interface GoatTable {
/**
* Grid columns configuration. [ { "name":"name", "label":"Name", "width":300, "fixed":true, "template": function(row, column) { return row[column.name];} }, { "name":"age", "label":"Age" } ]
*/
"columns": any[];
/**
* Grid data to display on table [{ 'id': '5e7118ddce4b3d577956457f', 'age': 21, 'name': 'John', 'company': 'India', 'email': 'john@example.com', 'phone': '+1 (839) 560-3581', 'address': '326 Irving Street, Grimsley, Texas, 4048' }]
*/
"data": any[];
"emptyStateDescription": string;
"emptyStateHeadline": string;
"keyField": string;
"layer"?: 'background' | '01' | '02';
"managed": boolean;
"page": number;
"pageSize": number;
"paginate": boolean;
"selectedRowKeys": string[];
"selectionType": 'checkbox' | undefined;
"sortBy": string;
"sortOrder": 'asc' | 'desc';
"sortable": boolean;
"totalItems": any;
}
/**
* @name Tabs
* @description The tabs component is used to display multiple panels of content in a container.
* @category Navigation
* @tags navigation
* @example
*
* Tab 1
* Tab 2
*
*
*/
interface GoatTabs {
"layer"?: 'background' | '01' | '02';
"type": 'contained' | 'contained-bottom' | 'default';
}
interface GoatTabsList {
"managed": boolean;
"type": 'contained' | 'contained-bottom' | 'default';
}
/**
* @name Tag
* @description Use tags to label, categorize, or organize items using keywords that describe them.
* @category Data Display
* @tag controls
* @example Important
*/
interface GoatTag {
/**
* Tag color. Possible values are: 'gray', 'blue', 'green', 'red', 'yellow', 'primary', 'success', 'info', 'warning', 'error'.
*/
"color": | 'gray'
| 'blue'
| 'green'
| 'red'
| 'yellow'
| 'primary'
| 'success'
| 'info'
| 'warning'
| 'error';
/**
* If true, the tag will have a close icon.
*/
"dismissible": boolean;
/**
* Image source.
*/
"imageSrc"?: string;
/**
* If true, the tag will be selected.
*/
"selected": boolean;
/**
* Text size.
*/
"size": 'sm' | 'md';
/**
* Tag value.
*/
"value": string;
}
/**
* @name Text
* @description Typography are used for rendering headlines, paragraphs and captions.
* @category General
* @example Heading
*/
interface GoatText {
"color": | 'primary'
| 'secondary'
| 'tertiary'
| 'helper'
| 'error'
| 'on-color'
| 'inverse';
"configAria": any;
"expressive": boolean;
"headingLevel": 1 | 2 | 3 | 4 | 5 | 6;
"headingSize": 1 | 2 | 3 | 4 | 5 | 6 | 7;
"inline": boolean;
"type": | 'code'
| 'helper-text'
| 'label'
| 'legal'
| 'heading'
| 'body'
| 'body-compact'
| 'heading-compact'
| 'fluid-heading';
}
/**
* @name Textarea
* @description Enables native inputs to be used within a Form field.
* @category Form Inputs
* @tags input, form
* @example
*/
interface GoatTextarea {
/**
* If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
*/
"clearable": boolean;
"configAria": any;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `goat:change` event after each keystroke.
*/
"debounce": number;
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"disabled": boolean;
"getComponentId": () => Promise;
"helperText": string;
"inline": boolean;
"invalid": boolean;
"invalidText": string;
"label": string;
/**
* The input field name.
*/
"name": string;
/**
* The input field placeholder.
*/
"placeholder": string;
/**
* If true, the user read the value cannot modify it. Defaults to `false`.
*/
"readonly": boolean;
/**
* If true, required icon is show. Defaults to `false`.
*/
"required": boolean;
/**
* Sets blur on the native `textarea` in `goat-textarea`. Use this method instead of the global `textarea.blur()`.
*/
"setBlur": () => Promise;
/**
* Sets focus on the native `textarea` in `goat-textarea`. Use this method instead of the global `textarea.focus()`.
*/
"setFocus": () => Promise;
/**
* The input field size. Possible values are: `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
*/
"size": 'sm' | 'md' | 'lg';
"skeleton": boolean;
/**
* The input state. Possible values are: `"success"`, `"error"`, `"warning"`, 'default'. Defaults to `"default"`.
*/
"state": 'success' | 'error' | 'warning' | 'default';
/**
* The input field value.
*/
"value": string;
"warn": boolean;
"warnText": string;
}
/**
* @name Time Picker
* @description Captures time input.
* @category Form Inputs
* @tags input, form
* @example
*/
interface GoatTimePicker {
"configAria": any;
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"disabled": boolean;
"getComponentId": () => Promise;
"inline": boolean;
/**
* The input field name.
*/
"name": string;
/**
* The input field placeholder.
*/
"placeholder": string;
/**
* If true, the user read the value cannot modify it. Defaults to `false`.
*/
"readonly": boolean;
/**
* Sets blur on the native `input` in `goat-input`. Use this method instead of the global `input.blur()`.
*/
"setBlur": () => Promise;
/**
* Sets focus on the native `input` in `goat-input`. Use this method instead of the global `input.focus()`.
*/
"setFocus": () => Promise;
/**
* The input field size. Possible values are: `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
*/
"size": 'sm' | 'md' | 'lg';
/**
* The input field value.
*/
"value"?: string | number | null;
}
/**
* @name Toggle
* @description Captures boolean input with an optional indeterminate mode.
* @category Form Inputs
* @tags input, form
* @example Want ice cream?
*/
interface GoatToggle {
"configAria": any;
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"disabled": boolean;
"getComponentId": () => Promise;
/**
* The checkbox label.
*/
"label": string;
/**
* The input field name.
*/
"name": string;
"readonly": boolean;
/**
* If true, required icon is show. Defaults to `false`.
*/
"required": boolean;
"rounded": boolean;
/**
* Sets blur on the native `input` in `goat-toggle`. Use this method instead of the global `input.blur()`.
*/
"setBlur": () => Promise;
/**
* Sets focus on the native `input` in `goat-toggle`. Use this method instead of the global `input.focus()`.
*/
"setFocus": () => Promise;
/**
* The button size. Possible values are: `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
*/
"size": 'md' | 'lg';
/**
* The input field value.
*/
"value": boolean;
}
/**
* @name Tooltip
* @description The Tooltip component is used to display additional information on hover.
* @category Informational
* @tag content
* @img /assets/img/tooltip.webp
* @imgDark /assets/img/tooltip-dark.webp
*/
interface GoatTooltip {
/**
* The content of the tooltip.
*/
"content": string;
/**
* The placement of the popover relative to the trigger element. Possible values are: - `"top"`: The popover is placed above the trigger element. - `"right"`: The popover is placed to the right of the trigger element. - `"bottom"`: The popover is placed below the trigger element. - `"left"`: The popover is placed to the left of the trigger element.
*/
"placements": string;
/**
* If true, the tooltip will be managed by the parent component.
*/
"trigger": 'hover' | 'manual';
}
/**
* @name TreeNode
* @description A tree node is a hierarchical structure that provides nested levels of navigation.
* @category Navigation
* @subcategory Tree View
* @childComponent true
* @img /assets/img/tree-view.webp
* @imgDark /assets/img/tree-view-dark.webp
*/
interface GoatTreeNode {
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
"disabled": boolean;
"expanded": boolean;
/**
* Hyperlink to navigate to on click.
*/
"href": string;
/**
* Icon which will displayed on button. Possible values are icon names.
*/
"icon": string;
"label": string;
"level": number;
/**
* Menu item selection state.
*/
"selectedNode": string;
/**
* Sets blur on the native `input` in `goat-input`. Use this method instead of the global `input.blur()`.
*/
"setBlur": () => Promise;
/**
* Sets focus on the native `input` in `goat-input`. Use this method instead of the global `input.focus()`.
*/
"setFocus": () => Promise;
/**
* Sets or retrieves the window or frame at which to target content.
*/
"target": string;
/**
* The menu item value.
*/
"value"?: string | number | null;
}
/**
* @name TreeView
* @description A tree view is a hierarchical structure that provides nested levels of navigation.
* @category Navigation
* @subcategory Tree View
* @img /assets/img/tree-view.webp
* @imgDark /assets/img/tree-view-dark.webp
*/
interface GoatTreeView {
"empty": boolean;
"emptyState": string;
"getSelectedNode": () => Promise;
"selectedNode": string;
/**
* Sets focus on first menu item. Use this method instead of the global `element.focus()`.
*/
"setFocus": () => Promise;
"subscribeToSelect": (cb: any) => Promise;
}
}
export interface GoatAccordionItemCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatAccordionItemElement;
}
export interface GoatButtonCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatButtonElement;
}
export interface GoatCalendarCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatCalendarElement;
}
export interface GoatCalendarColumnViewCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatCalendarColumnViewElement;
}
export interface GoatCalendarMonthViewCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatCalendarMonthViewElement;
}
export interface GoatCheckboxCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatCheckboxElement;
}
export interface GoatCodeEditorCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatCodeEditorElement;
}
export interface GoatDatePickerCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatDatePickerElement;
}
export interface GoatDropdownCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatDropdownElement;
}
export interface GoatHtmlEditorCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatHtmlEditorElement;
}
export interface GoatInputCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatInputElement;
}
export interface GoatInputUrlCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatInputUrlElement;
}
export interface GoatMenuItemCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatMenuItemElement;
}
export interface GoatModalCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatModalElement;
}
export interface GoatNotificationCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatNotificationElement;
}
export interface GoatNumberCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatNumberElement;
}
export interface GoatPopoverCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatPopoverElement;
}
export interface GoatSelectCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatSelectElement;
}
export interface GoatSidenavMenuItemCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatSidenavMenuItemElement;
}
export interface GoatSliderCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatSliderElement;
}
export interface GoatTabCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatTabElement;
}
export interface GoatTableCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatTableElement;
}
export interface GoatTagCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatTagElement;
}
export interface GoatTextareaCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatTextareaElement;
}
export interface GoatTimePickerCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatTimePickerElement;
}
export interface GoatToggleCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatToggleElement;
}
export interface GoatTreeNodeCustomEvent extends CustomEvent {
detail: T;
target: HTMLGoatTreeNodeElement;
}
declare global {
/**
* @name Accordion
* @description An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.
* @overview The accordion component delivers large amounts of content in a small space through progressive disclosure. The header title give the user a high level overview of the content allowing the user to decide which sections to read.
* Accordions can make information processing and discovering more effective. However, it does hide content from users and it’s important to account for a user not noticing or reading all of the included content. If a user is likely to read all of the content then don’t use an accordion as it adds the burden of an extra click; instead use a full scrolling page with normal headers.
* @category Data Display
* @subcategory Accordion
* @tags display
* @img /assets/img/accordion.webp
* @imgDark /assets/img/accordion-dark.webp
*/
interface HTMLGoatAccordionElement extends Components.GoatAccordion, HTMLStencilElement {
}
var HTMLGoatAccordionElement: {
prototype: HTMLGoatAccordionElement;
new (): HTMLGoatAccordionElement;
};
interface HTMLGoatAccordionItemElementEventMap {
"goat-accordion-item--click": any;
}
/**
* @name Accordion Item
* @description An accordion item is single item in an accordion list. It contains a header and a content section that can be expanded or collapsed by the user.
* @overview The accordion item component is a single item in an accordion list. It contains a header and a content section that can be expanded or collapsed by the user. The accordion item can be used in conjunction with the accordion component to create a list of expandable items.
* @category Data Display
* @subcategory Accordion
* @childComponent true
*/
interface HTMLGoatAccordionItemElement extends Components.GoatAccordionItem, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLGoatAccordionItemElement, ev: GoatAccordionItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLGoatAccordionItemElement, ev: GoatAccordionItemCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLGoatAccordionItemElement: {
prototype: HTMLGoatAccordionItemElement;
new (): HTMLGoatAccordionItemElement;
};
/**
* @name Avatar
* @description The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
* @category Data Display
* @tags display
* @example
*/
interface HTMLGoatAvatarElement extends Components.GoatAvatar, HTMLStencilElement {
}
var HTMLGoatAvatarElement: {
prototype: HTMLGoatAvatarElement;
new (): HTMLGoatAvatarElement;
};
/**
* @name Badge
* @description The badge component is used to display a small amount of information to the user.
* @category Informational
* @tag content
* @example
*/
interface HTMLGoatBadgeElement extends Components.GoatBadge, HTMLStencilElement {
}
var HTMLGoatBadgeElement: {
prototype: HTMLGoatBadgeElement;
new (): HTMLGoatBadgeElement;
};
/**
* @name Breadcrumb
* @description A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or web application.
* @category Navigation
* @tags navigation
* @example HomePage
*/
interface HTMLGoatBreadcrumbElement extends Components.GoatBreadcrumb, HTMLStencilElement {
}
var HTMLGoatBreadcrumbElement: {
prototype: HTMLGoatBreadcrumbElement;
new (): HTMLGoatBreadcrumbElement;
};
interface HTMLGoatBreadcrumbItemElement extends Components.GoatBreadcrumbItem, HTMLStencilElement {
}
var HTMLGoatBreadcrumbItemElement: {
prototype: HTMLGoatBreadcrumbItemElement;
new (): HTMLGoatBreadcrumbItemElement;
};
interface HTMLGoatButtonElementEventMap {
"goat-button--click": {
appendData: any;
};
}
/**
* @name Button
* @description Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
* @overview Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.
* @category General
* @tags controls
* @example
* Button CTA
*
*/
interface HTMLGoatButtonElement extends Components.GoatButton, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLGoatButtonElement, ev: GoatButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLGoatButtonElement, ev: GoatButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLGoatButtonElement: {
prototype: HTMLGoatButtonElement;
new (): HTMLGoatButtonElement;
};
/**
* @name Button Group
* @description Group a series of buttons together on a single line with the button group, and super-power.
* @category General
* @tags controls
* @example
*
*
*
*/
interface HTMLGoatButtonGroupElement extends Components.GoatButtonGroup, HTMLStencilElement {
}
var HTMLGoatButtonGroupElement: {
prototype: HTMLGoatButtonGroupElement;
new (): HTMLGoatButtonGroupElement;
};
interface HTMLGoatCalendarElementEventMap {
"goat-calendar--event-click": any;
}
/**
* @name Calendar
* @description The calendar component is used to display information in a daily, weekly, monthly, or category view.
* @category Data Display
* @tags calendar
* @img /assets/img/calendar.webp
* @imgDark /assets/img/calendar-dark.webp
*/
interface HTMLGoatCalendarElement extends Components.GoatCalendar, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLGoatCalendarElement, ev: GoatCalendarCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLGoatCalendarElement, ev: GoatCalendarCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLGoatCalendarElement: {
prototype: HTMLGoatCalendarElement;
new (): HTMLGoatCalendarElement;
};
interface HTMLGoatCalendarColumnViewElementEventMap {
"internal-column-view-date-click": any;
"internal-column-view-event-click": any;
}
interface HTMLGoatCalendarColumnViewElement extends Components.GoatCalendarColumnView, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLGoatCalendarColumnViewElement, ev: GoatCalendarColumnViewCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLGoatCalendarColumnViewElement, ev: GoatCalendarColumnViewCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLGoatCalendarColumnViewElement: {
prototype: HTMLGoatCalendarColumnViewElement;
new (): HTMLGoatCalendarColumnViewElement;
};
interface HTMLGoatCalendarColumnViewBackgroundElement extends Components.GoatCalendarColumnViewBackground, HTMLStencilElement {
}
var HTMLGoatCalendarColumnViewBackgroundElement: {
prototype: HTMLGoatCalendarColumnViewBackgroundElement;
new (): HTMLGoatCalendarColumnViewBackgroundElement;
};
interface HTMLGoatCalendarMonthViewElementEventMap {
"internal-month-view-date-click": any;
"internal-month-view-event-click": any;
}
interface HTMLGoatCalendarMonthViewElement extends Components.GoatCalendarMonthView, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLGoatCalendarMonthViewElement, ev: GoatCalendarMonthViewCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLGoatCalendarMonthViewElement, ev: GoatCalendarMonthViewCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLGoatCalendarMonthViewElement: {
prototype: HTMLGoatCalendarMonthViewElement;
new (): HTMLGoatCalendarMonthViewElement;
};
interface HTMLGoatCalendarMonthViewBackgroundElement extends Components.GoatCalendarMonthViewBackground, HTMLStencilElement {
}
var HTMLGoatCalendarMonthViewBackgroundElement: {
prototype: HTMLGoatCalendarMonthViewBackgroundElement;
new (): HTMLGoatCalendarMonthViewBackgroundElement;
};
/**
* @name Canvas
* @category Up coming
* @description Canvas for drawing lines and shapes on.
* @img /assets/img/canvas.webp
*/
interface HTMLGoatCanvasElement extends Components.GoatCanvas, HTMLStencilElement {
}
var HTMLGoatCanvasElement: {
prototype: HTMLGoatCanvasElement;
new (): HTMLGoatCanvasElement;
};
interface HTMLGoatCardElement extends Components.GoatCard, HTMLStencilElement {
}
var HTMLGoatCardElement: {
prototype: HTMLGoatCardElement;
new (): HTMLGoatCardElement;
};
interface HTMLGoatCbCompoundExpressionElement extends Components.GoatCbCompoundExpression, HTMLStencilElement {
}
var HTMLGoatCbCompoundExpressionElement: {
prototype: HTMLGoatCbCompoundExpressionElement;
new (): HTMLGoatCbCompoundExpressionElement;
};
interface HTMLGoatCbDividerElement extends Components.GoatCbDivider, HTMLStencilElement {
}
var HTMLGoatCbDividerElement: {
prototype: HTMLGoatCbDividerElement;
new (): HTMLGoatCbDividerElement;
};
interface HTMLGoatCbExpressionElement extends Components.GoatCbExpression, HTMLStencilElement {
}
var HTMLGoatCbExpressionElement: {
prototype: HTMLGoatCbExpressionElement;
new (): HTMLGoatCbExpressionElement;
};
interface HTMLGoatCbPredicateElement extends Components.GoatCbPredicate, HTMLStencilElement {
}
var HTMLGoatCbPredicateElement: {
prototype: HTMLGoatCbPredicateElement;
new (): HTMLGoatCbPredicateElement;
};
/**
* @name Chart Doughnut
* @description A doughnut chart is a circular chart with a blank center. The chart is similar to a pie chart with the center cut out. The area in the center can be used to display information.
* @category Charts
* @tag chart
* @img /assets/img/chart-doughnut.webp
* @imgDark /assets/img/chart-doughnut-dark.webp
*/
interface HTMLGoatChartDoughnutElement extends Components.GoatChartDoughnut, HTMLStencilElement {
}
var HTMLGoatChartDoughnutElement: {
prototype: HTMLGoatChartDoughnutElement;
new (): HTMLGoatChartDoughnutElement;
};
/**
* @name Chart Pie
* @description A pie chart (also known as a circle chart) is a circular statistical graphic that visually represents numerical proportions. It is commonly used to illustrate how parts relate to the whole for a specific categorical variable.
* @category Charts
* @tag chart
* @img /assets/img/chart-pie.webp
* @imgDark /assets/img/chart-pie-dark.webp
*/
interface HTMLGoatChartPieElement extends Components.GoatChartPie, HTMLStencilElement {
}
var HTMLGoatChartPieElement: {
prototype: HTMLGoatChartPieElement;
new (): HTMLGoatChartPieElement;
};
interface HTMLGoatCheckboxElementEventMap {
"goat-checkbox--change": any;
"goat-checkbox--blur": any;
"goat-checkbox--focus": any;
}
/**
* @name Checkbox
* @description Captures boolean input with an optional indeterminate mode.
* @category Form Inputs
* @tags input, form
* @example Want ice cream?
*/
interface HTMLGoatCheckboxElement extends Components.GoatCheckbox, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLGoatCheckboxElement, ev: GoatCheckboxCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLGoatCheckboxElement, ev: GoatCheckboxCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLGoatCheckboxElement: {
prototype: HTMLGoatCheckboxElement;
new (): HTMLGoatCheckboxElement;
};
interface HTMLGoatCodeEditorElementEventMap {
"goat-code-editor--change": any;
}
/**
* @name Code Editor
* @description A browser based code editor.
* @category Form Inputs
* @tags input, form
* @img /assets/img/code-editor.webp
* @imgDark /assets/img/code-editor-dark.webp
*/
interface HTMLGoatCodeEditorElement extends Components.GoatCodeEditor, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLGoatCodeEditorElement, ev: GoatCodeEditorCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLGoatCodeEditorElement, ev: GoatCodeEditorCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLGoatCodeEditorElement: {
prototype: HTMLGoatCodeEditorElement;
new (): HTMLGoatCodeEditorElement;
};
/**
* @name Code Highlighter
* @description A browser based code highlighter.
* @category Data Display
* @tag display, code
* @img /assets/img/code-highlighter.webp
* @imgDark /assets/img/code-highlighter-dark.webp
*/
interface HTMLGoatCodeHighlighterElement extends Components.GoatCodeHighlighter, HTMLStencilElement {
}
var HTMLGoatCodeHighlighterElement: {
prototype: HTMLGoatCodeHighlighterElement;
new (): HTMLGoatCodeHighlighterElement;
};
/**
* @name Condition Builder
* @description A condition builder is a component that allows users to build a condition using a set of rules.
* @category Up coming
* @tag content
* @img /assets/img/condition-builder.webp
*/
interface HTMLGoatConditionBuilderElement extends Components.GoatConditionBuilder, HTMLStencilElement {
}
var HTMLGoatConditionBuilderElement: {
prototype: HTMLGoatConditionBuilderElement;
new (): HTMLGoatConditionBuilderElement;
};
interface HTMLGoatContainerElement extends Components.GoatContainer, HTMLStencilElement {
}
var HTMLGoatContainerElement: {
prototype: HTMLGoatContainerElement;
new (): HTMLGoatContainerElement;
};
/**
* @name Current Time
* @description Displays the current time in a given timezone.
* @category Others
* @example
*/
interface HTMLGoatCurrentTimeElement extends Components.GoatCurrentTime, HTMLStencilElement {
}
var HTMLGoatCurrentTimeElement: {
prototype: HTMLGoatCurrentTimeElement;
new (): HTMLGoatCurrentTimeElement;
};
interface HTMLGoatDatePickerElementEventMap {
"goat-date-picker--input": any;
"goat-date-picker--change": any;
"goat-date-picker--blur": any;
"goat-date-picker--focus": any;
}
/**
* @name Date Picker
* @category Form Inputs
* @description Captures date input.
* @example
*/
interface HTMLGoatDatePickerElement extends Components.GoatDatePicker, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLGoatDatePickerElement, ev: GoatDatePickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLGoatDatePickerElement, ev: GoatDatePickerCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLGoatDatePickerElement: {
prototype: HTMLGoatDatePickerElement;
new (): HTMLGoatDatePickerElement;
};
/**
* @name Divider
* @description A divider can be used to segment content vertically or horizontally.
* @category Layout
* @example or
*/
interface HTMLGoatDividerElement extends Components.GoatDivider, HTMLStencilElement {
}
var HTMLGoatDividerElement: {
prototype: HTMLGoatDividerElement;
new (): HTMLGoatDividerElement;
};
interface HTMLGoatDropdownElementEventMap {
"goat-dropdown--item-click": any;
"goat-dropdown--open": any;
"goat-dropdown--close": any;
}
/**
* @name Dropdown
* @description Enables native inputs to be used within a Form field.
* @category Navigation
* @subcategory Dropdown
* @img /assets/img/dropdown.webp
* @imgDark /assets/img/dropdown-dark.webp
*/
interface HTMLGoatDropdownElement extends Components.GoatDropdown, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLGoatDropdownElement, ev: GoatDropdownCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLGoatDropdownElement, ev: GoatDropdownCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLGoatDropdownElement: {
prototype: HTMLGoatDropdownElement;
new (): HTMLGoatDropdownElement;
};
/**
* @name Dropdown Menu
* @description The Dropdown Menu component is used to display a list of options.
* @category Navigation
* @subcategory Dropdown
* @childComponent true
*/
interface HTMLGoatDropdownMenuElement extends Components.GoatDropdownMenu, HTMLStencilElement {
}
var HTMLGoatDropdownMenuElement: {
prototype: HTMLGoatDropdownMenuElement;
new (): HTMLGoatDropdownMenuElement;
};
/**
* @name Empty State
* @description A message that displays when there is no information to display.
* @category Data Display
* @img /assets/img/empty-state.webp
* @imgDark /assets/img/empty-state-dark.webp
*/
interface HTMLGoatEmptyStateElement extends Components.GoatEmptyState, HTMLStencilElement {
}
var HTMLGoatEmptyStateElement: {
prototype: HTMLGoatEmptyStateElement;
new (): HTMLGoatEmptyStateElement;
};
/**
* @name Flow Designer
* @category Up coming
* @description Flow Designer is a component that allows users to create and edit flows.
* @img /assets/img/flow-designer.webp
*/
interface HTMLGoatFlowDesignerElement extends Components.GoatFlowDesigner, HTMLStencilElement {
}
var HTMLGoatFlowDesignerElement: {
prototype: HTMLGoatFlowDesignerElement;
new (): HTMLGoatFlowDesignerElement;
};
/**
* @name Footer
* @description The footer component provides a container for displaying additional navigation information about a site.
* @overview The footer is one of the most underestimated sections of a website being located at the very bottom of every page, however, it can be used as a way to try to convince users to stay on your website if they haven’t found the information they’ve been looking for inside the main content area.
* @category Navigation
* @img /assets/img/footer.webp
* @imgDark /assets/img/footer-dark.webp
*/
interface HTMLGoatFooterElement extends Components.GoatFooter, HTMLStencilElement {
}
var HTMLGoatFooterElement: {
prototype: HTMLGoatFooterElement;
new (): HTMLGoatFooterElement;
};
interface HTMLGoatFooterCopyrightElement extends Components.GoatFooterCopyright, HTMLStencilElement {
}
var HTMLGoatFooterCopyrightElement: {
prototype: HTMLGoatFooterCopyrightElement;
new (): HTMLGoatFooterCopyrightElement;
};
interface HTMLGoatFooterLinksElement extends Components.GoatFooterLinks, HTMLStencilElement {
}
var HTMLGoatFooterLinksElement: {
prototype: HTMLGoatFooterLinksElement;
new (): HTMLGoatFooterLinksElement;
};
/**
* @name Form Control
* @description The Form Control component adds a label and caption for its child control.
* @category Form Inputs
* @tags form
* @example
*
*
*/
interface HTMLGoatFormControlElement extends Components.GoatFormControl, HTMLStencilElement {
}
var HTMLGoatFormControlElement: {
prototype: HTMLGoatFormControlElement;
new (): HTMLGoatFormControlElement;
};
/**
* @name Header
* @description Header component is used to display a header with a brand, navigation, and actions.
* @category Navigation
* @img /assets/img/header.webp
* @imgDark /assets/img/header-dark.webp
*/
interface HTMLGoatHeaderElement extends Components.GoatHeader, HTMLStencilElement {
}
var HTMLGoatHeaderElement: {
prototype: HTMLGoatHeaderElement;
new (): HTMLGoatHeaderElement;
};
interface HTMLGoatHeaderActionElement extends Components.GoatHeaderAction, HTMLStencilElement {
}
var HTMLGoatHeaderActionElement: {
prototype: HTMLGoatHeaderActionElement;
new (): HTMLGoatHeaderActionElement;
};
interface HTMLGoatHeaderBrandElement extends Components.GoatHeaderBrand, HTMLStencilElement {
}
var HTMLGoatHeaderBrandElement: {
prototype: HTMLGoatHeaderBrandElement;
new (): HTMLGoatHeaderBrandElement;
};
interface HTMLGoatHtmlEditorElementEventMap {
"goat-html-editor--change": any;
"goat-html-editor--search": any;
}
/**
* @name HTML Editor
* @description HTML Editor component is a WYSIWYG editor that allows users to edit HTML content.
* @category Up coming
* @tags input, form
* @img /assets/img/html-editor.webp
* @imgDark /assets/img/html-editor-dark.webp
*/
interface HTMLGoatHtmlEditorElement extends Components.GoatHtmlEditor, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLGoatHtmlEditorElement, ev: GoatHtmlEditorCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLGoatHtmlEditorElement, ev: GoatHtmlEditorCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLGoatHtmlEditorElement: {
prototype: HTMLGoatHtmlEditorElement;
new (): HTMLGoatHtmlEditorElement;
};
/**
* @name Icon
* @description Icons are visual symbols used to represent ideas, objects, or actions.
* @overview Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
* @category General
* @example
*/
interface HTMLGoatIconElement extends Components.GoatIcon, HTMLStencilElement {
}
var HTMLGoatIconElement: {
prototype: HTMLGoatIconElement;
new (): HTMLGoatIconElement;
};
interface HTMLGoatImageElement extends Components.GoatImage, HTMLStencilElement {
}
var HTMLGoatImageElement: {
prototype: HTMLGoatImageElement;
new (): HTMLGoatImageElement;
};
interface HTMLGoatInputElementEventMap {
"goat-input--input": any;
"goat-input--change": any;
"goat-input--blur": any;
"goat-input--focus": any;
}
/**
* @name Input
* @description Enables native inputs to be used within a Form field.
* @category Form Inputs
* @tags input, form
* @example
*/
interface HTMLGoatInputElement extends Components.GoatInput, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLGoatInputElement, ev: GoatInputCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLGoatInputElement, ev: GoatInputCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLGoatInputElement: {
prototype: HTMLGoatInputElement;
new (): HTMLGoatInputElement;
};
interface HTMLGoatInputUrlElementEventMap {
"valueChange": string;
"inputInvalid": boolean;
}
/**
* @name Input URL
* @description A specialized input field for URL validation.
* @category Up coming
* @tags input, form, url
* @example
*/
interface HTMLGoatInputUrlElement extends Components.GoatInputUrl, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLGoatInputUrlElement, ev: GoatInputUrlCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLGoatInputUrlElement, ev: GoatInputUrlCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLGoatInputUrlElement: {
prototype: HTMLGoatInputUrlElement;
new (): HTMLGoatInputUrlElement;
};
/**
* @name Link
* @description Links allow users to click their way from page to page.
* @category Navigation
* @example Link
*/
interface HTMLGoatLinkElement extends Components.GoatLink, HTMLStencilElement {
}
var HTMLGoatLinkElement: {
prototype: HTMLGoatLinkElement;
new (): HTMLGoatLinkElement;
};
/**
* @name Menu
* @description Menus display a list of choices on temporary surfaces.
* @category Navigation
* @subcategory Menu
* @img /assets/img/menu.webp
* @imgDark /assets/img/menu-dark.webp
*/
interface HTMLGoatMenuElement extends Components.GoatMenu, HTMLStencilElement {
}
var HTMLGoatMenuElement: {
prototype: HTMLGoatMenuElement;
new (): HTMLGoatMenuElement;
};
/**
* @name MenuDivider
* @description A divider to separate menu items.
* @category Layout
* @subcategory Menu
* @childComponents true
* @example or
*/
interface HTMLGoatMenuDividerElement extends Components.GoatMenuDivider, HTMLStencilElement {
}
var HTMLGoatMenuDividerElement: {
prototype: HTMLGoatMenuDividerElement;
new (): HTMLGoatMenuDividerElement;
};
interface HTMLGoatMenuItemElementEventMap {
"goat-menu-item--click": any;
}
/**
* @name Menu Item
* @description Menu items display a list of choices on temporary surfaces.
* @category Navigation
* @subcategory Menu
* @childComponent true
*/
interface HTMLGoatMenuItemElement extends Components.GoatMenuItem, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLGoatMenuItemElement, ev: GoatMenuItemCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLGoatMenuItemElement, ev: GoatMenuItemCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLGoatMenuItemElement: {
prototype: HTMLGoatMenuItemElement;
new (): HTMLGoatMenuItemElement;
};
interface HTMLGoatModalElementEventMap {
"goat-modal--close": any;
}
/**
* @name Modal
* @description Modals are used to display content in a layer above the app.
* @category Informational
* @subcategory Modal
* @tags controls
* @img /assets/img/modal.webp
* @imgDark /assets/img/modal-dark.webp
*/
interface HTMLGoatModalElement extends Components.GoatModal, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLGoatModalElement, ev: GoatModalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLGoatModalElement, ev: GoatModalCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLGoatModalElement: {
prototype: HTMLGoatModalElement;
new (): HTMLGoatModalElement;
};
/**
* @name Modal Content
* @description The Modal Content component is used to display the content within a modal.
* @category Informational
* @subcategory Modal
* @childComponent true
*/
interface HTMLGoatModalContentElement extends Components.GoatModalContent, HTMLStencilElement {
}
var HTMLGoatModalContentElement: {
prototype: HTMLGoatModalContentElement;
new (): HTMLGoatModalContentElement;
};
interface HTMLGoatNotificationElementEventMap {
"goat-notification--dismiss": any;
"goat-notification--action-click": any;
}
/**
* @name Notification
* @description Notifications are messages that communicate information to the user.
* @category Informational
* @tags notification
* @example
* Successful saved the record
*
*/
interface HTMLGoatNotificationElement extends Components.GoatNotification, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLGoatNotificationElement, ev: GoatNotificationCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLGoatNotificationElement, ev: GoatNotificationCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLGoatNotificationElement: {
prototype: HTMLGoatNotificationElement;
new (): HTMLGoatNotificationElement;
};
/**
* @name Notification Manager
* @description The Notification Manager handles the organization and display of notifications within the application.
* @category Informational
* @tags notification
* @img /assets/img/notification-manager.webp
* @imgDark /assets/img/notification-manager-dark.webp
*/
interface HTMLGoatNotificationManagerElement extends Components.GoatNotificationManager, HTMLStencilElement {
}
var HTMLGoatNotificationManagerElement: {
prototype: HTMLGoatNotificationManagerElement;
new (): HTMLGoatNotificationManagerElement;
};
interface HTMLGoatNumberElementEventMap {
"goat-number--input": any;
"goat-number--change": any;
"goat-number--blur": any;
"goat-number--focus": any;
}
/**
* @name Number
* @description Number input lets users enter a numeric value and incrementally increase or decrease the value with a two-segment control.
* @category Form Inputs
* @tags input, form
* @example
*/
interface HTMLGoatNumberElement extends Components.GoatNumber, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLGoatNumberElement, ev: GoatNumberCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLGoatNumberElement, ev: GoatNumberCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLGoatNumberElement: {
prototype: HTMLGoatNumberElement;
new (): HTMLGoatNumberElement;
};
interface HTMLGoatPopoverElementEventMap {
"goat-popover--open": any;
"goat-popover--close": any;
}
/**
* @name Popover
* @description The Popover component is used to display additional information.
* @category Informational
* @subcategory Popover
* @img /assets/img/dropdown.webp
* @imgDark /assets/img/dropdown-dark.webp
*/
interface HTMLGoatPopoverElement extends Components.GoatPopover, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLGoatPopoverElement, ev: GoatPopoverCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener(type: K, listener: (this: HTMLGoatPopoverElement, ev: GoatPopoverCustomEvent) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener