@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.
Files changed (200) hide show
  1. package/cdn/cre8-wc.esm.js +9082 -15604
  2. package/cdn/cre8-wc.esm.js.map +1 -1
  3. package/cdn/cre8-wc.min.js +1231 -8308
  4. package/cdn/cre8-wc.min.js.map +1 -1
  5. package/lib/cdn-entry.d.ts +20 -2
  6. package/lib/cdn-entry.d.ts.map +1 -1
  7. package/lib/components/accordion/accordion.js +18 -64
  8. package/lib/components/accordion/accordion.styles.d.ts.map +1 -1
  9. package/lib/components/accordion-item/accordion-item.js +35 -238
  10. package/lib/components/accordion-item/accordion-item.styles.d.ts.map +1 -1
  11. package/lib/components/alert/alert.js +56 -221
  12. package/lib/components/alert/alert.styles.d.ts.map +1 -1
  13. package/lib/components/badge/badge.js +33 -164
  14. package/lib/components/badge/badge.styles.d.ts.map +1 -1
  15. package/lib/components/band/band.js +11 -261
  16. package/lib/components/band/band.styles.d.ts.map +1 -1
  17. package/lib/components/breadcrumbs/breadcrumbs.js +14 -33
  18. package/lib/components/breadcrumbs/breadcrumbs.styles.d.ts.map +1 -1
  19. package/lib/components/breadcrumbs-item/breadcrumbs-item.js +10 -45
  20. package/lib/components/breadcrumbs-item/breadcrumbs-item.styles.d.ts.map +1 -1
  21. package/lib/components/button/button.js +14 -14
  22. package/lib/components/button-group/button-group.js +10 -261
  23. package/lib/components/button-group/button-group.styles.d.ts.map +1 -1
  24. package/lib/components/card/card.js +17 -130
  25. package/lib/components/card/card.styles.d.ts.map +1 -1
  26. package/lib/components/chart/chart.js +137 -223
  27. package/lib/components/chart/chart.styles.d.ts.map +1 -1
  28. package/lib/components/checkbox-field/checkbox-field.js +26 -59
  29. package/lib/components/checkbox-field/checkbox-field.styles.d.ts.map +1 -1
  30. package/lib/components/checkbox-field-item/checkbox-field-item.js +38 -205
  31. package/lib/components/checkbox-field-item/checkbox-field-item.styles.d.ts.map +1 -1
  32. package/lib/components/danger-button/danger-button.js +53 -582
  33. package/lib/components/danger-button/danger-button.styles.d.ts.map +1 -1
  34. package/lib/components/date-picker/calendar/calendar.styles.d.ts.map +1 -1
  35. package/lib/components/date-picker/calendar-month-modal/calendar-month-modal.styles.d.ts.map +1 -1
  36. package/lib/components/date-picker/calendar-navigation/calendar-navigation.styles.d.ts.map +1 -1
  37. package/lib/components/date-picker/calendar-year-modal/calendar-year-modal.styles.d.ts.map +1 -1
  38. package/lib/components/date-picker/date-picker.js +262 -499
  39. package/lib/components/date-picker/date-picker.styles.d.ts.map +1 -1
  40. package/lib/components/divider/divider.js +20 -61
  41. package/lib/components/divider/divider.styles.d.ts.map +1 -1
  42. package/lib/components/dropdown/dropdown.js +34 -107
  43. package/lib/components/dropdown/dropdown.styles.d.ts.map +1 -1
  44. package/lib/components/dropdown-item/dropdown-item.js +18 -49
  45. package/lib/components/dropdown-item/dropdown-item.styles.d.ts.map +1 -1
  46. package/lib/components/feature/feature.js +19 -81
  47. package/lib/components/feature/feature.styles.d.ts.map +1 -1
  48. package/lib/components/field/field.js +12 -146
  49. package/lib/components/field/field.styles.d.ts.map +1 -1
  50. package/lib/components/field-note/field-note.js +22 -66
  51. package/lib/components/field-note/field-note.styles.d.ts.map +1 -1
  52. package/lib/components/footer/footer.js +10 -29
  53. package/lib/components/footer/footer.styles.d.ts.map +1 -1
  54. package/lib/components/global-nav/global-nav.js +20 -43
  55. package/lib/components/global-nav/global-nav.styles.d.ts.map +1 -1
  56. package/lib/components/global-nav-item/global-nav-item.js +26 -105
  57. package/lib/components/global-nav-item/global-nav-item.styles.d.ts.map +1 -1
  58. package/lib/components/grid/grid.js +15 -337
  59. package/lib/components/grid/grid.styles.d.ts.map +1 -1
  60. package/lib/components/grid-item/grid-item.js +7 -15
  61. package/lib/components/grid-item/grid-item.styles.d.ts.map +1 -1
  62. package/lib/components/header/header.js +17 -80
  63. package/lib/components/header/header.styles.d.ts.map +1 -1
  64. package/lib/components/heading/heading.js +16 -153
  65. package/lib/components/heading/heading.styles.d.ts.map +1 -1
  66. package/lib/components/hero/hero.js +17 -149
  67. package/lib/components/hero/hero.styles.d.ts.map +1 -1
  68. package/lib/components/icon/icon.js +1 -1
  69. package/lib/components/icon/icon.styles.d.ts.map +1 -1
  70. package/lib/components/inline-alert/inline-alert.js +53 -214
  71. package/lib/components/inline-alert/inline-alert.styles.d.ts.map +1 -1
  72. package/lib/components/layout/layout.js +20 -53
  73. package/lib/components/layout/layout.styles.d.ts.map +1 -1
  74. package/lib/components/layout-container/layout-container.js +20 -43
  75. package/lib/components/layout-container/layout-container.styles.d.ts.map +1 -1
  76. package/lib/components/layout-section/layout-section.js +20 -29
  77. package/lib/components/layout-section/layout-section.styles.d.ts.map +1 -1
  78. package/lib/components/linelength-container/linelength-container.js +7 -15
  79. package/lib/components/linelength-container/linelength-container.styles.d.ts.map +1 -1
  80. package/lib/components/link/link.js +33 -228
  81. package/lib/components/link/link.styles.d.ts.map +1 -1
  82. package/lib/components/link-list/link-list.js +23 -129
  83. package/lib/components/link-list/link-list.styles.d.ts.map +1 -1
  84. package/lib/components/link-list-item/link-list-item.js +19 -80
  85. package/lib/components/link-list-item/link-list-item.styles.d.ts.map +1 -1
  86. package/lib/components/list/list.js +17 -67
  87. package/lib/components/list/list.styles.d.ts.map +1 -1
  88. package/lib/components/list-item/list-item.js +11 -16
  89. package/lib/components/list-item/list-item.styles.d.ts.map +1 -1
  90. package/lib/components/loading-spinner/loading-spinner.js +13 -157
  91. package/lib/components/loading-spinner/loading-spinner.styles.d.ts.map +1 -1
  92. package/lib/components/logo/logo.js +20 -30
  93. package/lib/components/logo/logo.styles.d.ts.map +1 -1
  94. package/lib/components/main/main.js +18 -42
  95. package/lib/components/main/main.styles.d.ts.map +1 -1
  96. package/lib/components/modal/modal.js +50 -215
  97. package/lib/components/modal/modal.styles.d.ts.map +1 -1
  98. package/lib/components/multi-select/multi-select.js +71 -532
  99. package/lib/components/multi-select/multi-select.styles.d.ts.map +1 -1
  100. package/lib/components/nav-container/nav-container.js +5 -40
  101. package/lib/components/nav-container/nav-container.styles.d.ts.map +1 -1
  102. package/lib/components/page-header/page-header.js +19 -54
  103. package/lib/components/page-header/page-header.styles.d.ts.map +1 -1
  104. package/lib/components/pagination/page-counter/page-counter.styles.d.ts.map +1 -1
  105. package/lib/components/pagination/pagination.js +102 -183
  106. package/lib/components/pagination/pagination.styles.d.ts.map +1 -1
  107. package/lib/components/percent-bar/percent-bar.js +22 -50
  108. package/lib/components/percent-bar/percent-bar.styles.d.ts.map +1 -1
  109. package/lib/components/popover/popover.js +51 -220
  110. package/lib/components/popover/popover.styles.d.ts.map +1 -1
  111. package/lib/components/primary-nav/primary-nav.js +17 -51
  112. package/lib/components/primary-nav/primary-nav.styles.d.ts.map +1 -1
  113. package/lib/components/primary-nav-item/primary-nav-item.js +24 -191
  114. package/lib/components/primary-nav-item/primary-nav-item.styles.d.ts.map +1 -1
  115. package/lib/components/progress-meter/progress-meter.js +23 -127
  116. package/lib/components/progress-meter/progress-meter.styles.d.ts.map +1 -1
  117. package/lib/components/progress-steps/progress-steps.styles.d.ts.map +1 -1
  118. package/lib/components/progress-steps-item/progress-steps-item.js +27 -118
  119. package/lib/components/progress-steps-item/progress-steps-item.styles.d.ts.map +1 -1
  120. package/lib/components/radio-field/radio-field.js +28 -64
  121. package/lib/components/radio-field/radio-field.styles.d.ts.map +1 -1
  122. package/lib/components/radio-field-item/radio-field-item.js +54 -189
  123. package/lib/components/radio-field-item/radio-field-item.styles.d.ts.map +1 -1
  124. package/lib/components/remove-tag/remove-tag.js +36 -129
  125. package/lib/components/remove-tag/remove-tag.styles.d.ts.map +1 -1
  126. package/lib/components/section/section.js +19 -50
  127. package/lib/components/section/section.styles.d.ts.map +1 -1
  128. package/lib/components/select/select.js +43 -416
  129. package/lib/components/select/select.styles.d.ts.map +1 -1
  130. package/lib/components/select-tile/select-tile.js +18 -442
  131. package/lib/components/select-tile/select-tile.styles.d.ts.map +1 -1
  132. package/lib/components/select-tile-list/select-tile-list.js +24 -62
  133. package/lib/components/select-tile-list/select-tile-list.styles.d.ts.map +1 -1
  134. package/lib/components/skeleton-loader/skeleton-loader.js +19 -73
  135. package/lib/components/skeleton-loader/skeleton-loader.styles.d.ts.map +1 -1
  136. package/lib/components/split-button/split-button.js +21 -37
  137. package/lib/components/split-button/split-button.styles.d.ts.map +1 -1
  138. package/lib/components/submenu/submenu.js +8 -18
  139. package/lib/components/submenu/submenu.styles.d.ts.map +1 -1
  140. package/lib/components/submenu-item/submenu-item.js +21 -42
  141. package/lib/components/submenu-item/submenu-item.styles.d.ts.map +1 -1
  142. package/lib/components/tab/tab.js +17 -100
  143. package/lib/components/tab/tab.styles.d.ts.map +1 -1
  144. package/lib/components/tab-panel/tab-panel.js +18 -52
  145. package/lib/components/tab-panel/tab-panel.styles.d.ts.map +1 -1
  146. package/lib/components/table/table.js +21 -73
  147. package/lib/components/table/table.styles.d.ts.map +1 -1
  148. package/lib/components/table-body/table-body.js +12 -24
  149. package/lib/components/table-body/table-body.styles.d.ts.map +1 -1
  150. package/lib/components/table-cell/table-cell.js +29 -69
  151. package/lib/components/table-cell/table-cell.styles.d.ts.map +1 -1
  152. package/lib/components/table-header/table-header.js +8 -39
  153. package/lib/components/table-header/table-header.styles.d.ts.map +1 -1
  154. package/lib/components/table-header-cell/table-header-cell.js +18 -37
  155. package/lib/components/table-header-cell/table-header-cell.styles.d.ts.map +1 -1
  156. package/lib/components/table-object/table-object.js +13 -32
  157. package/lib/components/table-object/table-object.styles.d.ts.map +1 -1
  158. package/lib/components/table-row/table-row.js +33 -139
  159. package/lib/components/table-row/table-row.styles.d.ts.map +1 -1
  160. package/lib/components/tabs/tabs.js +24 -339
  161. package/lib/components/tabs/tabs.styles.d.ts.map +1 -1
  162. package/lib/components/tag/tag.js +44 -159
  163. package/lib/components/tag/tag.styles.d.ts.map +1 -1
  164. package/lib/components/tag-list/tag-list.js +20 -51
  165. package/lib/components/tag-list/tag-list.styles.d.ts.map +1 -1
  166. package/lib/components/tertiary-nav/tertiary-nav.js +21 -54
  167. package/lib/components/tertiary-nav/tertiary-nav.styles.d.ts.map +1 -1
  168. package/lib/components/tertiary-nav-item/tertiary-nav-item.js +18 -68
  169. package/lib/components/tertiary-nav-item/tertiary-nav-item.styles.d.ts.map +1 -1
  170. package/lib/components/text-link/text-link.js +20 -85
  171. package/lib/components/text-link/text-link.styles.d.ts.map +1 -1
  172. package/lib/components/text-passage/text-passage-light-dom.styles.d.ts.map +1 -1
  173. package/lib/components/text-passage/text-passage.js +17 -189
  174. package/lib/components/text-passage/text-passage.styles.d.ts.map +1 -1
  175. package/lib/components/tooltip/tooltip.js +57 -248
  176. package/lib/components/tooltip/tooltip.styles.d.ts.map +1 -1
  177. package/lib/components/utility-nav/utility-nav.js +23 -56
  178. package/lib/components/utility-nav/utility-nav.styles.d.ts.map +1 -1
  179. package/lib/components/utility-nav-item/utility-nav-item.js +28 -83
  180. package/lib/components/utility-nav-item/utility-nav-item.styles.d.ts.map +1 -1
  181. package/lib/design-tokens/brands/blue/css/tokens_blue.module.d.ts.map +1 -1
  182. package/lib/design-tokens/brands/bolt/tokens_bolt.theme.d.ts.map +1 -1
  183. package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.d.ts +3 -0
  184. package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.d.ts.map +1 -0
  185. package/lib/design-tokens/brands/cre8-legacy/css/tokens_cre8-legacy.module.d.ts.map +1 -1
  186. package/lib/design-tokens/brands/femmecubator/css/tokens_femmecubator2.module.d.ts.map +1 -1
  187. package/lib/design-tokens/brands/legacy/css/tokens_legacy.module.d.ts.map +1 -1
  188. package/lib/design-tokens/brands/marketing/css/tokens_marketing.module.d.ts.map +1 -1
  189. package/lib/design-tokens/brands/minimalist/css/tokens_minimalist.module.d.ts +2 -2
  190. package/lib/design-tokens/brands/minimalist/css/tokens_minimalist.module.d.ts.map +1 -1
  191. package/lib/design-tokens/brands/starbucks/tokens_starbucks.module.d.ts.map +1 -1
  192. package/lib/design-tokens/core/scss/theming/component.scss +5 -5
  193. package/lib/design-tokens/core/scss/theming/functions.scss +4 -0
  194. package/lib/design-tokens/core/scss/theming/spacing.scss +60 -60
  195. package/lib/design-tokens/core/scss/theming/variables.scss +11 -11
  196. package/lib/design-tokens/mixins/typography-usage.scss +277 -277
  197. package/lib/design-tokens/tokens_netflix.theme.d.ts.map +1 -1
  198. package/lib/{icon-DImqxDiW.js → icon-D22g8aWB.js} +35 -138
  199. package/lib/index.js +1 -1
  200. package/package.json +7 -6
