/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { __decorate } from "tslib";
import { CustomElement, attachShadowTemplate, coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
import { StackAdapter } from './stack-adapter';
import { StackFoundation } from './stack-foundation';
import { STACK_CONSTANTS } from './stack-constants';
import { BaseComponent } from '../core/base/base-component';
const template = '<template><div class=\"forge-stack\" part=\"root\"><slot></slot></div></template>';
const styles = '.forge-stack{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:var(--_stack-alignment);align-items:var(--_stack-alignment);-webkit-box-pack:var(--_stack-justify);justify-content:var(--_stack-justify);gap:var(--_stack-gap);height:var(--_stack-height);width:100%;--_stack-gap:var(--forge-stack-gap, var(--forge-spacing-medium, 16px));--_stack-height:var(--forge-stack-height);--_stack-stretch:var(--forge-stack-stretch, initial);--_stack-alignment:var(--forge-stack-alignment, normal);--_stack-justify:var(--forge-stack-justify, normal);--_stack-wrap:var(--forge-stack-wrap, wrap)}.forge-stack ::slotted(*){-webkit-box-flex:var(--_stack-stretch);flex:var(--_stack-stretch)}:host([inline]) .forge-stack{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}:host([inline][wrap]) .forge-stack{flex-wrap:wrap}:host(:not([inline])) .forge-stack{--_stack-height:var(--forge-stack-height, 100%)}:host([stretch]) ::slotted(*){--_stack-stretch:var(--forge-stack-stretch, 1)}:host([alignment=start]) .forge-stack{--_stack-alignment:var(--forge-stack-alignment, start)}:host([alignment=center]) .forge-stack{--_stack-alignment:var(--forge-stack-alignment, center)}:host([alignment=end]) .forge-stack{--_stack-alignment:var(--forge-stack-alignment, end)}:host([justify=start]) .forge-stack{--_stack-justify:var(--forge-stack-justify, start)}:host([justify=center]) .forge-stack{--_stack-justify:var(--forge-stack-justify, center)}:host([justify=end]) .forge-stack{--_stack-justify:var(--forge-stack-justify, end)}';
/**
 * @tag forge-stack
 *
 * @summary The stack is a utility component that helps manage spacing and alignment of immediate children along a vertical or horizontal axis.
 *
 * @description
 * The stack utility component uses flexbox under the hood, but it is not meant to be an abstraction or replacement for CSS flexbox.
 * Stack is simply a utility component for developer convenience. There are many UI patterns and situations where elements need to be
 * arranged horizontally or vertically with a specific gap inbetween. Instead of having to use an inline style or create a new CSS class for
 * these scenarios, you can reach for the stack. This keeps developers within a template and prevents having to jump around from HTML
 * to CSS. It also helps minimize the number of CSS classes being used for simple situations where basic flexbox is needed.
 *
 * @property {boolean} inline - Sets the direction of child items to be horizontal.
 * @property {boolean} wrap - Wrap is used to wrap child elements to a new row when there's not enough space. This only works when inline is set to true.
 * @property {boolean} stretch - Stretch allows each child element to take up as much width as possible until the parent container is filled. You can override this on each individual child element by changing its --forge-stack-stretch CSS custom property.
 * @property {string} gap - Controls the amount of space between child elements within a stack.
 * @property {StackAlignment} alignment - Controls the align-items property of the stack.
 * @property {StackAlignment} justify - Controls the justify-content property of the stack.
 *
 * @attribute {boolean} inline - Sets the direction of child items to be horizontal.
 * @attribute {boolean} wrap - Wrap is used to wrap child elements to a new row when there's not enough space. This only works when inline is set to true.
 * @attribute {boolean} stretch - Stretch allows each child element to take up as much width as possible until the parent container is filled. You can override this on each individual child element by changing its --forge-stack-stretch CSS custom property.
 * @attribute {string} gap - Controls the amount of space between child elements within a stack.
 * @attribute {StackAlignment} alignment - Controls the align-items property of the stack. See [justify-content on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).
 * @attribute {StackAlignment} justify - Controls the justify-content property of the stack. See [align-items on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).
 *
 * @cssproperty --forge-stack-alignment - Controls the align-items CSS property of the root stack element.
 * @cssproperty --forge-stack-justify - Controls the justify-content CSS property of the root stack element.
 * @cssproperty --forge-stack-gap - Controls the gap between each child element within a stack.
 * @cssproperty --forge-stack-height - Controls the height of the root stack element.
 * @cssproperty --forge-stack-stretch - Controls the flex shorthand property of a child element within the stack.
 *
 * @csspart root - The root container element.
 *
 * @slot - The default/unnamed slot for stack content.
 */
let StackComponent = class StackComponent extends BaseComponent {
    static get observedAttributes() {
        return [
            STACK_CONSTANTS.attributes.INLINE,
            STACK_CONSTANTS.attributes.WRAP,
            STACK_CONSTANTS.attributes.STRETCH,
            STACK_CONSTANTS.attributes.GAP,
            STACK_CONSTANTS.attributes.ALIGNMENT,
            STACK_CONSTANTS.attributes.JUSTIFY
        ];
    }
    constructor() {
        super();
        attachShadowTemplate(this, template, styles);
        this._foundation = new StackFoundation(new StackAdapter(this));
    }
    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case STACK_CONSTANTS.attributes.INLINE:
                this.inline = coerceBoolean(newValue);
                break;
            case STACK_CONSTANTS.attributes.WRAP:
                this.wrap = coerceBoolean(newValue);
                break;
            case STACK_CONSTANTS.attributes.STRETCH:
                this.stretch = coerceBoolean(newValue);
                break;
            case STACK_CONSTANTS.attributes.GAP:
                this.gap = newValue;
                break;
            case STACK_CONSTANTS.attributes.ALIGNMENT:
                this.alignment = newValue;
                break;
            case STACK_CONSTANTS.attributes.JUSTIFY:
                this.justify = newValue;
                break;
        }
    }
};
__decorate([
    FoundationProperty()
], StackComponent.prototype, "inline", void 0);
__decorate([
    FoundationProperty()
], StackComponent.prototype, "wrap", void 0);
__decorate([
    FoundationProperty()
], StackComponent.prototype, "stretch", void 0);
__decorate([
    FoundationProperty()
], StackComponent.prototype, "gap", void 0);
__decorate([
    FoundationProperty()
], StackComponent.prototype, "alignment", void 0);
__decorate([
    FoundationProperty()
], StackComponent.prototype, "justify", void 0);
StackComponent = __decorate([
    CustomElement({
        name: STACK_CONSTANTS.elementName
    })
], StackComponent);
export { StackComponent };
