API

<awc-accordion>

An Act! Web Component Accordion Element.

Attributes

NameDescriptionTypeDefault
openundefinedbooleanfalse

Properties

NameAttributeDescriptionTypeDefault
openopenundefinedbooleanfalse
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

Events

NameDescription
accordionrenderundefined
openchangeExample Usage: <awc-accordion></awc-accordion>

API

<awc-accordion-list>

An Act! Web Component AccordionList Element. Example Usage: <awc-accordion-list></awc-accordion-list>

Attributes

NameDescriptionTypeDefault
activeItemundefinedActAccordionElement | nullundefined

Properties

NameAttributeDescriptionTypeDefault
activeItemactiveItemundefinedActAccordionElement | nullundefined
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

API

<awc-attribute>

An Act! Web Component Attribute Element. Example Usage:

Attributes

NameDescriptionTypeDefault
autoCapitalizeThe HTML5 input `autocapitalize` attribute passed to the input element."none" | "off" | "on" | "sentences" | "words" | "characters""off"
clearableSets whether there should be a clear icon-button to clear the input.booleantrue
disabledSets the input as disabled.booleanfalse
focusedSets the input as focused.booleanfalse
inputHiddenSets the input element as hidden.booleanfalse
inputOnActiveWhether the input should appear *only* when the element is active or focusedbooleanfalse
labelThe text for the label.string""
maskThe IMask to use with the input.MaskedDateOptions | MaskedNumberOptions | MaskedPatternOptions | MaskedOptions | ... 12 more ... | nullundefined
maxThe `max` attribute on the input.string | number""
minThe `min` attribute on the input.string | number""
nameThe `name` attribute on the input.string""
placeholderThe `placeholder` attribute on the input.string""
readOnlySets the input as readonly.booleanfalse
requiredSets the input as required.booleanfalse
typeThe `type` attribute of the input.HTMLInputElementType"text"
validSets the input as valid. The `awc-input--invalid` class is applied if invalid.booleantrue
valueThe value of the input.string""

Properties

NameAttributeDescriptionTypeDefault
autoCapitalizeautoCapitalizeThe HTML5 input `autocapitalize` attribute passed to the input element."none" | "off" | "on" | "sentences" | "words" | "characters""off"
clearableclearableSets whether there should be a clear icon-button to clear the input.booleantrue
disableddisabledSets the input as disabled.booleanfalse
focusedfocusedSets the input as focused.booleanfalse
inputHiddeninputHiddenSets the input element as hidden.booleanfalse
inputOnActiveinputOnActiveWhether the input should appear *only* when the element is active or focusedbooleanfalse
labellabelThe text for the label.string""
maskmaskThe IMask to use with the input.MaskedDateOptions | MaskedNumberOptions | MaskedPatternOptions | MaskedOptions | ... 12 more ... | nullundefined
maxmaxThe `max` attribute on the input.string | number""
minminThe `min` attribute on the input.string | number""
namenameThe `name` attribute on the input.string""
placeholderplaceholderThe `placeholder` attribute on the input.string""
readOnlyreadOnlySets the input as readonly.booleanfalse
requiredrequiredSets the input as required.booleanfalse
typetypeThe `type` attribute of the input.HTMLInputElementType"text"
validvalidSets the input as valid. The `awc-input--invalid` class is applied if invalid.booleantrue
valuevalueThe value of the input.string""
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

Events

NameDescription
clearundefined
inputundefined
invalidExample Usage: <awc-input></awc-input>
blurundefined
focusundefined

API

<awc-button>

The Act! Web Component Button Element. Should be used in place of the standard HTMLButtonElement. Example Usage: <awc-button>Button</awc-button>

Attributes

