1 | import {
|
2 | icon_button_styles_default
|
3 | } from "./chunk.JP2OUECE.js";
|
4 | import {
|
5 | l as l2,
|
6 | n as n2
|
7 | } from "./chunk.6G3UULFW.js";
|
8 | import {
|
9 | o
|
10 | } from "./chunk.IAELDRGJ.js";
|
11 | import {
|
12 | l
|
13 | } from "./chunk.7MO772SN.js";
|
14 | import {
|
15 | emit
|
16 | } from "./chunk.UY5AQKHP.js";
|
17 | import {
|
18 | e,
|
19 | i,
|
20 | n,
|
21 | t
|
22 | } from "./chunk.VKNZYXSO.js";
|
23 | import {
|
24 | s
|
25 | } from "./chunk.WWAD5WF4.js";
|
26 | import {
|
27 | __decorateClass
|
28 | } from "./chunk.K2NRSETB.js";
|
29 |
|
30 |
|
31 | var 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 | };
|
97 | SlIconButton.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);
|
128 | SlIconButton = __decorateClass([
|
129 | n("sl-icon-button")
|
130 | ], SlIconButton);
|
131 |
|
132 | export {
|
133 | SlIconButton
|
134 | };
|