"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContainerHStackStories = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const FormConfiguration_1 = require("../FormConfiguration");
const FormRuntime_1 = require("../FormRuntime");
const FormDesignConstants_1 = require("../Utilities/FormDesignConstants");
const XHStackContainer_1 = require("./XHStackContainer");
const ButtonFormControl_1 = require("../Controls/Web/ButtonFormControl");
const DefaultOnOff_1 = require("../Utilities/DefaultOnOff");
const MultiLineTextEditFormControl_1 = require("../Controls/Web/MultiLineTextEditFormControl");
const StoryData_1 = require("../../CommonUI/StoryBook/StoryData");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
function getUI() {
    let ui = new FormConfiguration_1.FormConfiguration();
    let hstackContainer = new XHStackContainer_1.XHStackContainer();
    // show border so we can see
    hstackContainer.overrideFormBorderSettings = DefaultOnOff_1.DefaultOnOff.On;
    let b = new ButtonFormControl_1.ButtonFormControl();
    b.label = "Save";
    let b2 = new ButtonFormControl_1.ButtonFormControl();
    b2.label = "Cancel";
    hstackContainer.add(b);
    hstackContainer.add(b2);
    hstackContainer.add(new MultiLineTextEditFormControl_1.MultiLineTextEditFormControl());
    ui.add(hstackContainer);
    return { form: ui, container: hstackContainer };
}
exports.ContainerHStackStories = [
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Horizontal Stack Container", "Left"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.container.alignment = XHStackContainer_1.HStackAlignment.CENTER;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Horizontal Stack Container", "Center"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.container.alignment = XHStackContainer_1.HStackAlignment.RIGHT;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Horizontal Stack Container", "Right"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.container.verticalAlignment = XHStackContainer_1.HStackVerticalAlignment.TOP;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Horizontal Stack Container", "Top"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.container.verticalAlignment = XHStackContainer_1.HStackVerticalAlignment.MIDDLE;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Horizontal Stack Container", "Middle"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.container.verticalAlignment = XHStackContainer_1.HStackVerticalAlignment.BOTTOM;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Horizontal Stack Container", "Bottom"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.container.containerBorderColor = "red";
        ui.container.containerBorderRadius = 50;
        ui.container.containerBorderStyle = FormDesignConstants_1.BorderStyle.Dashed;
        ui.container.containerBorderWidth = 10;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Horizontal Stack Container", "Override Border"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.container.containerBackgroundColor = "blue";
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Horizontal Stack Container", "Override Background Color"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.container.interControlSpacing = 30;
        ui.container.innerMargin = 30;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Horizontal Stack Container", "Override Spacing"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.container.overrideFormBorderSettings = DefaultOnOff_1.DefaultOnOff.DEFAULT;
        ui.form.defaultContainerBorderColor = UIStyleConstants_1.UIStyleConstants.RED_COLOR;
        ui.form.defaultShowContainerBorder = true;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Horizontal Stack Container", "Border From Form"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.form.defaultContainerBackgroundColor = UIStyleConstants_1.UIStyleConstants.YELLOW_COLOR;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Horizontal Stack Container", "Background From Form"),
    new StoryData_1.StoryNode(() => {
        let ui = getUI();
        ui.form.runtimeWidth = 375;
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: ui.form });
    }, "Form Designer", "Containers", "Horizontal Stack Container", "Thin and Stack Controls"),
    new StoryData_1.StoryNode(() => {
        let form = new FormConfiguration_1.FormConfiguration();
        form.defaultContainerBorderColor = UIStyleConstants_1.UIStyleConstants.GREEN_COLOR;
        form.defaultShowContainerBorder = true;
        form.add(new XHStackContainer_1.XHStackContainer());
        return (0, jsx_runtime_1.jsx)(FormRuntime_1.FormRuntime, { form: form });
    }, "Form Designer", "Containers", "Horizontal Stack Container", "Placeholder In Runtime"),
];
//# sourceMappingURL=XHStackContainer-stories.js.map