NameDescriptionTypeDefault
colorSets the color of the displayed button.ActColor"blue"
disabledDisabled the button.booleanfalse
hrefButton becomes an `a` tag with `href` property.string | nullundefined
outlinedSets the button to outlined style.booleanfalse
slimSets the button to slim style.booleanfalse
targetSets the target property if `href` is set."_blank" | "_parent" | "_self" | "_top""_self"
typeSets the button type."button" | "submit" | "reset" | "menu""button"

Properties

NameAttributeDescriptionTypeDefault
colorcolorSets the color of the displayed button.ActColor"blue"
disableddisabledDisabled the button.booleanfalse
hrefhrefButton becomes an `a` tag with `href` property.string | nullundefined
outlinedoutlinedSets the button to outlined style.booleanfalse
slimslimSets the button to slim style.booleanfalse
targettargetSets the target property if `href` is set."_blank" | "_parent" | "_self" | "_top""_self"
typetypeSets the button type."button" | "submit" | "reset" | "menu""button"
buttonElementundefinedundefinedHTMLElementundefined
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

API

<awc-calendar>

An Act! Web Component Calendar Element.

Attributes

NameDescriptionTypeDefault
formatLanguageThe language to use for localization. Default: `navigaor.language`string"language"
headerTextThe text used to show in the weekday header. Default: iterates Sunday-Saturday and calls 'narrow' on the Date object passing the formatLanguagestring[]"createArrayWithNumbers(7).map(day => {\n // Start on a known Sunday (getDate() === 0)\n const date = new Date(2020, 7, 2 + day);\n // Use narrow format to get the first letter for the weekday\n return date.toLocaleDateString(this.formatLanguage, { weekday: 'narrow' });\n })"
hideHeaderSets whether the weekday header will be shown.booleanfalse
hideMonthsSets whether the month will be shown (and the month navigation).booleanfalse
hideWeekendsSets whether the weekends will be shown.booleanfalse
inactiveTodaySets whether the today element should have an indicator on it.booleanfalse
monthTextThe text used for displaying the month. Default: gets the current language and iterates the months on the Date object.string[]"createArrayWithNumbers(12).map(month => {\n const date = new Date();\n date.setMonth(month);\n return date.toLocaleDateString(this.formatLanguage, { month: 'long' });\n })"
restrictMonthRestricts the month to the current month via removing the ability to change the month.booleanfalse
singleSelectionWhether the value should only ever have one item selected. This also disables the ability to select multiple or ranged values.booleanfalse
valueThe value of the calendar selection. If the length of the array is greater than one, than the multi or range selection occurred.Date[][]

Properties

NameAttributeDescriptionTypeDefault
formatLanguageformatLanguageThe language to use for localization. Default: `navigaor.language`string"language"
headerTextheaderTextThe text used to show in the weekday header. Default: iterates Sunday-Saturday and calls 'narrow' on the Date object passing the formatLanguagestring[]"createArrayWithNumbers(7).map(day => {\n // Start on a known Sunday (getDate() === 0)\n const date = new Date(2020, 7, 2 + day);\n // Use narrow format to get the first letter for the weekday\n return date.toLocaleDateString(this.formatLanguage, { weekday: 'narrow' });\n })"
hideHeaderhideHeaderSets whether the weekday header will be shown.booleanfalse
hideMonthshideMonthsSets whether the month will be shown (and the month navigation).booleanfalse
hideWeekendshideWeekendsSets whether the weekends will be shown.booleanfalse
inactiveTodayinactiveTodaySets whether the today element should have an indicator on it.booleanfalse
monthTextmonthTextThe text used for displaying the month. Default: gets the current language and iterates the months on the Date object.string[]"createArrayWithNumbers(12).map(month => {\n const date = new Date();\n date.setMonth(month);\n return date.toLocaleDateString(this.formatLanguage, { month: 'long' });\n })"
restrictMonthrestrictMonthRestricts the month to the current month via removing the ability to change the month.booleanfalse
singleSelectionsingleSelectionWhether the value should only ever have one item selected. This also disables the ability to select multiple or ranged values.booleanfalse
valuevalueThe value of the calendar selection. If the length of the array is greater than one, than the multi or range selection occurred.Date[][]
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

