/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { __decorate } from "tslib";
import { attachShadowTemplate, CustomElement, FoundationProperty } from '@tylertech/forge-core';
import { BaseButton } from '../button/base/base-button';
import { BASE_BUTTON_CONSTANTS } from '../button/base/base-button-constants';
import { FocusIndicatorComponent } from '../focus-indicator';
import { IconComponent } from '../icon/icon';
import { StateLayerComponent } from '../state-layer';
import { FloatingActionButtonAdapter } from './floating-action-button-adapter';
import { FLOATING_ACTION_BUTTON_CONSTANTS } from './floating-action-button-constants';
import { FloatingActionButtonFoundation } from './floating-action-button-foundation';
const template = '<template><div class=\"forge-fab\" part=\"root\"><slot name=\"start\"></slot><slot></slot><slot name=\"label\"></slot><slot name=\"end\"></slot><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div></template>';
const styles = ':host{--_fab-display:var(--forge-fab-display, inline-flex);--_fab-disabled-cursor:var(--forge-fab-disabled-cursor, not-allowed)}:host{display:var(--_fab-display);position:relative;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-fab{--_fab-gap:var(--forge-fab-gap, var(--forge-spacing-xsmall, 8px));--_fab-background:var(--forge-fab-background, var(--forge-theme-secondary, #ffc107));--_fab-color:var(--forge-fab-color, var(--forge-theme-on-secondary, #000000));--_fab-size:var(--forge-fab-size, 56px);--_fab-padding:var(--forge-fab-padding, var(--forge-spacing-xsmall, 8px));--_fab-shadow:var(--forge-fab-shadow, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));--_fab-hover-shadow:var(--forge-fab-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_fab-active-shadow:var(--forge-fab-active-shadow, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));--_fab-lowered-shadow:var(--forge-fab-lowered-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_fab-lowered-hover-shadow:var(--forge-fab-lowered-hover-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_fab-lowered-active-shadow:var(--forge-fab-lowered-active-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_fab-transition-duration:var(--forge-fab-transition-duration, var(--forge-animation-duration-short3, 150ms));--_fab-transition-timing:var(--forge-fab-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_fab-shape:var(--forge-fab-shape, var(--forge-shape-full, 9999px));--_fab-shape-start-start:var(--forge-fab-shape-start-start, var(--_fab-shape));--_fab-shape-start-end:var(--forge-fab-shape-start-end, var(--_fab-shape));--_fab-shape-end-start:var(--forge-fab-shape-end-start, var(--_fab-shape));--_fab-shape-end-end:var(--forge-fab-shape-end-end, var(--_fab-shape));--_fab-extended-padding:var(--forge-fab-extended-padding, var(--forge-spacing-medium-large, 20px));--_fab-extended-min-width:var(--forge-fab-extended-min-width, 96px);--_fab-density-small-size:var(--forge-fab-density-small-size, 40px);--_fab-density-medium-size:var(--forge-fab-density-medium-size, var(--_fab-size));--_fab-density-large-size:var(--forge-fab-density-large-size, 96px);--_fab-disabled-background:var(--forge-fab-disabled-background, var(--forge-theme-surface-container, #e0e0e0));--_fab-disabled-color:var(--forge-fab-disabled-color, var(--forge-theme-on-surface-container, #000000));--_fab-disabled-opacity:var(--forge-fab-disabled-opacity, 0.38)}.forge-fab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-button-text-decoration,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);position:relative;display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;gap:var(--_fab-gap);z-index:0;background:var(--_fab-background);color:var(--_fab-color);cursor:pointer;-webkit-box-shadow:var(--_fab-shadow);box-shadow:var(--_fab-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--_fab-density-medium-size);min-width:var(--_fab-density-medium-size);padding-inline:var(--_fab-padding);border-width:medium;border-style:none;border-color:currentColor;border-top-left-radius:var(--_fab-shape-start-start);border-top-right-radius:var(--_fab-shape-start-end);border-bottom-left-radius:var(--_fab-shape-end-start);border-bottom-right-radius:var(--_fab-shape-end-end);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;-webkit-transition-property:background,color,-webkit-box-shadow;transition-property:background,color,-webkit-box-shadow;transition-property:box-shadow,background,color;transition-property:box-shadow,background,color,-webkit-box-shadow;-webkit-transition-duration:var(--_fab-transition-duration);transition-duration:var(--_fab-transition-duration);-webkit-transition-timing-function:var(--_fab-transition-timing);transition-timing-function:var(--_fab-transition-timing)}.forge-fab:hover{--_fab-shadow:var(--_fab-hover-shadow)}.forge-fab:active{--_fab-shadow:var(--_fab-active-shadow)}.forge-fab--extended{--_fab-padding:var(--_fab-extended-padding);min-width:var(--_fab-extended-min-width)}.with-anchor{padding-inline:0}::slotted(a){height:100%;width:100%;outline:0;border-radius:var(--_fab-shape);padding-inline:var(--_fab-padding);display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;gap:var(--_fab-gap);color:var(--_fab-color);text-decoration:none}forge-focus-indicator{--forge-focus-indicator-color:var(--_fab-background);--forge-focus-indicator-shape-start-start:var(--_fab-shape-start-start);--forge-focus-indicator-shape-start-end:var(--_fab-shape-start-end);--forge-focus-indicator-shape-end-start:var(--_fab-shape-end-start);--forge-focus-indicator-shape-end-end:var(--_fab-shape-end-end)}forge-state-layer{--forge-state-layer-color:var(--_fab-color)}:host(:is([dense],[density=small])) .forge-fab{--_fab-size:var(--_fab-density-small-size)}:host([density=large]) .forge-fab{--_fab-size:var(--_fab-density-large-size);--_fab-shape:var(--forge-fab-shape, var(--forge-shape-extra-large, 16px))}:host([elevation=lowered]) .forge-fab{--_fab-shadow:var(--_fab-lowered-shadow)}:host([elevation=lowered]) .forge-fab:hover{--_fab-shadow:var(--_fab-lowered-hover-shadow)}:host([elevation=lowered]) .forge-fab:active{--_fab-shadow:var(--_fab-lowered-active-shadow)}:host([disabled]){cursor:var(--_fab-disabled-cursor)}:host([disabled]) .forge-fab{--_fab-background:var(--_fab-disabled-background);--_fab-color:var(--_fab-disabled-color);pointer-events:none;opacity:var(--_fab-disabled-opacity)}:host([theme=primary]:not([disabled])) .forge-fab{--_fab-background:var(--forge-fab-background, var(--forge-theme-primary, #3f51b5));--_fab-color:var(--forge-fab-color, var(--forge-theme-on-primary, #ffffff))}:host([theme=tertiary]:not([disabled])) .forge-fab{--_fab-background:var(--forge-fab-background, var(--forge-theme-tertiary, #3d5afe));--_fab-color:var(--forge-fab-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=success]:not([disabled])) .forge-fab{--_fab-background:var(--forge-fab-background, var(--forge-theme-success, #2e7d32));--_fab-color:var(--forge-fab-color, var(--forge-theme-on-success, #ffffff))}:host([theme=error]:not([disabled])) .forge-fab{--_fab-background:var(--forge-fab-background, var(--forge-theme-error, #b00020));--_fab-color:var(--forge-fab-color, var(--forge-theme-on-error, #ffffff))}:host([theme=warning]:not([disabled])) .forge-fab{--_fab-background:var(--forge-fab-background, var(--forge-theme-warning, #d14900));--_fab-color:var(--forge-fab-color, var(--forge-theme-on-warning, #ffffff))}:host([theme=info]:not([disabled])) .forge-fab{--_fab-background:var(--forge-fab-background, var(--forge-theme-info, #1565c0));--_fab-color:var(--forge-fab-color, var(--forge-theme-on-info, #ffffff))}';
/**
 * @tag forge-fab
 *
 * @summary Floating action buttons are used to represent the most important action on a page.
 *
 * @property {ButtonTheme} theme - Sets the theme of the button.
 * @property {FloatingActionButtonDensity} density - Sets the density of the button.
 * @property {FloatingActionButtonElevation} elevation - Sets the elevation of the button.
 * @property {string} type - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
 * @property {boolean} disabled - Whether or not the button is disabled.
 * @property {boolean} popoverIcon - Whether or not the button shows a built-in popover icon.
 * @property {string} name - The name of the button.
 * @property {string} value - The form value of the button.
 * @property {boolean} dense - Whether or not the button is dense.
 * @property {HTMLFormElement | null} form - The form reference of the button if within a `<form>` element.
 *
 * @attribute {string} theme - Sets the theme of the button.
 * @attribute {string} density - Sets the density of the button.
 * @attribute {string} elevation - Sets the elevation of the button.
 * @attribute {string} type - The type of button. Defaults to `button`. Valid values are `button`, `submit`, and `reset`.
 * @attribute {boolean} disabled - Whether or not the button is disabled.
 * @attribute {boolean} popover-icon - Whether or not the button shows a built-in popover icon.
 * @attribute {string} name - The name of the button.
 * @attribute {string} value - The form value of the button.
 * @attribute {boolean} dense - Whether or not the button is dense.
 *
 * @fires click - Fires when the button is clicked.
 *
 * @cssproperty --forge-fab-background-display - The display property.
 * @cssproperty --forge-fab-gap - The gap between the icon and the label.
 * @cssproperty --forge-fab-background - The background color.
 * @cssproperty --forge-fab-color - The text color.
 * @cssproperty --forge-fab-size - The height and min-width of the button.
 * @cssproperty --forge-fab-padding - The inline padding of the button.
 * @cssproperty --forge-fab-shadow - The box shadow of the button.
 * @cssproperty --forge-fab-hover-shadow - The box shadow of the button when hovered.
 * @cssproperty --forge-fab-active-shadow - The box shadow of the button when active.
 * @cssproperty --forge-fab-lowered-shadow - The box shadow of the button when lowered.
 * @cssproperty --forge-fab-lowered-hover-shadow - The box shadow of the button when lowered and hovered.
 * @cssproperty --forge-fab-lowered-active-shadow - The box shadow of the button when lowered and active.
 * @cssproperty --forge-fab-transition-duration - The transition duration.
 * @cssproperty --forge-fab-transition-timing - The transition timing function.
 * @cssproperty --forge-fab-shape - The border radius of the button.
 * @cssproperty --forge-fab-shape-start-start - The start-start border radius.
 * @cssproperty --forge-fab-shape-start-end - The start-end border radius.
 * @cssproperty --forge-fab-shape-end-start - The end-start border radius.
 * @cssproperty --forge-fab-shape-end-end - The end-end border radius.
 * @cssproperty --forge-fab-extended-padding - The inline padding of the extended button.
 * @cssproperty --forge-fab-extended-min-width - The min-width of the extended button.
 * @cssproperty --forge-fab-density-small-size - The height and min-width of the small density button.
 * @cssproperty --forge-fab-density-medium-size - The height and min-width of the medium density (default) button.
 * @cssproperty --forge-fab-density-large-size - The height and min-width of the large density button.
 * @cssproperty --forge-fab-disabled-cursor - The cursor when disabled.
 * @cssproperty --forge-fab-disabled-background - The background color when disabled.
 * @cssproperty --forge-fab-disabled-color - The text color when disabled.
 * @cssproperty --forge-fab-disabled-opacity - The opacity when disabled.
 *
 * @csspart root - The root container element.
 * @csspart focus-indicator - The focus-indicator indicator element.
 * @csspart state-layer - The state-layer surface element.
 *
 * @slot - This is a default/unnamed slot. Typically used for icon-only or label-only FABs. If the content forces the width to be large than the height, then the FAB will be in extended mode.
 * @slot start - An element to logically render at the start of the button content.
 * @slot label - Reserved specifically for label text. This forces the button into extended mode.
 * @slot end - An element to logically render at the end of the button content.
 */
