Symbol();
const BUTTON_STYLE = `
input[type="button"], input[type="submit"] {
    padding: 12px 16px;
    cursor: pointer;
    border: none;
    border-width: 1px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
    box-shadow: 0 10px 20px -6px rgba(0,0,0,.12);
    position: relative;
    margin-bottom: 20px;
    transition: .3s;
    
    background: #46b5d1;
    color: #fff;
    
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    transition: color .15s ease-in-out,
    background-color .15s ease-in-out,
    border-color .15s ease-in-out,
    box-shadow .15s ease-in-out,
    width: auto;
    height: calc(1.5em + 0.75rem + 2px);
    padding: .375rem .75rem;
    
    border: 1px solid #495057;
    color: #495057;
    background: white;
}
`;
const FORM_STYLE = `
form {
    display: block;
}
form legend {
    margin: 16px 0;
    font-weight: bold;
    font-size: 20px;
}
form.inline div {
    display: flex;
}
form > div {
    display: block;
    margin-bottom: 1rem;
}
input, textarea {
    font-size: 16px;

    border: none;
    border-bottom-style: none;
    border-bottom-width: medium;
    border-bottom: 1px solid rgba(0,0,0,.1);
    border-radius: 2px;
    padding: 0;
    
    height: 36px;
    background: #fff;
    color: rgba(0,0,0,.8);
    font-size: 14px;
    
    box-shadow: none !important;

    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-clip: padding-box;
    transition: border-color .15s ease-in-out , -webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out , box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out , box-shadow .15s ease-in-out , -webkit-box-shadow .15s ease-in-out;
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea {
    width: calc(100% - 1.5rem - 2px);
}
label {
    color: #000;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    
    display: inline-block;
    margin-bottom: .5rem;
}
${BUTTON_STYLE}
`;
class Component extends HTMLElement {
    #a;
    static get observedAttributes() {
        return [];
    }
    constructor(a){
        super(), this.#a = this.attachShadow({
            mode: "open"
        }), this.#a.innerHTML = a;
    }
    connectedCallback() {
        let a = this.constructor.observedAttributes;
        if (Array.isArray(a)) for (let b of a){
            let c = this.constructor.attr2Field(b);
            c && (this[c] = this[c]);
        }
    }
    attributeChangedCallback(a, b, c) {
        if (b === c) return;
        let d = this.constructor.observedAttributes;
        if (!Array.isArray(d) || !d.includes(a)) return;
        let e = this.constructor.attr2Field(a);
        e && (this[e] = c);
    }
    static attr2Field(a) {
        if (!(this.constructor.attr2FieldBlacklist || []).includes(a)) return a.replace("-", "_");
    }
    static get attr2FieldBlacklist() {
        return [];
    }
}
class PseudoForm extends Component {
    reportValidity() {
        return this.shadowRoot.querySelector("form").reportValidity();
    }
    checkValidity() {
        return this.shadowRoot.querySelector("form").checkValidity();
    }
    get elements() {
        return this.shadowRoot.querySelector("form").elements;
    }
}
const fireFbReady = ()=>{
    for (let c of (b = !0, a))c();
};
const runFbReady = (c)=>{
    b ? c() : a.push(c);
};
let a = [], b = !1;
customElements.define("form-navigation", class extends Component {
    static get observedAttributes() {
        return [
            "next",
            "prev"
        ];
    }
    constructor(){
        super(`
            <style>
                :host { display: block; }
                * { font-family: 'Noto Sans', sans-serif; }
                ${FORM_STYLE}
                .actions {
                    display: flex;
                    justify-content: space-between;
                }
                input {
                    max-width: 200px;
                }
                input.hidden {
                    display: none !important;
                }
            </style>
            <form>
                <div class="actions">
                    <input id="prev" type="button" value="Wróć" />
                    <input id="next" type="submit" value="Następny" />
                </div>
            </form>
        `), this.shadowRoot.querySelector("#prev").addEventListener("click", (a)=>{
            a.stopPropagation(), a.preventDefault(), this.prev();
        }), this.shadowRoot.querySelector("#next").addEventListener("click", (a)=>{
            a.stopPropagation(), a.preventDefault(), this.next();
        });
    }
    attributeChangedCallback(a, b, c) {
        if (b !== c) switch(a){
            case "next":
                this.shadowRoot.querySelector("#next").className = "hidden" === c ? "hidden" : "";
                break;
            case "prev":
                this.shadowRoot.querySelector("#prev").className = "hidden" === c ? "hidden" : "";
        }
    }
    next() {
        this.dispatchEvent(new CustomEvent("form:next", {
            bubbles: !0,
            composed: !0,
            detail: this.parentElement
        }));
    }
    prev() {
        this.dispatchEvent(new CustomEvent("form:prev", {
            bubbles: !0,
            composed: !0,
            detail: this.parentElement
        }));
    }
});
customElements.define("local-business-item", class extends Component {
    static get observedAttributes() {
        return [
            "name",
            "price",
            "picture-url"
        ];
    }
    constructor(){
        super(`
            <style>
                :host { display: block; }
                * { font-family: 'Noto Sans', sans-serif; }
                #item {
                    display: flex;
                    justify-content: space-between;
                }
                h3 {
                    font-weight: normal;
                }
                #price {
                    font-weight: bold;
                }
                img {
                    width: 200px;
                    max-width: 200px;
                }
            </style>
            <section id="item">
                <img alt="" src="" />
                <h3 id="name"></h3>
                <price-view id="price"></price-view>
            </section>
        `);
    }
    connectedCallback() {
        super.connectedCallback();
    }
    attributeChangedCallback(a, b, c) {
        super.attributeChangedCallback(a, b, c);
    }
    get price() {
        let a = parseInt(this.getAttribute("price"));
        return isNaN(a) ? 0 : a;
    }
    set price(a) {
        this.setAttribute("price", a), this.shadowRoot.querySelector("#price").value = a;
    }
    get name() {
        return this.getAttribute("name");
    }
    set name(a) {
        this.setAttribute("name", a), this.shadowRoot.querySelector("#name").textContent = a;
    }
    get picture_url() {
        return this.getAttribute("picture-url");
    }
    set picture_url(a) {
        this.setAttribute("picture-url", a), a && (this.shadowRoot.querySelector("img").src = a);
    }
});
customElements.define("local-business", class extends Component {
    static get observedAttributes() {
        return [
            "name",
            "service-id",
            "state"
        ];
    }
    constructor(){
        super(`
            <style>
                :host { display: block; }
                * { font-family: 'Noto Sans', sans-serif; }
                #items {
                    margin-top: 16px;
                }
            </style>
            <h2 id="name"></h2>
            <slot name="description"></slot>
            <section id="items">
                <slot name="item"></slot>
            </section>
        `);
    }
    connectedCallback() {
        super.connectedCallback();
    }
    attributeChangedCallback(a, b, c) {
        super.attributeChangedCallback(a, b, c);
    }
    get name() {
        return this.getAttribute("name") || "";
    }
    set name(a) {
        this.setAttribute("name", a), this.shadowRoot.querySelector("#name").textContent = a;
    }
    get state() {
        return this.getAttribute("state");
    }
    set state(a) {
        this.setAttribute("state", a);
    }
    get service_id() {
        return this.getAttribute("service-id");
    }
    set service_id(a) {
        this.setAttribute("service-id", a);
    }
});
customElements.define("local-businesses", class extends Component {
    static get observedAttributes() {
        return [
            "filter"
        ];
    }
    constructor(){
        super(`
            <style>
                :host { display: block; }
                * { font-family: 'Noto Sans', sans-serif; }
                ::slotted(local-service[local-business-visible="invisible"]) {
                    display: none;
                }
                input {
                    font-size: 20pt;
                    line-height: 2.6em;
                    height: 2.6em;
                    margin: 0;
                    padding: 0;
                    width: 100%;
                    border:none;
                    outline:none;
                    display: block;
                    background: transparent;
                    border-bottom: 1px solid #ccc;
                    text-indent: 20px;
                }
            </style>
            <section>
                <input type="text" id="filter" placeholder="Filtruj" />
            </section>
            <section id="items">
                <slot name="services"></slot>
            </section>
        `);
        {
            let a = this.shadowRoot.querySelector("#filter"), b = null;
            a.addEventListener("change", (a)=>{
                a.stopPropagation(), this.filter = a.target.value;
            }), a.addEventListener("keyup", (a)=>{
                a.stopPropagation();
                let c = a.target.value;
                b && clearTimeout(b), b = setTimeout(()=>{
                    this.filter = c, b = null;
                }, 1000 / 3);
            });
        }
    }
    connectedCallback() {
        this.filter = this.getAttribute("filter");
    }
    attributeChangedCallback(a, b, c) {
        super.attributeChangedCallback(a, b, c);
    }
    get filter() {
        return this.getAttribute("filter");
    }
    set filter(a) {
        if (a && "" !== a) for (let b of (this.setAttribute("filter", a), this.querySelectorAll("local-business")))b.name && (b.name.includes(a) ? b.setAttribute("local-business-visible", "visible") : b.setAttribute("local-business-visible", "invisible"));
        else for (let c of (this.removeAttribute("filter"), this.querySelectorAll("local-business")))c.removeAttribute("local-business-visible");
    }
});
customElements.define("login-form", class extends Component {
    constructor(){
        super(`
            <style>
                :host { display: block; }
                * { font-family: 'Noto Sans', sans-serif; }
                ${FORM_STYLE}
            </style>
            <form>
                <div>
                    <label>Login</label>
                    <input name="login" placeholder="Login" type="text" required />
                </div>
                <div>
                    <label>Hasło</label>
                    <input name="pass" placeholder="Hasło" type="password" required />
                </div>
                <div>
                    <input type="button" value="Zaloguj" />
                </div>
            </form>
        `);
    }
});
customElements.define("facebook-button", class extends Component {
    #a;
    static get observedAttributes() {
        return [
            "width",
            "height",
            "fb-sdk"
        ];
    }
    constructor(){
        super(`
            <style>
                :host {
                    display: block;
                }
                #not-available {
                    display: block;
                }
                #svg {
                    display: none;
                }
                :host([fb-sdk="available"]) #not-available {
                    display: none;
                }
                :host([fb-sdk="available"]) #svg {
                    display: block;
                }
                
                ${FORM_STYLE}
            </style>
            <p id="not-available">Skrypty Facebook są zablokowane przez rozszerzenie przeglądarki</p>
            <div id="svg">
                <svg id="fb-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xml:space="preserve">
                    <path fill-rule="evenodd" clip-rule="evenodd" fill="#3B5998" d="M448 512h-87.999c-22.094 0-39.999-17.922-39.999-40V360.001c0-22.094 17.905-39.999 39.999-39.999h12.922c8.32 0 16.844-6.656 19.062-15.031l8.484-31.953c2.484-9.312-2.812-17.023-11.852-17.023H360c-22.094 0-39.999-17.902-39.999-39.988v-16C320.001 177.905 337.906 160 360 160h24.008c8.82 0 16-7.156 16-16v-32.004c0-8.828-7.18-16.004-16-16.004H336c-44.187 0-79.991 35.828-79.991 80.011v40.004c0 22.085-17.922 39.988-40.003 39.988h-7.625c-9.039 0-16.379 7.711-16.379 17.023v31.953c0 8.375 6.746 15.031 15.07 15.031h8.934c22.082 0 40.003 17.905 40.003 39.999V472c0 22.078-17.922 40-40.003 40h-8c-8.844 0-16.004-7.172-16.004-16 0-8.844 7.16-16 16.004-16 8.824 0 16-7.172 16-16v-95.999c0-8.844-7.175-16-16-16H197.51c-20.719 0-37.511-16.578-37.511-37.577v-47.922c0-23.156 18.371-42.512 41.027-42.512h6.98c8.824 0 16-7.16 16-15.984v-40.004c0-57.441 46.559-103.995 103.995-103.995h64.008c22.086 0 39.984 17.902 39.984 39.988v48.004c0 22.085-17.898 40.003-39.984 40.003H352.001v16.004c0 8.824 7.156 15.984 16 15.984h29.969c22.672 0 37.398 19.355 33.062 42.512l-8.992 47.922c-3.93 20.999-23.82 37.577-44.539 37.577h-9.5c-8.844 0-16 7.156-16 16V464c0 8.828 7.156 16 16 16H448c17.672 0 32-14.328 32-32V64.007c0-17.688-14.328-32.003-32-32.003H64.007c-17.672 0-32.003 14.316-32.003 32.003V448c0 17.672 14.332 32 32.003 32h16c8.828 0 16.003 7.156 16.003 16 0 8.828-7.175 16-16.003 16h-16C28.668 512 0 483.344 0 448V64.007C0 28.648 28.668 0 64.007 0H448c35.359 0 64 28.648 64 64.007V448c0 35.344-28.641 64-64 64zm-304.001-32c8.844 0 16 7.156 16 16 0 8.828-7.156 16-16 16-8.828 0-16.004-7.172-16.004-16 0-8.844 7.176-16 16.004-16z"/>
                </svg>
                <slot></slot>
            </div>
        `), this.shadowRoot.querySelector("#fb-icon").addEventListener("click", (a)=>{
            if (a.stopPropagation(), a.preventDefault(), !this.#a) return console.info("Facebook SDK is not available");
            FB.login((a)=>{
                "connected" === a.status && FB.api("/me?fields=id,name,email", ({ id: a , name: b , email: c  })=>{
                    console.info({
                        id: a,
                        name: b,
                        email: c
                    }), this.dispatchEvent(new CustomEvent("facebook:account", {
                        bubbles: !0,
                        composed: !0,
                        detail: {
                            id: a,
                            name: b,
                            email: c
                        }
                    }));
                });
            }, {
                scope: "public_profile,email",
                return_scopes: !0
            });
        });
    }
    connectedCallback() {
        super.connectedCallback(), runFbReady(()=>{
            this.setAttribute("fb-sdk", "available"), this.dispatchEvent(new CustomEvent("facebook:available", {
                bubbles: !0,
                composed: !0
            }));
        });
    }
    get width() {
        return this.getAttribute("width");
    }
    set width(a) {
        this.setAttribute("width", a), this.shadowRoot.querySelector("svg").setAttribute("width", a);
    }
    get height() {
        return this.getAttribute("width");
    }
    set height(a) {
        this.setAttribute("height", a), this.shadowRoot.querySelector("svg").setAttribute("height", a);
    }
    get fb_sdk() {
        return !!this.#a;
    }
    set fb_sdk(a) {
        this.setAttribute("fb-sdk", a), this.#a = "available" === a;
    }
});
customElements.define("account-view", class extends Component {
    static get observedAttributes() {
        return [
            "facebook-id",
            "id",
            "name",
            "email"
        ];
    }
    constructor(){
        super(`
            <style>
                :host {
                    display: block;
                }
                :host(:not([facebook-id = ""])) #fb-id {
                    display: block;
                }
                :host([facebook-id = ""]) #fb-id {
                    display: none;
                }
                :host([facebook-id = ""]) #fb-button {
                    display: flex;
                    padding: .375rem .75rem;
                }
                #fb-button {
                    display: none;
                }
                facebook-button {
                    margin-right: 16px;
                }
                ${FORM_STYLE}
            </style>
            <div>
                <input id="id" name="id" readonly type="hidden" />
            </div>
            <div>
                <label>Login</label>
                <input id="name" name="name" readonly />
            </div>
            <div>
                <label>E-Mail</label>
                <input id="email" name="email" readonly />
            </div>
            <div id="fb-button">
                <facebook-button width="100">
                    <p>Powiąż z kontem Facebook</p>
                </facebook-button>
            </div>
            <div id="fb-id">
                <label>Powiązane konto Facebook</label>
                <input id="facebook_id" name="facebook_id" readonly />
            </div>
        `), this.addEventListener("facebook:available", (a)=>{
            a.preventDefault(), a.stopPropagation();
        });
    }
    get name() {
        return this.getAttribute("name") || "";
    }
    set name(a) {
        this.setAttribute("name", a), this.shadowRoot.querySelector("#name").value = a;
    }
    get email() {
        return this.getAttribute("email") || "";
    }
    set email(a) {
        this.setAttribute("email", a), this.shadowRoot.querySelector("#email").value = a;
    }
    get facebook_id() {
        return this.getAttribute("facebook-id");
    }
    set facebook_id(a) {
        this.setAttribute("facebook-id", a), this.shadowRoot.querySelector("#facebook_id").value = a;
    }
});
customElements.define("ow-account", class extends Component {
    static get observedAttributes() {
        return [
            "mode",
            "id",
            "name",
            "email",
            "facebook-id"
        ];
    }
    constructor(){
        super(`
            <style>
                :host { display: block; }
                * { font-family: 'Noto Sans', sans-serif; }
                #form > * {
                    display: none;
                }
                :host([mode="login"]) #form > login-form, :host([mode="login"]) #switch-register {
                    display: block !important;
                }
                :host([mode="register"]) #form >  register-form, :host([mode="register"]) #switch-login {
                    display: block !important;
                }
                account-view {
                    display: none;
                }
                :host([mode="display"]) account-view { display: block; }
                :host([mode="display"]) #form { display: none; }
                :host([mode="form"]) #form,
                :host([mode="login"]) #form { display: block; }
                
                a {
                    display: block;
                    cursor: pointer;
                }
                a:hover {
                    color: var(--hover-color);
                    border-bottom-color: var(--hover-color);
                    text-decoration: none;
                }
                
                ${FORM_STYLE}
            </style>
            <article id="form">
                <login-form></login-form>
                <register-form></register-form>
                <section id="switch-register">
                    <a>Nie masz konta? Utwórz nowe</a>
                </section>
                <section id="switch-login">
                    <a>Masz konta? Zaloguj się</a>
                </section>
            </article>
            <account-view></account-view>
        `), this.shadowRoot.querySelector("#switch-login > a").addEventListener("click", (a)=>{
            a.stopPropagation(), a.preventDefault(), this.mode = "login";
        }), this.shadowRoot.querySelector("#switch-register > a").addEventListener("click", (a)=>{
            a.stopPropagation(), a.preventDefault(), this.mode = "register";
        }), this.addEventListener("facebook:account", (a)=>{
            a.stopPropagation(), a.preventDefault(), this.mode = "facebook";
            let { id: b , name: c , email: d  } = a.details;
            console.info({
                id: b,
                name: c,
                email: d
            });
        });
    }
    connectedCallback() {
        "" === this.mode && (this.mode = "login"), this.name = this.name, this.email = this.email, this.facebook_id = this.facebook_id;
    }
    attributeChangedCallback(a, b, c) {
        super.attributeChangedCallback(a, b, c);
    }
    get mode() {
        return this.getAttribute("mode") || "";
    }
    set mode(a) {
        a = [
            "login",
            "register",
            "display"
        ].includes(a) ? a : "login", this.setAttribute("mode", a);
    }
    get name() {
        return this.getAttribute("name") || "";
    }
    set name(a) {
        this.setAttribute("name", a), this.shadowRoot.querySelector("account-view").name = a;
    }
    get email() {
        return this.getAttribute("email") || "";
    }
    set email(a) {
        this.setAttribute("email", a), this.shadowRoot.querySelector("account-view").email = a;
    }
    get facebook_id() {
        return this.getAttribute("facebook-id");
    }
    set facebook_id(a) {
        this.setAttribute("facebook-id", a), this.shadowRoot.querySelector("account-view").facebook_id = a;
    }
});
customElements.define("ow-nav", class extends Component {
    constructor(){
        super(`
            <style>
                :host { display: block; }
                * { font-family: 'Noto Sans', sans-serif; }
                section {
                    display: flex;
                    align-items: stretch;
                    align-content: stretch;
                    
                    margin-bottom: 12px;
                    color: #2b2727;
                    font-family: Raleway, sans-serif;
                    font-size: 14px;
                    line-height: 32px;
                }
                section::after {
                    display: block;
                    content: ' ';
                    border: none;
                    padding: 10px 18px;
                    text-decoration: none;
                    color: #2b2727;
                    text-transform: uppercase;
                    align-self: stretch;
                    flex-shrink: 20;
                    flex-grow: 20;
                }
            </style>
            <section>
                <slot></slot>
            </section>
        `);
    }
});
customElements.define("ow-path", class extends Component {
    static get observedAttributes() {
        return [
            "selected",
            "path"
        ];
    }
    constructor(){
        super(`
            <style>
                :host { display: block; }
                * { font-family: 'Noto Sans', sans-serif; }
                a {
                    display: block;
                    padding: 10px 18px;
                    text-decoration: none;
                    color: #495057;
                    text-transform: uppercase;

                    border: none;
                    border-bottom: 1px solid var(--border-slim-color);
                }
                a:hover {
                    color: var(--hover-color);
                }
                :host(:not([selected])) a {
                    border: none;
                }
            </style>
            <a><slot></slot></a>
        `);
    }
    connectedCallback() {
        this.selected = this.getAttribute("selected");
    }
    attributeChangedCallback(a, b, c) {
        super.attributeChangedCallback(a, b, c);
    }
    get selected() {
        return "selected" === this.getAttribute("selected");
    }
    set selected(a) {
        "selected" === a ? this.setAttribute("selected", "selected") : this.removeAttribute("selected");
    }
    get path() {
        return this.getAttribute("path") || "";
    }
    set path(a) {
        if (!a || "" === a) {
            this.removeAttribute("path");
            return;
        }
        this.setAttribute("path", a), this.shadowRoot.querySelector("a").setAttribute("href", a);
    }
});
customElements.define("price-view", class extends HTMLElement {
    #a;
    static get observedAttributes() {
        return [
            "value",
            "currency"
        ];
    }
    constructor(){
        super();
        let a = this.#a = this.attachShadow({
            mode: "closed"
        });
        a.innerHTML = `
            <style>
                :host { display: block; }
                * { font-family: 'Noto Sans', sans-serif; }
                #price {
                    font-weight: bold;
                }
            </style>
            <span id="price"></span>
        `;
    }
    connectedCallback() {
        this.#a.querySelector("#price").textContent = this.formatted;
    }
    attributeChangedCallback(a, b, c) {
        b !== c && "price" === a && (this.value = c);
    }
    get formatted() {
        let a = this.value, b = a % 100;
        return `${Math.ceil(a / 100)},${b < 10 ? `0${b}` : b}${this.currency}`;
    }
    get value() {
        let a = parseInt(this.getAttribute("value"));
        return isNaN(a) ? 0 : a;
    }
    set value(a) {
        this.setAttribute("value", a), this.#a.querySelector("#price").textContent = this.formatted;
    }
    get currency() {
        return this.getAttribute("currency") || "PLN";
    }
});
customElements.define("price-input", class extends HTMLElement {
    #a;
    static get observedAttributes() {
        return [
            "value",
            "currency",
            "required",
            "name"
        ];
    }
    constructor(){
        super();
        let b = this.#a = this.attachShadow({
            mode: "closed"
        });
        b.innerHTML = `
            <style>
                :host { display: block; }
                * { font-family: 'Noto Sans', sans-serif; }
                #price {
                    font-weight: bold;
                }
                #view {
                    display: flex;
                }
                #value {
                    display: flex;
                    justify-content: start;
                }
                ${FORM_STYLE}
            </style>
            <div id="view">
                <input
                    id="price" type="number" min="0.00" max="10000.00" step="0.01"
                    placeholder="Cena, np: 12.23"
                />
                <span id="currency"></span>
            </div>
        `;
        let c = b.querySelector("#price");
        c.addEventListener("change", (a)=>{
            a.stopPropagation(), this.value = c.value;
        });
    }
    connectedCallback() {
        this.#a.querySelector("#currency").textContent = this.currency, this.#a.querySelector("#price").value = this.value;
    }
    attributeChangedCallback(a, b, c) {
        if (b === c) return;
        let d = this.#a.querySelector("#price");
        switch(a){
            case "price":
                this.value = c;
                break;
            case "currency":
                this.currency = c;
                break;
            case "required":
                c ? d.setAttribute("required", "required") : d.removeAttribute("required");
                break;
            case "readonly":
                c ? d.setAttribute("readonly", "readonly") : d.removeAttribute("readonly");
                break;
            case "name":
                this.setAttribute("name", c);
        }
    }
    get value() {
        return Math.floor(100 * parseFloat(this.#a.querySelector("#price").value));
    }
    set value(a) {
        this.setAttribute("value", a), this.#a.querySelector("#price").value = a;
    }
    get currency() {
        return this.getAttribute("currency") || "PLN";
    }
    set currency(a) {
        this.setAttribute("currency", a), this.#a.querySelector("#currency").textContent = this.currency;
    }
    reportValidity() {
        return this.#a.querySelector("input").reportValidity();
    }
    get name() {
        return this.getAttribute("name");
    }
    set name(a) {
        this.setAttribute("name", a);
    }
});
customElements.define("register-basic-form", class extends PseudoForm {
    constructor(){
        super(`
            <style>
                :host {
                    display: block;
                }
                ${FORM_STYLE}
            </style>
            <form id="step-1">
                <div>
                    <label>Login</label>
                    <input id="login" name="login" placeholder="Login" type="text" required autofocus />
                </div>
                <div>
                    <label>E-Mail</label>
                    <input name="email" placeholder="Email" type="email" required />
                </div>
                <div>
                    <label>Hasło</label>
                    <input name="pass" placeholder="Hasło" type="password" required />
                </div>
                <form-navigation></form-navigation>
            </form>
        `);
        let b = this.shadowRoot.querySelector("form");
        b.addEventListener("submit", (a)=>{
            a.preventDefault(), a.stopPropagation(), this.shadowRoot.querySelector("form-navigation").next();
        });
    }
});
let c = (b)=>`
        <style>
            :host { display: block; }
            * { font-family: 'Noto Sans', sans-serif; }
            
            form {
                display: flex;
                justify-content: flex-start;
            }
            #fields > *:not(:last-child) {
                margin-right: 16px;
            }
            #fields > div > label {
                margin-right: 16px;
            }
            #fields {
                display: flex;
                justify-content: flex-start;
                width: 100%;
                max-width: 100%;
            }
            
            ${FORM_STYLE}
        </style>
        <form class="inline">
            <div id="fields">
                <image-input></image-input>
                <input type="hidden" name="picture_url" id="picture_url" />
                <div id="name" class="field">
                    <label>Nazwa</label>
                    <input class="item-name" name="items[${b}][name]" type="text" required>
                </div>
                <div id="price" class="field">
                    <label>Cena</label>
                    <price-input class="item-price" name="items[${b}][price]" required>
                    </price-input>
                </div>
            </div>
            <div><input class="remove" type="button" value="Usuń"></div>
        </form>
    `;
