@justeattakeaway/pie-chip 0.15.33 → 0.15.35
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/dist/index.js +31 -31
- package/package.json +6 -6
- package/src/chip.scss +3 -14
package/dist/index.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { LitElement as _, html as p, nothing as x, unsafeCSS as S } from "lit";
|
|
2
|
-
import { property as
|
|
3
|
-
import { ifDefined as
|
|
4
|
-
import { classMap as
|
|
2
|
+
import { property as n } from "lit/decorators.js";
|
|
3
|
+
import { ifDefined as d } from "lit/directives/if-defined.js";
|
|
4
|
+
import { classMap as m } from "lit/directives/class-map.js";
|
|
5
5
|
import { DelegatesFocusMixin as D, validPropertyValues as y, safeCustomElement as B } from "@justeattakeaway/pie-webc-core";
|
|
6
6
|
import "@justeattakeaway/pie-icons-webc/dist/IconCloseCircleFilled.js";
|
|
7
7
|
import "@justeattakeaway/pie-spinner";
|
|
8
|
-
const
|
|
8
|
+
const b = class b extends _ {
|
|
9
9
|
willUpdate() {
|
|
10
|
-
this.getAttribute("v") || this.setAttribute("v",
|
|
10
|
+
this.getAttribute("v") || this.setAttribute("v", b.v);
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
|
-
|
|
14
|
-
let
|
|
15
|
-
const L = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}:host([disabled]),:host([isLoading]){pointer-events:none}.c-chip{--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);--chip-color: var(--dt-color-content-interactive-secondary);--chip-border-width: 1px;--chip-border-color: transparent;--chip-padding-block: calc(6px - var(--chip-border-width));--chip-padding-inline: calc(var(--dt-spacing-c) - var(--chip-border-width));--chip-padding-dismissible: calc(var(--dt-spacing-a) - var(--chip-border-width));--chip-min-width: calc(var(--dt-spacing-g) + var(--dt-spacing-b));--chip-gap: var(--dt-spacing-b);--chip-dismissible-offset: calc(var(--chip-gap) / -2);--chip-cursor: pointer;--chip-close-btn-cursor: pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--chip-gap);padding-block-start:var(--chip-padding-block);padding-block-end:var(--chip-padding-block);padding-inline-start:var(--chip-padding-inline);padding-inline-end:var(--chip-padding-inline);background-color:var(--int-states-mixin-bg-color);color:var(--chip-color);border-radius:var(--dt-radius-rounded-e);border:var(--chip-border-width) solid;border-color:var(--chip-border-color);cursor:var(--chip-cursor);-webkit-user-select:none;user-select:none;min-width:var(--chip-min-width);font-family:inherit;font-size:calc(var(--dt-font-interactive-xs-size) * 1px);line-height:calc(var(--dt-font-interactive-xs-line-height) * 1px);font-weight:var(--dt-font-interactive-xs-weight)}.c-chip:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.c-chip:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-chip:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-secondary))}.c-chip:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-secondary))}}.c-chip.c-chip--outline{--chip-border-color: var(--dt-color-border-strong)}.c-chip.c-chip--outline,.c-chip.c-chip--ghost{--int-states-mixin-bg-color: transparent;--chip-color: var(--dt-color-content-interactive-secondary-solid)}.c-chip.c-chip--outline:hover:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.c-chip.c-chip--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--outline.is-loading:not(:disabled,.is-disabled),.c-chip.c-chip--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-chip.c-chip--outline:hover:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}.c-chip.c-chip--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--outline.is-loading:not(:disabled,.is-disabled),.c-chip.c-chip--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.c-chip.c-chip--translucent{--int-states-mixin-bg-color: var(--dt-color-container-neutral);--chip-color: var(--dt-color-content-interactive-secondary-solid);--chip-border-color: var(--dt-color-border-neutral)}.c-chip.c-chip--translucent:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-neutral-h), var(--dt-color-container-neutral-s), calc(var(--dt-color-container-neutral-l) + var(--hover-modifier)))}.c-chip.c-chip--translucent:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--translucent.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-neutral-h), var(--dt-color-container-neutral-s), calc(var(--dt-color-container-neutral-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-chip.c-chip--translucent:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-neutral))}.c-chip.c-chip--translucent:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--translucent.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-neutral))}}.c-chip.is-selected{--int-states-mixin-bg-color: var(--dt-color-interactive-primary);--chip-color: var(--dt-color-content-interactive-primary);--chip-border-color: transparent}.c-chip.is-selected:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.c-chip.is-selected:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.is-selected.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-chip.is-selected:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-interactive-primary))}.c-chip.is-selected:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.is-selected.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-interactive-primary))}}.c-chip.is-loading>*:not(.c-chip-spinner){visibility:hidden}.c-chip.is-loading .c-chip-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.c-chip.is-disabled{--int-states-mixin-bg-color: var(--dt-color-disabled-01);--chip-color: var(--dt-color-content-disabled);--chip-cursor: not-allowed;--chip-close-btn-cursor: not-allowed}.c-chip.is-disabled.c-chip--ghost{--int-states-mixin-bg-color: transparent;--chip-color: var(--dt-color-content-disabled-solid)}.c-chip.is-disabled.c-chip--outline,.c-chip.is-disabled.c-chip--translucent{--chip-border-color: var(--dt-color-disabled-01)}.c-chip.is-dismissible{--chip-cursor: text;padding-inline-end:var(--chip-padding-dismissible);padding-block-start:var(--chip-padding-dismissible);padding-block-end:var(--chip-padding-dismissible);-webkit-user-select:auto;user-select:auto}.c-chip.is-dismissible .c-chip-closeBtn{display:inline-flex;-webkit-user-select:none;user-select:none;outline:none;border:none;color:inherit;background-color:inherit;border-radius:inherit;cursor:var(--chip-close-btn-cursor);padding:0;margin-inline-start:var(--chip-dismissible-offset)}.c-chip.is-dismissible .c-chip-closeBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-chip:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}[type=checkbox]{position:absolute;
|
|
13
|
+
b.v = "0.15.35";
|
|
14
|
+
let g = b;
|
|
15
|
+
const L = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}:host([disabled]),:host([isLoading]){pointer-events:none}.c-chip{--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);--chip-color: var(--dt-color-content-interactive-secondary);--chip-border-width: 1px;--chip-border-color: transparent;--chip-padding-block: calc(6px - var(--chip-border-width));--chip-padding-inline: calc(var(--dt-spacing-c) - var(--chip-border-width));--chip-padding-dismissible: calc(var(--dt-spacing-a) - var(--chip-border-width));--chip-min-width: calc(var(--dt-spacing-g) + var(--dt-spacing-b));--chip-gap: var(--dt-spacing-b);--chip-dismissible-offset: calc(var(--chip-gap) / -2);--chip-cursor: pointer;--chip-close-btn-cursor: pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--chip-gap);padding-block-start:var(--chip-padding-block);padding-block-end:var(--chip-padding-block);padding-inline-start:var(--chip-padding-inline);padding-inline-end:var(--chip-padding-inline);background-color:var(--int-states-mixin-bg-color);color:var(--chip-color);border-radius:var(--dt-radius-rounded-e);border:var(--chip-border-width) solid;border-color:var(--chip-border-color);cursor:var(--chip-cursor);-webkit-user-select:none;user-select:none;min-width:var(--chip-min-width);font-family:inherit;font-size:calc(var(--dt-font-interactive-xs-size) * 1px);line-height:calc(var(--dt-font-interactive-xs-line-height) * 1px);font-weight:var(--dt-font-interactive-xs-weight)}@media(hover:hover){.c-chip:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}}.c-chip:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-chip:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-secondary))}}.c-chip:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-secondary))}}.c-chip ::slotted(.c-pieIcon){pointer-events:none}.c-chip.c-chip--outline{--chip-border-color: var(--dt-color-border-strong)}.c-chip.c-chip--outline,.c-chip.c-chip--ghost{--int-states-mixin-bg-color: transparent;--chip-color: var(--dt-color-content-interactive-secondary-solid)}@media(hover:hover){.c-chip.c-chip--outline:hover:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}}.c-chip.c-chip--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--outline.is-loading:not(:disabled,.is-disabled),.c-chip.c-chip--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-chip.c-chip--outline:hover:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}}.c-chip.c-chip--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--outline.is-loading:not(:disabled,.is-disabled),.c-chip.c-chip--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.c-chip.c-chip--translucent{--int-states-mixin-bg-color: var(--dt-color-container-neutral);--chip-color: var(--dt-color-content-interactive-secondary-solid);--chip-border-color: var(--dt-color-border-neutral)}@media(hover:hover){.c-chip.c-chip--translucent:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-neutral-h), var(--dt-color-container-neutral-s), calc(var(--dt-color-container-neutral-l) + var(--hover-modifier)))}}.c-chip.c-chip--translucent:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--translucent.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-neutral-h), var(--dt-color-container-neutral-s), calc(var(--dt-color-container-neutral-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-chip.c-chip--translucent:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-neutral))}}.c-chip.c-chip--translucent:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--translucent.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-neutral))}}.c-chip.is-selected{--int-states-mixin-bg-color: var(--dt-color-interactive-primary);--chip-color: var(--dt-color-content-interactive-primary);--chip-border-color: transparent}@media(hover:hover){.c-chip.is-selected:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}}.c-chip.is-selected:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.is-selected.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-chip.is-selected:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-interactive-primary))}}.c-chip.is-selected:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.is-selected.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-interactive-primary))}}.c-chip.is-loading>*:not(.c-chip-spinner){visibility:hidden}.c-chip.is-loading .c-chip-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.c-chip.is-disabled{--int-states-mixin-bg-color: var(--dt-color-disabled-01);--chip-color: var(--dt-color-content-disabled);--chip-cursor: not-allowed;--chip-close-btn-cursor: not-allowed}.c-chip.is-disabled.c-chip--ghost{--int-states-mixin-bg-color: transparent;--chip-color: var(--dt-color-content-disabled-solid)}.c-chip.is-disabled.c-chip--outline,.c-chip.is-disabled.c-chip--translucent{--chip-border-color: var(--dt-color-disabled-01)}.c-chip.is-dismissible{--chip-cursor: text;padding-inline-end:var(--chip-padding-dismissible);padding-block-start:var(--chip-padding-dismissible);padding-block-end:var(--chip-padding-dismissible);-webkit-user-select:auto;user-select:auto}.c-chip.is-dismissible .c-chip-closeBtn{display:inline-flex;-webkit-user-select:none;user-select:none;outline:none;border:none;color:inherit;background-color:inherit;border-radius:inherit;cursor:var(--chip-close-btn-cursor);padding:0;margin-inline-start:var(--chip-dismissible-offset)}.c-chip.is-dismissible .c-chip-closeBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-chip:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}[type=checkbox]{position:absolute;display:block;height:1px;width:1px;border:0;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}[type=checkbox] *{overflow:hidden}[type=checkbox]:focus-visible{outline:none}[type=checkbox]:focus-visible+.c-chip{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}", z = ["default", "outline", "ghost", "translucent"], P = ["button", "checkbox"], a = {
|
|
16
16
|
variant: "default",
|
|
17
17
|
disabled: !1,
|
|
18
18
|
isSelected: !1,
|
|
@@ -26,7 +26,7 @@ var E = Object.defineProperty, O = Object.getOwnPropertyDescriptor, l = (i, r, t
|
|
|
26
26
|
return o && e && E(r, t, e), e;
|
|
27
27
|
};
|
|
28
28
|
const k = "pie-chip";
|
|
29
|
-
let c = class extends D(
|
|
29
|
+
let c = class extends D(g) {
|
|
30
30
|
constructor() {
|
|
31
31
|
super(...arguments), this.variant = a.variant, this.type = a.type, this.disabled = a.disabled, this.isSelected = a.isSelected, this.isLoading = a.isLoading, this.isDismissible = a.isDismissible;
|
|
32
32
|
}
|
|
@@ -88,13 +88,13 @@ let c = class extends D(u) {
|
|
|
88
88
|
data-test-id="chip-checkbox-input"
|
|
89
89
|
type="checkbox"
|
|
90
90
|
id="pie-chip"
|
|
91
|
-
aria-label="${
|
|
91
|
+
aria-label="${d(i == null ? void 0 : i.label)}"
|
|
92
92
|
?checked=${o}
|
|
93
93
|
?disabled=${t}
|
|
94
94
|
@change="${this._onCheckboxChange}"/>
|
|
95
95
|
<label
|
|
96
96
|
for="pie-chip"
|
|
97
|
-
class=${
|
|
97
|
+
class=${m(s)}
|
|
98
98
|
data-test-id="pie-chip">
|
|
99
99
|
${this._renderContent()}
|
|
100
100
|
</label>`;
|
|
@@ -117,12 +117,12 @@ let c = class extends D(u) {
|
|
|
117
117
|
<button
|
|
118
118
|
id="pie-chip"
|
|
119
119
|
type="button"
|
|
120
|
-
class=${
|
|
121
|
-
aria-busy="${
|
|
122
|
-
aria-haspopup="${
|
|
123
|
-
aria-expanded="${
|
|
120
|
+
class=${m(s)}
|
|
121
|
+
aria-busy="${d(e)}"
|
|
122
|
+
aria-haspopup="${d(i == null ? void 0 : i.haspopup)}"
|
|
123
|
+
aria-expanded="${d(i == null ? void 0 : i.expanded)}"
|
|
124
124
|
aria-pressed="${o}"
|
|
125
|
-
aria-label="${
|
|
125
|
+
aria-label="${d(i == null ? void 0 : i.label)}"
|
|
126
126
|
?disabled=${t}
|
|
127
127
|
data-test-id="pie-chip">
|
|
128
128
|
${this._renderContent()}
|
|
@@ -133,7 +133,7 @@ let c = class extends D(u) {
|
|
|
133
133
|
* @private
|
|
134
134
|
*/
|
|
135
135
|
_renderDismissible() {
|
|
136
|
-
var
|
|
136
|
+
var u, f;
|
|
137
137
|
const {
|
|
138
138
|
variant: i,
|
|
139
139
|
disabled: r,
|
|
@@ -147,10 +147,10 @@ let c = class extends D(u) {
|
|
|
147
147
|
"is-dismissible": s,
|
|
148
148
|
"is-disabled": r,
|
|
149
149
|
"is-loading": o
|
|
150
|
-
}, w = (
|
|
151
|
-
(r || e) && (
|
|
152
|
-
}, $ = (
|
|
153
|
-
|
|
150
|
+
}, w = (v) => {
|
|
151
|
+
(r || e) && (v.preventDefault(), v.stopPropagation());
|
|
152
|
+
}, $ = (v) => {
|
|
153
|
+
v.stopPropagation();
|
|
154
154
|
const C = new Event("close", { bubbles: !0, composed: !0 });
|
|
155
155
|
this.dispatchEvent(C);
|
|
156
156
|
};
|
|
@@ -158,15 +158,15 @@ let c = class extends D(u) {
|
|
|
158
158
|
<div
|
|
159
159
|
aria-busy="${o}"
|
|
160
160
|
aria-current="${t}"
|
|
161
|
-
aria-label="${
|
|
162
|
-
class=${
|
|
161
|
+
aria-label="${d((u = this.aria) == null ? void 0 : u.label)}"
|
|
162
|
+
class=${m(h)}
|
|
163
163
|
data-test-id="pie-chip"
|
|
164
164
|
@click=${w}>
|
|
165
165
|
${this._renderContent()}
|
|
166
166
|
${s ? p`<button
|
|
167
167
|
@click="${$}"
|
|
168
168
|
?disabled=${this.disabled}
|
|
169
|
-
aria-label="${
|
|
169
|
+
aria-label="${d((f = this.aria) == null ? void 0 : f.close)}"
|
|
170
170
|
class="c-chip-closeBtn"
|
|
171
171
|
data-test-id="chip-close-button">
|
|
172
172
|
<icon-close-circle-filled size="m"></icon-close-circle-filled>
|
|
@@ -179,27 +179,27 @@ let c = class extends D(u) {
|
|
|
179
179
|
};
|
|
180
180
|
c.styles = S(L);
|
|
181
181
|
l([
|
|
182
|
-
|
|
182
|
+
n({ type: String }),
|
|
183
183
|
y(k, z, a.variant)
|
|
184
184
|
], c.prototype, "variant", 2);
|
|
185
185
|
l([
|
|
186
|
-
|
|
186
|
+
n({ type: String }),
|
|
187
187
|
y(k, P, a.type)
|
|
188
188
|
], c.prototype, "type", 2);
|
|
189
189
|
l([
|
|
190
|
-
|
|
190
|
+
n({ type: Boolean, reflect: !0 })
|
|
191
191
|
], c.prototype, "disabled", 2);
|
|
192
192
|
l([
|
|
193
|
-
|
|
193
|
+
n({ type: Boolean, reflect: !0 })
|
|
194
194
|
], c.prototype, "isSelected", 2);
|
|
195
195
|
l([
|
|
196
|
-
|
|
196
|
+
n({ type: Boolean, reflect: !0 })
|
|
197
197
|
], c.prototype, "isLoading", 2);
|
|
198
198
|
l([
|
|
199
|
-
|
|
199
|
+
n({ type: Boolean })
|
|
200
200
|
], c.prototype, "isDismissible", 2);
|
|
201
201
|
l([
|
|
202
|
-
|
|
202
|
+
n({ type: Object })
|
|
203
203
|
], c.prototype, "aria", 2);
|
|
204
204
|
c = l([
|
|
205
205
|
B("pie-chip")
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-chip",
|
|
3
3
|
"description": "PIE Design System Chip built using Web Components",
|
|
4
|
-
"version": "0.15.
|
|
4
|
+
"version": "0.15.35",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -44,13 +44,13 @@
|
|
|
44
44
|
"license": "Apache-2.0",
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@justeattakeaway/pie-components-config": "0.21.3",
|
|
47
|
-
"@justeattakeaway/pie-css": "1.
|
|
48
|
-
"@justeattakeaway/pie-monorepo-utils": "0.9.
|
|
47
|
+
"@justeattakeaway/pie-css": "1.2.0",
|
|
48
|
+
"@justeattakeaway/pie-monorepo-utils": "0.9.5"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@justeattakeaway/pie-icons-webc": "1.25.
|
|
52
|
-
"@justeattakeaway/pie-spinner": "1.4.
|
|
53
|
-
"@justeattakeaway/pie-webc-core": "
|
|
51
|
+
"@justeattakeaway/pie-icons-webc": "1.25.1",
|
|
52
|
+
"@justeattakeaway/pie-spinner": "1.4.17",
|
|
53
|
+
"@justeattakeaway/pie-webc-core": "15.0.0"
|
|
54
54
|
},
|
|
55
55
|
"customElements": "custom-elements.json",
|
|
56
56
|
"sideEffects": [
|
package/src/chip.scss
CHANGED
|
@@ -47,6 +47,7 @@
|
|
|
47
47
|
font-weight: var(--dt-font-interactive-xs-weight);
|
|
48
48
|
|
|
49
49
|
@include p.interactive-states('--dt-color-interactive-secondary');
|
|
50
|
+
@include p.disable-pointer-events-in-slotted-icons;
|
|
50
51
|
|
|
51
52
|
&.c-chip--default {
|
|
52
53
|
// same as default styles
|
|
@@ -104,7 +105,7 @@
|
|
|
104
105
|
--chip-color: var(--dt-color-content-disabled-solid);
|
|
105
106
|
}
|
|
106
107
|
|
|
107
|
-
&.c-chip--outline,
|
|
108
|
+
&.c-chip--outline,
|
|
108
109
|
&.c-chip--translucent {
|
|
109
110
|
--chip-border-color: var(--dt-color-disabled-01);
|
|
110
111
|
}
|
|
@@ -141,19 +142,7 @@
|
|
|
141
142
|
}
|
|
142
143
|
|
|
143
144
|
[type="checkbox"] {
|
|
144
|
-
|
|
145
|
-
position: absolute;
|
|
146
|
-
width: 1px;
|
|
147
|
-
height: 1px;
|
|
148
|
-
padding: 0;
|
|
149
|
-
margin: -1px;
|
|
150
|
-
border: 0;
|
|
151
|
-
|
|
152
|
-
overflow: hidden;
|
|
153
|
-
white-space: nowrap;
|
|
154
|
-
|
|
155
|
-
clip: rect(0, 0, 0, 0);
|
|
156
|
-
clip-path: inset(50%);
|
|
145
|
+
@include p.visually-hidden;
|
|
157
146
|
|
|
158
147
|
&:focus-visible {
|
|
159
148
|
outline: none;
|