opensearch-button.html

<template id="opensearch_button_element_tpl">
    <style>
        :host {
            font-size: 16px;
            cursor: pointer;
            background-color: inherit;
            display: inline-flex;
            clear: none;
            flex-wrap: nowrap;
            margin: auto;
            box-sizing: border-box;
            border-radius: 6px;
            border-style: solid;
            border-width: 1px;
            width: inherit;
            height: auto;
            white-space: nowrap;
        }
        :host([circular])  {
            border-radius: 50%;
        }
        :host([hidden]) {
            display: none;
        }
        :host([disabled]),
        :host([disabled]) > button {
            cursor: not-allowed;
            opacity: 0.5;
        }
        :host > button {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            appearance: none;
            cursor: pointer;
            font-weight: inherit;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            border: none;
            width: inherit;
            height: inherit;
            border-radius: 6px;
        }
        :host([text-only]) > button {
            display: block;
            text-align: center;
        }
        :host([icon-only]) > button {
            padding-top: 12.5%;
        }
        :host([icon-position="left"]) > button {
            flex-direction: row;
        }
        :host([icon-position="right"]) > button {
            flex-direction: row-reverse;
        }
        :host([icon-position="top"]) > button {
            flex-direction: column;
        }
        :host([icon-position="bottom"]) > button {
            flex-direction: column-reverse;
        }
        :host([icon-position="bottom"][icon-align="left"]) > button,
        :host([icon-position="top"][icon-align="left"]) > button {
            align-items: start;
        }
        :host([icon-position="bottom"][icon-align="right"]) > button,
        :host([icon-position="top"][icon-align="right"]) > button {
            align-items: end;
        }
        .icon,
        .text {
            line-height: 2;
            padding: 0.2em;
            font-size: 1em;
            font-weight: inherit;
        }
        :host([icon-position="left"]) .icon {
            padding-right: 0;
        }
        :host([icon-position="left"]) .text {
            padding-right: 8px;
            padding-left: 2px;
        }
        :host([icon-position="right"]) .icon {
            padding-left: 0;
        }
        :host([icon-position="right"]) .text {
            padding-left: 8px;
            padding-right: 2px;
        }
        :host([text-only]) .icon {
            display: none;
        }
        :host([size="large"]) .icon,
        :host([size="large"]) .text {
            font-size: 18px;
        }
        :host([size="xlarge"]) .icon,
        :host([size="xlarge"]) .text {
            font-size: 2em;
        }
        :host([size="small"]) .icon,
        :host([size="small"]) .text {
            font-size: 1em;
            line-height: 1;
        }
        .icon {
            display: inline-flex;
            flex-basis: 10%;
            flex-grow: 1;
            flex-shrink: 1;
        }
        .text {
            display: inline-flex;
            flex-basis: 90%;
            flex-grow: 1;
            flex-shrink: 1;
        }
        :host([icon-only]) .text {
            display: none;
        }
        :host([icon-only]) .icon {
            flex-basis: 100%;
        }
        :host([text-only]) .icon {
            display: none;
        }
        :host([text-only]) .text {
            flex-basis: 100%;
        }
        :host([theme-color="primary"]) > button {
            background-color: #003B5C;
        }
        :host([theme-color="secondary"]) > button {
            background-color: #DCEBF4;
        }
    </style>
    <button>
        <span class="icon">
            <slot name="icon-slot"></slot>
        </span>
        <span class="text">
            <slot name="text-slot"></slot>
        </span>
    </button>
</template>
<script type="module">
    
    class OpenSearchButtonElement extends HTMLElement {
        
        static get observedAttributes() {
            return [
                'icon-position', 
                'icon-align', 
                'text-align', 
                'size', 
                'label-text', 
                'icon-text', 
                'icon-only', 
                'text-only',
                'disabled',
                'fill',
                'no-outline',
                'href',
                'circular',
                'theme-color'
            ];
        }
        
        static get DEFAULT_ICON_POSITION() {
            return 'left';
        }
        static get DEFUULT_ICON_ALIGN() {
            return 'center';
        }
        static get DEFAULT_TEXT_ALIGN() {
            return 'center';
        }
        static get DEFAULT_SIZE() {
            return 'normal';
        }

        constructor() {
            super();
            const shadowRoot = this.attachShadow({mode: 'open', delegatesFocus: true});
            const template = document.getElementById('opensearch_button_element_tpl');
            const templateContent = template.content.cloneNode(true);
            shadowRoot.appendChild(templateContent);
            this.onKeyDownHandler = this.onKeyDownHandler.bind(this);
            this.onFocusHandler = this.onFocusHandler.bind(this);
            this.onBlurHandler = this.onBlurHandler.bind(this);
        }
        
        connectedCallback() {

            //
            // State expectations:
            //  If there is an icon then ensure that the icon attributes are valid. 
            //  Also, if the icon is specified as a text value in the attribute then 
            //      assign the attribute value to the span that contains the icon slot.
            //  If there is text then ensure that the text attributes are valid.
            //  Also, if the text is specified as a text value in the attribute then
            //      assign the attribute value to the span that contains the text slot.
            // If the button is configured to be an icon-only button then ensure that
            //  the text slot is not displayed, and the text attributes are removed.
            // If the button is configured to be a text-only button then ensure that
            //  the icon slot is not displayed, and the icon attributes are removed.
            // If there is a fill attribute specified then assign it to the background color
            //   of the button. No validation is applied to the fill attribute. Whereas it
            //   may be trivial to pattern match against HEX, rgb and rgba values, it is
            //   not trivial to pattern match against CSS color names since there are so many.
            // If the no-outline attribute is specfied then the button border is removed.
            //
            const isIconOnly = this.hasAttribute('icon-only');
            const isTextOnly = this.hasAttribute('text-only');
            if (isIconOnly && isTextOnly) {
                console.warn('[opensearch-button] Cannot have both icon-only and text-only attributes as their semantics is mutually exclusive.');
                return;
            }
            
            if (isTextOnly) {
                // Remove all icon specific attributes
                this.removeAttribute('icon-position');
                this.removeAttribute('icon-align');
                this.removeAttribute('icon-text');
            }
            // State assertion: for text only buttons all icon specific attributes are removed.


            if (isIconOnly) {
                // Remove all text specific attributes
                this.removeAttribute('text-align');
                this.removeAttribute('label-text');
            }
            // State assertion: for a icon only button all text specific attributes are removed.

            if (!isTextOnly) {
                // Validate the configuration attributes setting defaults as necessary.
                if (
                    !this.hasAttribute('icon-position') || 
                    !this.isValidIconPosition(this.getAttribute('icon-position'))
                ) {
                    // Ensure a valid icon position.
                    this.setAttribute('icon-position', OpenSearchButtonElement.DEFAULT_ICON_POSITION);
                }
                if (
                    !this.hasAttribute('icon-align') || 
                    !this.isValidAlignment(this.getAttribute('icon-align'))
                ) {
                    // Ensure a valid icon align.
                    this.setAttribute('icon-align', OpenSearchButtonElement.DEFUULT_ICON_ALIGN);
                }
                // Ensure there is a valid icon. Either as an element or as text.
                const hasIcon = (
                    this.hasAttribute('icon-text') && this.getAttribute('icon-text').trim() !== ''
                ) || this.shadowRoot.querySelector('slot[name="icon-slot"]').assignedNodes().length > 0;
                if (!hasIcon) {
                    console.warn('No icon specified for button.');
                    return;
                }
                const iconText = this.getAttribute('icon-text') || '';
                if (iconText !== '') {
                    this.shadowRoot.querySelector('.icon').innerHTML = iconText;
                }
                // State assertion: for a non text-only icon there is a properly configured icon.
            }

            if (!isIconOnly) {
                // Ensure a valid text align.
                if (
                    !this.hasAttribute('text-align') || 
                    !this.isValidAlignment(this.getAttribute('text-align'))
                ) {
                    this.setAttribute('text-align', OpenSearchButtonElement.DEFAULT_TEXT_ALIGN);
                }
                // Button label can be defined via the label-text attribute or via the text slot.
                // Ensure that one or the other is defined.
                const slotText = Array.from(
                    this.shadowRoot.querySelector('slot[name="text-slot"]')?.assignedNodes?.() ?? []
                ).reduce((carry, current) => carry + current.textContent, '').trim();
                if (slotText === '') {
                    const labelText = this.getAttribute('label-text') || '';
                    if (labelText === '') {
                        console.warn('No text specified for button.');
                        return;
                    }
                    // Accesibility.
                    this.setAttribute('aria-label', labelText);
                    // Add the text from the attribute to the text span.
                    this.shadowRoot.querySelector('.text').textContent = labelText;
                } else {
                    // Accesibility.
                    this.setAttribute('aria-label', slotText);
                }
                // State assertion: for a non icon-only button there is a properly configured text.
            }
            
            const fill = this.getAttribute('fill');
            if (fill) {
                this.shadowRoot.querySelector('button').style.backgroundColor = fill;
            }
            // State assertion: if a fill has been specified then it has been applied to the button.

            const noOutline = this.hasAttribute('no-outline');
            if (noOutline) {
                this.style.border = 'none';
            }
            // State assertion: if the no-outline attribute is specified then the button border is removed.

            // Accessibility
            this.setAttribute('role', 'button');
            if (!this.hasAttribute('tabindex')) {
                // only assign a tabindex if one is not already set.
                // This should make it focusable by tabbing through elements in the page.
                this.setAttribute('tabindex', 0);
            }
            this.addEventListener('keydown', this.onKeyDownHandler);
            // this.addEventListener('focus', this.onFocusHandler);
            // this.addEventListener('blur', this.onBlurHandler);
            // State assertion: the button is accessible.
        }

        onKeyDownHandler(event) {
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                this.shadowRoot.querySelector('button')?.click?.();
            }
        }

        onFocusHandler(event) {
            this.shadowRoot.querySelector('button')?.focus?.();
        }

        onBlurHandler(event) {
            this.shadowRoot.querySelector('button')?.blur?.();
        }

        disconnectCallback() {
            this.removeEventListener('keydown', this.onKeyDownHandler);
            // this.removeEventListener('focus', this.onFocusHandler);
        }

        attributeChangedCallback(name, oldValue, newValue) {
            if (name === 'icon-position') {
                if (!this.isValidIconPosition(newValue)) {
                    this.setAttribute('icon-position', oldValue || OpenSearchButtonElement.DEFAULT_ICON_POSITION);
                }
            } else if (name === 'icon-align') {
                if (!this.isValidAlignment(newValue)) {
                    this.setAttribute('icon-align', oldValue || OpenSearchButtonElement.DEFUULT_ICON_ALIGN);
                }
            } else if (name === 'text-align') {
                if (!this.isValidAlignment(newValue)) {
                    this.setAttribute('text-align', oldValue || OpenSearchButtonElement.DEFAULT_TEXT_ALIGN);
                }
            } else if (name === 'size') {
                if (!this.isValidSize(newValue)) {
                    this.setAttribute('size', oldValue || OpenSearchButtonElement.DEFAULT_SIZE);
                }
            } else if (name === 'label-text') {
                if (newValue === '') {
                    this.removeAttribute('label-text');
                } else {
                    this.shadowRoot.querySelector('.text').textContent = newValue;
                }
            } else if (name === 'icon-text') {
                if (newValue === '') {
                    this.removeAttribute('icon-text');
                } else {
                    this.shadowRoot.querySelector('.icon').innerHTML = newValue;
                }
            } else if (name === 'fill') {
                if (newValue === '') {
                    this.removeAttribute('fill');
                } else {
                    this.shadowRoot.querySelector('button').style.backgroundColor = newValue;
                }
            } else if (name === 'no-outline') {
                if (newValue === '') {
                    this.removeAttribute('no-outline');
                } else {
                    this.style.border = 'none';
                }
            } else if (name === 'icon-only') {
                if (newValue === '') {
                    this.removeAttribute('icon-only');
                } else {
                    this.shadowRoot.querySelector('.text').style.display = 'none';
                }
            } else if (name === 'text-only') {
                if (newValue === '') {
                    this.removeAttribute('text-only');
                } else {
                    this.shadowRoot.querySelector('.icon').style.display = 'none';
                }
            }
        }

        isValidIconPosition(value) {
            const validIconPositionValues = ['left', 'right', 'top', 'bottom'];
            return validIconPositionValues.includes(value);
        }

        isValidAlignment(value) {
            const validAlignmentValues = ['left', 'right', 'center'];
            return validAlignmentValues.includes(value);
        }

        isValidSize(value) {
            const validSizeValues = ['small', 'normal', 'large', 'xlarge'];
            return validSizeValues.includes(value);
        }
    }

    customElements.define('opensearch-button', OpenSearchButtonElement);
</script>