Events

NameDescription
selectedExample Usage: <awc-calendar></awc-calendar>
selectundefined

API

<awc-checkbox>

An Act! Web Component Checkbox Element. Example Usage:

Attributes

NameDescriptionTypeDefault
checkedWhether the checkbox is checked or not.booleanfalse
disabledDisables the checkbox.booleanfalse
nameThe name of the checkbox element.string""
suffixedWhether the checkbox should suffix the text.booleanfalse

Properties

NameAttributeDescriptionTypeDefault
checkedcheckedWhether the checkbox is checked or not.booleanfalse
disableddisabledDisables the checkbox.booleanfalse
namenameThe name of the checkbox element.string""
suffixedsuffixedWhether the checkbox should suffix the text.booleanfalse
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

Events

NameDescription
changeundefined

API

<awc-chip>

An Act! Web Component Chip Element.

Attributes

NameDescriptionTypeDefault
colorThe chip color based on an `ActColor`ActColor"blue"
clearableWhether the chip will have a button rendered to fire the chipclear eventbooleanfalse
tooltipThe text to display as the tooltip for the chip element. The tooltip will only display if this is a non-empty string.string""

Properties

NameAttributeDescriptionTypeDefault
colorcolorThe chip color based on an `ActColor`ActColor"blue"
clearableclearableWhether the chip will have a button rendered to fire the chipclear eventbooleanfalse
tooltiptooltipThe text to display as the tooltip for the chip element. The tooltip will only display if this is a non-empty string.string""
menuElementundefinedThe ActMenuElement for the tooltip.ActMenuElementundefined
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

Events

NameDescription
chipclearonly if clearable is set to true and user action occurs
chiprenderwhen item is rendered Example Usage:

API

<awc-chip-list>

An Act! Web Component ChipList Element.

Attributes

NameDescriptionTypeDefault
addActionundefinedbooleantrue
modifiableundefinedbooleanfalse

Properties

NameAttributeDescriptionTypeDefault
addActionaddActionundefinedbooleantrue
modifiablemodifiableundefinedbooleanfalse
addButtonundefinedundefinedActIconButtonElementundefined
addButtonIconundefinedundefinedActIconElementundefined
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

Events

NameDescription
addclickExample Usage: <awc-chip-list></awc-chip-list>

API

<awc-datetime>

An Act! Web Component DateTime Element. Example Usage: <awc-datetime></awc-datetime>

Attributes

NameDescriptionTypeDefault
applyTextText used for the apply button.string"Apply"
attributeSets the inputs to display as attribute elements.booleanfalse
cancelTextText used for the cancel button.string"Cancel"
formatLanguageWhat language to use in the default format function. Defaults to the current browser language.string"language"
formatOptionsThe options passed to the default format function. Defaults to undefined.DateTimeFormatOptions | undefinedundefined
hideDateWhether the calendar should be rendered or not. NOTE: This changes the native HTML5 control used based on the type.booleanfalse
hideTimeWhether the time selection should be rendered or not. NOTE: This changes the native HTML5 control used based on the type.booleanfalse
hourPlaceholderThe placeholder for the hour select element.string"12"
labelThe label for the inputs.string""
minuteIntervalThe interval for the minutes. Defaults to 5.number5
minutePlaceholderThe placeholder for the minute select element.string"00"
placeholderThe placeholder for the inputs.string""
requiredWhether the field is required or not.booleanfalse
twentyFourHourWhether the time selection should render as twenty four hour selection or not.booleanfalse
valueThe current value of the field.Date | nullundefined

Properties

