@tmorrow/cre8-wc 1.0.26 → 1.1.1
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/cdn/cre8-wc.esm.js +9082 -15604
- package/cdn/cre8-wc.esm.js.map +1 -1
- package/cdn/cre8-wc.min.js +1231 -8308
- package/cdn/cre8-wc.min.js.map +1 -1
- package/lib/cdn-entry.d.ts +20 -2
- package/lib/cdn-entry.d.ts.map +1 -1
- package/lib/components/accordion/accordion.js +18 -64
- package/lib/components/accordion/accordion.styles.d.ts.map +1 -1
- package/lib/components/accordion-item/accordion-item.js +35 -238
- package/lib/components/accordion-item/accordion-item.styles.d.ts.map +1 -1
- package/lib/components/alert/alert.js +56 -221
- package/lib/components/alert/alert.styles.d.ts.map +1 -1
- package/lib/components/badge/badge.js +33 -164
- package/lib/components/badge/badge.styles.d.ts.map +1 -1
- package/lib/components/band/band.js +11 -261
- package/lib/components/band/band.styles.d.ts.map +1 -1
- package/lib/components/breadcrumbs/breadcrumbs.js +14 -33
- package/lib/components/breadcrumbs/breadcrumbs.styles.d.ts.map +1 -1
- package/lib/components/breadcrumbs-item/breadcrumbs-item.js +10 -45
- package/lib/components/breadcrumbs-item/breadcrumbs-item.styles.d.ts.map +1 -1
- package/lib/components/button/button.js +14 -14
- package/lib/components/button-group/button-group.js +10 -261
- package/lib/components/button-group/button-group.styles.d.ts.map +1 -1
- package/lib/components/card/card.js +17 -130
- package/lib/components/card/card.styles.d.ts.map +1 -1
- package/lib/components/chart/chart.js +137 -223
- package/lib/components/chart/chart.styles.d.ts.map +1 -1
- package/lib/components/checkbox-field/checkbox-field.js +26 -59
- package/lib/components/checkbox-field/checkbox-field.styles.d.ts.map +1 -1
- package/lib/components/checkbox-field-item/checkbox-field-item.js +38 -205
- package/lib/components/checkbox-field-item/checkbox-field-item.styles.d.ts.map +1 -1
- package/lib/components/danger-button/danger-button.js +53 -582
- package/lib/components/danger-button/danger-button.styles.d.ts.map +1 -1
- package/lib/components/date-picker/calendar/calendar.styles.d.ts.map +1 -1
- package/lib/components/date-picker/calendar-month-modal/calendar-month-modal.styles.d.ts.map +1 -1
- package/lib/components/date-picker/calendar-navigation/calendar-navigation.styles.d.ts.map +1 -1
- package/lib/components/date-picker/calendar-year-modal/calendar-year-modal.styles.d.ts.map +1 -1
- package/lib/components/date-picker/date-picker.js +262 -499
- package/lib/components/date-picker/date-picker.styles.d.ts.map +1 -1
- package/lib/components/divider/divider.js +20 -61
- package/lib/components/divider/divider.styles.d.ts.map +1 -1
- package/lib/components/dropdown/dropdown.js +34 -107
- package/lib/components/dropdown/dropdown.styles.d.ts.map +1 -1
- package/lib/components/dropdown-item/dropdown-item.js +18 -49
- package/lib/components/dropdown-item/dropdown-item.styles.d.ts.map +1 -1
- package/lib/components/feature/feature.js +19 -81
- package/lib/components/feature/feature.styles.d.ts.map +1 -1
- package/lib/components/field/field.js +12 -146
- package/lib/components/field/field.styles.d.ts.map +1 -1
- package/lib/components/field-note/field-note.js +22 -66
- package/lib/components/field-note/field-note.styles.d.ts.map +1 -1
- package/lib/components/footer/footer.js +10 -29
- package/lib/components/footer/footer.styles.d.ts.map +1 -1
- package/lib/components/global-nav/global-nav.js +20 -43
- package/lib/components/global-nav/global-nav.styles.d.ts.map +1 -1
- package/lib/components/global-nav-item/global-nav-item.js +26 -105
- package/lib/components/global-nav-item/global-nav-item.styles.d.ts.map +1 -1
- package/lib/components/grid/grid.js +15 -337
- package/lib/components/grid/grid.styles.d.ts.map +1 -1
- package/lib/components/grid-item/grid-item.js +7 -15
- package/lib/components/grid-item/grid-item.styles.d.ts.map +1 -1
- package/lib/components/header/header.js +17 -80
- package/lib/components/header/header.styles.d.ts.map +1 -1
- package/lib/components/heading/heading.js +16 -153
- package/lib/components/heading/heading.styles.d.ts.map +1 -1
- package/lib/components/hero/hero.js +17 -149
- package/lib/components/hero/hero.styles.d.ts.map +1 -1
- package/lib/components/icon/icon.js +1 -1
- package/lib/components/icon/icon.styles.d.ts.map +1 -1
- package/lib/components/inline-alert/inline-alert.js +53 -214
- package/lib/components/inline-alert/inline-alert.styles.d.ts.map +1 -1
- package/lib/components/layout/layout.js +20 -53
- package/lib/components/layout/layout.styles.d.ts.map +1 -1
- package/lib/components/layout-container/layout-container.js +20 -43
- package/lib/components/layout-container/layout-container.styles.d.ts.map +1 -1
- package/lib/components/layout-section/layout-section.js +20 -29
- package/lib/components/layout-section/layout-section.styles.d.ts.map +1 -1
- package/lib/components/linelength-container/linelength-container.js +7 -15
- package/lib/components/linelength-container/linelength-container.styles.d.ts.map +1 -1
- package/lib/components/link/link.js +33 -228
- package/lib/components/link/link.styles.d.ts.map +1 -1
- package/lib/components/link-list/link-list.js +23 -129
- package/lib/components/link-list/link-list.styles.d.ts.map +1 -1
- package/lib/components/link-list-item/link-list-item.js +19 -80
- package/lib/components/link-list-item/link-list-item.styles.d.ts.map +1 -1
- package/lib/components/list/list.js +17 -67
- package/lib/components/list/list.styles.d.ts.map +1 -1
- package/lib/components/list-item/list-item.js +11 -16
- package/lib/components/list-item/list-item.styles.d.ts.map +1 -1
- package/lib/components/loading-spinner/loading-spinner.js +13 -157
- package/lib/components/loading-spinner/loading-spinner.styles.d.ts.map +1 -1
- package/lib/components/logo/logo.js +20 -30
- package/lib/components/logo/logo.styles.d.ts.map +1 -1
- package/lib/components/main/main.js +18 -42
- package/lib/components/main/main.styles.d.ts.map +1 -1
- package/lib/components/modal/modal.js +50 -215
- package/lib/components/modal/modal.styles.d.ts.map +1 -1
- package/lib/components/multi-select/multi-select.js +71 -532
- package/lib/components/multi-select/multi-select.styles.d.ts.map +1 -1
- package/lib/components/nav-container/nav-container.js +5 -40
- package/lib/components/nav-container/nav-container.styles.d.ts.map +1 -1
- package/lib/components/page-header/page-header.js +19 -54
- package/lib/components/page-header/page-header.styles.d.ts.map +1 -1
- package/lib/components/pagination/page-counter/page-counter.styles.d.ts.map +1 -1
- package/lib/components/pagination/pagination.js +102 -183
- package/lib/components/pagination/pagination.styles.d.ts.map +1 -1
- package/lib/components/percent-bar/percent-bar.js +22 -50
- package/lib/components/percent-bar/percent-bar.styles.d.ts.map +1 -1
- package/lib/components/popover/popover.js +51 -220
- package/lib/components/popover/popover.styles.d.ts.map +1 -1
- package/lib/components/primary-nav/primary-nav.js +17 -51
- package/lib/components/primary-nav/primary-nav.styles.d.ts.map +1 -1
- package/lib/components/primary-nav-item/primary-nav-item.js +24 -191
- package/lib/components/primary-nav-item/primary-nav-item.styles.d.ts.map +1 -1
- package/lib/components/progress-meter/progress-meter.js +23 -127
- package/lib/components/progress-meter/progress-meter.styles.d.ts.map +1 -1
- package/lib/components/progress-steps/progress-steps.styles.d.ts.map +1 -1
- package/lib/components/progress-steps-item/progress-steps-item.js +27 -118
- package/lib/components/progress-steps-item/progress-steps-item.styles.d.ts.map +1 -1
- package/lib/components/radio-field/radio-field.js +28 -64
- package/lib/components/radio-field/radio-field.styles.d.ts.map +1 -1
- package/lib/components/radio-field-item/radio-field-item.js +54 -189
- package/lib/components/radio-field-item/radio-field-item.styles.d.ts.map +1 -1
- package/lib/components/remove-tag/remove-tag.js +36 -129
- package/lib/components/remove-tag/remove-tag.styles.d.ts.map +1 -1
- package/lib/components/section/section.js +19 -50
- package/lib/components/section/section.styles.d.ts.map +1 -1
- package/lib/components/select/select.js +43 -416
- package/lib/components/select/select.styles.d.ts.map +1 -1
- package/lib/components/select-tile/select-tile.js +18 -442
- package/lib/components/select-tile/select-tile.styles.d.ts.map +1 -1
- package/lib/components/select-tile-list/select-tile-list.js +24 -62
- package/lib/components/select-tile-list/select-tile-list.styles.d.ts.map +1 -1
- package/lib/components/skeleton-loader/skeleton-loader.js +19 -73
- package/lib/components/skeleton-loader/skeleton-loader.styles.d.ts.map +1 -1
- package/lib/components/split-button/split-button.js +21 -37
- package/lib/components/split-button/split-button.styles.d.ts.map +1 -1
- package/lib/components/submenu/submenu.js +8 -18
- package/lib/components/submenu/submenu.styles.d.ts.map +1 -1
- package/lib/components/submenu-item/submenu-item.js +21 -42
- package/lib/components/submenu-item/submenu-item.styles.d.ts.map +1 -1
- package/lib/components/tab/tab.js +17 -100
- package/lib/components/tab/tab.styles.d.ts.map +1 -1
- package/lib/components/tab-panel/tab-panel.js +18 -52
- package/lib/components/tab-panel/tab-panel.styles.d.ts.map +1 -1
- package/lib/components/table/table.js +21 -73
- package/lib/components/table/table.styles.d.ts.map +1 -1
- package/lib/components/table-body/table-body.js +12 -24
- package/lib/components/table-body/table-body.styles.d.ts.map +1 -1
- package/lib/components/table-cell/table-cell.js +29 -69
- package/lib/components/table-cell/table-cell.styles.d.ts.map +1 -1
- package/lib/components/table-header/table-header.js +8 -39
- package/lib/components/table-header/table-header.styles.d.ts.map +1 -1
- package/lib/components/table-header-cell/table-header-cell.js +18 -37
- package/lib/components/table-header-cell/table-header-cell.styles.d.ts.map +1 -1
- package/lib/components/table-object/table-object.js +13 -32
- package/lib/components/table-object/table-object.styles.d.ts.map +1 -1
- package/lib/components/table-row/table-row.js +33 -139
- package/lib/components/table-row/table-row.styles.d.ts.map +1 -1
- package/lib/components/tabs/tabs.js +24 -339
- package/lib/components/tabs/tabs.styles.d.ts.map +1 -1
- package/lib/components/tag/tag.js +44 -159
- package/lib/components/tag/tag.styles.d.ts.map +1 -1
- package/lib/components/tag-list/tag-list.js +20 -51
- package/lib/components/tag-list/tag-list.styles.d.ts.map +1 -1
- package/lib/components/tertiary-nav/tertiary-nav.js +21 -54
- package/lib/components/tertiary-nav/tertiary-nav.styles.d.ts.map +1 -1
- package/lib/components/tertiary-nav-item/tertiary-nav-item.js +18 -68
- package/lib/components/tertiary-nav-item/tertiary-nav-item.styles.d.ts.map +1 -1
- package/lib/components/text-link/text-link.js +20 -85
- package/lib/components/text-link/text-link.styles.d.ts.map +1 -1
- package/lib/components/text-passage/text-passage-light-dom.styles.d.ts.map +1 -1
- package/lib/components/text-passage/text-passage.js +17 -189
- package/lib/components/text-passage/text-passage.styles.d.ts.map +1 -1
- package/lib/components/tooltip/tooltip.js +57 -248
- package/lib/components/tooltip/tooltip.styles.d.ts.map +1 -1
- package/lib/components/utility-nav/utility-nav.js +23 -56
- package/lib/components/utility-nav/utility-nav.styles.d.ts.map +1 -1
- package/lib/components/utility-nav-item/utility-nav-item.js +28 -83
- package/lib/components/utility-nav-item/utility-nav-item.styles.d.ts.map +1 -1
- package/lib/design-tokens/brands/blue/css/tokens_blue.module.d.ts.map +1 -1
- package/lib/design-tokens/brands/bolt/tokens_bolt.theme.d.ts.map +1 -1
- package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.d.ts +3 -0
- package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.d.ts.map +1 -0
- package/lib/design-tokens/brands/cre8-legacy/css/tokens_cre8-legacy.module.d.ts.map +1 -1
- package/lib/design-tokens/brands/femmecubator/css/tokens_femmecubator2.module.d.ts.map +1 -1
- package/lib/design-tokens/brands/legacy/css/tokens_legacy.module.d.ts.map +1 -1
- package/lib/design-tokens/brands/marketing/css/tokens_marketing.module.d.ts.map +1 -1
- package/lib/design-tokens/brands/minimalist/css/tokens_minimalist.module.d.ts +2 -2
- package/lib/design-tokens/brands/minimalist/css/tokens_minimalist.module.d.ts.map +1 -1
- package/lib/design-tokens/brands/starbucks/tokens_starbucks.module.d.ts.map +1 -1
- package/lib/design-tokens/core/scss/theming/component.scss +5 -5
- package/lib/design-tokens/core/scss/theming/functions.scss +4 -0
- package/lib/design-tokens/core/scss/theming/spacing.scss +60 -60
- package/lib/design-tokens/core/scss/theming/variables.scss +11 -11
- package/lib/design-tokens/mixins/typography-usage.scss +277 -277
- package/lib/design-tokens/tokens_netflix.theme.d.ts.map +1 -1
- package/lib/{icon-DImqxDiW.js → icon-D22g8aWB.js} +35 -138
- package/lib/index.js +1 -1
- package/package.json +7 -6
|
@@ -1,62 +1,26 @@
|
|
|
1
|
-
import { css as
|
|
1
|
+
import { css as f, html as c } from "lit";
|
|
2
2
|
import { ifDefined as l } from "lit-html/directives/if-defined.js";
|
|
3
|
-
import { property as
|
|
3
|
+
import { property as t } from "lit/decorators.js";
|
|
4
4
|
import { Cre8Element as m } from "../cre8-element.js";
|
|
5
5
|
import "../field-note/field-note.js";
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
:host {
|
|
13
|
-
display: flex;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* 1) Fieldset used for radio items
|
|
18
|
-
*/
|
|
19
|
-
.cre8-c-radio-field {
|
|
20
|
-
border: none;
|
|
21
|
-
padding: 0;
|
|
22
|
-
margin: 0;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* Radio field legend
|
|
27
|
-
*/
|
|
28
|
-
.cre8-c-radio-field__legend {
|
|
29
|
-
@include cre8-typography-label-small;
|
|
30
|
-
margin-bottom: calc(8px * 1);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
/**
|
|
34
|
-
* Radio field list
|
|
35
|
-
* 1) Remove default margin and padding form radio field list
|
|
36
|
-
*/
|
|
37
|
-
.cre8-c-radio-field__list {
|
|
38
|
-
display: flex;
|
|
39
|
-
flex-direction: column;
|
|
40
|
-
margin: 0; /* 1 */
|
|
41
|
-
padding: 0; /* 1 */
|
|
42
|
-
}`;
|
|
43
|
-
var u = Object.defineProperty, t = (c, r, a, g) => {
|
|
44
|
-
for (var o = void 0, s = c.length - 1, n; s >= 0; s--)
|
|
45
|
-
(n = c[s]) && (o = n(r, a, o) || o);
|
|
46
|
-
return o && u(r, a, o), o;
|
|
6
|
+
const h = f`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:flex}.cre8-c-radio-field{border:none;padding:0;margin:0}.cre8-c-radio-field__legend{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);margin-bottom:0.5rem}.cre8-c-radio-field__list{display:flex;flex-direction:column;margin:0;padding:0}`;
|
|
7
|
+
var y = Object.defineProperty, r = (d, a, n, g) => {
|
|
8
|
+
for (var i = void 0, s = d.length - 1, p; s >= 0; s--)
|
|
9
|
+
(p = d[s]) && (i = p(a, n, i) || i);
|
|
10
|
+
return i && y(a, n, i), i;
|
|
47
11
|
};
|
|
48
|
-
const
|
|
12
|
+
const o = class o extends m {
|
|
49
13
|
render() {
|
|
50
|
-
const
|
|
51
|
-
return
|
|
52
|
-
<fieldset class="${
|
|
14
|
+
const a = this.componentClassNames("cre8-c-radio-field", {});
|
|
15
|
+
return c`
|
|
16
|
+
<fieldset class="${a}" aria-describedby="${l(this.ariaDescribedBy)}">
|
|
53
17
|
<legend class="cre8-c-radio-field__legend">${this.label}</legend>
|
|
54
18
|
<div class="cre8-c-radio-field__body">
|
|
55
19
|
<ul class="cre8-c-radio-field__list" role="list">
|
|
56
20
|
<slot></slot>
|
|
57
21
|
</ul>
|
|
58
22
|
</div>
|
|
59
|
-
${this.fieldNote ?
|
|
23
|
+
${this.fieldNote ? c`<cre8-field-note
|
|
60
24
|
?inverted=${this.fieldNoteKnockout}
|
|
61
25
|
id=${l(this.ariaDescribedBy)}
|
|
62
26
|
iconName=${l(this.fieldNoteIconName)}
|
|
@@ -69,28 +33,28 @@ const d = class d extends m {
|
|
|
69
33
|
`;
|
|
70
34
|
}
|
|
71
35
|
};
|
|
72
|
-
|
|
73
|
-
let e =
|
|
74
|
-
|
|
75
|
-
|
|
36
|
+
o.styles = [h];
|
|
37
|
+
let e = o;
|
|
38
|
+
r([
|
|
39
|
+
t()
|
|
76
40
|
], e.prototype, "fieldNote");
|
|
77
|
-
|
|
78
|
-
|
|
41
|
+
r([
|
|
42
|
+
t()
|
|
79
43
|
], e.prototype, "ariaDescribedBy");
|
|
80
|
-
|
|
81
|
-
|
|
44
|
+
r([
|
|
45
|
+
t()
|
|
82
46
|
], e.prototype, "fieldNoteIconName");
|
|
83
|
-
|
|
84
|
-
|
|
47
|
+
r([
|
|
48
|
+
t({ type: Boolean, reflect: !0 })
|
|
85
49
|
], e.prototype, "fieldNoteKnockout");
|
|
86
|
-
|
|
87
|
-
|
|
50
|
+
r([
|
|
51
|
+
t({ type: Boolean, reflect: !0 })
|
|
88
52
|
], e.prototype, "isSuccess");
|
|
89
|
-
|
|
90
|
-
|
|
53
|
+
r([
|
|
54
|
+
t({ type: Boolean, reflect: !0 })
|
|
91
55
|
], e.prototype, "isError");
|
|
92
|
-
|
|
93
|
-
|
|
56
|
+
r([
|
|
57
|
+
t()
|
|
94
58
|
], e.prototype, "label");
|
|
95
59
|
customElements.get("cre8-radio-field") === void 0 && customElements.define("cre8-radio-field", e);
|
|
96
60
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-field.styles.d.ts","sourceRoot":"","sources":["../../../components/radio-field/radio-field.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"radio-field.styles.d.ts","sourceRoot":"","sources":["../../../components/radio-field/radio-field.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAm0E,CAAC;AACh1E,eAAe,MAAM,CAAC"}
|
|
@@ -1,151 +1,16 @@
|
|
|
1
|
-
import { css as p, html as
|
|
2
|
-
import { ifDefined as
|
|
3
|
-
import { property as d, query as
|
|
4
|
-
import { nanoid as
|
|
1
|
+
import { css as p, html as m } from "lit";
|
|
2
|
+
import { ifDefined as a } from "lit-html/directives/if-defined.js";
|
|
3
|
+
import { property as d, query as u } from "lit/decorators.js";
|
|
4
|
+
import { nanoid as f } from "nanoid";
|
|
5
5
|
import { Cre8FormElement as b } from "../cre8-form-element.js";
|
|
6
6
|
import "../field-note/field-note.js";
|
|
7
|
-
const y = p
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
:host {
|
|
13
|
-
display: inline-flex;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* 1) Form field that is compose of a radio input, label, and optional fieldnote.
|
|
18
|
-
*/
|
|
19
|
-
.cre8-c-radio-field-item {
|
|
20
|
-
display: flex;
|
|
21
|
-
position: relative;
|
|
22
|
-
align-items: center;
|
|
23
|
-
margin-bottom: calc(8px * 1);
|
|
24
|
-
min-height: calc(8px * 3);
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* 1) Form field that is compose of a radio input, label, and optional fieldnote.
|
|
28
|
-
*/
|
|
29
|
-
:host(:last-child) & {
|
|
30
|
-
margin-bottom: 0;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
/**
|
|
35
|
-
* Radio field item input
|
|
36
|
-
*/
|
|
37
|
-
.cre8-c-radio-field-item__input {
|
|
38
|
-
opacity: 0;
|
|
39
|
-
cursor: pointer;
|
|
40
|
-
position: absolute;
|
|
41
|
-
top: 0;
|
|
42
|
-
left: 0;
|
|
43
|
-
height: calc(8px * 3);
|
|
44
|
-
min-width: calc(8px * 3);
|
|
45
|
-
margin: 0;
|
|
46
|
-
z-index: 1;
|
|
47
|
-
|
|
48
|
-
.cre8-c-radio-field-item--disabled & {
|
|
49
|
-
cursor: not-allowed;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/**
|
|
54
|
-
* Radio field item custom radio container
|
|
55
|
-
*/
|
|
56
|
-
.cre8-c-radio-field-item__custom-radio {
|
|
57
|
-
display: flex;
|
|
58
|
-
position: absolute;
|
|
59
|
-
top: 0;
|
|
60
|
-
left: 0;
|
|
61
|
-
height: calc(8px * 3);
|
|
62
|
-
width: calc(8px * 3);
|
|
63
|
-
cursor: pointer;
|
|
64
|
-
align-items: center;
|
|
65
|
-
justify-content: center;
|
|
66
|
-
border-radius: var(--cre8-border-radius-round);
|
|
67
|
-
border-width: var(--cre8-border-width-default);
|
|
68
|
-
border-style: var(--cre8-border-style-default);
|
|
69
|
-
background-color: var(--cre8-color-bg-default);
|
|
70
|
-
border-color: var(--cre8-color-border-strong);
|
|
71
|
-
|
|
72
|
-
/**
|
|
73
|
-
* Radio field item custom radio focus visible custom outline
|
|
74
|
-
*/
|
|
75
|
-
.cre8-c-radio-field-item__input:focus-visible + & {
|
|
76
|
-
@include focus;
|
|
77
|
-
|
|
78
|
-
.cre8-c-radio-field-item--error & {
|
|
79
|
-
@include focusError;
|
|
80
|
-
border-color: var(--cre8-color-border-error);
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
/**
|
|
85
|
-
* Radio field item custom radio within radio field with error
|
|
86
|
-
*/
|
|
87
|
-
.cre8-c-radio-field-item--error & {
|
|
88
|
-
border-color: var(--cre8-color-border-error);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
/**
|
|
92
|
-
* Radio field item custom radio within radio field disabled
|
|
93
|
-
*/
|
|
94
|
-
.cre8-c-radio-field-item--disabled & {
|
|
95
|
-
cursor: not-allowed;
|
|
96
|
-
background-color: var(--cre8-color-bg-disabled);
|
|
97
|
-
border-color: var(--cre8-color-border-disabled);
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
/**
|
|
102
|
-
* Radio field item inner circle
|
|
103
|
-
*/
|
|
104
|
-
.cre8-c-radio-field-item__inner-circle {
|
|
105
|
-
display: none;
|
|
106
|
-
|
|
107
|
-
cursor: pointer;
|
|
108
|
-
height: calc(8px * 1.5);
|
|
109
|
-
width: calc(8px * 1.5);
|
|
110
|
-
background: var(--cre8-color-content-brand);
|
|
111
|
-
border-radius: var(--cre8-border-radius-round);
|
|
112
|
-
|
|
113
|
-
/**
|
|
114
|
-
* Radio field item inner circle error
|
|
115
|
-
*/
|
|
116
|
-
.cre8-c-radio-field-item--error & {
|
|
117
|
-
background: var(--cre8-color-bg-error-strong);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
/**
|
|
121
|
-
* Radio field item inner circle disabled
|
|
122
|
-
*/
|
|
123
|
-
.cre8-c-radio-field-item--disabled & {
|
|
124
|
-
background: var(--cre8-color-content-disabled);
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
/**
|
|
128
|
-
* Radio field item inner circle will display if the input is checked
|
|
129
|
-
*/
|
|
130
|
-
.cre8-c-radio-field-item__input:checked + .cre8-c-radio-field-item__custom-radio & {
|
|
131
|
-
display: flex;
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
/**
|
|
136
|
-
* Radio field item input
|
|
137
|
-
*/
|
|
138
|
-
.cre8-c-radio-field-item__label {
|
|
139
|
-
margin-left: calc(8px * 4);
|
|
140
|
-
@include cre8-typography-label-small;
|
|
141
|
-
}
|
|
142
|
-
`;
|
|
143
|
-
var _ = Object.defineProperty, t = (n, e, i, o) => {
|
|
144
|
-
for (var l = void 0, s = n.length - 1, f; s >= 0; s--)
|
|
145
|
-
(f = n[s]) && (l = f(e, i, l) || l);
|
|
146
|
-
return l && _(e, i, l), l;
|
|
7
|
+
const y = p`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-radio-field-item{display:flex;position:relative;align-items:center;margin-bottom:0.5rem;min-height:1.5rem}:host(:last-child) .cre8-c-radio-field-item{margin-bottom:0}.cre8-c-radio-field-item__input{opacity:0;cursor:pointer;position:absolute;top:0;left:0;height:1.5rem;min-width:1.5rem;margin:0;z-index:1}.cre8-c-radio-field-item--disabled .cre8-c-radio-field-item__input{cursor:not-allowed}.cre8-c-radio-field-item__custom-radio{display:flex;position:absolute;top:0;left:0;height:1.5rem;width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--cre8-border-radius-round);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-strong)}.cre8-c-radio-field-item__input:focus-visible+.cre8-c-radio-field-item__custom-radio{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-radio-field-item--error .cre8-c-radio-field-item__input:focus-visible+.cre8-c-radio-field-item__custom-radio{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-error);outline-offset:0.125rem;border-color:var(--cre8-color-border-error)}.cre8-c-radio-field-item--error .cre8-c-radio-field-item__custom-radio{border-color:var(--cre8-color-border-error)}.cre8-c-radio-field-item--disabled .cre8-c-radio-field-item__custom-radio{cursor:not-allowed;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled)}.cre8-c-radio-field-item__inner-circle{display:none;cursor:pointer;height:0.75rem;width:0.75rem;background:var(--cre8-color-content-brand);border-radius:var(--cre8-border-radius-round)}.cre8-c-radio-field-item--error .cre8-c-radio-field-item__inner-circle{background:var(--cre8-color-bg-error-strong)}.cre8-c-radio-field-item--disabled .cre8-c-radio-field-item__inner-circle{background:var(--cre8-color-content-disabled)}.cre8-c-radio-field-item__input:checked+.cre8-c-radio-field-item__custom-radio .cre8-c-radio-field-item__inner-circle{display:flex}.cre8-c-radio-field-item__label{margin-left:2rem;font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform)}`;
|
|
8
|
+
var g = Object.defineProperty, t = (n, e, r, o) => {
|
|
9
|
+
for (var l = void 0, s = n.length - 1, h; s >= 0; s--)
|
|
10
|
+
(h = n[s]) && (l = h(e, r, l) || l);
|
|
11
|
+
return l && g(e, r, l), l;
|
|
147
12
|
};
|
|
148
|
-
const
|
|
13
|
+
const c = class c extends b {
|
|
149
14
|
constructor() {
|
|
150
15
|
super(...arguments), this.type = "radio";
|
|
151
16
|
}
|
|
@@ -156,7 +21,7 @@ const a = class a extends b {
|
|
|
156
21
|
* 3) If a field note exists, set the aria-describedby attribute to make sure the field note is read out
|
|
157
22
|
*/
|
|
158
23
|
connectedCallback() {
|
|
159
|
-
super.connectedCallback(), this.fieldId = this.fieldId ||
|
|
24
|
+
super.connectedCallback(), this.fieldId = this.fieldId || f(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || f());
|
|
160
25
|
}
|
|
161
26
|
/**
|
|
162
27
|
* Reset the radio field
|
|
@@ -168,8 +33,8 @@ const a = class a extends b {
|
|
|
168
33
|
* Reset the radio field items tab indeces
|
|
169
34
|
*/
|
|
170
35
|
resetTabIndeces(e) {
|
|
171
|
-
e.forEach((
|
|
172
|
-
|
|
36
|
+
e.forEach((r) => {
|
|
37
|
+
r.shadowRoot.querySelector(".cre8-c-radio-field-item__input").setAttribute("tabindex", "0");
|
|
173
38
|
});
|
|
174
39
|
}
|
|
175
40
|
/**
|
|
@@ -178,8 +43,8 @@ const a = class a extends b {
|
|
|
178
43
|
* 2) Reset the form field to not checked
|
|
179
44
|
*/
|
|
180
45
|
removeChecked() {
|
|
181
|
-
this.parentNode && this.parentNode.querySelectorAll("cre8-radio-field-item").forEach((
|
|
182
|
-
|
|
46
|
+
this.parentNode && this.parentNode.querySelectorAll("cre8-radio-field-item").forEach((r) => {
|
|
47
|
+
r.checked = !1, r.shadowRoot.querySelector(".cre8-c-radio-field-item__input").setAttribute("tabindex", "-1"), r.resetField();
|
|
183
48
|
});
|
|
184
49
|
}
|
|
185
50
|
/**
|
|
@@ -216,8 +81,8 @@ const a = class a extends b {
|
|
|
216
81
|
* 5) Set sibling element `tabindex` to `0`
|
|
217
82
|
* 6) Set sibling element `checked` value
|
|
218
83
|
*/
|
|
219
|
-
_updateSibling(e,
|
|
220
|
-
e.preventDefault(), this.removeChecked(), o.focus(), o.click(), o.setAttribute("tabindex", "0"),
|
|
84
|
+
_updateSibling(e, r, o) {
|
|
85
|
+
e.preventDefault(), this.removeChecked(), o.focus(), o.click(), o.setAttribute("tabindex", "0"), r.setAttribute("checked", "");
|
|
221
86
|
}
|
|
222
87
|
/**
|
|
223
88
|
* Handle keydown
|
|
@@ -233,20 +98,20 @@ const a = class a extends b {
|
|
|
233
98
|
*/
|
|
234
99
|
handleKeyDown(e) {
|
|
235
100
|
if (e.code === "ArrowLeft" || e.code === "ArrowUp") {
|
|
236
|
-
const
|
|
101
|
+
const r = this.previousElementSibling, o = r?.shadowRoot?.querySelector(
|
|
237
102
|
".cre8-c-radio-field-item__input:not([disabled])"
|
|
238
103
|
);
|
|
239
|
-
o && this._updateSibling(e,
|
|
104
|
+
o && this._updateSibling(e, r, o);
|
|
240
105
|
} else if (e.code === "ArrowRight" || e.code === "ArrowDown") {
|
|
241
|
-
const
|
|
106
|
+
const r = this.nextElementSibling, o = r?.shadowRoot?.querySelector(
|
|
242
107
|
".cre8-c-radio-field-item__input:not([disabled])"
|
|
243
108
|
);
|
|
244
|
-
o && this._updateSibling(e,
|
|
109
|
+
o && this._updateSibling(e, r, o);
|
|
245
110
|
} else if (e.code === "Tab" && !this.checked) {
|
|
246
|
-
const
|
|
247
|
-
|
|
111
|
+
const r = this.parentNode.querySelectorAll("cre8-radio-field-item");
|
|
112
|
+
r.forEach((o) => {
|
|
248
113
|
o.shadowRoot.querySelector(".cre8-c-radio-field-item__input").setAttribute("tabindex", "-1");
|
|
249
|
-
}), setTimeout(this.resetTabIndeces, 100,
|
|
114
|
+
}), setTimeout(this.resetTabIndeces, 100, r);
|
|
250
115
|
}
|
|
251
116
|
}
|
|
252
117
|
render() {
|
|
@@ -254,31 +119,31 @@ const a = class a extends b {
|
|
|
254
119
|
"cre8-c-radio-field-item--error": this.isError,
|
|
255
120
|
"cre8-c-radio-field-item--success": this.isSuccess,
|
|
256
121
|
"cre8-c-radio-field-item--disabled": this.disabled
|
|
257
|
-
}),
|
|
258
|
-
return
|
|
259
|
-
<div role=${
|
|
122
|
+
}), r = this.checked === !0 || this.initialChecked === !0;
|
|
123
|
+
return m`
|
|
124
|
+
<div role=${a(this._getRole())} class="${e}" @keydown=${this.handleKeyDown}>
|
|
260
125
|
<input
|
|
261
126
|
class="cre8-c-radio-field-item__input"
|
|
262
127
|
type="radio"
|
|
263
128
|
@input=${this._clickHandler}
|
|
264
129
|
id=${this.fieldId}
|
|
265
|
-
aria-describedby="${
|
|
266
|
-
required=${
|
|
267
|
-
aria-invalid=${this.required ? !!this.isError :
|
|
130
|
+
aria-describedby="${a(this.ariaDescribedBy)}"
|
|
131
|
+
required=${a(this.required)}
|
|
132
|
+
aria-invalid=${this.required ? !!this.isError : a(this.isError)}
|
|
268
133
|
name=${this.name}
|
|
269
134
|
.value=${this.value}
|
|
270
|
-
disabled="${
|
|
271
|
-
.checked="${
|
|
135
|
+
disabled="${a(this.disabled)}"
|
|
136
|
+
.checked="${r}"
|
|
272
137
|
/>
|
|
273
138
|
<span class="cre8-c-radio-field-item__custom-radio">
|
|
274
139
|
<div class="cre8-c-radio-field-item__inner-circle"></div>
|
|
275
140
|
</span>
|
|
276
141
|
<label class="cre8-c-radio-field-item__label" for=${this.fieldId}>${this.label}</label>
|
|
277
142
|
</div>
|
|
278
|
-
${this.fieldNote ?
|
|
143
|
+
${this.fieldNote ? m`<cre8-field-note
|
|
279
144
|
?inverted=${this.fieldNoteKnockout}
|
|
280
|
-
id=${
|
|
281
|
-
iconName=${
|
|
145
|
+
id=${a(this.ariaDescribedBy)}
|
|
146
|
+
iconName=${a(this.fieldNoteIconName)}
|
|
282
147
|
?isSuccess=${this.isSuccess}
|
|
283
148
|
?isError=${this.isError}
|
|
284
149
|
>
|
|
@@ -287,49 +152,49 @@ const a = class a extends b {
|
|
|
287
152
|
`;
|
|
288
153
|
}
|
|
289
154
|
};
|
|
290
|
-
|
|
291
|
-
let
|
|
155
|
+
c.styles = [y];
|
|
156
|
+
let i = c;
|
|
292
157
|
t([
|
|
293
158
|
d()
|
|
294
|
-
],
|
|
159
|
+
], i.prototype, "ariaDescribedBy");
|
|
295
160
|
t([
|
|
296
161
|
d({ type: Boolean, reflect: !0 })
|
|
297
|
-
],
|
|
162
|
+
], i.prototype, "checked");
|
|
298
163
|
t([
|
|
299
164
|
d({ type: Boolean, reflect: !0 })
|
|
300
|
-
],
|
|
165
|
+
], i.prototype, "disabled");
|
|
301
166
|
t([
|
|
302
|
-
|
|
303
|
-
],
|
|
167
|
+
u("input")
|
|
168
|
+
], i.prototype, "field");
|
|
304
169
|
t([
|
|
305
170
|
d()
|
|
306
|
-
],
|
|
171
|
+
], i.prototype, "fieldId");
|
|
307
172
|
t([
|
|
308
173
|
d()
|
|
309
|
-
],
|
|
174
|
+
], i.prototype, "fieldNote");
|
|
310
175
|
t([
|
|
311
176
|
d()
|
|
312
|
-
],
|
|
177
|
+
], i.prototype, "fieldNoteIconName");
|
|
313
178
|
t([
|
|
314
179
|
d({ type: Boolean, reflect: !0 })
|
|
315
|
-
],
|
|
180
|
+
], i.prototype, "fieldNoteKnockout");
|
|
316
181
|
t([
|
|
317
182
|
d({ type: Boolean, reflect: !0 })
|
|
318
|
-
],
|
|
183
|
+
], i.prototype, "fieldNoteIsError");
|
|
319
184
|
t([
|
|
320
185
|
d({ type: Boolean, reflect: !0 })
|
|
321
|
-
],
|
|
186
|
+
], i.prototype, "isError");
|
|
322
187
|
t([
|
|
323
188
|
d({ type: Boolean, reflect: !0 })
|
|
324
|
-
],
|
|
189
|
+
], i.prototype, "isSuccess");
|
|
325
190
|
t([
|
|
326
191
|
d()
|
|
327
|
-
],
|
|
192
|
+
], i.prototype, "label");
|
|
328
193
|
t([
|
|
329
194
|
d({ type: Boolean, reflect: !0 })
|
|
330
|
-
],
|
|
331
|
-
customElements.get("cre8-radio-field-item") === void 0 && customElements.define("cre8-radio-field-item",
|
|
195
|
+
], i.prototype, "required");
|
|
196
|
+
customElements.get("cre8-radio-field-item") === void 0 && customElements.define("cre8-radio-field-item", i);
|
|
332
197
|
export {
|
|
333
|
-
|
|
334
|
-
|
|
198
|
+
i as Cre8RadioFieldItem,
|
|
199
|
+
i as default
|
|
335
200
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-field-item.styles.d.ts","sourceRoot":"","sources":["../../../components/radio-field-item/radio-field-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"radio-field-item.styles.d.ts","sourceRoot":"","sources":["../../../components/radio-field-item/radio-field-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAA8vI,CAAC;AAC3wI,eAAe,MAAM,CAAC"}
|