New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@justeattakeaway/pie-button

Package Overview
Dependencies
Maintainers
0
Versions
156
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@justeattakeaway/pie-button - npm Package Compare versions

Comparing version 0.0.0-snapshot-release-20240709100447 to 0.0.0-snapshot-release-20240829131029

136

custom-elements.json

@@ -17,2 +17,10 @@ {

"kind": "variable",
"name": "tags",
"type": {
"text": "['button', 'a']"
},
"default": "['button', 'a']"
},
{
"kind": "variable",
"name": "sizes",

@@ -86,3 +94,3 @@ "type": {

},
"default": "{\n size: 'medium',\n type: 'submit',\n variant: 'primary',\n iconPlacement: 'leading',\n disabled: false,\n isLoading: false,\n isFullWidth: false,\n isResponsive: false,\n}"
"default": "{\n tag: 'button',\n size: 'medium',\n type: 'submit',\n variant: 'primary',\n iconPlacement: 'leading',\n disabled: false,\n isLoading: false,\n isFullWidth: false,\n isResponsive: false,\n}"
}

@@ -93,2 +101,10 @@ ],

"kind": "js",
"name": "tags",
"declaration": {
"name": "tags",
"module": "src/defs.js"
}
},
{
"kind": "js",
"name": "sizes",

@@ -187,6 +203,9 @@ "declaration": {

"kind": "field",
"name": "tag",
"privacy": "public",
"attribute": "tag"
},
{
"kind": "field",
"name": "size",
"type": {
"text": "ButtonProps['size']"
},
"privacy": "public",

@@ -198,5 +217,2 @@ "attribute": "size"

"name": "type",
"type": {
"text": "ButtonProps['type']"
},
"privacy": "public",

@@ -208,5 +224,2 @@ "attribute": "type"

"name": "variant",
"type": {
"text": "ButtonProps['variant']"
},
"privacy": "public",

@@ -218,5 +231,2 @@ "attribute": "variant"

"name": "iconPlacement",
"type": {
"text": "ButtonProps['iconPlacement']"
},
"privacy": "public",

@@ -254,3 +264,3 @@ "attribute": "iconPlacement"

"type": {
"text": "string | undefined"
"text": "ButtonProps['name']"
},

@@ -264,3 +274,3 @@ "privacy": "public",

"type": {
"text": "string | undefined"
"text": "ButtonProps['value']"
},

@@ -319,3 +329,3 @@ "privacy": "public",

"type": {
"text": "ButtonProps['responsiveSize'] | undefined"
"text": "ButtonProps['responsiveSize']"
},

@@ -326,2 +336,29 @@ "privacy": "public",

{
"kind": "field",
"name": "href",
"type": {
"text": "ButtonProps['href']"
},
"privacy": "public",
"attribute": "href"
},
{
"kind": "field",
"name": "rel",
"type": {
"text": "ButtonProps['rel']"
},
"privacy": "public",
"attribute": "rel"
},
{
"kind": "field",
"name": "target",
"type": {
"text": "ButtonProps['target']"
},
"privacy": "public",
"attribute": "target"
},
{
"kind": "method",

@@ -363,2 +400,26 @@ "name": "_simulateNativeButtonClick",

"kind": "method",
"name": "renderAnchor",
"parameters": [
{
"name": "classes",
"type": {
"text": "ClassInfo"
}
}
]
},
{
"kind": "method",
"name": "renderButton",
"parameters": [
{
"name": "classes",
"type": {
"text": "ClassInfo"
}
}
]
},
{
"kind": "method",
"name": "focus"

@@ -369,6 +430,7 @@ }

{
"name": "tag",
"fieldName": "tag"
},
{
"name": "size",
"type": {
"text": "ButtonProps['size']"
},
"fieldName": "size"

@@ -378,5 +440,2 @@ },

"name": "type",
"type": {
"text": "ButtonProps['type']"
},
"fieldName": "type"

@@ -386,5 +445,2 @@ },

"name": "variant",
"type": {
"text": "ButtonProps['variant']"
},
"fieldName": "variant"

@@ -394,5 +450,2 @@ },

"name": "iconPlacement",
"type": {
"text": "ButtonProps['iconPlacement']"
},
"fieldName": "iconPlacement"

@@ -419,3 +472,3 @@ },

"type": {
"text": "string | undefined"
"text": "ButtonProps['name']"
},

@@ -427,3 +480,3 @@ "fieldName": "name"

"type": {
"text": "string | undefined"
"text": "ButtonProps['value']"
},

@@ -470,5 +523,26 @@ "fieldName": "value"

"type": {
"text": "ButtonProps['responsiveSize'] | undefined"
"text": "ButtonProps['responsiveSize']"
},
"fieldName": "responsiveSize"
},
{
"name": "href",
"type": {
"text": "ButtonProps['href']"
},
"fieldName": "href"
},
{
"name": "rel",
"type": {
"text": "ButtonProps['rel']"
},
"fieldName": "rel"
},
{
"name": "target",
"type": {
"text": "ButtonProps['target']"
},
"fieldName": "target"
}

@@ -475,0 +549,0 @@ ],

44

dist/index.d.ts

@@ -0,1 +1,2 @@

import { ClassInfo } from 'lit/directives/class-map.js';
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';

@@ -11,2 +12,6 @@ import type { CSSResult } from 'lit';

/**
* Which HTML element to use when rendering the button.
*/
tag?: typeof tags[number];
/**
* What size the button should be.

@@ -85,5 +90,20 @@ */

responsiveSize?: typeof responsiveSizes[number];
/**
* If the button is rendered as an anchor element, this attribute will be applied to the `href` attribute on the anchor.
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href)
*/
href?: string;
/**
* If the button is rendered as an anchor element, this attribute will be applied to the `rel` attribute on the anchor.
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
*/
rel?: string;
/**
* If the button is rendered as an anchor element, this attribute will be applied to the `target` attribute on the anchor.
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)
*/
target?: string;
}
export declare type DefaultProps = ComponentDefaultProps<ButtonProps, 'size' | 'type' | 'variant' | 'iconPlacement' | 'disabled' | 'isFullWidth' | 'isLoading' | 'isResponsive'>;
export declare type DefaultProps = ComponentDefaultProps<ButtonProps, 'tag' | 'size' | 'type' | 'variant' | 'iconPlacement' | 'disabled' | 'isFullWidth' | 'isLoading' | 'isResponsive'>;

@@ -109,6 +129,7 @@ export declare const defaultProps: DefaultProps;

updated(changedProperties: PropertyValues<this>): void;
size: ButtonProps['size'];
type: ButtonProps['type'];
variant: ButtonProps['variant'];
iconPlacement: ButtonProps['iconPlacement'];
tag: "button" | "a";
size: "xsmall" | "medium" | "large" | "small-productive" | "small-expressive";
type: "button" | "submit" | "reset";
variant: "secondary" | "inverse" | "primary" | "outline" | "outline-inverse" | "ghost" | "ghost-inverse" | "destructive" | "destructive-ghost";
iconPlacement: "leading" | "trailing";
disabled: boolean;

@@ -118,4 +139,4 @@ isLoading: boolean;

isResponsive: boolean;
name?: string;
value?: string;
name: ButtonProps['name'];
value: ButtonProps['value'];
formaction: ButtonProps['formaction'];

@@ -126,3 +147,6 @@ formenctype: ButtonProps['formenctype'];

