npm - @ukho/admiralty-core - Versions diffs - 0.4.6 → 0.5.0 - Mend

@ukho/admiralty-core 0.4.6 → 0.5.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.

Files changed (97) hide show

package/dist/cjs/admiralty.cjs.js CHANGED Viewed

@@ -20,7 +20,7 @@ const patchBrowser = () => {
 };
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["admiralty-type-ahead.cjs",[[6,"admiralty-type-ahead",{"value":[1],"label":[1],"hint":[1],"placeholder":[1],"resultsOnInitFocus":[4,"results-on-init-focus"],"filterResult":[32]}]]],["admiralty-select.cjs",[[6,"admiralty-select",{"disabled":[4],"error":[4],"errorHint":[1,"error-hint"],"hint":[1],"label":[1],"width":[2],"value":[1032]}]]],["admiralty-textarea.cjs",[[2,"admiralty-textarea",{"label":[1],"hint":[1],"width":[2],"maxLength":[2,"max-length"],"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"value":[1032]}]]],["admiralty-colour-block.cjs",[[6,"admiralty-colour-block",{"width":[2],"height":[2],"heading":[1],"colour":[1],"clickAction":[16],"actionText":[1,"action-text"]}]]],["admiralty-filter.cjs",[[6,"admiralty-filter",{"filterTitle":[1,"filter-title"]}]]],["admiralty-filter-group.cjs",[[6,"admiralty-filter-group",{"groupTitle":[1,"group-title"]}]]],["admiralty-paginator.cjs",[[2,"admiralty-paginator",{"pages":[2],"currentPage":[2,"current-page"],"label":[1]}]]],["admiralty-radio-group.cjs",[[6,"admiralty-radio-group",{"name":[1],"value":[1032],"displayVertical":[4,"display-vertical"],"invalid":[4],"invalidMessage":[1,"invalid-message"]}]]],["admiralty-breadcrumb.cjs",[[6,"admiralty-breadcrumb",{"active":[4],"first":[4],"href":[1]}]]],["admiralty-dialogue.cjs",[[6,"admiralty-dialogue",{"type":[1],"heading":[1]}]]],["admiralty-file-input.cjs",[[2,"admiralty-file-input",{"label":[1],"multiple":[4],"files":[32]}]]],["admiralty-header.cjs",[[6,"admiralty-header",{"headerTitle":[1,"header-title"],"headerTitleUrl":[1,"header-title-url"],"logoLinkUrl":[1,"logo-link-url"],"logoImgUrl":[1,"logo-img-url"],"logoAltText":[1,"logo-alt-text"],"mobileMenuOpen":[32],"displayHamburger":[32]}]]],["admiralty-progress-bar.cjs",[[2,"admiralty-progress-bar",{"label":[1],"progression":[2],"error":[4],"progressionValue":[32]}]]],["admiralty-read-more.cjs",[[6,"admiralty-read-more",{"heading":[1],"expanded":[32]}]]],["admiralty-breadcrumbs.cjs",[[6,"admiralty-breadcrumbs"]]],["admiralty-card.cjs",[[6,"admiralty-card",{"heading":[1]}]]],["admiralty-checkbox.cjs",[[2,"admiralty-checkbox",{"checkboxRight":[4,"checkbox-right"],"disabled":[4],"name":[1],"checked":[1028],"value":[8],"labelText":[1,"label-text"]}]]],["admiralty-footer.cjs",[[6,"admiralty-footer",{"imageLink":[1,"image-link"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"text":[1]}]]],["admiralty-header-menu-item.cjs",[[6,"admiralty-header-menu-item",{"menuTitle":[1,"menu-title"],"active":[4]}]]],["admiralty-header-profile.cjs",[[2,"admiralty-header-profile",{"isSignedIn":[4,"is-signed-in"],"signedInText":[1,"signed-in-text"]}]]],["admiralty-header-sub-menu-item.cjs",[[2,"admiralty-header-sub-menu-item",{"menuTitle":[1,"menu-title"]}]]],["admiralty-hr.cjs",[[2,"admiralty-hr"]]],["admiralty-link.cjs",[[6,"admiralty-link",{"href":[1],"newTab":[4,"new-tab"]}]]],["admiralty-paginator-wrapper.cjs",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["admiralty-phase-banner.cjs",[[2,"admiralty-phase-banner",{"phase":[1],"link":[1]}]]],["admiralty-radio.cjs",[[6,"admiralty-radio",{"name":[1],"value":[1025],"disabled":[4],"checked":[1028],"invalid":[4],"buttonTabindex":[32],"setButtonTabindex":[64]}]]],["admiralty-side-nav.cjs",[[6,"admiralty-side-nav",{"label":[1]}]]],["admiralty-side-nav-item.cjs",[[2,"admiralty-side-nav-item",{"sideNavItemId":[1,"side-nav-item-id"],"headingTitle":[1,"heading-title"],"navActive":[4,"nav-active"]}]]],["admiralty-side-nav-wrapper.cjs",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["admiralty-tab.cjs",[[6,"admiralty-tab",{"label":[1],"tabLabelId":[1,"tab-label-id"],"tabContentId":[1,"tab-content-id"]}]]],["admiralty-tab-group.cjs",[[6,"admiralty-tab-group",{"selectedIndex":[1026,"selected-index"]}]]],["admiralty-table.cjs",[[6,"admiralty-table",{"caption":[1]}]]],["admiralty-table-body.cjs",[[6,"admiralty-table-body"]]],["admiralty-table-cell.cjs",[[6,"admiralty-table-cell"]]],["admiralty-table-header.cjs",[[6,"admiralty-table-header"]]],["admiralty-table-header-cell.cjs",[[6,"admiralty-table-header-cell"]]],["admiralty-table-row.cjs",[[6,"admiralty-table-row"]]],["admiralty-type-ahead-item.cjs",[[2,"admiralty-type-ahead-item",{"value":[1]}]]],["admiralty-icon.cjs",[[1,"admiralty-icon",{"iconName":[1,"icon-name"],"iconPrefix":[1,"icon-prefix"]}]]],["admiralty-input.cjs",[[2,"admiralty-input",{"name":[1],"label":[1],"hint":[1],"disabled":[4],"type":[1],"placeholder":[1],"width":[2],"maxLength":[2,"max-length"],"required":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"autocomplete":[1],"value":[1032]}]]],["admiralty-expansion.cjs",[[6,"admiralty-expansion",{"heading":[1],"expanded":[1540],"alignHeadingRight":[4,"align-heading-right"],"hideBorder":[4,"hide-border"]}]]],["admiralty-button.cjs",[[6,"admiralty-button",{"variant":[1],"icon":[1],"disabled":[516],"type":[1]}]]],["admiralty-hint_3.cjs",[[6,"admiralty-hint",{"disabled":[4]}],[6,"admiralty-input-error"],[6,"admiralty-label",{"disabled":[4],"for":[1]}]]]], options);
+  return index.bootstrapLazy([["admiralty-type-ahead.cjs",[[6,"admiralty-type-ahead",{"value":[1],"label":[1],"hint":[1],"placeholder":[1],"resultsOnInitFocus":[4,"results-on-init-focus"],"filterResult":[32]}]]],["admiralty-select.cjs",[[6,"admiralty-select",{"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"hint":[1],"label":[1],"width":[2],"value":[1032]}]]],["admiralty-textarea.cjs",[[2,"admiralty-textarea",{"label":[1],"hint":[1],"width":[2],"maxLength":[2,"max-length"],"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"value":[1032]}]]],["admiralty-colour-block.cjs",[[6,"admiralty-colour-block",{"width":[2],"height":[2],"heading":[1],"colour":[1],"clickAction":[16],"actionText":[1,"action-text"]}]]],["admiralty-filter.cjs",[[6,"admiralty-filter",{"filterTitle":[1,"filter-title"]}]]],["admiralty-filter-group.cjs",[[6,"admiralty-filter-group",{"groupTitle":[1,"group-title"]}]]],["admiralty-paginator.cjs",[[2,"admiralty-paginator",{"pages":[2],"currentPage":[2,"current-page"],"label":[1]}]]],["admiralty-radio-group.cjs",[[6,"admiralty-radio-group",{"name":[1],"value":[1032],"displayVertical":[4,"display-vertical"],"invalid":[4],"invalidMessage":[1,"invalid-message"]}]]],["admiralty-breadcrumb.cjs",[[6,"admiralty-breadcrumb",{"active":[4],"first":[4],"href":[1]}]]],["admiralty-dialogue.cjs",[[6,"admiralty-dialogue",{"type":[1],"heading":[1]}]]],["admiralty-file-input.cjs",[[2,"admiralty-file-input",{"label":[1],"multiple":[4],"files":[32]}]]],["admiralty-header.cjs",[[6,"admiralty-header",{"headerTitle":[1,"header-title"],"headerTitleUrl":[1,"header-title-url"],"logoLinkUrl":[1,"logo-link-url"],"logoImgUrl":[1,"logo-img-url"],"logoAltText":[1,"logo-alt-text"],"mobileMenuOpen":[32],"displayHamburger":[32]}]]],["admiralty-progress-bar.cjs",[[2,"admiralty-progress-bar",{"label":[1],"progression":[2],"error":[4],"progressionValue":[32]}]]],["admiralty-read-more.cjs",[[6,"admiralty-read-more",{"heading":[1],"expanded":[32]}]]],["admiralty-breadcrumbs.cjs",[[6,"admiralty-breadcrumbs"]]],["admiralty-card.cjs",[[6,"admiralty-card",{"heading":[1]}]]],["admiralty-checkbox.cjs",[[2,"admiralty-checkbox",{"checkboxRight":[4,"checkbox-right"],"disabled":[4],"name":[1],"checked":[1028],"value":[8],"labelText":[1,"label-text"]}]]],["admiralty-footer.cjs",[[6,"admiralty-footer",{"imageLink":[1,"image-link"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"text":[1]}]]],["admiralty-header-menu-item.cjs",[[6,"admiralty-header-menu-item",{"menuTitle":[1,"menu-title"],"active":[4]}]]],["admiralty-header-profile.cjs",[[2,"admiralty-header-profile",{"isSignedIn":[4,"is-signed-in"],"signedInText":[1,"signed-in-text"]}]]],["admiralty-header-sub-menu-item.cjs",[[2,"admiralty-header-sub-menu-item",{"menuTitle":[1,"menu-title"]}]]],["admiralty-hr.cjs",[[2,"admiralty-hr"]]],["admiralty-link.cjs",[[6,"admiralty-link",{"href":[1],"newTab":[4,"new-tab"]}]]],["admiralty-paginator-wrapper.cjs",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["admiralty-phase-banner.cjs",[[2,"admiralty-phase-banner",{"phase":[1],"link":[1]}]]],["admiralty-radio.cjs",[[6,"admiralty-radio",{"name":[1],"value":[1025],"disabled":[4],"checked":[1028],"invalid":[4],"buttonTabindex":[32],"setButtonTabindex":[64]}]]],["admiralty-side-nav.cjs",[[6,"admiralty-side-nav",{"label":[1]}]]],["admiralty-side-nav-item.cjs",[[2,"admiralty-side-nav-item",{"sideNavItemId":[1,"side-nav-item-id"],"headingTitle":[1,"heading-title"],"navActive":[4,"nav-active"]}]]],["admiralty-side-nav-wrapper.cjs",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["admiralty-tab.cjs",[[6,"admiralty-tab",{"label":[1],"tabLabelId":[1,"tab-label-id"],"tabContentId":[1,"tab-content-id"]}]]],["admiralty-tab-group.cjs",[[6,"admiralty-tab-group",{"selectedIndex":[1026,"selected-index"]}]]],["admiralty-table.cjs",[[6,"admiralty-table",{"caption":[1]}]]],["admiralty-table-body.cjs",[[6,"admiralty-table-body"]]],["admiralty-table-cell.cjs",[[6,"admiralty-table-cell"]]],["admiralty-table-header.cjs",[[6,"admiralty-table-header"]]],["admiralty-table-header-cell.cjs",[[6,"admiralty-table-header-cell"]]],["admiralty-table-row.cjs",[[6,"admiralty-table-row"]]],["admiralty-type-ahead-item.cjs",[[2,"admiralty-type-ahead-item",{"value":[1]}]]],["admiralty-icon.cjs",[[1,"admiralty-icon",{"iconName":[1,"icon-name"],"iconPrefix":[1,"icon-prefix"]}]]],["admiralty-input.cjs",[[2,"admiralty-input",{"name":[1],"label":[1],"hint":[1],"disabled":[4],"type":[1],"placeholder":[1],"width":[2],"maxLength":[2,"max-length"],"required":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"autocomplete":[1],"value":[1032]}]]],["admiralty-expansion.cjs",[[6,"admiralty-expansion",{"heading":[1],"expanded":[1540],"alignHeadingRight":[4,"align-heading-right"],"hideBorder":[4,"hide-border"]}]]],["admiralty-button.cjs",[[6,"admiralty-button",{"variant":[1],"icon":[1],"disabled":[516],"type":[1]}]]],["admiralty-hint_3.cjs",[[6,"admiralty-hint",{"disabled":[4]}],[6,"admiralty-input-invalid"],[6,"admiralty-label",{"disabled":[4],"for":[1]}]]]], options);
 });
 exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js CHANGED Viewed

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["admiralty-type-ahead.cjs",[[6,"admiralty-type-ahead",{"value":[1],"label":[1],"hint":[1],"placeholder":[1],"resultsOnInitFocus":[4,"results-on-init-focus"],"filterResult":[32]}]]],["admiralty-select.cjs",[[6,"admiralty-select",{"disabled":[4],"error":[4],"errorHint":[1,"error-hint"],"hint":[1],"label":[1],"width":[2],"value":[1032]}]]],["admiralty-textarea.cjs",[[2,"admiralty-textarea",{"label":[1],"hint":[1],"width":[2],"maxLength":[2,"max-length"],"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"value":[1032]}]]],["admiralty-colour-block.cjs",[[6,"admiralty-colour-block",{"width":[2],"height":[2],"heading":[1],"colour":[1],"clickAction":[16],"actionText":[1,"action-text"]}]]],["admiralty-filter.cjs",[[6,"admiralty-filter",{"filterTitle":[1,"filter-title"]}]]],["admiralty-filter-group.cjs",[[6,"admiralty-filter-group",{"groupTitle":[1,"group-title"]}]]],["admiralty-paginator.cjs",[[2,"admiralty-paginator",{"pages":[2],"currentPage":[2,"current-page"],"label":[1]}]]],["admiralty-radio-group.cjs",[[6,"admiralty-radio-group",{"name":[1],"value":[1032],"displayVertical":[4,"display-vertical"],"invalid":[4],"invalidMessage":[1,"invalid-message"]}]]],["admiralty-breadcrumb.cjs",[[6,"admiralty-breadcrumb",{"active":[4],"first":[4],"href":[1]}]]],["admiralty-dialogue.cjs",[[6,"admiralty-dialogue",{"type":[1],"heading":[1]}]]],["admiralty-file-input.cjs",[[2,"admiralty-file-input",{"label":[1],"multiple":[4],"files":[32]}]]],["admiralty-header.cjs",[[6,"admiralty-header",{"headerTitle":[1,"header-title"],"headerTitleUrl":[1,"header-title-url"],"logoLinkUrl":[1,"logo-link-url"],"logoImgUrl":[1,"logo-img-url"],"logoAltText":[1,"logo-alt-text"],"mobileMenuOpen":[32],"displayHamburger":[32]}]]],["admiralty-progress-bar.cjs",[[2,"admiralty-progress-bar",{"label":[1],"progression":[2],"error":[4],"progressionValue":[32]}]]],["admiralty-read-more.cjs",[[6,"admiralty-read-more",{"heading":[1],"expanded":[32]}]]],["admiralty-breadcrumbs.cjs",[[6,"admiralty-breadcrumbs"]]],["admiralty-card.cjs",[[6,"admiralty-card",{"heading":[1]}]]],["admiralty-checkbox.cjs",[[2,"admiralty-checkbox",{"checkboxRight":[4,"checkbox-right"],"disabled":[4],"name":[1],"checked":[1028],"value":[8],"labelText":[1,"label-text"]}]]],["admiralty-footer.cjs",[[6,"admiralty-footer",{"imageLink":[1,"image-link"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"text":[1]}]]],["admiralty-header-menu-item.cjs",[[6,"admiralty-header-menu-item",{"menuTitle":[1,"menu-title"],"active":[4]}]]],["admiralty-header-profile.cjs",[[2,"admiralty-header-profile",{"isSignedIn":[4,"is-signed-in"],"signedInText":[1,"signed-in-text"]}]]],["admiralty-header-sub-menu-item.cjs",[[2,"admiralty-header-sub-menu-item",{"menuTitle":[1,"menu-title"]}]]],["admiralty-hr.cjs",[[2,"admiralty-hr"]]],["admiralty-link.cjs",[[6,"admiralty-link",{"href":[1],"newTab":[4,"new-tab"]}]]],["admiralty-paginator-wrapper.cjs",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["admiralty-phase-banner.cjs",[[2,"admiralty-phase-banner",{"phase":[1],"link":[1]}]]],["admiralty-radio.cjs",[[6,"admiralty-radio",{"name":[1],"value":[1025],"disabled":[4],"checked":[1028],"invalid":[4],"buttonTabindex":[32],"setButtonTabindex":[64]}]]],["admiralty-side-nav.cjs",[[6,"admiralty-side-nav",{"label":[1]}]]],["admiralty-side-nav-item.cjs",[[2,"admiralty-side-nav-item",{"sideNavItemId":[1,"side-nav-item-id"],"headingTitle":[1,"heading-title"],"navActive":[4,"nav-active"]}]]],["admiralty-side-nav-wrapper.cjs",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["admiralty-tab.cjs",[[6,"admiralty-tab",{"label":[1],"tabLabelId":[1,"tab-label-id"],"tabContentId":[1,"tab-content-id"]}]]],["admiralty-tab-group.cjs",[[6,"admiralty-tab-group",{"selectedIndex":[1026,"selected-index"]}]]],["admiralty-table.cjs",[[6,"admiralty-table",{"caption":[1]}]]],["admiralty-table-body.cjs",[[6,"admiralty-table-body"]]],["admiralty-table-cell.cjs",[[6,"admiralty-table-cell"]]],["admiralty-table-header.cjs",[[6,"admiralty-table-header"]]],["admiralty-table-header-cell.cjs",[[6,"admiralty-table-header-cell"]]],["admiralty-table-row.cjs",[[6,"admiralty-table-row"]]],["admiralty-type-ahead-item.cjs",[[2,"admiralty-type-ahead-item",{"value":[1]}]]],["admiralty-icon.cjs",[[1,"admiralty-icon",{"iconName":[1,"icon-name"],"iconPrefix":[1,"icon-prefix"]}]]],["admiralty-input.cjs",[[2,"admiralty-input",{"name":[1],"label":[1],"hint":[1],"disabled":[4],"type":[1],"placeholder":[1],"width":[2],"maxLength":[2,"max-length"],"required":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"autocomplete":[1],"value":[1032]}]]],["admiralty-expansion.cjs",[[6,"admiralty-expansion",{"heading":[1],"expanded":[1540],"alignHeadingRight":[4,"align-heading-right"],"hideBorder":[4,"hide-border"]}]]],["admiralty-button.cjs",[[6,"admiralty-button",{"variant":[1],"icon":[1],"disabled":[516],"type":[1]}]]],["admiralty-hint_3.cjs",[[6,"admiralty-hint",{"disabled":[4]}],[6,"admiralty-input-error"],[6,"admiralty-label",{"disabled":[4],"for":[1]}]]]], options);
+  return index.bootstrapLazy([["admiralty-type-ahead.cjs",[[6,"admiralty-type-ahead",{"value":[1],"label":[1],"hint":[1],"placeholder":[1],"resultsOnInitFocus":[4,"results-on-init-focus"],"filterResult":[32]}]]],["admiralty-select.cjs",[[6,"admiralty-select",{"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"hint":[1],"label":[1],"width":[2],"value":[1032]}]]],["admiralty-textarea.cjs",[[2,"admiralty-textarea",{"label":[1],"hint":[1],"width":[2],"maxLength":[2,"max-length"],"disabled":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"value":[1032]}]]],["admiralty-colour-block.cjs",[[6,"admiralty-colour-block",{"width":[2],"height":[2],"heading":[1],"colour":[1],"clickAction":[16],"actionText":[1,"action-text"]}]]],["admiralty-filter.cjs",[[6,"admiralty-filter",{"filterTitle":[1,"filter-title"]}]]],["admiralty-filter-group.cjs",[[6,"admiralty-filter-group",{"groupTitle":[1,"group-title"]}]]],["admiralty-paginator.cjs",[[2,"admiralty-paginator",{"pages":[2],"currentPage":[2,"current-page"],"label":[1]}]]],["admiralty-radio-group.cjs",[[6,"admiralty-radio-group",{"name":[1],"value":[1032],"displayVertical":[4,"display-vertical"],"invalid":[4],"invalidMessage":[1,"invalid-message"]}]]],["admiralty-breadcrumb.cjs",[[6,"admiralty-breadcrumb",{"active":[4],"first":[4],"href":[1]}]]],["admiralty-dialogue.cjs",[[6,"admiralty-dialogue",{"type":[1],"heading":[1]}]]],["admiralty-file-input.cjs",[[2,"admiralty-file-input",{"label":[1],"multiple":[4],"files":[32]}]]],["admiralty-header.cjs",[[6,"admiralty-header",{"headerTitle":[1,"header-title"],"headerTitleUrl":[1,"header-title-url"],"logoLinkUrl":[1,"logo-link-url"],"logoImgUrl":[1,"logo-img-url"],"logoAltText":[1,"logo-alt-text"],"mobileMenuOpen":[32],"displayHamburger":[32]}]]],["admiralty-progress-bar.cjs",[[2,"admiralty-progress-bar",{"label":[1],"progression":[2],"error":[4],"progressionValue":[32]}]]],["admiralty-read-more.cjs",[[6,"admiralty-read-more",{"heading":[1],"expanded":[32]}]]],["admiralty-breadcrumbs.cjs",[[6,"admiralty-breadcrumbs"]]],["admiralty-card.cjs",[[6,"admiralty-card",{"heading":[1]}]]],["admiralty-checkbox.cjs",[[2,"admiralty-checkbox",{"checkboxRight":[4,"checkbox-right"],"disabled":[4],"name":[1],"checked":[1028],"value":[8],"labelText":[1,"label-text"]}]]],["admiralty-footer.cjs",[[6,"admiralty-footer",{"imageLink":[1,"image-link"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"text":[1]}]]],["admiralty-header-menu-item.cjs",[[6,"admiralty-header-menu-item",{"menuTitle":[1,"menu-title"],"active":[4]}]]],["admiralty-header-profile.cjs",[[2,"admiralty-header-profile",{"isSignedIn":[4,"is-signed-in"],"signedInText":[1,"signed-in-text"]}]]],["admiralty-header-sub-menu-item.cjs",[[2,"admiralty-header-sub-menu-item",{"menuTitle":[1,"menu-title"]}]]],["admiralty-hr.cjs",[[2,"admiralty-hr"]]],["admiralty-link.cjs",[[6,"admiralty-link",{"href":[1],"newTab":[4,"new-tab"]}]]],["admiralty-paginator-wrapper.cjs",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["admiralty-phase-banner.cjs",[[2,"admiralty-phase-banner",{"phase":[1],"link":[1]}]]],["admiralty-radio.cjs",[[6,"admiralty-radio",{"name":[1],"value":[1025],"disabled":[4],"checked":[1028],"invalid":[4],"buttonTabindex":[32],"setButtonTabindex":[64]}]]],["admiralty-side-nav.cjs",[[6,"admiralty-side-nav",{"label":[1]}]]],["admiralty-side-nav-item.cjs",[[2,"admiralty-side-nav-item",{"sideNavItemId":[1,"side-nav-item-id"],"headingTitle":[1,"heading-title"],"navActive":[4,"nav-active"]}]]],["admiralty-side-nav-wrapper.cjs",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["admiralty-tab.cjs",[[6,"admiralty-tab",{"label":[1],"tabLabelId":[1,"tab-label-id"],"tabContentId":[1,"tab-content-id"]}]]],["admiralty-tab-group.cjs",[[6,"admiralty-tab-group",{"selectedIndex":[1026,"selected-index"]}]]],["admiralty-table.cjs",[[6,"admiralty-table",{"caption":[1]}]]],["admiralty-table-body.cjs",[[6,"admiralty-table-body"]]],["admiralty-table-cell.cjs",[[6,"admiralty-table-cell"]]],["admiralty-table-header.cjs",[[6,"admiralty-table-header"]]],["admiralty-table-header-cell.cjs",[[6,"admiralty-table-header-cell"]]],["admiralty-table-row.cjs",[[6,"admiralty-table-row"]]],["admiralty-type-ahead-item.cjs",[[2,"admiralty-type-ahead-item",{"value":[1]}]]],["admiralty-icon.cjs",[[1,"admiralty-icon",{"iconName":[1,"icon-name"],"iconPrefix":[1,"icon-prefix"]}]]],["admiralty-input.cjs",[[2,"admiralty-input",{"name":[1],"label":[1],"hint":[1],"disabled":[4],"type":[1],"placeholder":[1],"width":[2],"maxLength":[2,"max-length"],"required":[4],"invalid":[4],"invalidMessage":[1,"invalid-message"],"autocomplete":[1],"value":[1032]}]]],["admiralty-expansion.cjs",[[6,"admiralty-expansion",{"heading":[1],"expanded":[1540],"alignHeadingRight":[4,"align-heading-right"],"hideBorder":[4,"hide-border"]}]]],["admiralty-button.cjs",[[6,"admiralty-button",{"variant":[1],"icon":[1],"disabled":[516],"type":[1]}]]],["admiralty-hint_3.cjs",[[6,"admiralty-hint",{"disabled":[4]}],[6,"admiralty-input-invalid"],[6,"admiralty-label",{"disabled":[4],"for":[1]}]]]], options);
   });
 };

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -21,7 +21,7 @@
     "./components/horizontal-rule/horizontal-rule.js",
     "./components/icon/icon.js",
     "./components/input/input.js",
-    "./components/input-error/input-error.js",
+    "./components/input-invalid/input-invalid.js",
     "./components/label/label.js",
     "./components/paginator/paginator.js",
     "./components/paginator/paginator.stories.data.js",

package/dist/collection/components/input/input.css CHANGED Viewed

@@ -47,6 +47,6 @@
   border-color: #adadad;
   background: #ffffff;
 }
-.text-input-container admiralty-input-error {
+.text-input-container admiralty-input-invalid {
   margin-top: 6px;
 }

package/dist/collection/components/input/input.js CHANGED Viewed

@@ -46,7 +46,7 @@ export class InputComponent {
     const value = this.getValue();
     return (h("div", { class: "text-input-container" }, this.label ? (h("admiralty-label", { disabled: this.disabled, for: this.inputId }, this.label)) : null, this.hint ? h("admiralty-hint", { disabled: this.disabled }, this.hint) : null, h("input", { ref: input => (this.nativeInput = input), class: { disabled: this.disabled, invalid: this.invalid }, disabled: this.disabled, id: this.inputId, name: this.name, type: this.type, value: value, maxLength: this.maxLength, onInput: this.onInput, placeholder: this.placeholder, autoComplete: this.autocomplete, required: this.required, style: {
         maxWidth: this.width ? `${this.width}px` : null,
-      } }), h("admiralty-input-error", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
+      } }), h("admiralty-input-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage)));
   }
   static get is() { return "admiralty-input"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGnG;;;;;GAKG;AAOH,MAAM,OAAO,cAAc;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS,EAAE,EAAE;MAC9B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;IACH,CAAC,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;EAO5D;;KAEG;EAEO,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;EACpG,CAAC;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;EAChG,CAAC;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,OAAO,CACL,WAAK,KAAK,EAAC,sBAAsB;MAC9B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,CACnB,CAAC,CAAC,CAAC,IAAI;MACP,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,CAAC,CAAC,CAAC,IAAI;MACzF,aACE,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;UACL,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI;SAChD,GACD;MACF,~~6BAAuB,~~KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,~~CAAyB~~,~~CACnJ~~,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AACD,IAAI,MAAM,GAAG,CAAC,CAAC","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/*\n Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n /\n\n@Component({\n tag: 'admiralty-input',\n styleUrl: 'input.scss',\n scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n inputId: string = `admiralty-input-${++nextId}`;\n\n private nativeInput?: HTMLInputElement;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n /\n The label which will be used above the input to describe the input.\n /\n @Prop() label: string;\n\n /\n The hint which will be used under the label to describe the input.\n /\n @Prop() hint: string;\n\n /\n This dictates whether the form field is disabled.\n /\n @Prop() disabled = false;\n\n /\n The input type, options are: `text \| date \| time \| email \| password \| tel \| url`\n /\n @Prop() type: 'text' \| 'date' \| 'time' \| 'email' \| 'password' \| 'tel' \| 'url' = 'text';\n\n /\n The placeholder text to show in the input\n /\n @Prop() placeholder: string;\n\n /\n The maximum width for the input field.\n /\n @Prop() width: number;\n\n /\n The maximum string length for the input field.\n /\n @Prop() maxLength?: number;\n\n /\n This dictates whether the input is required or not\n /\n @Prop() required: boolean = false;\n\n /\n Whether to show the input in an invalid state\n /\n @Prop() invalid: boolean = false;\n\n /\n The message to show when the input is invalid\n /\n @Prop() invalidMessage: string;\n\n /\n Indicates whether the value of the control can be automatically completed by the browser.\n /\n @Prop() autocomplete: string = 'off';\n\n /\n The value of the input.\n /\n @Prop({ mutable: true }) value?: string \| number \| null = '';\n\n /\n Emitted when the value has changed.\n /\n @Event() admiraltyInput: EventEmitter<InputChangeEventDetail>;\n\n /\n Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n if (nativeInput && nativeInput.value !== value) {\n nativeInput.value = value;\n }\n this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement \| null;\n if (input) {\n this.value = input.value \|\| '';\n }\n };\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value \|\| '').toString();\n }\n\n render() {\n const value = this.getValue();\n return (\n <div class=\"text-input-container\">\n {this.label ? (\n <admiralty-label disabled={this.disabled} for={this.inputId}>\n {this.label}\n </admiralty-label>\n ) : null}\n {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n <input\n ref={input => (this.nativeInput = input)}\n class={{ disabled: this.disabled, invalid: this.invalid }}\n disabled={this.disabled}\n id={this.inputId}\n name={this.name}\n type={this.type}\n value={value}\n maxLength={this.maxLength}\n onInput={this.onInput}\n placeholder={this.placeholder}\n autoComplete={this.autocomplete}\n required={this.required}\n style={{\n maxWidth: this.width ? `${this.width}px` : null,\n }}\n />\n <admiralty-input-~~error~~ style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-~~error~~>\n </div>\n );\n }\n}\nlet nextId = 0;\n"]}
1	+ {"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGnG;;;;;GAKG;AAOH,MAAM,OAAO,cAAc;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS,EAAE,EAAE;MAC9B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;IACH,CAAC,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;EAO5D;;KAEG;EAEO,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;EACpG,CAAC;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;EAChG,CAAC;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,OAAO,CACL,WAAK,KAAK,EAAC,sBAAsB;MAC9B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,CACnB,CAAC,CAAC,CAAC,IAAI;MACP,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,CAAC,CAAC,CAAC,IAAI;MACzF,aACE,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;UACL,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI;SAChD,GACD;MACF,+BAAyB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAA2B,CACvJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AACD,IAAI,MAAM,GAAG,CAAC,CAAC","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/*\n Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n /\n\n@Component({\n tag: 'admiralty-input',\n styleUrl: 'input.scss',\n scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n inputId: string = `admiralty-input-${++nextId}`;\n\n private nativeInput?: HTMLInputElement;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n /\n The label which will be used above the input to describe the input.\n /\n @Prop() label: string;\n\n /\n The hint which will be used under the label to describe the input.\n /\n @Prop() hint: string;\n\n /\n This dictates whether the form field is disabled.\n /\n @Prop() disabled = false;\n\n /\n The input type, options are: `text \| date \| time \| email \| password \| tel \| url`\n /\n @Prop() type: 'text' \| 'date' \| 'time' \| 'email' \| 'password' \| 'tel' \| 'url' = 'text';\n\n /\n The placeholder text to show in the input\n /\n @Prop() placeholder: string;\n\n /\n The maximum width for the input field.\n /\n @Prop() width: number;\n\n /\n The maximum string length for the input field.\n /\n @Prop() maxLength?: number;\n\n /\n This dictates whether the input is required or not\n /\n @Prop() required: boolean = false;\n\n /\n Whether to show the input in an invalid state\n /\n @Prop() invalid: boolean = false;\n\n /\n The message to show when the input is invalid\n /\n @Prop() invalidMessage: string;\n\n /\n Indicates whether the value of the control can be automatically completed by the browser.\n /\n @Prop() autocomplete: string = 'off';\n\n /\n The value of the input.\n /\n @Prop({ mutable: true }) value?: string \| number \| null = '';\n\n /\n Emitted when the value has changed.\n /\n @Event() admiraltyInput: EventEmitter<InputChangeEventDetail>;\n\n /\n Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n if (nativeInput && nativeInput.value !== value) {\n nativeInput.value = value;\n }\n this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement \| null;\n if (input) {\n this.value = input.value \|\| '';\n }\n };\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value \|\| '').toString();\n }\n\n render() {\n const value = this.getValue();\n return (\n <div class=\"text-input-container\">\n {this.label ? (\n <admiralty-label disabled={this.disabled} for={this.inputId}>\n {this.label}\n </admiralty-label>\n ) : null}\n {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n <input\n ref={input => (this.nativeInput = input)}\n class={{ disabled: this.disabled, invalid: this.invalid }}\n disabled={this.disabled}\n id={this.inputId}\n name={this.name}\n type={this.type}\n value={value}\n maxLength={this.maxLength}\n onInput={this.onInput}\n placeholder={this.placeholder}\n autoComplete={this.autocomplete}\n required={this.required}\n style={{\n maxWidth: this.width ? `${this.width}px` : null,\n }}\n />\n <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n </div>\n );\n }\n}\nlet nextId = 0;\n"]}

package/dist/collection/components/input/input.spec.js CHANGED Viewed

@@ -10,7 +10,7 @@ describe('admiralty-input', () => {
       <admiralty-input>
         <div class="text-input-container">
           <input autocomplete="off" id="admiralty-input-1" name="admiralty-input-1" type="text" value="">
-          <admiralty-input-error style="visibility: hidden;"></admiralty-input-error>
+          <admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
         </div>
       </admiralty-input>
     `);
@@ -25,7 +25,7 @@ describe('admiralty-input', () => {
         <div class="text-input-container">
           <admiralty-label for="admiralty-input-2">test-label</admiralty-label>
           <input autocomplete="off" id="admiralty-input-2" name="admiralty-input-2" type="text" value="">
-          <admiralty-input-error style="visibility: hidden;"></admiralty-input-error>
+          <admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
         </div>
       </admiralty-input>
     `);
@@ -39,7 +39,7 @@ describe('admiralty-input', () => {
       <admiralty-input disabled>
         <div class="text-input-container">
           <input disabled autocomplete="off" class="disabled" id="admiralty-input-3" name="admiralty-input-3" type="text" value="">
-          <admiralty-input-error style="visibility: hidden;"></admiralty-input-error>
+          <admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
         </div>
       </admiralty-input>
     `);
@@ -53,7 +53,7 @@ describe('admiralty-input', () => {
       <admiralty-input invalid="true">
         <div class="text-input-container">
           <input autocomplete="off" class="invalid" id="admiralty-input-4" name="admiralty-input-4" type="text" value="">
-          <admiralty-input-error style="visibility: hidden;"></admiralty-input-error>
+          <admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
         </div>
       </admiralty-input>
     `);
@@ -67,9 +67,9 @@ describe('admiralty-input', () => {
       <admiralty-input invalid="true" invalid-message="This is invalid!">
         <div class="text-input-container">
           <input autocomplete="off" class="invalid" id="admiralty-input-5" name="admiralty-input-5" type="text" value="">
-          <admiralty-input-error style="visibility: visible;">
+          <admiralty-input-invalid style="visibility: visible;">
             This is invalid!
-          </admiralty-input-error>
+          </admiralty-input-invalid>
         </div>
       </admiralty-input>
     `);
@@ -83,7 +83,7 @@ describe('admiralty-input', () => {
       <admiralty-input type="date">
         <div class="text-input-container">
           <input type="date" autocomplete="off" id="admiralty-input-6" name="admiralty-input-6" value="">
-          <admiralty-input-error style="visibility: hidden;"></admiralty-input-error>
+          <admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
         </div>
       </admiralty-input>
     `);
@@ -98,7 +98,7 @@ it('renders with maxlength', async () => {
     <admiralty-input max-length="1">
       <div class="text-input-container">
         <input autocomplete="off" class="" id="admiralty-input-7" maxlength="1" name="admiralty-input-7" type="text" value="">
-        <admiralty-input-error style="visibility: hidden;"></admiralty-input-error>
+        <admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
       </div>
     </admiralty-input>
   `);

package/dist/collection/components/input/input.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.spec.js","sourceRoot":"","sources":["../../../src/components/input/input.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;EAC/B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,qCAAqC;KAC5C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,wDAAwD;KAC/D,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kBAAkB,EAAE,KAAK,IAAI,EAAE;IAChC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,8CAA8C;KACrD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;IAC3D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,oDAAoD;KAC3D,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;IACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,uFAAuF;KAC9F,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mBAAmB,EAAE,KAAK,IAAI,EAAE;IACjC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,iDAAiD;KACxD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;EACtC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;IAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;IAC5B,IAAI,EAAE,oDAAoD;GAC3D,CAAC,CAAC;EACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;GAO7B,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { InputComponent } from './input';\n\ndescribe('admiralty-input', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input>\n <div class=\"text-input-container\">\n <input autocomplete=\"off\" id=\"admiralty-input-1\" name=\"admiralty-input-1\" type=\"text\" value=\"\">\n <admiralty-input-~~error~~ style=\"visibility: hidden;\"></admiralty-input-~~error~~>\n </div>\n </admiralty-input>\n `);\n });\n\n it('renders with a label', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input label=\"test-label\"></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input label=\"test-label\">\n <div class=\"text-input-container\">\n <admiralty-label for=\"admiralty-input-2\">test-label</admiralty-label>\n <input autocomplete=\"off\" id=\"admiralty-input-2\" name=\"admiralty-input-2\" type=\"text\" value=\"\">\n <admiralty-input-~~error~~ style=\"visibility: hidden;\"></admiralty-input-~~error~~>\n </div>\n </admiralty-input>\n `);\n });\n\n it('renders disabled', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input disabled></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input disabled>\n <div class=\"text-input-container\">\n <input disabled autocomplete=\"off\" class=\"disabled\" id=\"admiralty-input-3\" name=\"admiralty-input-3\" type=\"text\" value=\"\">\n <admiralty-input-~~error~~ style=\"visibility: hidden;\"></admiralty-input-~~error~~>\n </div>\n </admiralty-input>\n `);\n });\n\n it('renders invalid even without invalidMessage', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input invalid=\"true\"></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input invalid=\"true\">\n <div class=\"text-input-container\">\n <input autocomplete=\"off\" class=\"invalid\" id=\"admiralty-input-4\" name=\"admiralty-input-4\" type=\"text\" value=\"\">\n <admiralty-input-~~error~~ style=\"visibility: hidden;\"></admiralty-input-~~error~~>\n </div>\n </admiralty-input>\n `);\n });\n\n it('renders invalid with invalidMessage', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input invalid=\"true\" invalid-message=\"This is invalid!\"></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input invalid=\"true\" invalid-message=\"This is invalid!\">\n <div class=\"text-input-container\">\n <input autocomplete=\"off\" class=\"invalid\" id=\"admiralty-input-5\" name=\"admiralty-input-5\" type=\"text\" value=\"\">\n <admiralty-input-~~error~~ style=\"visibility: visible;\">\n This is invalid!\n </admiralty-input-~~error~~>\n </div>\n </admiralty-input>\n `);\n });\n\n it('renders with type', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input type=\"date\"></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input type=\"date\">\n <div class=\"text-input-container\">\n <input type=\"date\" autocomplete=\"off\" id=\"admiralty-input-6\" name=\"admiralty-input-6\" value=\"\">\n <admiralty-input-~~error~~ style=\"visibility: hidden;\"></admiralty-input-~~error~~>\n </div>\n </admiralty-input>\n `);\n });\n});\n\nit('renders with maxlength', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input max-length=\"1\"></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input max-length=\"1\">\n <div class=\"text-input-container\">\n <input autocomplete=\"off\" class=\"\" id=\"admiralty-input-7\" maxlength=\"1\" name=\"admiralty-input-7\" type=\"text\" value=\"\">\n <admiralty-input-~~error~~ style=\"visibility: hidden;\"></admiralty-input-~~error~~>\n </div>\n </admiralty-input>\n `);\n});\n"]}
1	+ {"version":3,"file":"input.spec.js","sourceRoot":"","sources":["../../../src/components/input/input.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;EAC/B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,qCAAqC;KAC5C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,wDAAwD;KAC/D,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kBAAkB,EAAE,KAAK,IAAI,EAAE;IAChC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,8CAA8C;KACrD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;IAC3D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,oDAAoD;KAC3D,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;IACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,uFAAuF;KAC9F,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mBAAmB,EAAE,KAAK,IAAI,EAAE;IACjC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,iDAAiD;KACxD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,wBAAwB,EAAE,KAAK,IAAI,EAAE;EACtC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;IAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;IAC5B,IAAI,EAAE,oDAAoD;GAC3D,CAAC,CAAC;EACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;GAO7B,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { InputComponent } from './input';\n\ndescribe('admiralty-input', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input>\n <div class=\"text-input-container\">\n <input autocomplete=\"off\" id=\"admiralty-input-1\" name=\"admiralty-input-1\" type=\"text\" value=\"\">\n <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n </div>\n </admiralty-input>\n `);\n });\n\n it('renders with a label', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input label=\"test-label\"></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input label=\"test-label\">\n <div class=\"text-input-container\">\n <admiralty-label for=\"admiralty-input-2\">test-label</admiralty-label>\n <input autocomplete=\"off\" id=\"admiralty-input-2\" name=\"admiralty-input-2\" type=\"text\" value=\"\">\n <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n </div>\n </admiralty-input>\n `);\n });\n\n it('renders disabled', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input disabled></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input disabled>\n <div class=\"text-input-container\">\n <input disabled autocomplete=\"off\" class=\"disabled\" id=\"admiralty-input-3\" name=\"admiralty-input-3\" type=\"text\" value=\"\">\n <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n </div>\n </admiralty-input>\n `);\n });\n\n it('renders invalid even without invalidMessage', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input invalid=\"true\"></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input invalid=\"true\">\n <div class=\"text-input-container\">\n <input autocomplete=\"off\" class=\"invalid\" id=\"admiralty-input-4\" name=\"admiralty-input-4\" type=\"text\" value=\"\">\n <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n </div>\n </admiralty-input>\n `);\n });\n\n it('renders invalid with invalidMessage', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input invalid=\"true\" invalid-message=\"This is invalid!\"></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input invalid=\"true\" invalid-message=\"This is invalid!\">\n <div class=\"text-input-container\">\n <input autocomplete=\"off\" class=\"invalid\" id=\"admiralty-input-5\" name=\"admiralty-input-5\" type=\"text\" value=\"\">\n <admiralty-input-invalid style=\"visibility: visible;\">\n This is invalid!\n </admiralty-input-invalid>\n </div>\n </admiralty-input>\n `);\n });\n\n it('renders with type', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input type=\"date\"></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input type=\"date\">\n <div class=\"text-input-container\">\n <input type=\"date\" autocomplete=\"off\" id=\"admiralty-input-6\" name=\"admiralty-input-6\" value=\"\">\n <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n </div>\n </admiralty-input>\n `);\n });\n});\n\nit('renders with maxlength', async () => {\n const page = await newSpecPage({\n components: [InputComponent],\n html: `<admiralty-input max-length=\"1\"></admiralty-input>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input max-length=\"1\">\n <div class=\"text-input-container\">\n <input autocomplete=\"off\" class=\"\" id=\"admiralty-input-7\" maxlength=\"1\" name=\"admiralty-input-7\" type=\"text\" value=\"\">\n <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n </div>\n </admiralty-input>\n `);\n});\n"]}

package/dist/collection/components/input-invalid/input-invalid.e2e.js ADDED Viewed

@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('admiralty-input-invalid', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<admiralty-input-invalid></admiralty-input-invalid>');
+    const element = await page.find('admiralty-input-invalid');
+    expect(element).toHaveClass('hydrated');
+  });
+});
+//# sourceMappingURL=input-invalid.e2e.js.map

package/dist/collection/components/input-invalid/input-invalid.e2e.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"input-invalid.e2e.js","sourceRoot":"","sources":["../../../src/components/input-invalid/input-invalid.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;EACvC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,qDAAqD,CAAC,CAAC;IAE7E,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;IAC3D,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('admiralty-input-invalid', () => {\n it('renders', async () => {\n const page = await newE2EPage();\n await page.setContent('<admiralty-input-invalid></admiralty-input-invalid>');\n\n const element = await page.find('admiralty-input-invalid');\n expect(element).toHaveClass('hydrated');\n });\n});\n"]}

package/dist/collection/components/{input-error/input-error.js → input-invalid/input-invalid.js} RENAMED Viewed

@@ -2,23 +2,23 @@ import { h, Host } from '@stencil/core';
 import { faExclamation } from '@fortawesome/free-solid-svg-icons';
 /**
  * @slot - The error content should be placed in the slot e.g.
- * `<admiralty-input-error>This field is required</admiralty-input-error>`
+ * `<admiralty-input-invalid>This field is required</admiralty-input-invalid>`
  */
-export class InputError {
+export class InputInvalidComponent {
   render() {
     return (h(Host, null, h("admiralty-icon", { "icon-name": faExclamation.iconName, class: "error-icon" }), h("p", null, h("slot", null))));
   }
-  static get is() { return "admiralty-input-error"; }
+  static get is() { return "admiralty-input-invalid"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
-      "$": ["input-error.scss"]
+      "$": ["input-invalid.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["input-error.css"]
+      "$": ["input-invalid.css"]
     };
   }
 }
-//# sourceMappingURL=input-error.js.map
+//# sourceMappingURL=input-invalid.js.map

package/dist/collection/components/input-invalid/input-invalid.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"input-invalid.js","sourceRoot":"","sources":["../../../src/components/input-invalid/input-invalid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAElE;;;GAGG;AAMH,MAAM,OAAO,qBAAqB;EAChC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,mCAA2B,aAAa,CAAC,QAAQ,EAAE,KAAK,EAAC,YAAY,GAAkB;MACvF;QACE,eAAa,CACX,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\nimport { faExclamation } from '@fortawesome/free-solid-svg-icons';\n\n/**\n * @slot - The error content should be placed in the slot e.g.\n * `<admiralty-input-invalid>This field is required</admiralty-input-invalid>`\n */\n@Component({\n tag: 'admiralty-input-invalid',\n styleUrl: 'input-invalid.scss',\n scoped: true,\n})\nexport class InputInvalidComponent {\n render() {\n return (\n <Host>\n <admiralty-icon icon-name={faExclamation.iconName} class=\"error-icon\"></admiralty-icon>\n <p>\n <slot></slot>\n </p>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/input-invalid/input-invalid.spec.js ADDED Viewed

@@ -0,0 +1,19 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { InputInvalidComponent } from './input-invalid';
+describe('input-invalid', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [InputInvalidComponent],
+      html: `<admiralty-input-invalid>Test</admiralty-input-invalid>`,
+    });
+    expect(page.root).toEqualHtml(`
+       <admiralty-input-invalid>
+        <admiralty-icon class="error-icon" icon-name="exclamation"></admiralty-icon>
+        <p>
+        Test
+        </p>
+</admiralty-input-invalid>
+    `);
+  });
+});
+//# sourceMappingURL=input-invalid.spec.js.map

package/dist/collection/components/input-invalid/input-invalid.spec.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"input-invalid.spec.js","sourceRoot":"","sources":["../../../src/components/input-invalid/input-invalid.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;EAC7B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,qBAAqB,CAAC;MACnC,IAAI,EAAE,yDAAyD;KAChE,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { InputInvalidComponent } from './input-invalid';\n\ndescribe('input-invalid', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [InputInvalidComponent],\n html: `<admiralty-input-invalid>Test</admiralty-input-invalid>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-input-invalid>\n <admiralty-icon class=\"error-icon\" icon-name=\"exclamation\"></admiralty-icon>\n <p>\n Test\n </p>\n</admiralty-input-invalid>\n `);\n });\n});\n"]}

package/dist/collection/components/radio-group/radio-group.js CHANGED Viewed

@@ -57,7 +57,7 @@ export class RadioGroupComponent {
   }
   render() {
     const { displayVertical } = this;
-    return (h(Host, null, h("div", { class: { 'radio-group': true, 'stack': displayVertical }, role: "radiogroup", onClick: this.onClick }, h("slot", null), h("admiralty-input-error", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage))));
+    return (h(Host, null, h("div", { class: { 'radio-group': true, 'stack': displayVertical }, role: "radiogroup", onClick: this.onClick }, h("slot", null), h("admiralty-input-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage))));
   }
   static get is() { return "admiralty-radio-group"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/radio-group/radio-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAoC,KAAK,EAAE,MAAM,eAAe,CAAC;AAQlH,MAAM,OAAO,mBAAmB;;IACtB,YAAO,GAAG,gBAAgB,aAAa,EAAE,EAAE,CAAC;IAwD5C,qBAAgB,GAAG,CAAC,KAAsB,EAAE,EAAE;MACpD,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;MAEhC,+DAA+D;MAC/D,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MACpD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MAE/E,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,EAAE;QACtB,OAAO;OACR;MAED,uEAAuE;MACvE,gDAAgD;MAChD,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,CAAC;MAEnC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;QAC1B,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9C,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;OACnC;IACH,CAAC,CAAC;IAKM,YAAO,GAAG,CAAC,CAAQ,EAAE,EAAE;MAC7B,MAAM,aAAa,GAAG,CAAC,CAAC,MAAM,IAAK,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;MAEvF,IAAI,aAAa,EAAE;QACjB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC;QAErC,IAAI,QAAQ,KAAK,YAAY,EAAE;UAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;SACvB;OACF;IACH,CAAC,CAAC;gBApFqB,IAAI,CAAC,OAAO;;2BAUA,KAAK;mBAKb,KAAK;;;EAQhC,YAAY,CAAC,KAAU;IACrB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;EACvC,CAAC;EAQD,cAAc,CAAC,KAAc;IAC3B,IAAI,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MAC/B,IAAI,KAAK,EAAE;QACT,KAAK,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;OACvC;WAAM;QACL,KAAK,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;OAClC;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;EACpC,CAAC;EAuBO,SAAS;IACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;EACjE,CAAC;EAcD,MAAM;IACJ,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAEjC,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO;QACpG,eAAa;QACb,~~6BAAuB,~~KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,~~CAAyB~~,~~CACnJ~~,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,aAAa,GAAW,CAAC,CAAC","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter, ComponentInterface, Watch } from '@stencil/core';\nimport { RadioGroupChangeEventDetail } from './radio-group-interface';\n\n@Component({\n tag: 'admiralty-radio-group',\n styleUrl: 'radio-group.scss',\n scoped: true,\n})\nexport class RadioGroupComponent implements ComponentInterface {\n private inputId = `admiralty-rg-${radioGroupIds++}`;\n\n @Element() el!: HTMLElement;\n\n /*\n The name of the control, which is submitted with the form data\n /\n @Prop() name: string = this.inputId;\n\n /\n The value of the radio group\n /\n @Prop({ mutable: true }) value: any \| null;\n\n /\n Setting this true displays the radio options vertically (defaults to false)\n /\n @Prop() displayVertical: boolean = false;\n\n /\n Whether to show the input in an invalid state\n /\n @Prop() invalid: boolean = false;\n\n /\n The message to show when the input is invalid\n /\n @Prop() invalidMessage: string;\n\n @Watch('value')\n valueChanged(value: any) {\n this.setRadioTabindex(value);\n this.admiraltyChange.emit({ value });\n }\n\n /\n Event fired when the checked radio button changes\n */\n @Event() admiraltyChange: EventEmitter<RadioGroupChangeEventDetail>;\n\n @Watch('invalid')\n invalidChanged(value: boolean) {\n this.getRadios().forEach(radio => {\n if (value) {\n radio.setAttribute('invalid', 'true');\n } else {\n radio.removeAttribute('invalid');\n }\n });\n }\n\n componentDidLoad(): void {\n this.setRadioTabindex(this.value);\n this.invalidChanged(this.invalid);\n }\n\n private setRadioTabindex = (value: any \| undefined) => {\n const radios = this.getRadios();\n\n // Get the first radio that is not disabled and the checked one\n const first = radios.find(radio => !radio.disabled);\n const checked = radios.find(radio => radio.value === value && !radio.disabled);\n\n if (!first && !checked) {\n return;\n }\n\n // If an enabled checked radio exists, set it to be the focusable radio\n // otherwise we default to focus the first radio\n const focusable = checked \|\| first;\n\n for (const radio of radios) {\n const tabindex = radio === focusable ? 0 : -1;\n radio.setButtonTabindex(tabindex);\n }\n };\n\n private getRadios(): HTMLAdmiraltyRadioElement[] {\n return Array.from(this.el.querySelectorAll('admiralty-radio'));\n }\n private onClick = (e: Event) => {\n const selectedRadio = e.target && (e.target as HTMLElement).closest('admiralty-radio');\n\n if (selectedRadio) {\n const currentValue = this.value;\n const newValue = selectedRadio.value;\n\n if (newValue !== currentValue) {\n this.value = newValue;\n }\n }\n };\n\n render() {\n const { displayVertical } = this;\n\n return (\n <Host>\n <div class={{ 'radio-group': true, 'stack': displayVertical }} role=\"radiogroup\" onClick={this.onClick}>\n <slot></slot>\n <admiralty-input-~~error~~ style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-~~error~~>\n </div>\n </Host>\n );\n }\n}\n\nlet radioGroupIds: number = 0;\n"]}
1	+ {"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAoC,KAAK,EAAE,MAAM,eAAe,CAAC;AAQlH,MAAM,OAAO,mBAAmB;;IACtB,YAAO,GAAG,gBAAgB,aAAa,EAAE,EAAE,CAAC;IAwD5C,qBAAgB,GAAG,CAAC,KAAsB,EAAE,EAAE;MACpD,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;MAEhC,+DAA+D;MAC/D,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MACpD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;MAE/E,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,EAAE;QACtB,OAAO;OACR;MAED,uEAAuE;MACvE,gDAAgD;MAChD,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,CAAC;MAEnC,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;QAC1B,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9C,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;OACnC;IACH,CAAC,CAAC;IAKM,YAAO,GAAG,CAAC,CAAQ,EAAE,EAAE;MAC7B,MAAM,aAAa,GAAG,CAAC,CAAC,MAAM,IAAK,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;MAEvF,IAAI,aAAa,EAAE;QACjB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC;QAErC,IAAI,QAAQ,KAAK,YAAY,EAAE;UAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;SACvB;OACF;IACH,CAAC,CAAC;gBApFqB,IAAI,CAAC,OAAO;;2BAUA,KAAK;mBAKb,KAAK;;;EAQhC,YAAY,CAAC,KAAU;IACrB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;EACvC,CAAC;EAQD,cAAc,CAAC,KAAc;IAC3B,IAAI,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MAC/B,IAAI,KAAK,EAAE;QACT,KAAK,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;OACvC;WAAM;QACL,KAAK,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;OAClC;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;EACpC,CAAC;EAuBO,SAAS;IACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC;EACjE,CAAC;EAcD,MAAM;IACJ,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAEjC,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO;QACpG,eAAa;QACb,+BAAyB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAA2B,CACvJ,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,aAAa,GAAW,CAAC,CAAC","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter, ComponentInterface, Watch } from '@stencil/core';\nimport { RadioGroupChangeEventDetail } from './radio-group-interface';\n\n@Component({\n tag: 'admiralty-radio-group',\n styleUrl: 'radio-group.scss',\n scoped: true,\n})\nexport class RadioGroupComponent implements ComponentInterface {\n private inputId = `admiralty-rg-${radioGroupIds++}`;\n\n @Element() el!: HTMLElement;\n\n /*\n The name of the control, which is submitted with the form data\n /\n @Prop() name: string = this.inputId;\n\n /\n The value of the radio group\n /\n @Prop({ mutable: true }) value: any \| null;\n\n /\n Setting this true displays the radio options vertically (defaults to false)\n /\n @Prop() displayVertical: boolean = false;\n\n /\n Whether to show the input in an invalid state\n /\n @Prop() invalid: boolean = false;\n\n /\n The message to show when the input is invalid\n /\n @Prop() invalidMessage: string;\n\n @Watch('value')\n valueChanged(value: any) {\n this.setRadioTabindex(value);\n this.admiraltyChange.emit({ value });\n }\n\n /\n Event fired when the checked radio button changes\n */\n @Event() admiraltyChange: EventEmitter<RadioGroupChangeEventDetail>;\n\n @Watch('invalid')\n invalidChanged(value: boolean) {\n this.getRadios().forEach(radio => {\n if (value) {\n radio.setAttribute('invalid', 'true');\n } else {\n radio.removeAttribute('invalid');\n }\n });\n }\n\n componentDidLoad(): void {\n this.setRadioTabindex(this.value);\n this.invalidChanged(this.invalid);\n }\n\n private setRadioTabindex = (value: any \| undefined) => {\n const radios = this.getRadios();\n\n // Get the first radio that is not disabled and the checked one\n const first = radios.find(radio => !radio.disabled);\n const checked = radios.find(radio => radio.value === value && !radio.disabled);\n\n if (!first && !checked) {\n return;\n }\n\n // If an enabled checked radio exists, set it to be the focusable radio\n // otherwise we default to focus the first radio\n const focusable = checked \|\| first;\n\n for (const radio of radios) {\n const tabindex = radio === focusable ? 0 : -1;\n radio.setButtonTabindex(tabindex);\n }\n };\n\n private getRadios(): HTMLAdmiraltyRadioElement[] {\n return Array.from(this.el.querySelectorAll('admiralty-radio'));\n }\n private onClick = (e: Event) => {\n const selectedRadio = e.target && (e.target as HTMLElement).closest('admiralty-radio');\n\n if (selectedRadio) {\n const currentValue = this.value;\n const newValue = selectedRadio.value;\n\n if (newValue !== currentValue) {\n this.value = newValue;\n }\n }\n };\n\n render() {\n const { displayVertical } = this;\n\n return (\n <Host>\n <div class={{ 'radio-group': true, 'stack': displayVertical }} role=\"radiogroup\" onClick={this.onClick}>\n <slot></slot>\n <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n </div>\n </Host>\n );\n }\n}\n\nlet radioGroupIds: number = 0;\n"]}

package/dist/collection/components/radio-group/radio-group.spec.js CHANGED Viewed

@@ -11,7 +11,7 @@ describe('radio-group', () => {
       <admiralty-radio-group>
         <div class="radio-group" role="radiogroup">
-      <admiralty-input-error style="visibility: hidden;"></admiralty-input-error>
+      <admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
       </div>
       </admiralty-radio-group>
     `);
@@ -48,7 +48,7 @@ describe('radio-group', () => {
               </label>
             </div>
           </admiralty-radio>
-          <admiralty-input-error style="visibility: hidden;"></admiralty-input-error>
+          <admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
         </div>
       </admiralty-radio-group>
     `);
@@ -85,7 +85,7 @@ describe('radio-group', () => {
               </label>
             </div>
           </admiralty-radio>
-          <admiralty-input-error style="visibility: hidden;"></admiralty-input-error>
+          <admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
         </div>
       </admiralty-radio-group>
     `);

package/dist/collection/components/radio-group/radio-group.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio-group.spec.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;EAC3B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,mBAAmB,CAAC;MACjC,IAAI,EAAE,iDAAiD;KACxD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,mBAAmB,EAAE,cAAc,CAAC;MACjD,IAAI,EAAE;;;;;OAKL;KACF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyBvC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;IAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,mBAAmB,EAAE,cAAc,CAAC;MACjD,IAAI,EAAE;;;;;SAKH;KACJ,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyBvC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;IACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,mBAAmB,EAAE,cAAc,CAAC;MACjD,IAAI,EAAE;;;;;SAKH;KACJ,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAE3B,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC;IAEvD,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,wBAAwB,CAAqB,CAAC;IAClF,IAAI,CAAC,KAAK,EAAE,CAAC;IACb,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,wBAAwB,CAAqB,CAAC;IAClF,IAAI,CAAC,KAAK,EAAE,CAAC;IAEb,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,QAAQ,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;EACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { RadioGroupComponent } from './radio-group';\nimport { RadioComponent } from '../radio/radio';\n\ndescribe('radio-group', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [RadioGroupComponent],\n html: `<admiralty-radio-group></admiralty-radio-group>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-radio-group>\n <div class=\"radio-group\" role=\"radiogroup\">\n\n <admiralty-input-~~error~~ style=\"visibility: hidden;\"></admiralty-input-~~error~~>\n </div>\n </admiralty-radio-group>\n `);\n });\n\n it('renders 2 radio buttons horizontally', async () => {\n const page = await newSpecPage({\n components: [RadioGroupComponent, RadioComponent],\n html: `\n <admiralty-radio-group>\n <admiralty-radio name=\"grp\" value=\"option1\">Option 1</admiralty-radio>\n <admiralty-radio name=\"grp\" value=\"option2\">Option 2</admiralty-radio>\n </admiralty-radio-group>\n `,\n });\n\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-radio-group>\n <!---->\n <div class=\"radio-group\" role=\"radiogroup\">\n <admiralty-radio name=\"grp\" value=\"option1\">\n <!---->\n <div class=\"admiralty-radio\">\n <input aria-checked=\"false\" aria-labelledby=\"admiralty-radio-0\" class=\"admiralty-radio\" id=\"admiralty-radio-0\" name=\"grp\" tabindex=\"0\" type=\"radio\" value=\"option1\">\n <label htmlfor=\"admiralty-radio-0\">\n Option 1\n </label>\n </div>\n </admiralty-radio>\n <admiralty-radio name=\"grp\" value=\"option2\">\n <!---->\n <div class=\"admiralty-radio\">\n <input aria-checked=\"false\" aria-labelledby=\"admiralty-radio-1\" class=\"admiralty-radio\" id=\"admiralty-radio-1\" name=\"grp\" tabindex=\"-1\" type=\"radio\" value=\"option2\">\n <label htmlfor=\"admiralty-radio-1\">\n Option 2\n </label>\n </div>\n </admiralty-radio>\n <admiralty-input-~~error~~ style=\"visibility: hidden;\"></admiralty-input-~~error~~>\n </div>\n </admiralty-radio-group>\n `);\n });\n\n it('renders 2 radio buttons vertically', async () => {\n const page = await newSpecPage({\n components: [RadioGroupComponent, RadioComponent],\n html: `\n <admiralty-radio-group display-vertical=\"true\">\n <admiralty-radio name=\"grp\" value=\"option1\">Option 1</admiralty-radio>\n <admiralty-radio name=\"grp\" value=\"option2\">Option 2</admiralty-radio>\n </admiralty-radio-group>\n `,\n });\n\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-radio-group display-vertical=\"true\">\n <!---->\n <div class=\"radio-group stack\" role=\"radiogroup\">\n <admiralty-radio name=\"grp\" value=\"option1\">\n <!---->\n <div class=\"admiralty-radio\">\n <input aria-checked=\"false\" aria-labelledby=\"admiralty-radio-2\" class=\"admiralty-radio\" id=\"admiralty-radio-2\" name=\"grp\" tabindex=\"0\" type=\"radio\" value=\"option1\">\n <label htmlfor=\"admiralty-radio-2\">\n Option 1\n </label>\n </div>\n </admiralty-radio>\n <admiralty-radio name=\"grp\" value=\"option2\">\n <!---->\n <div class=\"admiralty-radio\">\n <input aria-checked=\"false\" aria-labelledby=\"admiralty-radio-3\" class=\"admiralty-radio\" id=\"admiralty-radio-3\" name=\"grp\" tabindex=\"-1\" type=\"radio\" value=\"option2\">\n <label htmlfor=\"admiralty-radio-3\">\n Option 2\n </label>\n </div>\n </admiralty-radio>\n <admiralty-input-~~error~~ style=\"visibility: hidden;\"></admiralty-input-~~error~~>\n </div>\n </admiralty-radio-group>\n `);\n });\n\n it('fires event on radio button changed', async () => {\n const page = await newSpecPage({\n components: [RadioGroupComponent, RadioComponent],\n html: `\n <admiralty-radio-group display-vertical=\"true\">\n <admiralty-radio name=\"grp\" value=\"option1\">Option 1</admiralty-radio>\n <admiralty-radio name=\"grp\" value=\"option2\">Option 2</admiralty-radio>\n </admiralty-radio-group>\n `,\n });\n\n const eventSpy = jest.fn();\n\n page.doc.addEventListener('admiraltyChange', eventSpy);\n\n const rad1 = page.doc.querySelector('input[value=\"option1\"]') as HTMLInputElement;\n rad1.click();\n await page.waitForChanges();\n\n const rad2 = page.doc.querySelector('input[value=\"option2\"]') as HTMLInputElement;\n rad2.click();\n\n await page.waitForChanges();\n\n expect(eventSpy).toBeCalledTimes(2);\n });\n});\n"]}
1	+ {"version":3,"file":"radio-group.spec.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;EAC3B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,mBAAmB,CAAC;MACjC,IAAI,EAAE,iDAAiD;KACxD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,mBAAmB,EAAE,cAAc,CAAC;MACjD,IAAI,EAAE;;;;;OAKL;KACF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyBvC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;IAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,mBAAmB,EAAE,cAAc,CAAC;MACjD,IAAI,EAAE;;;;;SAKH;KACJ,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyBvC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;IACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,mBAAmB,EAAE,cAAc,CAAC;MACjD,IAAI,EAAE;;;;;SAKH;KACJ,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAE3B,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC;IAEvD,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,wBAAwB,CAAqB,CAAC;IAClF,IAAI,CAAC,KAAK,EAAE,CAAC;IACb,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,wBAAwB,CAAqB,CAAC;IAClF,IAAI,CAAC,KAAK,EAAE,CAAC;IAEb,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,QAAQ,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;EACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { RadioGroupComponent } from './radio-group';\nimport { RadioComponent } from '../radio/radio';\n\ndescribe('radio-group', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [RadioGroupComponent],\n html: `<admiralty-radio-group></admiralty-radio-group>`,\n });\n expect(page.root).toEqualHtml(`\n <admiralty-radio-group>\n <div class=\"radio-group\" role=\"radiogroup\">\n\n <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n </div>\n </admiralty-radio-group>\n `);\n });\n\n it('renders 2 radio buttons horizontally', async () => {\n const page = await newSpecPage({\n components: [RadioGroupComponent, RadioComponent],\n html: `\n <admiralty-radio-group>\n <admiralty-radio name=\"grp\" value=\"option1\">Option 1</admiralty-radio>\n <admiralty-radio name=\"grp\" value=\"option2\">Option 2</admiralty-radio>\n </admiralty-radio-group>\n `,\n });\n\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-radio-group>\n <!---->\n <div class=\"radio-group\" role=\"radiogroup\">\n <admiralty-radio name=\"grp\" value=\"option1\">\n <!---->\n <div class=\"admiralty-radio\">\n <input aria-checked=\"false\" aria-labelledby=\"admiralty-radio-0\" class=\"admiralty-radio\" id=\"admiralty-radio-0\" name=\"grp\" tabindex=\"0\" type=\"radio\" value=\"option1\">\n <label htmlfor=\"admiralty-radio-0\">\n Option 1\n </label>\n </div>\n </admiralty-radio>\n <admiralty-radio name=\"grp\" value=\"option2\">\n <!---->\n <div class=\"admiralty-radio\">\n <input aria-checked=\"false\" aria-labelledby=\"admiralty-radio-1\" class=\"admiralty-radio\" id=\"admiralty-radio-1\" name=\"grp\" tabindex=\"-1\" type=\"radio\" value=\"option2\">\n <label htmlfor=\"admiralty-radio-1\">\n Option 2\n </label>\n </div>\n </admiralty-radio>\n <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n </div>\n </admiralty-radio-group>\n `);\n });\n\n it('renders 2 radio buttons vertically', async () => {\n const page = await newSpecPage({\n components: [RadioGroupComponent, RadioComponent],\n html: `\n <admiralty-radio-group display-vertical=\"true\">\n <admiralty-radio name=\"grp\" value=\"option1\">Option 1</admiralty-radio>\n <admiralty-radio name=\"grp\" value=\"option2\">Option 2</admiralty-radio>\n </admiralty-radio-group>\n `,\n });\n\n expect(page.root).toMatchInlineSnapshot(`\n <admiralty-radio-group display-vertical=\"true\">\n <!---->\n <div class=\"radio-group stack\" role=\"radiogroup\">\n <admiralty-radio name=\"grp\" value=\"option1\">\n <!---->\n <div class=\"admiralty-radio\">\n <input aria-checked=\"false\" aria-labelledby=\"admiralty-radio-2\" class=\"admiralty-radio\" id=\"admiralty-radio-2\" name=\"grp\" tabindex=\"0\" type=\"radio\" value=\"option1\">\n <label htmlfor=\"admiralty-radio-2\">\n Option 1\n </label>\n </div>\n </admiralty-radio>\n <admiralty-radio name=\"grp\" value=\"option2\">\n <!---->\n <div class=\"admiralty-radio\">\n <input aria-checked=\"false\" aria-labelledby=\"admiralty-radio-3\" class=\"admiralty-radio\" id=\"admiralty-radio-3\" name=\"grp\" tabindex=\"-1\" type=\"radio\" value=\"option2\">\n <label htmlfor=\"admiralty-radio-3\">\n Option 2\n </label>\n </div>\n </admiralty-radio>\n <admiralty-input-invalid style=\"visibility: hidden;\"></admiralty-input-invalid>\n </div>\n </admiralty-radio-group>\n `);\n });\n\n it('fires event on radio button changed', async () => {\n const page = await newSpecPage({\n components: [RadioGroupComponent, RadioComponent],\n html: `\n <admiralty-radio-group display-vertical=\"true\">\n <admiralty-radio name=\"grp\" value=\"option1\">Option 1</admiralty-radio>\n <admiralty-radio name=\"grp\" value=\"option2\">Option 2</admiralty-radio>\n </admiralty-radio-group>\n `,\n });\n\n const eventSpy = jest.fn();\n\n page.doc.addEventListener('admiraltyChange', eventSpy);\n\n const rad1 = page.doc.querySelector('input[value=\"option1\"]') as HTMLInputElement;\n rad1.click();\n await page.waitForChanges();\n\n const rad2 = page.doc.querySelector('input[value=\"option2\"]') as HTMLInputElement;\n rad2.click();\n\n await page.waitForChanges();\n\n expect(eventSpy).toBeCalledTimes(2);\n });\n});\n"]}

package/dist/collection/components/select/select.css CHANGED Viewed

@@ -47,7 +47,7 @@ select {
   padding: 12px;
   width: 100%;
 }
-select.error {
+select.invalid {
   border-color: #e20d0d;
 }
 select:focus-visible {

package/dist/collection/components/select/select.js CHANGED Viewed

@@ -3,8 +3,8 @@ export class SelectComponent {
   constructor() {
     this.id = `admiralty-select-${++nextId}`;
     this.disabled = false;
-    this.error = false;
-    this.errorHint = null;
+    this.invalid = false;
+    this.invalidMessage = null;
     this.hint = null;
     this.label = 'Choose a colour';
     this.width = undefined;
@@ -40,9 +40,9 @@ export class SelectComponent {
     this.selectOption();
   }
   render() {
-    const { disabled, error, errorHint, hint, id, label } = this;
+    const { disabled, hint, id, label } = this;
     const disabledClass = disabled ? 'disabled' : '';
-    return (h(Host, null, h("div", { class: `admiralty-select ${disabledClass}` }, h("admiralty-label", { disabled: this.disabled, for: id }, label), hint ? h("admiralty-hint", { disabled: this.disabled }, hint) : null, h("div", { class: "select-wrapper", style: this.width ? { maxWidth: `${this.width}px` } : {} }, h("select", { ref: select => (this.nativeInput = select), id: id, class: { 'admiralty-form-control': true, 'error': error, 'disabled': disabled }, "aria-disabled": disabled ? 'true' : 'false', "aria-label": label, onChange: event => this.handleSelect(event), onBlur: event => this.handleBlur(event), disabled: disabled }, h("slot", null)), h("admiralty-icon", { class: `select-down-icon ${disabledClass}`, "icon-name": "angle-down" })), this.error ? h("admiralty-input-error", null, errorHint) : '')));
+    return (h(Host, null, h("div", { class: `admiralty-select ${disabledClass}` }, h("admiralty-label", { disabled: this.disabled, for: id }, label), hint ? h("admiralty-hint", { disabled: this.disabled }, hint) : null, h("div", { class: "select-wrapper", style: this.width ? { maxWidth: `${this.width}px` } : {} }, h("select", { ref: select => (this.nativeInput = select), id: id, class: { 'admiralty-form-control': true, 'invalid': this.invalid, 'disabled': disabled }, "aria-disabled": disabled ? 'true' : 'false', "aria-label": label, onChange: event => this.handleSelect(event), onBlur: event => this.handleBlur(event), disabled: disabled }, h("slot", null)), h("admiralty-icon", { class: `select-down-icon ${disabledClass}`, "icon-name": "angle-down" })), h("admiralty-input-invalid", { style: { visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' } }, this.invalidMessage))));
   }
   static get is() { return "admiralty-select"; }
   static get encapsulation() { return "scoped"; }
@@ -76,7 +76,7 @@ export class SelectComponent {
         "reflect": false,
         "defaultValue": "false"
       },
-      "error": {
+      "invalid": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -88,13 +88,13 @@ export class SelectComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If 'true', the 'error' class is added to suggest an error"
+          "text": "Whether to show that the select is in an invalid state."
         },
-        "attribute": "error",
+        "attribute": "invalid",
         "reflect": false,
         "defaultValue": "false"
       },
-      "errorHint": {
+      "invalidMessage": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -106,9 +106,9 @@ export class SelectComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The hint that is used to inform the user of an error (displayed below the select box)"
+          "text": "The message to show when the select is invalid."
         },
-        "attribute": "error-hint",
+        "attribute": "invalid-message",
         "reflect": false,
         "defaultValue": "null"
       },

package/dist/collection/components/select/select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ9F,MAAM,OAAO,eAAe;;IAG1B,OAAE,GAAW,oBAAoB,EAAE,MAAM,EAAE,CAAC;oBAIhB,KAAK;~~iBAIR~~,KAAK;~~qBAIF~~,IAAI;~~gBAIT~~,IAAI;iBAIH,iBAAiB;;iBAiBiB,EAAE;;EAGlD,YAAY;IACpB,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC;IACtC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,YAAY,IAAI,YAAY,CAAC,KAAK,KAAK,KAAK,EAAE;MAChD,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC;KAC5B;IACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;EACrG,CAAC;EAEO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;EAChG,CAAC;EAED,YAAY,CAAC,KAAY;IACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAkC,CAAC;IACxD,IAAI,MAAM,EAAE;MACV,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;KACjC;EACH,CAAC;EAED,UAAU,CAAC,MAAkB;IAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;EAC5B,CAAC;EAED,YAAY;IACV,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACnD,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;MACvB,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,EAAE,CAAC;IACrD,CAAC,CAAC,CAAC;EACL,CAAC;EAED,mBAAmB;IACjB,IAAI,CAAC,YAAY,EAAE,CAAC;EACtB,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,~~KAAK,EAAE,SAAS,EAAE,~~IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;~~IAC7D~~,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IACjD,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,oBAAoB,aAAa,EAAE;QAC7C,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAE,IAC9C,KAAK,CACU;QACjB,IAAI,CAAC,CAAC,CAAC,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAkB,CAAC,CAAC,CAAC,IAAI;QAC/E,WAAK,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;UAClF,cACE,GAAG,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,EAC1C,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,EAAE,~~OAAO~~,EAAE,~~KAAK~~,EAAE,UAAU,EAAE,QAAQ,EAAE,~~mBAChE~~,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAC9B,KAAK,EACjB,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACvC,QAAQ,EAAE,QAAQ;YAElB,eAAa,CACN;UACT,sBAAgB,KAAK,EAAE,oBAAoB,aAAa,EAAE,eAAY,YAAY,GAAkB,CAChG;~~QACL~~,IAAI,CAAC,~~KAAK~~,CAAC,CAAC,CAAC,~~iCAAwB~~,SAAS,~~CAAyB,~~CAAC,CAAC,CAAC,EAAE,~~CACzE~~,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,IAAI,MAAM,GAAG,CAAC,CAAC","sourcesContent":["import { Component, Event, Prop, Element, EventEmitter, h, Host, Watch } from '@stencil/core';\nimport { SelectChangeEventDetail } from './select.interface';\n\n@Component({\n tag: 'admiralty-select',\n styleUrl: 'select.scss',\n scoped: true,\n})\nexport class SelectComponent {\n @Element() el?: HTMLElement;\n private nativeInput?: HTMLSelectElement;\n id: string = `admiralty-select-${++nextId}`;\n /*\n If `true`, the user cannot interact with the select.\n /\n @Prop() disabled: boolean = false;\n /\n If ~~'true',~~ the ~~'error'~~ ~~class~~ is ~~added~~ to ~~suggest~~ ~~an error\~~n /\n @Prop() ~~error~~: boolean = false;\n /\n The ~~hint~~ ~~that is used~~ to ~~inform~~ ~~the~~ ~~user of an error (displayed below~~ the select ~~box)\~~n /\n @Prop() ~~errorHint~~: string = null;\n /\n The text that will be used as a field label.\n /\n @Prop() hint: string = null;\n /\n The text that will be used as a field label.\n /\n @Prop() label: string = 'Choose a colour';\n /\n The maximum width (px) for the input field.\n /\n @Prop() width?: number;\n /\n Emitted when the value has changed.\n /\n @Event() admiraltyChange: EventEmitter<SelectChangeEventDetail>;\n /\n Emitted when the component loses focus.\n /\n @Event() admiraltyBlur: EventEmitter<void>;\n\n /\n The value of the input.\n */\n @Prop({ mutable: true }) value?: string \| number \| null = '';\n\n @Watch('value')\n protected valueChanged() {\n const nativeSelect = this.nativeInput;\n const value = this.getValue();\n if (nativeSelect && nativeSelect.value !== value) {\n nativeSelect.value = value;\n }\n this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n }\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value \|\| '').toString();\n }\n\n handleSelect(event: Event) {\n const select = event.target as HTMLSelectElement \| null;\n if (select) {\n this.value = select.value \|\| '';\n }\n }\n\n handleBlur(_event: FocusEvent): void {\n this.admiraltyBlur.emit();\n }\n\n selectOption() {\n const options = this.el.querySelectorAll('option');\n options.forEach(option => {\n option.selected = option.value === this.getValue();\n });\n }\n\n componentWillRender() {\n this.selectOption();\n }\n\n render() {\n const { disabled, ~~error, errorHint,~~ hint, id, label } = this;\n const disabledClass = disabled ? 'disabled' : '';\n return (\n <Host>\n <div class={`admiralty-select ${disabledClass}`}>\n <admiralty-label disabled={this.disabled} for={id}>\n {label}\n </admiralty-label>\n {hint ? <admiralty-hint disabled={this.disabled}>{hint}</admiralty-hint> : null}\n <div class=\"select-wrapper\" style={this.width ? { maxWidth: `${this.width}px` } : {}}>\n <select\n ref={select => (this.nativeInput = select)}\n id={id}\n class={{ 'admiralty-form-control': true, '~~error~~': ~~error~~, 'disabled': disabled }}\n aria-disabled={disabled ? 'true' : 'false'}\n aria-label={label}\n onChange={event => this.handleSelect(event)}\n onBlur={event => this.handleBlur(event)}\n disabled={disabled}\n >\n <slot></slot>\n </select>\n <admiralty-icon class={`select-down-icon ${disabledClass}`} icon-name=\"angle-down\"></admiralty-icon>\n </div>\n {this.~~error~~ ? ~~<admiralty-input-error~~>{~~errorHint~~}</admiralty-input-~~error> : ''}\~~n </div>\n </Host>\n );\n }\n}\n\nlet nextId = 0;\n"]}
1	+ {"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, Prop, Element, EventEmitter, h, Host, Watch } from '@stencil/core';\nimport { SelectChangeEventDetail } from './select.interface';\n\n@Component({\n tag: 'admiralty-select',\n styleUrl: 'select.scss',\n scoped: true,\n})\nexport class SelectComponent {\n @Element() el?: HTMLElement;\n private nativeInput?: HTMLSelectElement;\n id: string = `admiralty-select-${++nextId}`;\n /*\n If `true`, the user cannot interact with the select.\n /\n @Prop() disabled: boolean = false;\n /\n Whether to show that the select is in an invalid state.\n /\n @Prop() invalid: boolean = false;\n /\n The message to show when the select is invalid.\n /\n @Prop() invalidMessage: string = null;\n /\n The text that will be used as a field label.\n /\n @Prop() hint: string = null;\n /\n The text that will be used as a field label.\n /\n @Prop() label: string = 'Choose a colour';\n /\n The maximum width (px) for the input field.\n /\n @Prop() width?: number;\n /\n Emitted when the value has changed.\n /\n @Event() admiraltyChange: EventEmitter<SelectChangeEventDetail>;\n /\n Emitted when the component loses focus.\n /\n @Event() admiraltyBlur: EventEmitter<void>;\n\n /\n The value of the input.\n */\n @Prop({ mutable: true }) value?: string \| number \| null = '';\n\n @Watch('value')\n protected valueChanged() {\n const nativeSelect = this.nativeInput;\n const value = this.getValue();\n if (nativeSelect && nativeSelect.value !== value) {\n nativeSelect.value = value;\n }\n this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n }\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value \|\| '').toString();\n }\n\n handleSelect(event: Event) {\n const select = event.target as HTMLSelectElement \| null;\n if (select) {\n this.value = select.value \|\| '';\n }\n }\n\n handleBlur(_event: FocusEvent): void {\n this.admiraltyBlur.emit();\n }\n\n selectOption() {\n const options = this.el.querySelectorAll('option');\n options.forEach(option => {\n option.selected = option.value === this.getValue();\n });\n }\n\n componentWillRender() {\n this.selectOption();\n }\n\n render() {\n const { disabled, hint, id, label } = this;\n const disabledClass = disabled ? 'disabled' : '';\n return (\n <Host>\n <div class={`admiralty-select ${disabledClass}`}>\n <admiralty-label disabled={this.disabled} for={id}>\n {label}\n </admiralty-label>\n {hint ? <admiralty-hint disabled={this.disabled}>{hint}</admiralty-hint> : null}\n <div class=\"select-wrapper\" style={this.width ? { maxWidth: `${this.width}px` } : {}}>\n <select\n ref={select => (this.nativeInput = select)}\n id={id}\n class={{ 'admiralty-form-control': true, 'invalid': this.invalid, 'disabled': disabled }}\n aria-disabled={disabled ? 'true' : 'false'}\n aria-label={label}\n onChange={event => this.handleSelect(event)}\n onBlur={event => this.handleBlur(event)}\n disabled={disabled}\n >\n <slot></slot>\n </select>\n <admiralty-icon class={`select-down-icon ${disabledClass}`} icon-name=\"angle-down\"></admiralty-icon>\n </div>\n <admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>\n </div>\n </Host>\n );\n }\n}\n\nlet nextId = 0;\n"]}