@abgov/react-components 4.0.0-alpha.34 → 4.0.0-alpha.37

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 (10) hide show
  1. package/experimental/package.json +2 -1
  2. package/index.d.ts +2 -2
  3. package/lib/badge/badge.d.ts +4 -5
  4. package/lib/button/button.d.ts +1 -1
  5. package/lib/container/container.d.ts +7 -7
  6. package/lib/input/input.d.ts +7 -7
  7. package/lib/microsite-header/microsite-header.d.ts +2 -2
  8. package/package.json +5 -3
  9. package/react-components.esm.js +99 -58
  10. package/react-components.umd.js +95 -62
package/experimental/package.json CHANGED
@@ -5,6 +5,7 @@
5
5
  "typings": "./index.d.ts",
6
6
  "dependencies": {},
7
7
  "peerDependencies": {
8
- "react": "17.0.2"
8
+ "react": "17.0.2",
9
+ "date-fns": "^2.29.2"
9
10
  }
10
11
  }
package/index.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * IMPORTANT: Do NOT export experimental components in this file.
3
3
  */
4
4
  import '@abgov/web-components';
5
- import { GoABadge, GoAInfoBadge, GoAEmergencyBadge, GoASuccessBadge, GoAWarningBadge } from './lib/badge/badge';
5
+ import { GoABadge, GoAInfoBadge, GoAEmergencyBadge, GoASuccessBadge, GoAImportantBadge } from './lib/badge/badge';
6
6
  import { GoAInput, GoAInputText, GoAInputPassword, GoAInputDate, GoAInputTime, GoAInputDateTime, GoAInputEmail, GoAInputSearch, GoAInputUrl, GoAInputTel, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputRange } from './lib/input/input';
7
7
  import { GoAAppHeader } from './lib/app-header/app-header';
8
8
  import { GoAButton } from './lib/button/button';
@@ -37,4 +37,4 @@ export * from './lib/page/page';
37
37
  export * from './lib/divider/divider';
38
38
  export type { GoAIconType };
39
39
  export type { GoABadgeType };
40
- export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge, };
40
+ export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAImportantBadge, };
package/lib/badge/badge.d.ts CHANGED
@@ -1,15 +1,14 @@
1
1
  import React, { FC } from 'react';
2
- import { GoAIconType } from '../icons';
3
- export declare type GoABadgeType = 'information' | 'success' | 'warning' | 'emergency' | 'dark' | 'midtone' | 'light' | 'inactive';
2
+ export declare type GoABadgeType = 'information' | 'success' | 'important' | 'emergency' | 'dark' | 'midtone' | 'light';
4
3
  interface GoABadgeProps {
5
4
  type: GoABadgeType;
6
- icon?: GoAIconType;
5
+ icon?: boolean;
7
6
  content?: string;
8
7
  testId?: string;
9
8
  }
10
9
  interface WCProps {
11
10
  type: GoABadgeType;
12
- icon?: GoAIconType;
11
+ icon?: boolean;
13
12
  content?: string;
14
13
  testid?: string;
15
14
  }
