@abgov/react-components 4.0.0-alpha.35 → 4.0.0-alpha.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/button/button.d.ts
CHANGED
|
@@ -2,8 +2,8 @@ import React, { FC, ReactNode } from 'react';
|
|
|
2
2
|
import './button.css';
|
|
3
3
|
import { GoAIconType } from '../icons';
|
|
4
4
|
export declare type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'start';
|
|
5
|
-
export declare type ButtonSize = 'compact' | '';
|
|
6
|
-
export declare type ButtonVariant = '' | 'destructive';
|
|
5
|
+
export declare type ButtonSize = 'compact' | 'normal';
|
|
6
|
+
export declare type ButtonVariant = 'normal' | 'destructive';
|
|
7
7
|
interface WCProps {
|
|
8
8
|
type?: ButtonType;
|
|
9
9
|
size?: ButtonSize;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React, { FC, ReactNode } from 'react';
|
|
2
|
-
declare type ContainerVariant = '
|
|
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
|
|
7
|
-
headingsize
|
|
8
|
-
colored
|
|
9
|
-
padding
|
|
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
|
|
19
|
+
headingSize?: HeadingSize;
|
|
20
20
|
variant?: ContainerVariant;
|
|
21
21
|
title?: ReactNode;
|
|
22
22
|
colored?: boolean;
|
|
23
|
-
padding
|
|
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
|
-
|
|
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
|
-
|
|
67
|
-
|
|
68
|
-
|
|
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@abgov/react-components",
|
|
3
|
-
"version": "4.0.0-alpha.
|
|
3
|
+
"version": "4.0.0-alpha.38",
|
|
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
|
|
|
@@ -2114,8 +2115,8 @@ function instance$w($$self, $$props, $$invalidate) {
|
|
|
2114
2115
|
let isDisabled;
|
|
2115
2116
|
let isButtonDark;
|
|
2116
2117
|
const BUTTON_TYPES = ["primary", "secondary", "tertiary", "start"];
|
|
2117
|
-
const SIZES = ["", "compact"];
|
|
2118
|
-
const VARIANTS = ["", "destructive"]; // type check functions
|
|
2118
|
+
const SIZES = ["normal", "compact"];
|
|
2119
|
+
const VARIANTS = ["normal", "destructive"]; // type check functions
|
|
2119
2120
|
|
|
2120
2121
|
function isButtonType(value) {
|
|
2121
2122
|
return BUTTON_TYPES.includes(value);
|
|
@@ -2133,10 +2134,10 @@ function instance$w($$self, $$props, $$invalidate) {
|
|
|
2133
2134
|
type = "primary"
|
|
2134
2135
|
} = $$props;
|
|
2135
2136
|
let {
|
|
2136
|
-
size = ""
|
|
2137
|
+
size = "normal"
|
|
2137
2138
|
} = $$props;
|
|
2138
2139
|
let {
|
|
2139
|
-
variant = ""
|
|
2140
|
+
variant = "normal"
|
|
2140
2141
|
} = $$props;
|
|
2141
2142
|
let {
|
|
2142
2143
|
title = ""
|
|
@@ -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
|
|
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 =
|
|
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)}
|
|
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
|
-
} // (
|
|
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
|
-
} // (
|
|
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
|
-
} // (
|
|
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{
|
|
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,
|
|
@@ -13924,18 +13924,55 @@ const GoAInputPassword = props => {
|
|
|
13924
13924
|
type: "password"
|
|
13925
13925
|
}), void 0);
|
|
13926
13926
|
};
|
|
13927
|
-
const GoAInputDate =
|
|
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
|
+
|
|
13928
13941
|
return jsx(GoAInput, Object.assign({}, props, {
|
|
13942
|
+
min: _min,
|
|
13943
|
+
max: _max,
|
|
13944
|
+
value: format(_value, "yyyy-MM-dd"),
|
|
13929
13945
|
type: "date"
|
|
13930
13946
|
}), void 0);
|
|
13931
13947
|
};
|
|
13932
|
-
const GoAInputTime =
|
|
13933
|
-
|
|
13934
|
-
|
|
13935
|
-
}
|
|
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
|
+
}
|
|
13936
13966
|
};
|
|
13937
|
-
const GoAInputDateTime =
|
|
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;
|
|
13938
13974
|
return jsx(GoAInput, Object.assign({}, props, {
|
|
13975
|
+
value: format(d, "yyyy-MM-dd'T'hh:mm"),
|
|
13939
13976
|
type: "datetime-local"
|
|
13940
13977
|
}), void 0);
|
|
13941
13978
|
};
|
|
@@ -14044,8 +14081,8 @@ const GoAButton = ({
|
|
|
14044
14081
|
title,
|
|
14045
14082
|
disabled: _disabled = false,
|
|
14046
14083
|
type: _type = 'primary',
|
|
14047
|
-
size
|
|
14048
|
-
variant
|
|
14084
|
+
size,
|
|
14085
|
+
variant,
|
|
14049
14086
|
leadingIcon,
|
|
14050
14087
|
trailingIcon,
|
|
14051
14088
|
children,
|
|
@@ -14072,8 +14109,8 @@ const GoAButton = ({
|
|
|
14072
14109
|
ref: el,
|
|
14073
14110
|
role: "button",
|
|
14074
14111
|
type: _type,
|
|
14075
|
-
size:
|
|
14076
|
-
variant:
|
|
14112
|
+
size: size,
|
|
14113
|
+
variant: variant,
|
|
14077
14114
|
disabled: _disabled,
|
|
14078
14115
|
title: title,
|
|
14079
14116
|
leadingicon: leadingIcon,
|
|
@@ -14208,10 +14245,10 @@ const GoAContainer = ({
|
|
|
14208
14245
|
padding,
|
|
14209
14246
|
children,
|
|
14210
14247
|
actions,
|
|
14211
|
-
variant
|
|
14248
|
+
variant
|
|
14212
14249
|
}) => {
|
|
14213
14250
|
return jsxs("goa-container", Object.assign({
|
|
14214
|
-
variant:
|
|
14251
|
+
variant: variant,
|
|
14215
14252
|
padding: padding,
|
|
14216
14253
|
headingsize: headingSize,
|
|
14217
14254
|
colored: _colored
|
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) {
|
|
@@ -2170,8 +2170,8 @@
|
|
|
2170
2170
|
let isDisabled;
|
|
2171
2171
|
let isButtonDark;
|
|
2172
2172
|
const BUTTON_TYPES = ["primary", "secondary", "tertiary", "start"];
|
|
2173
|
-
const SIZES = ["", "compact"];
|
|
2174
|
-
const VARIANTS = ["", "destructive"]; // type check functions
|
|
2173
|
+
const SIZES = ["normal", "compact"];
|
|
2174
|
+
const VARIANTS = ["normal", "destructive"]; // type check functions
|
|
2175
2175
|
|
|
2176
2176
|
function isButtonType(value) {
|
|
2177
2177
|
return BUTTON_TYPES.includes(value);
|
|
@@ -2189,10 +2189,10 @@
|
|
|
2189
2189
|
type = "primary"
|
|
2190
2190
|
} = $$props;
|
|
2191
2191
|
let {
|
|
2192
|
-
size = ""
|
|
2192
|
+
size = "normal"
|
|
2193
2193
|
} = $$props;
|
|
2194
2194
|
let {
|
|
2195
|
-
variant = ""
|
|
2195
|
+
variant = "normal"
|
|
2196
2196
|
} = $$props;
|
|
2197
2197
|
let {
|
|
2198
2198
|
title = ""
|
|
@@ -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
|
|
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 =
|
|
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)}
|
|
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
|
-
} // (
|
|
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
|
-
} // (
|
|
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
|
-
} // (
|
|
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{
|
|
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,
|
|
@@ -13977,18 +13976,49 @@
|
|
|
13977
13976
|
type: "password"
|
|
13978
13977
|
}), void 0);
|
|
13979
13978
|
};
|
|
13980
|
-
var GoAInputDate = function GoAInputDate(
|
|
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
|
+
|
|
13981
13991
|
return jsxRuntime.jsx(GoAInput, __assign({}, props, {
|
|
13992
|
+
min: _min,
|
|
13993
|
+
max: _max,
|
|
13994
|
+
value: dateFns.format(_value, "yyyy-MM-dd"),
|
|
13982
13995
|
type: "date"
|
|
13983
13996
|
}), void 0);
|
|
13984
13997
|
};
|
|
13985
|
-
var GoAInputTime = function GoAInputTime(
|
|
13986
|
-
|
|
13987
|
-
|
|
13988
|
-
|
|
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
|
+
}
|
|
13989
14014
|
};
|
|
13990
|
-
var GoAInputDateTime = function GoAInputDateTime(
|
|
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;
|
|
13991
14020
|
return jsxRuntime.jsx(GoAInput, __assign({}, props, {
|
|
14021
|
+
value: dateFns.format(d, "yyyy-MM-dd'T'hh:mm"),
|
|
13992
14022
|
type: "datetime-local"
|
|
13993
14023
|
}), void 0);
|
|
13994
14024
|
};
|
|
@@ -14098,10 +14128,8 @@
|
|
|
14098
14128
|
disabled = _b === void 0 ? false : _b,
|
|
14099
14129
|
_c = _a.type,
|
|
14100
14130
|
type = _c === void 0 ? 'primary' : _c,
|
|
14101
|
-
|
|
14102
|
-
|
|
14103
|
-
_e = _a.variant,
|
|
14104
|
-
variant = _e === void 0 ? '' : _e,
|
|
14131
|
+
size = _a.size,
|
|
14132
|
+
variant = _a.variant,
|
|
14105
14133
|
leadingIcon = _a.leadingIcon,
|
|
14106
14134
|
trailingIcon = _a.trailingIcon,
|
|
14107
14135
|
children = _a.children,
|
|
@@ -14263,8 +14291,7 @@
|
|
|
14263
14291
|
padding = _a.padding,
|
|
14264
14292
|
children = _a.children,
|
|
14265
14293
|
actions = _a.actions,
|
|
14266
|
-
|
|
14267
|
-
variant = _c === void 0 ? 'default' : _c;
|
|
14294
|
+
variant = _a.variant;
|
|
14268
14295
|
return jsxRuntime.jsxs("goa-container", __assign({
|
|
14269
14296
|
variant: variant,
|
|
14270
14297
|
padding: padding,
|