chunk.MBEINBSG.js 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. import {
  2. focusVisible
  3. } from "./chunk.XAZSQ3AT.js";
  4. import {
  5. l
  6. } from "./chunk.5MED2A3H.js";
  7. import {
  8. e as e2
  9. } from "./chunk.YXKHB4AC.js";
  10. import {
  11. T,
  12. e,
  13. h,
  14. n,
  15. o,
  16. r
  17. } from "./chunk.5PIDMFOE.js";
  18. import {
  19. __decorateClass
  20. } from "./chunk.IHGPZX35.js";
  21. // _uyihdawu1:/Users/claviska/Projects/shoelace/src/components/icon-button/icon-button.scss
  22. var icon_button_default = ":host {\n position: relative;\n box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n box-sizing: inherit;\n}\n\n[hidden] {\n display: none !important;\n}\n\n:host {\n display: inline-block;\n}\n\n.icon-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n background: none;\n border: none;\n border-radius: var(--sl-border-radius-medium);\n font-size: inherit;\n color: var(--sl-color-gray-500);\n padding: var(--sl-spacing-x-small);\n cursor: pointer;\n transition: var(--sl-transition-medium) color;\n -webkit-appearance: none;\n}\n.icon-button:hover:not(.icon-button--disabled), .icon-button:focus:not(.icon-button--disabled) {\n color: var(--sl-color-primary-500);\n}\n.icon-button:active:not(.icon-button--disabled) {\n color: var(--sl-color-primary-600);\n}\n.icon-button:focus {\n outline: none;\n}\n\n.icon-button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.focus-visible.icon-button:focus {\n box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n}";
  23. // src/components/icon-button/icon-button.ts
  24. var SlIconButton = class extends h {
  25. constructor() {
  26. super(...arguments);
  27. this.label = "";
  28. this.disabled = false;
  29. }
  30. connectedCallback() {
  31. super.connectedCallback();
  32. this.updateComplete.then(() => focusVisible.observe(this.button));
  33. }
  34. disconnectedCallback() {
  35. super.disconnectedCallback();
  36. focusVisible.unobserve(this.button);
  37. }
  38. render() {
  39. return T`
  40. <button
  41. part="base"
  42. class=${e2({
  43. "icon-button": true,
  44. "icon-button--disabled": this.disabled
  45. })}
  46. ?disabled=${this.disabled}
  47. type="button"
  48. aria-label=${this.label}
  49. >
  50. <sl-icon
  51. name=${l(this.name)}
  52. library=${l(this.library)}
  53. src=${l(this.src)}
  54. aria-hidden="true"
  55. ></sl-icon>
  56. </button>
  57. `;
  58. }
  59. };
  60. SlIconButton.styles = r(icon_button_default);
  61. __decorateClass([
  62. o("button")
  63. ], SlIconButton.prototype, "button", 2);
  64. __decorateClass([
  65. e()
  66. ], SlIconButton.prototype, "name", 2);
  67. __decorateClass([
  68. e()
  69. ], SlIconButton.prototype, "library", 2);
  70. __decorateClass([
  71. e()
  72. ], SlIconButton.prototype, "src", 2);
  73. __decorateClass([
  74. e()
  75. ], SlIconButton.prototype, "label", 2);
  76. __decorateClass([
  77. e({ type: Boolean, reflect: true })
  78. ], SlIconButton.prototype, "disabled", 2);
  79. SlIconButton = __decorateClass([
  80. n("sl-icon-button")
  81. ], SlIconButton);
  82. var icon_button_default2 = SlIconButton;
  83. export {
  84. icon_button_default2 as icon_button_default
  85. };