@@ -23,6 +22,6 @@ declare global {
23
22
  export declare const GoABadge: FC<GoABadgeProps>;
24
23
  export declare const GoAInfoBadge: FC<GoABadgeProps>;
25
24
  export declare const GoASuccessBadge: FC<GoABadgeProps>;
26
- export declare const GoAWarningBadge: FC<GoABadgeProps>;
25
+ export declare const GoAImportantBadge: FC<GoABadgeProps>;
27
26
  export declare const GoAEmergencyBadge: FC<GoABadgeProps>;
28
27
  export {};
package/lib/button/button.d.ts CHANGED
@@ -3,7 +3,7 @@ import './button.css';
3
3
  import { GoAIconType } from '../icons';
4
4
  export declare type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'start';
5
5
  export declare type ButtonSize = 'compact' | '';
6
- export declare type ButtonVariant = '' | 'danger';
6
+ export declare type ButtonVariant = '' | 'destructive';
7
7
  interface WCProps {
8
8
  type?: ButtonType;
9
9
  size?: ButtonSize;
package/lib/container/container.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  import React, { FC, ReactNode } from 'react';
2
- declare type ContainerVariant = 'primary' | 'info' | 'error' | 'success' | 'warning' | 'default';
2
+ declare type ContainerVariant = 'interactive' | 'non-interactive' | 'info' | 'error' | 'success' | 'warning';
3
3
  declare type HeadingSize = 'large' | 'small' | 'none';
4
4
  declare type ContainerPadding = "relaxed" | "compact";
5
5
  interface WCProps {
6
- variant: ContainerVariant;
7
- headingsize: HeadingSize;
8
- colored: boolean;
9
- padding: ContainerPadding;
6
+ variant?: ContainerVariant;
7
+ headingsize?: HeadingSize;
8
+ colored?: boolean;
9
+ padding?: ContainerPadding;
10
10
  }
11
11
  declare global {
12
12
  namespace JSX {
@@ -16,11 +16,11 @@ declare global {
16
16
  }
17
17
  }
18
18
  interface Props {
19
- headingSize: HeadingSize;
19
+ headingSize?: HeadingSize;
20
20
  variant?: ContainerVariant;
21
21
  title?: ReactNode;
22
22
  colored?: boolean;
23
- padding: ContainerPadding;
23
+ padding?: ContainerPadding;
24
24
  actions?: ReactNode;
25
25
  }
26
26
  export declare const GoAContainer: FC<Props>;
package/lib/input/input.d.ts CHANGED
@@ -58,14 +58,14 @@ export declare const GoAInput: FC<Props & {
58
58
  }>;
59
59
  export declare const GoAInputText: FC<Props>;
60
60
  export declare const GoAInputPassword: FC<Props>;
61
- export declare const GoAInputDate: FC<Props & {
62
- min?: string;
63
- max?: string;
61
+ export declare const GoAInputDate: FC<Omit<Props, "value"> & {
62
+ value: Date | string;
64
63
  }>;
65
- export declare const GoAInputTime: FC<Props>;
66
- export declare const GoAInputDateTime: FC<Props & {
67
- min?: string;
68
- max?: string;
64
+ export declare const GoAInputTime: FC<Omit<Props, "value"> & {
65
+ value: Date | string;
66
+ }>;
67
+ export declare const GoAInputDateTime: FC<Omit<Props, "value"> & {
68
+ value: Date;
69
69
  }>;
70
70
  export declare const GoAInputEmail: FC<Props>;
71
71
  export declare const GoAInputSearch: FC<Props>;
package/lib/microsite-header/microsite-header.d.ts CHANGED
@@ -8,12 +8,12 @@ declare global {
8
8
  }
9
9
  export declare type ServiceLevel = 'alpha' | 'beta' | 'live';
10
10
  interface WebComponentProps {
11
- level: ServiceLevel;
11
+ type: ServiceLevel;
12
12
  version?: string;
13
13
  feedbackurl?: string;
14
14
  }
15
15
  export interface HeaderProps {
16
- level: ServiceLevel;
16
+ type: ServiceLevel;
17
17
  version?: string;
18
18
  feedbackUrl?: string;
19
19
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/react-components",
3
- "version": "4.0.0-alpha.34",
3
+ "version": "4.0.0-alpha.37",
4
4
  "description": "Government of Alberta - UI components for React",
5
5
  "bugs": {
6
6
  "url": "https://github.com/GovAlta/ui-components/issues"
@@ -18,9 +18,11 @@
18
18
  },
19
19
  "peerDependencies": {
20
20
  "react": "^17.0.2",
21
- "react-dom": "^17.0.2"
21
+ "react-dom": "^17.0.2",
22
+ "date-fns": "^2.29.2"
22
23
  },
23
24
  "main": "./react-components.umd.js",
24
25
  "module": "./react-components.esm.js",
25
- "typings": "./index.d.ts"
26
+ "typings": "./index.d.ts",
27
+ "dependencies": {}
26
28
  }
package/react-components.esm.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import { useRef, useEffect } from 'react';
3
+ import { format } from 'date-fns';
3
4
 
4
5
  function noop() {}
5
6
 
@@ -1674,7 +1675,7 @@ function instance$x($$self, $$props, $$invalidate) {
1674
1675
  1) {
1675
1676
  $$invalidate(4, iconType = {
1676
1677
  success: "checkmark-circle",
1677
- warning: "alert-circle",
1678
+ important: "alert-circle",
1678
1679
  information: "information-circle",
1679
1680
  emergency: "warning",
1680
1681
  dark: "information-circle",
@@ -1690,7 +1691,7 @@ function instance$x($$self, $$props, $$invalidate) {
1690
1691
  class Badge extends SvelteElement {
1691
1692
  constructor(options) {
1692
1693
  super();
1693
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--fw-regular);margin:0.25rem}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--fs-sm);line-height:var(--lh-sm);padding-bottom:var(--font-valign-fix)}.goa-badge.badge-information{background-color:var(--color-gray-100);color:var(--goa-color-status-info)}.goa-badge.badge-success{background-color:var(--goa-color-status-success);color:var(--goa-color-text-light)}.goa-badge.badge-warning{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.goa-badge.badge-emergency{background-color:var(--goa-color-status-emergency);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--color-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--color-gray-600);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--color-white);color:var(--goa-color-text)}</style>`;
1694
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--fw-regular);margin:0.25rem}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--fs-sm);line-height:var(--lh-sm);padding-bottom:var(--font-valign-fix)}.goa-badge.badge-information{background-color:var(--color-gray-100);color:var(--goa-color-status-info)}.goa-badge.badge-success{background-color:var(--goa-color-status-success);color:var(--goa-color-text-light)}.goa-badge.badge-important{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.goa-badge.badge-emergency{background-color:var(--goa-color-status-emergency);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--color-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--color-gray-600);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--color-white);color:var(--goa-color-text)}</style>`;
1694
1695
  init(this, {
1695
1696
  target: this.shadowRoot,
1696
1697
  props: attribute_to_object(this.attributes),
@@ -4058,7 +4059,7 @@ function instance$p($$self, $$props, $$invalidate) {
4058
4059
  class Container extends SvelteElement {
4059
4060
  constructor(options) {
4060
4061
  super();
4061
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.colored .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.colored .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.colored .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.colored .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.colored .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title>*,.actions>*{line-height:3rem}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--large{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--large .title{line-height:2rem}.heading--small{height:0.5rem}.heading--none{display:none}.heading--none~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--small .title,.heading--small .actions{display:none}.actions{display:flex;align-items:center}</style>`;
4062
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.colored .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.colored .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.colored .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.colored .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.colored .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--large{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--large .title{line-height:2rem}.heading--small{height:0.5rem}.heading--none{display:none}.heading--none~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--small .title,.heading--small .actions{display:none}.actions{display:flex;align-items:center}</style>`;
4062
4063
  init(this, {
4063
4064
  target: this.shadowRoot,
4064
4065
  props: attribute_to_object(this.attributes),
@@ -6432,7 +6433,7 @@ function instance$i($$self, $$props, $$invalidate) {
6432
6433
  /*variant, isInverted*/
6433
6434
  544) {
6434
6435
  // private
6435
- $$invalidate(8, css = `goa-icon-button goa-icon-button--${variant} ${isInverted ? "goa-icon-button--inverted" : ""}`);
6436
+ $$invalidate(8, css = `${variant} ${isInverted ? "inverted" : ""}`);
6436
6437
  }
6437
6438
 
6438
6439
  if ($$self.$$.dirty &
@@ -6458,7 +6459,7 @@ function instance$i($$self, $$props, $$invalidate) {
6458
6459
  class IconButton extends SvelteElement {
6459
6460
  constructor(options) {
6460
6461
  super();
6461
- this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}.goa-icon-button,.goa-icon-button *{box-sizing:border-box}.goa-icon-button{display:inline-flex;align-items:center;background:transparent;cursor:pointer;padding:0;border:none}.goa-icon-button--color{border-radius:0.5rem;padding:calc(var(--size) / 4)}.goa-icon-button--color{border-radius:0.5rem;color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.goa-icon-button--color:active,.goa-icon-button--nocolor:active{transform:scale(0.9);border:none}.goa-icon-button--color:hover{background-color:var(--goa-color-primary-light)}.goa-icon-button--color.goa-icon-button--inverted:hover{background-color:var(--goa-color-primary-dark)}.goa-icon-button:disabled{color:var(--color-gray-200);fill:var(--color-gray-200);transform:none;cursor:default}.goa-icon-button:disabled:hover{background-color:transparent}</style>`;
6462
+ this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;justify-content:center;background:transparent;cursor:pointer;border:none}.color{border-radius:0.5rem;padding:calc(var(--size) / 4)}.color{border-radius:0.5rem;color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.color:active,.nocolor:active{transform:scale(0.9);border:none}.color:hover{background-color:var(--goa-color-primary-light)}.color.inverted:hover{background-color:var(--goa-color-primary-dark)}button:disabled{color:var(--color-gray-200);fill:var(--color-gray-200);transform:none;cursor:default}button:disabled:hover{background-color:transparent}</style>`;
6462
6463
  init(this, {
6463
6464
  target: this.shadowRoot,
6464
6465
  props: attribute_to_object(this.attributes),
@@ -6659,7 +6660,6 @@ function create_if_block_3$3(ctx) {
6659
6660
  return {
6660
6661
  c() {
6661
6662
  goa_icon_button = element("goa-icon-button");
6662
- set_custom_element_data(goa_icon_button, "class", "goa-input-trailing-icon");
6663
6663
  set_custom_element_data(goa_icon_button, "disabled",
6664
6664
  /*isDisabled*/
6665
6665
  ctx[16]);
@@ -6705,7 +6705,7 @@ function create_if_block_3$3(ctx) {
6705
6705
  }
6706
6706
 
6707
6707
  };
6708
- } // (126:2) {#if showCounter}
6708
+ } // (125:2) {#if showCounter}
6709
6709
 
6710
6710
 
6711
6711
  function create_if_block$a(ctx) {
@@ -6756,7 +6756,7 @@ function create_if_block$a(ctx) {
6756
6756
  }
6757
6757
 
6758
6758
  };
6759
- } // (131:31)
6759
+ } // (130:31)
6760
6760
 
6761
6761
 
6762
6762
  function create_if_block_2$5(ctx) {
@@ -6790,7 +6790,7 @@ function create_if_block_2$5(ctx) {
6790
6790
  }
6791
6791
 
6792
6792
  };
6793
- } // (127:4) {#if maxcharcount > 0}
6793
+ } // (126:4) {#if maxcharcount > 0}
6794
6794
 
6795
6795
 
6796
6796
  function create_if_block_1$6(ctx) {
@@ -7272,16 +7272,16 @@ function instance$h($$self, $$props, $$invalidate) {
7272
7272
  width = "30ch"
7273
7273
  } = $$props;
7274
7274
  let {
7275
- arialabel = ""
7275
+ arialabel = null
7276
7276
  } = $$props;
7277
7277
  let {
7278
- min = ""
7278
+ min = null
7279
7279
  } = $$props;
7280
7280
  let {
7281
- max = ""
7281
+ max = null
7282
7282
  } = $$props;
7283
7283
  let {
7284
- step
7284
+ step = null
7285
7285
  } = $$props;
7286
7286
  let {
7287
7287
  showcounter = "false"
@@ -7396,7 +7396,7 @@ function instance$h($$self, $$props, $$invalidate) {
7396
7396
  class Input extends SvelteElement {
7397
7397
  constructor(options) {
7398
7398
  super();
7399
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.container{position:relative;width:100%}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);background:white;display:inline-flex;align-items:center;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{display:flex;align-items:center;margin-left:0.5rem}.goa-input-trailing-icon{display:flex;align-items:center;margin-right:0.5rem}.goa-input-trailing-icon>.goa-icon-button{margin-right:-0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.counter{position:absolute;padding-top:0.25rem;right:0;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
7399
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.container{position:relative;width:100%}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);background:white;display:inline-flex;align-items:center;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[type=date],input[type="datetime-local"],input[type=number]{font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.counter{position:absolute;padding-top:0.25rem;right:0;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
7400
7400
  center center no-repeat}</style>`;
7401
7401
  init(this, {
7402
7402
  target: this.shadowRoot,
@@ -9957,7 +9957,7 @@ function create_if_block_3(ctx) {
9957
9957
  div1 = element("div");
9958
9958
  div1.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;
9959
9959
  attr(div0, "class", "service-level service-level--live");
9960
- attr(div1, "data-testid", "level");
9960
+ attr(div1, "data-testid", "type");
9961
9961
  attr(div1, "class", "site-text");
9962
9962
  },
9963
9963
 
@@ -9974,13 +9974,13 @@ function create_if_block_3(ctx) {
9974
9974
  }
9975
9975
 
9976
9976
  };
9977
- } // (34:2) {#if ["alpha", "beta"].includes(level)}
9977
+ } // (34:2) {#if ["alpha", "beta"].includes(type)}
9978
9978
 
9979
9979
 
9980
9980
  function create_if_block_1$3(ctx) {
9981
9981
  let div0;
9982
9982
  let t0_value = capitalize(
9983
- /*level*/
9983
+ /*type*/
9984
9984
  ctx[0]) + "";
9985
9985
  let t0;
9986
9986
  let div0_class_value;
@@ -10003,9 +10003,9 @@ function create_if_block_1$3(ctx) {
10003
10003
  a.textContent = "Alberta Government";
10004
10004
  t4 = text(" service\n ");
10005
10005
  if (if_block) if_block.c();
10006
- attr(div0, "data-testid", "level");
10006
+ attr(div0, "data-testid", "type");
10007
10007
  attr(div0, "class", div0_class_value = "service-level service-level--" +
10008
- /*level*/
10008
+ /*type*/
10009
10009
  ctx[0].toLowerCase());
10010
10010
  attr(a, "href", "https://www.alberta.ca/index.aspx");
10011
10011
  attr(div1, "data-testid", "site-text");
@@ -10025,15 +10025,15 @@ function create_if_block_1$3(ctx) {
10025
10025
 
10026
10026
  p(ctx, dirty) {
10027
10027
  if (dirty &
10028
- /*level*/
10028
+ /*type*/
10029
10029
  1 && t0_value !== (t0_value = capitalize(
10030
- /*level*/
10030
+ /*type*/
10031
10031
  ctx[0]) + "")) set_data(t0, t0_value);
10032
10032
 
10033
10033
  if (dirty &
10034
- /*level*/
10034
+ /*type*/
10035
10035
  1 && div0_class_value !== (div0_class_value = "service-level service-level--" +
10036
- /*level*/
10036
+ /*type*/
10037
10037
  ctx[0].toLowerCase())) {
10038
10038
  attr(div0, "class", div0_class_value);
10039
10039
  }
@@ -10144,13 +10144,13 @@ function create_fragment$c(ctx) {
10144
10144
  let header;
10145
10145
  let t0;
10146
10146
  let show_if = ["alpha", "beta"].includes(
10147
- /*level*/
10147
+ /*type*/
10148
10148
  ctx[0]);
10149
10149
  let t1;
10150
10150
  let div;
10151
10151
  let t2;
10152
10152
  let if_block0 =
10153
- /*level*/
10153
+ /*type*/
10154
10154
  ctx[0] === "live" && create_if_block_3();
10155
10155
  let if_block1 = show_if && create_if_block_1$3(ctx);
10156
10156
  let if_block2 =
@@ -10184,7 +10184,7 @@ function create_fragment$c(ctx) {
10184
10184
 
10185
10185
  p(ctx, [dirty]) {
10186
10186
  if (
10187
- /*level*/
10187
+ /*type*/
10188
10188
  ctx[0] === "live") {
10189
10189
  if (if_block0) ;else {
10190
10190
  if_block0 = create_if_block_3();
@@ -10197,9 +10197,9 @@ function create_fragment$c(ctx) {
10197
10197
  }
10198
10198
 
10199
10199
  if (dirty &
10200
- /*level*/
10200
+ /*type*/
10201
10201
  1) show_if = ["alpha", "beta"].includes(
10202
- /*level*/
10202
+ /*type*/
10203
10203
  ctx[0]);
10204
10204
 
10205
10205
  if (show_if) {
@@ -10251,7 +10251,7 @@ function capitalize(val) {
10251
10251
 
10252
10252
  function instance$a($$self, $$props, $$invalidate) {
10253
10253
  let {
10254
- level
10254
+ type
10255
10255
  } = $$props;
10256
10256
  let {
10257
10257
  version
@@ -10261,24 +10261,24 @@ function instance$a($$self, $$props, $$invalidate) {
10261
10261
  } = $$props;
10262
10262
 
10263
10263
  $$self.$$set = $$props => {
10264
- if ('level' in $$props) $$invalidate(0, level = $$props.level);
10264
+ if ('type' in $$props) $$invalidate(0, type = $$props.type);
10265
10265
  if ('version' in $$props) $$invalidate(1, version = $$props.version);
10266
10266
  if ('feedbackurl' in $$props) $$invalidate(2, feedbackurl = $$props.feedbackurl);
10267
10267
  };
10268
10268
 
10269
- return [level, version, feedbackurl];
10269
+ return [type, version, feedbackurl];
10270
10270
  }
10271
10271
 
10272
10272
  class MicrositeHeader extends SvelteElement {
10273
10273
  constructor(options) {
10274
10274
  super();
10275
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}a{color:var(--goa-color-interactive);cursor:pointer}a:hover{color:var(--goa-color-interactive--hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive--hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--fs-sm);background-color:var(--color-gray-100);align-items:center;justify-content:space-between;padding:0.5rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-level{font-weight:bold;padding:0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-level--alpha{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.service-level--beta{background-color:var(--goa-color-brand);color:var(--goa-color-text-light)}.service-level--live{padding:0}.site-text{color:var(--goa-color-text);line-height:1.25rem}</style>`;
10275
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}a{color:var(--goa-color-interactive);cursor:pointer}a:hover{color:var(--goa-color-interactive--hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive--hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--fs-sm);background-color:var(--color-gray-100);align-items:center;justify-content:space-between;padding:0.5rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-type{font-weight:bold;padding:0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.service-type--beta{background-color:var(--goa-color-brand);color:var(--goa-color-text-light)}.service-type--live{padding:0}.site-text{color:var(--goa-color-text);line-height:1.25rem}</style>`;
10276
10276
  init(this, {
10277
10277
  target: this.shadowRoot,
10278
10278
  props: attribute_to_object(this.attributes),
10279
10279
  customElement: true
10280
10280
  }, instance$a, create_fragment$c, safe_not_equal, {
10281
- level: 0,
10281
+ type: 0,
10282
10282
  version: 1,
10283
10283
  feedbackurl: 2
10284
10284
  }, null);
@@ -10296,16 +10296,16 @@ class MicrositeHeader extends SvelteElement {
10296
10296
  }
10297
10297
 
10298
10298
  static get observedAttributes() {
10299
- return ["level", "version", "feedbackurl"];
10299
+ return ["type", "version", "feedbackurl"];
10300
10300
  }
10301
10301
 
10302
- get level() {
10302
+ get type() {
10303
10303
  return this.$$.ctx[0];
10304
10304
  }
10305
10305
 
10306
- set level(level) {
10306
+ set type(type) {
10307
10307
  this.$$set({
10308
- level
10308
+ type
10309
10309
  });
10310
10310
  flush();
10311
10311
  }
@@ -13766,44 +13766,48 @@ const GoABadge = ({
13766
13766
  };
13767
13767
  const GoAInfoBadge = ({
13768
13768
  content,
13769
- testId
13769
+ testId,
13770
+ icon
13770
13771
  }) => {
13771
13772
  return jsx(GoABadge, {
13772
13773
  type: "information",
13773
- icon: "information-circle",
13774
+ icon: icon,
13774
13775
  content: content,
13775
13776
  testId: testId
13776
13777
  }, void 0);
13777
13778
  };
13778
13779
  const GoASuccessBadge = ({
13779
13780
  content,
13780
- testId
13781
+ testId,
13782
+ icon
13781
13783
  }) => {
13782
13784
  return jsx(GoABadge, {
13783
13785
  type: "success",
13784
- icon: "checkmark-circle",
13786
+ icon: icon,
13785
13787
  content: content,
13786
13788
  testId: testId
13787
13789
  }, void 0);
13788
13790
  };
13789
- const GoAWarningBadge = ({
13791
+ const GoAImportantBadge = ({
13790
13792
  content,
13791
- testId
13793
+ testId,
13794
+ icon
13792
13795
  }) => {
13793
13796
  return jsx(GoABadge, {
13794
- type: "warning",
13795
- icon: "warning",
13797
+ type: "important",
13798
+ icon: icon,
13796
13799
  content: content,
13797
13800
  testId: testId
13798
13801
  }, void 0);
13799
13802
  };
13800
13803
  const GoAEmergencyBadge = ({
13801
13804
  content,
13802
- testId
13805
+ testId,
13806
+ icon
13803
13807
  }) => {
13804
13808
  return jsx(GoABadge, {
13805
13809
  type: "emergency",
13806
- icon: "alert-circle",
13810
+ icon: icon,
13807
13811
  content: content,
13808
13812
  testId: testId
13809
13813
  }, void 0);
@@ -13920,18 +13924,55 @@ const GoAInputPassword = props => {
13920
13924
  type: "password"
13921
13925
  }), void 0);
13922
13926
  };
13923
- const GoAInputDate = props => {
13927
+ const GoAInputDate = _a => {
13928
+ var {
13929
+ value,
13930
+ min,
13931
+ max
13932
+ } = _a,
13933
+ props = __rest(_a, ["value", "min", "max"]);
13934
+
13935
+ const _value = typeof value === "string" ? new Date(value) : value;
13936
+
13937
+ const _min = min ? format(new Date(min), "yyyy-MM-dd") : "";
13938
+
13939
+ const _max = max ? format(new Date(max), "yyyy-MM-dd") : "";
13940
+
13924
13941
  return jsx(GoAInput, Object.assign({}, props, {
13942
+ min: _min,
13943
+ max: _max,
13944
+ value: format(_value, "yyyy-MM-dd"),
13925
13945
  type: "date"
13926
13946
  }), void 0);
13927
13947
  };
13928
- const GoAInputTime = props => {
13929
- return jsx(GoAInput, Object.assign({}, props, {
13930
- type: "time"
13931
- }), void 0);
13948
+ const GoAInputTime = _a => {
13949
+ var {
13950
+ value
13951
+ } = _a,
13952
+ props = __rest(_a, ["value"]);
13953
+
13954
+ try {
13955
+ const d = typeof value === "string" ? new Date(value) : value;
13956
+ return jsx(GoAInput, Object.assign({}, props, {
13957
+ value: format(d, "hh:mm"),
13958
+ type: "time"
13959
+ }), void 0);
13960
+ } catch (e) {
13961
+ return jsx(GoAInput, Object.assign({}, props, {
13962
+ value: value,
13963
+ type: "time"
13964
+ }), void 0);
13965
+ }
13932
13966
  };
13933
- const GoAInputDateTime = props => {
13967
+ const GoAInputDateTime = _a => {
13968
+ var {
13969
+ value
13970
+ } = _a,
13971
+ props = __rest(_a, ["value"]);
13972
+
13973
+ const d = typeof value === "string" ? new Date(value) : value;
13934
13974
  return jsx(GoAInput, Object.assign({}, props, {
13975
+ value: format(d, "yyyy-MM-dd'T'hh:mm"),
13935
13976
  type: "datetime-local"
13936
13977
  }), void 0);
13937
13978
  };
@@ -14204,10 +14245,10 @@ const GoAContainer = ({
14204
14245
  padding,
14205
14246
  children,
14206
14247
  actions,
14207
- variant: _variant = 'default'
14248
+ variant
14208
14249
  }) => {
14209
14250
  return jsxs("goa-container", Object.assign({
14210
- variant: _variant,
14251
+ variant: variant,
14211
14252
  padding: padding,
14212
14253
  headingsize: headingSize,
14213
14254
  colored: _colored
@@ -14378,12 +14419,12 @@ const GoAIconButton = ({
14378
14419
  };
14379
14420
 
14380
14421
  const GoAMicrositeHeader = ({
14381
- level,
14422
+ type,
14382
14423
  version,
14383
14424
  feedbackUrl
14384
14425
  }) => {
14385
14426
  return jsx("goa-microsite-header", {
14386
- level: level,
14427
+ type: type,
14387
14428
  version: version,
14388
14429
  feedbackurl: feedbackUrl
14389
14430
  }, void 0);
@@ -14648,4 +14689,4 @@ function GoADivider(props) {
14648
14689
  }, void 0);
14649
14690
  }
14650
14691
 
14651
- export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexCol, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPage, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge };
14692
+ export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexCol, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPage, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea };
package/react-components.umd.js CHANGED
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react')) :
3
- typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactComponents = {}, global.jsxRuntime, global.React));
5
- })(this, (function (exports, jsxRuntime, react) { 'use strict';
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('date-fns')) :
3
+ typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', 'date-fns'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactComponents = {}, global.jsxRuntime, global.React, global.dateFns));
5
+ })(this, (function (exports, jsxRuntime, react, dateFns) { 'use strict';
6
6
 
7
7
  function _await(value, then, direct) {
8
8
  if (direct) {
@@ -1730,7 +1730,7 @@
1730
1730
  1) {
1731
1731
  $$invalidate(4, iconType = {
1732
1732
  success: "checkmark-circle",
1733
- warning: "alert-circle",
1733
+ important: "alert-circle",
1734
1734
  information: "information-circle",
1735
1735
  emergency: "warning",
1736
1736
  dark: "information-circle",
@@ -1746,7 +1746,7 @@
1746
1746
  class Badge extends SvelteElement {
1747
1747
  constructor(options) {
1748
1748
  super();
1749
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--fw-regular);margin:0.25rem}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--fs-sm);line-height:var(--lh-sm);padding-bottom:var(--font-valign-fix)}.goa-badge.badge-information{background-color:var(--color-gray-100);color:var(--goa-color-status-info)}.goa-badge.badge-success{background-color:var(--goa-color-status-success);color:var(--goa-color-text-light)}.goa-badge.badge-warning{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.goa-badge.badge-emergency{background-color:var(--goa-color-status-emergency);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--color-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--color-gray-600);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--color-white);color:var(--goa-color-text)}</style>`;
1749
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-badge{display:inline-flex;align-items:center;border-radius:0.25rem;padding:3px 0.5rem;gap:0.25rem;font-weight:var(--fw-regular);margin:0.25rem}.icon-only{padding:0.25rem}.goa-badge-content{text-transform:capitalize;font-size:var(--fs-sm);line-height:var(--lh-sm);padding-bottom:var(--font-valign-fix)}.goa-badge.badge-information{background-color:var(--color-gray-100);color:var(--goa-color-status-info)}.goa-badge.badge-success{background-color:var(--goa-color-status-success);color:var(--goa-color-text-light)}.goa-badge.badge-important{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.goa-badge.badge-emergency{background-color:var(--goa-color-status-emergency);color:var(--goa-color-text-light)}.goa-badge.badge-dark{background-color:var(--color-black);color:var(--goa-color-text-light)}.goa-badge.badge-midtone{background-color:var(--color-gray-600);color:var(--goa-color-text-light)}.goa-badge.badge-light{background-color:var(--color-white);color:var(--goa-color-text)}</style>`;
1750
1750
  init(this, {
1751
1751
  target: this.shadowRoot,
1752
1752
  props: attribute_to_object(this.attributes),
@@ -4114,7 +4114,7 @@
4114
4114
  class Container extends SvelteElement {
4115
4115
  constructor(options) {
4116
4116
  super();
4117
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.colored .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.colored .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.colored .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.colored .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.colored .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title>*,.actions>*{line-height:3rem}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--large{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--large .title{line-height:2rem}.heading--small{height:0.5rem}.heading--none{display:none}.heading--none~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--small .title,.heading--small .actions{display:none}.actions{display:flex;align-items:center}</style>`;
4117
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.colored .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.colored .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.colored .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.colored .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.colored .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--large{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--large .title{line-height:2rem}.heading--small{height:0.5rem}.heading--none{display:none}.heading--none~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--small .title,.heading--small .actions{display:none}.actions{display:flex;align-items:center}</style>`;
4118
4118
  init(this, {
4119
4119
  target: this.shadowRoot,
4120
4120
  props: attribute_to_object(this.attributes),
@@ -6475,7 +6475,7 @@
6475
6475
  /*variant, isInverted*/
6476
6476
  544) {
6477
6477
  // private
6478
- $$invalidate(8, css = `goa-icon-button goa-icon-button--${variant} ${isInverted ? "goa-icon-button--inverted" : ""}`);
6478
+ $$invalidate(8, css = `${variant} ${isInverted ? "inverted" : ""}`);
6479
6479
  }
6480
6480
 
6481
6481
  if ($$self.$$.dirty &
@@ -6501,7 +6501,7 @@
6501
6501
  class IconButton extends SvelteElement {
6502
6502
  constructor(options) {
6503
6503
  super();
6504
- this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}.goa-icon-button,.goa-icon-button *{box-sizing:border-box}.goa-icon-button{display:inline-flex;align-items:center;background:transparent;cursor:pointer;padding:0;border:none}.goa-icon-button--color{border-radius:0.5rem;padding:calc(var(--size) / 4)}.goa-icon-button--color{border-radius:0.5rem;color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.goa-icon-button--color:active,.goa-icon-button--nocolor:active{transform:scale(0.9);border:none}.goa-icon-button--color:hover{background-color:var(--goa-color-primary-light)}.goa-icon-button--color.goa-icon-button--inverted:hover{background-color:var(--goa-color-primary-dark)}.goa-icon-button:disabled{color:var(--color-gray-200);fill:var(--color-gray-200);transform:none;cursor:default}.goa-icon-button:disabled:hover{background-color:transparent}</style>`;
6504
+ this.shadowRoot.innerHTML = `<style>:host{display:inline-flex;align-items:center;box-sizing:border-box;font-family:var(--font-family)}button,button *{box-sizing:border-box}button{display:inline-flex;align-items:center;justify-content:center;background:transparent;cursor:pointer;border:none}.color{border-radius:0.5rem;padding:calc(var(--size) / 4)}.color{border-radius:0.5rem;color:var(--goa-color-interactive);fill:var(--goa-color-interactive);cursor:pointer;transition:background-color 100ms ease-in, transform 100ms ease-in}.color:active,.nocolor:active{transform:scale(0.9);border:none}.color:hover{background-color:var(--goa-color-primary-light)}.color.inverted:hover{background-color:var(--goa-color-primary-dark)}button:disabled{color:var(--color-gray-200);fill:var(--color-gray-200);transform:none;cursor:default}button:disabled:hover{background-color:transparent}</style>`;
6505
6505
  init(this, {
6506
6506
  target: this.shadowRoot,
6507
6507
  props: attribute_to_object(this.attributes),
@@ -6702,7 +6702,6 @@
6702
6702
  return {
6703
6703
  c() {
6704
6704
  goa_icon_button = element("goa-icon-button");
6705
- set_custom_element_data(goa_icon_button, "class", "goa-input-trailing-icon");
6706
6705
  set_custom_element_data(goa_icon_button, "disabled",
6707
6706
  /*isDisabled*/
6708
6707
  ctx[16]);
@@ -6748,7 +6747,7 @@
6748
6747
  }
6749
6748
 
6750
6749
  };
6751
- } // (126:2) {#if showCounter}
6750
+ } // (125:2) {#if showCounter}
6752
6751
 
6753
6752
 
6754
6753
  function create_if_block$a(ctx) {
@@ -6799,7 +6798,7 @@
6799
6798
  }
6800
6799
 
6801
6800
  };
6802
- } // (131:31)
6801
+ } // (130:31)
6803
6802
 
6804
6803
 
6805
6804
  function create_if_block_2$5(ctx) {
@@ -6833,7 +6832,7 @@
6833
6832
  }
6834
6833
 
6835
6834
  };
6836
- } // (127:4) {#if maxcharcount > 0}
6835
+ } // (126:4) {#if maxcharcount > 0}
6837
6836
 
6838
6837
 
6839
6838
  function create_if_block_1$6(ctx) {
@@ -7315,16 +7314,16 @@
7315
7314
  width = "30ch"
7316
7315
  } = $$props;
7317
7316
  let {
7318
- arialabel = ""
7317
+ arialabel = null
7319
7318
  } = $$props;
7320
7319
  let {
7321
- min = ""
7320
+ min = null
7322
7321
  } = $$props;
7323
7322
  let {
7324
- max = ""
7323
+ max = null
7325
7324
  } = $$props;
7326
7325
  let {
7327
- step
7326
+ step = null
7328
7327
  } = $$props;
7329
7328
  let {
7330
7329
  showcounter = "false"
@@ -7439,7 +7438,7 @@
7439
7438
  class Input extends SvelteElement {
7440
7439
  constructor(options) {
7441
7440
  super();
7442
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.container{position:relative;width:100%}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);background:white;display:inline-flex;align-items:center;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{display:flex;align-items:center;margin-left:0.5rem}.goa-input-trailing-icon{display:flex;align-items:center;margin-right:0.5rem}.goa-input-trailing-icon>.goa-icon-button{margin-right:-0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.counter{position:absolute;padding-top:0.25rem;right:0;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
7441
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.container{position:relative;width:100%}@media(min-width: 640px){.container{width:var(--width)}}.goa-input,.goa-input *{box-sizing:border-box}.goa-input{box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--color-gray-600);border-radius:var(--input-border-radius);background:white;display:inline-flex;align-items:center;vertical-align:middle;min-width:100%}.goa-input:hover{border-color:var(--goa-color-interactive--hover)}.goa-input:active,.goa-input:focus,.goa-input:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive--focus)}.goa-input.type--range{border:none}.goa-input.type--range:active,.goa-input.type--range:focus,.goa-input.type--range:focus-within{box-shadow:none}.goa-input-leading-icon{margin-left:0.5rem}.goa-input-trailing-icon{margin-right:0.5rem}input{display:inline-block;color:var(--goa-color-text);font-size:var(--input-font-size);padding:var(--input-padding);line-height:calc(40px - calc(var(--input-padding) * 2));background-color:transparent;width:0;flex:1 1 auto}input[type=date],input[type="datetime-local"],input[type=number]{font-family:var(--font-family)}input[readonly]{cursor:pointer}.goa-input-leading-icon+input{padding-left:0.5rem}input,input:focus,input:hover,input:active{outline:none;border:none}.goa-input--disabled,.goa-input--disabled:hover,.goa-input--disabled:active,.goa-input--disabled:focus{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:default;box-shadow:none}.goa-input--disabled input,.goa-input--disabled input:hover,.goa-input--disabled input:active,.goa-input--disabled input:focus{color:var(--goa-color-text-secondary)}.goa-input--disabled input:hover{cursor:default !important}input.input--goa{display:block;border:none;flex:1 1 auto}.variant--bare{border:none}.variant--bare:focus,.variant--bare:active,.variant--bare:focus-within{box-shadow:none}.counter{position:absolute;padding-top:0.25rem;right:0;font-size:var(--fs-sm)}.counter-error{color:var(--goa-color-interactive--error)}.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive--error)}input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button{position:relative;right:var(--search-icon-offset);cursor:pointer;-webkit-appearance:none;height:1.2rem;width:1.2rem;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23333" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"/></svg>')
7443
7442
  center center no-repeat}</style>`;
7444
7443
  init(this, {
7445
7444
  target: this.shadowRoot,
@@ -10003,7 +10002,7 @@
10003
10002
  div1 = element("div");
10004
10003
  div1.innerHTML = `An official site of the <a href="https://www.alberta.ca/index.aspx">Alberta Government</a>`;
10005
10004
  attr(div0, "class", "service-level service-level--live");
10006
- attr(div1, "data-testid", "level");
10005
+ attr(div1, "data-testid", "type");
10007
10006
  attr(div1, "class", "site-text");
10008
10007
  },
10009
10008
 
@@ -10020,13 +10019,13 @@
10020
10019
  }
10021
10020
 
10022
10021
  };
10023
- } // (34:2) {#if ["alpha", "beta"].includes(level)}
10022
+ } // (34:2) {#if ["alpha", "beta"].includes(type)}
10024
10023
 
10025
10024
 
10026
10025
  function create_if_block_1$3(ctx) {
10027
10026
  let div0;
10028
10027
  let t0_value = capitalize(
10029
- /*level*/
10028
+ /*type*/
10030
10029
  ctx[0]) + "";
10031
10030
  let t0;
10032
10031
  let div0_class_value;
@@ -10049,9 +10048,9 @@
10049
10048
  a.textContent = "Alberta Government";
10050
10049
  t4 = text(" service\n ");
10051
10050
  if (if_block) if_block.c();
10052
- attr(div0, "data-testid", "level");
10051
+ attr(div0, "data-testid", "type");
10053
10052
  attr(div0, "class", div0_class_value = "service-level service-level--" +
10054
- /*level*/
10053
+ /*type*/
10055
10054
  ctx[0].toLowerCase());
10056
10055
  attr(a, "href", "https://www.alberta.ca/index.aspx");
10057
10056
  attr(div1, "data-testid", "site-text");
@@ -10071,15 +10070,15 @@
10071
10070
 
10072
10071
  p(ctx, dirty) {
10073
10072
  if (dirty &
10074
- /*level*/
10073
+ /*type*/
10075
10074
  1 && t0_value !== (t0_value = capitalize(
10076
- /*level*/
10075
+ /*type*/
10077
10076
  ctx[0]) + "")) set_data(t0, t0_value);
10078
10077
 
10079
10078
  if (dirty &
10080
- /*level*/
10079
+ /*type*/
10081
10080
  1 && div0_class_value !== (div0_class_value = "service-level service-level--" +
10082
- /*level*/
10081
+ /*type*/
10083
10082
  ctx[0].toLowerCase())) {
10084
10083
  attr(div0, "class", div0_class_value);
10085
10084
  }
@@ -10190,13 +10189,13 @@
10190
10189
  let header;
10191
10190
  let t0;
10192
10191
  let show_if = ["alpha", "beta"].includes(
10193
- /*level*/
10192
+ /*type*/
10194
10193
  ctx[0]);
10195
10194
  let t1;
10196
10195
  let div;
10197
10196
  let t2;
10198
10197
  let if_block0 =
10199
- /*level*/
10198
+ /*type*/
10200
10199
  ctx[0] === "live" && create_if_block_3();
10201
10200
  let if_block1 = show_if && create_if_block_1$3(ctx);
10202
10201
  let if_block2 =
@@ -10230,7 +10229,7 @@
10230
10229
 
10231
10230
  p(ctx, [dirty]) {
10232
10231
  if (
10233
- /*level*/
10232
+ /*type*/
10234
10233
  ctx[0] === "live") {
10235
10234
  if (if_block0) ;else {
10236
10235
  if_block0 = create_if_block_3();
@@ -10243,9 +10242,9 @@
10243
10242
  }
10244
10243
 
10245
10244
  if (dirty &
10246
- /*level*/
10245
+ /*type*/
10247
10246
  1) show_if = ["alpha", "beta"].includes(
10248
- /*level*/
10247
+ /*type*/
10249
10248
  ctx[0]);
10250
10249
 
10251
10250
  if (show_if) {
@@ -10297,7 +10296,7 @@
10297
10296
 
10298
10297
  function instance$a($$self, $$props, $$invalidate) {
10299
10298
  let {
10300
- level
10299
+ type
10301
10300
  } = $$props;
10302
10301
  let {
10303
10302
  version
@@ -10307,24 +10306,24 @@
10307
10306
  } = $$props;
10308
10307
 
10309
10308
  $$self.$$set = $$props => {
10310
- if ('level' in $$props) $$invalidate(0, level = $$props.level);
10309
+ if ('type' in $$props) $$invalidate(0, type = $$props.type);
10311
10310
  if ('version' in $$props) $$invalidate(1, version = $$props.version);
10312
10311
  if ('feedbackurl' in $$props) $$invalidate(2, feedbackurl = $$props.feedbackurl);
10313
10312
  };
10314
10313
 
10315
- return [level, version, feedbackurl];
10314
+ return [type, version, feedbackurl];
10316
10315
  }
10317
10316
 
10318
10317
  class MicrositeHeader extends SvelteElement {
10319
10318
  constructor(options) {
10320
10319
  super();
10321
- this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}a{color:var(--goa-color-interactive);cursor:pointer}a:hover{color:var(--goa-color-interactive--hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive--hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--fs-sm);background-color:var(--color-gray-100);align-items:center;justify-content:space-between;padding:0.5rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-level{font-weight:bold;padding:0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-level--alpha{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.service-level--beta{background-color:var(--goa-color-brand);color:var(--goa-color-text-light)}.service-level--live{padding:0}.site-text{color:var(--goa-color-text);line-height:1.25rem}</style>`;
10320
+ this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}a{color:var(--goa-color-interactive);cursor:pointer}a:hover{color:var(--goa-color-interactive--hover)}a:focus{outline-width:thin;outline-style:solid;outline-color:var(--goa-color-interactive--hover);outline-offset:0px}.goa-official-site-header{display:flex;font-size:var(--fs-sm);background-color:var(--color-gray-100);align-items:center;justify-content:space-between;padding:0.5rem 1.5rem}@media(max-width: 640px){.goa-official-site-header{padding:0.5rem 1rem;align-items:start}}.spacer{flex:1 1 auto}.version{color:var(--goa-color-text-secondary);padding-left:1rem;line-height:1.25rem}.service-type{font-weight:bold;padding:0.25rem;display:flex;margin-right:1rem;line-height:initial}.service-type--alpha{background-color:var(--goa-color-status-warning);color:var(--goa-color-text)}.service-type--beta{background-color:var(--goa-color-brand);color:var(--goa-color-text-light)}.service-type--live{padding:0}.site-text{color:var(--goa-color-text);line-height:1.25rem}</style>`;
10322
10321
  init(this, {
10323
10322
  target: this.shadowRoot,
10324
10323
  props: attribute_to_object(this.attributes),
10325
10324
  customElement: true
10326
10325
  }, instance$a, create_fragment$c, safe_not_equal, {
10327
- level: 0,
10326
+ type: 0,
10328
10327
  version: 1,
10329
10328
  feedbackurl: 2
10330
10329
  }, null);
@@ -10342,16 +10341,16 @@
10342
10341
  }
10343
10342
 
10344
10343
  static get observedAttributes() {
10345
- return ["level", "version", "feedbackurl"];
10344
+ return ["type", "version", "feedbackurl"];
10346
10345
  }
10347
10346
 
10348
- get level() {
10347
+ get type() {
10349
10348
  return this.$$.ctx[0];
10350
10349
  }
10351
10350
 
10352
- set level(level) {
10351
+ set type(type) {
10353
10352
  this.$$set({
10354
- level
10353
+ type
10355
10354
  });
10356
10355
  flush();
10357
10356
  }
@@ -13813,40 +13812,44 @@
13813
13812
  };
13814
13813
  var GoAInfoBadge = function GoAInfoBadge(_a) {
13815
13814
  var content = _a.content,
13816
- testId = _a.testId;
13815
+ testId = _a.testId,
13816
+ icon = _a.icon;
13817
13817
  return jsxRuntime.jsx(GoABadge, {
13818
13818
  type: "information",
13819
- icon: "information-circle",
13819
+ icon: icon,
13820
13820
  content: content,
13821
13821
  testId: testId
13822
13822
  }, void 0);
13823
13823
  };
13824
13824
  var GoASuccessBadge = function GoASuccessBadge(_a) {
13825
13825
  var content = _a.content,
13826
- testId = _a.testId;
13826
+ testId = _a.testId,
13827
+ icon = _a.icon;
13827
13828
  return jsxRuntime.jsx(GoABadge, {
13828
13829
  type: "success",
13829
- icon: "checkmark-circle",
13830
+ icon: icon,
13830
13831
  content: content,
13831
13832
  testId: testId
13832
13833
  }, void 0);
13833
13834
  };
13834
- var GoAWarningBadge = function GoAWarningBadge(_a) {
13835
+ var GoAImportantBadge = function GoAImportantBadge(_a) {
13835
13836
  var content = _a.content,
13836
- testId = _a.testId;
13837
+ testId = _a.testId,
13838
+ icon = _a.icon;
13837
13839
  return jsxRuntime.jsx(GoABadge, {
13838
- type: "warning",
13839
- icon: "warning",
13840
+ type: "important",
13841
+ icon: icon,
13840
13842
  content: content,
13841
13843
  testId: testId
13842
13844
  }, void 0);
13843
13845
  };
13844
13846
  var GoAEmergencyBadge = function GoAEmergencyBadge(_a) {
13845
13847
  var content = _a.content,
13846
- testId = _a.testId;
13848
+ testId = _a.testId,
13849
+ icon = _a.icon;
13847
13850
  return jsxRuntime.jsx(GoABadge, {
13848
13851
  type: "emergency",
13849
- icon: "alert-circle",
13852
+ icon: icon,
13850
13853
  content: content,
13851
13854
  testId: testId
13852
13855
  }, void 0);
@@ -13973,18 +13976,49 @@
13973
13976
  type: "password"
13974
13977
  }), void 0);
13975
13978
  };
13976
- var GoAInputDate = function GoAInputDate(props) {
13979
+ var GoAInputDate = function GoAInputDate(_a) {
13980
+ var value = _a.value,
13981
+ min = _a.min,
13982
+ max = _a.max,
13983
+ props = __rest(_a, ["value", "min", "max"]);
13984
+
13985
+ var _value = typeof value === "string" ? new Date(value) : value;
13986
+
13987
+ var _min = min ? dateFns.format(new Date(min), "yyyy-MM-dd") : "";
13988
+
13989
+ var _max = max ? dateFns.format(new Date(max), "yyyy-MM-dd") : "";
13990
+
13977
13991
  return jsxRuntime.jsx(GoAInput, __assign({}, props, {
13992
+ min: _min,
13993
+ max: _max,
13994
+ value: dateFns.format(_value, "yyyy-MM-dd"),
13978
13995
  type: "date"
13979
13996
  }), void 0);
13980
13997
  };
13981
- var GoAInputTime = function GoAInputTime(props) {
13982
- return jsxRuntime.jsx(GoAInput, __assign({}, props, {
13983
- type: "time"
13984
- }), void 0);
13998
+ var GoAInputTime = function GoAInputTime(_a) {
13999
+ var value = _a.value,
14000
+ props = __rest(_a, ["value"]);
14001
+
14002
+ try {
14003
+ var d = typeof value === "string" ? new Date(value) : value;
14004
+ return jsxRuntime.jsx(GoAInput, __assign({}, props, {
14005
+ value: dateFns.format(d, "hh:mm"),
14006
+ type: "time"
14007
+ }), void 0);
14008
+ } catch (e) {
14009
+ return jsxRuntime.jsx(GoAInput, __assign({}, props, {
14010
+ value: value,
14011
+ type: "time"
14012
+ }), void 0);
14013
+ }
13985
14014
  };
13986
- var GoAInputDateTime = function GoAInputDateTime(props) {
14015
+ var GoAInputDateTime = function GoAInputDateTime(_a) {
14016
+ var value = _a.value,
14017
+ props = __rest(_a, ["value"]);
14018
+
14019
+ var d = typeof value === "string" ? new Date(value) : value;
13987
14020
  return jsxRuntime.jsx(GoAInput, __assign({}, props, {
14021
+ value: dateFns.format(d, "yyyy-MM-dd'T'hh:mm"),
13988
14022
  type: "datetime-local"
13989
14023
  }), void 0);
13990
14024
  };
@@ -14259,8 +14293,7 @@
14259
14293
  padding = _a.padding,
14260
14294
  children = _a.children,
14261
14295
  actions = _a.actions,
14262
- _c = _a.variant,
14263
- variant = _c === void 0 ? 'default' : _c;
14296
+ variant = _a.variant;
14264
14297
  return jsxRuntime.jsxs("goa-container", __assign({
14265
14298
  variant: variant,
14266
14299
  padding: padding,
@@ -14430,11 +14463,11 @@
14430
14463
  };
14431
14464
 
14432
14465
  var GoAMicrositeHeader = function GoAMicrositeHeader(_a) {
14433
- var level = _a.level,
14466
+ var type = _a.type,
14434
14467
  version = _a.version,
14435
14468
  feedbackUrl = _a.feedbackUrl;
14436
14469
  return jsxRuntime.jsx("goa-microsite-header", {
14437
- level: level,
14470
+ type: type,
14438
14471
  version: version,
14439
14472
  feedbackurl: feedbackUrl
14440
14473
  }, void 0);
@@ -14716,6 +14749,7 @@
14716
14749
  exports.GoAHeroBannerActions = GoAHeroBannerActions;
14717
14750
  exports.GoAIcon = GoAIcon;
14718
14751
  exports.GoAIconButton = GoAIconButton;
14752
+ exports.GoAImportantBadge = GoAImportantBadge;
14719
14753
  exports.GoAInfoBadge = GoAInfoBadge;
14720
14754
  exports.GoAInput = GoAInput;
14721
14755
  exports.GoAInputDate = GoAInputDate;
@@ -14742,7 +14776,6 @@
14742
14776
  exports.GoASpinner = GoASpinner;
14743
14777
  exports.GoASuccessBadge = GoASuccessBadge;
14744
14778
  exports.GoATextArea = GoATextArea;
14745
- exports.GoAWarningBadge = GoAWarningBadge;
14746
14779
 
14747
14780
  Object.defineProperty(exports, '__esModule', { value: true });
14748
14781