customElements.define("register-item-form-row", class extends PseudoForm {
    static get observedAttributes() {
        return [
            "idx",
            "name"
        ];
    }
    constructor(){
        super(c()), this.addEventListener("item:removed", ()=>{
            this.setAttribute("removed", "removed");
            let a = this.parentElement;
            this.remove(), a.dispatchEvent(new CustomEvent("item:removed", {
                bubbles: !0,
                composed: !0
            }));
        });
    }
    connectedCallback() {
        this.shadowRoot.innerHTML = c(this.idx);
        let a = this.shadowRoot.querySelector("image-input");
        this.addEventListener("image-input:uploaded", (b)=>{
            b.preventDefault(), b.stopPropagation(), this.picture_url = a.url;
        }), this.shadowRoot.querySelector("form").addEventListener("submit", (a)=>{
            a.preventDefault(), a.stopPropagation(), this.reportValidity();
        }), this.shadowRoot.querySelector(".remove").addEventListener("click", (a)=>{
            a.preventDefault(), a.stopPropagation(), this.dispatchEvent(new CustomEvent("item:removed", {
                bubbles: !0,
                composed: !1
            }));
        });
    }
    attributeChangedCallback(a, b, c) {
        if (b !== c) switch(a){
            case "idx":
                return this.updateNames();
            case "picture-url":
                return this.picture_url = c;
        }
    }
    get inputs() {
        return [
            d(this.shadowRoot.querySelector(".item-name")),
            d(this.shadowRoot.querySelector(".item-price")), 
        ];
    }
    updateNames() {
        let a = this.getAttribute("idx");
        for (let b of this.shadowRoot.querySelectorAll(".field")){
            let c = b.id;
            b.querySelector("input, price-input").setAttribute("name", `items[${a}][${c}]`);
        }
    }
    get idx() {
        return this.getAttribute("idx");
    }
    set idx(a) {
        this.setAttribute("idx", a);
    }
    get picture_url() {
        return this.getAttribute("picture-url");
    }
    set picture_url(a) {
        this.setAttribute("picture-url", a), this.shadowRoot.querySelector("image-input").url = a, this.shadowRoot.querySelector("#picture_url").value = a;
    }
    reportValidity() {
        return super.reportValidity() && this.shadowRoot.querySelector("price-input").reportValidity();
    }
});
let d = ({ name: a , value: b  })=>({
        name: a,
        value: b
    });