let FloatingActionButtonComponent = class FloatingActionButtonComponent extends BaseButton {
    static get observedAttributes() {
        return [
            ...Object.values(BASE_BUTTON_CONSTANTS.observedAttributes),
            ...Object.values(FLOATING_ACTION_BUTTON_CONSTANTS.observedAttributes)
        ];
    }
    constructor() {
        super();
        attachShadowTemplate(this, template, styles);
        this._foundation = new FloatingActionButtonFoundation(new FloatingActionButtonAdapter(this));
    }
    disconnectedCallback() {
        this._foundation.destroy();
    }
    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case FLOATING_ACTION_BUTTON_CONSTANTS.attributes.THEME:
                this.theme = newValue;
                return;
            case FLOATING_ACTION_BUTTON_CONSTANTS.attributes.DENSITY:
                this.density = newValue;
                return;
            case FLOATING_ACTION_BUTTON_CONSTANTS.attributes.ELEVATION:
                this.elevation = newValue;
                return;
        }
        super.attributeChangedCallback(name, oldValue, newValue);
    }
};
__decorate([
    FoundationProperty()
], FloatingActionButtonComponent.prototype, "theme", void 0);
__decorate([
    FoundationProperty()
], FloatingActionButtonComponent.prototype, "density", void 0);
__decorate([
    FoundationProperty()
], FloatingActionButtonComponent.prototype, "elevation", void 0);
FloatingActionButtonComponent = __decorate([
    CustomElement({
        name: FLOATING_ACTION_BUTTON_CONSTANTS.elementName,
        dependencies: [
            FocusIndicatorComponent,
            StateLayerComponent,
            IconComponent
        ]
    })
], FloatingActionButtonComponent);
export { FloatingActionButtonComponent };