NameAttributeDescriptionTypeDefault
applyTextapplyTextText used for the apply button.string"Apply"
attributeattributeSets the inputs to display as attribute elements.booleanfalse
cancelTextcancelTextText used for the cancel button.string"Cancel"
formatLanguageformatLanguageWhat language to use in the default format function. Defaults to the current browser language.string"language"
formatOptionsformatOptionsThe options passed to the default format function. Defaults to undefined.DateTimeFormatOptions | undefinedundefined
hideDatehideDateWhether the calendar should be rendered or not. NOTE: This changes the native HTML5 control used based on the type.booleanfalse
hideTimehideTimeWhether the time selection should be rendered or not. NOTE: This changes the native HTML5 control used based on the type.booleanfalse
hourPlaceholderhourPlaceholderThe placeholder for the hour select element.string"12"
labellabelThe label for the inputs.string""
minuteIntervalminuteIntervalThe interval for the minutes. Defaults to 5.number5
minutePlaceholderminutePlaceholderThe placeholder for the minute select element.string"00"
placeholderplaceholderThe placeholder for the inputs.string""
requiredrequiredWhether the field is required or not.booleanfalse
twentyFourHourtwentyFourHourWhether the time selection should render as twenty four hour selection or not.booleanfalse
valuevalueThe current value of the field.Date | nullundefined
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

Events

NameDescription
blurundefined
focusundefined

API

<awc-icon>

An icon element that displays one of Act!'s icons. Example Usage: <awc-icon>thumbs-up</awc-icon>

Properties

NameAttributeDescriptionTypeDefault
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

API

<awc-icon-button>

The Act! Web Component Icon Button Element. Should be used when an icon should awc as a button. Example Usage: <awc-icon-button color="none"> <awc-icon>thumbs-up</awc-icon> </awc-icon-button>

Attributes

NameDescriptionTypeDefault
colorSets the color of the displayed button.ActColor"blue"
disabledDisabled the button.booleanfalse
hrefButton becomes an `a` tag with `href` property.string | nullundefined
outlinedSets the button to outlined style.booleanfalse
slimSets the button to slim style.booleanfalse
targetSets the target property if `href` is set."_blank" | "_parent" | "_self" | "_top""_self"
typeSets the button type."button" | "submit" | "reset" | "menu""button"

Properties

NameAttributeDescriptionTypeDefault
colorcolorSets the color of the displayed button.ActColor"blue"
disableddisabledDisabled the button.booleanfalse
hrefhrefButton becomes an `a` tag with `href` property.string | nullundefined
outlinedoutlinedSets the button to outlined style.booleanfalse
slimslimSets the button to slim style.booleanfalse
targettargetSets the target property if `href` is set."_blank" | "_parent" | "_self" | "_top""_self"
typetypeSets the button type."button" | "submit" | "reset" | "menu""button"
buttonElementundefinedundefinedHTMLElementundefined
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

API

<awc-input>

An Act! Web Component Input Element.

Attributes

NameDescriptionTypeDefault
autoCapitalizeThe HTML5 input `autocapitalize` attribute passed to the input element."none" | "off" | "on" | "sentences" | "words" | "characters""off"
clearableSets whether there should be a clear icon-button to clear the input.booleanfalse
disabledSets the input as disabled.booleanfalse
focusedSets the input as focused.booleanfalse
inputHiddenSets the input element as hidden.booleanfalse
inputOnActiveWhether the input should appear *only* when the element is active or focusedbooleanfalse
labelThe text for the label.string""
maskThe IMask to use with the input.MaskedDateOptions | MaskedNumberOptions | MaskedPatternOptions | MaskedOptions | ... 12 more ... | nullundefined
maxThe `max` attribute on the input.string | number""
minThe `min` attribute on the input.string | number""
nameThe `name` attribute on the input.string""
placeholderThe `placeholder` attribute on the input.string""
readOnlySets the input as readonly.booleanfalse
requiredSets the input as required.booleanfalse
typeThe `type` attribute of the input.HTMLInputElementType"text"
validSets the input as valid. The `awc-input--invalid` class is applied if invalid.booleantrue
valueThe value of the input.string""

Properties

