oswilno/client/dist/app.js

const S = Symbol();
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;
}
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;
}
`;
class PseudoForm extends HTMLElement {
    reportValidity() {
        return this[S].querySelector("form").reportValidity();
    }
    checkValidity() {
        return this[S].querySelector("form").checkValidity();
    }
    get elements() {
        return this[S].querySelector("form").elements;
    }
}
const fireFbReady = ()=>{
    for (let c of (!0, a))c();
};
let a = [];
customElements.define("form-navigation", class extends HTMLElement {
    static get observedAttributes() {
        return [
            "next",
            "prev"
        ];
    }
    constructor(){
        super();
        let c = this[S] = this.attachShadow({
            mode: "closed"
        });
        c.innerHTML = `
            <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>
        `, c.querySelector("#prev").addEventListener("click", (a)=>{
            a.stopPropagation(), a.preventDefault(), this.prev();
        }), c.querySelector("#next").addEventListener("click", (a)=>{
            a.stopPropagation(), a.preventDefault(), this.next();
        });
    }
    attributeChangedCallback(b, c, d) {
        if (c !== d) switch(b){
            case "next":
                this[S].querySelector("#next").className = "hidden" === d ? "hidden" : "";
                break;
            case "prev":
                this[S].querySelector("#prev").className = "hidden" === d ? "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-service", class extends HTMLElement {
    static get observedAttributes() {
        return [
            "name",
            "service-id",
            "state"
        ];
    }
    constructor(){
        super();
        let b = this[S] = this.attachShadow({
            mode: "closed"
        });
        b.innerHTML = `
            <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() {
        this[S].querySelector("#name").textContent = this.getAttribute("name");
    }
    attributeChangedCallback(b, c, d) {
        if (c !== d && "name" === b) return this[S].querySelector("#name").textContent = d;
    }
    get name() {
        return this.getAttribute("name") || "";
    }
});
customElements.define("local-service-item", class extends HTMLElement {
    static get observedAttributes() {
        return [
            "name",
            "price"
        ];
    }
    constructor(){
        super();
        let b = this[S] = this.attachShadow({
            mode: "closed"
        });
        b.innerHTML = `
            <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;
                }
            </style>
            <section id="item">
                <h3 id="name"></h3>
                <price-view id="price"></price-view>
            </section>
        `;
    }
    connectedCallback() {
        this[S].querySelector("#name").textContent = this.getAttribute("name"), this[S].querySelector("#price").value = this.price();
    }
    attributeChangedCallback(b, c, d) {
        if (c !== d) switch(b){
            case "name":
                return this[S].querySelector("#name").textContent = d;
            case "price":
                return this[S].querySelector("#price").value = d;
        }
    }
    price(a) {
        let b = parseInt(a || this.getAttribute("price"));
        return isNaN(b) ? 0 : b;
    }
});
customElements.define("local-services", class extends HTMLElement {
    static get observedAttributes() {
        return [
            "filter"
        ];
    }
    constructor(){
        super();
        let b = this[S] = this.attachShadow({
            mode: "closed"
        });
        b.innerHTML = `
            <style>
                :host { display: block; }
                * { font-family: 'Noto Sans', sans-serif; }
                ::slotted(local-service[local-services-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 c = b.querySelector("#filter"), d = null;
            c.addEventListener("change", (a)=>{
                a.stopPropagation(), this.filter = a.target.value;
            }), c.addEventListener("keyup", (a)=>{
                a.stopPropagation();
                let b = a.target.value;
                d && clearTimeout(d), d = setTimeout(()=>{
                    this.filter = b, d = null;
                }, 1000 / 3);
            });
        }
    }
    connectedCallback() {
        this.filter = this.getAttribute("filter");
    }
    attributeChangedCallback(a, b, c) {
        if (b !== c && "filter" === a) return this.filter = c;
    }
    get filter() {
        return this.getAttribute("filter");
    }
    set filter(a) {
        if (a && "" !== a) for (let b of (this.setAttribute("filter", a), this.querySelectorAll("local-service")))b.name && (b.name.includes(a) ? b.setAttribute("local-services-visible", "visible") : b.setAttribute("local-services-visible", "invisible"));
        else for (let c of (this.removeAttribute("filter"), this.querySelectorAll("local-service")))c.removeAttribute("local-services-visible");
    }
});
customElements.define("login-form", class extends HTMLElement {
    static get observedAttributes() {
        return [];
    }
    constructor(){
        super();
        let c = this[S] = this.attachShadow({
            mode: "closed"
        });
        c.innerHTML = `
            <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>
        `;
    }
    connectedCallback() {}
    attributeChangedCallback(a, b, c) {
        if (b === c) return;
    }
});
customElements.define("ow-account", class extends HTMLElement {
    static get observedAttributes() {
        return [
            "mode",
            "id",
            "name",
            "email",
            "facebook-id"
        ];
    }
    constructor(){
        super();
        let c = this[S] = this.attachShadow({
            mode: "closed"
        });
        c.innerHTML = `
            <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;
                }
                #display {
                    display: none;
                }
                :host([mode="display"]) #display { 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>
            
            <article id="display">
                <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>
                    <label>Powiązane konto Facebook</label>
                    <input id="facebook_id" name="facebook_id" readonly />
                </div>
            </article>
        `, c.querySelector("#switch-login > a").addEventListener("click", (a)=>{
            a.stopPropagation(), a.preventDefault(), this.mode = "login";
        }), c.querySelector("#switch-register > a").addEventListener("click", (a)=>{
            a.stopPropagation(), a.preventDefault(), this.mode = "register";
        });
    }
    connectedCallback() {
        "" === this.mode && (this.mode = "login");
    }
    attributeChangedCallback(a, b, c) {
        if (b !== c) switch(a){
            case "mode":
                this.mode = c;
                break;
            case "id":
                this.id = c;
                break;
            case "name":
                this.name = c;
                break;
            case "email":
                this.email = c;
                break;
            case "facebook-id":
                this.facebook_id = 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(b) {
        this.setAttribute("name", b), this[S].querySelector("#display #name").value = b;
    }
    get email() {
        return this.getAttribute("email") || "";
    }
    set email(b) {
        this.setAttribute("email", b), this[S].querySelector("#display #email").value = b;
    }
    get facebook_id() {
        return this.getAttribute("facebook-id");
    }
    set facebook_id(b) {
        this.setAttribute("facebook-id", b), this[S].querySelector("#display #facebook_id").value = b;
    }
});
customElements.define("ow-nav", class extends HTMLElement {
    constructor(){
        super();
        let b = this[S] = this.attachShadow({
            mode: "closed"
        });
        b.innerHTML = `
            <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 HTMLElement {
    static get observedAttributes() {
        return [
            "selected",
            "path"
        ];
    }
    constructor(){
        super();
        let b = this[S] = this.attachShadow({
            mode: "closed"
        });
        b.innerHTML = `
            <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) {
        if (b !== c) switch(a){
            case "selected":
                return this.selected = c;
            case "path":
                return this.path = 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(b) {
        if (!b || "" === b) {
            this.removeAttribute("path");
            return;
        }
        this.setAttribute("path", b), this[S].querySelector("a").setAttribute("href", b);
    }
});
customElements.define("price-view", class extends HTMLElement {
    static get observedAttributes() {
        return [
            "value",
            "currency"
        ];
    }
    constructor(){
        super();
        let b = this[S] = this.attachShadow({
            mode: "closed"
        });
        b.innerHTML = `
            <style>
                :host { display: block; }
                * { font-family: 'Noto Sans', sans-serif; }
                #price {
                    font-weight: bold;
                }
            </style>
            <span id="price"></span>
        `;
    }
    connectedCallback() {
        this[S].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(b) {
        this.setAttribute("value", b), this[S].querySelector("#price").textContent = this.formatted;
    }
    get currency() {
        return this.getAttribute("currency") || "PLN";
    }
});
customElements.define("price-input", class extends HTMLElement {
    static get observedAttributes() {
        return [
            "value",
            "currency",
            "required",
            "name"
        ];
    }
    constructor(){
        super();
        let c = this[S] = this.attachShadow({
            mode: "closed"
        });
        c.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 d = c.querySelector("#price");
        d.addEventListener("change", (a)=>{
            a.stopPropagation(), this.value = d.value;
        });
    }
    connectedCallback() {
        this[S].querySelector("#currency").textContent = this.currency, this[S].querySelector("#price").value = this.value;
    }
    attributeChangedCallback(b, c, d) {
        if (c === d) return;
        let e = this[S].querySelector("#price");
        switch(b){
            case "price":
                this.value = d;
                break;
            case "currency":
                this.currency = d;
                break;
            case "required":
                d ? e.setAttribute("required", "required") : e.removeAttribute("required");
                break;
            case "readonly":
                d ? e.setAttribute("readonly", "readonly") : e.removeAttribute("readonly");
                break;
            case "name":
                this.setAttribute("name", d);
        }
    }
    get value() {
        return 100 * this[S].querySelector("#price").value;
    }
    set value(b) {
        this.setAttribute("value", b), this[S].querySelector("#price").value = b;
    }
    get currency() {
        return this.getAttribute("currency") || "PLN";
    }
    set currency(b) {
        this.setAttribute("currency", b), this[S].querySelector("#currency").textContent = this.currency;
    }
    reportValidity() {
        return this[S].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();
        let c = this[S] = this.attachShadow({
            mode: "closed"
        });
        c.innerHTML = `
            <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 d = c.querySelector("form");
        d.addEventListener("submit", (a)=>{
            a.preventDefault(), a.stopPropagation(), c.querySelector("form-navigation").next();
        });
    }
});
customElements.define("register-item-form-row", class extends PseudoForm {
    static get observedAttributes() {
        return [
            "idx",
            "name"
        ];
    }
    constructor(){
        super(), this[S] = this.attachShadow({
            mode: "closed"
        }), 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() {
        let c = this.getAttribute("idx");
        this[S].innerHTML = `
            <style>
                :host { display: block; }
                * { font-family: 'Noto Sans', sans-serif; }
                ${FORM_STYLE}
                
                form {
                    display: flex;
                    justify-content: space-between;
                }
                div {
                    min-width: 100px;
                    max-width: 48%;
                }
            </style>
            <form class="inline">
                <div id="name" class="field">
                    <label>Nazwa</label>
                    <input class="item-name" name="items[${c}][name]" type="text" required>
                </div>
                <div id="price" class="field">
                    <label>Cena</label>
                    <price-input class="item-price" name="items[${c}][price]" required>
                    </price-input>
                </div>
                <div><input class="remove" type="button" value="Usuń"></div>
            </form>
        `, this[S].querySelector("form").addEventListener("submit", (a)=>{
            a.preventDefault(), a.stopPropagation(), this.reportValidity();
        }), this[S].querySelector(".remove").addEventListener("click", (a)=>{
            a.preventDefault(), a.stopPropagation(), this.dispatchEvent(new CustomEvent("item:removed", {
                bubbles: !0,
                composed: !1
            }));
        });
    }
    attributeChangedCallback(a, b, c) {
        b !== c && "idx" === a && this.updateNames();
    }
    get inputs() {
        return [
            d(this[S].querySelector(".item-name")),
            d(this[S].querySelector(".item-price")), 
        ];
    }
    updateNames() {
        let b = this.getAttribute("idx");
        for (let c of this[S].querySelectorAll(".field")){
            let d = c.id;
            c.querySelector("input, price-input").setAttribute("name", `items[${b}][${d}]`);
        }
    }
    get idx() {
        return this.getAttribute("idx");
    }
    set idx(a) {
        this.setAttribute("idx", a);
    }
    reportValidity() {
        return super.reportValidity() && this[S].querySelector("price-input").reportValidity();
    }
});
let d = ({ name: a , value: b  })=>({
        name: a,
        value: b
    });
let d1 = (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 {
    static get observedAttributes() {
        return [];
    }
    constructor(){
        super();
        let c = this[S] = this.attachShadow({
            mode: "closed"
        });
        c.innerHTML = `
            <style>
                :host { display: block; }
                * { font-family: 'Noto Sans', sans-serif; }
                ${FORM_STYLE}
                
                ::slotted(section) {
                    display: flex;
                }
            </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(), d1(this);
        }), this.addEventListener("form:next", (a)=>{
            for (let b of this.querySelectorAll("item-form-row"))b.reportValidity() || (a.stopPropagation(), a.preventDefault());
        }), c.querySelector("#add-item").addEventListener("click", (a)=>{
            a.stopPropagation(), a.preventDefault(), this.appendChild(document.createElement("register-item-form-row")), d1(this);
        });
    }
    get inputs() {
        return [
            ...this.querySelectorAll("register-item-form-row")
        ].map((a)=>a.inputs);
    }
});
customElements.define("register-company-form", class extends PseudoForm {
    constructor(){
        super();
        let c = this[S] = this.attachShadow({
            mode: "closed"
        });
        c.innerHTML = `
            <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>
        `, c.querySelector("form").addEventListener("submit", (a)=>{
            a.preventDefault(), a.stopPropagation(), c.querySelector("form-navigation").next();
        });
    }
});
customElements.define("register-submit-form", class extends PseudoForm {
    constructor(){
        super();
        let c = this[S] = this.attachShadow({
            mode: "closed"
        });
        c.innerHTML = `
            <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, c) {
        this[S].querySelector(`[id="hidden-${a}"]`).value = c, this[S].querySelector(`[id="preview-${a}"]`).value = c;
    }
    setItems(a) {
        let c = this[S].querySelector("#items");
        for (let d of (c.innerHTML = "", a)){
            let e = c.appendChild(document.createElement("div"));
            e.className = "item-view";
            let [f, g] = d;
            e.innerHTML = `
                <input type="text" name="${f.name}" value="${f.value}" readonly />
                <input type="hidden" name="${g.name}" value="${g.value}" readonly />
                <price-view value="${g.value}"></price-view>
            `;
        }
    }
    set accountType(a) {
        this[S].querySelector("#account_type").value = a;
    }
});
customElements.define("register-user-type", class extends HTMLElement {
    constructor(){
        super();
        let a = this.attachShadow({
            mode: "closed"
        });
        a.innerHTML = `
            <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">
                                <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" style="enable-background:new 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 b = a.querySelector("#user");
        b.addEventListener("click", (a)=>{
            a.preventDefault(), a.stopPropagation(), this.dispatchEvent(new CustomEvent("account:type:user", {
                bubbles: !0,
                composed: !0
            }));
        });
        let c = a.querySelector("#local-service");
        c.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 HTMLElement {
    static get observedAttributes() {
        return [
            "mode"
        ];
    }
    constructor(){
        super();
        let c = this[S] = this.attachShadow({
            mode: "closed"
        });
        c.innerHTML = `
            <style>
                :host { display: block; }
                svg { width: 200px; }
                * { 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="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">
                    <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>
                </div>
            </section>
        `;
        let d = c.querySelector("form");
        c.querySelector("#fb-icon").addEventListener("click", (a)=>{
            a.stopPropagation(), a.preventDefault(), this.mode = "facebook", FB.login((a)=>{
                "connected" === a.status && FB.api("/me?fields=id,name,email", ({ id: a , name: b , email: c , ...e })=>{
                    console.log(a, b, c, e), d.querySelector("#email").value = c, d.querySelector("#login").value = b, d.querySelector("#password").value = crypto.randomUUID(), d.querySelector("#facebook_id").value = a, d.submit();
                });
            }, {
                scope: "public_profile,email",
                return_scopes: !0
            });
        }), c.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);
    }
});
let c = (a, b)=>{
    for (let c of (a.reportValidity(), a.elements))if ("" !== c.name && !c.reportValidity()) return !1;
    let d = a.inputs;
    if (d) b.setItems(d);
    else for (let e of a.elements)"" !== e.name && b.updateField(e.name, e.value);
    return !0;
};
customElements.define("register-form", class extends HTMLElement {
    static get observedAttributes() {
        return [
            "step"
        ];
    }
    constructor(){
        super();
        let d = this[S] = this.attachShadow({
            mode: "closed"
        });
        d.innerHTML = `
            <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; }
                
                ${FORM_STYLE}
                
                .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;
                }
            </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-company-form id="step-2"></register-company-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 e = d.querySelector("#step-4");
        this[S].addEventListener("account:type:user", (a)=>{
            a.stopPropagation(), e.accountType = "User", this.step = 40;
        }), this[S].addEventListener("account:type:local-service", (a)=>{
            a.stopPropagation(), e.accountType = "Business", this.step = 1;
        }), this[S].addEventListener("form:next", (a)=>{
            a.stopPropagation();
            let b = d.querySelector(`#step-${this.step}`);
            c(b, e) && (this.step = this.step + 1);
        }), this[S].addEventListener("form:prev", (a)=>{
            a.stopPropagation(), this.step = this.step - 1;
        }), e.addEventListener("submit", (a)=>{
            a.preventDefault(), a.stopPropagation();
        });
    }
    connectedCallback() {
        this.step = 0;
    }
    attributeChangedCallback(a, b, c) {
        if (b === c) return;
    }
    get step() {
        let a = parseInt(this.getAttribute("step"));
        return isNaN(a) ? 1 : a;
    }
    set step(a) {
        a < 0 || this.setAttribute("step", a);
    }
});
if (!document.querySelector("#facebook-jssdk")) {
    window.fbAsyncInit = ()=>{
        FB.init({
            appId: "1293538251053124",
            cookie: !0,
            xfbml: !0,
            version: "v14.0"
        }), FB.AppEvents.logPageView(), fireFbReady();
    };
    let b = document.createElement("script");
    b.id = "facebook-jssdk", b.src = "https://connect.facebook.net/en_US/sdk.js", document.head.appendChild(b);
}