UNPKG

3.04 kBJavaScriptView Raw
1import {
2 icon_button_styles_default
3} from "./chunk.JP2OUECE.js";
4import {
5 l as l2,
6 n as n2
7} from "./chunk.6G3UULFW.js";
8import {
9 o
10} from "./chunk.IAELDRGJ.js";
11import {
12 l
13} from "./chunk.7MO772SN.js";
14import {
15 emit
16} from "./chunk.UY5AQKHP.js";
17import {
18 e,
19 i,
20 n,
21 t
22} from "./chunk.VKNZYXSO.js";
23import {
24 s
25} from "./chunk.WWAD5WF4.js";
26import {
27 __decorateClass
28} from "./chunk.K2NRSETB.js";
29
30// src/components/icon-button/icon-button.ts
31var SlIconButton = class extends s {
32 constructor() {
33 super(...arguments);
34 this.hasFocus = false;
35 this.label = "";
36 this.disabled = false;
37 }
38 click() {
39 this.button.click();
40 }
41 focus(options) {
42 this.button.focus(options);
43 }
44 blur() {
45 this.button.blur();
46 }
47 handleBlur() {
48 this.hasFocus = false;
49 emit(this, "sl-blur");
50 }
51 handleFocus() {
52 this.hasFocus = true;
53 emit(this, "sl-focus");
54 }
55 handleClick(event) {
56 if (this.disabled) {
57 event.preventDefault();
58 event.stopPropagation();
59 }
60 }
61 render() {
62 const isLink = this.href ? true : false;
63 const tag = isLink ? l2`a` : l2`button`;
64 return n2`
65 <${tag}
66 part="base"
67 class=${o({
68 "icon-button": true,
69 "icon-button--disabled": !isLink && this.disabled,
70 "icon-button--focused": this.hasFocus
71 })}
72 ?disabled=${l(isLink ? void 0 : this.disabled)}
73 type=${l(isLink ? void 0 : "button")}
74 href=${l(isLink ? this.href : void 0)}
75 target=${l(isLink ? this.target : void 0)}
76 download=${l(isLink ? this.download : void 0)}
77 rel=${l(isLink && this.target ? "noreferrer noopener" : void 0)}
78 role=${l(isLink ? void 0 : "button")}
79 aria-disabled=${this.disabled ? "true" : "false"}
80 aria-label="${this.label}"
81 tabindex=${this.disabled ? "-1" : "0"}
82 @blur=${this.handleBlur}
83 @focus=${this.handleFocus}
84 @click=${this.handleClick}
85 >
86 <sl-icon
87 class="icon-button__icon"
88 name=${l(this.name)}
89 library=${l(this.library)}
90 src=${l(this.src)}
91 aria-hidden="true"
92 ></sl-icon>
93 </${tag}>
94 `;
95 }
96};
97SlIconButton.styles = icon_button_styles_default;
98__decorateClass([
99 t()
100], SlIconButton.prototype, "hasFocus", 2);
101__decorateClass([
102 i(".icon-button")
103], SlIconButton.prototype, "button", 2);
104__decorateClass([
105 e()
106], SlIconButton.prototype, "name", 2);
107__decorateClass([
108 e()
109], SlIconButton.prototype, "library", 2);
110__decorateClass([
111 e()
112], SlIconButton.prototype, "src", 2);
113__decorateClass([
114 e()
115], SlIconButton.prototype, "href", 2);
116__decorateClass([
117 e()
118], SlIconButton.prototype, "target", 2);
119__decorateClass([
120 e()
121], SlIconButton.prototype, "download", 2);
122__decorateClass([
123 e()
124], SlIconButton.prototype, "label", 2);
125__decorateClass([
126 e({ type: Boolean, reflect: true })
127], SlIconButton.prototype, "disabled", 2);
128SlIconButton = __decorateClass([
129 n("sl-icon-button")
130], SlIconButton);
131
132export {
133 SlIconButton
134};