let c1 = (a)=>{
    let b = 0;
    for (let c of a.querySelectorAll("register-item-form-row"))c.idx = b++;
    return b;
};
customElements.define("register-items-form", class extends PseudoForm {
    constructor(){
        super(`
            <style>
                :host { display: block; }
                * { font-family: 'Noto Sans', sans-serif; }
                
                ::slotted(section) {
                    display: flex;
                }
                
                ${FORM_STYLE}
            </style>
            <form>
                <article id="items">
                    <slot></slot>
                </article>
                <div>
                    <input type="button" id="add-item" value="Dodaj usługę/produkt" />
                </div>
                <form-navigation></form-navigation>
            </form>
        `), this.addEventListener("item:removed", (a)=>{
            a.stopPropagation(), c1(this);
        }), this.addEventListener("form:next", (a)=>{
            for (let b of this.querySelectorAll("item-form-row"))b.reportValidity() || (a.stopPropagation(), a.preventDefault());
        }), this.shadowRoot.querySelector("#add-item").addEventListener("click", (a)=>{
            a.stopPropagation(), a.preventDefault(), this.appendChild(document.createElement("register-item-form-row")), c1(this);
        });
    }
    get inputs() {
        return [
            ...this.querySelectorAll("register-item-form-row")
        ].map((a)=>a.inputs);
    }
});
customElements.define("register-business-form", class extends PseudoForm {
    constructor(){
        super(`
            <style>
                :host { display: block; }
                * { font-family: 'Noto Sans', sans-serif; }
                ${FORM_STYLE}
            </style>
            <form id="step-2">
                <div>
                    <input name="name" placeholder="Nazwa usługi" type="text" required autofocus />
                </div>
                <div>
                    <label>description</label>
                    <textarea name="description" required></textarea>
                </div>
                <form-navigation></form-navigation>
            </form>
        `), this.shadowRoot.querySelector("form").addEventListener("submit", (a)=>{
            a.preventDefault(), a.stopPropagation(), this.shadowRoot.querySelector("form-navigation").next();
        });
    }
});
customElements.define("register-submit-form", class extends PseudoForm {
    constructor(){
        super(`
            <style>
                :host { display: block; }
                * { font-family: 'Noto Sans', sans-serif; }
                ${FORM_STYLE}
                .item-view {
                    display: flex;
                    justify-content: space-between;
                }
                .item-view > * {
                    min-width: 100px;
                    max-width: 48%;
                }
            </style>
            <form id="step-4" method="post" action="/register">
                <div id="copied">
                    <input id="hidden-login" name="login" type="hidden" />
                    <input id="hidden-email" name="email" type="hidden" />
                    <input id="hidden-pass" name="password" type="hidden" />
                    <input id="hidden-name" name="name" type="hidden" />
                    <input id="hidden-description" name="description" type="hidden" />
                </div>
                <div>
                    <label>Login</label>
                    <input readonly id="preview-login">
                </div>
                <div>
                    <label>Email</label>
                    <input readonly id="preview-email">
                </div>
                <div>
                    <label>Password</label>
                    <input readonly id="preview-pass" type="password">
                </div>
                <div>
                    <label>Name</label>
                    <input readonly id="preview-name">
                </div>
                <div>
                    <label>Description</label>
                    <input readonly id="preview-description">
                </div>
                <input type="hidden" name="account_type" id="account_type" />
                <div id="items">
                </div>
                
                <div class="actions">
                    <form-navigation next="hidden"></form-navigation>
                    <input type="submit" value="Dodaj usługi/produkty" />
                </div>
            </form>
        `);
    }
    updateField(a, b) {
        this.shadowRoot.querySelector(`[id="hidden-${a}"]`).value = b, this.shadowRoot.querySelector(`[id="preview-${a}"]`).value = b;
    }
    setItems(a) {
        let b = this.shadowRoot.querySelector("#items");
        for (let c of (b.innerHTML = "", a)){
            let d = b.appendChild(document.createElement("div"));
            d.className = "item-view";
            let [e, f] = c;
            d.innerHTML = `
                <input type="text" name="${e.name}" value="${e.value}" readonly />
                <input type="hidden" name="${f.name}" value="${f.value}" readonly />
                <price-view value="${f.value}"></price-view>
            `;
        }
    }
    set accountType(a) {
        this.shadowRoot.querySelector("#account_type").value = a;
    }
});
customElements.define("register-user-type", class extends Component {
    constructor(){
        super(`
            <style>
                :host {
                    display: block;
                }
                ul, li {
                    list-style: none;
                }
                ul {
                    display: flex;
                    justify-content: space-between;
                }
                a {
                    display: block;
                    border: 1px solid var(--border-slim-color);
                    border-radius: 16px;
                    padding: 16px;
                    text-align: center;
                    cursor: pointer;
                    color: var(--border-slim-color);
                }
                svg {
                    width: 200px;
                    height: 200px;
                }
                svg, path {
                    fill: var(--border-slim-color) !important;
                }
            </style>
            <article>
                <ul>
                    <li>
                        <a id="user">
                            <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5.875a3.625 3.625 0 0 0-1.006 7.109c-1.194.145-2.218.567-2.99 1.328-.982.967-1.479 2.408-1.479 4.288a.475.475 0 1 0 .95 0c0-1.72.453-2.88 1.196-3.612.744-.733 1.856-1.113 3.329-1.113s2.585.38 3.33 1.113c.742.733 1.195 1.892 1.195 3.612a.475.475 0 1 0 .95 0c0-1.88-.497-3.32-1.48-4.288-.77-.76-1.795-1.183-2.989-1.328A3.627 3.627 0 0 0 7.5.875ZM4.825 4.5a2.675 2.675 0 1 1 5.35 0 2.675 2.675 0 0 1-5.35 0Z" fill="currentColor"/>
                            </svg>
                            <div>Użytkownik</div>
                        </a>
                    </li>
                    <li>
                        <a id="local-service">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 489.4 489.4" xml:space="preserve">
                                <path d="M347.7 263.75h-66.5c-18.2 0-33 14.8-33 33v51c0 18.2 14.8 33 33 33h66.5c18.2 0 33-14.8 33-33v-51c0-18.2-14.8-33-33-33zm9 84c0 5-4.1 9-9 9h-66.5c-5 0-9-4.1-9-9v-51c0-5 4.1-9 9-9h66.5c5 0 9 4.1 9 9v51z"/>
                                <path d="M489.4 171.05c0-2.1-.5-4.1-1.6-5.9l-72.8-128c-2.1-3.7-6.1-6.1-10.4-6.1H84.7c-4.3 0-8.3 2.3-10.4 6.1l-72.7 128c-1 1.8-1.6 3.8-1.6 5.9 0 28.7 17.3 53.3 42 64.2v211.1c0 6.6 5.4 12 12 12h381.3c6.6 0 12-5.4 12-12v-209.6c0-.5 0-.9-.1-1.3 24.8-10.9 42.2-35.6 42.2-64.4zM91.7 55.15h305.9l56.9 100.1H34.9l56.8-100.1zm256.6 124c-3.8 21.6-22.7 38-45.4 38s-41.6-16.4-45.4-38h90.8zm-116.3 0c-3.8 21.6-22.7 38-45.4 38s-41.6-16.4-45.5-38H232zm-207.2 0h90.9c-3.8 21.6-22.8 38-45.5 38-22.7.1-41.6-16.4-45.4-38zm176.8 255.2h-69v-129.5c0-9.4 7.6-17.1 17.1-17.1h34.9c9.4 0 17.1 7.6 17.1 17.1v129.5h-.1zm221.7 0H225.6v-129.5c0-22.6-18.4-41.1-41.1-41.1h-34.9c-22.6 0-41.1 18.4-41.1 41.1v129.6H66v-193.3c1.4.1 2.8.1 4.2.1 24.2 0 45.6-12.3 58.2-31 12.6 18.7 34 31 58.2 31s45.5-12.3 58.2-31c12.6 18.7 34 31 58.1 31 24.2 0 45.5-12.3 58.1-31 12.6 18.7 34 31 58.2 31 1.4 0 2.7-.1 4.1-.1v193.2zm-4.1-217.1c-22.7 0-41.6-16.4-45.4-38h90.9c-3.9 21.5-22.8 38-45.5 38z"/>
                            </svg>
                            <div>Usługodawca</div>
                        </a>
                    </li>
                </ul>
            </article>
        `);
        let a = this.shadowRoot.querySelector("#user");
        a.addEventListener("click", (a)=>{
            a.preventDefault(), a.stopPropagation(), this.dispatchEvent(new CustomEvent("account:type:user", {
                bubbles: !0,
                composed: !0
            }));
        });
        let b = this.shadowRoot.querySelector("#local-service");
        b.addEventListener("click", (a)=>{
            a.preventDefault(), a.stopPropagation(), this.dispatchEvent(new CustomEvent("account:type:local-service", {
                bubbles: !0,
                composed: !0
            }));
        });
    }
});
customElements.define("register-user-form", class extends Component {
    static get observedAttributes() {
        return [
            "mode"
        ];
    }
    constructor(){
        super(`
            <style>
                :host { display: block; }
                * { font-family: 'Noto Sans', sans-serif; }
                #icons {
                    display: flex;
                    justify-content: space-between;
                }
                #form {
                    display: none;
                }
                :host([mode="email"]) #form {
                    display: block;
                }
                :host([mode="email"]) #email-icon {
                    display: none;
                }
                #icons .option {
                    display: block;
                    border-radius: 16px;
                    padding: 16px;
                    text-align: center;
                    cursor: pointer;
                }
                .option {
                    min-width: 45%;
                }
                ${FORM_STYLE}
            </style>
            <section id="icons">
                <div class="option">
                    <svg id="email-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
                        <path d="M123.25 24.192c0-.018 0-.034-.005-.052s-.007-.063-.009-.094a1.734 1.734 0 0 0-.083-.408c-.006-.018 0-.037-.011-.055s-.01-.015-.013-.023a1.734 1.734 0 0 0-.227-.407c-.021-.028-.043-.053-.066-.08a1.755 1.755 0 0 0-.31-.294c-.012-.009-.022-.02-.034-.028a1.744 1.744 0 0 0-.414-.2c-.034-.012-.068-.022-.1-.032a1.733 1.733 0 0 0-.474-.073H6.5a1.733 1.733 0 0 0-.474.073c-.035.01-.068.02-.1.032a1.744 1.744 0 0 0-.414.2c-.012.008-.022.019-.034.028a1.755 1.755 0 0 0-.31.294c-.022.027-.045.052-.066.08a1.734 1.734 0 0 0-.227.407c0 .008-.01.015-.013.023s-.005.037-.011.055a1.734 1.734 0 0 0-.083.408c0 .032-.009.063-.009.094s-.005.034-.005.052v79.615c0 .023.006.045.007.068a1.737 1.737 0 0 0 .019.188c.008.051.015.1.027.152a1.74 1.74 0 0 0 .056.179c.017.047.033.094.054.139a1.729 1.729 0 0 0 .093.172c.024.04.048.081.075.119a1.743 1.743 0 0 0 .125.152c.033.036.066.072.1.106.021.019.037.042.059.061s.036.017.052.03a1.736 1.736 0 0 0 .452.263c.035.014.071.022.107.033a1.732 1.732 0 0 0 .488.085c.012 0 .023.006.035.006H121.501c.012 0 .023-.006.034-.006a1.732 1.732 0 0 0 .489-.085c.035-.011.07-.019.1-.033a1.736 1.736 0 0 0 .453-.263c.016-.013.036-.017.052-.03s.038-.042.059-.061c.036-.034.069-.069.1-.106a1.743 1.743 0 0 0 .125-.152c.027-.038.051-.078.075-.119a1.729 1.729 0 0 0 .093-.172c.021-.045.037-.092.054-.139a1.74 1.74 0 0 0 .056-.179c.012-.05.019-.1.027-.152a1.737 1.737 0 0 0 .019-.188c0-.023.007-.045.007-.068zM45.8 60.316l17.058 14.677a1.751 1.751 0 0 0 2.283 0L82.2 60.316l35.512 41.741H10.289zM8.25 99.052V28.007l34.9 30.026zm76.6-41.019 34.9-30.026v71.045zm31.931-32.091L81.276 56.493c-.006.005-.014.008-.02.014l-.019.02L64 71.358 46.763 56.527l-.019-.02-.02-.014-35.507-30.551z"/>
                    </svg>
                    
                    <form id="form" method="post" action="/register">
                        <input type="hidden" id="account_type" name="account_type">
                        <input type="hidden" id="facebook_id" name="facebook_id">
                        <div>
                            <label>E-Mail</label>
                            <input id="email" type="email" name="email">
                        </div>
                        <div>
                            <label>Login</label>
                            <input id="login" type="text" name="login">
                        </div>
                        <div>
                            <label>Hasło</label>
                            <input id="password" type="password" name="password">
                        </div>
                        <div>
                            <input type="submit" value="Zarejestruj" />
                        </div>
                    </form>
                </div>
                <div class="option">
                    <facebook-button></facebook-button>
                </div>
            </section>
        `);
        let a = this.shadowRoot.querySelector("form");
        this.addEventListener("facebook:account", (b)=>{
            b.stopPropagation(), b.preventDefault(), this.mode = "facebook";
            let { id: c , name: d , email: e  } = b.detail;
            a.querySelector("#email").value = e, a.querySelector("#login").value = d, a.querySelector("#password").value = crypto.randomUUID(), a.querySelector("#facebook_id").value = c, a.querySelector("#account_type").value = "User", a.submit();
        }), this.shadowRoot.querySelector("#email-icon").addEventListener("click", (a)=>{
            a.stopPropagation(), a.preventDefault(), this.mode = "email";
        });
    }
    connectedCallback() {
        this.mode = "";
    }
    attributeChangedCallback(a, b, c) {
        b !== c && "mode" === a && ("email" === c || "facebook" === c || "" === c) && (this.mode = c);
    }
    get mode() {
        return this.getAttribute("mode") || "";
    }
    set mode(a) {
        this.setAttribute("mode", a);
    }
});
customElements.define("register-form", class extends Component {
    static get observedAttributes() {
        return [
            "step"
        ];
    }
    constructor(){
        super(`
            <style>
                :host { display: block; }
                * { font-family: 'Noto Sans', sans-serif; }
                [id^="step-"] { display: none; }
                :host([step="0"]) #step-0 { display: block; }
                :host([step="1"]) #step-1 { display: block; }
                :host([step="2"]) #step-2 { display: block; }
                :host([step="3"]) #step-3 { display: block; }
                :host([step="4"]) #step-4 { display: block; }
                :host([step="40"]) #step-40 { display: block; }
                
                .actions {
                    display: flex;
                    justify-content: space-between;
                }
                .actions > input:first-child {
                    margin-right: 8px;
                }
                .actions > input:last-child {
                    margin-left: 8px;
                }
                #step-4 > #copied {
                    display: none;
                }
                
                ${FORM_STYLE}
            </style>
            <article id="host">
            </article>
            <article>
                <register-user-type id="step-0"> </register-user-type>
                <register-basic-form id="step-1"></register-basic-form>
                <register-business-form id="step-2"></register-business-form>
                <register-items-form id="step-3"></register-items-form>
                <register-submit-form id="step-4"></register-submit-form>
                <register-user-form id="step-40"></register-user-form>
            </article>
        `);
        let a = this.shadowRoot.querySelector("#step-4");
        this.shadowRoot.addEventListener("account:type:user", (b)=>{
            b.stopPropagation(), a.accountType = "User", this.step = 40;
        }), this.shadowRoot.addEventListener("account:type:local-service", (b)=>{
            b.stopPropagation(), a.accountType = "Business", this.step = 1;
        }), this.shadowRoot.addEventListener("form:next", (b)=>{
            b.stopPropagation();
            let c = this.shadowRoot.querySelector(`#step-${this.step}`);
            this.#a(c, a) && (this.step = this.step + 1);
        }), this.shadowRoot.addEventListener("form:prev", (a)=>{
            a.stopPropagation(), this.step = this.step - 1;
        }), a.addEventListener("submit", (a)=>{
            a.preventDefault(), a.stopPropagation();
        });
    }
    connectedCallback() {
        this.step = 0;
    }
    attributeChangedCallback(a, b, c) {
        super.attributeChangedCallback(a, b, c);
    }
    get step() {
        let a = parseInt(this.getAttribute("step"));
        return isNaN(a) ? 1 : a;
    }
    set step(a) {
        a < 0 || this.setAttribute("step", a);
    }
     #a(a, d) {
        for (let e of (a.reportValidity(), a.elements))if ("" !== e.name && !e.reportValidity()) return !1;
        let f = a.inputs;
        if (f) d.setItems(f);
        else for (let g of a.elements)"" !== g.name && d.updateField(g.name, g.value);
        return !0;
    }
});
customElements.define("image-input", class extends Component {
    static get observedAttributes() {
        return [
            "width",
            "height",
            "account-id",
            "url"
        ];
    }
    constructor(){
        super(`
            <style>
                :host {
                    display: block;
                    border: 1px solid var(--border-light-gray-color);
                    border-radius: 8px;
                }
                #hidden { overflow: hidden; width: 1px; height: 1px; position: relative; }
                input[type=file] { position: absolute; top: -10px; left: -10px; display: none; }
                #view { width: 200px; height: 200px; cursor: pointer; }
                canvas { width: 200px; height: 200px; }
                div > input[type=button] {
                    margin: 0;
                    width: 100%;
                    border-left: none;
                    border-right: none;
                    border-bottom: none;
                    border-color: var(--border-light-gray-color);
                }
                ${BUTTON_STYLE}
            </style>
            <article>
                <section id="hidden">
                    <input id="file" type="file" accept="image/*" />
                    <img alt="" src="" />
                </section>
                <div id="view">
                    <canvas width="200" height="200"></canvas>
                </div>
                <div>
                    <input id="save" type="button" value="Wyślij" />
                </div>
            </article>
        `), this.shadowRoot.querySelector("#save").addEventListener("click", (a)=>{
            a.preventDefault(), a.stopPropagation();
            let b = document.createElement("canvas");
            b.width = this.width, b.height = this.height, b.getContext("2d").putImageData(g.getImageData(0, 0, this.width, this.height), 0, 0);
            let c = atob(b.toDataURL("image/webp", 1.0).split(",")[1]), d = [];
            for(let e = 0; e < c.length; e++)d.push(c.charCodeAt(e));
            let f = new Blob([
                new Uint8Array(d)
            ], {
                type: "image/webp"
            }), h = new FormData;
            h.append(`${crypto.randomUUID()}.webp`, f), fetch("/upload", {
                method: "POST",
                body: h
            }).then((a)=>a.json()).then(({ path: a  })=>{
                this.url = a, this.dispatchEvent(new CustomEvent("image-input:uploaded", {
                    bubbles: !0,
                    composed: !0
                }));
            });
        });
        let b = new FileReader(), c = this.shadowRoot.querySelector("#file"), d = this.shadowRoot.querySelector("#view"), e = this.shadowRoot.querySelector("img"), f = this.shadowRoot.querySelector("canvas"), g = f.getContext("2d");
        e.addEventListener("load", ()=>{
            let a, b;
            e.width > e.height ? (a = 200, b = 200 * e.height / e.width) : (a = 200 * e.width / e.height, b = 200), this.setAttribute("width", a), this.setAttribute("height", b), e.width = a, e.height = b, g.clearRect(0, 0, 200, 200), g.drawImage(e, 0, 0, a, b);
        }), c.addEventListener("change", (a)=>{
            a.stopPropagation(), b.addEventListener("loadend", (a)=>{
                a.total === a.loaded && (e.src = a.target.result || "");
            }), b.readAsDataURL(a.target.files[0]);
        }), d.addEventListener("click", (a)=>{
            a.stopPropagation(), c.click();
        });
    }
    connectedCallback() {
        this.account_id = this.account_id, this.url = this.url;
    }
    attributeChangedCallback(a, b, c) {
        super.attributeChangedCallback(a, b, c);
    }
    get account_id() {
        return this.getAttribute("account-id");
    }
    set account_id(a) {
        this.setAttribute("account-id", a);
    }
    get width() {
        let a = parseInt(this.getAttribute("width"));
        return isNaN(a) ? 0 : a;
    }
    set width(a) {
        this.setAttribute("width", a);
    }
    get height() {
        let a = parseInt(this.getAttribute("height"));
        return isNaN(a) ? 0 : a;
    }
    set height(a) {
        this.setAttribute("height", a);
    }
    get url() {
        return this.getAttribute("url");
    }
    set url(a) {
        this.setAttribute("url", a), this.shadowRoot.querySelector("img").src = a;
    }
});
customElements.define("business-item", class extends Component {
    static get observedAttributes() {
        return [
            "item-id",
            "name",
            "price",
            "picture-url",
            "item-order"
        ];
    }
    constructor(){
        super(`
            <style>
                :host { display: block; }
                section > form { display: flex; justify-content: space-between; }
                input[type=submit] {
                    max-width: 25%;
                }
                ${FORM_STYLE}
            </style>
            <section>
                <form action="/business-item/update" method="post">
                    <image-input></image-input>
                    <div>
                        <label>Nazwa</label>
                        <input name="name" id="name" />
                    </div>
                    <div>
                        <label>Cena</label>
                        <price-input></price-input>
                    </div>
                    <input type="hidden" name="id" id="id" />
                    <input type="hidden" name="price" id="price" />
                    <input type="hidden" name="item_order" id="item_order" />
                    <input type="hidden" name="picture_url" id="picture_url" />
                    <input type="submit" value="Zapisz" />
                </form>
            </section>
        `);
        let a = this.shadowRoot.querySelector("image-input");
        this.addEventListener("image-input:uploaded", (b)=>{
            b.preventDefault(), b.stopPropagation(), this.picture_url = a.url;
            let c = this.shadowRoot.querySelector("form");
            c.querySelector("#id").value = this.item_id, c.querySelector("#name").value = this.name, c.querySelector("#price").value = this.price, c.querySelector("#picture_url").value = this.picture_url, c.querySelector("#item_order").value = this.item_order, c.submit();
        });
    }
    connectedCallback() {
        this.item_id = this.item_id, this.name = this.name, this.price = this.price, this.picture_url = this.picture_url;
    }
    attributeChangedCallback(a, b, c) {
        if (super.attributeChangedCallback(a, b, c), b !== c && "price" === a) return this.price = c / 100.0;
    }
    static get attr2FieldBlacklist() {
        return [
            "price"
        ];
    }
    get item_id() {
        return this.getAttribute("item-id");
    }
    set item_id(a) {
        this.setAttribute("item-id", a);
    }
    get item_order() {
        return this.getAttribute("item-order");
    }
    set item_order(a) {
        this.setAttribute("item-order", a);
    }
    get name() {
        return this.getAttribute("name");
    }
    set name(a) {
        this.setAttribute("name", a), this.shadowRoot.querySelector("#name").value = a;
    }
    get price() {
        return this.shadowRoot.querySelector("price-input").value;
    }
    set price(a) {
        this.setAttribute("price", a), this.shadowRoot.querySelector("price-input").value = a;
    }
    get picture_url() {
        return this.getAttribute("picture-url");
    }
    set picture_url(a) {
        this.setAttribute("picture-url", a), this.shadowRoot.querySelector("image-input").url = a;
    }
});
customElements.define("business-items", class extends Component {
    constructor(){
        super(`
            <style>
                :host { display: block; }
            </style>
            <slot></slot>
        `);
    }
});
if (!document.querySelector("#facebook-jssdk")) {
    window.fbAsyncInit = ()=>{
        FB.init({
            appId: "1293538251053124",
            cookie: !0,
            xfbml: !0,
            version: "v14.0"
        }), FB.AppEvents.logPageView(), fireFbReady();
    };
    let b1 = document.createElement("script");
    b1.id = "facebook-jssdk", b1.src = "https://connect.facebook.net/en_US/sdk.js", document.head.appendChild(b1);
}