formtarget: ButtonProps['formtarget'];
responsiveSize?: ButtonProps['responsiveSize'];
responsiveSize: ButtonProps['responsiveSize'];
href: ButtonProps['href'];
rel: ButtonProps['rel'];
target: ButtonProps['target'];
/**

@@ -145,2 +169,4 @@ * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.

private renderSpinner;
renderAnchor(classes: ClassInfo): TemplateResult<1>;
renderButton(classes: ClassInfo): TemplateResult<1>;
render(): TemplateResult<1>;

@@ -157,2 +183,4 @@ focus(): void;

export declare const tags: readonly ["button", "a"];
export declare const types: readonly ["submit", "button", "reset"];

@@ -159,0 +187,0 @@

726

dist/index.js

@@ -1,30 +0,10 @@

import { LitElement as Ct, html as P, nothing as K, unsafeCSS as Ft } from "lit";
import { property as m } from "lit/decorators.js";
import { ifDefined as Lt } from "lit/directives/if-defined.js";
import { FormControlMixin as St, validPropertyValues as O, defineCustomElement as At } from "@justeattakeaway/pie-webc-core";
import { LitElement as Ft, html as M, nothing as F, unsafeCSS as At } from "lit";
import { classMap as bt } from "lit/directives/class-map.js";
import { ifDefined as K } from "lit/directives/if-defined.js";
import { property as v } from "lit/decorators.js";
import { FormControlMixin as It, validPropertyValues as A, defineCustomElement as Tt } from "@justeattakeaway/pie-webc-core";
import "@justeattakeaway/pie-spinner";
const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Kt = ["productive", "expressive"], Tt = ["submit", "button", "reset"], Vt = [
"primary",
"secondary",
"outline",
"outline-inverse",
"ghost",
"inverse",
"ghost-inverse",
"destructive",
"destructive-ghost"
], Nt = ["leading", "trailing"], jt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Ut = ["post", "get", "dialog"], qt = ["_self", "_blank", "_parent", "_top"], b = {
size: "medium",
type: "submit",
variant: "primary",
iconPlacement: "leading",
disabled: !1,
isLoading: !1,
isFullWidth: !1,
isResponsive: !1
}, Pt = `*,*:after,*:before{box-sizing:inherit}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-l-family);--btn-font-weight: var(--dt-font-interactive-l-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--icon-display-override: block;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;-webkit-user-select:none;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-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)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-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)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-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)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-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)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]:not([disabled]){border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px}@media (min-width: 768px){.o-btn[size=xsmall][isResponsive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}.o-btn[size=xsmall][isResponsive][responsiveSize=expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}}.o-btn[size=small-expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-expressive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-productive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=medium]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}@media (min-width: 768px){.o-btn[size=medium][isResponsive]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=large]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}.o-btn[isLoading]>*:not(pie-spinner){visibility:hidden}.o-btn[isLoading] pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}
`;
(function() {
(function(k) {
const a = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), A = {
(function(E) {
const a = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), L = {
ariaAtomic: "aria-atomic",

@@ -72,13 +52,13 @@ ariaAutoComplete: "aria-autocomplete",

role: "role"
}, dt = (e, t) => {
for (let i in A) {
t[i] = null;
let r = null;
const o = A[i];
Object.defineProperty(t, i, {
}, vt = (e, t) => {
for (let o in L) {
t[o] = null;
let i = null;
const r = L[o];
Object.defineProperty(t, o, {
get() {
return r;
return i;
},
set(s) {
r = s, e.isConnected ? e.setAttribute(o, s) : L.set(e, t);
i = s, e.isConnected ? e.setAttribute(r, s) : I.set(e, t);
}

@@ -88,8 +68,8 @@ });

};
function J(e) {
const t = c.get(e), { form: i } = t;
et(e, i, t), tt(e, t.labels);
function Q(e) {
const t = c.get(e), { form: o } = t;
ot(e, o, t), et(e, t.labels);
}
const Q = (e, t = !1) => {
const i = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
const X = (e, t = !1) => {
const o = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
acceptNode(s) {

@@ -99,139 +79,139 @@ return c.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;

});
let r = i.nextNode();
const o = !t || e.disabled;
for (; r; )
r.formDisabledCallback && o && D(r, e.disabled), r = i.nextNode();
}, X = { attributes: !0, attributeFilter: ["disabled", "name"] }, I = N() ? new MutationObserver((e) => {
let i = o.nextNode();
const r = !t || e.disabled;
for (; i; )
i.formDisabledCallback && r && $(i, e.disabled), i = o.nextNode();
}, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, V = O() ? new MutationObserver((e) => {
for (const t of e) {
const i = t.target;
if (t.attributeName === "disabled" && (i.constructor.formAssociated ? D(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && Q(i)), t.attributeName === "name" && i.constructor.formAssociated) {
const r = c.get(i), o = F.get(i);
r.setFormValue(o);
const o = t.target;
if (t.attributeName === "disabled" && (o.constructor.formAssociated ? $(o, o.hasAttribute("disabled")) : o.localName === "fieldset" && X(o)), t.attributeName === "name" && o.constructor.formAssociated) {
const i = c.get(o), r = j.get(o);
i.setFormValue(r);
}
}
}) : {};
function R(e) {
function _(e) {
e.forEach((t) => {
const { addedNodes: i, removedNodes: r } = t, o = Array.from(i), s = Array.from(r);
o.forEach((l) => {
const { addedNodes: o, removedNodes: i } = t, r = Array.from(o), s = Array.from(i);
r.forEach((l) => {
var u;
if (c.has(l) && l.constructor.formAssociated && J(l), L.has(l)) {
const d = L.get(l);
Object.keys(A).filter((y) => d[y] !== null).forEach((y) => {
l.setAttribute(A[y], d[y]);
}), L.delete(l);
if (c.has(l) && l.constructor.formAssociated && Q(l), I.has(l)) {
const p = I.get(l);
Object.keys(L).filter((y) => p[y] !== null).forEach((y) => {
l.setAttribute(L[y], p[y]);
}), I.delete(l);
}
if (S.has(l)) {
const d = S.get(l);
l.setAttribute("internals-valid", d.validity.valid.toString()), l.setAttribute("internals-invalid", (!d.validity.valid).toString()), l.setAttribute("aria-invalid", (!d.validity.valid).toString()), S.delete(l);
if (T.has(l)) {
const p = T.get(l);
l.setAttribute("internals-valid", p.validity.valid.toString()), l.setAttribute("internals-invalid", (!p.validity.valid).toString()), l.setAttribute("aria-invalid", (!p.validity.valid).toString()), T.delete(l);
}
if (l.localName === "form") {
const d = g.get(l), E = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
const p = k.get(l), x = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
acceptNode(B) {
return c.has(B) && B.constructor.formAssociated && !(d && d.has(B)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
return c.has(B) && B.constructor.formAssociated && !(p && p.has(B)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
});
let y = E.nextNode();
let y = x.nextNode();
for (; y; )
J(y), y = E.nextNode();
Q(y), y = x.nextNode();
}
l.localName === "fieldset" && ((u = I.observe) === null || u === void 0 || u.call(I, l, X), Q(l, !0));
l.localName === "fieldset" && ((u = V.observe) === null || u === void 0 || u.call(V, l, Y), X(l, !0));
}), s.forEach((l) => {
const u = c.get(l);
u && h.get(u) && Y(u), z.has(l) && z.get(l).disconnect();
u && d.get(u) && Z(u), S.has(l) && S.get(l).disconnect();
});
});
}
function vt(e) {
function ht(e) {
e.forEach((t) => {
const { removedNodes: i } = t;
i.forEach((r) => {
const o = q.get(t.target);
c.has(r) && rt(r), o.disconnect();
const { removedNodes: o } = t;
o.forEach((i) => {
const r = G.get(t.target);
c.has(i) && rt(i), r.disconnect();
});
});
}
const ht = (e) => {
var t, i;
const r = new MutationObserver(vt);
!((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (i = r.observe) === null || i === void 0 || i.call(r, e, { childList: !0 }), q.set(e, r);
const pt = (e) => {
var t, o;
const i = new MutationObserver(ht);
!((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (o = i.observe) === null || o === void 0 || o.call(i, e, { childList: !0 }), G.set(e, i);
};
N() && new MutationObserver(R);
const _ = {
O() && new MutationObserver(_);
const R = {
childList: !0,
subtree: !0
}, D = (e, t) => {
}, $ = (e, t) => {
e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
}, Y = (e) => {
h.get(e).forEach((i) => {
i.remove();
}), h.set(e, []);
}, Z = (e, t) => {
const i = document.createElement("input");
return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), h.get(t).push(i), i;
}, Z = (e) => {
d.get(e).forEach((o) => {
o.remove();
}), d.set(e, []);
}, tt = (e, t) => {
const o = document.createElement("input");
return o.type = "hidden", o.name = e.getAttribute("name"), e.after(o), d.get(t).push(o), o;
}, mt = (e, t) => {
var i;
h.set(t, []), (i = I.observe) === null || i === void 0 || i.call(I, e, X);
}, tt = (e, t) => {
var o;
d.set(t, []), (o = V.observe) === null || o === void 0 || o.call(V, e, Y);
}, et = (e, t) => {
if (t.length) {
Array.from(t).forEach((r) => r.addEventListener("click", e.click.bind(e)));
let i = t[0].id;
t[0].id || (i = `${t[0].htmlFor}_Label`, t[0].id = i), e.setAttribute("aria-labelledby", i);
Array.from(t).forEach((i) => i.addEventListener("click", e.click.bind(e)));
let o = t[0].id;
t[0].id || (o = `${t[0].htmlFor}_Label`, t[0].id = o), e.setAttribute("aria-labelledby", o);
}
}, T = (e) => {
const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), i = g.get(e) || [], r = Array.from(i).filter((s) => s.isConnected).map((s) => c.get(s).validity.valid), o = [...t, ...r].includes(!1);
e.toggleAttribute("internals-invalid", o), e.toggleAttribute("internals-valid", !o);
}, pt = (e) => {
T(V(e.target));
}, N = (e) => {
const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), o = k.get(e) || [], i = Array.from(o).filter((s) => s.isConnected).map((s) => c.get(s).validity.valid), r = [...t, ...i].includes(!1);
e.toggleAttribute("internals-invalid", r), e.toggleAttribute("internals-valid", !r);
}, ut = (e) => {
T(V(e.target));
N(P(e.target));
}, ft = (e) => {
const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((i) => `${i}:not([disabled])`).map((i) => `${i}:not([form])${e.id ? `,${i}[form='${e.id}']` : ""}`).join(",");
e.addEventListener("click", (i) => {
if (i.target.closest(t)) {
const o = g.get(e);
N(P(e.target));
}, gt = (e) => {
const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((o) => `${o}:not([disabled])`).map((o) => `${o}:not([form])${e.id ? `,${o}[form='${e.id}']` : ""}`).join(",");
e.addEventListener("click", (o) => {
if (o.target.closest(t)) {
const r = k.get(e);
if (e.noValidate)
return;
o.size && Array.from(o).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && i.preventDefault();
r.size && Array.from(r).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && o.preventDefault();
}
});
}, bt = (e) => {
const t = g.get(e.target);
t && t.size && t.forEach((i) => {
i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
}, yt = (e) => {
const t = k.get(e.target);
t && t.size && t.forEach((o) => {
o.constructor.formAssociated && o.formResetCallback && o.formResetCallback.apply(o);
});
}, et = (e, t, i) => {
}, ot = (e, t, o) => {
if (t) {
const r = g.get(t);
if (r)
r.add(e);
const i = k.get(t);
if (i)
i.add(e);
else {
const o = /* @__PURE__ */ new Set();
o.add(e), g.set(t, o), ft(t), t.addEventListener("reset", bt), t.addEventListener("input", pt), t.addEventListener("change", ut);
const r = /* @__PURE__ */ new Set();
r.add(e), k.set(t, r), gt(t), t.addEventListener("reset", yt), t.addEventListener("input", ut), t.addEventListener("change", ft);
}
w.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
g.set(t, { ref: e, internals: o }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
e.formAssociatedCallback.apply(e, [t]);
}, 0), T(t);
}, 0), N(t);
}
}, V = (e) => {
}, P = (e) => {
let t = e.parentNode;
return t && t.tagName !== "FORM" && (t = V(t)), t;
}, x = (e, t, i = DOMException) => {
return t && t.tagName !== "FORM" && (t = P(t)), t;
}, w = (e, t, o = DOMException) => {
if (!e.constructor.formAssociated)
throw new i(t);
}, it = (e, t, i) => {
const r = g.get(e);
return r && r.size && r.forEach((o) => {
c.get(o)[i]() || (t = !1);
throw new o(t);
}, it = (e, t, o) => {
const i = k.get(e);
return i && i.size && i.forEach((r) => {
c.get(r)[o]() || (t = !1);
}), t;
}, rt = (e) => {
if (e.constructor.formAssociated) {
const t = c.get(e), { labels: i, form: r } = t;
tt(e, i), et(e, r, t);
const t = c.get(e), { labels: o, form: i } = t;
et(e, o), ot(e, i, t);
}
};
function N() {
function O() {
return typeof MutationObserver < "u";
}
class gt {
class wt {
constructor() {

@@ -241,12 +221,12 @@ this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);

}
const yt = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), wt = (e, t, i) => (e.valid = xt(t), Object.keys(t).forEach((r) => e[r] = t[r]), i && T(i), e), xt = (e) => {
const xt = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), Et = (e, t, o) => (e.valid = kt(t), Object.keys(t).forEach((i) => e[i] = t[i]), o && N(o), e), kt = (e) => {
let t = !0;
for (let i in e)
i !== "valid" && e[i] !== !1 && (t = !1);
for (let o in e)
o !== "valid" && e[o] !== !1 && (t = !1);
return t;
}, W = /* @__PURE__ */ new WeakMap();
function ot(e, t) {
}, D = /* @__PURE__ */ new WeakMap();
function nt(e, t) {
e.toggleAttribute(t, !0), e.part && e.part.add(t);
}
class $ extends Set {
class W extends Set {
static get isPolyfilled() {

@@ -258,3 +238,3 @@ return !0;

throw new TypeError("Illegal constructor");
W.set(this, t);
D.set(this, t);
}

@@ -264,6 +244,6 @@ add(t) {

throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
const i = super.add(t), r = W.get(this), o = `state${t}`;
return r.isConnected ? ot(r, o) : setTimeout(() => {
ot(r, o);
}), i;
const o = super.add(t), i = D.get(this), r = `state${t}`;
return i.isConnected ? nt(i, r) : setTimeout(() => {
nt(i, r);
}), o;
}

@@ -276,31 +256,31 @@ clear() {

delete(t) {
const i = super.delete(t), r = W.get(this);
return r.isConnected ? (r.toggleAttribute(`state${t}`, !1), r.part && r.part.remove(`state${t}`)) : setTimeout(() => {
r.toggleAttribute(`state${t}`, !1), r.part && r.part.remove(`state${t}`);
}), i;
const o = super.delete(t), i = D.get(this);
return i.isConnected ? (i.toggleAttribute(`state${t}`, !1), i.part && i.part.remove(`state${t}`)) : setTimeout(() => {
i.toggleAttribute(`state${t}`, !1), i.part && i.part.remove(`state${t}`);
}), o;
}
}
function at(e, t, i, r) {
if (i === "a" && !r)
function at(e, t, o, i) {
if (o === "a" && !i)
throw new TypeError("Private accessor was defined without a getter");
if (typeof t == "function" ? e !== t || !r : !t.has(e))
if (typeof t == "function" ? e !== t || !i : !t.has(e))
throw new TypeError("Cannot read private member from an object whose class did not declare it");
return i === "m" ? r : i === "a" ? r.call(e) : r ? r.value : t.get(e);
return o === "m" ? i : o === "a" ? i.call(e) : i ? i.value : t.get(e);
}
function Et(e, t, i, r, o) {
if (r === "m")
function Mt(e, t, o, i, r) {
if (i === "m")
throw new TypeError("Private method is not writable");
if (r === "a" && !o)
if (i === "a" && !r)
throw new TypeError("Private accessor was defined without a setter");
if (typeof t == "function" ? e !== t || !o : !t.has(e))
if (typeof t == "function" ? e !== t || !r : !t.has(e))
throw new TypeError("Cannot write private member to an object whose class did not declare it");
return r === "a" ? o.call(e, i) : o ? o.value = i : t.set(e, i), i;
return i === "a" ? r.call(e, o) : r ? r.value = o : t.set(e, o), o;
}
var M;
class kt {
var z;
class St {
constructor(t) {
M.set(this, void 0), Et(this, M, t, "f");
for (let i = 0; i < t.length; i++) {
let r = t[i];
this[i] = r, r.hasAttribute("name") && (this[r.getAttribute("name")] = r);
z.set(this, void 0), Mt(this, z, t, "f");
for (let o = 0; o < t.length; o++) {
let i = t[o];
this[o] = i, i.hasAttribute("name") && (this[i.getAttribute("name")] = i);
}

@@ -310,6 +290,6 @@ Object.freeze(this);

get length() {
return at(this, M, "f").length;
return at(this, z, "f").length;
}
[(M = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
return at(this, M, "f")[Symbol.iterator]();
[(z = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
return at(this, z, "f")[Symbol.iterator]();
}

@@ -323,27 +303,27 @@ item(t) {

}
function zt() {
function Ct() {
const e = HTMLFormElement.prototype.checkValidity;
HTMLFormElement.prototype.checkValidity = i;
HTMLFormElement.prototype.checkValidity = o;
const t = HTMLFormElement.prototype.reportValidity;
HTMLFormElement.prototype.reportValidity = r;
function i(...s) {
HTMLFormElement.prototype.reportValidity = i;
function o(...s) {
let l = e.apply(this, s);
return it(this, l, "checkValidity");
}
function r(...s) {
function i(...s) {
let l = t.apply(this, s);
return it(this, l, "reportValidity");
}
const { get: o } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
Object.defineProperty(HTMLFormElement.prototype, "elements", {
get(...s) {
const l = o.call(this, ...s), u = Array.from(g.get(this) || []);
const l = r.call(this, ...s), u = Array.from(k.get(this) || []);
if (u.length === 0)
return l;
const d = Array.from(l).concat(u).sort((E, y) => E.compareDocumentPosition ? E.compareDocumentPosition(y) & 2 ? 1 : -1 : 0);
return new kt(d);
const p = Array.from(l).concat(u).sort((x, y) => x.compareDocumentPosition ? x.compareDocumentPosition(y) & 2 ? 1 : -1 : 0);
return new St(p);
}
});
}
class nt {
class st {
static get isPolyfilled() {

@@ -355,12 +335,12 @@ return !0;

throw new TypeError("Illegal constructor");
const i = t.getRootNode(), r = new gt();
this.states = new $(t), a.set(this, t), n.set(this, r), c.set(t, this), dt(t, this), mt(t, this), Object.seal(this), i instanceof DocumentFragment && ht(i);
const o = t.getRootNode(), i = new wt();
this.states = new W(t), a.set(this, t), n.set(this, i), c.set(t, this), vt(t, this), mt(t, this), Object.seal(this), o instanceof DocumentFragment && pt(o);
}
checkValidity() {
const t = a.get(this);
if (x(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
if (w(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
return !0;
const i = n.get(this);
if (!i.valid) {
const r = new Event("invalid", {
const o = n.get(this);
if (!o.valid) {
const i = new Event("invalid", {
bubbles: !1,

@@ -370,77 +350,77 @@ cancelable: !0,

});
t.dispatchEvent(r);
t.dispatchEvent(i);
}
return i.valid;
return o.valid;
}
get form() {
const t = a.get(this);
x(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
let i;
return t.constructor.formAssociated === !0 && (i = V(t)), i;
w(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
let o;
return t.constructor.formAssociated === !0 && (o = P(t)), o;
}
get labels() {
const t = a.get(this);
x(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
const i = t.getAttribute("id"), r = t.getRootNode();
return r && i ? r.querySelectorAll(`[for="${i}"]`) : [];
w(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
const o = t.getAttribute("id"), i = t.getRootNode();
return i && o ? i.querySelectorAll(`[for="${o}"]`) : [];
}
reportValidity() {
const t = a.get(this);
if (x(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
if (w(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
return !0;
const i = this.checkValidity(), r = U.get(this);
if (r && !t.constructor.formAssociated)
const o = this.checkValidity(), i = q.get(this);
if (i && !t.constructor.formAssociated)
throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
return !i && r && (t.focus(), r.focus()), i;
return !o && i && (t.focus(), i.focus()), o;
}
setFormValue(t) {
const i = a.get(this);
if (x(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Y(this), t != null && !(t instanceof FormData)) {
if (i.getAttribute("name")) {
const r = Z(i, this);
r.value = t;
const o = a.get(this);
if (w(o, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Z(this), t != null && !(t instanceof FormData)) {
if (o.getAttribute("name")) {
const i = tt(o, this);
i.value = t;
}
} else
t != null && t instanceof FormData && Array.from(t).reverse().forEach(([r, o]) => {
if (typeof o == "string") {
const s = Z(i, this);
s.name = r, s.value = o;
t != null && t instanceof FormData && Array.from(t).reverse().forEach(([i, r]) => {
if (typeof r == "string") {
const s = tt(o, this);
s.name = i, s.value = r;
}
});
F.set(i, t);
j.set(o, t);
}
setValidity(t, i, r) {
const o = a.get(this);
if (x(o, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
setValidity(t, o, i) {
const r = a.get(this);
if (w(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
U.set(this, r);
q.set(this, i);
const s = n.get(this), l = {};
for (const E in t)
l[E] = t[E];
Object.keys(l).length === 0 && yt(s);
for (const x in t)
l[x] = t[x];
Object.keys(l).length === 0 && xt(s);
const u = Object.assign(Object.assign({}, s), l);
delete u.valid;
const { valid: d } = wt(s, u, this.form);
if (!d && !i)
const { valid: p } = Et(s, u, this.form);
if (!p && !o)
throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
f.set(this, d ? "" : i), o.isConnected ? (o.toggleAttribute("internals-invalid", !d), o.toggleAttribute("internals-valid", d), o.setAttribute("aria-invalid", `${!d}`)) : S.set(o, this);
m.set(this, p ? "" : o), r.isConnected ? (r.toggleAttribute("internals-invalid", !p), r.toggleAttribute("internals-valid", p), r.setAttribute("aria-invalid", `${!p}`)) : T.set(r, this);
}
get shadowRoot() {
const t = a.get(this), i = j.get(t);
return i || null;
const t = a.get(this), o = U.get(t);
return o || null;
}
get validationMessage() {
const t = a.get(this);
return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), f.get(this);
return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), m.get(this);
}
get validity() {
const t = a.get(this);
return x(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), n.get(this);
return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), n.get(this);
}
get willValidate() {
const t = a.get(this);
return x(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
return w(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
}
}
function Mt() {
function zt() {
if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)

@@ -455,3 +435,3 @@ return !1;

customElements.define(t, e);
const i = new e();
const o = new e();
return [

@@ -468,23 +448,23 @@ "shadowRoot",

"reportValidity"
].every((r) => r in i.internals);
].every((i) => i in o.internals);
}
let st = !1, lt = !1;
let lt = !1, ct = !1;
function H(e) {
lt || (lt = !0, window.CustomStateSet = $, e && (HTMLElement.prototype.attachInternals = function(...t) {
const i = e.call(this, t);
return i.states = new $(this), i;
ct || (ct = !0, window.CustomStateSet = W, e && (HTMLElement.prototype.attachInternals = function(...t) {
const o = e.call(this, t);
return o.states = new W(this), o;
}));
}
function ct(e = !0) {
if (!st) {
if (st = !0, typeof window < "u" && (window.ElementInternals = nt), typeof CustomElementRegistry < "u") {
function dt(e = !0) {
if (!lt) {
if (lt = !0, typeof window < "u" && (window.ElementInternals = st), typeof CustomElementRegistry < "u") {
const t = CustomElementRegistry.prototype.define;
CustomElementRegistry.prototype.define = function(i, r, o) {
if (r.formAssociated) {
const s = r.prototype.connectedCallback;
r.prototype.connectedCallback = function() {
G.has(this) || (G.set(this, !0), this.hasAttribute("disabled") && D(this, !0)), s != null && s.apply(this), rt(this);
CustomElementRegistry.prototype.define = function(o, i, r) {
if (i.formAssociated) {
const s = i.prototype.connectedCallback;
i.prototype.connectedCallback = function() {
J.has(this) || (J.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), s != null && s.apply(this), rt(this);
};
}
t.call(this, i, r, o);
t.call(this, o, i, r);
};

@@ -500,30 +480,52 @@ }

throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
return new nt(this);
return new st(this);
}), typeof Element < "u") {
let t = function(...r) {
const o = i.apply(this, r);
if (j.set(this, o), N()) {
const s = new MutationObserver(R);
window.ShadyDOM ? s.observe(this, _) : s.observe(o, _), z.set(this, s);
let t = function(...i) {
const r = o.apply(this, i);
if (U.set(this, r), O()) {
const s = new MutationObserver(_);
window.ShadyDOM ? s.observe(this, R) : s.observe(r, R), S.set(this, s);
}
return o;
return r;
};
const i = Element.prototype.attachShadow;
const o = Element.prototype.attachShadow;
Element.prototype.attachShadow = t;
}
N() && typeof document < "u" && new MutationObserver(R).observe(document.documentElement, _), typeof HTMLFormElement < "u" && zt(), (e || typeof window < "u" && !window.CustomStateSet) && H();
O() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, R), typeof HTMLFormElement < "u" && Ct(), (e || typeof window < "u" && !window.CustomStateSet) && H();
}
}
return !!customElements.polyfillWrapFlushCallback || (Mt() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : ct(!1)), k.forceCustomStateSetPolyfill = H, k.forceElementInternalsPolyfill = ct, Object.defineProperty(k, "__esModule", { value: !0 }), k;
return !!customElements.polyfillWrapFlushCallback || (zt() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : dt(!1)), E.forceCustomStateSetPolyfill = H, E.forceElementInternalsPolyfill = dt, Object.defineProperty(E, "__esModule", { value: !0 }), E;
})({});
})();
var Ot = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, p = (k, a, n, h) => {
for (var c = h > 1 ? void 0 : h ? Rt(a, n) : a, f = k.length - 1, w; f >= 0; f--)
(w = k[f]) && (c = (h ? w(a, n, c) : w(c)) || c);
return h && c && Ot(a, n, c), c;
const Lt = ["button", "a"], Vt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], qt = ["productive", "expressive"], Nt = ["submit", "button", "reset"], Pt = [
"primary",
"secondary",
"outline",
"outline-inverse",
"ghost",
"inverse",
"ghost-inverse",
"destructive",
"destructive-ghost"
], Ot = ["leading", "trailing"], Gt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Jt = ["post", "get", "dialog"], Qt = ["_self", "_blank", "_parent", "_top"], f = {
tag: "button",
size: "medium",
type: "submit",
variant: "primary",
iconPlacement: "leading",
disabled: !1,
isLoading: !1,
isFullWidth: !1,
isResponsive: !1
}, _t = `*,*:after,*:before{box-sizing:inherit}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-l-family);--btn-font-weight: var(--dt-font-interactive-l-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--icon-display-override: block;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;inline-size:var(--btn-inline-size)}.o-btn.o-btn--primary:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn.o-btn--primary:active:not(:disabled),.o-btn.o-btn--primary.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn.o-btn--primary.o-btn--xsmall,.o-btn.o-btn--primary.o-btn--small-productive{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn.o-btn--primary.o-btn--xsmall:hover:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-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)))}.o-btn.o-btn--primary.o-btn--xsmall:active:not(:disabled),.o-btn.o-btn--primary.o-btn--xsmall.is-loading:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.is-loading:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-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)))}@media (min-width: 769px){.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive,.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive{--btn-bg-color: var(--dt-color-interactive-brand)}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:hover:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive.is-loading:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}}.o-btn.o-btn--secondary{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--secondary:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-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)))}.o-btn.o-btn--secondary:active:not(:disabled),.o-btn.o-btn--secondary.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-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)))}.o-btn.o-btn--outline{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--outline:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn.o-btn--outline:active:not(:disabled),.o-btn.o-btn--outline.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn.o-btn--ghost{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn.o-btn--ghost:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn.o-btn--ghost:active:not(:disabled),.o-btn.o-btn--ghost.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn.o-btn--inverse{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--inverse:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn.o-btn--inverse:active:not(:disabled),.o-btn.o-btn--inverse.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn.o-btn--ghost-inverse,.o-btn.o-btn--outline-inverse{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn.o-btn--ghost-inverse:hover:not(:disabled),.o-btn.o-btn--outline-inverse:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn.o-btn--ghost-inverse:active:not(:disabled),.o-btn.o-btn--ghost-inverse.is-loading:not(:disabled),.o-btn.o-btn--outline-inverse:active:not(:disabled),.o-btn.o-btn--outline-inverse.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn.o-btn--outline-inverse:not([disabled]){border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--destructive{--btn-bg-color: var(--dt-color-support-error)}.o-btn.o-btn--destructive:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn.o-btn--destructive:active:not(:disabled),.o-btn.o-btn--destructive.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn.o-btn--destructive-ghost{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn.o-btn--destructive-ghost:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn.o-btn--destructive-ghost:active:not(:disabled),.o-btn.o-btn--destructive-ghost.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn.o-btn--xsmall{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px}@media (min-width: 769px){.o-btn.o-btn--xsmall.o-btn--responsive{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}.o-btn.o-btn--xsmall.o-btn--responsive.o-btn--expressive{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}}.o-btn.o-btn--small-expressive{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 769px){.o-btn.o-btn--small-expressive.o-btn--responsive{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn.o-btn--small-productive{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 769px){.o-btn.o-btn--small-productive.o-btn--responsive{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn.o-btn--medium{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}@media (min-width: 769px){.o-btn.o-btn--medium.o-btn--responsive{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn.o-btn--large{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}.o-btn.o-btn--fullWidth{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not(.o-btn--ghost,.o-btn--ghost-inverse,.o-btn--destructive-ghost){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled].o-btn--outline{border-color:var(--dt-color-disabled-01)!important}.o-btn.is-loading>*:not(pie-spinner){visibility:hidden}.o-btn.is-loading pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}
`;
var Rt = Object.defineProperty, $t = Object.getOwnPropertyDescriptor, h = (E, a, n, d) => {
for (var c = d > 1 ? void 0 : d ? $t(a, n) : a, m = E.length - 1, g; m >= 0; m--)
(g = E[m]) && (c = (d ? g(a, n, c) : g(c)) || c);
return d && c && Rt(a, n, c), c;
};
const C = "pie-button";
class v extends St(Ct) {
class b extends It(Ft) {
constructor() {
super(...arguments), this.size = b.size, this.type = b.type, this.variant = b.variant, this.iconPlacement = b.iconPlacement, this.disabled = b.disabled, this.isLoading = b.isLoading, this.isFullWidth = b.isFullWidth, this.isResponsive = b.isResponsive, this._handleFormKeyDown = (a) => {
super(...arguments), this.tag = f.tag, this.size = f.size, this.type = f.type, this.variant = f.variant, this.iconPlacement = f.iconPlacement, this.disabled = f.disabled, this.isLoading = f.isLoading, this.isFullWidth = f.isFullWidth, this.isResponsive = f.isResponsive, this._handleFormKeyDown = (a) => {
if (!(a.key !== "Enter" || this.type !== "submit" || this.disabled)) {

@@ -548,4 +550,4 @@ if (a.target instanceof HTMLElement) {

updated(a) {
var n, h;
super.updated(a), a.has("type") && (this.type === "submit" ? (n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown) : (h = this.form) == null || h.removeEventListener("keydown", this._handleFormKeyDown));
var n, d;
a.has("type") && (this.type === "submit" ? (n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown) : (d = this.form) == null || d.removeEventListener("keydown", this._handleFormKeyDown));
}

@@ -567,3 +569,3 @@ /**

_handleClick() {
!this.isLoading && this.form && (this.type === "submit" && (this.formnovalidate || this.form.reportValidity()) && this._simulateNativeButtonClick("submit"), this.type === "reset" && this._simulateNativeButtonClick("reset"));
this.form && (this.isLoading || this.tag === "button" && (this.type === "submit" ? (this.formnovalidate || this.form.reportValidity()) && this._simulateNativeButtonClick("submit") : this.type === "reset" && this._simulateNativeButtonClick("reset")));
}

@@ -576,40 +578,68 @@ /**

renderSpinner() {
const { size: a, variant: n, disabled: h } = this, c = a && a.includes("small") ? "small" : "medium";
let f;
return h ? f = n === "ghost-inverse" ? "inverse" : "secondary" : f = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", P`
<pie-spinner
size="${c}"
variant="${f}">
</pie-spinner>`;
const { size: a, variant: n, disabled: d } = this, c = a && a.includes("small") ? "small" : "medium";
let m;
return d ? m = n === "ghost-inverse" ? "inverse" : "secondary" : m = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", M`
<pie-spinner
size="${c}"
variant="${m}">
</pie-spinner>`;
}
render() {
renderAnchor(a) {
const {
type: a,
href: n,
iconPlacement: d,
rel: c,
target: m
} = this;
return M`
<a
href="${K(n)}"
rel="${K(c)}"
target="${K(m)}"
class="${bt(a)}">
${d === "leading" ? M`<slot name="icon"></slot>` : F}
<slot></slot>
${d === "trailing" ? M`<slot name="icon"></slot>` : F}
</a>`;
}
renderButton(a) {
const {
disabled: n,
isFullWidth: h,
variant: c,
size: f,
isLoading: w,
isResponsive: z,
iconPlacement: g,
responsiveSize: F
} = this;
return P`
iconPlacement: d,
isLoading: c,
type: m
} = this, g = {
...a,
"is-loading": c
};
return M`
<button
@click=${this._handleClick}
class="o-btn"
type=${a || "submit"}
variant=${c || "primary"}
size=${f || "medium"}
responsiveSize=${Lt(F)}
?disabled=${n}
?isFullWidth=${h}
?isResponsive=${z}
?isLoading=${w}>
${w ? this.renderSpinner() : K}
${g === "leading" ? P`<slot name="icon"></slot>` : K}
class=${bt(g)}
type=${m}
?disabled=${n}>
${c ? this.renderSpinner() : F}
${d === "leading" ? M`<slot name="icon"></slot>` : F}
<slot></slot>
${g === "trailing" ? P`<slot name="icon"></slot>` : K}
${d === "trailing" ? M`<slot name="icon"></slot>` : F}
</button>`;
}
render() {
const {
isFullWidth: a,
isResponsive: n,
responsiveSize: d,
size: c,
tag: m,
variant: g
} = this, S = {
"o-btn": !0,
"o-btn--fullWidth": a,
"o-btn--responsive": n,
[`o-btn--${d}`]: !!(n && d),
[`o-btn--${g}`]: !0,
[`o-btn--${c}`]: !0
};
return m === "a" ? this.renderAnchor(S) : this.renderButton(S);
}
focus() {

@@ -620,67 +650,81 @@ var a, n;

}
v.styles = Ft(Pt);
p([
m(),
O(C, It, b.size)
], v.prototype, "size", 2);
p([
m(),
O(C, Tt, b.type)
], v.prototype, "type", 2);
p([
m(),
O(C, Vt, b.variant)
], v.prototype, "variant", 2);
p([
m({ type: String }),
O(C, Nt, b.iconPlacement)
], v.prototype, "iconPlacement", 2);
p([
m({ type: Boolean })
], v.prototype, "disabled", 2);
p([
m({ type: Boolean, reflect: !0 })
], v.prototype, "isLoading", 2);
p([
m({ type: Boolean })
], v.prototype, "isFullWidth", 2);
p([
m({ type: Boolean })
], v.prototype, "isResponsive", 2);
p([
m({ type: String })
], v.prototype, "name", 2);
p([
m({ type: String })
], v.prototype, "value", 2);
p([
m()
], v.prototype, "formaction", 2);
p([
m()
], v.prototype, "formenctype", 2);
p([
m()
], v.prototype, "formmethod", 2);
p([
m({ type: Boolean })
], v.prototype, "formnovalidate", 2);
p([
m()
], v.prototype, "formtarget", 2);
p([
m({ type: String })
], v.prototype, "responsiveSize", 2);
At(C, v);
b.styles = At(_t);
h([
v({ type: String }),
A(C, Lt, f.tag)
], b.prototype, "tag", 2);
h([
v({ type: String }),
A(C, Vt, f.size)
], b.prototype, "size", 2);
h([
v({ type: String }),
A(C, Nt, f.type)
], b.prototype, "type", 2);
h([
v({ type: String }),
A(C, Pt, f.variant)
], b.prototype, "variant", 2);
h([
v({ type: String }),
A(C, Ot, f.iconPlacement)
], b.prototype, "iconPlacement", 2);
h([
v({ type: Boolean })
], b.prototype, "disabled", 2);
h([
v({ type: Boolean, reflect: !0 })
], b.prototype, "isLoading", 2);
h([
v({ type: Boolean })
], b.prototype, "isFullWidth", 2);
h([
v({ type: Boolean })
], b.prototype, "isResponsive", 2);
h([
v({ type: String })
], b.prototype, "name", 2);
h([
v({ type: String })
], b.prototype, "value", 2);
h([
v({ type: String })
], b.prototype, "formaction", 2);
h([
v({ type: String })
], b.prototype, "formenctype", 2);
h([
v({ type: String })
], b.prototype, "formmethod", 2);
h([
v({ type: Boolean })
], b.prototype, "formnovalidate", 2);
h([
v({ type: String })
], b.prototype, "formtarget", 2);
h([
v({ type: String })
], b.prototype, "responsiveSize", 2);
h([
v({ type: String })
], b.prototype, "href", 2);
h([
v({ type: String })
], b.prototype, "rel", 2);
h([
v({ type: String })
], b.prototype, "target", 2);
Tt(C, b);
export {
v as PieButton,
b as defaultProps,
jt as formEncodingtypes,
Ut as formMethodTypes,
qt as formTargetTypes,
Nt as iconPlacements,
Kt as responsiveSizes,
It as sizes,
Tt as types,
Vt as variants
b as PieButton,
f as defaultProps,
Gt as formEncodingtypes,
Jt as formMethodTypes,
Qt as formTargetTypes,
Ot as iconPlacements,
qt as responsiveSizes,
Vt as sizes,
Lt as tags,
Nt as types,
Pt as variants
};

44

dist/react.d.ts

@@ -0,1 +1,2 @@

import { ClassInfo } from 'lit/directives/class-map.js';
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';

@@ -12,2 +13,6 @@ import type { CSSResult } from 'lit';

/**
* Which HTML element to use when rendering the button.
*/
tag?: typeof tags[number];
/**
* What size the button should be.

@@ -86,5 +91,20 @@ */

responsiveSize?: typeof responsiveSizes[number];
/**
* If the button is rendered as an anchor element, this attribute will be applied to the `href` attribute on the anchor.
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href)
*/
href?: string;
/**
* If the button is rendered as an anchor element, this attribute will be applied to the `rel` attribute on the anchor.
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
*/
rel?: string;
/**
* If the button is rendered as an anchor element, this attribute will be applied to the `target` attribute on the anchor.
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)
*/
target?: string;
}
export declare type DefaultProps = ComponentDefaultProps<ButtonProps, 'size' | 'type' | 'variant' | 'iconPlacement' | 'disabled' | 'isFullWidth' | 'isLoading' | 'isResponsive'>;
export declare type DefaultProps = ComponentDefaultProps<ButtonProps, 'tag' | 'size' | 'type' | 'variant' | 'iconPlacement' | 'disabled' | 'isFullWidth' | 'isLoading' | 'isResponsive'>;

@@ -112,6 +132,7 @@ export declare const defaultProps: DefaultProps;

updated(changedProperties: PropertyValues<this>): void;
size: ButtonProps['size'];
type: ButtonProps['type'];
variant: ButtonProps['variant'];
iconPlacement: ButtonProps['iconPlacement'];
tag: "button" | "a";
size: "xsmall" | "medium" | "large" | "small-productive" | "small-expressive";
type: "button" | "submit" | "reset";
variant: "secondary" | "inverse" | "primary" | "outline" | "outline-inverse" | "ghost" | "ghost-inverse" | "destructive" | "destructive-ghost";
iconPlacement: "leading" | "trailing";
disabled: boolean;

@@ -121,4 +142,4 @@ isLoading: boolean;

isResponsive: boolean;
name?: string;
value?: string;
name: ButtonProps['name'];
value: ButtonProps['value'];
formaction: ButtonProps['formaction'];

@@ -129,3 +150,6 @@ formenctype: ButtonProps['formenctype'];

formtarget: ButtonProps['formtarget'];
responsiveSize?: ButtonProps['responsiveSize'];
responsiveSize: ButtonProps['responsiveSize'];
href: ButtonProps['href'];
rel: ButtonProps['rel'];
target: ButtonProps['target'];
/**

@@ -148,2 +172,4 @@ * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.

private renderSpinner;
renderAnchor(classes: ClassInfo): TemplateResult<1>;
renderButton(classes: ClassInfo): TemplateResult<1>;
render(): TemplateResult<1>;

@@ -162,2 +188,4 @@ focus(): void;

export declare const tags: readonly ["button", "a"];
export declare const types: readonly ["submit", "button", "reset"];

@@ -164,0 +192,0 @@

28

dist/react.js
import * as t from "react";
import { createComponent as e } from "@lit/react";
import { PieButton as o } from "./index.js";
import { defaultProps as l, formEncodingtypes as y, formMethodTypes as B, formTargetTypes as d, iconPlacements as g, responsiveSizes as v, sizes as T, types as x, variants as z } from "./index.js";
import { defaultProps as y, formEncodingtypes as B, formMethodTypes as d, formTargetTypes as g, iconPlacements as v, responsiveSizes as T, sizes as x, tags as z, types as C, variants as N } from "./index.js";
import "lit";
import "lit/directives/class-map.js";
import "lit/directives/if-defined.js";
import "lit/decorators.js";
import "lit/directives/if-defined.js";
import "@justeattakeaway/pie-webc-core";

@@ -16,14 +17,15 @@ import "@justeattakeaway/pie-spinner";

events: {}
}), f = r;
}), u = r;
export {
f as PieButton,
l as defaultProps,
y as formEncodingtypes,
B as formMethodTypes,
d as formTargetTypes,
g as iconPlacements,
v as responsiveSizes,
T as sizes,
x as types,
z as variants
u as PieButton,
y as defaultProps,
B as formEncodingtypes,
d as formMethodTypes,
g as formTargetTypes,
v as iconPlacements,
T as responsiveSizes,
x as sizes,
z as tags,
C as types,
N as variants
};

9

package.json
{
"name": "@justeattakeaway/pie-button",
"version": "0.0.0-snapshot-release-20240709100447",
"version": "0.0.0-snapshot-release-20240829131029",
"description": "PIE design system button built using web components",

@@ -39,3 +39,4 @@ "type": "module",

"@custom-elements-manifest/analyzer": "0.9.0",
"@justeattakeaway/pie-components-config": "0.16.0",
"@justeattakeaway/pie-components-config": "0.18.0",
"@justeattakeaway/pie-css": "0.12.1",
"@justeattakeaway/pie-wrapper-react": "0.14.1",

@@ -52,6 +53,6 @@ "cem-plugin-module-file-extensions": "0.0.5"

"dependencies": {
"@justeattakeaway/pie-spinner": "0.0.0-snapshot-release-20240709100447",
"@justeattakeaway/pie-webc-core": "0.0.0-snapshot-release-20240709100447",
"@justeattakeaway/pie-spinner": "0.6.7",
"@justeattakeaway/pie-webc-core": "0.24.0",
"element-internals-polyfill": "1.3.11"
}
}

33

src/defs.ts
import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
export const tags = ['button', 'a'] as const;
export const sizes = ['xsmall', 'small-productive', 'small-expressive', 'medium', 'large'] as const;

@@ -20,5 +21,11 @@ export const responsiveSizes = ['productive', 'expressive'] as const;

/**
* Which HTML element to use when rendering the button.
*/
tag?: typeof tags[number];
/**
* What size the button should be.
*/
size?: typeof sizes[number];
/**

@@ -28,2 +35,3 @@ * What type attribute should be applied to the button. For example submit, button.

type?: typeof types[number];
/**

@@ -33,2 +41,3 @@ * What style variant the button should be such as primary, outline or ghost.

variant?: Variant;
/**

@@ -38,2 +47,3 @@ * The placement of the icon slot, if provided, such as leading or trailing

iconPlacement?: typeof iconPlacements[number];
/**

@@ -43,2 +53,3 @@ * When true, the button element is disabled.

disabled?: boolean;
/**

@@ -48,2 +59,3 @@ * When true, the button element will occupy the full width of its container.

isFullWidth?: boolean;
/**

@@ -108,7 +120,26 @@ * When true, displays a loading indicator inside the button.

responsiveSize?: typeof responsiveSizes[number];
/**
* If the button is rendered as an anchor element, this attribute will be applied to the `href` attribute on the anchor.
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href)
*/
href?: string;
/**
* If the button is rendered as an anchor element, this attribute will be applied to the `rel` attribute on the anchor.
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
*/
rel?: string;
/**
* If the button is rendered as an anchor element, this attribute will be applied to the `target` attribute on the anchor.
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)
*/
target?: string;
}
export type DefaultProps = ComponentDefaultProps<ButtonProps, 'size' | 'type' | 'variant' | 'iconPlacement' | 'disabled' | 'isFullWidth' | 'isLoading' | 'isResponsive'>;
export type DefaultProps = ComponentDefaultProps<ButtonProps, 'tag' | 'size' | 'type' | 'variant' | 'iconPlacement' | 'disabled' | 'isFullWidth' | 'isLoading' | 'isResponsive'>;
export const defaultProps: DefaultProps = {
tag: 'button',
size: 'medium',

@@ -115,0 +146,0 @@ type: 'submit',

161

src/index.ts
import {
LitElement, html, unsafeCSS, nothing, PropertyValues, TemplateResult,
LitElement, html, unsafeCSS, nothing, type PropertyValues, type TemplateResult,
} from 'lit';
import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import 'element-internals-polyfill';
import { validPropertyValues, defineCustomElement, FormControlMixin } from '@justeattakeaway/pie-webc-core';
import '@justeattakeaway/pie-spinner';
import { type SpinnerProps } from '@justeattakeaway/pie-spinner';
import {
ButtonProps, sizes, types, variants, iconPlacements, defaultProps,
type ButtonProps, defaultProps, iconPlacements, sizes, tags, types, variants,
} from './defs';
import styles from './button.scss?inline';
import 'element-internals-polyfill';
import '@justeattakeaway/pie-spinner';

@@ -42,4 +47,2 @@ // Valid values available to consumers

updated (changedProperties: PropertyValues<this>): void {
super.updated(changedProperties);
if (changedProperties.has('type')) {

@@ -55,17 +58,21 @@ // If the new type is "submit", add the keydown event listener

@property()
@property({ type: String })
@validPropertyValues(componentSelector, tags, defaultProps.tag)
public tag = defaultProps.tag;
@property({ type: String })
@validPropertyValues(componentSelector, sizes, defaultProps.size)
public size: ButtonProps['size'] = defaultProps.size;
public size = defaultProps.size;
@property()
@property({ type: String })
@validPropertyValues(componentSelector, types, defaultProps.type)
public type: ButtonProps['type'] = defaultProps.type;
public type = defaultProps.type;
@property()
@property({ type: String })
@validPropertyValues(componentSelector, variants, defaultProps.variant)
public variant: ButtonProps['variant'] = defaultProps.variant;
public variant = defaultProps.variant;
@property({ type: String })
@validPropertyValues(componentSelector, iconPlacements, defaultProps.iconPlacement)
public iconPlacement: ButtonProps['iconPlacement'] = defaultProps.iconPlacement;
public iconPlacement = defaultProps.iconPlacement;

@@ -85,14 +92,14 @@ @property({ type: Boolean })

@property({ type: String })
public name?: string;
public name: ButtonProps['name'];
@property({ type: String })
public value?: string;
public value: ButtonProps['value'];
@property()
@property({ type: String })
public formaction: ButtonProps['formaction'];
@property()
@property({ type: String })
public formenctype: ButtonProps['formenctype'];
@property()
@property({ type: String })
public formmethod: ButtonProps['formmethod'];

@@ -103,8 +110,17 @@

@property()
@property({ type: String })
public formtarget: ButtonProps['formtarget'];
@property({ type: String })
public responsiveSize?: ButtonProps['responsiveSize'];
public responsiveSize: ButtonProps['responsiveSize'];
@property({ type: String })
public href: ButtonProps['href'];
@property({ type: String })
public rel: ButtonProps['rel'];
@property({ type: String })
public target: ButtonProps['target'];
/**

@@ -164,13 +180,13 @@ * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.

private _handleClick () {
if (!this.isLoading && this.form) {
if (this.type === 'submit') {
// only submit the form if either formnovalidate is set, or the form passes validation checks (triggers native form validation)
if (this.formnovalidate || this.form.reportValidity()) {
this._simulateNativeButtonClick('submit');
}
}
if (!this.form) return;
if (this.isLoading) return;
if (this.tag !== 'button') return;
if (this.type === 'reset') {
this._simulateNativeButtonClick('reset');
if (this.type === 'submit') {
// only submit the form if either formnovalidate is set, or the form passes validation checks (triggers native form validation)
if (this.formnovalidate || this.form.reportValidity()) {
this._simulateNativeButtonClick('submit');
}
} else if (this.type === 'reset') {
this._simulateNativeButtonClick('reset');
}

@@ -205,4 +221,5 @@ }

const { size, variant, disabled } = this;
const spinnerSize = size && size.includes('small') ? 'small' : 'medium'; // includes("small") matches for any small size value and xsmall
let spinnerVariant;
const spinnerSize: SpinnerProps['size'] = size && size.includes('small') ? 'small' : 'medium'; // includes("small") matches for any small size value and xsmall
let spinnerVariant: SpinnerProps['variant'];
if (disabled) {

@@ -216,33 +233,41 @@ spinnerVariant = variant === 'ghost-inverse' ? 'inverse' : 'secondary';

return html`
<pie-spinner
size="${spinnerSize}"
variant="${spinnerVariant}">
</pie-spinner>`;
<pie-spinner
size="${spinnerSize}"
variant="${spinnerVariant}">
</pie-spinner>`;
}
render () {
renderAnchor (classes: ClassInfo) {
const {
type,
disabled,
isFullWidth,
variant,
size,
isLoading,
isResponsive,
iconPlacement,
responsiveSize,
href, iconPlacement, rel, target,
} = this;
return html`
<a
href="${ifDefined(href)}"
rel="${ifDefined(rel)}"
target="${ifDefined(target)}"
class="${classMap(classes)}">
${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
<slot></slot>
${iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}
</a>`;
}
renderButton (classes: ClassInfo) {
const {
disabled, iconPlacement, isLoading, type,
} = this;
const buttonClasses = {
...classes,
'is-loading': isLoading,
};
return html`
<button
@click=${this._handleClick}
class="o-btn"
type=${type || 'submit'}
variant=${variant || 'primary'}
size=${size || 'medium'}
responsiveSize=${ifDefined(responsiveSize)}
?disabled=${disabled}
?isFullWidth=${isFullWidth}
?isResponsive=${isResponsive}
?isLoading=${isLoading}>
class=${classMap(buttonClasses)}
type=${type}
?disabled=${disabled}>
${isLoading ? this.renderSpinner() : nothing}

@@ -255,2 +280,28 @@ ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}

render () {
const {
isFullWidth,
isResponsive,
responsiveSize,
size,
tag,
variant,
} = this;
const classes = {
'o-btn': true,
'o-btn--fullWidth': isFullWidth,
'o-btn--responsive': isResponsive,
[`o-btn--${responsiveSize}`]: Boolean(isResponsive && responsiveSize),
[`o-btn--${variant}`]: true,
[`o-btn--${size}`]: true,
};
if (tag === 'a') {
return this.renderAnchor(classes);
}
return this.renderButton(classes);
}
focus () {

@@ -257,0 +308,0 @@ this.shadowRoot?.querySelector('button')?.focus();

src/button.scss

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc