<button type="button" title={label} aria-label={label} aria-pressed={pressable ? !!pressed : void 0} aria-hidden={ariaHidden} class={computedClass} {disabled} ref:node > <SvgIcon className="icon-button-svg {svgClassName || ''}" ref:svg {href} /> </button> <style> .icon-button { padding: 6px 10px; background: none; border: none; display: flex; align-items: center; justify-content: center; } :global(.icon-button-svg) { width: 24px; height: 24px; fill: var(--action-button-fill-color); pointer-events: none; /* hack for Edge */ } :global(.icon-button.big-icon .icon-button-svg) { width: 32px; height: 32px; } /* * regular styles */ :global(.icon-button:hover .icon-button-svg) { fill: var(--action-button-fill-color-hover); } :global(.icon-button.not-pressable:active .icon-button-svg, .icon-button.same-pressed:active .icon-button-svg) { fill: var(--action-button-fill-color-active); } :global(.icon-button.pressed.not-same-pressed .icon-button-svg) { fill: var(--action-button-fill-color-pressed); } :global(.icon-button.pressed.not-same-pressed:hover .icon-button-svg) { fill: var(--action-button-fill-color-pressed-hover); } :global(.icon-button.pressed.not-same-pressed:active .icon-button-svg) { fill: var(--action-button-fill-color-pressed-active); } /* * muted */ :global(.icon-button.muted-style .icon-button-svg) { fill: var(--action-button-deemphasized-fill-color); } :global(.icon-button.muted-style:hover .icon-button-svg) { fill: var(--action-button-deemphasized-fill-color-hover); } :global(.icon-button.muted-style.not-pressable:active .icon-button-svg, .icon-button.muted-style.same-pressed:active .icon-button-svg) { fill: var(--action-button-deemphasized-fill-color-active); } :global(.icon-button.muted-style.pressed.not-same-pressed .icon-button-svg) { fill: var(--action-button-deemphasized-fill-color-pressed); } :global(.icon-button.muted-style.pressed.not-same-pressed:hover .icon-button-svg) { fill: var(--action-button-deemphasized-fill-color-pressed-hover); } :global(.icon-button.muted-style.pressed.not-same-pressed:active .icon-button-svg) { fill: var(--action-button-deemphasized-fill-color-pressed-active); } </style> <script> import { classname } from '../_utils/classname' import { store } from '../_store/store' import SvgIcon from './SvgIcon.html' export default { oncreate () { const { clickListener, elementId } = this.get() if (clickListener) { this.onClick = this.onClick.bind(this) this.refs.node.addEventListener('click', this.onClick) } if (elementId) { this.refs.node.setAttribute('id', elementId) } }, ondestroy () { const { clickListener } = this.get() if (clickListener) { this.refs.node.removeEventListener('click', this.onClick) } }, data: () => ({ big: false, muted: false, disabled: false, svgClassName: void 0, elementId: void 0, pressable: false, pressed: false, className: void 0, sameColorWhenPressed: false, ariaHidden: false, clickListener: true }), store: () => store, computed: { computedClass: ({ pressable, pressed, big, muted, sameColorWhenPressed, className }) => { return classname( 'icon-button', !pressable && 'not-pressable', pressed && 'pressed', big && 'big-icon', muted && 'muted-style', sameColorWhenPressed ? 'same-pressed' : 'not-same-pressed', className ) } }, methods: { animate (animation) { this.refs.svg.animate(animation) }, onClick (e) { this.fire('click', e) } }, components: { SvgIcon } } </script>