@getflip/swirl-components 0.509.0 → 0.510.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.json +24 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-chip.cjs.entry.js +2 -2
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/collection/components/swirl-chip/swirl-chip.css +56 -39
- package/dist/collection/components/swirl-chip/swirl-chip.js +20 -1
- package/dist/components/swirl-chip.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-chip.entry.js +2 -2
- package/dist/esm/swirl-components.js +1 -1
- package/dist/swirl-components/p-0eb845e5.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-chip/swirl-chip.d.ts +1 -0
- package/dist/types/components.d.ts +3 -0
- package/package.json +1 -1
- package/vscode-data.json +4 -0
- package/dist/swirl-components/p-30da9575.entry.js +0 -1
|
@@ -48,19 +48,28 @@
|
|
|
48
48
|
cursor: pointer;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
.chip--interactive:
|
|
51
|
+
.chip--interactive:disabled {
|
|
52
|
+
cursor: default;
|
|
53
|
+
color: var(--s-text-disabled);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.chip--interactive:disabled .chip__icon {
|
|
57
|
+
color: var(--s-icon-disabled);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.chip--interactive:hover:not(:disabled) {
|
|
52
61
|
background-color: var(--s-state-hovered);
|
|
53
62
|
}
|
|
54
63
|
|
|
55
|
-
.chip--interactive:hover ::part(avatar) {
|
|
64
|
+
.chip--interactive:hover:not(:disabled) ::part(avatar) {
|
|
56
65
|
background-color: var(--s-surface-raised-hovered);
|
|
57
66
|
}
|
|
58
67
|
|
|
59
|
-
.chip--interactive:active {
|
|
68
|
+
.chip--interactive:active:not(:disabled) {
|
|
60
69
|
background-color: var(--s-state-pressed);
|
|
61
70
|
}
|
|
62
71
|
|
|
63
|
-
.chip--interactive:active ::part(avatar) {
|
|
72
|
+
.chip--interactive:active:not(:disabled) ::part(avatar) {
|
|
64
73
|
background-color: var(--s-surface-raised-pressed);
|
|
65
74
|
}
|
|
66
75
|
|
|
@@ -72,65 +81,65 @@
|
|
|
72
81
|
padding-right: calc(1.875rem + var(--s-space-12));
|
|
73
82
|
}
|
|
74
83
|
|
|
75
|
-
.chip--intent-critical {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.chip--intent-critical .chip__icon {
|
|
81
|
-
color: var(--s-icon-critical);
|
|
84
|
+
.chip--intent-critical:not(:disabled) {
|
|
85
|
+
border-color: var(--s-border-critical);
|
|
86
|
+
color: var(--s-text-critical);
|
|
82
87
|
}
|
|
83
88
|
|
|
89
|
+
.chip--intent-critical:not(:disabled) .chip__icon {
|
|
90
|
+
color: var(--s-icon-critical);
|
|
91
|
+
}
|
|
92
|
+
|
|
84
93
|
.chip--border-radius-sm {
|
|
85
94
|
border-radius: var(--s-border-radius-sm);
|
|
86
95
|
}
|
|
87
96
|
|
|
88
|
-
.chip--intent-success {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.chip--intent-success .chip__icon {
|
|
94
|
-
color: var(--s-icon-success);
|
|
97
|
+
.chip--intent-success:not(:disabled) {
|
|
98
|
+
border-color: var(--s-border-success);
|
|
99
|
+
color: var(--s-text-success);
|
|
95
100
|
}
|
|
96
101
|
|
|
97
|
-
.chip--intent-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
}
|
|
102
|
+
.chip--intent-success:not(:disabled) .chip__icon {
|
|
103
|
+
color: var(--s-icon-success);
|
|
104
|
+
}
|
|
101
105
|
|
|
102
|
-
.chip--intent-highlight
|
|
103
|
-
color: var(--s-
|
|
106
|
+
.chip--intent-highlight:not(:disabled) {
|
|
107
|
+
border-color: var(--s-border-highlight);
|
|
108
|
+
color: var(--s-text-highlight);
|
|
104
109
|
}
|
|
105
110
|
|
|
106
|
-
.chip--
|
|
111
|
+
.chip--intent-highlight:not(:disabled) .chip__icon {
|
|
112
|
+
color: var(--s-icon-highlight);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.chip--variant-outline.chip--pressed:not(:disabled), .chip--variant-translucent.chip--pressed:not(:disabled) {
|
|
107
116
|
color: var(--s-text-on-action-primary);
|
|
108
117
|
background-color: var(--s-action-primary-default);
|
|
109
118
|
border-color: var(--s-action-primary-default);
|
|
110
119
|
}
|
|
111
120
|
|
|
112
|
-
.chip--variant-outline.chip--pressed .chip__icon, .chip--variant-translucent.chip--pressed .chip__icon {
|
|
121
|
+
.chip--variant-outline.chip--pressed:not(:disabled) .chip__icon, .chip--variant-translucent.chip--pressed:not(:disabled) .chip__icon {
|
|
113
122
|
color: var(--s-text-on-action-primary);
|
|
114
123
|
}
|
|
115
124
|
|
|
116
|
-
.chip--variant-outline.chip--pressed:hover, .chip--variant-translucent.chip--pressed:hover {
|
|
125
|
+
.chip--variant-outline.chip--pressed:not(:disabled):hover:not(:disabled), .chip--variant-translucent.chip--pressed:not(:disabled):hover:not(:disabled) {
|
|
117
126
|
background-color: var(--s-action-primary-hovered);
|
|
118
127
|
}
|
|
119
128
|
|
|
120
|
-
.chip--variant-outline.chip--pressed:active, .chip--variant-translucent.chip--pressed:active {
|
|
129
|
+
.chip--variant-outline.chip--pressed:not(:disabled):active:not(:disabled), .chip--variant-translucent.chip--pressed:not(:disabled):active:not(:disabled) {
|
|
121
130
|
background-color: var(--s-action-primary-pressed);
|
|
122
131
|
}
|
|
123
132
|
|
|
124
|
-
.chip--variant-outline.chip--pressed + .chip__remove-button, .chip--variant-translucent.chip--pressed + .chip__remove-button {
|
|
133
|
+
.chip--variant-outline.chip--pressed:not(:disabled) + .chip__remove-button, .chip--variant-translucent.chip--pressed:not(:disabled) + .chip__remove-button {
|
|
125
134
|
color: var(--s-text-on-action-primary);
|
|
126
135
|
background-color: var(--s-action-primary-default);
|
|
127
136
|
}
|
|
128
137
|
|
|
129
|
-
.chip--variant-outline.chip--pressed + .chip__remove-button:hover, .chip--variant-translucent.chip--pressed + .chip__remove-button:hover {
|
|
138
|
+
.chip--variant-outline.chip--pressed:not(:disabled) + .chip__remove-button:hover:not(:disabled), .chip--variant-translucent.chip--pressed:not(:disabled) + .chip__remove-button:hover:not(:disabled) {
|
|
130
139
|
background-color: var(--s-action-primary-hovered);
|
|
131
140
|
}
|
|
132
141
|
|
|
133
|
-
.chip--variant-outline.chip--pressed + .chip__remove-button:active, .chip--variant-translucent.chip--pressed + .chip__remove-button:active {
|
|
142
|
+
.chip--variant-outline.chip--pressed:not(:disabled) + .chip__remove-button:active:not(:disabled), .chip--variant-translucent.chip--pressed:not(:disabled) + .chip__remove-button:active:not(:disabled) {
|
|
134
143
|
background-color: var(--s-action-primary-pressed);
|
|
135
144
|
}
|
|
136
145
|
|
|
@@ -140,11 +149,11 @@
|
|
|
140
149
|
backdrop-filter: blur(var(--s-blur-s));
|
|
141
150
|
}
|
|
142
151
|
|
|
143
|
-
.chip--variant-translucent.chip--interactive:hover {
|
|
152
|
+
.chip--variant-translucent.chip--interactive:hover:not(:disabled) {
|
|
144
153
|
background: var(--s-translucent-medium-hovered);
|
|
145
154
|
}
|
|
146
155
|
|
|
147
|
-
.chip--variant-translucent.chip--interactive:active {
|
|
156
|
+
.chip--variant-translucent.chip--interactive:active:not(:disabled) {
|
|
148
157
|
background: var(--s-translucent-medium-pressed);
|
|
149
158
|
}
|
|
150
159
|
|
|
@@ -155,21 +164,21 @@
|
|
|
155
164
|
background-color: transparent;
|
|
156
165
|
}
|
|
157
166
|
|
|
158
|
-
.chip--variant-plain.chip--interactive:hover {
|
|
167
|
+
.chip--variant-plain.chip--interactive:hover:not(:disabled) {
|
|
159
168
|
background-color: transparent;
|
|
160
169
|
text-decoration: underline;
|
|
161
170
|
text-underline-offset: var(--s-space-4);
|
|
162
171
|
}
|
|
163
172
|
|
|
164
|
-
.chip--variant-plain.chip--interactive:hover ::part(avatar) {
|
|
173
|
+
.chip--variant-plain.chip--interactive:hover:not(:disabled) ::part(avatar) {
|
|
165
174
|
background-color: var(--s-surface-raised-hovered);
|
|
166
175
|
}
|
|
167
176
|
|
|
168
|
-
.chip--variant-plain.chip--interactive:active {
|
|
177
|
+
.chip--variant-plain.chip--interactive:active:not(:disabled) {
|
|
169
178
|
background-color: transparent;
|
|
170
179
|
}
|
|
171
180
|
|
|
172
|
-
.chip--variant-plain.chip--interactive:active ::part(avatar) {
|
|
181
|
+
.chip--variant-plain.chip--interactive:active:not(:disabled) ::part(avatar) {
|
|
173
182
|
background-color: var(--s-surface-raised-pressed);
|
|
174
183
|
}
|
|
175
184
|
|
|
@@ -264,10 +273,18 @@
|
|
|
264
273
|
cursor: pointer;
|
|
265
274
|
}
|
|
266
275
|
|
|
267
|
-
.chip__remove-button:
|
|
276
|
+
.chip__remove-button:disabled {
|
|
277
|
+
cursor: default;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.chip__remove-button:disabled > *::part(icon) {
|
|
281
|
+
color: var(--s-icon-disabled);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.chip__remove-button:hover:not(:disabled) {
|
|
268
285
|
background-color: var(--s-state-hovered);
|
|
269
286
|
}
|
|
270
287
|
|
|
271
|
-
.chip__remove-button:active {
|
|
288
|
+
.chip__remove-button:active:not(:disabled) {
|
|
272
289
|
background-color: var(--s-state-pressed);
|
|
273
290
|
}
|
|
@@ -54,7 +54,7 @@ export class SwirlChip {
|
|
|
54
54
|
"chip--interactive": this.interactive || this.pressed !== undefined,
|
|
55
55
|
"chip--removable": this.removable,
|
|
56
56
|
});
|
|
57
|
-
return (h(Host, { key: '
|
|
57
|
+
return (h(Host, { key: 'a143d32603ecf2843a8b1291dfcad7c9a59fb6dc' }, h(Tag, { key: 'a6ec7b1554b4b53317da9e4f4174eeb37fa71292', "aria-disabled": this.interactive && this.disabled ? "true" : undefined, "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, disabled: this.interactive ? this.disabled : undefined, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: '06290531c4484d1d40350190cca4e28fb9554701', class: "chip__inner" }, showAvatar && (h("span", { key: 'fb1586360058ce70836b0d9abb16fb2ffb4ffbf3', class: "chip__avatar" }, h("slot", { key: 'cbea43f4ad440ca2d59b56dbef167a0197930544', name: "avatar" }))), showIcon && (h("span", { key: '82b15edc910565d8b8d2d494f1e061771aeaa0a2', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '6c5882703ac0a24145ccce4063d89f1ebaea5f41', class: "chip__label" }, this.label), this.trailingIcon && (h("span", { key: '1dd62bebc93bcf530cd049084c0c9f867d803c84', class: "chip__trailing-icon", innerHTML: this.trailingIcon, ref: (el) => (this.trailingIconEl = el) })), showTrailingContent && (h("span", { key: 'dea6309c1dd6d1648c5abbf353270da7d272d9a6', class: "chip__trailing-content" }, h("slot", { key: 'c8de705b65639aca3758e81fb6f0547b35a6b485', name: "trailing-content" })))), this.progress !== undefined && (h("span", { key: '1cb286d6d821e9dcb1f0cb33d0daf1601909a5ab', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: '5fa7db1e4452a036fc3e2bb2190996bd6e4bdf50', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: 'f48ecfa4f1d207cd9202af9206478d59c176a096', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.removeButtonLabel, class: "chip__remove-button", disabled: this.disabled, onClick: this.removeChip.emit, type: "button" }, h("swirl-icon-close", { key: 'c143ebba597808238fd7bb07fd356d85333d8c5c', size: 20 })))));
|
|
58
58
|
}
|
|
59
59
|
static get is() { return "swirl-chip"; }
|
|
60
60
|
static get encapsulation() { return "scoped"; }
|
|
@@ -96,6 +96,25 @@ export class SwirlChip {
|
|
|
96
96
|
"attribute": "border-radius",
|
|
97
97
|
"defaultValue": "\"pill\""
|
|
98
98
|
},
|
|
99
|
+
"disabled": {
|
|
100
|
+
"type": "boolean",
|
|
101
|
+
"mutable": false,
|
|
102
|
+
"complexType": {
|
|
103
|
+
"original": "boolean",
|
|
104
|
+
"resolved": "boolean",
|
|
105
|
+
"references": {}
|
|
106
|
+
},
|
|
107
|
+
"required": false,
|
|
108
|
+
"optional": true,
|
|
109
|
+
"docs": {
|
|
110
|
+
"tags": [],
|
|
111
|
+
"text": ""
|
|
112
|
+
},
|
|
113
|
+
"getter": false,
|
|
114
|
+
"setter": false,
|
|
115
|
+
"reflect": false,
|
|
116
|
+
"attribute": "disabled"
|
|
117
|
+
},
|
|
99
118
|
"icon": {
|
|
100
119
|
"type": "string",
|
|
101
120
|
"mutable": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as i,HTMLElement as c,createEvent as r,h as s,Host as e,transformTag as a}from"@stencil/core/internal/client";import{c as t}from"./index2.js";import{D as h}from"./media-query.service.js";import{d as p}from"./swirl-icon-close2.js";import{d as n}from"./swirl-progress-indicator2.js";const o=i(class extends c{constructor(i){super(),!1!==i&&this.__registerHost(),this.chipClick=r(this,"chipClick",7),this.removeChip=r(this,"remove",7),this.borderRadius="pill",this.iconColor="default",this.intent="default",this.interactive=!1,this.progressBarLabel="Loading progress",this.removeButtonLabel="Remove",this.size="m",this.variant="outline",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=h.subscribe((i=>{this.isDesktop=i,this.forceIconProps()}))}componentDidRender(){this.forceIconProps()}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(){if(!this.iconEl&&!this.trailingIconEl)return;const i="s"===this.size?"16":this.isDesktop?"20":"24";if(this.iconEl){const c=this.iconEl.children[0];c?.setAttribute("size",i)}if(this.trailingIconEl){const c=this.trailingIconEl.children[0];c?.setAttribute("size",i)}}render(){const i=this.interactive||void 0!==this.pressed?"button":"span",c=!!this.el.querySelector('[slot="avatar"]'),r=!c&&!!this.icon,a=!!this.el.querySelector('[slot="trailing-content"]'),h=t("chip","chip--border-radius-"+this.borderRadius,"chip--icon-color-"+this.iconColor,"chip--intent-"+this.intent,"chip--size-"+this.size,"chip--variant-"+this.variant,{"chip--pressed":this.pressed,"chip--has-progress":void 0!==this.progress,"chip--interactive":this.interactive||void 0!==this.pressed,"chip--removable":this.removable});return s(e,{key:"42fb03e9b8bc0bdb5158411533822029fc2f7172"},s(i,{key:"a9353bcf8da70ba240ff50ab36d7983a51ab5d89","aria-pressed":void 0!==this.pressed?this.pressed+"":void 0,class:h,onClick:this.chipClick.emit,type:this.interactive?"button":void 0},s("span",{key:"ded71dbe3387cabb8254e279aeb9ccc3f9d6b878",class:"chip__inner"},c&&s("span",{key:"b23cb213584d989ca408a3f918b2f62dfbefd31b",class:"chip__avatar"},s("slot",{key:"4a0a97de89ce85b6a3043ba70011d389d4d8567b",name:"avatar"})),r&&s("span",{key:"908d96c06ccc0487da381b854103c9a3bc21da90",class:"chip__icon",innerHTML:this.icon,ref:i=>this.iconEl=i}),s("span",{key:"388a801b5e203a2dcbe9428d6d241632eb8308fc",class:"chip__label"},this.label),this.trailingIcon&&s("span",{key:"4b25f552a160cce2d9dba87dd5209b8db73ad003",class:"chip__trailing-icon",innerHTML:this.trailingIcon,ref:i=>this.trailingIconEl=i}),a&&s("span",{key:"ddc653637a58b3739c699040ba4e67439c8691e5",class:"chip__trailing-content"},s("slot",{key:"b98d5c932c275412566b46b4712a691e944b27ad",name:"trailing-content"}))),void 0!==this.progress&&s("span",{key:"4a9759a58972fc4b61458c8aeaf01aa57e4dc995",class:"chip__progress-indicator"},s("swirl-progress-indicator",{key:"d8f93347e50e9e815fc6c7c6df9a3bf54df10a98",label:this.progressBarLabel,value:this.progress}))),this.removable&&s("button",{key:"3823bdc2bf504ce3c292c3ff40e50125d05c92da","aria-label":this.removeButtonLabel,class:"chip__remove-button",onClick:this.removeChip.emit,type:"button"},s("swirl-icon-close",{key:"64576204b99032780f4bbf35a77fb94959a80ab9",size:20})))}get el(){return this}static get style(){return'.sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%}.sc-swirl-chip-h *.sc-swirl-chip{box-sizing:border-box}.chip.sc-swirl-chip{display:inline-flex;overflow:hidden;max-width:100%;height:2.25rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:transparent;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);flex-direction:column}.chip--size-s.sc-swirl-chip{height:2rem}.chip--size-s.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.5rem + var(--s-space-12))}.chip--size-s.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.chip--size-s.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:var(--s-space-4);width:1.5rem;height:1.5rem}.chip--interactive.sc-swirl-chip{cursor:pointer}.chip--interactive.sc-swirl-chip:hover{background-color:var(--s-state-hovered)}.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:active{background-color:var(--s-state-pressed)}.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:active .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--icon-color-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.875rem + var(--s-space-12))}.chip--intent-critical.sc-swirl-chip{border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-critical)}.chip--border-radius-sm.sc-swirl-chip{border-radius:var(--s-border-radius-sm)}.chip--intent-success.sc-swirl-chip{border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-success)}.chip--intent-highlight.sc-swirl-chip{border-color:var(--s-border-highlight);color:var(--s-text-highlight)}.chip--intent-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--variant-outline.chip--pressed.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default);border-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip .chip__icon.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-text-on-action-primary)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover,.chip--variant-translucent.chip--pressed.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active,.chip--variant-translucent.chip--pressed.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:hover,.chip--variant-translucent.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active,.chip--variant-translucent.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-translucent.sc-swirl-chip{background:var(--s-translucent-medium-default);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s))}.chip--variant-translucent.chip--interactive.sc-swirl-chip:hover{background:var(--s-translucent-medium-hovered)}.chip--variant-translucent.chip--interactive.sc-swirl-chip:active{background:var(--s-translucent-medium-pressed)}.chip--variant-plain.sc-swirl-chip{height:auto;border:none;border-radius:0;background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover{background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--variant-plain.chip--interactive.sc-swirl-chip:active{background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:active .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--variant-plain.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12)}.chip--variant-plain.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{position:relative;top:0;right:auto}.chip--variant-plain.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:0;padding-left:0}.chip--variant-plain.sc-swirl-chip .chip__icon.sc-swirl-chip,.chip--variant-plain.sc-swirl-chip .chip__avatar.sc-swirl-chip{margin-left:0}.chip--has-progress.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:0.1875rem}.chip--has-progress.sc-swirl-chip:not(.chip--size-s)+.chip__remove-button.sc-swirl-chip{top:0.0625rem}.chip__inner.sc-swirl-chip{display:inline-flex;max-width:100%;height:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center}.chip__avatar.sc-swirl-chip,.chip__icon.sc-swirl-chip{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar.sc-swirl-chip{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon.sc-swirl-chip{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__trailing-icon.sc-swirl-chip,.chip__trailing-content.sc-swirl-chip{display:inline-flex;flex-shrink:0;margin-left:var(--s-space-8)}.chip__label.sc-swirl-chip{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__progress-indicator.sc-swirl-chip{width:100%}.chip__remove-button.sc-swirl-chip{position:absolute;top:0.1875rem;right:var(--s-space-4);display:inline-flex;width:1.875rem;height:1.875rem;padding:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-state-hovered)}.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-state-pressed)}'}},[262,"swirl-chip",{borderRadius:[1,"border-radius"],icon:[1],iconColor:[1,"icon-color"],trailingIcon:[1,"trailing-icon"],intent:[1],interactive:[4],label:[1],progress:[2],pressed:[4],progressBarLabel:[1,"progress-bar-label"],removable:[4],removeButtonLabel:[1,"remove-button-label"],size:[1],variant:[1]}]),l=o,d=function(){"undefined"!=typeof customElements&&["swirl-chip","swirl-icon-close","swirl-progress-indicator"].forEach((i=>{switch(i){case"swirl-chip":customElements.get(a(i))||customElements.define(a(i),o);break;case"swirl-icon-close":customElements.get(a(i))||p();break;case"swirl-progress-indicator":customElements.get(a(i))||n()}}))};export{l as SwirlChip,d as defineCustomElement}
|
|
1
|
+
import{proxyCustomElement as i,HTMLElement as s,createEvent as c,h as r,Host as e,transformTag as a}from"@stencil/core/internal/client";import{c as t}from"./index2.js";import{D as o}from"./media-query.service.js";import{d as n}from"./swirl-icon-close2.js";import{d as h}from"./swirl-progress-indicator2.js";const l=i(class extends s{constructor(i){super(),!1!==i&&this.__registerHost(),this.chipClick=c(this,"chipClick",7),this.removeChip=c(this,"remove",7),this.borderRadius="pill",this.iconColor="default",this.intent="default",this.interactive=!1,this.progressBarLabel="Loading progress",this.removeButtonLabel="Remove",this.size="m",this.variant="outline",this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=o.subscribe((i=>{this.isDesktop=i,this.forceIconProps()}))}componentDidRender(){this.forceIconProps()}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(){if(!this.iconEl&&!this.trailingIconEl)return;const i="s"===this.size?"16":this.isDesktop?"20":"24";if(this.iconEl){const s=this.iconEl.children[0];s?.setAttribute("size",i)}if(this.trailingIconEl){const s=this.trailingIconEl.children[0];s?.setAttribute("size",i)}}render(){const i=this.interactive||void 0!==this.pressed?"button":"span",s=!!this.el.querySelector('[slot="avatar"]'),c=!s&&!!this.icon,a=!!this.el.querySelector('[slot="trailing-content"]'),o=t("chip","chip--border-radius-"+this.borderRadius,"chip--icon-color-"+this.iconColor,"chip--intent-"+this.intent,"chip--size-"+this.size,"chip--variant-"+this.variant,{"chip--pressed":this.pressed,"chip--has-progress":void 0!==this.progress,"chip--interactive":this.interactive||void 0!==this.pressed,"chip--removable":this.removable});return r(e,{key:"a143d32603ecf2843a8b1291dfcad7c9a59fb6dc"},r(i,{key:"a6ec7b1554b4b53317da9e4f4174eeb37fa71292","aria-disabled":this.interactive&&this.disabled?"true":void 0,"aria-pressed":void 0!==this.pressed?this.pressed+"":void 0,class:o,disabled:this.interactive?this.disabled:void 0,onClick:this.chipClick.emit,type:this.interactive?"button":void 0},r("span",{key:"06290531c4484d1d40350190cca4e28fb9554701",class:"chip__inner"},s&&r("span",{key:"fb1586360058ce70836b0d9abb16fb2ffb4ffbf3",class:"chip__avatar"},r("slot",{key:"cbea43f4ad440ca2d59b56dbef167a0197930544",name:"avatar"})),c&&r("span",{key:"82b15edc910565d8b8d2d494f1e061771aeaa0a2",class:"chip__icon",innerHTML:this.icon,ref:i=>this.iconEl=i}),r("span",{key:"6c5882703ac0a24145ccce4063d89f1ebaea5f41",class:"chip__label"},this.label),this.trailingIcon&&r("span",{key:"1dd62bebc93bcf530cd049084c0c9f867d803c84",class:"chip__trailing-icon",innerHTML:this.trailingIcon,ref:i=>this.trailingIconEl=i}),a&&r("span",{key:"dea6309c1dd6d1648c5abbf353270da7d272d9a6",class:"chip__trailing-content"},r("slot",{key:"c8de705b65639aca3758e81fb6f0547b35a6b485",name:"trailing-content"}))),void 0!==this.progress&&r("span",{key:"1cb286d6d821e9dcb1f0cb33d0daf1601909a5ab",class:"chip__progress-indicator"},r("swirl-progress-indicator",{key:"5fa7db1e4452a036fc3e2bb2190996bd6e4bdf50",label:this.progressBarLabel,value:this.progress}))),this.removable&&r("button",{key:"f48ecfa4f1d207cd9202af9206478d59c176a096","aria-disabled":this.disabled?"true":void 0,"aria-label":this.removeButtonLabel,class:"chip__remove-button",disabled:this.disabled,onClick:this.removeChip.emit,type:"button"},r("swirl-icon-close",{key:"c143ebba597808238fd7bb07fd356d85333d8c5c",size:20})))}get el(){return this}static get style(){return'.sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%}.sc-swirl-chip-h *.sc-swirl-chip{box-sizing:border-box}.chip.sc-swirl-chip{display:inline-flex;overflow:hidden;max-width:100%;height:2.25rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:transparent;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);flex-direction:column}.chip--size-s.sc-swirl-chip{height:2rem}.chip--size-s.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.5rem + var(--s-space-12))}.chip--size-s.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.chip--size-s.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:var(--s-space-4);width:1.5rem;height:1.5rem}.chip--interactive.sc-swirl-chip{cursor:pointer}.chip--interactive.sc-swirl-chip:disabled{cursor:default;color:var(--s-text-disabled)}.chip--interactive.sc-swirl-chip:disabled .chip__icon.sc-swirl-chip{color:var(--s-icon-disabled)}.chip--interactive.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-state-hovered)}.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:active:not(:disabled){background-color:var(--s-state-pressed)}.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--icon-color-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.875rem + var(--s-space-12))}.chip--intent-critical.sc-swirl-chip:not(:disabled){border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-icon-critical)}.chip--border-radius-sm.sc-swirl-chip{border-radius:var(--s-border-radius-sm)}.chip--intent-success.sc-swirl-chip:not(:disabled){border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-icon-success)}.chip--intent-highlight.sc-swirl-chip:not(:disabled){border-color:var(--s-border-highlight);color:var(--s-text-highlight)}.chip--intent-highlight.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default);border-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled) .chip__icon.sc-swirl-chip{color:var(--s-text-on-action-primary)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled):hover:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled):hover:not(:disabled){background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled):active:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled):active:not(:disabled){background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:hover:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:active:not(:disabled),.chip--variant-translucent.chip--pressed.sc-swirl-chip:not(:disabled)+.chip__remove-button.sc-swirl-chip:active:not(:disabled){background-color:var(--s-action-primary-pressed)}.chip--variant-translucent.sc-swirl-chip{background:var(--s-translucent-medium-default);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s))}.chip--variant-translucent.chip--interactive.sc-swirl-chip:hover:not(:disabled){background:var(--s-translucent-medium-hovered)}.chip--variant-translucent.chip--interactive.sc-swirl-chip:active:not(:disabled){background:var(--s-translucent-medium-pressed)}.chip--variant-plain.sc-swirl-chip{height:auto;border:none;border-radius:0;background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover:not(:disabled){background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:hover:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--variant-plain.chip--interactive.sc-swirl-chip:active:not(:disabled){background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:active:not(:disabled) .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--variant-plain.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12)}.chip--variant-plain.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{position:relative;top:0;right:auto}.chip--variant-plain.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:0;padding-left:0}.chip--variant-plain.sc-swirl-chip .chip__icon.sc-swirl-chip,.chip--variant-plain.sc-swirl-chip .chip__avatar.sc-swirl-chip{margin-left:0}.chip--has-progress.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:0.1875rem}.chip--has-progress.sc-swirl-chip:not(.chip--size-s)+.chip__remove-button.sc-swirl-chip{top:0.0625rem}.chip__inner.sc-swirl-chip{display:inline-flex;max-width:100%;height:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center}.chip__avatar.sc-swirl-chip,.chip__icon.sc-swirl-chip{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar.sc-swirl-chip{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon.sc-swirl-chip{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__trailing-icon.sc-swirl-chip,.chip__trailing-content.sc-swirl-chip{display:inline-flex;flex-shrink:0;margin-left:var(--s-space-8)}.chip__label.sc-swirl-chip{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__progress-indicator.sc-swirl-chip{width:100%}.chip__remove-button.sc-swirl-chip{position:absolute;top:0.1875rem;right:var(--s-space-4);display:inline-flex;width:1.875rem;height:1.875rem;padding:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.chip__remove-button.sc-swirl-chip:disabled{cursor:default}.chip__remove-button.sc-swirl-chip:disabled>*.sc-swirl-chip::part(icon),.chip__remove-button.sc-swirl-chip:disabled>*.sc-swirl-chip [part~="icon"]{color:var(--s-icon-disabled)}.chip__remove-button.sc-swirl-chip:hover:not(:disabled){background-color:var(--s-state-hovered)}.chip__remove-button.sc-swirl-chip:active:not(:disabled){background-color:var(--s-state-pressed)}'}},[262,"swirl-chip",{borderRadius:[1,"border-radius"],disabled:[4],icon:[1],iconColor:[1,"icon-color"],trailingIcon:[1,"trailing-icon"],intent:[1],interactive:[4],label:[1],progress:[2],pressed:[4],progressBarLabel:[1,"progress-bar-label"],removable:[4],removeButtonLabel:[1,"remove-button-label"],size:[1],variant:[1]}]),p=l,d=function(){"undefined"!=typeof customElements&&["swirl-chip","swirl-icon-close","swirl-progress-indicator"].forEach((i=>{switch(i){case"swirl-chip":customElements.get(a(i))||customElements.define(a(i),l);break;case"swirl-icon-close":customElements.get(a(i))||n();break;case"swirl-progress-indicator":customElements.get(a(i))||h()}}))};export{p as SwirlChip,d as defineCustomElement}
|