NameAttributeDescriptionTypeDefault
autoCapitalizeautoCapitalizeThe HTML5 input `autocapitalize` attribute passed to the input element."none" | "off" | "on" | "sentences" | "words" | "characters""off"
clearableclearableSets whether there should be a clear icon-button to clear the input.booleanfalse
disableddisabledSets the input as disabled.booleanfalse
focusedfocusedSets the input as focused.booleanfalse
inputHiddeninputHiddenSets the input element as hidden.booleanfalse
inputOnActiveinputOnActiveWhether the input should appear *only* when the element is active or focusedbooleanfalse
labellabelThe text for the label.string""
maskmaskThe IMask to use with the input.MaskedDateOptions | MaskedNumberOptions | MaskedPatternOptions | MaskedOptions | ... 12 more ... | nullundefined
maxmaxThe `max` attribute on the input.string | number""
minminThe `min` attribute on the input.string | number""
namenameThe `name` attribute on the input.string""
placeholderplaceholderThe `placeholder` attribute on the input.string""
readOnlyreadOnlySets the input as readonly.booleanfalse
requiredrequiredSets the input as required.booleanfalse
typetypeThe `type` attribute of the input.HTMLInputElementType"text"
validvalidSets the input as valid. The `awc-input--invalid` class is applied if invalid.booleantrue
valuevalueThe value of the input.string""
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

Events

NameDescription
clearundefined
inputundefined
invalidExample Usage: <awc-input></awc-input>
blurundefined
focusundefined

API

<awc-list>

An Act! Web Component List Element. This component should be used any time an iterable data set of items is desired.

Attributes

NameDescriptionTypeDefault
caseSensitiveFilterWhether the list filtering should be case sensitivebooleanfalse
filteredWhether the list is filteredbooleanfalse
multiWhether the list allows multiple valuesbooleanfalse
itemsThe list of items slotted into this elementActListItemElement[][]

Properties

NameAttributeDescriptionTypeDefault
caseSensitiveFiltercaseSensitiveFilterWhether the list filtering should be case sensitivebooleanfalse
filteredfilteredWhether the list is filteredbooleanfalse
multimultiWhether the list allows multiple valuesbooleanfalse
itemsitemsThe list of items slotted into this elementActListItemElement[][]
slotElementundefinedundefinedHTMLSlotElementundefined
hasFilteredValueundefinedWhether the list has a value found by the filterbooleanfalse
selectedItemsundefinedReturns the items that have the `selected` property set to `true`ActListItemElement[]undefined
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

Events

NameDescription
itemselectExample Usage: <awc-list></awc-list>

API

<awc-list-item>

An Act! Web Component List Item Element.

Attributes

NameDescriptionTypeDefault
disabledFlag denoting whether the list item is disabled or notbooleanfalse
valueThe value of the list item. Used for list selectionstring | nullundefined

Properties

NameAttributeDescriptionTypeDefault
disableddisabledFlag denoting whether the list item is disabled or notbooleanfalse
selectedundefinedFlag denoting whether the list item is currently selectedbooleanundefined
valuevalueThe value of the list item. Used for list selectionstring | nullundefined
textundefinedundefinedstringundefined
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

Events

NameDescription
itemrenderExample Usage: <awc-list-item></awc-list-item>
itemselectundefined

API

<awc-list-item-divider>

An Act! Web Component List Item Divider Element. Used in lists to separate groups of items. Styles modify based on the type of list the divider exists in (e.g. menu list, etc.) Example Usage: <awc-list-item-divider></awc-list-item-divider>

Properties

NameAttributeDescriptionTypeDefault
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

API

<awc-loading>

An Act! Web Component Loading Element. Configure this element via the CSS variables. CSS Overrides and Defaults: * --awc-loading-animation-time: 2s; * --awc-loading-animation-delay: 350ms; * --awc-loading-dot-color: var(--green-3); * --awc-loading-dot-size: 8px; * --awc-loading-jump-height: 10px; * --awc-loading-width: 68px; Example Usage: <awc-loading></awc-loading>

Properties

NameAttributeDescriptionTypeDefault
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

API

<awc-menu>

An Act! Web Component Menu Element. Example Usage: <awc-menu></awc-menu>

Attributes

NameDescriptionTypeDefault
anchorAnchor element to display off of. This is a required field.HTMLElement | nullundefined
anchorPaddingPixel value for padding between the MenuElement and the anchor.number5
closeonselectWhether the menu should close once a selection is made. The selection will not persist on the list.booleanfalse
matchAnchorWidthFlag for whether the MenuElement should restrict width based upon the anchor's width.booleanfalse
maxHeightUnit based on vhnumber70
multiWhether the list should act as a multi-selection list or not.booleanfalse
openFlag denoting whether the menu is open or not.booleanfalse
positioningStrategyundefinedPositioningStrategies"relative"

Properties

NameAttributeDescriptionTypeDefault
anchoranchorAnchor element to display off of. This is a required field.HTMLElement | nullundefined
anchorPaddinganchorPaddingPixel value for padding between the MenuElement and the anchor.number5
closeonselectcloseonselectWhether the menu should close once a selection is made. The selection will not persist on the list.booleanfalse
matchAnchorWidthmatchAnchorWidthFlag for whether the MenuElement should restrict width based upon the anchor's width.booleanfalse
maxHeightmaxHeightUnit based on vhnumber70
multimultiWhether the list should act as a multi-selection list or not.booleanfalse
openopenFlag denoting whether the menu is open or not.booleanfalse
positioningStrategypositioningStrategyundefinedPositioningStrategies"relative"
listElementundefinedThe underlying `ActListElement` to handle list logic.ActListElementundefined
menuContainerElementundefinedundefinedHTMLElementundefined
slotElementundefinedThe slot element, allowing for detecting new nodes.HTMLSlotElementundefined
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

Events

NameDescription
closedundefined
openedundefined
selectundefined

API

<awc-select>

An Act! Web Component Select Element. Example Usage: <awc-select></awc-select>

Attributes

NameDescriptionTypeDefault
autocompleteSets the typeahead functionality for filtering the list.booleanfalse
caseSensitiveWhether the autocomplete filtering should be case sensitivebooleanundefined
concatenatedSets that the items should display concatenated rather than the default bubbled.booleanfalse
delimiterIf multi and concatenated are set to true, this value is used to concatenate the text for each of the selected values into the input element.string", "
multiWhether the select should allow multiple selection.booleanfalse
nameThe name of the select element. Used for forms.string""
labelThe label for the element.string""
limitToListWhether the element is limited to the list provided, or if the user should be allowed to enter their own value.booleanfalse
placeholderThe `placeholder` attribute on the input element.string""
loadingSets the element as in a loading state (used for async calls to the options)booleanfalse
valueundefinedstring[][]

Properties

NameAttributeDescriptionTypeDefault
autocompleteautocompleteSets the typeahead functionality for filtering the list.booleanfalse
caseSensitivecaseSensitiveWhether the autocomplete filtering should be case sensitivebooleanundefined
concatenatedconcatenatedSets that the items should display concatenated rather than the default bubbled.booleanfalse
delimiterdelimiterIf multi and concatenated are set to true, this value is used to concatenate the text for each of the selected values into the input element.string", "
multimultiWhether the select should allow multiple selection.booleanfalse
namenameThe name of the select element. Used for forms.string""
labellabelThe label for the element.string""
limitToListlimitToListWhether the element is limited to the list provided, or if the user should be allowed to enter their own value.booleanfalse
placeholderplaceholderThe `placeholder` attribute on the input element.string""
loadingloadingSets the element as in a loading state (used for async calls to the options)booleanfalse
valuevalueundefinedstring[][]
itemsundefinedReturns the items on the ActListElement.ActListItemElement[]undefined
listElementundefinedReturns the ActListElement in the ActMenuElement.ActListElementundefined
selectedItemsundefinedReturns the selected items from the ActListElement.ActListItemElement[]undefined
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

Events

NameDescription
blurundefined
focusundefined

API

<awc-tab>

An Act! Web Component Tab Element.

Attributes

NameDescriptionTypeDefault
hrefUsed when the tab should route to a new pagestring | nullundefined
labelSets the label for the tab item in the selection liststring""
nameUsed for routingstring""
noPagePaddingWhether the tab will have page padding styles appliedbooleanfalse

Properties

NameAttributeDescriptionTypeDefault
hrefhrefUsed when the tab should route to a new pagestring | nullundefined
labellabelSets the label for the tab item in the selection liststring""
namenameUsed for routingstring""
noPagePaddingnoPagePaddingWhether the tab will have page padding styles appliedbooleanfalse
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

Events

NameDescription
tabrenderedExample Usage: <awc-tab></awc-tab>

API

<awc-table>

An Act! Web Component Table Element. The table element displays as a 12 column grid. The grid can be used to position your cells hows you would like. Furthermore, the 12 grid alignment allows for customization of the grid columns by the user via drag functionality. NOTE: If you want a header, you need to add the `awc-table-header` element to the `awc-table` as a slot item. You can attach the table to a header in a different location utilizing the `for` attribute and passing the `awc-table` id to it.

Attributes

NameDescriptionTypeDefault
columnDefinitionsundefinedActTableColumnDefinitionElement[][]
dataundefinedarray[]
gridColumnsundefinednumber"COLUMNS"
headerElementundefinedActTableHeaderElement | nullundefined
loadingundefinedbooleanfalse
triggerThresholdundefinednumber75

Properties

NameAttributeDescriptionTypeDefault
columnDefinitionscolumnDefinitionsundefinedActTableColumnDefinitionElement[][]
datadataundefinedarray[]
gridColumnsgridColumnsundefinednumber"COLUMNS"
headerElementheaderElementundefinedActTableHeaderElement | nullundefined
loadingloadingundefinedbooleanfalse
triggerThresholdtriggerThresholdundefinednumber75
emptySlotElementundefinedundefinedHTMLSlotElementundefined
loadingElementundefinedundefinedActLoadingElementundefined
slotElementundefinedundefinedHTMLSlotElementundefined
keyFunctionundefinedundefined(data: any) => any"(data: any) => data.id"
showingColumnDefinitionsundefinedundefinedActTableColumnDefinitionElement[]undefined
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

Events

NameDescription
itemselectundefined
scrolltriggerExample Usage: <awc-table></awc-table>
rowselectundefined

API

<awc-table-column-definition>

An Act! Web Component Table Column Definition Element.

Attributes

NameDescriptionTypeDefault
activeundefinedbooleanfalse
cellConditionalundefinedbooleanfalse
columnSelectableundefinedbooleanfalse
columnSelectionHeaderundefinedbooleanfalse
columnSortundefinedActTableColumnSortDirection"none"
columnSpanundefinednumber1
columnStartundefinednumber12
fixedWhether the column can be de-selected (fixed = true cannot de-select)booleanfalse
fixedSpanFixes the value of the span for the grid columnbooleanfalse
hiddenundefinedbooleanfalse
nameundefinedstring""
orderundefinednumber12
propertyundefinedstring | nullundefined

Properties

NameAttributeDescriptionTypeDefault
activeactiveundefinedbooleanfalse
cellConditionalcellConditionalundefinedbooleanfalse
columnSelectablecolumnSelectableundefinedbooleanfalse
columnSelectionHeadercolumnSelectionHeaderundefinedbooleanfalse
columnSortcolumnSortundefinedActTableColumnSortDirection"none"
columnSpancolumnSpanundefinednumber1
columnStartcolumnStartundefinednumber12
fixedfixedWhether the column can be de-selected (fixed = true cannot de-select)booleanfalse
fixedSpanfixedSpanFixes the value of the span for the grid columnbooleanfalse
hiddenhiddenundefinedbooleanfalse
namenameundefinedstring""
orderorderundefinednumber12
propertypropertyundefinedstring | nullundefined
cellElementsundefinedundefinedHTMLElement[]undefined
headerElementsundefinedundefinedHTMLElement[]undefined
headerTextundefinedundefinedstring | nullundefined
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

