@felleslosninger/minid-elements 0.0.101 → 0.0.102
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.
|
@@ -48,7 +48,9 @@ export declare class MinidButton extends MinidButton_base {
|
|
|
48
48
|
* @ignore
|
|
49
49
|
*/
|
|
50
50
|
get isLink(): boolean;
|
|
51
|
-
|
|
51
|
+
click(): void;
|
|
52
|
+
blur(): void;
|
|
53
|
+
focus(options?: FocusOptions): void;
|
|
52
54
|
render(): import('lit-html').TemplateResult;
|
|
53
55
|
}
|
|
54
56
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../src/components/button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAOtC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,WAAW,CAAC;KAC3B;CACF;;AAUD;;GAEG;AACH,qBACa,WAAY,SAAQ,gBAEhC;IAEC,MAAM,EAAG,iBAAiB,GAAG,eAAe,CAAC;IAE7C;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAa;IAE1D;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;OAEG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,UAAS;IAGhB,WAAW,SAAM;IAEjB;;OAEG;IAEH,UAAU,UAAS;IAEnB,WAAW;IASX;;OAEG;IACH,IAAI,MAAM,YAET;IAED,KAAK;
|
|
1
|
+
{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../src/components/button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAOtC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,WAAW,CAAC;KAC3B;CACF;;AAUD;;GAEG;AACH,qBACa,WAAY,SAAQ,gBAEhC;IAEC,MAAM,EAAG,iBAAiB,GAAG,eAAe,CAAC;IAE7C;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAa;IAE1D;;OAEG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;OAEG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,UAAS;IAGhB,WAAW,SAAM;IAEjB;;OAEG;IAEH,UAAU,UAAS;IAEnB,WAAW;IASX;;OAEG;IACH,IAAI,MAAM,YAET;IAED,KAAK;IAIL,IAAI;IAIJ,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAInB,MAAM;CAqEhB"}
|
|
@@ -51,8 +51,14 @@ let MinidButton = class extends FormControllerMixin(
|
|
|
51
51
|
get isLink() {
|
|
52
52
|
return !!this.href;
|
|
53
53
|
}
|
|
54
|
-
|
|
55
|
-
this.button.
|
|
54
|
+
click() {
|
|
55
|
+
this.button.click();
|
|
56
|
+
}
|
|
57
|
+
blur() {
|
|
58
|
+
this.button.blur();
|
|
59
|
+
}
|
|
60
|
+
focus(options) {
|
|
61
|
+
this.button.focus(options);
|
|
56
62
|
}
|
|
57
63
|
render() {
|
|
58
64
|
const tag = this.isLink ? literal`a` : literal`button`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../src/components/button.component.ts"],"sourcesContent":["import { css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { html, literal } from 'lit/static-html.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { FormControllerMixin } from '../mixins/form-controller.mixin.ts';\nimport './spinner.component.ts';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'mid-button': MinidButton;\n }\n}\n\nconst styles = [\n css`\n :host {\n display: inline-flex;\n }\n `,\n];\n\n/**\n * A regular old button\n */\n@customElement('mid-button')\nexport class MinidButton extends FormControllerMixin(\n styled(LitElement, styles)\n) {\n @query('.button')\n button!: HTMLButtonElement | HTMLLinkElement;\n\n /**\n * The value of the button (optional)\n */\n @property({ type: String })\n value = '';\n\n /**\n * The variant of the button\n */\n @property({ type: String })\n variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n /**\n * The size of the button. Defaults to 'md'\n */\n @property({ type: String })\n size: 'md' | 'lg' | 'sm' = 'md';\n\n /**\n * The type of the button. Defaults to normal 'button'\n */\n @property({ type: String })\n type: 'submit' | 'button' | 'reset' = 'button';\n\n /**\n * The href of the button. If set, the button will be rendered as an anchor tag\n */\n @property({ type: String })\n href: string | undefined;\n\n /**\n * Whether the button is disabled\n */\n @property({ type: Boolean })\n disabled = false;\n\n /**\n *\n */\n @property({ type: Boolean })\n loading = false;\n\n @property()\n loadingtext = '';\n\n /**\n * Toggle icon only styling\n */\n @property({ type: Boolean })\n iconstyled = false;\n\n handleClick() {\n if (this.type === 'submit') {\n this.value && this.setFormValue(this.value);\n this.internals.form!.requestSubmit();\n } else if (this.type === 'reset') {\n this.internals.form!.reset();\n }\n }\n\n /**\n * @ignore\n */\n get isLink() {\n return !!this.href;\n }\n\n focus() {\n this.button.focus();\n }\n\n override render() {\n const tag = this.isLink ? literal`a` : literal`button`;\n const primary = this.variant === 'primary';\n const secondary = this.variant === 'secondary';\n const tertiary = this.variant === 'tertiary';\n const sm = this.size === 'sm';\n const md = this.size === 'md';\n const lg = this.size === 'lg';\n const spinnerOnly = this.loading && !this.loadingtext;\n\n return html`<${tag}\n part=\"base\"\n class=\"${classMap({\n button: true,\n 'w-12': this.iconstyled,\n 'h-12': this.iconstyled,\n 'py-2': !this.iconstyled,\n 'px-4': !this.iconstyled,\n 'bg-accent-base': primary,\n 'text-accent-base-contrast': primary,\n 'border-transparent': primary || tertiary,\n 'hover:bg-accent-base-hover': primary,\n 'active:bg-accent-base-active': primary,\n 'bg-transparent': secondary || tertiary,\n 'active:bg-accent-surface-active': secondary || tertiary,\n 'hover:bg-accent-surface-hover': secondary || tertiary,\n 'text-accent-subtle': secondary || tertiary,\n 'hover:text-accent': secondary || tertiary,\n 'border-accent-strong': secondary,\n 'text-body-sm': sm,\n 'text-body-md': md,\n 'text-body-lg': lg,\n 'cursor-wait': this.loading && !this.disabled,\n 'cursor-pointer': !this.loading && !this.disabled,\n 'cursor-not-allowed': this.disabled,\n relative: spinnerOnly,\n 'gap-0': spinnerOnly,\n 'opacity-disabled': this.disabled && !this.loading,\n })} grow focus-visible:focus-ring leading-sm flex h-fit min-h-12 min-w-12 items-center justify-center gap-2 rounded border font-medium\"\n type=${this.type}\n aria-busy=${this.loading}\n ?disabled=${this.disabled}\n href=\"${ifDefined(this.href)}\"\n @click=\"${this.handleClick}\"\n >\n <slot\n class=\"${classMap({\n invisible: spinnerOnly,\n hidden: this.loading && this.loadingtext,\n })}\"\n ></slot>\n <span class=\"${classMap({ hidden: !this.loading || !this.loadingtext })}\">\n ${this.loadingtext}\n </span>\n ${\n this.loading\n ? html`<mid-spinner\n class=\"${classMap({\n 'text-[1.4rem]': true,\n absolute: spinnerOnly,\n 'top-[calc(50%_-_0.5em)]': spinnerOnly,\n 'left-[calc(50%_-_0.5em)]': spinnerOnly,\n })}\"\n part=\"spinner\"\n ></mid-spinner>`\n : ''\n }\n </${tag}>`;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAeA,MAAM,SAAS;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAKF;AAMO,IAAM,cAAN,cAA0B;AAAA,EAC/B,OAAO,YAAY,MAAM;AAC3B,EAAE;AAAA,EAFK,cAAA;AAAA,UAAA,GAAA,SAAA;AAUG,SAAA,QAAA;AAMwC,SAAA,UAAA;AAMrB,SAAA,OAAA;AAMW,SAAA,OAAA;AAY3B,SAAA,WAAA;AAMD,SAAA,UAAA;AAGI,SAAA,cAAA;AAMD,SAAA,aAAA;AAAA,EAAA;AAAA,EAEb,cAAc;AACR,QAAA,KAAK,SAAS,UAAU;AAC1B,WAAK,SAAS,KAAK,aAAa,KAAK,KAAK;AACrC,WAAA,UAAU,KAAM,cAAc;AAAA,IAAA,WAC1B,KAAK,SAAS,SAAS;AAC3B,WAAA,UAAU,KAAM,MAAM;AAAA,IAAA;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA,EAMF,IAAI,SAAS;AACJ,WAAA,CAAC,CAAC,KAAK;AAAA,EAAA;AAAA,EAGhB,QAAQ;AACN,SAAK,OAAO,MAAM;AAAA,EAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../src/components/button.component.ts"],"sourcesContent":["import { css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { html, literal } from 'lit/static-html.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { FormControllerMixin } from '../mixins/form-controller.mixin.ts';\nimport './spinner.component.ts';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'mid-button': MinidButton;\n }\n}\n\nconst styles = [\n css`\n :host {\n display: inline-flex;\n }\n `,\n];\n\n/**\n * A regular old button\n */\n@customElement('mid-button')\nexport class MinidButton extends FormControllerMixin(\n styled(LitElement, styles)\n) {\n @query('.button')\n button!: HTMLButtonElement | HTMLLinkElement;\n\n /**\n * The value of the button (optional)\n */\n @property({ type: String })\n value = '';\n\n /**\n * The variant of the button\n */\n @property({ type: String })\n variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n /**\n * The size of the button. Defaults to 'md'\n */\n @property({ type: String })\n size: 'md' | 'lg' | 'sm' = 'md';\n\n /**\n * The type of the button. Defaults to normal 'button'\n */\n @property({ type: String })\n type: 'submit' | 'button' | 'reset' = 'button';\n\n /**\n * The href of the button. If set, the button will be rendered as an anchor tag\n */\n @property({ type: String })\n href: string | undefined;\n\n /**\n * Whether the button is disabled\n */\n @property({ type: Boolean })\n disabled = false;\n\n /**\n *\n */\n @property({ type: Boolean })\n loading = false;\n\n @property()\n loadingtext = '';\n\n /**\n * Toggle icon only styling\n */\n @property({ type: Boolean })\n iconstyled = false;\n\n handleClick() {\n if (this.type === 'submit') {\n this.value && this.setFormValue(this.value);\n this.internals.form!.requestSubmit();\n } else if (this.type === 'reset') {\n this.internals.form!.reset();\n }\n }\n\n /**\n * @ignore\n */\n get isLink() {\n return !!this.href;\n }\n\n click() {\n this.button.click();\n }\n\n blur() {\n this.button.blur();\n }\n\n focus(options?: FocusOptions) {\n this.button.focus(options);\n }\n\n override render() {\n const tag = this.isLink ? literal`a` : literal`button`;\n const primary = this.variant === 'primary';\n const secondary = this.variant === 'secondary';\n const tertiary = this.variant === 'tertiary';\n const sm = this.size === 'sm';\n const md = this.size === 'md';\n const lg = this.size === 'lg';\n const spinnerOnly = this.loading && !this.loadingtext;\n\n return html`<${tag}\n part=\"base\"\n class=\"${classMap({\n button: true,\n 'w-12': this.iconstyled,\n 'h-12': this.iconstyled,\n 'py-2': !this.iconstyled,\n 'px-4': !this.iconstyled,\n 'bg-accent-base': primary,\n 'text-accent-base-contrast': primary,\n 'border-transparent': primary || tertiary,\n 'hover:bg-accent-base-hover': primary,\n 'active:bg-accent-base-active': primary,\n 'bg-transparent': secondary || tertiary,\n 'active:bg-accent-surface-active': secondary || tertiary,\n 'hover:bg-accent-surface-hover': secondary || tertiary,\n 'text-accent-subtle': secondary || tertiary,\n 'hover:text-accent': secondary || tertiary,\n 'border-accent-strong': secondary,\n 'text-body-sm': sm,\n 'text-body-md': md,\n 'text-body-lg': lg,\n 'cursor-wait': this.loading && !this.disabled,\n 'cursor-pointer': !this.loading && !this.disabled,\n 'cursor-not-allowed': this.disabled,\n relative: spinnerOnly,\n 'gap-0': spinnerOnly,\n 'opacity-disabled': this.disabled && !this.loading,\n })} grow focus-visible:focus-ring leading-sm flex h-fit min-h-12 min-w-12 items-center justify-center gap-2 rounded border font-medium\"\n type=${this.type}\n aria-busy=${this.loading}\n ?disabled=${this.disabled}\n href=\"${ifDefined(this.href)}\"\n @click=\"${this.handleClick}\"\n >\n <slot\n class=\"${classMap({\n invisible: spinnerOnly,\n hidden: this.loading && this.loadingtext,\n })}\"\n ></slot>\n <span class=\"${classMap({ hidden: !this.loading || !this.loadingtext })}\">\n ${this.loadingtext}\n </span>\n ${\n this.loading\n ? html`<mid-spinner\n class=\"${classMap({\n 'text-[1.4rem]': true,\n absolute: spinnerOnly,\n 'top-[calc(50%_-_0.5em)]': spinnerOnly,\n 'left-[calc(50%_-_0.5em)]': spinnerOnly,\n })}\"\n part=\"spinner\"\n ></mid-spinner>`\n : ''\n }\n </${tag}>`;\n }\n}\n"],"names":[],"mappings":"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"}
|