jb-deckdeckgo-two-columns-with-headers/dist/esm/two-columns-with-headers.entry.js

import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, g as getElement } from './index-4515ce16.js';

function i(o,e){let t=o.querySelectorAll(e),n=o.shadowRoot?o.shadowRoot.querySelectorAll(e):[];return Array.from(t).concat(Array.from(n))}function a(o,e){return new Promise(async t=>{let n=[],r=i(o,e);r&&r.length>0&&(r.forEach(m=>{n.push(m.lazyLoadContent());}),await Promise.all(n),t()),t();})}function l(o){return new Promise(e=>{if(!o){e();return}o.forEach(t=>{t.hasAttribute("data-src")&&(t.setAttribute("src",`${t.getAttribute("data-src")}`),t.removeAttribute("data-src"),t.classList.contains("deckgo-reveal")||t.style.setProperty("visibility","inherit")),t.style.setProperty("pointer-events","none");}),e();})}function d(o){return new Promise(e=>{if(!o){e();return}o.forEach(async t=>{await t.lazyLoad();}),e();})}function c(o){return new Promise(async e=>{let t=[];t.push(u(o)),t.push(f(o)),await Promise.all(t),e();})}function u(o){return new Promise(async e=>{let t=i(o,"img");await l(t),e();})}function f(o){return new Promise(async e=>{let t=i(o,"deckgo-lazy-img");await d(t),e();})}function P(o){return new Promise(e=>{let t=i(o,"img");t&&(t=t.filter(n=>n.getAttribute("data-src")),t.forEach(n=>{n.style.setProperty("visibility","hidden");})),e();})}var s="deckgo-reveal, deckgo-reveal-list, deckgo-highlight-code[highlight-lines]";async function p(o){let e=o.querySelectorAll(s);if(!e||e.length<=0)return !0;let t=Array.from(e).find(n=>n.revealProgress!=="end"&&n.revealProgress!==void 0);return t?(await t.reveal(),!1):!0}async function g(o){let e=o.querySelectorAll(s);if(!e||e.length<=0)return !0;let t=!0,n=Array.from(e).reverse().find(r=>r.revealProgress!=="start"&&r.revealProgress!==void 0);return n&&(await n.hide(),t=!1),t}async function M(o){let e=o.querySelectorAll(s);if(!e||e.length<=0)return;let t=Array.from(e).map(n=>n.revealAll());await Promise.all(t);}async function x(o){let e=o.querySelectorAll(s);if(!e||e.length<=0)return;let t=Array.from(e).map(n=>n.hideAll());await Promise.all(t);}async function H(o,e,t){return t?e?await p(o):await g(o):!0}function A(){return Promise.resolve()}async function C(o){let e=[];e.push(c(o)),e.push(a(o,"deckgo-gif")),e.push(a(o,"deckgo-youtube")),e.push(a(o,"deckgo-demo")),e.push(a(o,"deckgo-word-cloud")),e.push(a(o,"deckgo-markdown")),await Promise.all(e);}

