@kyndryl-design-system/shidoka-applications 2.79.1 → 2.79.2

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.
@@ -0,0 +1,2 @@
1
+ export { StatusButton } from './statusButton';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/statusButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
@@ -1,2 +1,2 @@
1
- export{StatusPicker}from"./statusPicker.js";import"tslib";import"lit";import"lit/decorators.js";import"lit-html/directives/class-map.js";
1
+ export{StatusButton}from"./statusButton.js";import"tslib";import"lit";import"lit/decorators.js";import"lit-html/directives/class-map.js";
2
2
  //# sourceMappingURL=index.js.map
@@ -9,11 +9,11 @@ declare enum STATUS_KINDS {
9
9
  AI = "ai"
10
10
  }
11
11
  /**
12
- * Status Picker.
13
- * @fires on-click - Captures the click event and emits the Status Picker value. `detail:{ origEvent: PointerEvent,value: string }`
12
+ * Status Button.
13
+ * @fires on-click - Captures the event and emits the selected value and original event details.`detail:{ origEvent: PointerEvent,value: string }`
14
14
  * @slot unnamed - Slot for icon.
15
15
  */
16
- export declare class StatusPicker extends LitElement {
16
+ export declare class StatusButton extends LitElement {
17
17
  static styles: import("lit").CSSResult;
18
18
  /**
19
19
  * Status label (Required).
@@ -51,13 +51,13 @@ export declare class StatusPicker extends LitElement {
51
51
  */
52
52
  accessor _labelEl: HTMLSpanElement;
53
53
  render(): import("lit-html").TemplateResult<1>;
54
- private handleStatusClick;
54
+ private handleBtnClick;
55
55
  updated(changedProperties: PropertyValues): void;
56
56
  }
57
57
  declare global {
58
58
  interface HTMLElementTagNameMap {
59
- 'kyn-status-picker': StatusPicker;
59
+ 'kyn-status-btn': StatusButton;
60
60
  }
61
61
  }
62
62
  export {};
63
- //# sourceMappingURL=statusPicker.d.ts.map
63
+ //# sourceMappingURL=statusButton.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"statusPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/statusPicker/statusPicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAmB,MAAM,KAAK,CAAC;AAKlE,aAAK,YAAY;IACf,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,EAAE,OAAO;CACV;AAED;;;;GAIG;AAEH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAA+B;IAErD;;OAEG;IAEH,QAAQ,CAAC,KAAK,SAAM;IAEpB;;OAEG;IAEH,QAAQ,CAAC,QAAQ,UAAS;IAE1B;;OAEG;IAEH,QAAQ,CAAC,QAAQ,UAAS;IAE1B;;OAEG;IAEH,QAAQ,CAAC,YAAY,UAAS;IAE9B;;OAEG;IAEH,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAwB;IAEnD;;;OAGG;IAEH,QAAQ,CAAC,SAAS,UAAS;IAE3B;;;OAGG;IAEH,QAAQ,CAAC,YAAY,UAAS;IAE9B;;;OAGG;IAEH,QAAQ,CAAC,QAAQ,EAAG,eAAe,CAAC;IAE3B,MAAM;IAgCf,OAAO,CAAC,iBAAiB;IAYhB,OAAO,CAAC,iBAAiB,EAAE,cAAc;CAcnD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,YAAY,CAAC;KACnC;CACF"}
1
+ {"version":3,"file":"statusButton.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/statusButton/statusButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAmB,MAAM,KAAK,CAAC;AAKlE,aAAK,YAAY;IACf,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,EAAE,OAAO;CACV;AAED;;;;GAIG;AAEH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAA4B;IAElD;;OAEG;IAEH,QAAQ,CAAC,KAAK,SAAM;IAEpB;;OAEG;IAEH,QAAQ,CAAC,QAAQ,UAAS;IAE1B;;OAEG;IAEH,QAAQ,CAAC,QAAQ,UAAS;IAE1B;;OAEG;IAEH,QAAQ,CAAC,YAAY,UAAS;IAE9B;;OAEG;IAEH,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAwB;IAEnD;;;OAGG;IAEH,QAAQ,CAAC,SAAS,UAAS;IAE3B;;;OAGG;IAEH,QAAQ,CAAC,YAAY,UAAS;IAE9B;;;OAGG;IAEH,QAAQ,CAAC,QAAQ,EAAG,eAAe,CAAC;IAE3B,MAAM;IA8Bf,OAAO,CAAC,cAAc;IAYb,OAAO,CAAC,iBAAiB,EAAE,cAAc;CAcnD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
@@ -0,0 +1,288 @@
1
+ import{__setFunctionName as t,__esDecorate as o,__runInitializers as r,__classPrivateFieldGet as s,__classPrivateFieldSet as e}from"tslib";import{css as a,LitElement as n,unsafeCSS as i,html as c}from"lit";import{customElement as d,property as l,state as u,query as b}from"lit/decorators.js";import{classMap as k}from"lit-html/directives/class-map.js";var v,h=a`*,
2
+ *::before,
3
+ *::after {
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ * {
8
+ -webkit-tap-highlight-color: transparent;
9
+ }
10
+
11
+ :root {
12
+ --kd-current-breakpoint: sm;
13
+ }
14
+ @media (min-width: 42rem) {
15
+ :root {
16
+ --kd-current-breakpoint: md;
17
+ }
18
+ }
19
+ @media (min-width: 74rem) {
20
+ :root {
21
+ --kd-current-breakpoint: lg;
22
+ }
23
+ }
24
+ @media (min-width: 82rem) {
25
+ :root {
26
+ --kd-current-breakpoint: xl;
27
+ }
28
+ }
29
+ @media (min-width: 99rem) {
30
+ :root {
31
+ --kd-current-breakpoint: max;
32
+ }
33
+ }
34
+
35
+ :host {
36
+ display: inline-block;
37
+ }
38
+
39
+ .status-btn {
40
+ font-family: var(--kd-font-family-secondary);
41
+ font-size: var(--kd-font-size-utility-3-sm);
42
+ line-height: var(--kd-line-height-utility-3-sm);
43
+ font-weight: var(--kd-font-weight-regular);
44
+ letter-spacing: var(--kd-letter-spacing-5);
45
+ display: flex;
46
+ height: 24px;
47
+ align-items: center;
48
+ justify-content: space-around;
49
+ border: 0.5px solid transparent;
50
+ border-radius: 6px;
51
+ padding: 4px;
52
+ gap: 4px;
53
+ min-width: 24px;
54
+ max-width: 161px;
55
+ cursor: pointer;
56
+ transition: background-color 0.4s ease;
57
+ }
58
+ @media (min-width: 42rem) {
59
+ .status-btn {
60
+ font-size: var(--kd-font-size-utility-3-md);
61
+ line-height: var(--kd-line-height-utility-3-md);
62
+ }
63
+ }
64
+ @media (min-width: 74rem) {
65
+ .status-btn {
66
+ font-size: var(--kd-font-size-utility-3-lg);
67
+ line-height: var(--kd-line-height-utility-3-lg);
68
+ }
69
+ }
70
+ @media (min-width: 82rem) {
71
+ .status-btn {
72
+ font-size: var(--kd-font-size-utility-3-xlg);
73
+ line-height: var(--kd-line-height-utility-3-xlg);
74
+ }
75
+ }
76
+ @media (min-width: 99rem) {
77
+ .status-btn {
78
+ font-size: var(--kd-font-size-utility-3-max);
79
+ line-height: var(--kd-line-height-utility-3-max);
80
+ }
81
+ }
82
+ .status-btn.no-truncation {
83
+ max-width: none;
84
+ }
85
+
86
+ .status-btn__label {
87
+ white-space: nowrap;
88
+ overflow: hidden;
89
+ text-overflow: ellipsis;
90
+ }
91
+
92
+ .status-btn__state-disable {
93
+ cursor: not-allowed;
94
+ background-color: var(--kd-color-background-status-buttons-success-disabled) !important;
95
+ color: var(--kd-color-text-status-buttons-success-disabled) !important;
96
+ border-color: var(--kd-color-border-status-buttons-success-disabled) !important;
97
+ outline: none !important;
98
+ }
99
+ .status-btn__state-interactive {
100
+ /* error state */
101
+ /* warning state */
102
+ /* success state */
103
+ /* low state */
104
+ /* medium state */
105
+ /* high state */
106
+ /* ai state */
107
+ }
108
+ .status-btn__state-interactive-error {
109
+ color: var(--kd-color-text-status-buttons-error-enabled);
110
+ background-color: var(--kd-color-background-status-buttons-error-enabled);
111
+ border-color: var(--kd-color-border-status-buttons-error-enabled);
112
+ }
113
+ .status-btn__state-interactive-error:hover {
114
+ color: var(--kd-color-text-status-buttons-error-hover);
115
+ background-color: var(--kd-color-background-status-buttons-error-hover);
116
+ border-color: var(--kd-color-border-status-buttons-error-hover);
117
+ }
118
+ .status-btn__state-interactive-error.selected {
119
+ border-color: var(--kd-color-border-status-buttons-error-selected);
120
+ color: var(--kd-color-text-status-buttons-error-selected);
121
+ background-color: var(--kd-color-background-status-buttons-error-selected);
122
+ }
123
+ .status-btn__state-interactive-error:focus-visible {
124
+ outline: 1px solid var(--kd-color-border-status-buttons-error-focused);
125
+ background-color: var(--kd-color-background-status-buttons-error-focused);
126
+ }
127
+ .status-btn__state-interactive-error:active {
128
+ color: var(--kd-color-text-status-buttons-error-pressed);
129
+ border-color: var(--kd-color-border-status-buttons-error-pressed);
130
+ background-color: var(--kd-color-background-status-buttons-error-pressed);
131
+ }
132
+ .status-btn__state-interactive-warning {
133
+ color: var(--kd-color-text-status-buttons-warning-enabled);
134
+ background-color: var(--kd-color-background-status-buttons-warning-enabled);
135
+ border-color: var(--kd-color-border-status-buttons-warning-enabled);
136
+ }
137
+ .status-btn__state-interactive-warning:hover {
138
+ background-color: var(--kd-color-background-status-buttons-warning-hover);
139
+ border-color: var(--kd-color-border-status-buttons-warning-hover);
140
+ }
141
+ .status-btn__state-interactive-warning.selected {
142
+ border-color: var(--kd-color-border-status-buttons-warning-selected);
143
+ background-color: var(--kd-color-background-status-buttons-warning-selected);
144
+ }
145
+ .status-btn__state-interactive-warning:focus-visible {
146
+ outline: 1px solid var(--kd-color-border-status-buttons-warning-focused);
147
+ background-color: var(--kd-color-background-status-buttons-warning-focused);
148
+ }
149
+ .status-btn__state-interactive-warning:active {
150
+ border-color: var(--kd-color-border-status-buttons-warning-pressed);
151
+ background-color: var(--kd-color-background-status-buttons-warning-pressed);
152
+ }
153
+ .status-btn__state-interactive-success {
154
+ color: var(--kd-color-text-status-buttons-success-enabled);
155
+ background-color: var(--kd-color-background-status-buttons-success-enabled);
156
+ border-color: var(--kd-color-border-status-buttons-success-enabled);
157
+ }
158
+ .status-btn__state-interactive-success:hover {
159
+ background-color: var(--kd-color-background-status-buttons-success-hover);
160
+ border-color: var(--kd-color-border-status-buttons-success-hover);
161
+ }
162
+ .status-btn__state-interactive-success.selected {
163
+ border-color: var(--kd-color-border-status-buttons-success-selected);
164
+ background-color: var(--kd-color-background-status-buttons-success-selected);
165
+ }
166
+ .status-btn__state-interactive-success:focus-visible {
167
+ outline: 1px solid var(--kd-color-border-status-buttons-success-focused);
168
+ background-color: var(--kd-color-background-status-buttons-success-focused);
169
+ }
170
+ .status-btn__state-interactive-success:active {
171
+ border-color: var(--kd-color-border-status-buttons-success-pressed);
172
+ background-color: var(--kd-color-background-status-buttons-success-pressed);
173
+ }
174
+ .status-btn__state-interactive-low {
175
+ color: var(--kd-color-text-status-buttons-information-low-enabled);
176
+ background-color: var(--kd-color-background-status-buttons-information-low-enabled);
177
+ border-color: var(--kd-color-border-status-buttons-information-low-enabled);
178
+ }
179
+ .status-btn__state-interactive-low:hover {
180
+ color: var(--kd-color-text-status-buttons-information-low-hover);
181
+ border-color: var(--kd-color-border-status-buttons-information-low-hover);
182
+ background-color: var(--kd-color-background-status-buttons-information-low-hover);
183
+ }
184
+ .status-btn__state-interactive-low.selected {
185
+ color: var(--kd-color-text-status-buttons-information-low-selected);
186
+ border-color: var(--kd-color-tag-border-error-selected);
187
+ background-color: var(--kd-color-background-status-buttons-information-low-selected);
188
+ }
189
+ .status-btn__state-interactive-low:focus-visible {
190
+ color: var(--kd-color-text-status-buttons-information-low-focused);
191
+ outline: 1px solid var(--kd-color-border-status-buttons-information-low-focused);
192
+ background-color: var(--kd-color-background-status-buttons-information-low-focused);
193
+ }
194
+ .status-btn__state-interactive-low:active {
195
+ color: var(--kd-color-text-status-buttons-information-low-pressed);
196
+ border-color: var(--kd-color-border-status-buttons-information-low-pressed);
197
+ background-color: var(--kd-color-background-status-buttons-information-low-pressed);
198
+ }
199
+ .status-btn__state-interactive-medium {
200
+ color: var(--kd-color-text-status-buttons-information-medium-enabled);
201
+ background-color: var(--kd-color-background-status-buttons-information-medium-enabled);
202
+ border-color: var(--kd-color-border-status-buttons-information-medium-enabled);
203
+ }
204
+ .status-btn__state-interactive-medium:hover {
205
+ color: var(--kd-color-text-status-buttons-information-medium-hover);
206
+ background-color: var(--kd-color-background-status-buttons-information-medium-hover);
207
+ border-color: var(--kd-color-border-status-buttons-information-medium-hover);
208
+ }
209
+ .status-btn__state-interactive-medium.selected {
210
+ color: var(--kd-color-text-status-buttons-information-medium-selected);
211
+ border-color: var(--kd-color-border-status-buttons-information-medium-selected);
212
+ background-color: var(--kd-color-background-status-buttons-information-medium-selected);
213
+ }
214
+ .status-btn__state-interactive-medium:focus-visible {
215
+ color: var(--kd-color-text-status-buttons-information-medium-focused);
216
+ outline: 1px solid var(--kd-color-border-status-buttons-information-medium-focused);
217
+ background-color: var(--kd-color-background-status-buttons-information-medium-focused);
218
+ }
219
+ .status-btn__state-interactive-medium:active {
220
+ color: var(--kd-color-text-status-buttons-information-medium-pressed);
221
+ border-color: var(--kd-color-border-status-buttons-information-medium-pressed);
222
+ background-color: var(--kd-color-background-status-buttons-information-medium-pressed);
223
+ }
224
+ .status-btn__state-interactive-high {
225
+ color: var(--kd-color-text-status-buttons-information-high-enabled);
226
+ background-color: var(--kd-color-background-status-buttons-information-high-enabled);
227
+ border-color: var(--kd-color-border-status-buttons-information-high-enabled);
228
+ }
229
+ .status-btn__state-interactive-high:hover {
230
+ color: var(--kd-color-text-status-buttons-information-high-hover);
231
+ background-color: var(--kd-color-background-status-buttons-information-high-hover);
232
+ border-color: var(--kd-color-border-status-buttons-information-high-hover);
233
+ }
234
+ .status-btn__state-interactive-high.selected {
235
+ color: var(--kd-color-text-status-buttons-information-high-selected);
236
+ border-color: var(--kd-color-border-status-buttons-information-high-selected);
237
+ background-color: var(--kd-color-background-status-buttons-information-high-selected);
238
+ }
239
+ .status-btn__state-interactive-high:focus-visible {
240
+ color: var(--kd-color-text-status-buttons-information-high-focused);
241
+ outline: 1px solid var(--kd-color-border-status-buttons-information-high-focused);
242
+ background-color: var(--kd-color-background-status-buttons-information-high-focused);
243
+ }
244
+ .status-btn__state-interactive-high:active {
245
+ color: var(--kd-color-text-status-buttons-information-high-pressed);
246
+ border-color: var(--kd-color-border-status-buttons-information-high-pressed);
247
+ background-color: var(--kd-color-background-status-buttons-information-high-pressed);
248
+ }
249
+ .status-btn__state-interactive-ai {
250
+ color: var(--kd-color-text-status-buttons-ai-enabled);
251
+ background-color: var(--kd-color-background-status-buttons-ai-enabled);
252
+ border-color: var(--kd-color-border-status-buttons-ai-enabled);
253
+ }
254
+ .status-btn__state-interactive-ai:hover {
255
+ color: var(--kd-color-text-status-buttons-ai-hover);
256
+ background-color: var(--kd-color-background-status-buttons-ai-hover);
257
+ }
258
+ .status-btn__state-interactive-ai.selected {
259
+ border-color: var(--kd-color-border-status-buttons-ai-selected);
260
+ color: var(--kd-color-text-status-buttons-ai-selected);
261
+ background-color: var(--kd-color-background-status-buttons-ai-selected);
262
+ }
263
+ .status-btn__state-interactive-ai:focus-visible {
264
+ color: var(--kd-color-text-status-buttons-ai-focused);
265
+ outline: 1px solid var(--kd-color-border-status-buttons-ai-focused);
266
+ }
267
+ .status-btn__state-interactive-ai:active {
268
+ color: var(--kd-color-text-status-buttons-ai-pressed);
269
+ border-color: var(--kd-color-border-status-buttons-ai-pressed);
270
+ background-color: var(--kd-color-background-status-buttons-ai-pressed);
271
+ }
272
+ .status-btn__state-interactive:focus-visible {
273
+ border: transparent;
274
+ outline-offset: 1px;
275
+ }`;!function(t){t.SUCCESS="success",t.WARNING="warning",t.ERROR="error",t.LOW="low",t.MEDIUM="medium",t.HIGH="high",t.AI="ai"}(v||(v={}));let m=(()=>{var a,m,g,f,_,p,w,x;let y,T,E,O,S,W,z,$,M,C,B=[d("kyn-status-btn")],j=[],I=n,R=[],U=[],A=[],G=[],H=[],N=[],D=[],L=[],P=[],q=[],F=[],J=[],K=[],Q=[],V=[],X=[];return T=class extends I{get label(){return s(this,a,"f")}set label(t){e(this,a,t,"f")}get disabled(){return s(this,m,"f")}set disabled(t){e(this,m,t,"f")}get selected(){return s(this,g,"f")}set selected(t){e(this,g,t,"f")}get noTruncation(){return s(this,f,"f")}set noTruncation(t){e(this,f,t,"f")}get kind(){return s(this,_,"f")}set kind(t){e(this,_,t,"f")}get _iconOnly(){return s(this,p,"f")}set _iconOnly(t){e(this,p,t,"f")}get _isTruncated(){return s(this,w,"f")}set _isTruncated(t){e(this,w,t,"f")}get _labelEl(){return s(this,x,"f")}set _labelEl(t){e(this,x,t,"f")}render(){const t=`status-btn__state-${this.kind}`,o={"status-btn":!0,"no-truncation":this.noTruncation,"status-btn__state-interactive":!0,[`status-btn__state-interactive-${this.kind}`]:!0,"status-btn__state-disable":this.disabled,[`${t}`]:!0,selected:this.selected};return c`<button
276
+ type="button"
277
+ class="${k(o)}"
278
+ ?disabled="${this.disabled}"
279
+ kind=${this.kind}
280
+ title="${this._isTruncated&&!this.noTruncation?this.label:""}"
281
+ @click=${t=>this.handleBtnClick(t,this.label)}
282
+ >
283
+ <slot></slot>
284
+ ${this._iconOnly?"":c` <span class="status-btn__label" aria-disabled=${this.disabled}
285
+ >${this.label}</span
286
+ >`}
287
+ </button>`}handleBtnClick(t,o){if(!this.disabled){const r=new CustomEvent("on-click",{detail:{value:o,origEvent:t}});this.dispatchEvent(r)}}updated(t){this.label=this.label.trim(),this._labelEl&&!this.noTruncation&&(this._isTruncated=this._labelEl.scrollWidth>this._labelEl.clientWidth),super.updated(t),0===this.label.length?this._iconOnly=!0:this._iconOnly=!1}constructor(){super(...arguments),a.set(this,r(this,R,"")),m.set(this,(r(this,U),r(this,A,!1))),g.set(this,(r(this,G),r(this,H,!1))),f.set(this,(r(this,N),r(this,D,!1))),_.set(this,(r(this,L),r(this,P,v.SUCCESS))),p.set(this,(r(this,q),r(this,F,!1))),w.set(this,(r(this,J),r(this,K,!1))),x.set(this,(r(this,Q),r(this,V,void 0))),r(this,X)}},a=new WeakMap,m=new WeakMap,g=new WeakMap,f=new WeakMap,_=new WeakMap,p=new WeakMap,w=new WeakMap,x=new WeakMap,t(T,"StatusButton"),(()=>{var t;const r="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(t=I[Symbol.metadata])&&void 0!==t?t:null):void 0;E=[l({type:String})],O=[l({type:Boolean})],S=[l({type:Boolean})],W=[l({type:Boolean})],z=[l({type:String})],$=[u()],M=[u()],C=[b(".status-btn__label")],o(T,null,E,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:t=>"label"in t,get:t=>t.label,set:(t,o)=>{t.label=o}},metadata:r},R,U),o(T,null,O,{kind:"accessor",name:"disabled",static:!1,private:!1,access:{has:t=>"disabled"in t,get:t=>t.disabled,set:(t,o)=>{t.disabled=o}},metadata:r},A,G),o(T,null,S,{kind:"accessor",name:"selected",static:!1,private:!1,access:{has:t=>"selected"in t,get:t=>t.selected,set:(t,o)=>{t.selected=o}},metadata:r},H,N),o(T,null,W,{kind:"accessor",name:"noTruncation",static:!1,private:!1,access:{has:t=>"noTruncation"in t,get:t=>t.noTruncation,set:(t,o)=>{t.noTruncation=o}},metadata:r},D,L),o(T,null,z,{kind:"accessor",name:"kind",static:!1,private:!1,access:{has:t=>"kind"in t,get:t=>t.kind,set:(t,o)=>{t.kind=o}},metadata:r},P,q),o(T,null,$,{kind:"accessor",name:"_iconOnly",static:!1,private:!1,access:{has:t=>"_iconOnly"in t,get:t=>t._iconOnly,set:(t,o)=>{t._iconOnly=o}},metadata:r},F,J),o(T,null,M,{kind:"accessor",name:"_isTruncated",static:!1,private:!1,access:{has:t=>"_isTruncated"in t,get:t=>t._isTruncated,set:(t,o)=>{t._isTruncated=o}},metadata:r},K,Q),o(T,null,C,{kind:"accessor",name:"_labelEl",static:!1,private:!1,access:{has:t=>"_labelEl"in t,get:t=>t._labelEl,set:(t,o)=>{t._labelEl=o}},metadata:r},V,X),o(null,y={value:T},B,{kind:"class",name:T.name,metadata:r},null,j),T=y.value,r&&Object.defineProperty(T,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:r})})(),T.styles=i(h),r(T,j),T})();export{m as StatusButton};
288
+ //# sourceMappingURL=statusButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"statusButton.js","sources":["../../../../src/components/reusable/statusButton/statusButton.ts"],"sourcesContent":["import { LitElement, PropertyValues, html, unsafeCSS } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport StatusBtnScss from './statusButton.scss?inline';\n\nenum STATUS_KINDS {\n SUCCESS = 'success',\n WARNING = 'warning',\n ERROR = 'error',\n LOW = 'low',\n MEDIUM = 'medium',\n HIGH = 'high',\n AI = 'ai',\n}\n\n/**\n * Status Button.\n * @fires on-click - Captures the event and emits the selected value and original event details.`detail:{ origEvent: PointerEvent,value: string }`\n * @slot unnamed - Slot for icon.\n */\n\n@customElement('kyn-status-btn')\nexport class StatusButton extends LitElement {\n static override styles = unsafeCSS(StatusBtnScss);\n\n /**\n * Status label (Required).\n */\n @property({ type: String })\n accessor label = '';\n\n /**\n * Specify disabled state.\n */\n @property({ type: Boolean })\n accessor disabled = false;\n\n /**\n * Specify selected state.\n */\n @property({ type: Boolean })\n accessor selected = false;\n\n /**\n * Removes label text truncation.\n */\n @property({ type: Boolean })\n accessor noTruncation = false;\n\n /**\n * Specifies the visual appearance/kind of the status.\n */\n @property({ type: String })\n accessor kind: STATUS_KINDS = STATUS_KINDS.SUCCESS;\n\n /**\n * Determine if contains icon only.\n * @internal\n */\n @state()\n accessor _iconOnly = false;\n\n /**\n * Determine if label is truncated.\n * @internal\n */\n @state()\n accessor _isTruncated = false;\n\n /**\n * Queries the .label element.\n * @internal\n */\n @query('.status-btn__label')\n accessor _labelEl!: HTMLSpanElement;\n\n override render() {\n const newBaseColorClass = `status-btn__state-${this.kind}`;\n\n const Classes = {\n 'status-btn': true,\n 'no-truncation': this.noTruncation,\n 'status-btn__state-interactive': true,\n [`status-btn__state-interactive-${this.kind}`]: true,\n 'status-btn__state-disable': this.disabled,\n [`${newBaseColorClass}`]: true,\n selected: this.selected,\n };\n\n return html`<button\n type=\"button\"\n class=\"${classMap(Classes)}\"\n ?disabled=\"${this.disabled}\"\n kind=${this.kind}\n title=\"${this._isTruncated && !this.noTruncation ? this.label : ''}\"\n @click=${(e: any) => this.handleBtnClick(e, this.label)}\n >\n <slot></slot>\n ${!this._iconOnly\n ? html` <span class=\"status-btn__label\" aria-disabled=${this.disabled}\n >${this.label}</span\n >`\n : ''}\n </button>`;\n }\n\n private handleBtnClick(e: any, value: string) {\n if (!this.disabled) {\n const event = new CustomEvent('on-click', {\n detail: {\n value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n }\n\n override updated(changedProperties: PropertyValues) {\n this.label = this.label.trim();\n // Check if label is truncated\n if (this._labelEl && !this.noTruncation) {\n this._isTruncated = this._labelEl.scrollWidth > this._labelEl.clientWidth;\n }\n super.updated(changedProperties);\n\n if (this.label.length === 0) {\n this._iconOnly = true;\n } else {\n this._iconOnly = false;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-status-btn': StatusButton;\n }\n}\n"],"names":["STATUS_KINDS","StatusButton","customElement","LitElement","_classThis","_classSuper","label","__classPrivateFieldGet","this","_StatusButton_label_accessor_storage","value","__classPrivateFieldSet","disabled","_StatusButton_disabled_accessor_storage","selected","_StatusButton_selected_accessor_storage","noTruncation","_StatusButton_noTruncation_accessor_storage","kind","_StatusButton_kind_accessor_storage","_iconOnly","_StatusButton__iconOnly_accessor_storage","_isTruncated","_StatusButton__isTruncated_accessor_storage","_labelEl","_StatusButton__labelEl_accessor_storage","render","newBaseColorClass","Classes","html","classMap","e","handleBtnClick","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProperties","trim","scrollWidth","clientWidth","super","length","set","__runInitializers","_label_initializers","_label_extraInitializers","_disabled_initializers","_disabled_extraInitializers","_selected_initializers","_selected_extraInitializers","_noTruncation_initializers","_noTruncation_extraInitializers","_kind_initializers","SUCCESS","_kind_extraInitializers","__iconOnly_initializers","__iconOnly_extraInitializers","__isTruncated_initializers","__isTruncated_extraInitializers","__labelEl_initializers","_label_decorators","property","type","String","_disabled_decorators","Boolean","_selected_decorators","_noTruncation_decorators","_kind_decorators","__iconOnly_decorators","state","__isTruncated_decorators","query","__esDecorate","name","static","private","access","has","obj","get","metadata","_metadata","__labelEl_decorators","__labelEl_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","StatusBtnScss"],"mappings":"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"}
package/index.d.ts CHANGED
@@ -48,5 +48,5 @@ export { InlineConfirm } from './components/reusable/inlineConfirm';
48
48
  export { ColorInput } from './components/reusable/colorInput';
49
49
  export { MetaData } from './components/reusable/metaData';
50
50
  export { Divider } from './components/reusable/divider';
51
- export { StatusPicker } from './components/reusable/statusPicker';
51
+ export { StatusButton } from './components/reusable/statusButton';
52
52
  //# sourceMappingURL=index.d.ts.map
package/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export{Header}from"./components/global/header/header.js";export{HeaderNav}from"./components/global/header/headerNav.js";export{HeaderLink}from"./components/global/header/headerLink.js";export{HeaderCategories}from"./components/global/header/headerCategories.js";export{HeaderCategory}from"./components/global/header/headerCategory.js";export{HeaderDivider}from"./components/global/header/headerDivider.js";export{HeaderFlyouts}from"./components/global/header/headerFlyouts.js";export{HeaderFlyout}from"./components/global/header/headerFlyout.js";export{HeaderUserProfile}from"./components/global/header/headerUserProfile.js";export{HeaderPanelLink}from"./components/global/header/headerPanelLink.js";export{HeaderNotificationPanel}from"./components/global/header/headerNotificationPanel.js";export{LocalNav}from"./components/global/localNav/localNav.js";export{LocalNavLink}from"./components/global/localNav/localNavLink.js";export{LocalNavDivider}from"./components/global/localNav/localNavDivider.js";export{Footer}from"./components/global/footer/footer.js";export{UiShell}from"./components/global/uiShell/uiShell.js";export{RadioButton}from"./components/reusable/radioButton/radioButton.js";export{RadioButtonGroup}from"./components/reusable/radioButton/radioButtonGroup.js";export{Checkbox}from"./components/reusable/checkbox/checkbox.js";export{CheckboxGroup}from"./components/reusable/checkbox/checkboxGroup.js";export{CheckboxSubgroup}from"./components/reusable/checkbox/checkboxSubgroup.js";export{TextInput}from"./components/reusable/textInput/textInput.js";export{TextArea}from"./components/reusable/textArea/textArea.js";export{Avatar}from"./components/reusable/avatar/avatar.js";export{ToggleButton}from"./components/reusable/toggleButton/toggleButton.js";export{Dropdown}from"./components/reusable/dropdown/dropdown.js";export{DropdownOption}from"./components/reusable/dropdown/dropdownOption.js";export{DropdownCategory}from"./components/reusable/dropdown/dropdownCategory.js";import"./components/reusable/dropdown/enhancedDropdownOption.js";export{DatePicker}from"./components/reusable/datePicker/datepicker.js";export{DateRangePicker}from"./components/reusable/daterangepicker/daterangepicker.js";export{TimePicker}from"./components/reusable/timepicker/timepicker.js";export{ProgressBar}from"./components/reusable/progressBar/progressBar.js";export{BlockCodeView}from"./components/reusable/blockCodeView/blockCodeView.js";export{InlineCodeView}from"./components/reusable/inlineCodeView/inlineCodeView.js";export{Breadcrumbs}from"./components/reusable/breadcrumbs/breadcrumbs.js";export{T as Table}from"./table-B_d7j-jz.js";export{TableCell}from"./components/reusable/table/table-cell.js";export{TableRow}from"./components/reusable/table/table-row.js";export{TableBody}from"./components/reusable/table/table-body.js";export{TableHead}from"./components/reusable/table/table-head.js";export{TableHeader}from"./components/reusable/table/table-header.js";export{TableFoot}from"./components/reusable/table/table-foot.js";export{TableFooter}from"./components/reusable/table/table-footer.js";export{TableLegend}from"./components/reusable/table/table-legend.js";export{TableLegendItem}from"./components/reusable/table/table-legend-item.js";export{TableToolbar}from"./components/reusable/table/table-toolbar.js";export{TableContainer}from"./components/reusable/table/table-container.js";export{TableHeaderRow}from"./components/reusable/table/table-header-row.js";export{TableExpandedRow}from"./components/reusable/table/table-expanded-row.js";import"./components/reusable/table/table.skeleton.js";export{Pagination}from"./components/reusable/pagination/Pagination.js";import"./components/reusable/pagination/pagination-items-range.js";import"./components/reusable/pagination/pagination-page-size-dropdown.js";import"./components/reusable/pagination/pagination-navigation-buttons.js";import"./components/reusable/pagination/pagination.skeleton.js";export{OverflowMenu}from"./components/reusable/overflowMenu/overflowMenu.js";export{OverflowMenuItem}from"./components/reusable/overflowMenu/overflowMenuItem.js";export{Tabs}from"./components/reusable/tabs/tabs.js";export{Tab}from"./components/reusable/tabs/tab.js";export{TabPanel}from"./components/reusable/tabs/tabPanel.js";export{Modal}from"./components/reusable/modal/modal.js";export{Tooltip}from"./components/reusable/tooltip/tooltip.js";export{Tag}from"./components/reusable/tag/tag.js";export{TagGroup}from"./components/reusable/tag/tagGroup.js";import"./components/reusable/tag/tag.skeleton.js";export{GlobalFilter}from"./components/reusable/globalFilter/globalFilter.js";export{SideDrawer}from"./components/reusable/sideDrawer/sideDrawer.js";export{PageTitle}from"./components/reusable/pagetitle/pageTitle.js";export{Notification}from"./components/reusable/notification/notification.js";export{NotificationContainer}from"./components/reusable/notification/notificationContainer.js";export{Widget}from"./components/reusable/widget/widget.js";export{WidgetDragHandle}from"./components/reusable/widget/widgetDragHandle.js";export{WidgetGridstack}from"./components/reusable/widget/widgetGridstack.js";export{Search}from"./components/reusable/search/search.js";export{Loader}from"./components/reusable/loaders/loader.js";export{LoaderInline}from"./components/reusable/loaders/inline.js";export{Skeleton}from"./components/reusable/loaders/skeleton.js";export{NumberInput}from"./components/reusable/numberInput/numberInput.js";export{SliderInput}from"./components/reusable/sliderInput/sliderInput.js";export{Popover}from"./components/reusable/popover/popover.js";export{createOptionsArray,debounce,stringToReactHtml}from"./common/helpers/helpers.js";export{Config,WidgetConstraints,WidgetSizes}from"./common/helpers/gridstack.js";export{SwiperConfig}from"./common/helpers/swiper.js";export{Stepper}from"./components/reusable/stepper/stepper.js";export{StepperItem}from"./components/reusable/stepper/stepperItem.js";export{StepperItemChild}from"./components/reusable/stepper/stepperItemChild.js";export{Button}from"./components/reusable/button/button.js";export{Link}from"./components/reusable/link/link.js";export{Accordion}from"./components/reusable/accordion/accordion.js";export{AccordionItem}from"./components/reusable/accordion/accordionItem.js";export{Card}from"./components/reusable/card/card.js";import"./components/reusable/card/vitalCard.skeleton.js";import"./components/reusable/card/informationalCard.skeleton.js";export{SplitButton}from"./components/reusable/splitButton/splitButton.js";export{SplitButtonOption}from"./components/reusable/splitButton/splitButtonOption.js";export{FloatingContainer}from"./components/reusable/floatingContainer/floatingContainer.js";export{AISourcesFeedback}from"./components/ai/sourcesFeedback/aiSourcesFeedback.js";export{InlineConfirm}from"./components/reusable/inlineConfirm/inlineConfirm.js";export{ColorInput}from"./components/reusable/colorInput/colorInput.js";export{MetaData}from"./components/reusable/metaData/metaData.js";export{Divider}from"./components/reusable/divider/divider.js";export{StatusPicker}from"./components/reusable/statusPicker/statusPicker.js";import"tslib";import"lit";import"lit/decorators.js";import"lit/directives/class-map.js";import"lit-html/directives/unsafe-html.js";import"./vendor/@kyndryl-design-system/shidoka-foundation-7uii0Jz8.js";import"lit-html/directives/unsafe-svg.js";import"query-selector-shadow-dom";import"./vendor/@kyndryl-design-system/shidoka-icons-CrstBvhf.js";import"lit/directives/style-map.js";import"lit/directives/if-defined.js";import"deepmerge-ts";import"./common/mixins/form-input.js";import"lit-html/directives/class-map.js";import"./common/helpers/flatpickr/flatpickr.js";import"flatpickr";import"flatpickr/dist/esm/plugins/rangePlugin";import"flatpickr/dist/esm/l10n/default.js";import"./common/helpers/flatpickr/langs.js";import"./common/helpers/flatpickr/overlay.js";import"./common/helpers/flatpickr/utils.js";import"./shidoka-flatpickr-theme-CpAIX345.js";import"prismjs";import"prismjs/plugins/autoloader/prism-autoloader";import"prismjs/plugins/line-numbers/prism-line-numbers";import"@lit/context";import"./components/reusable/table/table-context.js";import"./components/reusable/table/defs.js";import"./pagination-0XbKxe9y.js";import"lit/directives/unsafe-html.js";import"lit/directives/unsafe-svg.js";import"./tag-ehM901IX.js";import"./components/reusable/badge/badge.js";import"gridstack";import"lottie-web";import"./inline-CxNcYPfA.js";import"@floating-ui/dom";import"./common/helpers/popoverHelper.js";import"./components/reusable/button/defs.js";import"./components/reusable/link/defs.js";import"./cardSample-BCIwY1rJ.js";import"./components/reusable/splitButton/defs.js";
1
+ export{Header}from"./components/global/header/header.js";export{HeaderNav}from"./components/global/header/headerNav.js";export{HeaderLink}from"./components/global/header/headerLink.js";export{HeaderCategories}from"./components/global/header/headerCategories.js";export{HeaderCategory}from"./components/global/header/headerCategory.js";export{HeaderDivider}from"./components/global/header/headerDivider.js";export{HeaderFlyouts}from"./components/global/header/headerFlyouts.js";export{HeaderFlyout}from"./components/global/header/headerFlyout.js";export{HeaderUserProfile}from"./components/global/header/headerUserProfile.js";export{HeaderPanelLink}from"./components/global/header/headerPanelLink.js";export{HeaderNotificationPanel}from"./components/global/header/headerNotificationPanel.js";export{LocalNav}from"./components/global/localNav/localNav.js";export{LocalNavLink}from"./components/global/localNav/localNavLink.js";export{LocalNavDivider}from"./components/global/localNav/localNavDivider.js";export{Footer}from"./components/global/footer/footer.js";export{UiShell}from"./components/global/uiShell/uiShell.js";export{RadioButton}from"./components/reusable/radioButton/radioButton.js";export{RadioButtonGroup}from"./components/reusable/radioButton/radioButtonGroup.js";export{Checkbox}from"./components/reusable/checkbox/checkbox.js";export{CheckboxGroup}from"./components/reusable/checkbox/checkboxGroup.js";export{CheckboxSubgroup}from"./components/reusable/checkbox/checkboxSubgroup.js";export{TextInput}from"./components/reusable/textInput/textInput.js";export{TextArea}from"./components/reusable/textArea/textArea.js";export{Avatar}from"./components/reusable/avatar/avatar.js";export{ToggleButton}from"./components/reusable/toggleButton/toggleButton.js";export{Dropdown}from"./components/reusable/dropdown/dropdown.js";export{DropdownOption}from"./components/reusable/dropdown/dropdownOption.js";export{DropdownCategory}from"./components/reusable/dropdown/dropdownCategory.js";import"./components/reusable/dropdown/enhancedDropdownOption.js";export{DatePicker}from"./components/reusable/datePicker/datepicker.js";export{DateRangePicker}from"./components/reusable/daterangepicker/daterangepicker.js";export{TimePicker}from"./components/reusable/timepicker/timepicker.js";export{ProgressBar}from"./components/reusable/progressBar/progressBar.js";export{BlockCodeView}from"./components/reusable/blockCodeView/blockCodeView.js";export{InlineCodeView}from"./components/reusable/inlineCodeView/inlineCodeView.js";export{Breadcrumbs}from"./components/reusable/breadcrumbs/breadcrumbs.js";export{T as Table}from"./table-B_d7j-jz.js";export{TableCell}from"./components/reusable/table/table-cell.js";export{TableRow}from"./components/reusable/table/table-row.js";export{TableBody}from"./components/reusable/table/table-body.js";export{TableHead}from"./components/reusable/table/table-head.js";export{TableHeader}from"./components/reusable/table/table-header.js";export{TableFoot}from"./components/reusable/table/table-foot.js";export{TableFooter}from"./components/reusable/table/table-footer.js";export{TableLegend}from"./components/reusable/table/table-legend.js";export{TableLegendItem}from"./components/reusable/table/table-legend-item.js";export{TableToolbar}from"./components/reusable/table/table-toolbar.js";export{TableContainer}from"./components/reusable/table/table-container.js";export{TableHeaderRow}from"./components/reusable/table/table-header-row.js";export{TableExpandedRow}from"./components/reusable/table/table-expanded-row.js";import"./components/reusable/table/table.skeleton.js";export{Pagination}from"./components/reusable/pagination/Pagination.js";import"./components/reusable/pagination/pagination-items-range.js";import"./components/reusable/pagination/pagination-page-size-dropdown.js";import"./components/reusable/pagination/pagination-navigation-buttons.js";import"./components/reusable/pagination/pagination.skeleton.js";export{OverflowMenu}from"./components/reusable/overflowMenu/overflowMenu.js";export{OverflowMenuItem}from"./components/reusable/overflowMenu/overflowMenuItem.js";export{Tabs}from"./components/reusable/tabs/tabs.js";export{Tab}from"./components/reusable/tabs/tab.js";export{TabPanel}from"./components/reusable/tabs/tabPanel.js";export{Modal}from"./components/reusable/modal/modal.js";export{Tooltip}from"./components/reusable/tooltip/tooltip.js";export{Tag}from"./components/reusable/tag/tag.js";export{TagGroup}from"./components/reusable/tag/tagGroup.js";import"./components/reusable/tag/tag.skeleton.js";export{GlobalFilter}from"./components/reusable/globalFilter/globalFilter.js";export{SideDrawer}from"./components/reusable/sideDrawer/sideDrawer.js";export{PageTitle}from"./components/reusable/pagetitle/pageTitle.js";export{Notification}from"./components/reusable/notification/notification.js";export{NotificationContainer}from"./components/reusable/notification/notificationContainer.js";export{Widget}from"./components/reusable/widget/widget.js";export{WidgetDragHandle}from"./components/reusable/widget/widgetDragHandle.js";export{WidgetGridstack}from"./components/reusable/widget/widgetGridstack.js";export{Search}from"./components/reusable/search/search.js";export{Loader}from"./components/reusable/loaders/loader.js";export{LoaderInline}from"./components/reusable/loaders/inline.js";export{Skeleton}from"./components/reusable/loaders/skeleton.js";export{NumberInput}from"./components/reusable/numberInput/numberInput.js";export{SliderInput}from"./components/reusable/sliderInput/sliderInput.js";export{Popover}from"./components/reusable/popover/popover.js";export{createOptionsArray,debounce,stringToReactHtml}from"./common/helpers/helpers.js";export{Config,WidgetConstraints,WidgetSizes}from"./common/helpers/gridstack.js";export{SwiperConfig}from"./common/helpers/swiper.js";export{Stepper}from"./components/reusable/stepper/stepper.js";export{StepperItem}from"./components/reusable/stepper/stepperItem.js";export{StepperItemChild}from"./components/reusable/stepper/stepperItemChild.js";export{Button}from"./components/reusable/button/button.js";export{Link}from"./components/reusable/link/link.js";export{Accordion}from"./components/reusable/accordion/accordion.js";export{AccordionItem}from"./components/reusable/accordion/accordionItem.js";export{Card}from"./components/reusable/card/card.js";import"./components/reusable/card/vitalCard.skeleton.js";import"./components/reusable/card/informationalCard.skeleton.js";export{SplitButton}from"./components/reusable/splitButton/splitButton.js";export{SplitButtonOption}from"./components/reusable/splitButton/splitButtonOption.js";export{FloatingContainer}from"./components/reusable/floatingContainer/floatingContainer.js";export{AISourcesFeedback}from"./components/ai/sourcesFeedback/aiSourcesFeedback.js";export{InlineConfirm}from"./components/reusable/inlineConfirm/inlineConfirm.js";export{ColorInput}from"./components/reusable/colorInput/colorInput.js";export{MetaData}from"./components/reusable/metaData/metaData.js";export{Divider}from"./components/reusable/divider/divider.js";export{StatusButton}from"./components/reusable/statusButton/statusButton.js";import"tslib";import"lit";import"lit/decorators.js";import"lit/directives/class-map.js";import"lit-html/directives/unsafe-html.js";import"./vendor/@kyndryl-design-system/shidoka-foundation-7uii0Jz8.js";import"lit-html/directives/unsafe-svg.js";import"query-selector-shadow-dom";import"./vendor/@kyndryl-design-system/shidoka-icons-CrstBvhf.js";import"lit/directives/style-map.js";import"lit/directives/if-defined.js";import"deepmerge-ts";import"./common/mixins/form-input.js";import"lit-html/directives/class-map.js";import"./common/helpers/flatpickr/flatpickr.js";import"flatpickr";import"flatpickr/dist/esm/plugins/rangePlugin";import"flatpickr/dist/esm/l10n/default.js";import"./common/helpers/flatpickr/langs.js";import"./common/helpers/flatpickr/overlay.js";import"./common/helpers/flatpickr/utils.js";import"./shidoka-flatpickr-theme-CpAIX345.js";import"prismjs";import"prismjs/plugins/autoloader/prism-autoloader";import"prismjs/plugins/line-numbers/prism-line-numbers";import"@lit/context";import"./components/reusable/table/table-context.js";import"./components/reusable/table/defs.js";import"./pagination-0XbKxe9y.js";import"lit/directives/unsafe-html.js";import"lit/directives/unsafe-svg.js";import"./tag-ehM901IX.js";import"./components/reusable/badge/badge.js";import"gridstack";import"lottie-web";import"./inline-CxNcYPfA.js";import"@floating-ui/dom";import"./common/helpers/popoverHelper.js";import"./components/reusable/button/defs.js";import"./components/reusable/link/defs.js";import"./cardSample-BCIwY1rJ.js";import"./components/reusable/splitButton/defs.js";
2
2
  //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kyndryl-design-system/shidoka-applications",
3
- "version": "2.79.1",
3
+ "version": "2.79.2",
4
4
  "description": "Shidoka Web Components for Applications",
5
5
  "license": "MIT",
6
6
  "main": "index.js",
@@ -30,7 +30,7 @@
30
30
  },
31
31
  "dependencies": {
32
32
  "@floating-ui/dom": "^1.7.1",
33
- "@kyndryl-design-system/shidoka-foundation": "^2.8.7",
33
+ "@kyndryl-design-system/shidoka-foundation": "^2.8.8",
34
34
  "@kyndryl-design-system/shidoka-icons": "^2.19.0",
35
35
  "@lit/context": "^1.1.0",
36
36
  "deepmerge-ts": "^7.1.0",
@@ -1,2 +0,0 @@
1
- export { StatusPicker } from './statusPicker';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/statusPicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
@@ -1,290 +0,0 @@
1
- import{__setFunctionName as r,__esDecorate as e,__runInitializers as t,__classPrivateFieldGet as o,__classPrivateFieldSet as a}from"tslib";import{css as s,LitElement as i,unsafeCSS as c,html as n}from"lit";import{customElement as d,property as l,state as u,query as k}from"lit/decorators.js";import{classMap as p}from"lit-html/directives/class-map.js";var b,v=s`*,
2
- *::before,
3
- *::after {
4
- box-sizing: border-box;
5
- }
6
-
7
- * {
8
- -webkit-tap-highlight-color: transparent;
9
- }
10
-
11
- :root {
12
- --kd-current-breakpoint: sm;
13
- }
14
- @media (min-width: 42rem) {
15
- :root {
16
- --kd-current-breakpoint: md;
17
- }
18
- }
19
- @media (min-width: 74rem) {
20
- :root {
21
- --kd-current-breakpoint: lg;
22
- }
23
- }
24
- @media (min-width: 82rem) {
25
- :root {
26
- --kd-current-breakpoint: xl;
27
- }
28
- }
29
- @media (min-width: 99rem) {
30
- :root {
31
- --kd-current-breakpoint: max;
32
- }
33
- }
34
-
35
- :host {
36
- display: inline-block;
37
- }
38
-
39
- .status-picker {
40
- font-family: var(--kd-font-family-secondary);
41
- font-size: var(--kd-font-size-utility-3-sm);
42
- line-height: var(--kd-line-height-utility-3-sm);
43
- font-weight: var(--kd-font-weight-regular);
44
- letter-spacing: var(--kd-letter-spacing-5);
45
- display: flex;
46
- height: 24px;
47
- align-items: center;
48
- justify-content: space-around;
49
- border: 0.5px solid transparent;
50
- border-radius: 6px;
51
- padding: 4px;
52
- gap: 4px;
53
- min-width: 24px;
54
- max-width: 161px;
55
- cursor: pointer;
56
- transition: background-color 0.4s ease;
57
- }
58
- @media (min-width: 42rem) {
59
- .status-picker {
60
- font-size: var(--kd-font-size-utility-3-md);
61
- line-height: var(--kd-line-height-utility-3-md);
62
- }
63
- }
64
- @media (min-width: 74rem) {
65
- .status-picker {
66
- font-size: var(--kd-font-size-utility-3-lg);
67
- line-height: var(--kd-line-height-utility-3-lg);
68
- }
69
- }
70
- @media (min-width: 82rem) {
71
- .status-picker {
72
- font-size: var(--kd-font-size-utility-3-xlg);
73
- line-height: var(--kd-line-height-utility-3-xlg);
74
- }
75
- }
76
- @media (min-width: 99rem) {
77
- .status-picker {
78
- font-size: var(--kd-font-size-utility-3-max);
79
- line-height: var(--kd-line-height-utility-3-max);
80
- }
81
- }
82
- .status-picker.no-truncation {
83
- max-width: none;
84
- }
85
-
86
- .status-picker__label {
87
- white-space: nowrap;
88
- overflow: hidden;
89
- text-overflow: ellipsis;
90
- }
91
-
92
- .status-picker__state-disable {
93
- cursor: not-allowed;
94
- background-color: var(--kd-color-background-status-picker-success-disabled) !important;
95
- color: var(--kd-color-text-status-picker-success-disabled) !important;
96
- border-color: var(--kd-color-border-status-picker-success-disabled) !important;
97
- outline: none !important;
98
- }
99
- .status-picker__state-interactive {
100
- /* error state */
101
- /* warning state */
102
- /* success state */
103
- /* low state */
104
- /* medium state */
105
- /* high state */
106
- /* ai state Pending from UX*/
107
- }
108
- .status-picker__state-interactive-error {
109
- color: var(--kd-color-text-status-picker-error-enabled);
110
- background-color: var(--kd-color-background-status-picker-error-enabled);
111
- border-color: var(--kd-color-border-status-picker-error-enabled);
112
- }
113
- .status-picker__state-interactive-error:hover {
114
- color: var(--kd-color-text-status-picker-error-hover);
115
- background-color: var(--kd-color-background-status-picker-error-hover);
116
- border-color: var(--kd-color-border-status-picker-error-hover);
117
- }
118
- .status-picker__state-interactive-error.selected {
119
- border-color: var(--kd-color-border-status-picker-error-selected);
120
- color: var(--kd-color-text-status-picker-error-selected);
121
- background-color: var(--kd-color-background-status-picker-error-selected);
122
- }
123
- .status-picker__state-interactive-error:focus-visible {
124
- outline: 1px solid var(--kd-color-border-status-picker-error-focused);
125
- background-color: var(--kd-color-background-status-picker-error-focused);
126
- }
127
- .status-picker__state-interactive-error:active {
128
- color: var(--kd-color-text-status-picker-error-pressed);
129
- border-color: var(--kd-color-border-status-picker-error-pressed);
130
- background-color: var(--kd-color-background-status-picker-error-pressed);
131
- }
132
- .status-picker__state-interactive-warning {
133
- color: var(--kd-color-text-status-picker-warning-enabled);
134
- background-color: var(--kd-color-background-status-picker-warning-enabled);
135
- border-color: var(--kd-color-border-status-picker-warning-enabled);
136
- }
137
- .status-picker__state-interactive-warning:hover {
138
- background-color: var(--kd-color-background-status-picker-warning-hover);
139
- border-color: var(--kd-color-border-status-picker-warning-hover);
140
- }
141
- .status-picker__state-interactive-warning.selected {
142
- border-color: var(--kd-color-border-status-picker-warning-selected);
143
- background-color: var(--kd-color-background-status-picker-warning-selected);
144
- }
145
- .status-picker__state-interactive-warning:focus-visible {
146
- outline: 1px solid var(--kd-color-border-status-picker-warning-focused);
147
- background-color: var(--kd-color-background-status-picker-warning-focused);
148
- }
149
- .status-picker__state-interactive-warning:active {
150
- border-color: var(--kd-color-border-status-picker-warning-pressed);
151
- background-color: var(--kd-color-background-status-picker-warning-pressed);
152
- }
153
- .status-picker__state-interactive-success {
154
- color: var(--kd-color-text-status-picker-success-enabled);
155
- background-color: var(--kd-color-background-status-picker-success-enabled);
156
- border-color: var(--kd-color-border-status-picker-success-enabled);
157
- }
158
- .status-picker__state-interactive-success:hover {
159
- background-color: var(--kd-color-background-status-picker-success-hover);
160
- border-color: var(--kd-color-border-status-picker-success-hover);
161
- }
162
- .status-picker__state-interactive-success.selected {
163
- border-color: var(--kd-color-border-status-picker-success-selected);
164
- background-color: var(--kd-color-background-status-picker-success-selected);
165
- }
166
- .status-picker__state-interactive-success:focus-visible {
167
- outline: 1px solid var(--kd-color-border-status-picker-success-focused);
168
- background-color: var(--kd-color-background-status-picker-success-focused);
169
- }
170
- .status-picker__state-interactive-success:active {
171
- border-color: var(--kd-color-border-status-picker-success-pressed);
172
- background-color: var(--kd-color-background-status-picker-success-pressed);
173
- }
174
- .status-picker__state-interactive-low {
175
- color: var(--kd-color-text-status-picker-information-low-enabled);
176
- background-color: var(--kd-color-background-status-picker-information-low-enabled);
177
- border-color: var(--kd-color-border-status-picker-information-low-enabled);
178
- }
179
- .status-picker__state-interactive-low:hover {
180
- color: var(--kd-color-text-status-picker-information-low-hover);
181
- border-color: var(--kd-color-border-status-picker-information-low-hover);
182
- background-color: var(--kd-color-background-status-picker-information-low-hover);
183
- }
184
- .status-picker__state-interactive-low.selected {
185
- color: var(--kd-color-text-status-picker-information-low-selected);
186
- border-color: var(--kd-color-tag-border-error-selected);
187
- background-color: var(--kd-color-background-status-picker-information-low-selected);
188
- }
189
- .status-picker__state-interactive-low:focus-visible {
190
- color: var(--kd-color-text-status-picker-information-low-focused);
191
- outline: 1px solid var(--kd-color-border-status-picker-information-low-focused);
192
- background-color: var(--kd-color-background-status-picker-information-low-focused);
193
- }
194
- .status-picker__state-interactive-low:active {
195
- color: var(--kd-color-text-status-picker-information-low-pressed);
196
- border-color: var(--kd-color-border-status-picker-information-low-pressed);
197
- background-color: var(--kd-color-background-status-picker-information-low-pressed);
198
- }
199
- .status-picker__state-interactive-medium {
200
- color: var(--kd-color-text-status-picker-information-medium-enabled);
201
- background-color: var(--kd-color-background-status-picker-information-medium-enabled);
202
- border-color: var(--kd-color-border-status-picker-information-medium-enabled);
203
- }
204
- .status-picker__state-interactive-medium:hover {
205
- color: var(--kd-color-text-status-picker-information-medium-hover);
206
- background-color: var(--kd-color-background-status-picker-information-medium-hover);
207
- border-color: var(--kd-color-border-status-picker-information-medium-hover);
208
- }
209
- .status-picker__state-interactive-medium.selected {
210
- color: var(--kd-color-text-status-picker-information-medium-selected);
211
- border-color: var(--kd-color-border-status-picker-information-medium-selected);
212
- background-color: var(--kd-color-background-status-picker-information-medium-selected);
213
- }
214
- .status-picker__state-interactive-medium:focus-visible {
215
- color: var(--kd-color-text-status-picker-information-medium-focused);
216
- outline: 1px solid var(--kd-color-border-status-picker-information-medium-focused);
217
- background-color: var(--kd-color-background-status-picker-information-medium-focused);
218
- }
219
- .status-picker__state-interactive-medium:active {
220
- color: var(--kd-color-text-status-picker-information-medium-pressed);
221
- border-color: var(--kd-color-border-status-picker-information-medium-pressed);
222
- background-color: var(--kd-color-background-status-picker-information-medium-pressed);
223
- }
224
- .status-picker__state-interactive-high {
225
- color: var(--kd-color-text-status-picker-information-high-enabled);
226
- background-color: var(--kd-color-background-status-picker-information-high-enabled);
227
- border-color: var(--kd-color-border-status-picker-information-high-enabled);
228
- }
229
- .status-picker__state-interactive-high:hover {
230
- color: var(--kd-color-text-status-picker-information-high-hover);
231
- background-color: var(--kd-color-background-status-picker-information-high-hover);
232
- border-color: var(--kd-color-border-status-picker-information-high-hover);
233
- }
234
- .status-picker__state-interactive-high.selected {
235
- color: var(--kd-color-text-status-picker-information-high-selected);
236
- border-color: var(--kd-color-border-status-picker-information-high-selected);
237
- background-color: var(--kd-color-background-status-picker-information-high-selected);
238
- }
239
- .status-picker__state-interactive-high:focus-visible {
240
- color: var(--kd-color-text-status-picker-information-high-focused);
241
- outline: 1px solid var(--kd-color-border-status-picker-information-high-focused);
242
- background-color: var(--kd-color-background-status-picker-information-high-focused);
243
- }
244
- .status-picker__state-interactive-high:active {
245
- color: var(--kd-color-text-status-picker-information-high-pressed);
246
- border-color: var(--kd-color-border-status-picker-information-high-pressed);
247
- background-color: var(--kd-color-background-status-picker-information-high-pressed);
248
- }
249
- .status-picker__state-interactive-ai {
250
- color: var(--kd-color-text-status-picker-ai-enabled);
251
- background-color: var(--kd-color-background-status-picker-ai-enabled);
252
- border-color: var(--kd-color-border-status-picker-ai-enabled);
253
- }
254
- .status-picker__state-interactive-ai:hover {
255
- color: var(--kd-color-text-status-picker-ai-hover);
256
- background-color: var(--kd-color-background-status-picker-ai-hover);
257
- }
258
- .status-picker__state-interactive-ai.selected {
259
- border-color: var(--kd-color-border-status-picker-ai-selected);
260
- color: var(--kd-color-text-status-picker-ai-selected);
261
- background-color: var(--kd-color-background-status-picker-ai-selected);
262
- }
263
- .status-picker__state-interactive-ai:focus-visible {
264
- color: var(--kd-color-text-status-picker-ai-focused);
265
- outline: 1px solid var(--kd-color-border-status-picker-ai-focused);
266
- }
267
- .status-picker__state-interactive-ai:active {
268
- color: var(--kd-color-text-status-picker-ai-pressed);
269
- border-color: var(--kd-color-border-status-picker-ai-pressed);
270
- background-color: var(--kd-color-background-status-picker-ai-pressed);
271
- }
272
- .status-picker__state-interactive:focus-visible {
273
- border: transparent;
274
- outline-offset: 1px;
275
- }`;!function(r){r.SUCCESS="success",r.WARNING="warning",r.ERROR="error",r.LOW="low",r.MEDIUM="medium",r.HIGH="high",r.AI="ai"}(b||(b={}));let h=(()=>{var s,h,m,g,f,_,w,x;let y,T,E,S,O,W,z,$,M,C,j=[d("kyn-status-picker")],I=[],R=i,U=[],B=[],P=[],A=[],G=[],H=[],N=[],D=[],L=[],X=[],q=[],F=[],J=[],K=[],Q=[],V=[];return T=class extends R{get label(){return o(this,s,"f")}set label(r){a(this,s,r,"f")}get disabled(){return o(this,h,"f")}set disabled(r){a(this,h,r,"f")}get selected(){return o(this,m,"f")}set selected(r){a(this,m,r,"f")}get noTruncation(){return o(this,g,"f")}set noTruncation(r){a(this,g,r,"f")}get kind(){return o(this,f,"f")}set kind(r){a(this,f,r,"f")}get _iconOnly(){return o(this,_,"f")}set _iconOnly(r){a(this,_,r,"f")}get _isTruncated(){return o(this,w,"f")}set _isTruncated(r){a(this,w,r,"f")}get _labelEl(){return o(this,x,"f")}set _labelEl(r){a(this,x,r,"f")}render(){const r=`status-picker__state-${this.kind}`,e={"status-picker":!0,"no-truncation":this.noTruncation,"status-picker__state-interactive":!0,[`status-picker__state-interactive-${this.kind}`]:!0,"status-picker__state-disable":this.disabled,[`${r}`]:!0,selected:this.selected};return n`<button
276
- type="button"
277
- class="${p(e)}"
278
- ?disabled="${this.disabled}"
279
- kind=${this.kind}
280
- title="${this._isTruncated&&!this.noTruncation?this.label:""}"
281
- @click=${r=>this.handleStatusClick(r,this.label)}
282
- >
283
- <slot></slot>
284
- ${this._iconOnly?"":n` <span
285
- class="status-picker__label"
286
- aria-disabled=${this.disabled}
287
- >${this.label}</span
288
- >`}
289
- </button>`}handleStatusClick(r,e){if(!this.disabled){const t=new CustomEvent("on-click",{detail:{value:e,origEvent:r}});this.dispatchEvent(t)}}updated(r){this.label=this.label.trim(),this._labelEl&&!this.noTruncation&&(this._isTruncated=this._labelEl.scrollWidth>this._labelEl.clientWidth),super.updated(r),0===this.label.length?this._iconOnly=!0:this._iconOnly=!1}constructor(){super(...arguments),s.set(this,t(this,U,"")),h.set(this,(t(this,B),t(this,P,!1))),m.set(this,(t(this,A),t(this,G,!1))),g.set(this,(t(this,H),t(this,N,!1))),f.set(this,(t(this,D),t(this,L,b.SUCCESS))),_.set(this,(t(this,X),t(this,q,!1))),w.set(this,(t(this,F),t(this,J,!1))),x.set(this,(t(this,K),t(this,Q,void 0))),t(this,V)}},s=new WeakMap,h=new WeakMap,m=new WeakMap,g=new WeakMap,f=new WeakMap,_=new WeakMap,w=new WeakMap,x=new WeakMap,r(T,"StatusPicker"),(()=>{var r;const t="function"==typeof Symbol&&Symbol.metadata?Object.create(null!==(r=R[Symbol.metadata])&&void 0!==r?r:null):void 0;E=[l({type:String})],S=[l({type:Boolean})],O=[l({type:Boolean})],W=[l({type:Boolean})],z=[l({type:String})],$=[u()],M=[u()],C=[k(".status-picker__label")],e(T,null,E,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:r=>"label"in r,get:r=>r.label,set:(r,e)=>{r.label=e}},metadata:t},U,B),e(T,null,S,{kind:"accessor",name:"disabled",static:!1,private:!1,access:{has:r=>"disabled"in r,get:r=>r.disabled,set:(r,e)=>{r.disabled=e}},metadata:t},P,A),e(T,null,O,{kind:"accessor",name:"selected",static:!1,private:!1,access:{has:r=>"selected"in r,get:r=>r.selected,set:(r,e)=>{r.selected=e}},metadata:t},G,H),e(T,null,W,{kind:"accessor",name:"noTruncation",static:!1,private:!1,access:{has:r=>"noTruncation"in r,get:r=>r.noTruncation,set:(r,e)=>{r.noTruncation=e}},metadata:t},N,D),e(T,null,z,{kind:"accessor",name:"kind",static:!1,private:!1,access:{has:r=>"kind"in r,get:r=>r.kind,set:(r,e)=>{r.kind=e}},metadata:t},L,X),e(T,null,$,{kind:"accessor",name:"_iconOnly",static:!1,private:!1,access:{has:r=>"_iconOnly"in r,get:r=>r._iconOnly,set:(r,e)=>{r._iconOnly=e}},metadata:t},q,F),e(T,null,M,{kind:"accessor",name:"_isTruncated",static:!1,private:!1,access:{has:r=>"_isTruncated"in r,get:r=>r._isTruncated,set:(r,e)=>{r._isTruncated=e}},metadata:t},J,K),e(T,null,C,{kind:"accessor",name:"_labelEl",static:!1,private:!1,access:{has:r=>"_labelEl"in r,get:r=>r._labelEl,set:(r,e)=>{r._labelEl=e}},metadata:t},Q,V),e(null,y={value:T},j,{kind:"class",name:T.name,metadata:t},null,I),T=y.value,t&&Object.defineProperty(T,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})})(),T.styles=c(v),t(T,I),T})();export{h as StatusPicker};
290
- //# sourceMappingURL=statusPicker.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"statusPicker.js","sources":["../../../../src/components/reusable/statusPicker/statusPicker.ts"],"sourcesContent":["import { LitElement, PropertyValues, html, unsafeCSS } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport StatusPickerScss from './statusPicker.scss?inline';\n\nenum STATUS_KINDS {\n SUCCESS = 'success',\n WARNING = 'warning',\n ERROR = 'error',\n LOW = 'low',\n MEDIUM = 'medium',\n HIGH = 'high',\n AI = 'ai',\n}\n\n/**\n * Status Picker.\n * @fires on-click - Captures the click event and emits the Status Picker value. `detail:{ origEvent: PointerEvent,value: string }`\n * @slot unnamed - Slot for icon.\n */\n\n@customElement('kyn-status-picker')\nexport class StatusPicker extends LitElement {\n static override styles = unsafeCSS(StatusPickerScss);\n\n /**\n * Status label (Required).\n */\n @property({ type: String })\n accessor label = '';\n\n /**\n * Specify disabled state.\n */\n @property({ type: Boolean })\n accessor disabled = false;\n\n /**\n * Specify selected state.\n */\n @property({ type: Boolean })\n accessor selected = false;\n\n /**\n * Removes label text truncation.\n */\n @property({ type: Boolean })\n accessor noTruncation = false;\n\n /**\n * Specifies the visual appearance/kind of the status.\n */\n @property({ type: String })\n accessor kind: STATUS_KINDS = STATUS_KINDS.SUCCESS;\n\n /**\n * Determine if contains icon only.\n * @internal\n */\n @state()\n accessor _iconOnly = false;\n\n /**\n * Determine if label is truncated.\n * @internal\n */\n @state()\n accessor _isTruncated = false;\n\n /**\n * Queries the .label element.\n * @internal\n */\n @query('.status-picker__label')\n accessor _labelEl!: HTMLSpanElement;\n\n override render() {\n const newBaseColorClass = `status-picker__state-${this.kind}`;\n\n const Classes = {\n 'status-picker': true,\n 'no-truncation': this.noTruncation,\n 'status-picker__state-interactive': true,\n [`status-picker__state-interactive-${this.kind}`]: true,\n 'status-picker__state-disable': this.disabled,\n [`${newBaseColorClass}`]: true,\n selected: this.selected,\n };\n\n return html`<button\n type=\"button\"\n class=\"${classMap(Classes)}\"\n ?disabled=\"${this.disabled}\"\n kind=${this.kind}\n title=\"${this._isTruncated && !this.noTruncation ? this.label : ''}\"\n @click=${(e: any) => this.handleStatusClick(e, this.label)}\n >\n <slot></slot>\n ${!this._iconOnly\n ? html` <span\n class=\"status-picker__label\"\n aria-disabled=${this.disabled}\n >${this.label}</span\n >`\n : ''}\n </button>`;\n }\n\n private handleStatusClick(e: any, value: string) {\n if (!this.disabled) {\n const event = new CustomEvent('on-click', {\n detail: {\n value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n }\n\n override updated(changedProperties: PropertyValues) {\n this.label = this.label.trim();\n // Check if label is truncated\n if (this._labelEl && !this.noTruncation) {\n this._isTruncated = this._labelEl.scrollWidth > this._labelEl.clientWidth;\n }\n super.updated(changedProperties);\n\n if (this.label.length === 0) {\n this._iconOnly = true;\n } else {\n this._iconOnly = false;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-status-picker': StatusPicker;\n }\n}\n"],"names":["STATUS_KINDS","StatusPicker","customElement","LitElement","_classThis","_classSuper","label","__classPrivateFieldGet","this","_StatusPicker_label_accessor_storage","value","__classPrivateFieldSet","disabled","_StatusPicker_disabled_accessor_storage","selected","_StatusPicker_selected_accessor_storage","noTruncation","_StatusPicker_noTruncation_accessor_storage","kind","_StatusPicker_kind_accessor_storage","_iconOnly","_StatusPicker__iconOnly_accessor_storage","_isTruncated","_StatusPicker__isTruncated_accessor_storage","_labelEl","_StatusPicker__labelEl_accessor_storage","render","newBaseColorClass","Classes","html","classMap","e","handleStatusClick","event","CustomEvent","detail","origEvent","dispatchEvent","updated","changedProperties","trim","scrollWidth","clientWidth","super","length","set","__runInitializers","_label_initializers","_label_extraInitializers","_disabled_initializers","_disabled_extraInitializers","_selected_initializers","_selected_extraInitializers","_noTruncation_initializers","_noTruncation_extraInitializers","_kind_initializers","SUCCESS","_kind_extraInitializers","__iconOnly_initializers","__iconOnly_extraInitializers","__isTruncated_initializers","__isTruncated_extraInitializers","__labelEl_initializers","_label_decorators","property","type","String","_disabled_decorators","Boolean","_selected_decorators","_noTruncation_decorators","_kind_decorators","__iconOnly_decorators","state","__isTruncated_decorators","query","__esDecorate","name","static","private","access","has","obj","get","metadata","_metadata","__labelEl_decorators","__labelEl_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","StatusPickerScss"],"mappings":"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"}