/*!
 * Custom elements for Nanopore-Digital Web applications
 */
'use strict';

var index = require('./index-DGttnXif.js');
var renderer = require('./renderer-jVpDRMfV.js');

const tabContentCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block;opacity:1;animation:opacity 0.3s ease-in-out forwards;animation-duration:0s !important}:host(.ready){animation-duration:0.3s !important}@media only screen and (width <= 768px){:host([animation-dir=left]){animation:slide-right 0.3s ease-in-out;opacity:1}:host([animation-dir=right]){animation:slide-left 0.3s ease-in-out;opacity:1}}.nano-tab-content{position:relative}@keyframes opacity{0%{opacity:0}100%{opacity:1}}@keyframes slide-left{0%{transform:translate3d(-100%, 0, 0)}50%{transform:translate3d(0%) translate3d(-0.9em)}100%{transform:translate3d(0, 0, 0)}}@keyframes slide-right{0%{transform:translate3d(100%, 0, 0)}50%{transform:translateX(0%) translate3d(0.9em)}100%{transform:translate3d(0, 0, 0)}}@media (prefers-reduced-motion: reduce){*{animation:none !important}}";

let id = 0;
const NanoTabContent = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    tabContentId = `nano-tab-content-${++id}`;
    ready = false;
    get host() { return index.getElement(this); }
    /** The tab panel's name. */
    name = '';
    /** When true, the tab content will be shown. */
    active = false;
    componentDidLoad() {
        requestAnimationFrame(() => (this.ready = true));
    }
    render() {
        return (renderer.h(index.Host, { key: 'd6b4670c20b4ba1434561d9ca12fa31da1a0e20d', id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true', class: {
                ready: this.ready,
                'nano-tab-content': true,
            } }, renderer.h("div", { key: 'c7c7a56f8942451a8a9beca4b9126c5f6533f9e3', part: "base", class: "nano-tab-content" }, renderer.h("slot", { key: '662b14c342f751f9d7a4bcbfecb82ae8207ee219' }))));
    }
};
NanoTabContent.style = tabContentCss;

exports.nano_tab_content = NanoTabContent;
