@anjuna/docs/esm/es2017/build/xotdhguq.entry.js

Anjuna Documentation Web Components

import { h } from '../anjuna-docs.core.js';

class App {
    render() {
        return [
            h("slot", { name: 'header' }),
            h("slot", { name: 'side-nav' }),
            h("main", null,
                h("ad-container", null,
                    h("slot", null)))
        ];
    }
    static get is() { return "ad-app"; }
    static get properties() { return {
        "layout": {
            "type": String,
            "attr": "layout",
            "reflectToAttr": true
        }
    }; }
    static get style() { return "ad-app{background-color:var(--anj-light);display:block;min-height:100%;padding:3rem 0 2rem;position:relative}ad-app[layout=fluid] ad-container{max-width:none}\@media (min-width:768px){ad-app main{margin-left:13rem;padding-left:1rem;padding-right:1rem}ad-app ad-nav[disabled]~main{margin-left:0}}ad-app main>ad-container{padding-bottom:1rem;padding-top:1rem}\@media (min-width:768px){ad-app main>ad-container{padding-left:2rem;padding-right:2rem;padding-top:2rem}}"; }
}

class Container {
    static get is() { return "ad-container"; }
    static get style() { return "ad-container{display:block;margin-left:auto;margin-right:auto;max-width:1140px;padding-left:15px;padding-right:15px;width:100%}"; }
}

class Footer {
    render() {
        const year = new Date().getFullYear();
        return (h("div", null,
            "\u00A9 ",
            year,
            " Zuora"));
    }
    static get is() { return "ad-footer"; }
    static get style() { return "ad-footer{bottom:.5rem;color:var(--anj-neutral);display:block;font-size:.75rem;left:50%;padding:1rem 1rem 0;position:absolute;text-align:center;-webkit-transform:translateX(-50%);transform:translateX(-50%)}\@media (min-width:768px){ad-footer{padding-left:2rem;padding-right:2rem}}"; }
}

class Header {
    render() {
        const navStyle = {
            height: this.active ? `${this.element.querySelector('ul').clientHeight}px` : '0'
        };
        const toggleClass = this.active ? 'nav-toggle header-toggle active' : 'nav-toggle header-toggle';
        return [
            h("div", { class: "nav-left" },
                h("slot", { name: "nav-toggle" }),
                h("slot", { name: "home" })),
            h("nav", { style: navStyle },
                h("ul", { onClick: () => this.toggleNav(false) },
                    h("slot", null),
                    this.github ?
                        h("li", null,
                            h("a", { href: this.github, target: "_blank" },
                                h("svg", { class: "nav-item-icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 499.36", focusable: "false" },
                                    h("title", null, "GitHub"),
                                    h("path", { d: "M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z", fill: "currentColor", "fill-rule": "evenodd" })),
                                "Github")) : '')),
            h("div", { class: "nav-right" },
                this.version ? h("span", { class: "version-text" }, this.version) : '',
                h("span", { class: toggleClass, onClick: () => this.toggleNav() },
                    h("i", { class: "z-icon-dotted" })))
        ];
    }
    toggleNav(active) {
        this.active = active !== undefined ? active : !this.active;
    }
    static get is() { return "ad-header"; }
    static get properties() { return {
        "active": {
            "state": true
        },
        "element": {
            "elementRef": true
        },
        "github": {
            "type": String,
            "attr": "github"
        },
        "version": {
            "type": String,
            "attr": "version"
        }
    }; }
    static get style() { return "ad-header{-ms-flex-align:center;align-items:center;background-color:var(--anj-primary);-webkit-box-shadow:0 1px 3px var(--anj-shadow);box-shadow:0 1px 3px var(--anj-shadow);display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;font-size:1rem;-ms-flex-pack:justify;justify-content:space-between;left:0;letter-spacing:var(--anj-spacing-wide);min-height:3rem;right:0;padding:0 .75rem;position:fixed;top:0;z-index:1030}\@media (max-width:767.98px){ad-header.active nav{-webkit-box-shadow:0 1px 3px var(--anj-shadow);box-shadow:0 1px 3px var(--anj-shadow)}}ad-header a{color:var(--anj-border-dark);display:block;font-weight:300;padding:.5rem .75rem;text-decoration:none;-webkit-transition:color .2s ease;transition:color .2s ease}ad-header a:hover{color:var(--anj-background);text-decoration:none}ad-header a:active{text-decoration:none}ad-header a.active,ad-header a.active:hover,ad-header a:active{color:var(--anj-light)}ad-header a .nav-item-icon{height:1rem;margin-right:.2rem;position:relative;top:1px;width:1rem}ad-header a[slot=home]{color:var(--anj-light);font-size:1.25rem;font-weight:200;display:inline-block;padding-left:3rem;position:relative}ad-header a[slot=home] img{height:2.5rem;left:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}ad-header .version-text{color:var(--anj-border-dark);display:none;font-size:.75rem;font-weight:200;letter-spacing:normal;opacity:.8}\@media (min-width:768px){ad-header .version-text{display:inline-block}}ad-header .nav-toggle{color:var(--anj-border-dark);cursor:pointer;display:inline-block;font-size:1.25rem;font-weight:600;-webkit-transition:color .2s ease;transition:color .2s ease}\@media (min-width:768px){ad-header .nav-toggle{display:none}}ad-header .nav-toggle.header-toggle{margin-right:-9px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}ad-header .nav-toggle:hover{color:var(--anj-light)}ad-header .nav-toggle.active,ad-header .nav-toggle:active,ad-header .nav-toggle[active]{color:var(--anj-background)}ad-header nav{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-preferred-size:auto;flex-basis:auto;-ms-flex-positive:1;flex-grow:1;margin-right:.75rem}\@media (max-width:767.98px){ad-header nav{background-color:var(--anj-primary);display:block;height:0;-ms-flex-preferred-size:100%;flex-basis:100%;left:0;margin-right:0;overflow:hidden;position:absolute;right:0;top:100%;-webkit-transition:height .5s ease;transition:height .5s ease}}\@media (min-width:768px){ad-header nav{height:inherit!important}}ad-header nav ul{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:0;padding-bottom:.5rem;padding-left:0}\@media (min-width:768px){ad-header nav ul{-ms-flex-direction:row;flex-direction:row;margin-left:auto;margin-right:auto;padding-bottom:0}}"; }
}

