@redvars/peacock 3.5.1 → 3.6.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 (225) hide show
  1. package/dist/{BaseButton-DuASuVth.js → BaseButton-BNFAYn-S.js} +2 -2
  2. package/dist/{BaseButton-DuASuVth.js.map → BaseButton-BNFAYn-S.js.map} +1 -1
  3. package/dist/BaseInput-14YmcfK7.js +27 -0
  4. package/dist/BaseInput-14YmcfK7.js.map +1 -0
  5. package/dist/banner.js +2 -3
  6. package/dist/banner.js.map +1 -1
  7. package/dist/{button-DouvOfEU.js → button-colors-Ccys3hvS.js} +5 -294
  8. package/dist/button-colors-Ccys3hvS.js.map +1 -0
  9. package/dist/button-group.js +226 -6
  10. package/dist/button-group.js.map +1 -1
  11. package/dist/button.js +294 -8
  12. package/dist/button.js.map +1 -1
  13. package/dist/calendar-column-view.js +634 -0
  14. package/dist/calendar-column-view.js.map +1 -0
  15. package/dist/calendar-event-BrQ_SEKD.js +199 -0
  16. package/dist/calendar-event-BrQ_SEKD.js.map +1 -0
  17. package/dist/calendar-month-view.js +376 -0
  18. package/dist/calendar-month-view.js.map +1 -0
  19. package/dist/calendar.js +339 -0
  20. package/dist/calendar.js.map +1 -0
  21. package/dist/canvas.js +361 -0
  22. package/dist/canvas.js.map +1 -0
  23. package/dist/cb-compound-expression.js +125 -0
  24. package/dist/cb-compound-expression.js.map +1 -0
  25. package/dist/cb-divider.js +150 -0
  26. package/dist/cb-divider.js.map +1 -0
  27. package/dist/cb-expression.js +75 -0
  28. package/dist/cb-expression.js.map +1 -0
  29. package/dist/cb-predicate.js +137 -0
  30. package/dist/cb-predicate.js.map +1 -0
  31. package/dist/code-editor.js +2 -1
  32. package/dist/code-editor.js.map +1 -1
  33. package/dist/code-highlighter.js +1 -1
  34. package/dist/code-highlighter.js.map +1 -1
  35. package/dist/condition-builder.js +58 -0
  36. package/dist/condition-builder.js.map +1 -0
  37. package/dist/custom-elements-jsdocs.json +8479 -3965
  38. package/dist/custom-elements.json +15228 -7544
  39. package/dist/dropdown-button.js +216 -0
  40. package/dist/dropdown-button.js.map +1 -0
  41. package/dist/event-manager-D-QCmUgR.js +113 -0
  42. package/dist/event-manager-D-QCmUgR.js.map +1 -0
  43. package/dist/fab.js +1 -1
  44. package/dist/flow-designer-DvTUrDp5.js +1656 -0
  45. package/dist/flow-designer-DvTUrDp5.js.map +1 -0
  46. package/dist/flow-designer-node-BWrPuxAR.js +548 -0
  47. package/dist/flow-designer-node-BWrPuxAR.js.map +1 -0
  48. package/dist/flow-designer-node.js +4 -0
  49. package/dist/flow-designer-node.js.map +1 -0
  50. package/dist/flow-designer.js +16 -0
  51. package/dist/flow-designer.js.map +1 -0
  52. package/dist/html-editor.js +27516 -0
  53. package/dist/html-editor.js.map +1 -0
  54. package/dist/icon-button-CK1ZuE-2.js +247 -0
  55. package/dist/icon-button-CK1ZuE-2.js.map +1 -0
  56. package/dist/index.js +29 -6
  57. package/dist/index.js.map +1 -1
  58. package/dist/{is-dark-mode-DicqGkCJ.js → is-dark-mode-DOcaw4Yq.js} +2 -27
  59. package/dist/is-dark-mode-DOcaw4Yq.js.map +1 -0
  60. package/dist/modal.js +412 -0
  61. package/dist/modal.js.map +1 -0
  62. package/dist/{navigation-rail-Lxetd5-Z.js → navigation-rail-DTTkqohi.js} +1049 -2391
  63. package/dist/navigation-rail-DTTkqohi.js.map +1 -0
  64. package/dist/notification-manager.js +268 -0
  65. package/dist/notification-manager.js.map +1 -0
  66. package/dist/peacock-loader.js +93 -8
  67. package/dist/peacock-loader.js.map +1 -1
  68. package/dist/popover-NC7b1lTq.js +1971 -0
  69. package/dist/popover-NC7b1lTq.js.map +1 -0
  70. package/dist/popover-content.js +125 -0
  71. package/dist/popover-content.js.map +1 -0
  72. package/dist/popover.js +4 -0
  73. package/dist/popover.js.map +1 -0
  74. package/dist/split-button.js +388 -0
  75. package/dist/split-button.js.map +1 -0
  76. package/dist/src/__controllers/floating-controller.d.ts +35 -0
  77. package/dist/src/calendar/base-event.d.ts +10 -0
  78. package/dist/src/calendar/calendar-column-view.d.ts +41 -0
  79. package/dist/src/calendar/calendar-event.d.ts +7 -0
  80. package/dist/src/calendar/calendar-month-view.d.ts +31 -0
  81. package/dist/src/calendar/calendar.d.ts +65 -0
  82. package/dist/src/calendar/event-manager.d.ts +17 -0
  83. package/dist/src/calendar/index.d.ts +4 -0
  84. package/dist/src/calendar/types.d.ts +13 -0
  85. package/dist/src/calendar/utils.d.ts +31 -0
  86. package/dist/src/canvas/canvas.d.ts +92 -0
  87. package/dist/src/canvas/index.d.ts +2 -0
  88. package/dist/src/condition-builder/cb-compound-expression.d.ts +31 -0
  89. package/dist/src/condition-builder/cb-divider.d.ts +26 -0
  90. package/dist/src/condition-builder/cb-expression.d.ts +31 -0
  91. package/dist/src/condition-builder/cb-predicate.d.ts +30 -0
  92. package/dist/src/condition-builder/condition-builder.d.ts +27 -0
  93. package/dist/src/condition-builder/index.d.ts +5 -0
  94. package/dist/src/dropdown-button/dropdown-button.d.ts +68 -0
  95. package/dist/src/dropdown-button/index.d.ts +1 -0
  96. package/dist/src/flow-designer/commands.d.ts +66 -0
  97. package/dist/src/flow-designer/flow-designer-node.d.ts +46 -0
  98. package/dist/src/flow-designer/flow-designer.d.ts +133 -0
  99. package/dist/src/flow-designer/index.d.ts +7 -0
  100. package/dist/src/flow-designer/layout.d.ts +30 -0
  101. package/dist/src/flow-designer/types.d.ts +142 -0
  102. package/dist/src/flow-designer/validation.d.ts +43 -0
  103. package/dist/src/flow-designer/workflow-utils.d.ts +40 -0
  104. package/dist/src/html-editor/html-editor.d.ts +89 -0
  105. package/dist/src/html-editor/index.d.ts +2 -0
  106. package/dist/src/index.d.ts +15 -0
  107. package/dist/src/list/index.d.ts +2 -0
  108. package/dist/src/list/list-item.d.ts +35 -0
  109. package/dist/src/list/list.d.ts +28 -0
  110. package/dist/src/menu/menu/menu.d.ts +5 -7
  111. package/dist/src/menu/menu-item/menu-item.d.ts +14 -13
  112. package/dist/src/modal/index.d.ts +1 -0
  113. package/dist/src/modal/modal.d.ts +57 -0
  114. package/dist/src/navigation-rail/navigation-rail.d.ts +3 -7
  115. package/dist/src/notification-manager/index.d.ts +1 -0
  116. package/dist/src/notification-manager/notification-manager.d.ts +44 -0
  117. package/dist/src/number-field/number-field.d.ts +2 -2
  118. package/dist/src/popover/index.d.ts +2 -0
  119. package/dist/src/popover/popover-content.d.ts +29 -0
  120. package/dist/src/popover/popover.d.ts +62 -0
  121. package/dist/src/split-button/index.d.ts +1 -0
  122. package/dist/src/split-button/split-button.d.ts +72 -0
  123. package/dist/src/svg/index.d.ts +1 -0
  124. package/dist/src/svg/svg.d.ts +38 -0
  125. package/dist/src/toolbar/toolbar.d.ts +3 -3
  126. package/dist/src/tooltip/tooltip.d.ts +2 -15
  127. package/dist/test/flow-designer.test.d.ts +1 -0
  128. package/dist/toolbar.js +3 -3
  129. package/dist/toolbar.js.map +1 -1
  130. package/dist/tsconfig.tsbuildinfo +1 -1
  131. package/package.json +10 -2
  132. package/readme.md +3 -3
  133. package/src/__controllers/floating-controller.ts +237 -0
  134. package/src/banner/banner.scss +2 -3
  135. package/src/button/button/button.ts +1 -0
  136. package/src/calendar/base-event.ts +49 -0
  137. package/src/calendar/calendar-column-view.scss +326 -0
  138. package/src/calendar/calendar-column-view.ts +392 -0
  139. package/src/calendar/calendar-event.ts +20 -0
  140. package/src/calendar/calendar-month-view.scss +192 -0
  141. package/src/calendar/calendar-month-view.ts +244 -0
  142. package/src/calendar/calendar.scss +71 -0
  143. package/src/calendar/calendar.ts +298 -0
  144. package/src/calendar/event-manager.ts +117 -0
  145. package/src/calendar/index.ts +4 -0
  146. package/src/calendar/types.ts +14 -0
  147. package/src/calendar/utils.ts +180 -0
  148. package/src/canvas/canvas.scss +60 -0
  149. package/src/canvas/canvas.ts +391 -0
  150. package/src/canvas/index.ts +2 -0
  151. package/src/code-highlighter/code-highlighter.ts +1 -1
  152. package/src/condition-builder/cb-compound-expression.scss +37 -0
  153. package/src/condition-builder/cb-compound-expression.ts +80 -0
  154. package/src/condition-builder/cb-divider.scss +93 -0
  155. package/src/condition-builder/cb-divider.ts +56 -0
  156. package/src/condition-builder/cb-expression.scss +14 -0
  157. package/src/condition-builder/cb-expression.ts +49 -0
  158. package/src/condition-builder/cb-predicate.scss +35 -0
  159. package/src/condition-builder/cb-predicate.ts +102 -0
  160. package/src/condition-builder/condition-builder.scss +13 -0
  161. package/src/condition-builder/condition-builder.ts +38 -0
  162. package/src/condition-builder/index.ts +5 -0
  163. package/src/dropdown-button/demo/index.html +110 -0
  164. package/src/dropdown-button/dropdown-button.scss +22 -0
  165. package/src/dropdown-button/dropdown-button.ts +206 -0
  166. package/src/dropdown-button/index.ts +1 -0
  167. package/src/flow-designer/DEMO.md +239 -0
  168. package/src/flow-designer/commands.ts +278 -0
  169. package/src/flow-designer/flow-designer-node.ts +172 -0
  170. package/src/flow-designer/flow-designer.scss +457 -0
  171. package/src/flow-designer/flow-designer.ts +611 -0
  172. package/src/flow-designer/index.ts +41 -0
  173. package/src/flow-designer/layout.ts +357 -0
  174. package/src/flow-designer/types.ts +166 -0
  175. package/src/flow-designer/validation.ts +284 -0
  176. package/src/flow-designer/workflow-utils.ts +282 -0
  177. package/src/html-editor/html-editor.scss +188 -0
  178. package/src/html-editor/html-editor.ts +491 -0
  179. package/src/html-editor/index.ts +3 -0
  180. package/src/index.ts +27 -1
  181. package/src/list/index.ts +2 -0
  182. package/src/list/list-item.scss +111 -0
  183. package/src/list/list-item.ts +175 -0
  184. package/src/list/list.scss +24 -0
  185. package/src/list/list.ts +51 -0
  186. package/src/menu/menu/menu.scss +2 -2
  187. package/src/menu/menu/menu.ts +91 -101
  188. package/src/menu/menu-item/menu-item.scss +4 -0
  189. package/src/menu/menu-item/menu-item.ts +82 -78
  190. package/src/modal/index.ts +1 -0
  191. package/src/modal/modal.scss +206 -0
  192. package/src/modal/modal.ts +195 -0
  193. package/src/navigation-rail/navigation-rail-item.scss +7 -38
  194. package/src/navigation-rail/navigation-rail-item.ts +1 -2
  195. package/src/navigation-rail/navigation-rail.scss +17 -21
  196. package/src/navigation-rail/navigation-rail.ts +6 -9
  197. package/src/notification-manager/index.ts +1 -0
  198. package/src/notification-manager/notification-manager.scss +113 -0
  199. package/src/notification-manager/notification-manager.ts +199 -0
  200. package/src/number-field/number-field.ts +2 -2
  201. package/src/peacock-loader.ts +83 -0
  202. package/src/popover/index.ts +2 -0
  203. package/src/popover/popover-content.scss +69 -0
  204. package/src/popover/popover-content.ts +51 -0
  205. package/src/popover/popover.scss +7 -0
  206. package/src/popover/popover.ts +170 -0
  207. package/src/split-button/index.ts +1 -0
  208. package/src/split-button/split-button-colors.scss +56 -0
  209. package/src/split-button/split-button-sizes.scss +28 -0
  210. package/src/split-button/split-button.scss +79 -0
  211. package/src/split-button/split-button.ts +236 -0
  212. package/src/svg/index.ts +1 -0
  213. package/src/svg/svg.scss +91 -0
  214. package/src/svg/svg.ts +160 -0
  215. package/src/table/table.ts +2 -2
  216. package/src/toolbar/toolbar.ts +3 -3
  217. package/src/tooltip/tooltip.scss +4 -3
  218. package/src/tooltip/tooltip.ts +46 -104
  219. package/dist/button-DouvOfEU.js.map +0 -1
  220. package/dist/button-group-CEdMwvJJ.js +0 -464
  221. package/dist/button-group-CEdMwvJJ.js.map +0 -1
  222. package/dist/is-dark-mode-DicqGkCJ.js.map +0 -1
  223. package/dist/navigation-rail-Lxetd5-Z.js.map +0 -1
  224. package/dist/src/menu/menu/MenuSurfaceController.d.ts +0 -18
  225. package/src/menu/menu/MenuSurfaceController.ts +0 -61
