@abgov/web-components 1.20.3 → 1.20.5

package/html.html-data.json

@@ -1 +1 @@
-{"tags":[{"name":"goa-layout-full-nav"},{"name":"goa-two-column-layout","required":["header","footer","nav"],"attributes":[{"name":"navColumnWidth","type":"string","description":"% | px | rem | ch | etc","default":"256px"},{"name":"maxContentWidth","type":"string","description":"% | px | rem | ch | etc","default":"100%"},{"name":"header","type":"slot","description":"How to add GoAAppHeader component"},{"name":"footer","type":"slot","description":"How to add GoAAppFooter component"},{"name":"nav","type":"slot","description":"Component containing nav links for application"}],"references":[{"name":"GoA Two column layout","url":"https://design.alberta.ca/?path=/docs/layouts-two-column--basic"}],"description":"# Two column layout\nA two column layout to use as a starting point for your page. Typically, this is used for a side navigation alongside the main content of a page.\n\nUse it like this:\n```html\n<goa-two-column-layout>\n  <section slot=\"header\">\n    <goa-app-header></goa-app-header>\n  </section>\n  <section slot=\"nav\">\n    <a href=\"#dashboard\">Dashboard</a>\n    <a href=\"#accounts\">Accounts</a>\n    <a href=\"#invoices\">Invoices</a>\n    <a href=\"#employees\">Employees</a>\n    <a href=\"#claims\">Claims</a>\n  </section>\n  <h1>Heading 1</h1>\n  <p>\n    Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.\n  </p>\n  <section slot=\"footer\">\n    <goa-app-footer></goa-app-footer>\n  </section>\n</goa-two-column-layout>\n```\n"},{"name":"goa-three-column-layout","required":["header","footer","nav"],"attributes":[{"name":"leftcolumnwidth","type":"string","description":"% | px | rem | ch | etc","default":"256px"},{"name":"maxcontentwidth","type":"string","description":"% | px | rem | ch | etc","default":"100%"},{"name":"rightcolumnwidth","type":"string","description":"% | px | rem | ch | etc","default":"100%"},{"name":"header","type":"slot","description":"Space for GoAAppHeader component"},{"name":"footer","type":"slot","description":"Space for GoAAppFooter component"},{"name":"nav","type":"slot","description":"Component containing nav links for application"},{"name":"side-menu","type":"slot","description":"Component containing side menu section (right column)"}],"references":[{"name":"GoA Three Column Layout","url":"https://design.alberta.ca/?path=/docs/layouts-three-column--basic"}],"description":"# Three column layout\nA three column layout to use as a starting point for your page. Typically, this is used for a side navigation alongside the main content of a page and a sidemenu on the right.\n\nUse it like this:\n```html\n<goa-three-column-layout>\n  <section slot=\"header\">\n    <goa-app-header></goa-app-header>\n  </section>\n  <section slot=\"nav\">\n    <a href=\"#dashboard\">Dashboard</a>\n    <a href=\"#accounts\">Accounts</a>\n    <a href=\"#invoices\">Invoices</a>\n    <a href=\"#employees\">Employees</a>\n    <a href=\"#claims\">Claims</a>\n  </section>\n  <h1>Main content</h1>\n  <p>Add in your content here</p>\n  <section slot=\"side-menu\">\n    <h2>Side Menu</h2>\n    <p>Add in your content here</p>\n  </section>\n  <section slot=\"footer\">\n    <goa-app-footer></goa-app-footer>\n  </section>\n</goa-three-column-layout>\n```\n"},{"name":"goa-one-column-layout","references":[{"name":"GoA One Column Layout","url":"https://design.alberta.ca/?path=/docs/layouts-one-column--basic"}],"description":"# One Column Layout\nA one column layout to use as a starting point for your page.\n\nUse it like this:\n```html\n<goa-one-column-layout>\n  <section slot=\"header\">\n    <goa-microsite-header type=\"alpha\" version=\"UAT\" />\n    <goa-app-header url=\"/\" heading=\"Design System\">\n      <a href=\"/login\">Sign in</a>\n    </goa-app-header>\n  </section>\n  <goa-page-block width=\"704px\">\n    <!-- Insert custom content here -->\n  </goa-page-block>\n  <section slot=\"footer\">\n    <goa-app-footer />\n  </section>\n</goa-one-column-layout>\n```\n"},{"name":"goa-tooltip","attributes":[{"name":"content","description":"Sets the tooltip text content","type":"string"},{"name":"position","default":"top","description":"Sets the tooltip position","values":[{"name":"top","description":"Renders the tooltip to the top of the target element"},{"name":"bottom","description":"Renders the tooltip to the bottom of the target element"},{"name":"left","description":"Renders the tooltip to the left of the target element"},{"name":"right","description":"Renders the tooltip to the right of the target element"}],"type":"string"},{"name":"halign","default":"center","description":"Set alignment for a tooltip rendered on the top or bottom","values":[{"name":"center","description":"Aligns the tooltip to the center of the target element"},{"name":"left","description":"Aligns the tooltip to the left of the target element"},{"name":"right","description":"Aligns the tooltip to the right of the target element"}],"type":"string"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Tooltip","url":"https://design.alberta.ca/?path=/docs/components-tooltip--basic"}],"description":"# GoA Tooltip\nA tooltip is a message box that is displayed when a user hovers over or gives focus to a UI element to provide helpful, supporting, temporary, and non-essential content. The tooltip should be paired with a UI element.\n\nUse it like this:\n\n```html\n<goa-tooltip content=\"Item description\">\n  <div>Item</div>\n</goa-tooltip>\n```\n"},{"name":"goa-textarea","required":["name"],"attributes":[{"name":"name","type":"string","description":"Name of input value that is received in the _change event"},{"name":"value","type":"string","description":"Bound to value"},{"name":"placeholder","type":"string","description":"Text displayed within the input when no value is set"},{"name":"rows","type":"number","description":"Set the number of rows","default":"3"},{"name":"width","type":"string","description":"Width of text area","default":"60ch"},{"name":"error","type":"boolean","description":"Sets the input to an error state","valueSet":"boolean","default":"false"},{"name":"readOnly","type":"boolean","description":"Sets the input to a read only state","valueSet":"boolean","default":"false"},{"name":"disabled","type":"boolean","description":"Sets the input to a disabled state","valueSet":"boolean","default":"false"},{"name":"ariaLabel","type":"string","description":"Defines how the text will be translated for the screen reader. If not specified it will fall back to the name"}],"references":[{"name":"GoA Text Area","url":"https://design.alberta.ca/?path=/docs/components-text-area--basic"}],"description":"# Text Area Library\nText inputs let users enter and input text. Text areas can be used when trying to collect more information than may fit in a traditional form field.\n\nUse it like this:\n```html\n<goa-textarea name=\"comment\"\n              goaValue\n              [formControl]=\"reactiveFormCtrl\"\n              [value]=\"reactiveFormCtrl.value\">\n</goa-textarea>\n```\n"},{"name":"goa-tabs","attributes":[{"name":"initialtab","type":"string","description":"Tab position that is currently active"}],"references":[{"name":"GoA Tabs","url":"https://design.alberta.ca/?path=/docs/components-tabs--basic"}],"description":"# Tabs\nThe tabs component lets users navigate between related sections of content, displaying one section at a time.\nUse it like this:\n```html\n<goa-tabs initialtab=\"2\">\n  <goa-tab heading=\"Profile\">\n    <p>\n      <b>Profile</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n      bore et dolore magna aliqua.\n    </p>\n  </goa-tab>\n  <goa-tab>\n    <div slot=\"heading\">\n      Completed\n      <goa-badge type=\"midtone\" content=\"1\"></goa-badge>\n    </div>\n    <p>\n      <b>Completed:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n      labore et dolore magna aliqua.\n    </p>\n  </goa-tab>\n</goa-tabs>\n```\n"},{"name":"goa-table-sort-header","attributes":[{"name":"direction","description":"Horizontal spacing","type":"string","values":[{"name":"asc"},{"name":"desc"},{"name":"none"}],"default":"none"}],"references":[{"name":"GoA Table Sort Header","url":"https://design.alberta.ca/?path=/docs/components-table--basic"}],"description":"# Table Library\nTable is a set of structured data that is easy for a user to scan, examine, and compare.\n\nUse it like this:\n```html\n<goa-table>\n  <thead>\n    <tr>\n      <th>Col 1</th>\n      <th>Col 2</th>\n      <th>Col 3</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Item 1</td>\n      <td>Item 2</td>\n      <td>Item 3</td>\n    </tr>\n    <tr>\n      <td>Item 4</td>\n      <td>Item 5</td>\n      <td>Item 6</td>\n    </tr>\n  </tbody>\n</goa-table>\n```\n"},{"name":"goa-table","attributes":[{"name":"width","type":"string","description":"Width of the table. By default it will fit the enclosed content."},{"name":"variant","description":"A relaxed variant of the table with more vertical padding for the cells","values":[{"name":"normal"},{"name":"relaxed"}],"default":"normal"},{"name":"_sort","description":"Sort event fired when a GoATableSortHeader component is used."}],"references":[{"name":"GoA Table","url":"https://design.alberta.ca/?path=/docs/components-table--basic"}],"description":"# Table Library\nTable is a set of structured data that is easy for a user to scan, examine, and compare.\n\nUse it like this:\n```html\n<goa-table>\n  <thead>\n    <tr>\n      <th>Col 1</th>\n      <th>Col 2</th>\n      <th>Col 3</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Item 1</td>\n      <td>Item 2</td>\n      <td>Item 3</td>\n    </tr>\n    <tr>\n      <td>Item 4</td>\n      <td>Item 5</td>\n      <td>Item 6</td>\n    </tr>\n  </tbody>\n</goa-table>\n```\n"},{"name":"goa-tab","attributes":[{"name":"heading","type":"slot","description":"Add components to the tab heading such as badges"}],"references":[{"name":"GoA Tab Item","url":"https://design.alberta.ca/?path=/docs/components-tabs--basic"}],"description":"# Tabs\nThe tabs component lets users navigate between related sections of content, displaying one section at a time.\nUse it like this:\n```html\n<goa-tabs initialtab=\"2\">\n  <goa-tab heading=\"Profile\">\n    <p>\n      <b>Profile</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n      bore et dolore magna aliqua.\n    </p>\n  </goa-tab>\n  <goa-tab>\n    <div slot=\"heading\">\n      Completed\n      <goa-badge type=\"midtone\" content=\"1\"></goa-badge>\n    </div>\n    <p>\n      <b>Completed:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n      labore et dolore magna aliqua.\n    </p>\n  </goa-tab>\n</goa-tabs>\n```\n"},{"name":"goa-spinner","required":["size"],"attributes":[{"name":"size","description":"Size of the spinner","type":"string","valueSet":"size"},{"name":"invert","type":"boolean","valueSet":"boolean","default":"false"},{"name":"progress","type":"number","default":"-1"}]},{"name":"goa-spacer","attributes":[{"name":"hSpacing","description":"Horizontal spacing","type":"string","valueSet":"spacing","default":"none"},{"name":"vSpacing","description":"Vertical spacing","type":"string","valueSet":"spacing","default":"none"}],"references":[{"name":"GoA Spacer","url":"https://design.alberta.ca/?path=/docs/utility-spacer--basic"}],"description":"# GoA Spacer\nSpacing is the negative area between the components and the interface. You can apply spacing through any combination of margin, gap, or spacing component. All of these methods use the spacing tokens to remain consistent with the design system.\n\nUse it like this:\n\n```html\n<goa-block>\n  <div>Item 1</div>\n  <goa-spacer hSpacing=\"m\"></goa-spacer>\n  <div>Item 2</div>\n  <goa-spacer hSpacing=\"m\"></goa-spacer>\n  <div>Item 3</div>\n</goa-block>\n```\n"},{"name":"goa-skeleton","required":["type"],"attributes":[{"name":"type","description":"Pre-set skeleton shapes to represent your content","values":[{"name":"image"},{"name":"text"},{"name":"title"},{"name":"text-small"},{"name":"avatar"},{"name":"header"},{"name":"paragraph"},{"name":"thumbnail"},{"name":"card"},{"name":"profile"}]},{"name":"size","description":"Size can affect either the height, width or both for different skeleton types","values":[{"name":"1"},{"name":"2"},{"name":"3"},{"name":"4"}],"default":"1"},{"name":"lineCount","type":"number","description":"Used within components that contain multiple lines. Currently only used in card skeleton type","default":"3"},{"name":"maxWidth","type":"string","description":"Set component maximum width. Currently only used in card skeleton type","default":"320px"}],"references":[{"name":"GoA Skeleton","url":"https://design.alberta.ca/?path=/docs/components-skeleton--text"}],"description":"# Skeleton Library\nA skeleton provides visual feedback to users while a content heavy page or element is loading.\n\nUse it like this:\n```html\n<goa-skeleton type=\"text\"></goa-skeleton>\n```\n"},{"name":"goa-side-menu-heading","attributes":[],"references":[{"name":"GoA SideMenu","url":"https://design.alberta.ca/?path=/docs/components-sidemenu--submenu-groups-and-section-titles"}],"description":"# Side menu group\n\nUse it like this:\n```html\n<goa-side-menu>\n  <goa-side-menu-heading>Nav section</goa-side-menu-heading>\n  <a href=\"#foo\">Foo</a>\n  <a href=\"#bar\">Bar</a>\n  <a href=\"#fooo\">Fooo</a>\n  <a href=\"#barr\">Barr</a>\n</goa-side-menu>\n```\n"},{"name":"goa-side-menu-group","attributes":[{"name":"heading","description":"Heading text for group"}],"references":[{"name":"GoA SideMenu","url":"https://design.alberta.ca/?path=/docs/components-sidemenu--submenu-groups-and-section-titles"}],"description":"# Side menu group\n\nUse it like this:\n```html\n<goa-side-menu>\n  <a href=\"#about\">About</a>\n  <a href=\"#contact\">Contact</a>\n  <goa-side-menu-group heading=\"Links\">\n    <a href=\"#foo\">Foo</a>\n    <a href=\"#bar\">Bar</a>\n    <goa-side-menu-group heading=\"More Links\">\n      <a href=\"#more-foo\">More Foo</a>\n      <a href=\"#more-bar\">More Bar</a>\n    </goa-side-menu-group>\n  </goa-side-menu-group>\n</goa-side-menu>\n```\n"},{"name":"goa-side-menu","attributes":[],"references":[{"name":"GoA SideMenu","url":"https://design.alberta.ca/?path=/docs/components-sidemenu--basic"}],"description":"# Side Menu\n\nUse it like this:\n```html\n<goa-side-menu>\n  <a href=\"#about\">About</a>\n  <a href=\"#contact\">Contact</a>\n  <goa-side-menu-menu heading=\"Links\">\n    <a href=\"#foo\">Foo</a>\n    <a href=\"#bar\">Bar</a>\n    <goa-side-menu-menu heading=\"More Links\">\n      <a href=\"#more-foo\">More Foo</a>\n      <a href=\"#more-bar\">More Bar</a>\n    </goa-side-menu-menu>\n  </goa-side-menu-menu>\n</goa-side-menu>\n```\n"},{"name":"goa-scrollable"},{"name":"goa-radio-item","attributes":[{"name":"label","description":"Text to show to the user","type":"string"},{"name":"value","description":"Value of the item that will be returned when selected","type":"string"},{"name":"description","description":"Text added below the label text","type":"string"}],"references":[{"name":"GoA RadioGroupItem","url":"https://design.alberta.ca/?path=/docs/components-radio--basic"}]},{"name":"goa-radio-group","required":["name"],"attributes":[{"name":"name","description":"Must match the name assigned to the children","type":"string"},{"name":"value","description":"Value binding","type":"string"},{"name":"orientation","description":"Orientation of the radio items","values":[{"name":"horizontal"},{"name":"vertical"}],"default":"vertical"},{"name":"error","description":"Set the component to an error state","type":"boolean","valueSet":"boolean","default":"false"},{"name":"disabled","description":"Set the component to disabled","type":"boolean","valueSet":"boolean","default":"false"},{"name":"arialabel","type":"string","description":"Defines how the text will be translated for the screen reader. It not specified it will fall back to the name"}],"references":[{"name":"GoA RadioGroup","url":"https://design.alberta.ca/?path=/docs/components-radio--basic"}],"description":"# Radio Library\nRadios allow users to select one option from a set.\n\nUse it like this:\n\n```html\n<goa-radio-group name=\"color\"\n                 goaValue [formControl]=\"reactiveFormCtrl\"\n                 [value]=\"reactiveFormCtrl.value\">\n  <goa-radio-item value=\"red\"></goa-radio-item>\n</goa-radio-group>\n```\n"},{"name":"goa-popover","attributes":[{"name":"maxwidth","description":"The max width of the popover container","type":"string","default":"320px"},{"name":"padded","description":"Whether the popover should have padding","type":"boolean","default":"false"},{"name":"relative","description":"Set to true if a parent element has a css position of `relative`","type":"boolean","default":"false"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Popover","url":"https://design.alberta.ca/?path=/docs/components-popover--basic"}],"description":"# Popover Library\nThe popover component displays additional information for an object in a compact way and without leaving the page.\n\nUse it like this:\n\n```html\n<goa-popover padded>\n  <div slot=\"target\"><goa-button>Open</goa-button></div>\n  This is popver\n</goa-popover>\n```\n"},{"name":"goa-pagination","required":["pagenumber","itemcount"],"attributes":[{"name":"pagenumber","description":"The current page being viewed (non-zero based)","type":"number"},{"name":"itemcount","description":"Total number of data items within all pages","type":"number"},{"name":"perpagecount","description":"Number of data items shown per page","type":"number","default":"10"},{"name":"_change","description":"Callback function for page change events","values":[{"name":"(e: { detail: { page: number }}) => void"}]},{"name":"variant","description":"Controls which nav controls are visible","values":[{"name":"all"},{"name":"links-only"}],"default":"all"}],"references":[{"name":"GoA Pagination","url":"https://design.alberta.ca/?path=/docs/components-pagination--basic"}],"description":"# Pagination Library\nPagination helps users navigate between multiple pages or screens that are part of a related set.\n\nUse it like this:\n\n```html\n<goa-pagination\n  [itemcount]=\"users.length\"\n  perpagecount=\"10\"\n  [pagenumber]=\"page\"\n  (_change)=\"handlePageChange($event)\">\n</goa-pagination>\n```\n"},{"name":"goa-page-block","required":["width"],"attributes":[{"name":"width","type":"string"}],"description":"# Page Block\nUse it like this:\n```html\n<goa-page-block width=\"704px\">\n    <!-- Insert custom content here -->\n  </goa-page-block>\n```\n"},{"name":"goa-notification","required":["type"],"attributes":[{"name":"type","description":"Define the context and colour of the notification banner","values":[{"name":"information"},{"name":"important"},{"name":"emergency"},{"name":"event"}]},{"name":"_dismiss","description":"Dispatched when notification banner is closed."},{"name":"maxcontentwidth","default":"100%","description":"Maximum width of the content area","type":"string"},{"name":"arialive","default":"polite","description":"Aria live attribute","values":[{"name":"polite"},{"name":"assertive"},{"name":"off"}]}],"references":[{"name":"GoA Notification","url":"https://design.alberta.ca/?path=/docs/components-notification-banner--types"}],"description":"# Notification Banner\nNotification banners are boxes with text content that indicate one of the following: information messages, event messages, important messages, or emergency messages.\n\nUse it like this:\n```html\n<goa-notification type=\"information\" (_dismiss)=\"onDismiss()\">\n  Lorem ipsum dolor\n</goa-notification>\n```\n"},{"name":"goa-modal","required":["type"],"attributes":[{"name":"type","description":"Type of Modal","values":[{"name":"default"},{"name":"callout"}]},{"name":"calloutVariant","description":"Define the context and colour of the callout modal. It is required when type is set to callout.","values":[{"name":"information"},{"name":"important"},{"name":"emergency"},{"name":"success"},{"name":"event"}]},{"name":"heading","type":"string","description":"Heading text within the modal"},{"name":"maxwidth","type":"string","description":"Max width of the modal"},{"name":"open","type":"boolean","description":"Controls if modal is visible or not","valueSet":"boolean","default":"false"},{"name":"closable","description":"Show close icon and allow clicking the background to close the modal","valueSet":"boolean","default":"false"},{"name":"transition","description":"How modal transition onto screen","values":[{"name":"fast"},{"name":"slow"},{"name":"none"}],"default":"none"},{"name":"_close","description":"Dispatched when modal is closable and is closed"},{"name":"actions","description":"Buttons displayed in the bottom right of the modal instead of a close icon","values":[{"name":"slot"}]}],"references":[{"name":"GoA Modal","url":"https://design.alberta.ca/?path=/docs/components-modal--basic"}],"description":"# Modal Library\nA modal is a type of window that appears in front of the main page content and disables all other functionality while visible. Modals purposefully disrupt the user's workflow to capture their attention. The content in a modal should be succinct, direct, and contextually relevant to the user.\n\nUse it like this:\n```html\n<goa-button id=\"button\" (_click)=\"openModal()\">Open Modal</goa-button>\n\n<goa-modal id=\"modal\" heading=\"Do you agree?\" [open]=\"isOpen\" (_close)=\"closeModal()\" closable>\n  <p>\n    Lorem ipsum dolor sit.\n  </p>\n</goa-modal>\n```\n"},{"name":"goa-microsite-header","required":["type"],"attributes":[{"name":"type","values":[{"name":"alpha"},{"name":"beta"},{"name":"live"}]},{"name":"version","type":"string"},{"name":"feedbackUrl","type":"string","description":"Url to feedback page that will be displayed when provided."},{"name":"maxContentWidth","default":"100%","description":"Maximum width of the content area","type":"string"},{"name":"headerurltarget","default":"blank","description":"Sets the target=_blank attribute on the header url","values":[{"name":"self","description":"target=_self"},{"name":"blank","description":"target=_blank"}],"type":"self | blank"},{"name":"feedbackurltarget","default":"blank","description":"Sets the target=_blank attribute on the feedback url","values":[{"name":"self","description":"target=_self"},{"name":"blank","description":"target=_blank"}],"type":"self | blank"}],"references":[{"name":"GoA Microsite Header","url":"https://design.alberta.ca/?path=/docs/components-microsite-header--alpha"}],"description":"# Microsite Header Library\n\nUse the microsite header to communicate to the user what stage the service is at, and to establish an official connection to Alberta.ca when the service is on a subdomain. You can also use the microsite header to gather feedback throughout your service, and to show an application version number for quick reference by the service team.\n\nUse it like this:\n```html\n<goa-microsite-header type=\"alpha\"></goa-microsite-header>\n```\n"},{"name":"goa-input","attributes":[{"name":"type","description":"Sets the type of the input field","values":[{"name":"text"},{"name":"number"},{"name":"password"},{"name":"email"},{"name":"search"},{"name":"tel"},{"name":"date"},{"name":"datetime-locale"},{"name":"time"},{"name":"url"},{"name":"week"}],"default":"text"},{"name":"name","description":"Name of input value that is received in the _change event","type":"string"},{"name":"value","type":"string","description":"Bound to value"},{"name":"placeholder","type":"string","description":"Text displayed within the input when no value is set"},{"name":"leadingIcon","description":"Icon shown to the left of the text","valueSet":"goaIconType"},{"name":"trailingIcon","description":"Icon shown to the right of the text","valueSet":"goaIconType"},{"name":"disabled","type":"boolean","description":"Disable this control. It will not receive focus or events","valueSet":"boolean","default":"false"},{"name":"handleTrailingIconClick","description":"Flag that will result in an icon button component being rendered instead of an icon","type":"boolean","valueSet":"boolean","default":"false"},{"name":"focused","description":"Sets the cursor focus to the input","type":"boolean","valueSet":"boolean","default":"false"},{"name":"readonly","description":"Makes the input readonly","type":"boolean","valueSet":"boolean","default":"false"},{"name":"error","description":"Sets the input to an error state","type":"boolean","valueSet":"boolean","default":"false"},{"name":"width","description":"Set the width of the text input area","type":"string","default":"30ch"},{"name":"min","description":"A string value that supports any number, or an ISO 8601 format if using the date or datetime type","type":"string"},{"name":"max","description":"A string value that supports any number, or an ISO 8601 format if using the date or datetime type","type":"string"},{"name":"step","description":"How much a number or date should change by","type":"number"},{"name":"arialabel","description":"Defines how the input will be translated for the screen reader. If not specified it will fall back to the name. If both arialabel and arialabelledby are specified, arialabelledby will be used","type":"string"},{"name":"arialabelledby","description":"The aria-labelledby attribute identifies the element (or elements) that labels the input it is applied to. Normally it is the id of the label.","type":"string"},{"name":"autoCapitalize","description":"Controls whether and how text input is automatically capitalized as it is entered/edited by the user.","type":"string","values":[{"name":"on"},{"name":"off"},{"name":"none"},{"name":"sentences"},{"name":"words"},{"name":"characters"}],"default":"off"},{"name":"_trailingIconClick","description":"onclick function invoked when trailing icon is clicked"},{"name":"leadingContent","type":"slot","description":"Sets the content to the left of the input field"},{"name":"trailingContent","type":"slot","description":"Sets the content to the right of the input field"},{"name":"maxlength","type":"number","description":"Defines the maximum number of characters (as UTF-16 code units) the user can enter into the input."},{"name":"id","type":"string","description":"Unique identifier of the input"}],"references":[{"name":"GoA Input","url":"https://design.alberta.ca/?path=/docs/components-inputs--information"}],"description":"# Input Library\n\nText fields let users enter and input text.\n\nUse it like this:\n```html\n<goa-input id=\"color\" goaValue [formControl]=\"reactiveFormCtrl\" [value]=\"reactiveFormCtrl.value\"></goa-input>\n```\n"},{"name":"goa-icon-button","attributes":[{"name":"icon","description":"Set the icon","valueSet":"goaIconType"},{"name":"size","description":"Set the size of button","values":[{"name":"small"},{"name":"medium"},{"name":"large"}],"default":"medium"},{"name":"variant","description":"Style this button to show color, nocolor, dark or destructive action","values":[{"name":"color"},{"name":"nocolor"},{"name":"dark"},{"name":"destructive"}],"default":"color"},{"name":"title","type":"string","description":"Sets the title of the button"},{"name":"disabled","type":"boolean","description":"Disable this button","valueSet":"boolean","default":"false"},{"name":"_click","description":"Callback function when button is clicked"}],"references":[{"name":"GoA Icon Buttons","url":"{{siteUrl}]/?path=/docs/components-icon-button--icons"}],"description":"# Icon Button Library\nAn icon button is an icon that triggers some sort of action on the page. It is a button that contains an icon and no (visible) accompanying text.\n\nUse it like this:\n\n```html\n<goa-icon-button (_click)=\"onClick()\" icon=\"airplane\"></goa-icon-button>\n<goa-icon-button (_click)=\"onClick()\" icon=\"close\"></goa-icon-button>\n<goa-icon-button (_click)=\"onClick()\" icon=\"refresh\"></goa-icon-button>\n<goa-icon-button (_click)=\"onClick()\" icon=\"play-back\"></goa-icon-button>\n```\n"},{"name":"goa-icon","attributes":[{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"},{"name":"type","valueSet":"goaIconType"},{"name":"size","values":[{"name":"small"},{"name":"medium"},{"name":"large"},{"name":"xlarge"}]},{"name":"theme","values":[{"name":"outline"},{"name":"filled"},{"name":"sharp"}]},{"name":"inverted","type":"boolean","valueSet":"boolean"},{"name":"title","type":"string"},{"name":"arialabel","type":"string"}],"description":"# Icon Library\n\nUse it like this:\n```html\n<goa-icon type=\"alarm\" arialabel=\"Alert\"></goa-icon>\n```\n"},{"name":"goa-hero-banner","required":["heading"],"attributes":[{"name":"heading","type":"string","description":"Main heading text"},{"name":"backgroundurl","type":"string","description":"Background image url"},{"name":"minheight","type":"string","description":"Sets the height of the HeroBanner","default":"600px"},{"name":"maxcontentwidth","default":"100%","description":"Maximum width of the content area","type":"string"},{"name":"backgroundcolor","type":"string","description":"Background color for the hero banner"},{"name":"textcolor","type":"string","description":"Content color within hero banner"}],"references":[{"name":"GoA Hero Banner","url":"https://design.alberta.ca/?path=/docs/components-hero-banner--basic"}],"description":"# Hero Banner Library\n\nWhen a page requires promotion or is featured, a photograph may be inserted into the page header as a hero banner for aesthetic appeal.\n\n\nUse it like this:\n```html\n<goa-hero-banner\n  heading=\"Hero Banner\"\n>\n  Lorem ipsum dolor sit amet consectetur adipisicing elit.\n</goa-hero-banner>\n```\n"},{"name":"goa-grid","required":["minChildWidth"],"attributes":[{"name":"gap","description":"Gap between child items","valueSet":"spacing","default":"m"},{"name":"minChildWidth","type":"number","description":"Minimum width of the child elements"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Grid","url":"https://design.alberta.ca/?path=/docs/utility-grid--basic"}],"description":"# Grid Library\nThe grid helps to arrange a number of components into a responsive grid pattern.\n\nUse it like this:\n```html\n<goa-grid minChildWidth=\"30ch\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n  <div>4</div>\n  <div>5</div>\n</goa-grid>\n```\n\n"},{"name":"goa-form-item","attributes":[{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"},{"name":"label","type":"string","description":"Creates a label for a form item"},{"name":"labelsize","type":"regular | large","description":"Set a regular or large label size"},{"name":"helpText","type":"string","description":"Help text displayed under the form field to provide an additional explanation"},{"name":"error","type":"string","description":"Error text displayed under the form field. Leave blank to indicate valid field."},{"name":"requirement","type":"string","values":["optional","required"],"description":"Marks the field with optional/required label."},{"name":"id","type":"string","description":"ID of the label."}],"references":[{"name":"GoA Form item","url":"https://design.alberta.ca?path=/docs/utility-form-item--text-label"}],"description":"# Form Item Library\nA form item wraps an input control such as a text input, checkbox, or radio with a text label, requirement label, helper text, and error text.\n\nUse it like this:\n\n```html\n<goa-form-item label=\"First name\" id=\"firstName\">\n  <goa-input arialabel=\"First Name 1\" name=\"firstname\" arialabelledby=\"firstName\" type=\"text\"></goa-input>\n</goa-form-item>\n```\n"},{"name":"goa-app-footer-nav-section","attributes":[{"name":"heading","type":"string"},{"name":"maxcolumncount","type":"number","default":"1"}],"references":[{"name":"GoA Footer","url":"https://design.alberta.ca/?path=/docs/components-app-footer--basic"}],"description":"# Footer Navigation Library\n\nUse it like this:\n```html\n<goa-app-footer-nav-section maxColumnCount=\"3\" slot=\"nav\"></goa-app-footer-nav-section>\n```\n"},{"name":"goa-app-footer-meta-section","references":[{"name":"GoA Footer","url":"https://design.alberta.ca/?path=/docs/components-app-footer--basic"}],"description":"# Footer Meta Library\n\nUse it like this:\n```html\n<goa-app-footer-meta-section slot=\"meta\"></goa-app-footer-meta-section>\n```\n"},{"name":"goa-app-footer","attributes":[{"name":"maxContentWidth","description":"The maximum width of the main content area","type":"string","default":"100%"}],"references":[{"name":"GoA Footer","url":"https://design.alberta.ca/?path=/docs/components-app-footer--basic"}],"description":"# Footer Library\nThe footer resides at the bottom of every page of your service, providing copyright information and other information related to your service. The footer will not position itself on the bottom of the page, but must instead be positioned by either a GoA or custom layout component.\n\nUse it like this:\n\n```html\n<goa-app-footer></goa-app-footer>\n```\nor\n```html\n<goa-app-footer>\n  <goa-app-footer-meta-section slot=\"meta\">\n    <a href=\"privacy.html\">Privacy</a>\n    <a href=\"disclaimer.html\">Disclaimer</a>\n    <a href=\"accessibility.html\">Accessibility</a>\n    <a href=\"using-alberta.html\">Using Alberta.ca</a>\n  </goa-app-footer-meta-section>\n</goa-app-footer>\n```\n"},{"name":"goa-focus-trap"},{"name":"goa-file-upload-input","attributes":[{"name":"variant","description":"The variant to be used","values":[{"name":"dragdrop"},{"name":"button"}],"default":"dragdrop"},{"name":"accept","description":"[Mimetype](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) to limit the types of files.","valueSet":"string","default":"*"},{"name":"maxfilesize","description":"Max allowed file size","valueSet":"string","default":"5MB"},{"name":"_select","description":"Event fired for each file selected"},{"name":"","description":"","valueSet":"string","default":""}],"references":[{"name":"GoA FileUploadInput","url":"https://design.alberta.ca/?path=/docs/components-file-upload--basic"}]},{"name":"goa-file-upload-card","required":["name","_cancel","_delete"],"attributes":[{"name":"name","description":"Name of the file","valueSet":"string"},{"name":"size","description":"Size (B) of the file","valueSet":"number"},{"name":"type","description":"Type of the file","valueSet":"string"},{"name":"error","description":"Error message","valueSet":"string"},{"name":"_cancel","description":"Event fired when a file upload is cancelled"},{"name":"_delete","description":"Event fired when an uploaded file is deleted"}],"references":[{"name":"GoA FileUploadCard","url":"https://design.alberta.ca/?path=/docs/components-file-upload--basic"}]},{"name":"goa-dropdown-item","attributes":[{"name":"value","type":"string","description":"The value of the item. This value will be contained within the onChange event"},{"name":"label","type":"string","description":"The displayed value within the selection box. The value property is the fallback value."},{"name":"filter","type":"string","description":"When true the dropdown will have the ability to filter options by typing into the input field."}],"references":[{"name":"GoA Dropdown","url":"https://design.alberta.ca/?path=/docs/components-dropdown--basic"}],"description":"# Dropdown Library\nDropdowns hide a long list of options, arranged vertically. A single select menu list is revealed upon interaction with this component.\n\nUse it like this:\n```html\n<goa-dropdown\n  goaValue\n  name=\"colors\"\n  id=\"colors\"\n  filterable=\"true\"\n  [formControl]=\"reactiveFormCtrl\"\n  [value]=\"reactiveFormCtrl.value\">\n  <goa-dropdown-item\n    *ngFor=\"let color of colors\"\n    [value]=\"color\"\n    [label]=\"color\"\n  >\n  </goa-dropdown-item>\n</goa-dropdown>\n```\n"},{"name":"goa-dropdown","attributes":[{"name":"name","type":"string","description":"Must be unique in the rendered view and must match the children's name"},{"name":"value","type":"string","description":"Stores the value of the item selected from the dropdown"},{"name":"leadingIcon","valueSet":"goaIconType","description":"Show an icon to the left of the dropdown option. Non-native only"},{"name":"maxHeight","type":"string","description":"Maximum height of the dropdown menu items popover. Non-native only","default":"276px"},{"name":"placeholder","type":"string","description":"The text displayed for the dropdown before a selection is made. Non-native only"},{"name":"id","type":"string","description":"Set an id for the dropdown component."},{"name":"width","type":"string","description":"Override the autosized menu width"},{"name":"disabled","type":"boolean","description":"Disable this control","valueSet":"boolean","default":"false"},{"name":"error","type":"boolean","description":"Show an error state","valueSet":"boolean","default":"false"},{"name":"arialabel","type":"string","description":"Defines how the selected value will be translated for the screen reader. If not specified it will fall back to the name. If both arialabel and arialabelledby are specified, arialabelledby will be used"},{"name":"arialabelledby","type":"string","description":"The aria-labelledby attribute identifies the element (or elements) that labels the dropdown it is applied to. Normally it is the id of the label."},{"name":"native","type":"boolean","description":"When true will render the native <select> html element","valueSet":"boolean","default":"false"},{"name":"relative","description":"Set to true if a parent element has a css position of `relative`","type":"boolean","default":"false"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"},{"name":"filterable","description":"When true, the dropdown will be filterable. Non-native only","valueSet":"boolean","default":"false"}],"references":[{"name":"GoA Dropdown","url":"https://design.alberta.ca/?path=/docs/components-dropdown--basic"}],"description":"# Dropdown Library\nDropdowns hide a long list of options, arranged vertically. A single select menu list is revealed upon interaction with this component.\n\nUse it like this:\n```html\n<goa-dropdown\n  goaValue\n  name=\"colors\"\n  id=\"colors\"\n  filterable=\"true\"\n  [formControl]=\"reactiveFormCtrl\"\n  [value]=\"reactiveFormCtrl.value\">\n  <goa-dropdown-item\n    *ngFor=\"let color of colors\"\n    [value]=\"color\"\n    [label]=\"color\"\n  >\n  </goa-dropdown-item>\n</goa-dropdown>\n```\n"},{"name":"goa-divider","attributes":[{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Divider","url":"https://design.alberta.ca/?path=/docs/utility-divider--spacing#divider"}],"description":"# Divider Library\nDividers are used to indicate a sepearation of layout, or to distinguish large chunks of information on a page.\n\nUse it like this:\n```html\n<goa-divider mt=\"s\" mb=\"s\"></goa-divider>\n<goa-divider mt=\"m\" mb=\"m\"></goa-divider>\n<goa-divider mt=\"l\" mb=\"l\"></goa-divider>\n<goa-divider></goa-divider>\n```\n"},{"name":"goa-details","required":["heading"],"attributes":[{"name":"heading","type":"string","description":"The title heading"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"},{"name":"open","description":"Controls if details is expanded or collapsed","valueSet":"boolean"}],"references":[{"name":"GoA Details","url":"https://design.alberta.ca/?path=/docs/components-details--basic"}],"description":"# Details Library\nDetails let users reveal more detailed information when they need it.\n\nUse it like this:\n```html\n<goa-details heading=\"This is the title\">\n  <p>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </p>\n</goa-details>\n\nExpand/Hide details:\n\n<goa-details heading=\"This is the title\" [open]=\"true\">\n  <p>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel lacinia metus, sed sodales lectus. Aliquam sed volutpat velit. Sed in lacus ut dui placerat accumsan malesuada quis erat. Aenean mi diam, rhoncus vitae justo eu, venenatis maximus nunc. In vel est commodo, porttitor sem vel, tincidunt ipsum. In hac habitasse platea dictumst. Mauris varius mollis dui. Aenean ut dui eu arcu rutrum auctor. Curabitur cursus velit vel libero sollicitudin tincidunt. Proin tincidunt, enim et ultrices rhoncus, nibh leo imperdiet sapien, sed porttitor ipsum nulla non massa. Nulla facilisi.\n  </p>\n</goa-details>\n```\n"},{"name":"goa-datepicker","attributes":[{"name":"name","description":"Name of the date property","type":"string"},{"name":"value","type":"string","description":"Selected date value"},{"name":"min","type":"string","description":"Min allowed date value"},{"name":"max","type":"string","description":"Max allowed date value"},{"name":"relative","type":"string","defaultValue":"false","description":"Set to true when datepicker is nested in a position=relative element"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA DatePicker","url":"https://design.alberta.ca/iframe.html?viewMode=docs&id=components-datepicker--basic&args=#datepicker"}],"description":"# DatePicker Library\n\n\nUse it like this:\n\n```\n\t<goa-date-picker></goa-date-picker>\n\t<goa-date-picker relative=\"true\"></goa-date-picker>\n\t<goa-date-picker [value]=\"date\"></goa-date-picker>\n\t<goa-date-picker [min]=\"min\" [max]=\"max\"></goa-date-picker>\n```\n"},{"name":"goa-container","attributes":[{"name":"type","description":"Choose the type of container the type of the accent bar","values":[{"name":"interactive"},{"name":"info"},{"name":"error"},{"name":"success"},{"name":"important"},{"name":"non-interactive"}],"default":"interactive"},{"name":"accent","description":"Sets the style of accent on the container","values":[{"name":"thick"},{"name":"thin"},{"name":"filled"}],"default":"filled"},{"name":"padding","description":"Sets the amount of white space in the container","values":[{"name":"relaxed"},{"name":"compact"}],"default":"relaxed"},{"name":"title","type":"slot","description":"Sets the content in the left of the accent bar"},{"name":"action","type":"slot","description":"Sets the content in the right of the accent bar"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Container","url":"https://design.alberta.ca/?path=/docs/components-container--container-types#container"}],"description":"# Container Library\nContainers are used to group information, create hierarchy, facilitate navigation, highlight a feature, or promote a call-to-action. Containers should be easy to scan for relevant and actionable information.\n\nUse it like this:\n```html\n<goa-container type=\"non-interactive\">\n    <h2>Non-Interactive Container</h2>\n    Content\n</goa-container>\n```\n"},{"name":"goa-circular-progress","attributes":[{"name":"variant","description":"Stretch across the full screen or use it inline","values":[{"name":"fullscreen"},{"name":"inline"}],"default":"inline"},{"name":"visible","type":"boolean","description":"Show/hide the page loader. This allows for fade transition to be applied in each transition.","valueSet":"boolean","default":"false"},{"name":"size","description":"Size of the progress indicator","values":[{"name":"small"},{"name":"large"}],"default":"large"},{"name":"progress","type":"number","description":"Set the progress value. Setting this value will change the type from infinite to progress","values":[{"name":"-1"}],"default":"-1"},{"name":"message","type":"string","description":"Loading message displayed under the progress indicator"}],"references":[{"name":"GoA Circular progress","url":"https://design.alberta.ca/?path=/docs/components-circular-progress--basic"}],"description":"# Circular Progress Library\n\nA circular progress component provides visual feedback to users after they request an action from the system, e.g., submitting a form, calculating a fee, configuring tables. The progress indicator holds a user’s attention by indicating continued progress while the system loads the appropriate content. The most common progress indicators are either circular or linear.\n\nUse it like this:\n```html\n<goa-circular-progress\n  size=\"small\"\n  visible>\n</goa-circular-progress>\n\n<goa-circular-progress\n  size=\"large\"\n  visible>\n</goa-circular-progress>\n```\n\n"},{"name":"goa-chip","required":"content","attributes":[{"name":"variant","description":"The type of chip to use","values":[{"name":"filter"}],"default":"filter"},{"name":"leadingIcon","type":"string","description":"Show an icon to the left of the text","valueSet":"goaIconType"},{"name":"error","type":"boolean","description":"Show an error state","valueSet":"boolean","default":"false"},{"name":"deletable","type":"boolean","description":"Show a delete icon button on the right of the text label","valueSet":"boolean","default":"false"},{"name":"content","type":"string","description":"Text label of the chip"},{"name":"_click","description":"Callback when deletable and delete icon is clicked"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Chip","url":"https://design.alberta.ca/?path=/docs/components-chip--basic"}],"description":"# Chips Library\nChips allow users to enter information, filter content, and make selections in a dynamic way. They are different from badges as badges are static and triggered by the system. Chips differentiate from buttons as buttons appear consistently within the design form each user and contain familiar calls to action. Depending on the context where the chip is applied, the design and interaction of the chip may vary.\n\nUse it like this:\n\n```html\n<goa-chip content=\"Chip Text\"></goa-chip>\n```\n"},{"name":"goa-checkbox","required":["name","checked"],"attributes":[{"name":"name","type":"string","description":"Must match the name assigned to the children"},{"name":"checked","type":"boolean","description":"Mark the checkbox item as selected","valueSet":"boolean"},{"name":"text","type":"string","description":"Content to display as the label for the Checkbox"},{"name":"value","type":"string","description":"The value binding to the checkbox"},{"name":"description","type":"string","description":"The description added below the label text"},{"name":"disabled","type":"boolean","description":"Disable this control. It will not receive focus or events","valueSet":"boolean","default":"false"},{"name":"error","type":"boolean","description":"Show an error on the checkbox item","valueSet":"boolean","default":"false"},{"name":"ariaLabel","type":"string","description":"Defines how the text will be translated for the screen reader. If not specified it will fall back to the name\n"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Checkbox","url":"https://design.alberta.ca/?path=/docs/components-checkbox--basic#checkbox"}],"description":"# Checkboxes Library\n\nCheckboxes are contained in a fieldset for accessibility and categorization purposes. The option group (checkbox and label) can be selected by the user with an input device. The option is meant to be submitted as data and is part of a form. The input data, while can be selected, will not be recorded until the user presses a submission button.\n\nUse it like this:\n\n```html\n<goa-checkbox\n  goaValue\n  name=\"desserts\"\n  text=\"Ice Cream\"\n  [formControl]=\"reactiveFormCtrl\"\n  [value]=\"reactiveFormCtrl.value\"\n></goa-checkbox>\n```\n"},{"name":"goa-card-image","attributes":[{"name":"src","type":"string"},{"name":"height","type":"string"}]},{"name":"goa-card-group"},{"name":"goa-card-content"},{"name":"goa-card-actions"},{"name":"goa-card","attributes":[{"name":"elevation","type":"number"},{"name":"width","type":"number"},{"name":"height","type":"string","values":[{"name":"auto"},{"name":"max"}]},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"description":"# Card Library\n\nUse it like this:\n```html\n<goa-card elevation=\"1\" height=\"max\">\n    <goa-card-content>\n        <h3>This is the card</h3>\n      <p>\n        Lorem ipsum dolor sit amet, qui minim.\n      </p>\n    </goa-card-content>\n</goa-card>\n```\n"},{"name":"goa-callout","required":["type"],"attributes":[{"name":"type","description":"Define the context and colour of the callout","values":[{"name":"information"},{"name":"important"},{"name":"emergency"},{"name":"success"},{"name":"event"}]},{"name":"heading","type":"string","description":"Callout heading text"},{"name":"size","description":"Define the size of the callouts.","values":[{"name":"medium"},{"name":"large"}]},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Callout","url":"https://design.alberta.ca/?path=/docs/components-callout--emergency"}],"description":"# Callout Library\n\nCallouts communicate important changes or facts within the body layout through a strong visual emphasis, so that users take notice and read the information.\n\nUse it like this:\n\n```html\n<goa-callout type=\"emergency\" heading=\"Emergency callout\">\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n</goa-callout>\n\n<goa-callout type=\"emergency\" heading=\"Emergency callout\" size=\"medium\">\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n</goa-callout>\n```\n"},{"name":"goa-calendar","attributes":[{"name":"name","description":"Name of the date property","type":"string"},{"name":"value","type":"string","description":"Selected date value"},{"name":"min","type":"string","description":"Min allowed date value"},{"name":"max","type":"string","description":"Max allowed date value"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Calendar","url":"https://design.alberta.ca/iframe.html?viewMode=docs&id=components-calendar--basic&args=#calendar"}],"description":"# Calendar Library\n\n\nUse it like this:\n\n```\n\t<goa-calendar></goa-calendar>\n\t<goa-calendar [value]=\"date\"></goa-calendar>\n\t<goa-calendar [min]=\"min\" [max]=\"max\"></goa-calendar>\n```\n"},{"name":"goa-button-group","attributes":[{"name":"alignment","type":"string","description":"Positions the button group in the page layout","values":[{"name":"start"},{"name":"end"},{"name":"center"}]},{"name":"gap","type":"string","description":"Defines the spacing between buttons in the button group","values":[{"name":"relaxed"},{"name":"compact"}],"default":"relaxed"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Button Group","url":"https://design.alberta.ca/?path=/docs/components-button-group--alignment"}],"description":"# Button Group Library\n\nButton group displays multiple related actions stacked or in a horizontal row to help with arrangement and spacing.\n\nUse it like this:\n\n```\n<goa-button-group alignment=\"start\">\n  <goa-button type=\"primary\" (_click)=\"onClick()\">Primary</goa-button>\n  <goa-button type=\"secondary\" (_click)=\"onClick()\">Secondary</goa-button>\n  <goa-button type=\"secondary\" (_click)=\"onClick()\">Secondary</goa-button>\n</goa-button-group>\n<goa-button-group alignment=\"center\">\n  <goa-button type=\"primary\" (_click)=\"onClick()\">Primary</goa-button>\n  <goa-button type=\"secondary\" (_click)=\"onClick()\">Secondary</goa-button>\n  <goa-button type=\"secondary\" (_click)=\"onClick()\">Secondary</goa-button>\n</goa-button-group>\n<goa-button-group alignment=\"end\">\n  <goa-button type=\"primary\" (_click)=\"onClick()\">Primary</goa-button>\n  <goa-button type=\"secondary\" (_click)=\"onClick()\">Secondary</goa-button>\n  <goa-button type=\"secondary\" (_click)=\"onClick()\">Secondary</goa-button>\n</goa-button-group>\n```\n"},{"name":"goa-button","attributes":[{"name":"type","description":"Define the type of button","type":"string","values":[{"name":"primary"},{"name":"submit"},{"name":"secondary"},{"name":"tertiary"},{"name":"start"}],"default":"primary"},{"name":"size","description":"Set the size of button [to compact]","type":"string","values":[{"name":"normal"},{"name":"compact"}],"default":"normal"},{"name":"variant","type":"string","description":"Style this button to show a destructive action","values":[{"name":"normal"},{"name":"destructive"}],"default":"normal"},{"name":"disabled","type":"boolean","description":"Disable this button","valueSet":"boolean","default":"false"},{"name":"leadingIcon","type":"string","description":"Show an icon to the left of the text","valueSet":"goaIconType"},{"name":"trailingIcon","description":"Show an icon to the right of the text","type":"string","valueSet":"goaIconType"},{"name":"_click","description":"Callback function when button is clicked"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Button","url":"https://design.alberta.ca/iframe.html?viewMode=docs&id=components-button--types&args=#button"}],"description":"# Button Library\n\nUse a button to carry out an important action or to navigate to another page. \n\nUse it like this:\n\n```html\n<goa-button (_click)=\"onClick()\" type=\"primary\">Primary</goa-button>\n<goa-button (_click)=\"onClick()\" type=\"secondary\">Secondary</goa-button>\n<goa-button (_click)=\"onClick()\" type=\"tertiary\">Tertiary</goa-button>\n<goa-button (_click)=\"onClick()\" type=\"start\">Get started</goa-button>\n```\n"},{"name":"goa-block","attributes":[{"name":"gap","description":"Spacing between items","valueSet":"spacing","default":"m"},{"name":"direction","description":"Stacking direction of child components","values":[{"name":"row"},{"name":"column"}],"type":"string","default":"row"},{"name":"alignment","description":"Primary axis alignment","values":[{"name":"center"},{"name":"start"},{"name":"end"}],"type":"string","default":"start"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Block","url":"https://design.alberta.ca/iframe.html?viewMode=docs&id=utility-block--horizontal&args=#used-when-grouping-components-into-a-block-with-consistent-space-between"}],"description":"# Block Library\n\nUsed when grouping components into a block with consistent space between.\n\nUse it like this:\n\n```html\n<goa-block gap=\"m\">\n  <div>Item 1</div>\n  <div>Item 2</div>\n  <div>Item 3</div>\n</goa-block>\n```\n"},{"name":"goa-badge","required":["type"],"attributes":[{"name":"type","description":"Define the context and colour of the badge","type":"string","values":[{"name":"success"},{"name":"important"},{"name":"information"},{"name":"emergency"},{"name":"dark"},{"name":"midtone"},{"name":"light"}]},{"name":"icon","type":"boolean","description":"Include an icon in the badge","default":"false","valueSet":"boolean"},{"name":"content","description":"Text label of the badge","type":"string"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"},{"name":"arialabel","description":"Label for screen readers","type":"string"}],"references":[{"name":"GoA Badge","url":"https://design.alberta.ca/iframe.html?viewMode=docs&id=components-badge--basic&args=#badge"}],"description":"# Badge Library\n\nBadges are system driven, non-interactive, small labels which display minimal\namounts of information, system feedback, or states.\n\nUse it like this:\n\n```\n<goa-badge type=\"information\" content=\"Information\"></goa-badge>\n<goa-badge type=\"success\" content=\"Success\"></goa-badge>\n<goa-badge type=\"important\" content=\"Important\"></goa-badge>\n<goa-badge type=\"emergency\" content=\"Emergency\"></goa-badge>\n<goa-badge type=\"dark\" content=\"Dark\"></goa-badge>\n<goa-badge type=\"midtone\" content=\"Midtone\"></goa-badge>\n<goa-badge type=\"light\" content=\"Light\"></goa-badge>\n\n```\n"},{"name":"goa-app-header-menu","attributes":[{"name":"heading","description":"Set the group name to display at the top of the app header menu","type":"string"},{"name":"leadingicon","description":"Icon to display to the left of the menu text","type":"string"}],"references":[{"name":"GoA App header menu","url":"https://design.alberta.ca/iframe.html?viewMode=docs&id=components-app-header--basic&args=#app-header"}],"description":"# App Header Menu\n\nUsed within the AppHeader to display a group of menu items\n\n```html\n<goa-app-header heading=\"MyApp\">\n  <a href=\"#link\">Link</a>\n  <goa-app-header-menu heading=\"Account\">\n    <a href=\"#settings\">Settings</a>\n    <a href=\"#signout\">Signout</a>\n  </goa-app-header-menu>\n</goa-app-header>\n```\n"},{"name":"goa-app-header","attributes":[{"name":"url","description":"Set the URL to link from the alberta.ca logo. A full url is required","type":"string"},{"name":"heading","description":"Set the service name to display in the app header","type":"string"},{"name":"maxContentWidth","default":"100%","description":"Maximum width of the content area","type":"string"}],"references":[{"name":"GoA App header","url":"https://design.alberta.ca/iframe.html?viewMode=docs&id=components-app-header--basic&args=#app-header"}],"description":"# App Header Library\n\nThe header helps users identify where they are and provides a quick, organized way to reach important sections of a website.\n\n```html\n<goa-app-header heading=\"Some service\">\n  <a href=\"#aboutus\">About Us</a>\n  <a href=\"#signout\" class=\"interactive\">Signout</a>\n</goa-app-header>\n```\n"},{"name":"goa-accordion","required":["heading"],"attributes":[{"name":"heading","description":"Sets the heading text","type":"string"},{"name":"secondaryText","description":"Sets secondary text","type":"string"},{"name":"open","default":"false","description":"Sets the state of the accordion container open or closed","values":[{"name":"false","description":"Container is closed."},{"name":"true","description":"Container is opened."}],"type":"boolean"},{"name":"headingSize","default":"small","description":"Sets the heading size of the accordion container heading","values":[{"name":"small","description":"Heading size of the accordion container is small"},{"name":"medium","description":"Heading size of the accordion container is medium"}],"type":"string"},{"name":"headingcontent","description":"Add components to the accordion container heading such as badges","type":"slot"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Accordion","url":"https://design.alberta.ca/?path=/docs/components-accordion--basic#accordion"}],"description":"# Accordion Library\nAccordion containers enable multiple content sections to be displayed in a limited space and collapsed or expanded by the user. You can create hierarchy of information by hiding secondary content inside collapsed expand containers.\n\nUse it like this:\n```html\n<goa-accordion heading=\"Heading\">\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n</goa-accordion>\n```\n"}],"valueSets":[{"name":"spacing","values":[{"name":"none"},{"name":"3xs"},{"name":"2xs"},{"name":"xs"},{"name":"s"},{"name":"m"},{"name":"l"},{"name":"xl"},{"name":"2xl"},{"name":"3xl"},{"name":"4xl"}]},{"name":"boolean","values":[{"name":"true"},{"name":"false"}]},{"name":"size","values":[{"name":"small"},{"name":"medium"},{"name":"large"},{"name":"xlarge"}]},{"name":"goaIconType","values":[{"name":"accessibility"},{"name":"add-circle"},{"name":"add"},{"name":"airplane"},{"name":"alarm"},{"name":"albums"},{"name":"alert-circle"},{"name":"alert"},{"name":"american-football"},{"name":"analytics"},{"name":"aperture"},{"name":"apps"},{"name":"archive"},{"name":"arrow-back-circle"},{"name":"arrow-back"},{"name":"arrow-down-circle"},{"name":"arrow-down"},{"name":"arrow-forward-circle"},{"name":"arrow-forward"},{"name":"arrow-redo-circle"},{"name":"arrow-redo"},{"name":"arrow-undo-circle"},{"name":"arrow-undo"},{"name":"arrow-up-circle"},{"name":"arrow-up"},{"name":"at-circle"},{"name":"at"},{"name":"attach"},{"name":"backspace"},{"name":"bag-add"},{"name":"bag-check"},{"name":"bag-handle"},{"name":"bag"},{"name":"bag-remove"},{"name":"balloon"},{"name":"ban"},{"name":"bandage"},{"name":"bar-chart"},{"name":"barbell"},{"name":"barcode"},{"name":"baseball"},{"name":"basket"},{"name":"basketball"},{"name":"battery-charging"},{"name":"battery-dead"},{"name":"battery-full"},{"name":"battery-half"},{"name":"beaker"},{"name":"bed"},{"name":"beer"},{"name":"bicycle"},{"name":"bluetooth"},{"name":"boat"},{"name":"body"},{"name":"bonfire"},{"name":"book"},{"name":"bookmark"},{"name":"bookmarks"},{"name":"bowling-ball"},{"name":"briefcase"},{"name":"browsers"},{"name":"brush"},{"name":"bug"},{"name":"build"},{"name":"bulb"},{"name":"bus"},{"name":"business"},{"name":"cafe"},{"name":"calculator"},{"name":"calendar-clear"},{"name":"calendar-number"},{"name":"calendar"},{"name":"call"},{"name":"camera"},{"name":"camera-reverse"},{"name":"car"},{"name":"car-sport"},{"name":"card"},{"name":"caret-back-circle"},{"name":"caret-back"},{"name":"caret-down-circle"},{"name":"caret-down"},{"name":"caret-forward-circle"},{"name":"caret-forward"},{"name":"caret-up-circle"},{"name":"caret-up"},{"name":"cart"},{"name":"cash"},{"name":"cellular"},{"name":"chatbox-ellipses"},{"name":"chatbox"},{"name":"chatbubble-ellipses"},{"name":"chatbubble"},{"name":"chatbubbles"},{"name":"checkbox"},{"name":"checkmark-circle"},{"name":"checkmark-done-circle"},{"name":"checkmark-done"},{"name":"checkmark"},{"name":"chevron-back-circle"},{"name":"chevron-back"},{"name":"chevron-down-circle"},{"name":"chevron-down"},{"name":"chevron-forward-circle"},{"name":"chevron-forward"},{"name":"chevron-up-circle"},{"name":"chevron-up"},{"name":"clipboard"},{"name":"close-circle"},{"name":"close"},{"name":"cloud-circle"},{"name":"cloud-done"},{"name":"cloud-download"},{"name":"cloud-offline"},{"name":"cloud"},{"name":"cloud-upload"},{"name":"cloudy-night"},{"name":"cloudy"},{"name":"code-download"},{"name":"code"},{"name":"code-slash"},{"name":"code-working"},{"name":"cog"},{"name":"color-fill"},{"name":"color-filter"},{"name":"color-palette"},{"name":"color-wand"},{"name":"compass"},{"name":"construct"},{"name":"contract"},{"name":"contrast"},{"name":"copy"},{"name":"create"},{"name":"crop"},{"name":"cube"},{"name":"cut"},{"name":"desktop"},{"name":"diamond"},{"name":"dice"},{"name":"disc"},{"name":"document-attach"},{"name":"document-lock"},{"name":"document"},{"name":"document-text"},{"name":"documents"},{"name":"download"},{"name":"duplicate"},{"name":"ear"},{"name":"earth"},{"name":"easel"},{"name":"egg"},{"name":"ellipse"},{"name":"ellipsis-horizontal-circle"},{"name":"ellipsis-horizontal"},{"name":"ellipsis-vertical-circle"},{"name":"ellipsis-vertical"},{"name":"enter"},{"name":"exit"},{"name":"expand"},{"name":"extension-puzzle"},{"name":"eye-off"},{"name":"eye"},{"name":"eyedrop"},{"name":"fast-food"},{"name":"female"},{"name":"file-tray-full"},{"name":"file-tray"},{"name":"file-tray-stacked"},{"name":"filenames.ps1"},{"name":"film"},{"name":"filter-circle"},{"name":"filter"},{"name":"finger-print"},{"name":"fish"},{"name":"fitness"},{"name":"flag"},{"name":"flame"},{"name":"flash-off"},{"name":"flash"},{"name":"flashlight"},{"name":"flask"},{"name":"flower"},{"name":"folder-open"},{"name":"folder"},{"name":"football"},{"name":"footsteps"},{"name":"funnel"},{"name":"game-controller"},{"name":"gift"},{"name":"git-branch"},{"name":"git-commit"},{"name":"git-compare"},{"name":"git-merge"},{"name":"git-network"},{"name":"git-pull-request"},{"name":"glasses"},{"name":"globe"},{"name":"golf"},{"name":"grid"},{"name":"hammer"},{"name":"hand-left"},{"name":"hand-right"},{"name":"happy"},{"name":"hardware-chip"},{"name":"headset"},{"name":"heart-circle"},{"name":"heart-dislike-circle"},{"name":"heart-dislike"},{"name":"heart-half"},{"name":"heart"},{"name":"help-buoy"},{"name":"help-circle"},{"name":"help"},{"name":"home"},{"name":"hourglass"},{"name":"ice-cream"},{"name":"id-card"},{"name":"image"},{"name":"images"},{"name":"infinite"},{"name":"information-circle"},{"name":"information"},{"name":"invert-mode"},{"name":"journal"},{"name":"key"},{"name":"keypad"},{"name":"language"},{"name":"laptop"},{"name":"layers"},{"name":"leaf"},{"name":"library"},{"name":"link"},{"name":"list-circle"},{"name":"list"},{"name":"locate"},{"name":"location"},{"name":"lock-closed"},{"name":"lock-open"},{"name":"log-in"},{"name":"log-out"},{"name":"magnet"},{"name":"mail-open"},{"name":"mail"},{"name":"mail-unread"},{"name":"male-female"},{"name":"male"},{"name":"man"},{"name":"map"},{"name":"medal"},{"name":"medical"},{"name":"medkit"},{"name":"megaphone"},{"name":"menu"},{"name":"mic-circle"},{"name":"mic-off-circle"},{"name":"mic-off"},{"name":"mic"},{"name":"moon"},{"name":"move"},{"name":"musical-note"},{"name":"musical-notes"},{"name":"navigate-circle"},{"name":"navigate"},{"name":"newspaper"},{"name":"notifications-circle"},{"name":"notifications-off-circle"},{"name":"notifications-off"},{"name":"notifications"},{"name":"nuclear"},{"name":"nutrition"},{"name":"open"},{"name":"options"},{"name":"paper-plane"},{"name":"partly-sunny"},{"name":"pause-circle"},{"name":"pause"},{"name":"paw"},{"name":"pencil"},{"name":"people-circle"},{"name":"people"},{"name":"person-add"},{"name":"person-circle"},{"name":"person"},{"name":"person-remove"},{"name":"phone-landscape"},{"name":"phone-portrait"},{"name":"pie-chart"},{"name":"pin"},{"name":"pint"},{"name":"pizza"},{"name":"planet"},{"name":"play-back-circle"},{"name":"play-back"},{"name":"play-circle"},{"name":"play-forward-circle"},{"name":"play-forward"},{"name":"play"},{"name":"play-skip-back-circle"},{"name":"play-skip-back"},{"name":"play-skip-forward-circle"},{"name":"play-skip-forward"},{"name":"podium"},{"name":"power"},{"name":"pricetag"},{"name":"pricetags"},{"name":"print"},{"name":"prism"},{"name":"pulse"},{"name":"push"},{"name":"qr-code"},{"name":"radio-button-off"},{"name":"radio-button-on"},{"name":"radio"},{"name":"rainy"},{"name":"reader"},{"name":"receipt"},{"name":"recording"},{"name":"refresh-circle"},{"name":"refresh"},{"name":"reload-circle"},{"name":"reload"},{"name":"remove-circle"},{"name":"remove"},{"name":"reorder-four"},{"name":"reorder-three"},{"name":"reorder-two"},{"name":"repeat"},{"name":"resize"},{"name":"restaurant"},{"name":"return-down-back"},{"name":"return-down-forward"},{"name":"return-up-back"},{"name":"return-up-forward"},{"name":"ribbon"},{"name":"rocket"},{"name":"rose"},{"name":"sad"},{"name":"save"},{"name":"scale"},{"name":"scan-circle"},{"name":"scan"},{"name":"school"},{"name":"search-circle"},{"name":"search"},{"name":"send"},{"name":"server"},{"name":"settings"},{"name":"shapes"},{"name":"share"},{"name":"share-social"},{"name":"shield-checkmark"},{"name":"shield-half"},{"name":"shield"},{"name":"shirt"},{"name":"shuffle"},{"name":"skull"},{"name":"snow"},{"name":"sparkles"},{"name":"speedometer"},{"name":"square"},{"name":"star-half"},{"name":"star"},{"name":"stats-chart"},{"name":"stop-circle"},{"name":"stop"},{"name":"stopwatch"},{"name":"storefront"},{"name":"subway"},{"name":"sunny"},{"name":"swap-horizontal"},{"name":"swap-vertical"},{"name":"sync-circle"},{"name":"sync"},{"name":"tablet-landscape"},{"name":"tablet-portrait"},{"name":"telescope"},{"name":"tennisball"},{"name":"terminal"},{"name":"text"},{"name":"thermometer"},{"name":"thumbs-down"},{"name":"thumbs-up"},{"name":"thunderstorm"},{"name":"ticket"},{"name":"time"},{"name":"timer"},{"name":"today"},{"name":"toggle"},{"name":"trail-sign"},{"name":"train"},{"name":"transgender"},{"name":"trash-bin"},{"name":"trash"},{"name":"trending-down"},{"name":"trending-up"},{"name":"triangle"},{"name":"trophy"},{"name":"tv"},{"name":"umbrella"},{"name":"unlink"},{"name":"videocam-off"},{"name":"videocam"},{"name":"volume-high"},{"name":"volume-low"},{"name":"volume-medium"},{"name":"volume-mute"},{"name":"volume-off"},{"name":"walk"},{"name":"wallet"},{"name":"warning"},{"name":"watch"},{"name":"water"},{"name":"wifi"},{"name":"wine"},{"name":"woman"},{"name":"logo-alipay"},{"name":"logo-amazon"},{"name":"logo-amplify"},{"name":"logo-android"},{"name":"logo-angular"},{"name":"logo-apple"},{"name":"logo-apple-appstore"},{"name":"logo-apple-ar"},{"name":"logo-behance"},{"name":"logo-bitbucket"},{"name":"logo-bitcoin"},{"name":"logo-buffer"},{"name":"logo-capacitor"},{"name":"logo-chrome"},{"name":"logo-closed-captioning"},{"name":"logo-codepen"},{"name":"logo-css3"},{"name":"logo-designernews"},{"name":"logo-deviantart"},{"name":"logo-discord"},{"name":"logo-docker"},{"name":"logo-dribbble"},{"name":"logo-dropbox"},{"name":"logo-edge"},{"name":"logo-electron"},{"name":"logo-euro"},{"name":"logo-facebook"},{"name":"logo-figma"},{"name":"logo-firebase"},{"name":"logo-firefox"},{"name":"logo-flickr"},{"name":"logo-foursquare"},{"name":"logo-github"},{"name":"logo-gitlab"},{"name":"logo-google"},{"name":"logo-google-playstore"},{"name":"logo-hackernews"},{"name":"logo-html5"},{"name":"logo-instagram"},{"name":"logo-ionic"},{"name":"logo-ionitron"},{"name":"logo-javascript"},{"name":"logo-laravel"},{"name":"logo-linkedin"},{"name":"logo-markdown"},{"name":"logo-mastodon"},{"name":"logo-medium"},{"name":"logo-microsoft"},{"name":"logo-no-smoking"},{"name":"logo-nodejs"},{"name":"logo-npm"},{"name":"logo-octocat"},{"name":"logo-paypal"},{"name":"logo-pinterest"},{"name":"logo-playstation"},{"name":"logo-pwa"},{"name":"logo-python"},{"name":"logo-react"},{"name":"logo-reddit"},{"name":"logo-rss"},{"name":"logo-sass"},{"name":"logo-skype"},{"name":"logo-slack"},{"name":"logo-snapchat"},{"name":"logo-soundcloud"},{"name":"logo-stackoverflow"},{"name":"logo-steam"},{"name":"logo-stencil"},{"name":"logo-tableau"},{"name":"logo-tiktok"},{"name":"logo-tumblr"},{"name":"logo-tux"},{"name":"logo-twitch"},{"name":"logo-twitter"},{"name":"logo-usd"},{"name":"logo-venmo"},{"name":"logo-vercel"},{"name":"logo-vimeo"},{"name":"logo-vk"},{"name":"logo-vue"},{"name":"logo-web-component"},{"name":"logo-wechat"},{"name":"logo-whatsapp"},{"name":"logo-windows"},{"name":"logo-wordpress"},{"name":"logo-xbox"},{"name":"logo-xing"},{"name":"logo-yahoo"},{"name":"logo-yen"},{"name":"logo-youtube;"}]}]}
+{"tags":[{"name":"goa-layout-full-nav"},{"name":"goa-two-column-layout","required":["header","footer","nav"],"attributes":[{"name":"navColumnWidth","type":"string","description":"% | px | rem | ch | etc","default":"256px"},{"name":"maxContentWidth","type":"string","description":"% | px | rem | ch | etc","default":"100%"},{"name":"header","type":"slot","description":"How to add GoAAppHeader component"},{"name":"footer","type":"slot","description":"How to add GoAAppFooter component"},{"name":"nav","type":"slot","description":"Component containing nav links for application"}],"references":[{"name":"GoA Two column layout","url":"https://design.alberta.ca/?path=/docs/layouts-two-column--basic"}],"description":"# Two column layout\nA two column layout to use as a starting point for your page. Typically, this is used for a side navigation alongside the main content of a page.\n\nUse it like this:\n```html\n<goa-two-column-layout>\n  <section slot=\"header\">\n    <goa-app-header></goa-app-header>\n  </section>\n  <section slot=\"nav\">\n    <a href=\"#dashboard\">Dashboard</a>\n    <a href=\"#accounts\">Accounts</a>\n    <a href=\"#invoices\">Invoices</a>\n    <a href=\"#employees\">Employees</a>\n    <a href=\"#claims\">Claims</a>\n  </section>\n  <h1>Heading 1</h1>\n  <p>\n    Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.\n  </p>\n  <section slot=\"footer\">\n    <goa-app-footer></goa-app-footer>\n  </section>\n</goa-two-column-layout>\n```\n"},{"name":"goa-three-column-layout","required":["header","footer","nav"],"attributes":[{"name":"leftcolumnwidth","type":"string","description":"% | px | rem | ch | etc","default":"256px"},{"name":"maxcontentwidth","type":"string","description":"% | px | rem | ch | etc","default":"100%"},{"name":"rightcolumnwidth","type":"string","description":"% | px | rem | ch | etc","default":"100%"},{"name":"header","type":"slot","description":"Space for GoAAppHeader component"},{"name":"footer","type":"slot","description":"Space for GoAAppFooter component"},{"name":"nav","type":"slot","description":"Component containing nav links for application"},{"name":"side-menu","type":"slot","description":"Component containing side menu section (right column)"}],"references":[{"name":"GoA Three Column Layout","url":"https://design.alberta.ca/?path=/docs/layouts-three-column--basic"}],"description":"# Three column layout\nA three column layout to use as a starting point for your page. Typically, this is used for a side navigation alongside the main content of a page and a sidemenu on the right.\n\nUse it like this:\n```html\n<goa-three-column-layout>\n  <section slot=\"header\">\n    <goa-app-header></goa-app-header>\n  </section>\n  <section slot=\"nav\">\n    <a href=\"#dashboard\">Dashboard</a>\n    <a href=\"#accounts\">Accounts</a>\n    <a href=\"#invoices\">Invoices</a>\n    <a href=\"#employees\">Employees</a>\n    <a href=\"#claims\">Claims</a>\n  </section>\n  <h1>Main content</h1>\n  <p>Add in your content here</p>\n  <section slot=\"side-menu\">\n    <h2>Side Menu</h2>\n    <p>Add in your content here</p>\n  </section>\n  <section slot=\"footer\">\n    <goa-app-footer></goa-app-footer>\n  </section>\n</goa-three-column-layout>\n```\n"},{"name":"goa-one-column-layout","references":[{"name":"GoA One Column Layout","url":"https://design.alberta.ca/?path=/docs/layouts-one-column--basic"}],"description":"# One Column Layout\nA one column layout to use as a starting point for your page.\n\nUse it like this:\n```html\n<goa-one-column-layout>\n  <section slot=\"header\">\n    <goa-microsite-header type=\"alpha\" version=\"UAT\" />\n    <goa-app-header url=\"/\" heading=\"Design System\">\n      <a href=\"/login\">Sign in</a>\n    </goa-app-header>\n  </section>\n  <goa-page-block width=\"704px\">\n    <!-- Insert custom content here -->\n  </goa-page-block>\n  <section slot=\"footer\">\n    <goa-app-footer />\n  </section>\n</goa-one-column-layout>\n```\n"},{"name":"goa-tooltip","attributes":[{"name":"content","description":"Sets the tooltip text content","type":"string"},{"name":"position","default":"top","description":"Sets the tooltip position","values":[{"name":"top","description":"Renders the tooltip to the top of the target element"},{"name":"bottom","description":"Renders the tooltip to the bottom of the target element"},{"name":"left","description":"Renders the tooltip to the left of the target element"},{"name":"right","description":"Renders the tooltip to the right of the target element"}],"type":"string"},{"name":"halign","default":"center","description":"Set alignment for a tooltip rendered on the top or bottom","values":[{"name":"center","description":"Aligns the tooltip to the center of the target element"},{"name":"left","description":"Aligns the tooltip to the left of the target element"},{"name":"right","description":"Aligns the tooltip to the right of the target element"}],"type":"string"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Tooltip","url":"https://design.alberta.ca/?path=/docs/components-tooltip--basic"}],"description":"# GoA Tooltip\nA tooltip is a message box that is displayed when a user hovers over or gives focus to a UI element to provide helpful, supporting, temporary, and non-essential content. The tooltip should be paired with a UI element.\n\nUse it like this:\n\n```html\n<goa-tooltip content=\"Item description\">\n  <div>Item</div>\n</goa-tooltip>\n```\n"},{"name":"goa-textarea","required":["name"],"attributes":[{"name":"name","type":"string","description":"Name of input value that is received in the _change event"},{"name":"value","type":"string","description":"Bound to value"},{"name":"placeholder","type":"string","description":"Text displayed within the input when no value is set"},{"name":"rows","type":"number","description":"Set the number of rows","default":"3"},{"name":"width","type":"string","description":"Width of text area","default":"60ch"},{"name":"error","type":"boolean","description":"Sets the input to an error state","valueSet":"boolean","default":"false"},{"name":"readOnly","type":"boolean","description":"Sets the input to a read only state","valueSet":"boolean","default":"false"},{"name":"disabled","type":"boolean","description":"Sets the input to a disabled state","valueSet":"boolean","default":"false"},{"name":"ariaLabel","type":"string","description":"Defines how the text will be translated for the screen reader. If not specified it will fall back to the name"}],"references":[{"name":"GoA Text Area","url":"https://design.alberta.ca/?path=/docs/components-text-area--basic"}],"description":"# Text Area Library\nText inputs let users enter and input text. Text areas can be used when trying to collect more information than may fit in a traditional form field.\n\nUse it like this:\n```html\n<goa-textarea name=\"comment\"\n              goaValue\n              [formControl]=\"reactiveFormCtrl\"\n              [value]=\"reactiveFormCtrl.value\">\n</goa-textarea>\n```\n"},{"name":"goa-tabs","attributes":[{"name":"initialtab","type":"string","description":"Tab position that is currently active"}],"references":[{"name":"GoA Tabs","url":"https://design.alberta.ca/?path=/docs/components-tabs--basic"}],"description":"# Tabs\nThe tabs component lets users navigate between related sections of content, displaying one section at a time.\nUse it like this:\n```html\n<goa-tabs initialtab=\"2\">\n  <goa-tab heading=\"Profile\">\n    <p>\n      <b>Profile</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n      bore et dolore magna aliqua.\n    </p>\n  </goa-tab>\n  <goa-tab>\n    <div slot=\"heading\">\n      Completed\n      <goa-badge type=\"midtone\" content=\"1\"></goa-badge>\n    </div>\n    <p>\n      <b>Completed:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n      labore et dolore magna aliqua.\n    </p>\n  </goa-tab>\n</goa-tabs>\n```\n"},{"name":"goa-table-sort-header","attributes":[{"name":"direction","description":"Horizontal spacing","type":"string","values":[{"name":"asc"},{"name":"desc"},{"name":"none"}],"default":"none"}],"references":[{"name":"GoA Table Sort Header","url":"https://design.alberta.ca/?path=/docs/components-table--basic"}],"description":"# Table Library\nTable is a set of structured data that is easy for a user to scan, examine, and compare.\n\nUse it like this:\n```html\n<goa-table>\n  <thead>\n    <tr>\n      <th>Col 1</th>\n      <th>Col 2</th>\n      <th>Col 3</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Item 1</td>\n      <td>Item 2</td>\n      <td>Item 3</td>\n    </tr>\n    <tr>\n      <td>Item 4</td>\n      <td>Item 5</td>\n      <td>Item 6</td>\n    </tr>\n  </tbody>\n</goa-table>\n```\n"},{"name":"goa-table","attributes":[{"name":"width","type":"string","description":"Width of the table. By default it will fit the enclosed content."},{"name":"variant","description":"A relaxed variant of the table with more vertical padding for the cells","values":[{"name":"normal"},{"name":"relaxed"}],"default":"normal"},{"name":"_sort","description":"Sort event fired when a GoATableSortHeader component is used."}],"references":[{"name":"GoA Table","url":"https://design.alberta.ca/?path=/docs/components-table--basic"}],"description":"# Table Library\nTable is a set of structured data that is easy for a user to scan, examine, and compare.\n\nUse it like this:\n```html\n<goa-table>\n  <thead>\n    <tr>\n      <th>Col 1</th>\n      <th>Col 2</th>\n      <th>Col 3</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Item 1</td>\n      <td>Item 2</td>\n      <td>Item 3</td>\n    </tr>\n    <tr>\n      <td>Item 4</td>\n      <td>Item 5</td>\n      <td>Item 6</td>\n    </tr>\n  </tbody>\n</goa-table>\n```\n"},{"name":"goa-tab","attributes":[{"name":"heading","type":"slot","description":"Add components to the tab heading such as badges"}],"references":[{"name":"GoA Tab Item","url":"https://design.alberta.ca/?path=/docs/components-tabs--basic"}],"description":"# Tabs\nThe tabs component lets users navigate between related sections of content, displaying one section at a time.\nUse it like this:\n```html\n<goa-tabs initialtab=\"2\">\n  <goa-tab heading=\"Profile\">\n    <p>\n      <b>Profile</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n      bore et dolore magna aliqua.\n    </p>\n  </goa-tab>\n  <goa-tab>\n    <div slot=\"heading\">\n      Completed\n      <goa-badge type=\"midtone\" content=\"1\"></goa-badge>\n    </div>\n    <p>\n      <b>Completed:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n      labore et dolore magna aliqua.\n    </p>\n  </goa-tab>\n</goa-tabs>\n```\n"},{"name":"goa-spinner","required":["size"],"attributes":[{"name":"size","description":"Size of the spinner","type":"string","valueSet":"size"},{"name":"invert","type":"boolean","valueSet":"boolean","default":"false"},{"name":"progress","type":"number","default":"-1"}]},{"name":"goa-spacer","attributes":[{"name":"hSpacing","description":"Horizontal spacing","type":"string","valueSet":"spacing","default":"none"},{"name":"vSpacing","description":"Vertical spacing","type":"string","valueSet":"spacing","default":"none"}],"references":[{"name":"GoA Spacer","url":"https://design.alberta.ca/?path=/docs/utility-spacer--basic"}],"description":"# GoA Spacer\nSpacing is the negative area between the components and the interface. You can apply spacing through any combination of margin, gap, or spacing component. All of these methods use the spacing tokens to remain consistent with the design system.\n\nUse it like this:\n\n```html\n<goa-block>\n  <div>Item 1</div>\n  <goa-spacer hSpacing=\"m\"></goa-spacer>\n  <div>Item 2</div>\n  <goa-spacer hSpacing=\"m\"></goa-spacer>\n  <div>Item 3</div>\n</goa-block>\n```\n"},{"name":"goa-skeleton","required":["type"],"attributes":[{"name":"type","description":"Pre-set skeleton shapes to represent your content","values":[{"name":"image"},{"name":"text"},{"name":"title"},{"name":"text-small"},{"name":"avatar"},{"name":"header"},{"name":"paragraph"},{"name":"thumbnail"},{"name":"card"},{"name":"profile"}]},{"name":"size","description":"Size can affect either the height, width or both for different skeleton types","values":[{"name":"1"},{"name":"2"},{"name":"3"},{"name":"4"}],"default":"1"},{"name":"lineCount","type":"number","description":"Used within components that contain multiple lines. Currently only used in card skeleton type","default":"3"},{"name":"maxWidth","type":"string","description":"Set component maximum width. Currently only used in card skeleton type","default":"320px"}],"references":[{"name":"GoA Skeleton","url":"https://design.alberta.ca/?path=/docs/components-skeleton--text"}],"description":"# Skeleton Library\nA skeleton provides visual feedback to users while a content heavy page or element is loading.\n\nUse it like this:\n```html\n<goa-skeleton type=\"text\"></goa-skeleton>\n```\n"},{"name":"goa-side-menu-heading","attributes":[],"references":[{"name":"GoA SideMenu","url":"https://design.alberta.ca/?path=/docs/components-sidemenu--submenu-groups-and-section-titles"}],"description":"# Side menu group\n\nUse it like this:\n```html\n<goa-side-menu>\n  <goa-side-menu-heading>Nav section</goa-side-menu-heading>\n  <a href=\"#foo\">Foo</a>\n  <a href=\"#bar\">Bar</a>\n  <a href=\"#fooo\">Fooo</a>\n  <a href=\"#barr\">Barr</a>\n</goa-side-menu>\n```\n"},{"name":"goa-side-menu-group","attributes":[{"name":"heading","description":"Heading text for group"}],"references":[{"name":"GoA SideMenu","url":"https://design.alberta.ca/?path=/docs/components-sidemenu--submenu-groups-and-section-titles"}],"description":"# Side menu group\n\nUse it like this:\n```html\n<goa-side-menu>\n  <a href=\"#about\">About</a>\n  <a href=\"#contact\">Contact</a>\n  <goa-side-menu-group heading=\"Links\">\n    <a href=\"#foo\">Foo</a>\n    <a href=\"#bar\">Bar</a>\n    <goa-side-menu-group heading=\"More Links\">\n      <a href=\"#more-foo\">More Foo</a>\n      <a href=\"#more-bar\">More Bar</a>\n    </goa-side-menu-group>\n  </goa-side-menu-group>\n</goa-side-menu>\n```\n"},{"name":"goa-side-menu","attributes":[],"references":[{"name":"GoA SideMenu","url":"https://design.alberta.ca/?path=/docs/components-sidemenu--basic"}],"description":"# Side Menu\n\nUse it like this:\n```html\n<goa-side-menu>\n  <a href=\"#about\">About</a>\n  <a href=\"#contact\">Contact</a>\n  <goa-side-menu-menu heading=\"Links\">\n    <a href=\"#foo\">Foo</a>\n    <a href=\"#bar\">Bar</a>\n    <goa-side-menu-menu heading=\"More Links\">\n      <a href=\"#more-foo\">More Foo</a>\n      <a href=\"#more-bar\">More Bar</a>\n    </goa-side-menu-menu>\n  </goa-side-menu-menu>\n</goa-side-menu>\n```\n"},{"name":"goa-scrollable"},{"name":"goa-radio-item","attributes":[{"name":"label","description":"Text to show to the user","type":"string"},{"name":"value","description":"Value of the item that will be returned when selected","type":"string"},{"name":"description","description":"Text added below the label text","type":"string"}],"references":[{"name":"GoA RadioGroupItem","url":"https://design.alberta.ca/?path=/docs/components-radio--basic"}]},{"name":"goa-radio-group","required":["name"],"attributes":[{"name":"name","description":"Must match the name assigned to the children","type":"string"},{"name":"value","description":"Value binding","type":"string"},{"name":"orientation","description":"Orientation of the radio items","values":[{"name":"horizontal"},{"name":"vertical"}],"default":"vertical"},{"name":"error","description":"Set the component to an error state","type":"boolean","valueSet":"boolean","default":"false"},{"name":"disabled","description":"Set the component to disabled","type":"boolean","valueSet":"boolean","default":"false"},{"name":"arialabel","type":"string","description":"Defines how the text will be translated for the screen reader. It not specified it will fall back to the name"}],"references":[{"name":"GoA RadioGroup","url":"https://design.alberta.ca/?path=/docs/components-radio--basic"}],"description":"# Radio Library\nRadios allow users to select one option from a set.\n\nUse it like this:\n\n```html\n<goa-radio-group name=\"color\"\n                 goaValue [formControl]=\"reactiveFormCtrl\"\n                 [value]=\"reactiveFormCtrl.value\">\n  <goa-radio-item value=\"red\"></goa-radio-item>\n</goa-radio-group>\n```\n"},{"name":"goa-popover","attributes":[{"name":"maxwidth","description":"The max width of the popover container","type":"string","default":"320px"},{"name":"padded","description":"Whether the popover should have padding","type":"boolean","default":"false"},{"name":"relative","description":"Set to true if a parent element has a css position of `relative`","type":"boolean","default":"false"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Popover","url":"https://design.alberta.ca/?path=/docs/components-popover--basic"}],"description":"# Popover Library\nThe popover component displays additional information for an object in a compact way and without leaving the page.\n\nUse it like this:\n\n```html\n<goa-popover padded>\n  <div slot=\"target\"><goa-button>Open</goa-button></div>\n  This is popver\n</goa-popover>\n```\n"},{"name":"goa-pagination","required":["pagenumber","itemcount"],"attributes":[{"name":"pagenumber","description":"The current page being viewed (non-zero based)","type":"number"},{"name":"itemcount","description":"Total number of data items within all pages","type":"number"},{"name":"perpagecount","description":"Number of data items shown per page","type":"number","default":"10"},{"name":"_change","description":"Callback function for page change events","values":[{"name":"(e: { detail: { page: number }}) => void"}]},{"name":"variant","description":"Controls which nav controls are visible","values":[{"name":"all"},{"name":"links-only"}],"default":"all"}],"references":[{"name":"GoA Pagination","url":"https://design.alberta.ca/?path=/docs/components-pagination--basic"}],"description":"# Pagination Library\nPagination helps users navigate between multiple pages or screens that are part of a related set.\n\nUse it like this:\n\n```html\n<goa-pagination\n  [itemcount]=\"users.length\"\n  perpagecount=\"10\"\n  [pagenumber]=\"page\"\n  (_change)=\"handlePageChange($event)\">\n</goa-pagination>\n```\n"},{"name":"goa-page-block","required":["width"],"attributes":[{"name":"width","type":"string"}],"description":"# Page Block\nUse it like this:\n```html\n<goa-page-block width=\"704px\">\n    <!-- Insert custom content here -->\n  </goa-page-block>\n```\n"},{"name":"goa-notification","required":["type"],"attributes":[{"name":"type","description":"Define the context and colour of the notification banner","values":[{"name":"information"},{"name":"important"},{"name":"emergency"},{"name":"event"}]},{"name":"_dismiss","description":"Dispatched when notification banner is closed."},{"name":"maxcontentwidth","default":"100%","description":"Maximum width of the content area","type":"string"},{"name":"arialive","default":"polite","description":"Aria live attribute","values":[{"name":"polite"},{"name":"assertive"},{"name":"off"}]}],"references":[{"name":"GoA Notification","url":"https://design.alberta.ca/?path=/docs/components-notification-banner--types"}],"description":"# Notification Banner\nNotification banners are boxes with text content that indicate one of the following: information messages, event messages, important messages, or emergency messages.\n\nUse it like this:\n```html\n<goa-notification type=\"information\" (_dismiss)=\"onDismiss()\">\n  Lorem ipsum dolor\n</goa-notification>\n```\n"},{"name":"goa-modal","required":["type"],"attributes":[{"name":"type","description":"Type of Modal","values":[{"name":"default"},{"name":"callout"}]},{"name":"calloutVariant","description":"Define the context and colour of the callout modal. It is required when type is set to callout.","values":[{"name":"information"},{"name":"important"},{"name":"emergency"},{"name":"success"},{"name":"event"}]},{"name":"heading","type":"string","description":"Heading text within the modal"},{"name":"maxwidth","type":"string","description":"Max width of the modal"},{"name":"open","type":"boolean","description":"Controls if modal is visible or not","valueSet":"boolean","default":"false"},{"name":"closable","description":"Show close icon and allow clicking the background to close the modal","valueSet":"boolean","default":"false"},{"name":"transition","description":"How modal transition onto screen","values":[{"name":"fast"},{"name":"slow"},{"name":"none"}],"default":"none"},{"name":"role","description":"Role of the modal","values":[{"name":"dialog"},{"name":"alertdialog"}],"default":"dialog"},{"name":"_close","description":"Dispatched when modal is closable and is closed"},{"name":"actions","description":"Buttons displayed in the bottom right of the modal instead of a close icon","values":[{"name":"slot"}]}],"references":[{"name":"GoA Modal","url":"https://design.alberta.ca/?path=/docs/components-modal--basic"}],"description":"# Modal Library\nA modal is a type of window that appears in front of the main page content and disables all other functionality while visible. Modals purposefully disrupt the user's workflow to capture their attention. The content in a modal should be succinct, direct, and contextually relevant to the user.\n\nUse it like this:\n```html\n<goa-button id=\"button\" (_click)=\"openModal()\">Open Modal</goa-button>\n\n<goa-modal id=\"modal\" heading=\"Do you agree?\" [open]=\"isOpen\" (_close)=\"closeModal()\" role=\"alertdialog\" closable>\n  <p>\n    Lorem ipsum dolor sit.\n  </p>\n</goa-modal>\n```\n"},{"name":"goa-microsite-header","required":["type"],"attributes":[{"name":"type","values":[{"name":"alpha"},{"name":"beta"},{"name":"live"}]},{"name":"version","type":"string"},{"name":"feedbackUrl","type":"string","description":"Url to feedback page that will be displayed when provided."},{"name":"maxContentWidth","default":"100%","description":"Maximum width of the content area","type":"string"},{"name":"headerurltarget","default":"blank","description":"Sets the target=_blank attribute on the header url","values":[{"name":"self","description":"target=_self"},{"name":"blank","description":"target=_blank"}],"type":"self | blank"},{"name":"feedbackurltarget","default":"blank","description":"Sets the target=_blank attribute on the feedback url","values":[{"name":"self","description":"target=_self"},{"name":"blank","description":"target=_blank"}],"type":"self | blank"}],"references":[{"name":"GoA Microsite Header","url":"https://design.alberta.ca/?path=/docs/components-microsite-header--alpha"}],"description":"# Microsite Header Library\n\nUse the microsite header to communicate to the user what stage the service is at, and to establish an official connection to Alberta.ca when the service is on a subdomain. You can also use the microsite header to gather feedback throughout your service, and to show an application version number for quick reference by the service team.\n\nUse it like this:\n```html\n<goa-microsite-header type=\"alpha\"></goa-microsite-header>\n```\n"},{"name":"goa-input","attributes":[{"name":"type","description":"Sets the type of the input field","values":[{"name":"text"},{"name":"number"},{"name":"password"},{"name":"email"},{"name":"search"},{"name":"tel"},{"name":"date"},{"name":"datetime-locale"},{"name":"time"},{"name":"url"},{"name":"week"}],"default":"text"},{"name":"name","description":"Name of input value that is received in the _change event","type":"string"},{"name":"value","type":"string","description":"Bound to value"},{"name":"placeholder","type":"string","description":"Text displayed within the input when no value is set"},{"name":"leadingIcon","description":"Icon shown to the left of the text","valueSet":"goaIconType"},{"name":"trailingIcon","description":"Icon shown to the right of the text","valueSet":"goaIconType"},{"name":"disabled","type":"boolean","description":"Disable this control. It will not receive focus or events","valueSet":"boolean","default":"false"},{"name":"handleTrailingIconClick","description":"Flag that will result in an icon button component being rendered instead of an icon","type":"boolean","valueSet":"boolean","default":"false"},{"name":"focused","description":"Sets the cursor focus to the input","type":"boolean","valueSet":"boolean","default":"false"},{"name":"readonly","description":"Makes the input readonly","type":"boolean","valueSet":"boolean","default":"false"},{"name":"error","description":"Sets the input to an error state","type":"boolean","valueSet":"boolean","default":"false"},{"name":"width","description":"Set the width of the text input area","type":"string","default":"30ch"},{"name":"min","description":"A string value that supports any number, or an ISO 8601 format if using the date or datetime type","type":"string"},{"name":"max","description":"A string value that supports any number, or an ISO 8601 format if using the date or datetime type","type":"string"},{"name":"step","description":"How much a number or date should change by","type":"number"},{"name":"arialabel","description":"Defines how the input will be translated for the screen reader. If not specified it will fall back to the name. If both arialabel and arialabelledby are specified, arialabelledby will be used","type":"string"},{"name":"arialabelledby","description":"The aria-labelledby attribute identifies the element (or elements) that labels the input it is applied to. Normally it is the id of the label.","type":"string"},{"name":"autoCapitalize","description":"Controls whether and how text input is automatically capitalized as it is entered/edited by the user.","type":"string","values":[{"name":"on"},{"name":"off"},{"name":"none"},{"name":"sentences"},{"name":"words"},{"name":"characters"}],"default":"off"},{"name":"_trailingIconClick","description":"onclick function invoked when trailing icon is clicked"},{"name":"leadingContent","type":"slot","description":"Sets the content to the left of the input field"},{"name":"trailingContent","type":"slot","description":"Sets the content to the right of the input field"},{"name":"maxlength","type":"number","description":"Defines the maximum number of characters (as UTF-16 code units) the user can enter into the input."},{"name":"id","type":"string","description":"Unique identifier of the input"}],"references":[{"name":"GoA Input","url":"https://design.alberta.ca/?path=/docs/components-inputs--information"}],"description":"# Input Library\n\nText fields let users enter and input text.\n\nUse it like this:\n```html\n<goa-input id=\"color\" goaValue [formControl]=\"reactiveFormCtrl\" [value]=\"reactiveFormCtrl.value\"></goa-input>\n```\n"},{"name":"goa-icon-button","attributes":[{"name":"icon","description":"Set the icon","valueSet":"goaIconType"},{"name":"size","description":"Set the size of button","values":[{"name":"small"},{"name":"medium"},{"name":"large"}],"default":"medium"},{"name":"variant","description":"Style this button to show color, nocolor, dark or destructive action","values":[{"name":"color"},{"name":"nocolor"},{"name":"dark"},{"name":"destructive"}],"default":"color"},{"name":"title","type":"string","description":"Sets the title of the button"},{"name":"disabled","type":"boolean","description":"Disable this button","valueSet":"boolean","default":"false"},{"name":"arialabel","type":"string","description":"Sets the aria-label of the button"},{"name":"_click","description":"Callback function when button is clicked"}],"references":[{"name":"GoA Icon Buttons","url":"{{siteUrl}]/?path=/docs/components-icon-button--icons"}],"description":"# Icon Button Library\nAn icon button is an icon that triggers some sort of action on the page. It is a button that contains an icon and no (visible) accompanying text.\n\nUse it like this:\n\n```html\n<goa-icon-button (_click)=\"onClick()\" icon=\"airplane\"></goa-icon-button>\n<goa-icon-button (_click)=\"onClick()\" icon=\"close\"></goa-icon-button>\n<goa-icon-button (_click)=\"onClick()\" icon=\"refresh\"></goa-icon-button>\n<goa-icon-button (_click)=\"onClick()\" icon=\"play-back\"></goa-icon-button>\n```\n"},{"name":"goa-icon","attributes":[{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"},{"name":"type","valueSet":"goaIconType"},{"name":"size","values":[{"name":"small"},{"name":"medium"},{"name":"large"},{"name":"xlarge"}]},{"name":"theme","values":[{"name":"outline"},{"name":"filled"},{"name":"sharp"}]},{"name":"inverted","type":"boolean","valueSet":"boolean"},{"name":"title","type":"string"},{"name":"arialabel","type":"string"}],"description":"# Icon Library\n\nUse it like this:\n```html\n<goa-icon type=\"alarm\" arialabel=\"Alert\"></goa-icon>\n```\n"},{"name":"goa-hero-banner","required":["heading"],"attributes":[{"name":"heading","type":"string","description":"Main heading text"},{"name":"backgroundurl","type":"string","description":"Background image url"},{"name":"minheight","type":"string","description":"Sets the height of the HeroBanner","default":"600px"},{"name":"maxcontentwidth","default":"100%","description":"Maximum width of the content area","type":"string"},{"name":"backgroundcolor","type":"string","description":"Background color for the hero banner"},{"name":"textcolor","type":"string","description":"Content color within hero banner"}],"references":[{"name":"GoA Hero Banner","url":"https://design.alberta.ca/?path=/docs/components-hero-banner--basic"}],"description":"# Hero Banner Library\n\nWhen a page requires promotion or is featured, a photograph may be inserted into the page header as a hero banner for aesthetic appeal.\n\n\nUse it like this:\n```html\n<goa-hero-banner\n  heading=\"Hero Banner\"\n>\n  Lorem ipsum dolor sit amet consectetur adipisicing elit.\n</goa-hero-banner>\n```\n"},{"name":"goa-grid","required":["minChildWidth"],"attributes":[{"name":"gap","description":"Gap between child items","valueSet":"spacing","default":"m"},{"name":"minChildWidth","type":"number","description":"Minimum width of the child elements"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Grid","url":"https://design.alberta.ca/?path=/docs/utility-grid--basic"}],"description":"# Grid Library\nThe grid helps to arrange a number of components into a responsive grid pattern.\n\nUse it like this:\n```html\n<goa-grid minChildWidth=\"30ch\">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n  <div>4</div>\n  <div>5</div>\n</goa-grid>\n```\n\n"},{"name":"goa-form-item","attributes":[{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"},{"name":"label","type":"string","description":"Creates a label for a form item"},{"name":"labelsize","type":"regular | large","description":"Set a regular or large label size"},{"name":"helpText","type":"string","description":"Help text displayed under the form field to provide an additional explanation"},{"name":"error","type":"string","description":"Error text displayed under the form field. Leave blank to indicate valid field."},{"name":"requirement","type":"string","values":["optional","required"],"description":"Marks the field with optional/required label."},{"name":"id","type":"string","description":"ID of the label."}],"references":[{"name":"GoA Form item","url":"https://design.alberta.ca?path=/docs/utility-form-item--text-label"}],"description":"# Form Item Library\nA form item wraps an input control such as a text input, checkbox, or radio with a text label, requirement label, helper text, and error text.\n\nUse it like this:\n\n```html\n<goa-form-item label=\"First name\" id=\"firstName\">\n  <goa-input arialabel=\"First Name 1\" name=\"firstname\" arialabelledby=\"firstName\" type=\"text\"></goa-input>\n</goa-form-item>\n```\n"},{"name":"goa-app-footer-nav-section","attributes":[{"name":"heading","type":"string"},{"name":"maxcolumncount","type":"number","default":"1"}],"references":[{"name":"GoA Footer","url":"https://design.alberta.ca/?path=/docs/components-app-footer--basic"}],"description":"# Footer Navigation Library\n\nUse it like this:\n```html\n<goa-app-footer-nav-section maxColumnCount=\"3\" slot=\"nav\"></goa-app-footer-nav-section>\n```\n"},{"name":"goa-app-footer-meta-section","references":[{"name":"GoA Footer","url":"https://design.alberta.ca/?path=/docs/components-app-footer--basic"}],"description":"# Footer Meta Library\n\nUse it like this:\n```html\n<goa-app-footer-meta-section slot=\"meta\"></goa-app-footer-meta-section>\n```\n"},{"name":"goa-app-footer","attributes":[{"name":"maxContentWidth","description":"The maximum width of the main content area","type":"string","default":"100%"}],"references":[{"name":"GoA Footer","url":"https://design.alberta.ca/?path=/docs/components-app-footer--basic"}],"description":"# Footer Library\nThe footer resides at the bottom of every page of your service, providing copyright information and other information related to your service. The footer will not position itself on the bottom of the page, but must instead be positioned by either a GoA or custom layout component.\n\nUse it like this:\n\n```html\n<goa-app-footer></goa-app-footer>\n```\nor\n```html\n<goa-app-footer>\n  <goa-app-footer-meta-section slot=\"meta\">\n    <a href=\"privacy.html\">Privacy</a>\n    <a href=\"disclaimer.html\">Disclaimer</a>\n    <a href=\"accessibility.html\">Accessibility</a>\n    <a href=\"using-alberta.html\">Using Alberta.ca</a>\n  </goa-app-footer-meta-section>\n</goa-app-footer>\n```\n"},{"name":"goa-focus-trap"},{"name":"goa-file-upload-input","attributes":[{"name":"variant","description":"The variant to be used","values":[{"name":"dragdrop"},{"name":"button"}],"default":"dragdrop"},{"name":"accept","description":"[Mimetype](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) to limit the types of files.","valueSet":"string","default":"*"},{"name":"maxfilesize","description":"Max allowed file size","valueSet":"string","default":"5MB"},{"name":"_select","description":"Event fired for each file selected"},{"name":"","description":"","valueSet":"string","default":""}],"references":[{"name":"GoA FileUploadInput","url":"https://design.alberta.ca/?path=/docs/components-file-upload--basic"}]},{"name":"goa-file-upload-card","required":["name","_cancel","_delete"],"attributes":[{"name":"name","description":"Name of the file","valueSet":"string"},{"name":"size","description":"Size (B) of the file","valueSet":"number"},{"name":"type","description":"Type of the file","valueSet":"string"},{"name":"error","description":"Error message","valueSet":"string"},{"name":"_cancel","description":"Event fired when a file upload is cancelled"},{"name":"_delete","description":"Event fired when an uploaded file is deleted"}],"references":[{"name":"GoA FileUploadCard","url":"https://design.alberta.ca/?path=/docs/components-file-upload--basic"}]},{"name":"goa-dropdown-item","attributes":[{"name":"value","type":"string","description":"The value of the item. This value will be contained within the onChange event"},{"name":"label","type":"string","description":"The displayed value within the selection box. The value property is the fallback value."},{"name":"filter","type":"string","description":"When true the dropdown will have the ability to filter options by typing into the input field."}],"references":[{"name":"GoA Dropdown","url":"https://design.alberta.ca/?path=/docs/components-dropdown--basic"}],"description":"# Dropdown Library\nDropdowns hide a long list of options, arranged vertically. A single select menu list is revealed upon interaction with this component.\n\nUse it like this:\n```html\n<goa-dropdown\n  goaValue\n  name=\"colors\"\n  id=\"colors\"\n  filterable=\"true\"\n  [formControl]=\"reactiveFormCtrl\"\n  [value]=\"reactiveFormCtrl.value\">\n  <goa-dropdown-item\n    *ngFor=\"let color of colors\"\n    [value]=\"color\"\n    [label]=\"color\"\n  >\n  </goa-dropdown-item>\n</goa-dropdown>\n```\n"},{"name":"goa-dropdown","attributes":[{"name":"name","type":"string","description":"Must be unique in the rendered view and must match the children's name"},{"name":"value","type":"string","description":"Stores the value of the item selected from the dropdown"},{"name":"leadingIcon","valueSet":"goaIconType","description":"Show an icon to the left of the dropdown option. Non-native only"},{"name":"maxHeight","type":"string","description":"Maximum height of the dropdown menu items popover. Non-native only","default":"276px"},{"name":"placeholder","type":"string","description":"The text displayed for the dropdown before a selection is made. Non-native only"},{"name":"id","type":"string","description":"Set an id for the dropdown component."},{"name":"width","type":"string","description":"Override the autosized menu width"},{"name":"disabled","type":"boolean","description":"Disable this control","valueSet":"boolean","default":"false"},{"name":"error","type":"boolean","description":"Show an error state","valueSet":"boolean","default":"false"},{"name":"arialabel","type":"string","description":"Defines how the selected value will be translated for the screen reader. If not specified it will fall back to the name. If both arialabel and arialabelledby are specified, arialabelledby will be used"},{"name":"arialabelledby","type":"string","description":"The aria-labelledby attribute identifies the element (or elements) that labels the dropdown it is applied to. Normally it is the id of the label."},{"name":"native","type":"boolean","description":"When true will render the native <select> html element","valueSet":"boolean","default":"false"},{"name":"relative","description":"Set to true if a parent element has a css position of `relative`","type":"boolean","default":"false"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"},{"name":"filterable","description":"When true, the dropdown will be filterable. Non-native only","valueSet":"boolean","default":"false"}],"references":[{"name":"GoA Dropdown","url":"https://design.alberta.ca/?path=/docs/components-dropdown--basic"}],"description":"# Dropdown Library\nDropdowns hide a long list of options, arranged vertically. A single select menu list is revealed upon interaction with this component.\n\nUse it like this:\n```html\n<goa-dropdown\n  goaValue\n  name=\"colors\"\n  id=\"colors\"\n  filterable=\"true\"\n  [formControl]=\"reactiveFormCtrl\"\n  [value]=\"reactiveFormCtrl.value\">\n  <goa-dropdown-item\n    *ngFor=\"let color of colors\"\n    [value]=\"color\"\n    [label]=\"color\"\n  >\n  </goa-dropdown-item>\n</goa-dropdown>\n```\n"},{"name":"goa-divider","attributes":[{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Divider","url":"https://design.alberta.ca/?path=/docs/utility-divider--spacing#divider"}],"description":"# Divider Library\nDividers are used to indicate a sepearation of layout, or to distinguish large chunks of information on a page.\n\nUse it like this:\n```html\n<goa-divider mt=\"s\" mb=\"s\"></goa-divider>\n<goa-divider mt=\"m\" mb=\"m\"></goa-divider>\n<goa-divider mt=\"l\" mb=\"l\"></goa-divider>\n<goa-divider></goa-divider>\n```\n"},{"name":"goa-details","required":["heading"],"attributes":[{"name":"heading","type":"string","description":"The title heading"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"},{"name":"open","description":"Controls if details is expanded or collapsed","valueSet":"boolean"}],"references":[{"name":"GoA Details","url":"https://design.alberta.ca/?path=/docs/components-details--basic"}],"description":"# Details Library\nDetails let users reveal more detailed information when they need it.\n\nUse it like this:\n```html\n<goa-details heading=\"This is the title\">\n  <p>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n  </p>\n</goa-details>\n\nExpand/Hide details:\n\n<goa-details heading=\"This is the title\" [open]=\"true\">\n  <p>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel lacinia metus, sed sodales lectus. Aliquam sed volutpat velit. Sed in lacus ut dui placerat accumsan malesuada quis erat. Aenean mi diam, rhoncus vitae justo eu, venenatis maximus nunc. In vel est commodo, porttitor sem vel, tincidunt ipsum. In hac habitasse platea dictumst. Mauris varius mollis dui. Aenean ut dui eu arcu rutrum auctor. Curabitur cursus velit vel libero sollicitudin tincidunt. Proin tincidunt, enim et ultrices rhoncus, nibh leo imperdiet sapien, sed porttitor ipsum nulla non massa. Nulla facilisi.\n  </p>\n</goa-details>\n```\n"},{"name":"goa-datepicker","attributes":[{"name":"name","description":"Name of the date property","type":"string"},{"name":"value","type":"string","description":"Selected date value"},{"name":"min","type":"string","description":"Min allowed date value"},{"name":"max","type":"string","description":"Max allowed date value"},{"name":"relative","type":"string","defaultValue":"false","description":"Set to true when datepicker is nested in a position=relative element"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA DatePicker","url":"https://design.alberta.ca/iframe.html?viewMode=docs&id=components-datepicker--basic&args=#datepicker"}],"description":"# DatePicker Library\n\n\nUse it like this:\n\n```\n\t<goa-date-picker></goa-date-picker>\n\t<goa-date-picker relative=\"true\"></goa-date-picker>\n\t<goa-date-picker [value]=\"date\"></goa-date-picker>\n\t<goa-date-picker [min]=\"min\" [max]=\"max\"></goa-date-picker>\n```\n"},{"name":"goa-container","attributes":[{"name":"type","description":"Choose the type of container the type of the accent bar","values":[{"name":"interactive"},{"name":"info"},{"name":"error"},{"name":"success"},{"name":"important"},{"name":"non-interactive"}],"default":"interactive"},{"name":"accent","description":"Sets the style of accent on the container","values":[{"name":"thick"},{"name":"thin"},{"name":"filled"}],"default":"filled"},{"name":"padding","description":"Sets the amount of white space in the container","values":[{"name":"relaxed"},{"name":"compact"}],"default":"relaxed"},{"name":"title","type":"slot","description":"Sets the content in the left of the accent bar"},{"name":"action","type":"slot","description":"Sets the content in the right of the accent bar"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Container","url":"https://design.alberta.ca/?path=/docs/components-container--container-types#container"}],"description":"# Container Library\nContainers are used to group information, create hierarchy, facilitate navigation, highlight a feature, or promote a call-to-action. Containers should be easy to scan for relevant and actionable information.\n\nUse it like this:\n```html\n<goa-container type=\"non-interactive\">\n    <h2>Non-Interactive Container</h2>\n    Content\n</goa-container>\n```\n"},{"name":"goa-circular-progress","attributes":[{"name":"variant","description":"Stretch across the full screen or use it inline","values":[{"name":"fullscreen"},{"name":"inline"}],"default":"inline"},{"name":"visible","type":"boolean","description":"Show/hide the page loader. This allows for fade transition to be applied in each transition.","valueSet":"boolean","default":"false"},{"name":"size","description":"Size of the progress indicator","values":[{"name":"small"},{"name":"large"}],"default":"large"},{"name":"progress","type":"number","description":"Set the progress value. Setting this value will change the type from infinite to progress","values":[{"name":"-1"}],"default":"-1"},{"name":"message","type":"string","description":"Loading message displayed under the progress indicator"}],"references":[{"name":"GoA Circular progress","url":"https://design.alberta.ca/?path=/docs/components-circular-progress--basic"}],"description":"# Circular Progress Library\n\nA circular progress component provides visual feedback to users after they request an action from the system, e.g., submitting a form, calculating a fee, configuring tables. The progress indicator holds a user’s attention by indicating continued progress while the system loads the appropriate content. The most common progress indicators are either circular or linear.\n\nUse it like this:\n```html\n<goa-circular-progress\n  size=\"small\"\n  visible>\n</goa-circular-progress>\n\n<goa-circular-progress\n  size=\"large\"\n  visible>\n</goa-circular-progress>\n```\n\n"},{"name":"goa-chip","required":"content","attributes":[{"name":"variant","description":"The type of chip to use","values":[{"name":"filter"}],"default":"filter"},{"name":"leadingIcon","type":"string","description":"Show an icon to the left of the text","valueSet":"goaIconType"},{"name":"error","type":"boolean","description":"Show an error state","valueSet":"boolean","default":"false"},{"name":"deletable","type":"boolean","description":"Show a delete icon button on the right of the text label","valueSet":"boolean","default":"false"},{"name":"content","type":"string","description":"Text label of the chip"},{"name":"_click","description":"Callback when deletable and delete icon is clicked"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Chip","url":"https://design.alberta.ca/?path=/docs/components-chip--basic"}],"description":"# Chips Library\nChips allow users to enter information, filter content, and make selections in a dynamic way. They are different from badges as badges are static and triggered by the system. Chips differentiate from buttons as buttons appear consistently within the design form each user and contain familiar calls to action. Depending on the context where the chip is applied, the design and interaction of the chip may vary.\n\nUse it like this:\n\n```html\n<goa-chip content=\"Chip Text\"></goa-chip>\n```\n"},{"name":"goa-checkbox","required":["name","checked"],"attributes":[{"name":"name","type":"string","description":"Must match the name assigned to the children"},{"name":"checked","type":"boolean","description":"Mark the checkbox item as selected","valueSet":"boolean"},{"name":"text","type":"string","description":"Content to display as the label for the Checkbox"},{"name":"value","type":"string","description":"The value binding to the checkbox"},{"name":"description","type":"string","description":"The description added below the label text"},{"name":"disabled","type":"boolean","description":"Disable this control. It will not receive focus or events","valueSet":"boolean","default":"false"},{"name":"error","type":"boolean","description":"Show an error on the checkbox item","valueSet":"boolean","default":"false"},{"name":"ariaLabel","type":"string","description":"Defines how the text will be translated for the screen reader. If not specified it will fall back to the name\n"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Checkbox","url":"https://design.alberta.ca/?path=/docs/components-checkbox--basic#checkbox"}],"description":"# Checkboxes Library\n\nCheckboxes are contained in a fieldset for accessibility and categorization purposes. The option group (checkbox and label) can be selected by the user with an input device. The option is meant to be submitted as data and is part of a form. The input data, while can be selected, will not be recorded until the user presses a submission button.\n\nUse it like this:\n\n```html\n<goa-checkbox\n  goaValue\n  name=\"desserts\"\n  text=\"Ice Cream\"\n  [formControl]=\"reactiveFormCtrl\"\n  [value]=\"reactiveFormCtrl.value\"\n></goa-checkbox>\n```\n"},{"name":"goa-card-image","attributes":[{"name":"src","type":"string"},{"name":"height","type":"string"}]},{"name":"goa-card-group"},{"name":"goa-card-content"},{"name":"goa-card-actions"},{"name":"goa-card","attributes":[{"name":"elevation","type":"number"},{"name":"width","type":"number"},{"name":"height","type":"string","values":[{"name":"auto"},{"name":"max"}]},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"description":"# Card Library\n\nUse it like this:\n```html\n<goa-card elevation=\"1\" height=\"max\">\n    <goa-card-content>\n        <h3>This is the card</h3>\n      <p>\n        Lorem ipsum dolor sit amet, qui minim.\n      </p>\n    </goa-card-content>\n</goa-card>\n```\n"},{"name":"goa-callout","required":["type"],"attributes":[{"name":"type","description":"Define the context and colour of the callout","values":[{"name":"information"},{"name":"important"},{"name":"emergency"},{"name":"success"},{"name":"event"}]},{"name":"heading","type":"string","description":"Callout heading text"},{"name":"size","description":"Define the size of the callouts.","values":[{"name":"medium"},{"name":"large"}]},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Callout","url":"https://design.alberta.ca/?path=/docs/components-callout--emergency"}],"description":"# Callout Library\n\nCallouts communicate important changes or facts within the body layout through a strong visual emphasis, so that users take notice and read the information.\n\nUse it like this:\n\n```html\n<goa-callout type=\"emergency\" heading=\"Emergency callout\">\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n</goa-callout>\n\n<goa-callout type=\"emergency\" heading=\"Emergency callout\" size=\"medium\">\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n</goa-callout>\n```\n"},{"name":"goa-calendar","attributes":[{"name":"name","description":"Name of the date property","type":"string"},{"name":"value","type":"string","description":"Selected date value"},{"name":"min","type":"string","description":"Min allowed date value"},{"name":"max","type":"string","description":"Max allowed date value"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Calendar","url":"https://design.alberta.ca/iframe.html?viewMode=docs&id=components-calendar--basic&args=#calendar"}],"description":"# Calendar Library\n\n\nUse it like this:\n\n```\n\t<goa-calendar></goa-calendar>\n\t<goa-calendar [value]=\"date\"></goa-calendar>\n\t<goa-calendar [min]=\"min\" [max]=\"max\"></goa-calendar>\n```\n"},{"name":"goa-button-group","attributes":[{"name":"alignment","type":"string","description":"Positions the button group in the page layout","values":[{"name":"start"},{"name":"end"},{"name":"center"}]},{"name":"gap","type":"string","description":"Defines the spacing between buttons in the button group","values":[{"name":"relaxed"},{"name":"compact"}],"default":"relaxed"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Button Group","url":"https://design.alberta.ca/?path=/docs/components-button-group--alignment"}],"description":"# Button Group Library\n\nButton group displays multiple related actions stacked or in a horizontal row to help with arrangement and spacing.\n\nUse it like this:\n\n```\n<goa-button-group alignment=\"start\">\n  <goa-button type=\"primary\" (_click)=\"onClick()\">Primary</goa-button>\n  <goa-button type=\"secondary\" (_click)=\"onClick()\">Secondary</goa-button>\n  <goa-button type=\"secondary\" (_click)=\"onClick()\">Secondary</goa-button>\n</goa-button-group>\n<goa-button-group alignment=\"center\">\n  <goa-button type=\"primary\" (_click)=\"onClick()\">Primary</goa-button>\n  <goa-button type=\"secondary\" (_click)=\"onClick()\">Secondary</goa-button>\n  <goa-button type=\"secondary\" (_click)=\"onClick()\">Secondary</goa-button>\n</goa-button-group>\n<goa-button-group alignment=\"end\">\n  <goa-button type=\"primary\" (_click)=\"onClick()\">Primary</goa-button>\n  <goa-button type=\"secondary\" (_click)=\"onClick()\">Secondary</goa-button>\n  <goa-button type=\"secondary\" (_click)=\"onClick()\">Secondary</goa-button>\n</goa-button-group>\n```\n"},{"name":"goa-button","attributes":[{"name":"type","description":"Define the type of button","type":"string","values":[{"name":"primary"},{"name":"submit"},{"name":"secondary"},{"name":"tertiary"},{"name":"start"}],"default":"primary"},{"name":"size","description":"Set the size of button [to compact]","type":"string","values":[{"name":"normal"},{"name":"compact"}],"default":"normal"},{"name":"variant","type":"string","description":"Style this button to show a destructive action","values":[{"name":"normal"},{"name":"destructive"}],"default":"normal"},{"name":"disabled","type":"boolean","description":"Disable this button","valueSet":"boolean","default":"false"},{"name":"leadingIcon","type":"string","description":"Show an icon to the left of the text","valueSet":"goaIconType"},{"name":"trailingIcon","description":"Show an icon to the right of the text","type":"string","valueSet":"goaIconType"},{"name":"_click","description":"Callback function when button is clicked"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Button","url":"https://design.alberta.ca/iframe.html?viewMode=docs&id=components-button--types&args=#button"}],"description":"# Button Library\n\nUse a button to carry out an important action or to navigate to another page. \n\nUse it like this:\n\n```html\n<goa-button (_click)=\"onClick()\" type=\"primary\">Primary</goa-button>\n<goa-button (_click)=\"onClick()\" type=\"secondary\">Secondary</goa-button>\n<goa-button (_click)=\"onClick()\" type=\"tertiary\">Tertiary</goa-button>\n<goa-button (_click)=\"onClick()\" type=\"start\">Get started</goa-button>\n```\n"},{"name":"goa-block","attributes":[{"name":"gap","description":"Spacing between items","valueSet":"spacing","default":"m"},{"name":"direction","description":"Stacking direction of child components","values":[{"name":"row"},{"name":"column"}],"type":"string","default":"row"},{"name":"alignment","description":"Primary axis alignment","values":[{"name":"center"},{"name":"start"},{"name":"end"}],"type":"string","default":"start"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Block","url":"https://design.alberta.ca/iframe.html?viewMode=docs&id=utility-block--horizontal&args=#used-when-grouping-components-into-a-block-with-consistent-space-between"}],"description":"# Block Library\n\nUsed when grouping components into a block with consistent space between.\n\nUse it like this:\n\n```html\n<goa-block gap=\"m\">\n  <div>Item 1</div>\n  <div>Item 2</div>\n  <div>Item 3</div>\n</goa-block>\n```\n"},{"name":"goa-badge","required":["type"],"attributes":[{"name":"type","description":"Define the context and colour of the badge","type":"string","values":[{"name":"success"},{"name":"important"},{"name":"information"},{"name":"emergency"},{"name":"dark"},{"name":"midtone"},{"name":"light"}]},{"name":"icon","type":"boolean","description":"Include an icon in the badge","default":"false","valueSet":"boolean"},{"name":"content","description":"Text label of the badge","type":"string"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"},{"name":"arialabel","description":"Label for screen readers","type":"string"}],"references":[{"name":"GoA Badge","url":"https://design.alberta.ca/iframe.html?viewMode=docs&id=components-badge--basic&args=#badge"}],"description":"# Badge Library\n\nBadges are system driven, non-interactive, small labels which display minimal\namounts of information, system feedback, or states.\n\nUse it like this:\n\n```\n<goa-badge type=\"information\" content=\"Information\"></goa-badge>\n<goa-badge type=\"success\" content=\"Success\"></goa-badge>\n<goa-badge type=\"important\" content=\"Important\"></goa-badge>\n<goa-badge type=\"emergency\" content=\"Emergency\"></goa-badge>\n<goa-badge type=\"dark\" content=\"Dark\"></goa-badge>\n<goa-badge type=\"midtone\" content=\"Midtone\"></goa-badge>\n<goa-badge type=\"light\" content=\"Light\"></goa-badge>\n\n```\n"},{"name":"goa-app-header-menu","attributes":[{"name":"heading","description":"Set the group name to display at the top of the app header menu","type":"string"},{"name":"leadingicon","description":"Icon to display to the left of the menu text","type":"string"}],"references":[{"name":"GoA App header menu","url":"https://design.alberta.ca/iframe.html?viewMode=docs&id=components-app-header--basic&args=#app-header"}],"description":"# App Header Menu\n\nUsed within the AppHeader to display a group of menu items\n\n```html\n<goa-app-header heading=\"MyApp\">\n  <a href=\"#link\">Link</a>\n  <goa-app-header-menu heading=\"Account\">\n    <a href=\"#settings\">Settings</a>\n    <a href=\"#signout\">Signout</a>\n  </goa-app-header-menu>\n</goa-app-header>\n```\n"},{"name":"goa-app-header","attributes":[{"name":"url","description":"Set the URL to link from the alberta.ca logo. A full url is required","type":"string"},{"name":"heading","description":"Set the service name to display in the app header","type":"string"},{"name":"maxContentWidth","default":"100%","description":"Maximum width of the content area","type":"string"}],"references":[{"name":"GoA App header","url":"https://design.alberta.ca/iframe.html?viewMode=docs&id=components-app-header--basic&args=#app-header"}],"description":"# App Header Library\n\nThe header helps users identify where they are and provides a quick, organized way to reach important sections of a website.\n\n```html\n<goa-app-header heading=\"Some service\">\n  <a href=\"#aboutus\">About Us</a>\n  <a href=\"#signout\" class=\"interactive\">Signout</a>\n</goa-app-header>\n```\n"},{"name":"goa-accordion","required":["heading"],"attributes":[{"name":"heading","description":"Sets the heading text","type":"string"},{"name":"secondaryText","description":"Sets secondary text","type":"string"},{"name":"open","default":"false","description":"Sets the state of the accordion container open or closed","values":[{"name":"false","description":"Container is closed."},{"name":"true","description":"Container is opened."}],"type":"boolean"},{"name":"headingSize","default":"small","description":"Sets the heading size of the accordion container heading","values":[{"name":"small","description":"Heading size of the accordion container is small"},{"name":"medium","description":"Heading size of the accordion container is medium"}],"type":"string"},{"name":"headingcontent","description":"Add components to the accordion container heading such as badges","type":"slot"},{"name":"mt","description":"Top margin","valueSet":"spacing"},{"name":"mr","description":"Right margin","valueSet":"spacing"},{"name":"mb","description":"Bottom margin","valueSet":"spacing"},{"name":"ml","description":"Left margin","valueSet":"spacing"}],"references":[{"name":"GoA Accordion","url":"https://design.alberta.ca/?path=/docs/components-accordion--basic#accordion"}],"description":"# Accordion Library\nAccordion containers enable multiple content sections to be displayed in a limited space and collapsed or expanded by the user. You can create hierarchy of information by hiding secondary content inside collapsed expand containers.\n\nUse it like this:\n```html\n<goa-accordion heading=\"Heading\">\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n</goa-accordion>\n```\n"}],"valueSets":[{"name":"spacing","values":[{"name":"none"},{"name":"3xs"},{"name":"2xs"},{"name":"xs"},{"name":"s"},{"name":"m"},{"name":"l"},{"name":"xl"},{"name":"2xl"},{"name":"3xl"},{"name":"4xl"}]},{"name":"boolean","values":[{"name":"true"},{"name":"false"}]},{"name":"size","values":[{"name":"small"},{"name":"medium"},{"name":"large"},{"name":"xlarge"}]},{"name":"goaIconType","values":[{"name":"accessibility"},{"name":"add-circle"},{"name":"add"},{"name":"airplane"},{"name":"alarm"},{"name":"albums"},{"name":"alert-circle"},{"name":"alert"},{"name":"american-football"},{"name":"analytics"},{"name":"aperture"},{"name":"apps"},{"name":"archive"},{"name":"arrow-back-circle"},{"name":"arrow-back"},{"name":"arrow-down-circle"},{"name":"arrow-down"},{"name":"arrow-forward-circle"},{"name":"arrow-forward"},{"name":"arrow-redo-circle"},{"name":"arrow-redo"},{"name":"arrow-undo-circle"},{"name":"arrow-undo"},{"name":"arrow-up-circle"},{"name":"arrow-up"},{"name":"at-circle"},{"name":"at"},{"name":"attach"},{"name":"backspace"},{"name":"bag-add"},{"name":"bag-check"},{"name":"bag-handle"},{"name":"bag"},{"name":"bag-remove"},{"name":"balloon"},{"name":"ban"},{"name":"bandage"},{"name":"bar-chart"},{"name":"barbell"},{"name":"barcode"},{"name":"baseball"},{"name":"basket"},{"name":"basketball"},{"name":"battery-charging"},{"name":"battery-dead"},{"name":"battery-full"},{"name":"battery-half"},{"name":"beaker"},{"name":"bed"},{"name":"beer"},{"name":"bicycle"},{"name":"bluetooth"},{"name":"boat"},{"name":"body"},{"name":"bonfire"},{"name":"book"},{"name":"bookmark"},{"name":"bookmarks"},{"name":"bowling-ball"},{"name":"briefcase"},{"name":"browsers"},{"name":"brush"},{"name":"bug"},{"name":"build"},{"name":"bulb"},{"name":"bus"},{"name":"business"},{"name":"cafe"},{"name":"calculator"},{"name":"calendar-clear"},{"name":"calendar-number"},{"name":"calendar"},{"name":"call"},{"name":"camera"},{"name":"camera-reverse"},{"name":"car"},{"name":"car-sport"},{"name":"card"},{"name":"caret-back-circle"},{"name":"caret-back"},{"name":"caret-down-circle"},{"name":"caret-down"},{"name":"caret-forward-circle"},{"name":"caret-forward"},{"name":"caret-up-circle"},{"name":"caret-up"},{"name":"cart"},{"name":"cash"},{"name":"cellular"},{"name":"chatbox-ellipses"},{"name":"chatbox"},{"name":"chatbubble-ellipses"},{"name":"chatbubble"},{"name":"chatbubbles"},{"name":"checkbox"},{"name":"checkmark-circle"},{"name":"checkmark-done-circle"},{"name":"checkmark-done"},{"name":"checkmark"},{"name":"chevron-back-circle"},{"name":"chevron-back"},{"name":"chevron-down-circle"},{"name":"chevron-down"},{"name":"chevron-forward-circle"},{"name":"chevron-forward"},{"name":"chevron-up-circle"},{"name":"chevron-up"},{"name":"clipboard"},{"name":"close-circle"},{"name":"close"},{"name":"cloud-circle"},{"name":"cloud-done"},{"name":"cloud-download"},{"name":"cloud-offline"},{"name":"cloud"},{"name":"cloud-upload"},{"name":"cloudy-night"},{"name":"cloudy"},{"name":"code-download"},{"name":"code"},{"name":"code-slash"},{"name":"code-working"},{"name":"cog"},{"name":"color-fill"},{"name":"color-filter"},{"name":"color-palette"},{"name":"color-wand"},{"name":"compass"},{"name":"construct"},{"name":"contract"},{"name":"contrast"},{"name":"copy"},{"name":"create"},{"name":"crop"},{"name":"cube"},{"name":"cut"},{"name":"desktop"},{"name":"diamond"},{"name":"dice"},{"name":"disc"},{"name":"document-attach"},{"name":"document-lock"},{"name":"document"},{"name":"document-text"},{"name":"documents"},{"name":"download"},{"name":"duplicate"},{"name":"ear"},{"name":"earth"},{"name":"easel"},{"name":"egg"},{"name":"ellipse"},{"name":"ellipsis-horizontal-circle"},{"name":"ellipsis-horizontal"},{"name":"ellipsis-vertical-circle"},{"name":"ellipsis-vertical"},{"name":"enter"},{"name":"exit"},{"name":"expand"},{"name":"extension-puzzle"},{"name":"eye-off"},{"name":"eye"},{"name":"eyedrop"},{"name":"fast-food"},{"name":"female"},{"name":"file-tray-full"},{"name":"file-tray"},{"name":"file-tray-stacked"},{"name":"filenames.ps1"},{"name":"film"},{"name":"filter-circle"},{"name":"filter"},{"name":"finger-print"},{"name":"fish"},{"name":"fitness"},{"name":"flag"},{"name":"flame"},{"name":"flash-off"},{"name":"flash"},{"name":"flashlight"},{"name":"flask"},{"name":"flower"},{"name":"folder-open"},{"name":"folder"},{"name":"football"},{"name":"footsteps"},{"name":"funnel"},{"name":"game-controller"},{"name":"gift"},{"name":"git-branch"},{"name":"git-commit"},{"name":"git-compare"},{"name":"git-merge"},{"name":"git-network"},{"name":"git-pull-request"},{"name":"glasses"},{"name":"globe"},{"name":"golf"},{"name":"grid"},{"name":"hammer"},{"name":"hand-left"},{"name":"hand-right"},{"name":"happy"},{"name":"hardware-chip"},{"name":"headset"},{"name":"heart-circle"},{"name":"heart-dislike-circle"},{"name":"heart-dislike"},{"name":"heart-half"},{"name":"heart"},{"name":"help-buoy"},{"name":"help-circle"},{"name":"help"},{"name":"home"},{"name":"hourglass"},{"name":"ice-cream"},{"name":"id-card"},{"name":"image"},{"name":"images"},{"name":"infinite"},{"name":"information-circle"},{"name":"information"},{"name":"invert-mode"},{"name":"journal"},{"name":"key"},{"name":"keypad"},{"name":"language"},{"name":"laptop"},{"name":"layers"},{"name":"leaf"},{"name":"library"},{"name":"link"},{"name":"list-circle"},{"name":"list"},{"name":"locate"},{"name":"location"},{"name":"lock-closed"},{"name":"lock-open"},{"name":"log-in"},{"name":"log-out"},{"name":"magnet"},{"name":"mail-open"},{"name":"mail"},{"name":"mail-unread"},{"name":"male-female"},{"name":"male"},{"name":"man"},{"name":"map"},{"name":"medal"},{"name":"medical"},{"name":"medkit"},{"name":"megaphone"},{"name":"menu"},{"name":"mic-circle"},{"name":"mic-off-circle"},{"name":"mic-off"},{"name":"mic"},{"name":"moon"},{"name":"move"},{"name":"musical-note"},{"name":"musical-notes"},{"name":"navigate-circle"},{"name":"navigate"},{"name":"newspaper"},{"name":"notifications-circle"},{"name":"notifications-off-circle"},{"name":"notifications-off"},{"name":"notifications"},{"name":"nuclear"},{"name":"nutrition"},{"name":"open"},{"name":"options"},{"name":"paper-plane"},{"name":"partly-sunny"},{"name":"pause-circle"},{"name":"pause"},{"name":"paw"},{"name":"pencil"},{"name":"people-circle"},{"name":"people"},{"name":"person-add"},{"name":"person-circle"},{"name":"person"},{"name":"person-remove"},{"name":"phone-landscape"},{"name":"phone-portrait"},{"name":"pie-chart"},{"name":"pin"},{"name":"pint"},{"name":"pizza"},{"name":"planet"},{"name":"play-back-circle"},{"name":"play-back"},{"name":"play-circle"},{"name":"play-forward-circle"},{"name":"play-forward"},{"name":"play"},{"name":"play-skip-back-circle"},{"name":"play-skip-back"},{"name":"play-skip-forward-circle"},{"name":"play-skip-forward"},{"name":"podium"},{"name":"power"},{"name":"pricetag"},{"name":"pricetags"},{"name":"print"},{"name":"prism"},{"name":"pulse"},{"name":"push"},{"name":"qr-code"},{"name":"radio-button-off"},{"name":"radio-button-on"},{"name":"radio"},{"name":"rainy"},{"name":"reader"},{"name":"receipt"},{"name":"recording"},{"name":"refresh-circle"},{"name":"refresh"},{"name":"reload-circle"},{"name":"reload"},{"name":"remove-circle"},{"name":"remove"},{"name":"reorder-four"},{"name":"reorder-three"},{"name":"reorder-two"},{"name":"repeat"},{"name":"resize"},{"name":"restaurant"},{"name":"return-down-back"},{"name":"return-down-forward"},{"name":"return-up-back"},{"name":"return-up-forward"},{"name":"ribbon"},{"name":"rocket"},{"name":"rose"},{"name":"sad"},{"name":"save"},{"name":"scale"},{"name":"scan-circle"},{"name":"scan"},{"name":"school"},{"name":"search-circle"},{"name":"search"},{"name":"send"},{"name":"server"},{"name":"settings"},{"name":"shapes"},{"name":"share"},{"name":"share-social"},{"name":"shield-checkmark"},{"name":"shield-half"},{"name":"shield"},{"name":"shirt"},{"name":"shuffle"},{"name":"skull"},{"name":"snow"},{"name":"sparkles"},{"name":"speedometer"},{"name":"square"},{"name":"star-half"},{"name":"star"},{"name":"stats-chart"},{"name":"stop-circle"},{"name":"stop"},{"name":"stopwatch"},{"name":"storefront"},{"name":"subway"},{"name":"sunny"},{"name":"swap-horizontal"},{"name":"swap-vertical"},{"name":"sync-circle"},{"name":"sync"},{"name":"tablet-landscape"},{"name":"tablet-portrait"},{"name":"telescope"},{"name":"tennisball"},{"name":"terminal"},{"name":"text"},{"name":"thermometer"},{"name":"thumbs-down"},{"name":"thumbs-up"},{"name":"thunderstorm"},{"name":"ticket"},{"name":"time"},{"name":"timer"},{"name":"today"},{"name":"toggle"},{"name":"trail-sign"},{"name":"train"},{"name":"transgender"},{"name":"trash-bin"},{"name":"trash"},{"name":"trending-down"},{"name":"trending-up"},{"name":"triangle"},{"name":"trophy"},{"name":"tv"},{"name":"umbrella"},{"name":"unlink"},{"name":"videocam-off"},{"name":"videocam"},{"name":"volume-high"},{"name":"volume-low"},{"name":"volume-medium"},{"name":"volume-mute"},{"name":"volume-off"},{"name":"walk"},{"name":"wallet"},{"name":"warning"},{"name":"watch"},{"name":"water"},{"name":"wifi"},{"name":"wine"},{"name":"woman"},{"name":"logo-alipay"},{"name":"logo-amazon"},{"name":"logo-amplify"},{"name":"logo-android"},{"name":"logo-angular"},{"name":"logo-apple"},{"name":"logo-apple-appstore"},{"name":"logo-apple-ar"},{"name":"logo-behance"},{"name":"logo-bitbucket"},{"name":"logo-bitcoin"},{"name":"logo-buffer"},{"name":"logo-capacitor"},{"name":"logo-chrome"},{"name":"logo-closed-captioning"},{"name":"logo-codepen"},{"name":"logo-css3"},{"name":"logo-designernews"},{"name":"logo-deviantart"},{"name":"logo-discord"},{"name":"logo-docker"},{"name":"logo-dribbble"},{"name":"logo-dropbox"},{"name":"logo-edge"},{"name":"logo-electron"},{"name":"logo-euro"},{"name":"logo-facebook"},{"name":"logo-figma"},{"name":"logo-firebase"},{"name":"logo-firefox"},{"name":"logo-flickr"},{"name":"logo-foursquare"},{"name":"logo-github"},{"name":"logo-gitlab"},{"name":"logo-google"},{"name":"logo-google-playstore"},{"name":"logo-hackernews"},{"name":"logo-html5"},{"name":"logo-instagram"},{"name":"logo-ionic"},{"name":"logo-ionitron"},{"name":"logo-javascript"},{"name":"logo-laravel"},{"name":"logo-linkedin"},{"name":"logo-markdown"},{"name":"logo-mastodon"},{"name":"logo-medium"},{"name":"logo-microsoft"},{"name":"logo-no-smoking"},{"name":"logo-nodejs"},{"name":"logo-npm"},{"name":"logo-octocat"},{"name":"logo-paypal"},{"name":"logo-pinterest"},{"name":"logo-playstation"},{"name":"logo-pwa"},{"name":"logo-python"},{"name":"logo-react"},{"name":"logo-reddit"},{"name":"logo-rss"},{"name":"logo-sass"},{"name":"logo-skype"},{"name":"logo-slack"},{"name":"logo-snapchat"},{"name":"logo-soundcloud"},{"name":"logo-stackoverflow"},{"name":"logo-steam"},{"name":"logo-stencil"},{"name":"logo-tableau"},{"name":"logo-tiktok"},{"name":"logo-tumblr"},{"name":"logo-tux"},{"name":"logo-twitch"},{"name":"logo-twitter"},{"name":"logo-usd"},{"name":"logo-venmo"},{"name":"logo-vercel"},{"name":"logo-vimeo"},{"name":"logo-vk"},{"name":"logo-vue"},{"name":"logo-web-component"},{"name":"logo-wechat"},{"name":"logo-whatsapp"},{"name":"logo-windows"},{"name":"logo-wordpress"},{"name":"logo-xbox"},{"name":"logo-xing"},{"name":"logo-yahoo"},{"name":"logo-yen"},{"name":"logo-youtube;"}]}]}