class Nav {
    render() {
        return (h("nav", null,
            h("slot", null)));
    }
    static get is() { return "ad-nav"; }
    static get properties() { return {
        "active": {
            "type": Boolean,
            "attr": "active",
            "reflectToAttr": true
        },
        "disabled": {
            "type": Boolean,
            "attr": "disabled",
            "reflectToAttr": true
        }
    }; }
    static get style() { return "ad-nav{background-color:var(--anj-background);border-right:1px solid var(--anj-border-dark);bottom:0;overflow-y:auto;position:fixed;top:3rem;width:13rem;z-index:1030}ad-nav[disabled]{display:none}\@media (max-width:767.98px){ad-nav{-webkit-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all .5s ease;transition:all .5s ease;z-index:1020}ad-nav[active]{-webkit-box-shadow:0 3px 7px var(--anj-shadow);box-shadow:0 3px 7px var(--anj-shadow);-webkit-transform:translateX(0);transform:translateX(0)}}ad-nav nav{padding:1rem}"; }
}

class NavItem {
    static get is() { return "ad-nav-item"; }
    static get style() { return "ad-nav-item{display:block;margin-bottom:.25rem}ad-nav-item a{color:var(--anj-secondary-dark);text-decoration:none;text-transform:capitalize;-webkit-transition:color .2s ease;transition:color .2s ease}ad-nav-item a.active,ad-nav-item a:hover{color:var(--anj-primary);text-decoration:none}"; }
}

class NavToggle {
    hostData() {
        return {
            class: {
                'nav-toggle': true
            }
        };
    }
    render() {
        return (h("button", { class: "ad-nav-toggle", type: "button" },
            h("i", { class: "ad-nav-toggle-icon" })));
    }
    static get is() { return "ad-nav-toggle"; }
    static get properties() { return {
        "active": {
            "type": Boolean,
            "attr": "active",
            "reflectToAttr": true
        },
        "disabled": {
            "type": Boolean,
            "attr": "disabled",
            "reflectToAttr": true
        }
    }; }
    static get style() { return ".ad-nav-toggle{padding:.25rem .75rem;font-size:1.09375rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:.25rem}.ad-nav-toggle:focus,.ad-nav-toggle:hover{text-decoration:none}.ad-nav-toggle-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;content:\"\";background:no-repeat 50%;background-size:100% 100%}ad-nav-toggle .ad-nav-toggle{margin-left:-3px;margin-right:.75rem;position:relative;top:-.25rem}ad-nav-toggle .ad-nav-toggle:focus{outline:none}ad-nav-toggle .ad-nav-toggle .ad-nav-toggle-icon{background-image:url(\"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(233, 235, 238, 0.999)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E\")}ad-nav-toggle[active] .ad-nav-toggle-icon{background-image:url(\"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(110, 197, 171, 0.999)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E\")}ad-nav-toggle[disabled]{display:none!important}"; }
}

export { App as AdApp, Container as AdContainer, Footer as AdFooter, Header as AdHeader, Nav as AdNav, NavItem as AdNavItem, NavToggle as AdNavToggle };