Events

NameDescription
columnselectExample Usage: <awc-table-column-definition></awc-table-column-definition>
tabledefinitionrenderundefined
tabledefinitionupdateundefined
elementclickundefined

API

<awc-table-column-selection>

An Act! Web Component TableColumnSelection Element.

Attributes

NameDescriptionTypeDefault
columnsundefinedActTableColumnDefinitionElement[][]

Properties

NameAttributeDescriptionTypeDefault
columnscolumnsundefinedActTableColumnDefinitionElement[][]
iconButtonElementundefinedundefinedActIconButtonElementundefined
menuElementundefinedundefinedActMenuElementundefined
itemsundefinedReturns the items on the ActListElement.ActListItemElement[]undefined
listElementundefinedReturns the ActListElement in the ActMenuElement.ActListElementundefined
selectedItemsundefinedReturns the selected items from the ActListElement.ActListItemElement[]undefined
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

Events

NameDescription
columnselectExample Usage: <awc-table-column-selection></awc-table-column-selection>
tablecolumnselectionrenderundefined

API

<awc-table-header>

An Act! Web Component Table Header Element.

Attributes

NameDescriptionTypeDefault
columnDefinitionsundefinedActTableColumnDefinitionElement[][]
forundefinedstring | nullundefined

Properties

NameAttributeDescriptionTypeDefault
columnDefinitionscolumnDefinitionsundefinedActTableColumnDefinitionElement[][]
forforundefinedstring | nullundefined
columnSelectionElementundefinedundefinedActTableColumnSelectionElementundefined
columnHeaderListundefinedundefinedHTMLElementundefined
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

Events

NameDescription
columnchangeundefined
columnselectundefined
columnsortExample Usage: <awc-table-header></awc-table-header>
headerrenderundefined

API

<awc-tabs>

An Act! Web Component Tabs Element.

Attributes

NameDescriptionTypeDefault
tabsThe ActTabElements rendered by this element.ActTabElement[][]
verticalFlag to show the tabs as vertical, next to the content.booleanfalse
viewIndexThe current index of the tab that is viewed.number0

Properties

NameAttributeDescriptionTypeDefault
tabstabsThe ActTabElements rendered by this element.ActTabElement[][]
verticalverticalFlag to show the tabs as vertical, next to the content.booleanfalse
viewIndexviewIndexThe current index of the tab that is viewed.number0
tabsListIndicatorundefinedThe indicator displayed when the tabs are in horizontal positioning.HTMLElementundefined
tabsListundefinedThe list of tab labels used for tab selection.HTMLElementundefined
currentTabundefinedReturns the currently viewed ActTabElement.ActTabElement | nullundefined
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined

Events

NameDescription
tabchangeExample Usage: <awc-tabs></awc-tabs>

API

<awc-virtual-scroll>

An Act! Web Component VirtualScroll Element. Example Usage: <awc-virtual-scroll></awc-virtual-scroll>

Properties

NameAttributeDescriptionTypeDefault
renderRootundefinedNode or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot.HTMLElement | ShadowRootundefined
isUpdatePendingundefinedundefinedbooleanundefined
hasUpdatedundefinedundefinedbooleanundefined
updateCompleteundefinedReturns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is `true` if the element completed the update without triggering another update. The Promise result is `false` if a property was set inside `updated()`. If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the `getUpdateComplete` method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await `super.getUpdateComplete()`, then any subsequent state.Promiseundefined