@@ -1,8 +1,8 @@
1
1
  import { html, LitElement } from 'lit';
2
- import { property, query } from 'lit/decorators.js';
2
+ import { property } from 'lit/decorators.js';
3
3
  import { classMap } from 'lit/directives/class-map.js';
4
4
  import styles from './tooltip.scss';
5
- import { PopoverController } from '../popover/PopoverController.js';
5
+ import { FloatingController } from '../__controllers/floating-controller.js';
6
6
 
7
7
  // Define a type for valid trigger combinations
8
8
  export type TooltipTrigger = 'hover' | 'focus' | 'click';
@@ -39,97 +39,30 @@ export class Tooltip extends LitElement {
39
39
 
40
40
  @property({ type: Boolean, reflect: true }) preview = false;
41
41
 
42
- @query('#tooltip') floatingEl!: HTMLElement;
43
-
44
42
  private _target: HTMLElement | null = null;
45
43
 
46
- private _popover = new PopoverController(this, {
47
- placement: 'top',
48
- offset: 8,
49
- });
50
-
51
- private static CLOSE_OTHERS_EVENT = 'tooltip--open';
52
-
53
- private hasTrigger(type: TooltipTrigger): boolean {
54
- return this.trigger.split(' ').includes(type);
55
- }
56
-
57
- // Define listeners as arrow functions to maintain 'this' context
58
- private _onMouseEnter = () => {
59
- if (this.preview || !this.hasTrigger('hover')) return;
60
- window.clearTimeout(this._hideTimeout); // Cancel any pending close
61
- this.show();
62
- };
63
-
64
- private _onMouseLeave = () => {
65
- if (this.preview || !this.hasTrigger('hover')) return;
66
-
67
- // Small delay allows the mouse to move from target -> tooltip
68
- // without the tooltip vanishing instantly.
69
- this._hideTimeout = window.setTimeout(() => {
70
- // Only hide if the mouse isn't currently hovering the target OR the tooltip
71
- const isHoveringTarget = this._target?.matches(':hover');
72
- const isHoveringTooltip = this.floatingEl?.matches(':hover');
73
-
74
- if (!isHoveringTarget && !isHoveringTooltip) {
75
- this.hide();
76
- }
77
- }, 100); // 100ms is usually enough for a smooth transition
78
- };
79
-
80
- private _onFocusIn = () => this.preview && this.hasTrigger('focus') && this.show();
44
+ private _floating: FloatingController | null = null;
81
45
 
82
- private _onFocusOut = (e: FocusEvent) => {
83
- if (this.preview || !this.hasTrigger('focus')) return;
84
- if (this._target && !this._target.contains(e.relatedTarget as Node)) {
85
- this.hide();
86
- }
87
- };
88
-
89
- private _onClick = (e: MouseEvent) => {
90
- if (this.preview || !this.hasTrigger('click')) return;
91
- e.stopPropagation();
92
- this.toggle();
93
- };
94
-
95
- private show() {
96
- if (this.open) return;
97
- window.dispatchEvent(
98
- new CustomEvent(Tooltip.CLOSE_OTHERS_EVENT, {
99
- detail: { invoker: this },
100
- }),
101
- );
102
- this.open = true;
103
- }
46
+ private resolveTrigger(): 'hover' | 'click' | 'focus' | 'manual' | 'hover-focus' {
47
+ if (this.preview) return 'manual';
104
48
 
105
- private hide() {
106
- if (!this.open) return;
107
- this.open = false;
108
- }
49
+ const triggerTokens = this.trigger.split(' ');
50
+ const hasHover = triggerTokens.includes('hover');
51
+ const hasFocus = triggerTokens.includes('focus');
52
+ const hasClick = triggerTokens.includes('click');
109
53
 
110
- private toggle() {
111
- // eslint-disable-next-line no-unused-expressions
112
- this.open ? this.hide() : this.show();
54
+ if (hasClick) return 'click';
55
+ if (hasHover && hasFocus) return 'hover-focus';
56
+ if (hasFocus) return 'focus';
57
+ if (hasHover) return 'hover';
58
+ return 'manual';
113
59
  }
114
60
 
115
- private _handleGlobalOpen = (e: any) => {
116
- if (e.detail.invoker !== this) this.hide();
117
- };
118
-
119
- private _handleDocumentClick = (e: MouseEvent) => {
120
- const path = e.composedPath();
121
- if (this._target && !path.includes(this._target)) {
122
- this.hide();
123
- }
124
- };
125
-
126
61
  private detachListeners() {
127
- if (!this._target) return;
128
- this._target.removeEventListener('mouseenter', this._onMouseEnter);
129
- this._target.removeEventListener('mouseleave', this._onMouseLeave);
130
- this._target.removeEventListener('focusin', this._onFocusIn);
131
- this._target.removeEventListener('focusout', this._onFocusOut);
132
- this._target.removeEventListener('click', this._onClick);
62
+ if (this._floating) {
63
+ this._floating.close();
64
+ this._floating = null;
65
+ }
133
66
  this._target = null;
134
67
  }
135
68
 
@@ -158,7 +91,7 @@ export class Tooltip extends LitElement {
158
91
  }
159
92
 
160
93
  private attachListeners() {
161
- this.detachListeners(); // Cleanup old target if it exists
94
+ this.detachListeners();
162
95
 
163
96
  // Resolve target: ID-based lookup or fallback to parent
164
97
  const root = this.getRootNode() as ShadowRoot | Document;
@@ -168,27 +101,28 @@ export class Tooltip extends LitElement {
168
101
 
169
102
  if (!this._target) return;
170
103
 
171
- this._target.addEventListener('mouseenter', this._onMouseEnter);
172
- this._target.addEventListener('mouseleave', this._onMouseLeave);
173
- this._target.addEventListener('focusin', this._onFocusIn);
174
- this._target.addEventListener('focusout', this._onFocusOut);
175
- this._target.addEventListener('click', this._onClick);
104
+ this._floating = new FloatingController(this, {
105
+ placement: 'top',
106
+ strategy: 'fixed',
107
+ offset: 0,
108
+ trigger: this.resolveTrigger(),
109
+ closeOnClickOutside: true,
110
+ onOpenChange: (isOpen) => {
111
+ if (this.open === isOpen) return;
112
+ this.open = isOpen;
113
+ },
114
+ });
115
+
116
+ this._floating.setElements(this._target, this);
176
117
  }
177
118
 
178
119
  connectedCallback() {
179
120
  super.connectedCallback();
180
121
  this.attachListeners();
181
- window.addEventListener(Tooltip.CLOSE_OTHERS_EVENT, this._handleGlobalOpen);
182
- window.addEventListener('click', this._handleDocumentClick);
183
122
  }
184
123
 
185
124
  disconnectedCallback() {
186
125
  this.detachListeners();
187
- window.removeEventListener(
188
- Tooltip.CLOSE_OTHERS_EVENT,
189
- this._handleGlobalOpen,
190
- );
191
- window.removeEventListener('click', this._handleDocumentClick);
192
126
  super.disconnectedCallback();
193
127
  }
194
128
 
@@ -198,12 +132,22 @@ export class Tooltip extends LitElement {
198
132
  this.attachListeners();
199
133
  }
200
134
 
201
- if (changedProps.has('open') && this.open && this._target) {
202
- this._popover.updatePosition(this._target, this.floatingEl);
135
+ if (changedProps.has('trigger') || changedProps.has('preview')) {
136
+ this.attachListeners();
203
137
  }
204
- }
205
138
 
206
- private _hideTimeout?: number;
139
+ if (this._floating && this._target) {
140
+ this._floating.setElements(this._target, this);
141
+
142
+ if (changedProps.has('open') && this.open && !this._floating.isOpen) {
143
+ this._floating.open();
144
+ }
145
+
146
+ if (changedProps.has('open') && !this.open && this._floating.isOpen) {
147
+ this._floating.close();
148
+ }
149
+ }
150
+ }
207
151
 
208
152
  render() {
209
153
  return html` <div
@@ -214,8 +158,6 @@ export class Tooltip extends LitElement {
214
158
  })}
215
159
  id="tooltip"
216
160
  role="tooltip"
217
- @mouseenter=${this._onMouseEnter}
218
- @mouseleave=${this._onMouseLeave}
219
161
  aria-hidden=${!this.open}
220
162
  aria-labelledby="tooltip-labelledby"
221
163
  >
@@ -1 +0,0 @@
1
- {"version":3,"file":"button-DouvOfEU.js","sources":["../../src/button/button/button.ts"],"sourcesContent":["import { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './button.scss';\nimport colorStyles from './button-colors.scss';\nimport sizeStyles from './button-sizes.scss';\nimport { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';\nimport { throttle } from '@/__utils/throttle.js';\nimport { spread } from '@/__directive/spread.js';\nimport { BaseButton } from '../BaseButton.js';\n\n/**\n * @label Button\n * @tag wc-button\n * @rawTag button\n *\n * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.\n * @overview\n * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>\n *\n * @cssprop --button-container-shape: Defines the border radius of the button container shape.\n *\n * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.\n * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.\n *\n *\n * @cssprop --filled-button-container-color: Color of the filled button container.\n * @cssprop --filled-button-label-text-color: Text color of the filled button label.\n *\n * @cssprop --outlined-button-container-color: Color of the outlined button container.\n * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.\n *\n * @cssprop --text-button-label-text-color: Text color of the text button label.\n *\n * @cssprop --tonal-button-container-color: Color of the tonal button container.\n * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.\n *\n * @cssprop --elevated-button-container-color: Color of the elevated button container.\n * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.\n *\n * @cssprop --neo-button-container-color: Color of the neo button container.\n * @cssprop --neo-button-label-text-color: Text color of the neo button label.\n *\n * @fires {MouseEvent} click - Dispatched when the button is clicked.\n *\n * @example\n * ```html\n * <wc-button>Button</wc-button>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Button extends BaseButton {\n static override styles = [styles, colorStyles, sizeStyles];\n\n /**\n * Icon alignment.\n * Possible values are `\"start\"`, `\"end\"`. Defaults to `\"end\"`.\n */\n @property({ attribute: 'icon-align' })\n iconAlign: 'start' | 'end' = 'end';\n\n /**\n * Button size.\n * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n */\n @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n /**\n * Type is preset of color and variant. Type will be only applied.\n *\n */\n @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';\n \n /**\n * The visual style of the button.\n *\n * Possible variant values:\n * `\"filled\"` is a filled button.\n * `\"outlined\"` is an outlined button.\n * `\"text\"` is a transparent button.\n * `\"tonal\"` is a light color button.\n * `\"elevated\"` is elevated button\n */\n @property() variant:\n | 'elevated'\n | 'filled'\n | 'tonal'\n | 'outlined'\n | 'text'\n | 'neo' = 'filled';\n \n /**\n * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.\n */\n @property({ reflect: true }) color:\n | 'primary'\n | 'success'\n | 'danger'\n | 'warning'\n | 'surface'\n | 'on-surface' = 'primary';\n\n /**\n * Additional ARIA attributes to pass to the inner button/anchor element.\n */\n @property({ reflect: true })\n configAria?: { [key: string]: any };\n\n @state()\n private slotHasContent = false;\n\n override focus() {\n this.buttonElement?.focus();\n }\n\n override blur() {\n this.buttonElement?.blur();\n }\n\n override firstUpdated() {\n this.__dispatchClickWithThrottle = throttle(\n this.__dispatchClick,\n this.throttleDelay,\n );\n observerSlotChangesWithCallback(\n this.renderRoot.querySelector('slot'),\n hasContent => {\n this.slotHasContent = hasContent;\n this.requestUpdate();\n },\n );\n\n this.__convertTypeToVariantAndColor();\n }\n\n __convertTypeToVariantAndColor() {\n if (this.type === 'primary') {\n this.color = 'primary';\n this.variant = 'filled';\n } else if (this.type === 'secondary') {\n this.color = 'surface';\n this.variant = 'filled';\n } else if (this.type === 'tertiary') {\n this.color = 'primary';\n this.variant = 'text';\n } else if (this.type === 'danger') {\n this.color = 'danger';\n this.variant = 'filled';\n }\n }\n\n override render() {\n const isLink = this.__isLink();\n\n const cssClasses = {\n button: true,\n 'button-element': true,\n [`size-${this.size}`]: true,\n [`variant-${this.variant}`]: true,\n [`color-${this.color}`]: true,\n disabled: this.disabled || this.softDisabled,\n pressed: this.isPressed,\n 'has-content': this.slotHasContent,\n 'show-skeleton': this.skeleton,\n [`icon-align-${this.iconAlign}`]: true,\n };\n\n if (!isLink) {\n return html`<button\n class=${classMap(cssClasses)}\n id=\"button\"\n type=${this.htmlType}\n @click=${this.__dispatchClickWithThrottle}\n @mousedown=${this.__handlePress}\n @keydown=${this.__handlePress}\n @keyup=${this.__handlePress}\n\n aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}\n ?aria-disabled=${this.softDisabled}\n\n ?disabled=${this.disabled}\n ${spread(this.configAria)}\n >\n ${this.renderButtonContent()}\n </button>\n ${this.__renderTooltip()}`;\n }\n return html`<a\n class=${classMap(cssClasses)}\n id=\"button\"\n href=${this.href}\n target=${this.target}\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this.__dispatchClick}\n @mousedown=${this.__handlePress}\n @keydown=${this.__handlePress}\n @keyup=${this.__handlePress}\n role=\"button\"\n\n aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}\n ?aria-disabled=${this.softDisabled}\n\n ${spread(this.configAria)}\n >\n ${this.renderButtonContent()}\n </a>\n ${this.__renderTooltip()}`;\n }\n\n renderButtonContent() {\n return html`\n <wc-focus-ring class=\"focus-ring\" for='button'></wc-focus-ring>\n <wc-elevation class=\"elevation\"></wc-elevation>\n <div class=\"neo-background\"></div>\n <div class=\"background\"></div>\n <div class=\"outline\"></div>\n <wc-ripple class=\"ripple\"></wc-ripple>\n <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n <div class=\"button-content\">\n <div class=\"slot-container\">\n <slot></slot>\n </div>\n\n <slot name=\"icon\"></slot>\n </div>\n\n ${this.__renderDisabledReason(this.softDisabled)}\n `;\n }\n}\n"],"names":["html","classMap","ifDefined","styles","colorStyles","sizeStyles","property","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU,CAAA;AAA/B,IAAA,WAAA,GAAA;;AAGL;;;AAGG;QAEH,IAAA,CAAA,SAAS,GAAoB,KAAK;AAElC;;;AAGG;QAC0B,IAAA,CAAA,IAAI,GAAqC,IAAI;AAQxE;;;;;;;;;AASG;QACS,IAAA,CAAA,OAAO,GAMP,QAAQ;AAEpB;;AAEG;QAC0B,IAAA,CAAA,KAAK,GAMf,SAAS;QAStB,IAAA,CAAA,cAAc,GAAG,KAAK;IAyHhC;IAvHW,KAAK,GAAA;AACZ,QAAA,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE;IAC7B;IAES,IAAI,GAAA;AACX,QAAA,IAAI,CAAC,aAAa,EAAE,IAAI,EAAE;IAC5B;IAES,YAAY,GAAA;AACnB,QAAA,IAAI,CAAC,2BAA2B,GAAG,QAAQ,CACzC,IAAI,CAAC,eAAe,EACpB,IAAI,CAAC,aAAa,CACnB;AACD,QAAA,+BAA+B,CAC7B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,EACrC,UAAU,IAAG;AACX,YAAA,IAAI,CAAC,cAAc,GAAG,UAAU;YAChC,IAAI,CAAC,aAAa,EAAE;AACtB,QAAA,CAAC,CACF;QAED,IAAI,CAAC,8BAA8B,EAAE;IACvC;IAEA,8BAA8B,GAAA;AAC5B,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;AAC3B,YAAA,IAAI,CAAC,KAAK,GAAG,SAAS;AACtB,YAAA,IAAI,CAAC,OAAO,GAAG,QAAQ;QACzB;AAAO,aAAA,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,EAAE;AACpC,YAAA,IAAI,CAAC,KAAK,GAAG,SAAS;AACtB,YAAA,IAAI,CAAC,OAAO,GAAG,QAAQ;QACzB;AAAO,aAAA,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;AACnC,YAAA,IAAI,CAAC,KAAK,GAAG,SAAS;AACtB,YAAA,IAAI,CAAC,OAAO,GAAG,MAAM;QACvB;AAAO,aAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;AACjC,YAAA,IAAI,CAAC,KAAK,GAAG,QAAQ;AACrB,YAAA,IAAI,CAAC,OAAO,GAAG,QAAQ;QACzB;IACF;IAES,MAAM,GAAA;AACb,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE;AAE9B,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,gBAAgB,EAAE,IAAI;AACtB,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;AAC3B,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACjC,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,IAAI;AAC7B,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY;YAC5C,OAAO,EAAE,IAAI,CAAC,SAAS;YACvB,aAAa,EAAE,IAAI,CAAC,cAAc;YAClC,eAAe,EAAE,IAAI,CAAC,QAAQ;AAC9B,YAAA,CAAC,cAAc,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,IAAI;SACvC;QAED,IAAI,CAAC,MAAM,EAAE;AACX,YAAA,OAAOA,CAAI,CAAA,CAAA;kBACCC,CAAQ,CAAC,UAAU,CAAC;;AAErB,eAAA,EAAA,IAAI,CAAC,QAAQ;AACX,iBAAA,EAAA,IAAI,CAAC,2BAA2B;AAC5B,qBAAA,EAAA,IAAI,CAAC,aAAa;AACpB,mBAAA,EAAA,IAAI,CAAC,aAAa;AACpB,iBAAA,EAAA,IAAI,CAAC,aAAa;;AAER,2BAAA,EAAAC,CAAS,CAAC,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC,kBAAkB,GAAG,SAAS,CAAC;AAC1E,yBAAA,EAAA,IAAI,CAAC,YAAY;;AAEtB,oBAAA,EAAA,IAAI,CAAC,QAAQ;AACvB,UAAA,EAAA,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;;YAEvB,IAAI,CAAC,mBAAmB,EAAE;;AAE5B,QAAA,EAAA,IAAI,CAAC,eAAe,EAAE,CAAA,CAAE;QAC9B;AACA,QAAA,OAAOF,CAAI,CAAA,CAAA;gBACCC,CAAQ,CAAC,UAAU,CAAC;;AAErB,aAAA,EAAA,IAAI,CAAC,IAAI;AACP,eAAA,EAAA,IAAI,CAAC,MAAM;mBACT,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG;AAC5B,eAAA,EAAA,IAAI,CAAC,eAAe;AAChB,mBAAA,EAAA,IAAI,CAAC,aAAa;AACpB,iBAAA,EAAA,IAAI,CAAC,aAAa;AACpB,eAAA,EAAA,IAAI,CAAC,aAAa;;;AAGR,yBAAA,EAAAC,CAAS,CAAC,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC,kBAAkB,GAAG,SAAS,CAAC;AAC1E,uBAAA,EAAA,IAAI,CAAC,YAAY;;AAEhC,QAAA,EAAA,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;;UAEvB,IAAI,CAAC,mBAAmB,EAAE;;AAE5B,MAAA,EAAA,IAAI,CAAC,eAAe,EAAE,CAAA,CAAE;IAC9B;IAEA,mBAAmB,GAAA;AACjB,QAAA,OAAOF,CAAI,CAAA;;;;;;;;;;;;;;;;;AAiBP,MAAA,EAAA,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,YAAY,CAAC;KACjD;IACH;;AAjLgB,MAAA,CAAA,MAAM,GAAG,CAACG,UAAM,EAAEC,UAAW,EAAEC,QAAU,CAAnC;AAOtB,UAAA,CAAA;AADC,IAAAC,CAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE;AACF,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAMN,UAAA,CAAA;AAA5B,IAAAA,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAAgD,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAM7C,UAAA,CAAA;AAA3B,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAA8C,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAY5D,UAAA,CAAA;AAAX,IAAAA,CAAQ;AAMY,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAKQ,UAAA,CAAA;AAA5B,IAAAA,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAME,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAM/B,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AACS,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAG5B,UAAA,CAAA;AADP,IAAAC,CAAK;AACyB,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;AA1DpB,MAAM,GAAA,UAAA,CAAA;IADlB;AACY,CAAA,EAAA,MAAM,CAmLlB;;;;"}