@@ -1,62 +1,26 @@
1
- import { css as p, html as f } from "lit";
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 i } from "lit/decorators.js";
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 y = p`@import '../../design-tokens/core/scss/theming/component';
7
-
8
- /*------------------------------------*\
9
- #RADIO-FIELD
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 d = class d extends m {
12
+ const o = class o extends m {
49
13
  render() {
50
- const r = this.componentClassNames("cre8-c-radio-field", {});
51
- return f`
52
- <fieldset class="${r}" aria-describedby="${l(this.ariaDescribedBy)}">
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 ? f`<cre8-field-note
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
- d.styles = [y];
73
- let e = d;
74
- t([
75
- i()
36
+ o.styles = [h];
37
+ let e = o;
38
+ r([
39
+ t()
76
40
  ], e.prototype, "fieldNote");
77
- t([
78
- i()
41
+ r([
42
+ t()
79
43
  ], e.prototype, "ariaDescribedBy");
80
- t([
81
- i()
44
+ r([
45
+ t()
82
46
  ], e.prototype, "fieldNoteIconName");
83
- t([
84
- i({ type: Boolean, reflect: !0 })
47
+ r([
48
+ t({ type: Boolean, reflect: !0 })
85
49
  ], e.prototype, "fieldNoteKnockout");
86
- t([
87
- i({ type: Boolean, reflect: !0 })
50
+ r([
51
+ t({ type: Boolean, reflect: !0 })
88
52
  ], e.prototype, "isSuccess");
89
- t([
90
- i({ type: Boolean, reflect: !0 })
53
+ r([
54
+ t({ type: Boolean, reflect: !0 })
91
55
  ], e.prototype, "isError");
92
- t([
93
- i()
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,yBAoCV,CAAC;AACH,eAAe,MAAM,CAAC"}
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 u } from "lit";
2
- import { ifDefined as c } from "lit-html/directives/if-defined.js";
3
- import { property as d, query as m } from "lit/decorators.js";
4
- import { nanoid as h } from "nanoid";
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`@import '../../design-tokens/core/scss/theming/component.scss';
8
- /*------------------------------------*\
9
- #RADIO-FIELD-ITEM
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 a = class a extends b {
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 || h(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || h());
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((i) => {
172
- i.shadowRoot.querySelector(".cre8-c-radio-field-item__input").setAttribute("tabindex", "0");
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((i) => {
182
- i.checked = !1, i.shadowRoot.querySelector(".cre8-c-radio-field-item__input").setAttribute("tabindex", "-1"), i.resetField();
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, i, o) {
220
- e.preventDefault(), this.removeChecked(), o.focus(), o.click(), o.setAttribute("tabindex", "0"), i.setAttribute("checked", "");
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 i = this.previousElementSibling, o = i?.shadowRoot?.querySelector(
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, i, o);
104
+ o && this._updateSibling(e, r, o);
240
105
  } else if (e.code === "ArrowRight" || e.code === "ArrowDown") {
241
- const i = this.nextElementSibling, o = i?.shadowRoot?.querySelector(
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, i, o);
109
+ o && this._updateSibling(e, r, o);
245
110
  } else if (e.code === "Tab" && !this.checked) {
246
- const i = this.parentNode.querySelectorAll("cre8-radio-field-item");
247
- i.forEach((o) => {
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, i);
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
- }), i = this.checked === !0 || this.initialChecked === !0;
258
- return u`
259
- <div role=${c(this._getRole())} class="${e}" @keydown=${this.handleKeyDown}>
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="${c(this.ariaDescribedBy)}"
266
- required=${c(this.required)}
267
- aria-invalid=${this.required ? !!this.isError : c(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="${c(this.disabled)}"
271
- .checked="${i}"
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 ? u`<cre8-field-note
143
+ ${this.fieldNote ? m`<cre8-field-note
279
144
  ?inverted=${this.fieldNoteKnockout}
280
- id=${c(this.ariaDescribedBy)}
281
- iconName=${c(this.fieldNoteIconName)}
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
- a.styles = [y];
291
- let r = a;
155
+ c.styles = [y];
156
+ let i = c;
292
157
  t([
293
158
  d()
294
- ], r.prototype, "ariaDescribedBy");
159
+ ], i.prototype, "ariaDescribedBy");
295
160
  t([
296
161
  d({ type: Boolean, reflect: !0 })
297
- ], r.prototype, "checked");
162
+ ], i.prototype, "checked");
298
163
  t([
299
164
  d({ type: Boolean, reflect: !0 })
300
- ], r.prototype, "disabled");
165
+ ], i.prototype, "disabled");
301
166
  t([
302
- m("input")
303
- ], r.prototype, "field");
167
+ u("input")
168
+ ], i.prototype, "field");
304
169
  t([
305
170
  d()
306
- ], r.prototype, "fieldId");
171
+ ], i.prototype, "fieldId");
307
172
  t([
308
173
  d()
309
- ], r.prototype, "fieldNote");
174
+ ], i.prototype, "fieldNote");
310
175
  t([
311
176
  d()
312
- ], r.prototype, "fieldNoteIconName");
177
+ ], i.prototype, "fieldNoteIconName");
313
178
  t([
314
179
  d({ type: Boolean, reflect: !0 })
315
- ], r.prototype, "fieldNoteKnockout");
180
+ ], i.prototype, "fieldNoteKnockout");
316
181
  t([
317
182
  d({ type: Boolean, reflect: !0 })
318
- ], r.prototype, "fieldNoteIsError");
183
+ ], i.prototype, "fieldNoteIsError");
319
184
  t([
320
185
  d({ type: Boolean, reflect: !0 })
321
- ], r.prototype, "isError");
186
+ ], i.prototype, "isError");
322
187
  t([
323
188
  d({ type: Boolean, reflect: !0 })
324
- ], r.prototype, "isSuccess");
189
+ ], i.prototype, "isSuccess");
325
190
  t([
326
191
  d()
327
- ], r.prototype, "label");
192
+ ], i.prototype, "label");
328
193
  t([
329
194
  d({ type: Boolean, reflect: !0 })
330
- ], r.prototype, "required");
331
- customElements.get("cre8-radio-field-item") === void 0 && customElements.define("cre8-radio-field-item", r);
195
+ ], i.prototype, "required");
196
+ customElements.get("cre8-radio-field-item") === void 0 && customElements.define("cre8-radio-field-item", i);
332
197
  export {
333
- r as Cre8RadioFieldItem,
334
- r as default
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,yBAuIX,CAAC;AACF,eAAe,MAAM,CAAC"}
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"}