@abgov/web-components 1.5.0 → 1.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -0
- package/html.html-data.json +1 -0
- package/index.css +1 -1
- package/package.json +6 -2
- package/web-components.es.js +5178 -2734
- package/web-components.umd.js +100 -71
package/README.md
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
# GoA Web components
|
|
2
|
+
|
|
3
|
+
This library contains custom components from the Government of Alberta.
|
|
4
|
+
|
|
5
|
+
### [View Angular Setup](https://ui-components.alberta.ca/?path=/docs/setup-angular--page)
|
|
6
|
+
|
|
7
|
+
### [View React Setup](https://ui-components.alberta.ca/?path=/docs/setup-react--page)
|
|
8
|
+
|
|
9
|
+
### [View Vue Setup](https://ui-components.alberta.ca/?path=/docs/setup-vue--page)
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
[Visit Design System](https://ui-components.alberta.ca)
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"tags":[{"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://ui-components.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"},{"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://ui-components.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\nUse it like this:\n```html\n<goa-app-header></goa-app-header>\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"}],"references":[{"name":"GoA Badge","url":"https://ui-components.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-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://ui-components.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-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://ui-components.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://ui-components.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-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":"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://ui-components.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"},{"name":"goa-card-actions"},{"name":"goa-card-content"},{"name":"goa-card-group"},{"name":"goa-card-image","attributes":[{"name":"src","type":"string"},{"name":"height","type":"string"}]},{"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-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":"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://ui-components.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-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://ui-components.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-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://ui-components.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-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://ui-components.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-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"}],"references":[{"name":"GoA Details","url":"https://ui-components.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```\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://ui-components.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-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":"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"},{"name":"native","type":"boolean","description":"When true will render the native <select> html element","valueSet":"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 Dropdown","url":"https://ui-components.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 [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-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."}],"references":[{"name":"GoA Dropdown","url":"https://ui-components.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 [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-focus-trap"},{"name":"goa-app-footer-meta-section","references":[{"name":"GoA Footer","url":"https://ui-components.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-nav-section","attributes":[{"name":"heading","type":"string"},{"name":"maxcolumncount","type":"number","default":"1"}],"references":[{"name":"GoA Footer","url":"https://ui-components.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","attributes":[{"name":"maxContentWidth","description":"The maximum width of the main content area","type":"string","default":"100%"}],"references":[{"name":"GoA Footer","url":"https://ui-components.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-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":"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."}],"references":[{"name":"GoA Form item","url":"https://ui-components.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\">\n <goa-input arialabel=\"First Name 1\" name=\"firstname\" type=\"text\"></goa-input>\n</goa-form-item>\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://ui-components.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-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"}],"references":[{"name":"GoA Hero Banner","url":"https://ui-components.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 backgroundUrl=\"https://i.picsum.photos/id/1076/600/400.jpg\"\n>\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n</goa-hero-banner>\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 or dark","values":[{"name":"color"},{"name":"nocolor"},{"name":"dark"}],"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":"fillcolor","type":"string"},{"name":"hovercolor","type":"string"},{"name":"opacity","type":"string"},{"name":"title","type":"string"}],"description":"# Icon Library\n\nUse it like this:\n```html\n<goa-icon type=\"alarm\"></goa-icon>\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","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"}],"references":[{"name":"GoA Input","url":"https://ui-components.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 goaValue [formControl]=\"reactiveFormCtrl\" [value]=\"reactiveFormCtrl.value\"></goa-input>\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."}],"references":[{"name":"GoA Microsite Header","url":"https://ui-components.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-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":"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://ui-components.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-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."}],"references":[{"name":"GoA Notification","url":"https://ui-components.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-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-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://ui-components.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-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"}],"references":[{"name":"GoA Popover","url":"https://ui-components.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-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://ui-components.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-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"}],"references":[{"name":"GoA RadioGroupItem","url":"https://ui-components.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-scrollable"},{"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://ui-components.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-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://ui-components.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-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-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://ui-components.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-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://ui-components.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-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://ui-components.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-layout-full-nav"},{"name":"goa-one-column-layout","references":[{"name":"GoA One Column Layout","url":"https://ui-components.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-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://ui-components.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"}],"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;"}]}]}
|
package/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"https://
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap";body,input,textarea,button,textarea{background:#fff;font-family:var(--goa-font-family-sans);font-weight:400;font-size:var(--goa-font-size-4);color:var(--goa-color-text-default)}body{margin:0;scroll-behavior:smooth;line-height:var(--goa-line-height-2)}*,*:before,*:after{box-sizing:border-box}p{margin:0;margin-bottom:1rem}hr{border-width:0;border-top:1px solid #ccc;height:0;padding:0;margin:2rem 0}ul,ol{padding-left:0;padding-left:1rem}li>ul,li>ol,li>ul,li>ol{padding-left:0;margin-top:0}dl{margin-top:0}dd{margin-left:.5rem}a{color:var(--goa-color-interactive-default);cursor:pointer}a:hover{color:var(--goa-color-interactive-hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive-hover);outline-offset:0px}::placeholder{color:#999;opacity:1}:-ms-input-placeholder{color:#999}::-ms-input-placeholder{color:#999}h1{font-size:var(--goa-font-size-10);line-height:var(--goa-line-height-7);font-weight:var(--goa-font-weight-bold)}h2{font-size:var(--goa-font-size-9);line-height:var(--goa-line-height-6);font-weight:var(--goa-font-weight-regular)}h3{font-size:var(--goa-font-size-7);line-height:var(--goa-line-height-4);font-weight:var(--goa-font-weight-regular)}h4,h5,h6{font-size:var(--goa-font-size-4);line-height:var(--goa-line-height-2);font-weight:var(--goa-font-weight-bold)}h3+h1{margin-top:-1rem}p{margin-bottom:1rem;font-size:var(--goa-font-size-4)}em{font-size:var(--goa-font-size-1);line-height:var(--goa-line-height-1);color:var(--goa-color-greyscale-200)}small{font-size:var(--goa-font-size-1);font-style:normal;color:var(--goa-color-greyscale-200)}goa-two-column-layout h1:first-of-type,goa-two-column-layout h2:first-of-type,goa-two-column-layout h3:first-of-type,goa-container h1:first-of-type,goa-container h2:first-of-type,goa-container h3:first-of-type{margin-top:0}goa-two-column-layout [slot=nav] a{display:block;padding:.5rem 0}@font-face{font-family:acumin-pro-semi-condensed;src:url(https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/l?subset_id=1&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/d?subset_id=1&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/3f7b4d/00000000000000003b9acb2d/27/a?subset_id=1&fvd=n4&v=3) format("opentype");font-style:normal;font-weight:400}@font-face{font-family:acumin-pro-semi-condensed;src:url(https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/l?subset_id=1&fvd=i4&v=3) format("woff2"),url(https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/d?subset_id=1&fvd=i4&v=3) format("woff"),url(https://use.typekit.net/af/761912/00000000000000003b9acb2e/27/a?subset_id=1&fvd=i4&v=3) format("opentype");font-style:italic;font-weight:400}@font-face{font-family:acumin-pro-semi-condensed;src:url(https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/l?subset_id=1&fvd=n7&v=3) format("woff2"),url(https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/d?subset_id=1&fvd=n7&v=3) format("woff"),url(https://use.typekit.net/af/ee7f3d/00000000000000003b9acb33/27/a?subset_id=1&fvd=n7&v=3) format("opentype");font-style:normal;font-weight:700}@font-face{font-family:acumin-pro-semi-condensed;src:url(https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/l?subset_id=1&fvd=i7&v=3) format("woff2"),url(https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/d?subset_id=1&fvd=i7&v=3) format("woff"),url(https://use.typekit.net/af/503f80/00000000000000003b9acb34/27/a?subset_id=1&fvd=i7&v=3) format("opentype");font-style:italic;font-weight:700}@font-face{font-family:acumin-pro-semi-condensed;src:url(https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/l?subset_id=1&fvd=n6&v=3) format("woff2"),url(https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/d?subset_id=1&fvd=n6&v=3) format("woff"),url(https://use.typekit.net/af/e60e87/00000000000000003b9acb31/27/a?subset_id=1&fvd=n6&v=3) format("opentype");font-style:normal;font-weight:600}@font-face{font-family:roboto-mono;src:url(https://fonts.gstatic.com/s/robotomono/v22/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW4.woff2) format("woff2");font-style:normal;font-weight:400}:root{--font-valign-fix: .1rem;--shadow-0: 0 0 rgba(0, 0, 0, 0);--shadow-1: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .24);--shadow-2: 0 3px 6px rgba(0, 0, 0, .15), 0 2px 4px rgba(0, 0, 0, .12);--shadow-3: 0 10px 20px rgba(0, 0, 0, .15), 0 3px 6px rgba(0, 0, 0, .1);--shadow-4: 0 15px 25px rgba(0, 0, 0, .15), 0 5px 10px rgba(0, 0, 0, .05);--shadow-5: 0 20px 40px rgba(0, 0, 0, .2)}ol.goa-ordered-list li,ul.goa-unordered-list li{padding:var(--goa-space-xs)}ol.goa-ordered-list ol,ol.goa-ordered-list ul,ul.goa-unordered-list ol,ul.goa-unordered-list ul{margin-left:var(--goa-space-l)}ul.goa-unordered-list li::marker{color:var(--goa-color-brand-default)}:root{--goa-color-brand-default: #0081a2;--goa-color-brand-dark: #005072;--goa-color-brand-light: #c8eefa;--goa-color-interactive-default: #0070c4;--goa-color-interactive-hover: #004f84;--goa-color-interactive-error: #ec040b;--goa-color-interactive-focus: #feba35;--goa-color-interactive-disabled: #80b7e1;--goa-color-text-default: #333333;--goa-color-text-secondary: #666666;--goa-color-text-light: #ffffff;--goa-color-text-disabled: #666666;--goa-color-info-default: #005daa;--goa-color-info-light: #b2d4ed;--goa-color-info-dark: #00347a;--goa-color-info-background: #eff8ff;--goa-color-warning-default: #feba35;--goa-color-warning-light: #fcefd0;--goa-color-warning-dark: #c68a00;--goa-color-warning-background: #fff6e5;--goa-color-emergency-default: #ec040b;--goa-color-emergency-light: #ffcecf;--goa-color-emergency-dark: #b00000;--goa-color-emergency-background: #fff1f2;--goa-color-success-default: #00853f;--goa-color-success-light: #c6e0d0;--goa-color-success-dark: #005715;--goa-color-success-background: #eef9f3;--goa-color-greyscale-100: #f1f1f1;--goa-color-greyscale-200: #dcdcdc;--goa-color-greyscale-400: #adadad;--goa-color-greyscale-500: #949494;--goa-color-greyscale-600: #858585;--goa-color-greyscale-700: #666666;--goa-color-greyscale-black: #333333;--goa-color-greyscale-white: #ffffff;--goa-font-weight-regular: 400;--goa-font-weight-medium: 500;--goa-font-weight-bold: 700;--goa-font-size-1: .75rem;--goa-font-size-2: .875rem;--goa-font-size-3: 1rem;--goa-font-size-4: 1.125rem;--goa-font-size-5: 1.25rem;--goa-font-size-6: 1.375rem;--goa-font-size-7: 1.5rem;--goa-font-size-8: 2rem;--goa-font-size-9: 2.25rem;--goa-font-size-10: 3rem;--goa-space-none: 0rem;--goa-space-3xs: .125rem;--goa-space-2xs: .25rem;--goa-space-xs: .5rem;--goa-space-s: .75rem;--goa-space-m: 1rem;--goa-space-l: 1.5rem;--goa-space-xl: 2rem;--goa-space-2xl: 3rem;--goa-space-3xl: 4rem;--goa-space-4xl: 8rem;--goa-border-radius-none: 0rem;--goa-border-radius-m: .25rem;--goa-opacity-background-modal: 50%;--goa-opacity-background-loading: 90%;--goa-line-height-1: 1.25rem;--goa-line-height-2: 1.5rem;--goa-line-height-3: 1.75rem;--goa-line-height-4: 2rem;--goa-line-height-5: 2.5rem;--goa-line-height-6: 2.75rem;--goa-line-height-7: 3.5rem;--goa-line-height-05: 1.125rem;--goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;--goa-font-family-number: roboto-mono, monospace;--goa-typography-heading-xs: 700 1rem/1.5rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;--goa-typography-heading-s: 700 1.125rem/1.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;--goa-typography-heading-m: 400 1.5rem/2rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;--goa-typography-heading-l: 400 2.25rem/2.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;--goa-typography-heading-xl: 700 3rem/3.5rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;--goa-typography-body-xs: 400 .875rem/1.25rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;--goa-typography-body-s: 400 1rem/1.5rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;--goa-typography-body-m: 400 1.125rem/1.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;--goa-typography-body-l: 400 1.5rem/2rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;--goa-typography-button-default: 400 1.125rem/1.25rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;--goa-typography-number-m: 500 1.125rem/1.75rem roboto-mono, monospace;--goa-border-width-s: 1px;--goa-border-width-m: 2px;--goa-border-width-l: 3px;--goa-letter-spacing-button: .0125rem;--goa-icon-size-s: 1rem;--goa-icon-size-m: 1.25rem;--goa-icon-size-l: 1.5rem;--goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,.16)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@abgov/web-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.7.0",
|
|
4
4
|
"description": "Government of Alberta - UI Web components",
|
|
5
5
|
"bugs": {
|
|
6
6
|
"url": "https://github.com/GovAlta/ui-components/issues"
|
|
@@ -14,6 +14,8 @@
|
|
|
14
14
|
"module": "web-components.umd.js",
|
|
15
15
|
"scripts": {
|
|
16
16
|
"dev": "rollup -c rollup.config.js -w",
|
|
17
|
+
"playground": "rollup -c rollup.playground.config.js -w",
|
|
18
|
+
"start": "sirv playground/public",
|
|
17
19
|
"check": "svelte-check --tsconfig ./tsconfig.json"
|
|
18
20
|
},
|
|
19
21
|
"license": "Apache-2.0",
|
|
@@ -39,10 +41,12 @@
|
|
|
39
41
|
"rollup-plugin-summary": "^1.3.0",
|
|
40
42
|
"rollup-plugin-svelte": "^7.0.0",
|
|
41
43
|
"rollup-plugin-terser": "^7.0.0",
|
|
44
|
+
"sirv-cli": "^1.0.0",
|
|
42
45
|
"svelte": "^3.0.0",
|
|
43
46
|
"svelte-check": "^2.0.0",
|
|
44
47
|
"svelte-preprocess": "^4.0.0",
|
|
45
48
|
"tslib": "^2.0.0",
|
|
46
|
-
"typescript": "^4.0.0"
|
|
49
|
+
"typescript": "^4.0.0",
|
|
50
|
+
"vite-plugin-replace": "^0.1.1"
|
|
47
51
|
}
|
|
48
52
|
}
|