const twoColumnsWithHeadersCss = ":host{display:block;position:relative;-webkit-user-select:var(--slide-user-select, none);-moz-user-select:var(--slide-user-select, none);-ms-user-select:var(--slide-user-select, none);user-select:var(--slide-user-select, none);background:var(--background);color:var(--color);height:inherit;z-index:var(--zIndex, 1);--slide-padding-top-default:64px;--slide-padding-end-default:64px;--slide-padding-bottom-default:64px;--slide-padding-start-default:64px}@media screen and (max-width: 1024px){:host{--slide-padding-top-default:32px;--slide-padding-end-default:32px;--slide-padding-bottom-default:32px;--slide-padding-start-default:32px}}div.deckgo-slide{display:flex;overflow:var(--overflow, hidden);padding:var(--slide-padding-top, var(--slide-padding-top-default)) var(--slide-padding-end, var(--slide-padding-end-default)) var(--slide-padding-bottom, var(--slide-padding-bottom-default)) var(--slide-padding-start, var(--slide-padding-start-default));width:calc( var(--slide-width) - var(--slide-padding-start, var(--slide-padding-start-default)) - var(--slide-padding-end, var(--slide-padding-end-default)) );height:calc( var(--slide-height) - var(--slide-padding-top, var(--slide-padding-top-default)) - var(--slide-padding-bottom, var(--slide-padding-bottom-default)) );min-height:calc( var(--slide-min-height) - var(--slide-padding-top, var(--slide-padding-top-default)) - var(--slide-padding-bottom, var(--slide-padding-bottom-default)) );user-drag:none;-webkit-user-drag:none}@media print{div.deckgo-slide{padding:0;page-break-after:always;height:100vh}::slotted([slot=actions]){display:none}::slotted([slot=background]){display:var(--slide-background-print-display, none)}}::slotted(ul),::slotted(ol){-webkit-padding-start:var(--slide-padding-start, var(--slide-padding-start-default));padding-inline-start:var(--slide-padding-start, var(--slide-padding-start-default))}::slotted([slot=notes]){display:none}::slotted([slot=actions]){position:absolute;top:var(--slide-actions-top, 16px);right:var(--slide-actions-end, 32px);left:var(--slide-actions-start);display:var(--slide-actions-display);z-index:var(--slide-actions-z-index)}::slotted([slot=background]){position:var(--slide-background-position, absolute);top:var(--slide-background-top, 0);right:var(--slide-background-end);left:var(--slide-background-start, 0);width:var(--slide-background-width);height:var(--slide-background-height);z-index:-2;pointer-events:none}::slotted([slot=header]),::slotted([slot=footer]){position:absolute;left:0;width:var(--slide-width);height:100%;display:flex;align-items:center;z-index:var(--slide-header-footer-z-index, -1)}::slotted([slot=header]){top:0;width:calc(var(--slide-width) - var(--slide-header-margin-start, 32px) - var(--slide-header-margin-end, 32px));max-height:var(--slide-header-max-height, 48px);justify-content:var(--slide-header-justify-content, flex-start);margin:var(--slide-header-margin-top, 16px) var(--slide-header-margin-end, 32px) var(--slide-header-margin-bottom, 16px) var(--slide-header-margin-start, 32px)}@media screen and (max-width: 1024px){::slotted([slot=header]){max-height:var(--slide-header-max-height, 16px)}}::slotted([slot=footer]){bottom:0;width:calc(var(--slide-width) - var(--slide-footer-margin-start, 16px) - var(--slide-footer-margin-end, 16px));max-height:var(--slide-footer-max-height, 32px);justify-content:var(--slide-footer-justify-content, center);margin:var(--slide-footer-margin-top, 16px) var(--slide-footer-margin-end, 16px) var(--slide-footer-margin-bottom, 16px) var(--slide-footer-margin-start, 16px)}div.deckgo-slide{font-size:var(--slide-font-size, var(--slide-auto-ratio-font-size, var(--slide-auto-font-size, 1em)))}div.deckgo-aspect-ratio-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}div.deckgo-aspect-ratio-container div.deckgo-aspect-ratio-content{position:relative;width:calc( var(--slide-width) - var(--slide-padding-start, var(--slide-padding-start-default)) - var(--slide-padding-end, var(--slide-padding-end-default)) );height:calc( ( var(--slide-width) - var(--slide-padding-start, var(--slide-padding-start-default)) - var(--slide-padding-end, var(--slide-padding-end-default)) ) * 9 / 16 );display:grid;grid-template-columns:50% 50%;grid-template-rows:10% auto;grid-template-areas:\"title-a title-b\" \"content-a content-b\";grid-gap:2em;justify-items:left;align-items:start;background:var(--background, lightgray)}::slotted([slot=titleA]){grid-area:title-a}::slotted([slot=titleB]){grid-area:title-b}::slotted([slot=contentA]){grid-area:content-a}::slotted([slot=contentB]){grid-area:content-b}::slotted([slot=titleA]),::slotted([slot=contentA]){text-align:right;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}::slotted([slot=titleB]),::slotted([slot=contentB]){text-align:left;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}";

const TwoColumnsWithHeaders = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.slideDidLoad = createEvent(this, "slideDidLoad", 7);
  }
  /**
   * An example of a custom property
   */
  // @Prop({reflect: true})
  // value: string;
  async componentDidLoad() {
    await P(this.el);
    this.slideDidLoad.emit();
  }
  beforeSwipe(enter, reveal) {
    return H(this.el, enter, reveal);
  }
  afterSwipe() {
    return A();
  }
  lazyLoadContent() {
    return C(this.el);
  }
  revealContent() {
    return M(this.el);
  }
  hideContent() {
    return x(this.el);
  }
  render() {
    return (h(Host, { class: { 'deckgo-slide-container': true } }, h("div", { class: "deckgo-slide" }, h("div", { class: "deckgo-aspect-ratio-container" }, h("div", { class: "deckgo-aspect-ratio-content" }, h("slot", { name: "titleA" }), h("slot", { name: "contentA" }), h("slot", { name: "titleB" }), h("slot", { name: "contentB" }))), this.renderDeckSlots())));
  }
  /**
   * Slots used to propagate decks options.
   *
   * - notes: allow user to add notes for this slide (mandatory)
   * - header: clone a header on every slides (recommended)
   * - footer: clone a footer on every slides (recommended)
   * - background: replicate the same background on every slides (recommended if you do not provide any particular design)
   * - actions: can be use to add an action on the top right corner of a slide (optional)
   */
  renderDeckSlots() {
    return (h(Fragment, null, h("slot", { name: "notes" }), h("slot", { name: "header" }), h("slot", { name: "footer" }), h("slot", { name: "background" }), h("slot", { name: "actions" })));
  }
  get el() { return getElement(this); }
};
TwoColumnsWithHeaders.style = twoColumnsWithHeadersCss;

export { TwoColumnsWithHeaders as two_columns_with_headers };