@teipublisher/pb-components
Version:
Collection of webcomponents underlying TEI Publisher
968 lines (813 loc) • 102 kB
JavaScript
import{f as e,N as t,j as o,k as i,l as s,A as a,L as r,c as n,h as l,b as d,w as p,p as c}from"./pb-mixin-886ece32.js";import{E as h,T as u,D as m,p as b}from"./vaadin-element-mixin-e6a38937.js";import{h as g,c as v,F as f,k as y,x as w,y as _,P as x}from"./paper-inky-focus-behavior-fa16796b.js";import{a as $}from"./paper-listbox-5f5d1cec.js";import{a as S}from"./paper-checkbox-645e1077.js";import"./paper-icon-button-984162bd.js";import"./jinn-codemirror-b4fb2138.js";import{t as E,g as C}from"./pb-i18n-4cc00bfe.js";const k=(()=>{if("undefined"==typeof self)return!1;if("top"in self&&self!==top)try{top}catch(e){return!1}return"showOpenFilePicker"in self})();k?Promise.resolve().then((function(){return O})):Promise.resolve().then((function(){return T})),k?Promise.resolve().then((function(){return I})):Promise.resolve().then((function(){return z}));const A=k?Promise.resolve().then((function(){return j})):Promise.resolve().then((function(){return L}));async function P(...e){return(await A).default(...e)}const R=async e=>{const t=await e.getFile();return t.handle=e,t};var O={__proto__:null,default:async(e=[{}])=>{Array.isArray(e)||(e=[e]);const t=[];e.forEach((e,o)=>{t[o]={description:e.description||"Files",accept:{}},e.mimeTypes?e.mimeTypes.map(i=>{t[o].accept[i]=e.extensions||[]}):t[o].accept["*/*"]=e.extensions||[]});const o=await window.showOpenFilePicker({id:e[0].id,startIn:e[0].startIn,types:t,multiple:e[0].multiple||!1,excludeAcceptAllOption:e[0].excludeAcceptAllOption||!1}),i=await Promise.all(o.map(R));return e[0].multiple?i:i[0]}};function B(e){function t(e){if(Object(e)!==e)return Promise.reject(new TypeError(e+" is not an object."));var t=e.done;return Promise.resolve(e.value).then((function(e){return{value:e,done:t}}))}return(B=function(e){this.s=e,this.n=e.next}).prototype={s:null,n:null,next:function(){return t(this.n.apply(this.s,arguments))},return:function(e){var o=this.s.return;return void 0===o?Promise.resolve({value:e,done:!0}):t(o.apply(this.s,arguments))},throw:function(e){var o=this.s.return;return void 0===o?Promise.reject(e):t(o.apply(this.s,arguments))}},new B(e)}const M=async(e,t,o=e.name,i)=>{const s=[],a=[];var r,n=!1,l=!1;try{for(var d,p=function(e){var t,o,i,s=2;for("undefined"!=typeof Symbol&&(o=Symbol.asyncIterator,i=Symbol.iterator);s--;){if(o&&null!=(t=e[o]))return t.call(e);if(i&&null!=(t=e[i]))return new B(t.call(e));o="@@asyncIterator",i="@@iterator"}throw new TypeError("Object is not async iterable")}(e.values());n=!(d=await p.next()).done;n=!1){const r=d.value,n=`${o}/${r.name}`;"file"===r.kind?a.push(r.getFile().then(t=>(t.directoryHandle=e,t.handle=r,Object.defineProperty(t,"webkitRelativePath",{configurable:!0,enumerable:!0,get:()=>n})))):"directory"!==r.kind||!t||i&&i(r)||s.push(M(r,t,n,i))}}catch(e){l=!0,r=e}finally{try{n&&null!=p.return&&await p.return()}finally{if(l)throw r}}return[...(await Promise.all(s)).flat(),...await Promise.all(a)]};var I={__proto__:null,default:async(e={})=>{e.recursive=e.recursive||!1,e.mode=e.mode||"read";const t=await window.showDirectoryPicker({id:e.id,startIn:e.startIn,mode:e.mode});return(await(await t.values()).next()).done?[t]:M(t,e.recursive,void 0,e.skipDirectory)}},j={__proto__:null,default:async(e,t=[{}],o=null,i=!1,s=null)=>{Array.isArray(t)||(t=[t]),t[0].fileName=t[0].fileName||"Untitled";const a=[];let r=null;if(e instanceof Blob&&e.type?r=e.type:e.headers&&e.headers.get("content-type")&&(r=e.headers.get("content-type")),t.forEach((e,t)=>{a[t]={description:e.description||"Files",accept:{}},e.mimeTypes?(0===t&&r&&e.mimeTypes.push(r),e.mimeTypes.map(o=>{a[t].accept[o]=e.extensions||[]})):r?a[t].accept[r]=e.extensions||[]:a[t].accept["*/*"]=e.extensions||[]}),o)try{await o.getFile()}catch(e){if(o=null,i)throw e}const n=o||await window.showSaveFilePicker({suggestedName:t[0].fileName,id:t[0].id,startIn:t[0].startIn,types:a,excludeAcceptAllOption:t[0].excludeAcceptAllOption||!1});!o&&s&&s(n);const l=await n.createWritable();if("stream"in e){const t=e.stream();return await t.pipeTo(l),n}return"body"in e?(await e.body.pipeTo(l),n):(await l.write(await e),await l.close(),n)}},T={__proto__:null,default:async(e=[{}])=>(Array.isArray(e)||(e=[e]),new Promise((t,o)=>{const i=document.createElement("input");i.type="file";const s=[...e.map(e=>e.mimeTypes||[]),...e.map(e=>e.extensions||[])].join();i.multiple=e[0].multiple||!1,i.accept=s||"",i.style.display="none",document.body.append(i);const a=e=>{"function"==typeof r&&r(),t(e)},r=e[0].legacySetup&&e[0].legacySetup(a,()=>r(o),i),n=()=>{window.removeEventListener("focus",n),i.remove()};i.addEventListener("click",()=>{window.addEventListener("focus",n)}),i.addEventListener("change",()=>{window.removeEventListener("focus",n),i.remove(),a(i.multiple?Array.from(i.files):i.files[0])}),"showPicker"in HTMLInputElement.prototype?i.showPicker():i.click()}))},z={__proto__:null,default:async(e=[{}])=>(Array.isArray(e)||(e=[e]),e[0].recursive=e[0].recursive||!1,new Promise((t,o)=>{const i=document.createElement("input");i.type="file",i.webkitdirectory=!0;const s=e=>{"function"==typeof a&&a(),t(e)},a=e[0].legacySetup&&e[0].legacySetup(s,()=>a(o),i);i.addEventListener("change",()=>{let t=Array.from(i.files);e[0].recursive?e[0].recursive&&e[0].skipDirectory&&(t=t.filter(t=>t.webkitRelativePath.split("/").every(t=>!e[0].skipDirectory({name:t,kind:"directory"})))):t=t.filter(e=>2===e.webkitRelativePath.split("/").length),s(t)}),"showPicker"in HTMLInputElement.prototype?i.showPicker():i.click()}))},L={__proto__:null,default:async(e,t={})=>{Array.isArray(t)&&(t=t[0]);const o=document.createElement("a");let i=e;"body"in e&&(i=await async function(e,t){const o=e.getReader(),i=new ReadableStream({start:e=>async function t(){return o.read().then(({done:o,value:i})=>{if(!o)return e.enqueue(i),t();e.close()})}()}),s=new Response(i),a=await s.blob();return o.releaseLock(),new Blob([a],{type:t})}(e.body,e.headers.get("content-type"))),o.download=t.fileName||"Untitled",o.href=URL.createObjectURL(await i);const s=()=>{"function"==typeof a&&a()},a=t.legacySetup&&t.legacySetup(s,()=>a(),o);return o.addEventListener("click",()=>{setTimeout(()=>URL.revokeObjectURL(o.href),3e4),s()}),o.click(),null}};
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/const q=(e,i)=>{const s=e.startNode.parentNode,a=void 0===i?e.endNode:i.startNode,r=s.insertBefore(o(),a);s.insertBefore(o(),a);const n=new t(e.options);return n.insertAfterNode(r),n},N=(e,t)=>(e.setValue(t),e.commit(),e),F=(e,t,o)=>{const s=e.startNode.parentNode,a=o?o.startNode:e.endNode,r=t.endNode.nextSibling;r!==a&&i(s,t.startNode,r,a)},D=e=>{s(e.startNode.parentNode,e.startNode,e.endNode.nextSibling)},U=(e,t,o)=>{const i=new Map;for(let s=t;s<=o;s++)i.set(e[s],s);return i},V=new WeakMap,H=new WeakMap,W=e((e,o,i)=>{let s;return void 0===i?i=o:void 0!==o&&(s=o),o=>{if(!(o instanceof t))throw new Error("repeat can only be used in text bindings");const a=V.get(o)||[],r=H.get(o)||[],n=[],l=[],d=[];let p,c,h=0;for(const t of e)d[h]=s?s(t,h):h,l[h]=i(t,h),h++;let u=0,m=a.length-1,b=0,g=l.length-1;for(;u<=m&&b<=g;)if(null===a[u])u++;else if(null===a[m])m--;else if(r[u]===d[b])n[b]=N(a[u],l[b]),u++,b++;else if(r[m]===d[g])n[g]=N(a[m],l[g]),m--,g--;else if(r[u]===d[g])n[g]=N(a[u],l[g]),F(o,a[u],n[g+1]),u++,g--;else if(r[m]===d[b])n[b]=N(a[m],l[b]),F(o,a[m],a[u]),m--,b++;else if(void 0===p&&(p=U(d,b,g),c=U(r,u,m)),p.has(r[u]))if(p.has(r[m])){const e=c.get(d[b]),t=void 0!==e?a[e]:null;if(null===t){const e=q(o,a[u]);N(e,l[b]),n[b]=e}else n[b]=N(t,l[b]),F(o,t,a[u]),a[e]=null;b++}else D(a[m]),m--;else D(a[u]),u++;for(;b<=g;){const e=q(o,n[g+1]);N(e,l[b]),n[b++]=e}for(;u<=m;){const e=a[u++];null!==e&&D(e)}V.set(o,n),H.set(o,d)}}),K=new WeakMap,G=e(e=>t=>{const o=K.get(t);if(void 0===e&&t instanceof a){if(void 0!==o||!K.has(t)){const e=t.committer.name;t.committer.element.removeAttribute(e)}}else e!==o&&t.setValue(e);K.set(t,e)}),X=g`<dom-module id="lumo-tab" theme-for="vaadin-tab">
<template>
<style>
:host {
box-sizing: border-box;
padding: 0.5rem 0.75rem;
font-family: var(--lumo-font-family);
font-size: var(--lumo-font-size-m);
line-height: var(--lumo-line-height-xs);
font-weight: 500;
opacity: 1;
color: var(--lumo-contrast-60pct);
transition: 0.15s color, 0.2s transform;
flex-shrink: 0;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
transform-origin: 50% 100%;
outline: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
min-width: var(--lumo-size-m);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
:host(:not([orientation="vertical"])) {
text-align: center;
}
:host([orientation="vertical"]) {
transform-origin: 0% 50%;
padding: 0.25rem 1rem;
min-height: var(--lumo-size-m);
min-width: 0;
}
:host(:hover),
:host([focus-ring]) {
color: var(--lumo-body-text-color);
}
:host([selected]) {
color: var(--lumo-primary-text-color);
transition: 0.6s color;
}
:host([active]:not([selected])) {
color: var(--lumo-primary-text-color);
transition-duration: 0.1s;
}
:host::before,
:host::after {
content: "";
position: absolute;
display: var(--_lumo-tab-marker-display, block);
bottom: 0;
left: 50%;
width: var(--lumo-size-s);
height: 2px;
background-color: var(--lumo-contrast-60pct);
border-radius: var(--lumo-border-radius) var(--lumo-border-radius) 0 0;
transform: translateX(-50%) scale(0);
transform-origin: 50% 100%;
transition: 0.14s transform cubic-bezier(.12, .32, .54, 1);
will-change: transform;
}
:host([selected])::before,
:host([selected])::after {
background-color: var(--lumo-primary-color);
}
:host([orientation="vertical"])::before,
:host([orientation="vertical"])::after {
left: 0;
bottom: 50%;
transform: translateY(50%) scale(0);
width: 2px;
height: var(--lumo-size-xs);
border-radius: 0 var(--lumo-border-radius) var(--lumo-border-radius) 0;
transform-origin: 100% 50%;
}
:host::after {
box-shadow: 0 0 0 4px var(--lumo-primary-color);
opacity: 0.15;
transition: 0.15s 0.02s transform, 0.8s 0.17s opacity;
}
:host([selected])::before,
:host([selected])::after {
transform: translateX(-50%) scale(1);
transition-timing-function: cubic-bezier(.12, .32, .54, 1.5);
}
:host([orientation="vertical"][selected])::before,
:host([orientation="vertical"][selected])::after {
transform: translateY(50%) scale(1);
}
:host([selected]:not([active]))::after {
opacity: 0;
}
:host(:not([orientation="vertical"])) ::slotted(a[href]) {
justify-content: center;
}
:host ::slotted(a) {
display: flex;
width: 100%;
align-items: center;
height: 100%;
margin: -0.5rem -0.75rem;
padding: 0.5rem 0.75rem;
outline: none;
/*
Override the CSS inherited from \`lumo-color\` and \`lumo-typography\`.
Note: \`!important\` is needed because of the \`:slotted\` specificity.
*/
text-decoration: none !important;
color: inherit !important;
}
:host ::slotted(iron-icon) {
margin: 0 4px;
width: var(--lumo-icon-size-m);
height: var(--lumo-icon-size-m);
}
/* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
:host ::slotted(iron-icon[icon^="vaadin:"]) {
padding: 0.25rem;
box-sizing: border-box !important;
}
:host(:not([dir="rtl"])) ::slotted(iron-icon:first-child) {
margin-left: 0;
}
:host(:not([dir="rtl"])) ::slotted(iron-icon:last-child) {
margin-right: 0;
}
:host([theme~="icon-on-top"]) {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
text-align: center;
padding-bottom: 0.5rem;
padding-top: 0.25rem;
}
:host([theme~="icon-on-top"]) ::slotted(a) {
flex-direction: column;
align-items: center;
margin-top: -0.25rem;
padding-top: 0.25rem;
}
:host([theme~="icon-on-top"]) ::slotted(iron-icon) {
margin: 0;
}
/* Disabled */
:host([disabled]) {
pointer-events: none;
opacity: 1;
color: var(--lumo-disabled-text-color);
}
/* Focus-ring */
:host([focus-ring]) {
box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
border-radius: var(--lumo-border-radius);
}
/* RTL specific styles */
:host([dir="rtl"])::before,
:host([dir="rtl"])::after {
left: auto;
right: 50%;
transform: translateX(50%) scale(0);
}
:host([dir="rtl"][selected]:not([orientation="vertical"]))::before,
:host([dir="rtl"][selected]:not([orientation="vertical"]))::after {
transform: translateX(50%) scale(1);
}
:host([dir="rtl"]) ::slotted(iron-icon:first-child) {
margin-right: 0;
}
:host([dir="rtl"]) ::slotted(iron-icon:last-child) {
margin-left: 0;
}
:host([orientation="vertical"][dir="rtl"]) {
transform-origin: 100% 50%;
}
:host([dir="rtl"][orientation="vertical"])::before,
:host([dir="rtl"][orientation="vertical"])::after {
left: auto;
right: 0;
border-radius: var(--lumo-border-radius) 0 0 var(--lumo-border-radius);
transform-origin: 0% 50%;
}
</style>
</template>
</dom-module>`;document.head.appendChild(X.content);
/**
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
const Z=e=>class extends e{static get properties(){return{_hasVaadinItemMixin:{value:!0},disabled:{type:Boolean,value:!1,observer:"_disabledChanged",reflectToAttribute:!0},selected:{type:Boolean,value:!1,reflectToAttribute:!0,observer:"_selectedChanged"},_value:String}}get value(){return void 0!==this._value?this._value:this.textContent.trim()}set value(e){this._value=e}ready(){super.ready();const e=this.getAttribute("value");null!==e&&(this.value=e),this.addEventListener("focus",e=>this._setFocused(!0),!0),this.addEventListener("blur",e=>this._setFocused(!1),!0),this.addEventListener("mousedown",e=>{this._setActive(this._mousedown=!0);const t=()=>{this._setActive(this._mousedown=!1),document.removeEventListener("mouseup",t)};document.addEventListener("mouseup",t)}),this.addEventListener("keydown",e=>this._onKeydown(e)),this.addEventListener("keyup",e=>this._onKeyup(e))}disconnectedCallback(){super.disconnectedCallback(),this.hasAttribute("active")&&this._setFocused(!1)}_selectedChanged(e){this.setAttribute("aria-selected",e)}_disabledChanged(e){e?(this.selected=!1,this.setAttribute("aria-disabled","true"),this.blur()):this.removeAttribute("aria-disabled")}_setFocused(e){e?(this.setAttribute("focused",""),this._mousedown||this.setAttribute("focus-ring","")):(this.removeAttribute("focused"),this.removeAttribute("focus-ring"),this._setActive(!1))}_setActive(e){e?this.setAttribute("active",""):this.removeAttribute("active")}_onKeydown(e){/^( |SpaceBar|Enter)$/.test(e.key)&&!e.defaultPrevented&&(e.preventDefault(),this._setActive(!0))}_onKeyup(e){this.hasAttribute("active")&&(this._setActive(!1),this.click())}}
/**
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/;class J extends(h(u(Z(v)))){static get template(){return g`
<slot></slot>
`}static get is(){return"vaadin-tab"}static get version(){return"3.2.0"}ready(){super.ready(),this.setAttribute("role","tab")}_onKeyup(e){const t=this.hasAttribute("active");if(super._onKeyup(e),t){const e=this.querySelector("a");e&&e.click()}}}customElements.define(J.is,J);const Y=g`<dom-module id="lumo-tabs" theme-for="vaadin-tabs">
<template>
<style>
:host {
-webkit-tap-highlight-color: transparent;
}
:host(:not([orientation="vertical"])) {
box-shadow: inset 0 -1px 0 0 var(--lumo-contrast-10pct);
position: relative;
min-height: var(--lumo-size-l);
}
:host([orientation="horizontal"]) [part="tabs"] ::slotted(vaadin-tab:not([theme~="icon-on-top"])) {
justify-content: center;
}
:host([orientation="vertical"]) {
box-shadow: -1px 0 0 0 var(--lumo-contrast-10pct);
}
:host([orientation="horizontal"]) [part="tabs"] {
margin: 0 0.75rem;
}
:host([orientation="vertical"]) [part="tabs"] {
width: 100%;
margin: 0.5rem 0;
}
[part="forward-button"],
[part="back-button"] {
position: absolute;
z-index: 1;
font-family: lumo-icons;
color: var(--lumo-tertiary-text-color);
font-size: var(--lumo-icon-size-m);
display: flex;
align-items: center;
justify-content: center;
width: 1.5em;
height: 100%;
transition: 0.2s opacity;
top: 0;
}
[part="forward-button"]:hover,
[part="back-button"]:hover {
color: inherit;
}
:host(:not([dir="rtl"])) [part="forward-button"] {
right: 0;
}
[part="forward-button"]::after {
content: var(--lumo-icons-angle-right);
}
[part="back-button"]::after {
content: var(--lumo-icons-angle-left);
}
/* Tabs overflow */
[part="tabs"] {
--_lumo-tabs-overflow-mask-image: none;
-webkit-mask-image: var(--_lumo-tabs-overflow-mask-image);
/* For IE11 */
min-height: var(--lumo-size-l);
}
/*
TODO: CSS custom property in \`mask-image\` causes crash in Edge
see https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15415089/
*/
@-moz-document url-prefix() {
[part="tabs"] {
mask-image: var(--_lumo-tabs-overflow-mask-image);
}
}
/* Horizontal tabs overflow */
/* Both ends overflowing */
:host([overflow~="start"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
--_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent 2em, #000 4em, #000 calc(100% - 4em), transparent calc(100% - 2em));
}
/* End overflowing */
:host([overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
--_lumo-tabs-overflow-mask-image: linear-gradient(90deg, #000 calc(100% - 4em), transparent calc(100% - 2em));
}
/* Start overflowing */
:host([overflow~="start"]:not([orientation="vertical"])) [part="tabs"] {
--_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent 2em, #000 4em);
}
/* Vertical tabs overflow */
/* Both ends overflowing */
:host([overflow~="start"][overflow~="end"][orientation="vertical"]) [part="tabs"] {
--_lumo-tabs-overflow-mask-image: linear-gradient(transparent, #000 2em, #000 calc(100% - 2em), transparent);
}
/* End overflowing */
:host([overflow~="end"][orientation="vertical"]) [part="tabs"] {
--_lumo-tabs-overflow-mask-image: linear-gradient(#000 calc(100% - 2em), transparent);
}
/* Start overflowing */
:host([overflow~="start"][orientation="vertical"]) [part="tabs"] {
--_lumo-tabs-overflow-mask-image: linear-gradient(transparent, #000 2em);
}
:host [part="tabs"] ::slotted(:not(vaadin-tab)) {
margin-left: var(--lumo-space-m);
}
/* Centered */
:host([theme~="centered"][orientation="horizontal"]) [part="tabs"] {
justify-content: center;
}
/* Small */
:host([theme~="small"]),
:host([theme~="small"]) [part="tabs"] {
min-height: var(--lumo-size-m);
}
:host([theme~="small"]) [part="tabs"] ::slotted(vaadin-tab) {
font-size: var(--lumo-font-size-s);
}
/* Minimal */
:host([theme~="minimal"]) {
box-shadow: none;
/* This doesn't work with ShadyCSS */
--_lumo-tab-marker-display: none;
}
/* Workaround for the above ShadyCSS issue */
:host([theme~="minimal"]) [part="tabs"] ::slotted(vaadin-tab[selected])::before,
:host([theme~="minimal"]) [part="tabs"] ::slotted(vaadin-tab[selected])::after {
display: none;
}
/* Hide-scroll-buttons */
:host([theme~="hide-scroll-buttons"]) [part="back-button"],
:host([theme~="hide-scroll-buttons"]) [part="forward-button"] {
display: none;
}
:host([theme~="hide-scroll-buttons"][overflow~="start"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
--_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent, #000 2em, #000 calc(100% - 2em), transparent 100%);
}
:host([theme~="hide-scroll-buttons"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
--_lumo-tabs-overflow-mask-image: linear-gradient(90deg, #000 calc(100% - 2em), transparent 100%);
}
:host([theme~="hide-scroll-buttons"][overflow~="start"]:not([orientation="vertical"])) [part="tabs"] {
--_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent, #000 2em);
}
/* Equal-width tabs */
:host([theme~="equal-width-tabs"]) {
flex: auto;
}
:host([theme~="equal-width-tabs"]) [part="tabs"] ::slotted(vaadin-tab) {
flex: 1 0 0%;
}
/* RTL specific styles */
:host([dir="rtl"]) [part="forward-button"]::after {
content: var(--lumo-icons-angle-left);
}
:host([dir="rtl"]) [part="back-button"]::after {
content: var(--lumo-icons-angle-right);
}
:host([orientation="vertical"][dir="rtl"]) {
box-shadow: 1px 0 0 0 var(--lumo-contrast-10pct);
}
:host([dir="rtl"]) [part="forward-button"] {
left: 0;
}
:host([dir="rtl"]) [part="tabs"] ::slotted(:not(vaadin-tab)) {
margin-left: 0;
margin-right: var(--lumo-space-m);
}
/* Both ends overflowing */
:host([dir="rtl"][overflow~="start"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
--_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent 2em, #000 4em, #000 calc(100% - 4em), transparent calc(100% - 2em));
}
/* End overflowing */
:host([dir="rtl"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
--_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, #000 calc(100% - 4em), transparent calc(100% - 2em));
}
/* Start overflowing */
:host([dir="rtl"][overflow~="start"]:not([orientation="vertical"])) [part="tabs"] {
--_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent 2em, #000 4em);
}
:host([dir="rtl"][theme~="hide-scroll-buttons"][overflow~="start"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
--_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent, #000 2em, #000 calc(100% - 2em), transparent 100%);
}
:host([dir="rtl"][theme~="hide-scroll-buttons"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
--_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, #000 calc(100% - 2em), transparent 100%);
}
:host([dir="rtl"][theme~="hide-scroll-buttons"][overflow~="start"]:not([orientation="vertical"])) [part="tabs"] {
--_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent, #000 2em);
}
</style>
</template>
</dom-module>`;document.head.appendChild(Y.content);
/**
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
const Q=e=>class extends e{static get properties(){return{_hasVaadinListMixin:{value:!0},selected:{type:Number,reflectToAttribute:!0,notify:!0},orientation:{type:String,reflectToAttribute:!0,value:""},items:{type:Array,readOnly:!0,notify:!0},_searchBuf:{type:String,value:""}}}static get observers(){return["_enhanceItems(items, orientation, selected, disabled)"]}ready(){super.ready(),this.addEventListener("keydown",e=>this._onKeydown(e)),this.addEventListener("click",e=>this._onClick(e)),this._observer=new f(this,e=>{this._setItems(this._filterItems(Array.from(this.children)))})}_enhanceItems(e,t,o,i){if(!i&&e){this.setAttribute("aria-orientation",t||"vertical"),this.items.forEach(e=>{t?e.setAttribute("orientation",t):e.removeAttribute("orientation"),e.updateStyles()}),this._setFocusable(o);const i=e[o];e.forEach(e=>e.selected=e===i),i&&!i.disabled&&this._scrollToItem(o)}}get focused(){return this.getRootNode().activeElement}_filterItems(e){return e.filter(e=>e._hasVaadinItemMixin)}_onClick(e){if(e.metaKey||e.shiftKey||e.ctrlKey||e.defaultPrevented)return;const t=this._filterItems(e.composedPath())[0];let o;t&&!t.disabled&&(o=this.items.indexOf(t))>=0&&(this.selected=o)}_searchKey(e,t){this._searchReset=y.debounce(this._searchReset,w.after(500),()=>this._searchBuf=""),this._searchBuf+=t.toLowerCase();const o=1,i=e=>!(e.disabled||this._isItemHidden(e))&&0===e.textContent.replace(/[^a-zA-Z0-9]/g,"").toLowerCase().indexOf(this._searchBuf);this.items.some(e=>0===e.textContent.replace(/[^a-zA-Z0-9]/g,"").toLowerCase().indexOf(this._searchBuf))||(this._searchBuf=t.toLowerCase());const s=1===this._searchBuf.length?e+1:e;return this._getAvailableIndex(s,o,i)}get _isRTL(){return!this._vertical&&"rtl"===this.getAttribute("dir")}_onKeydown(e){if(e.metaKey||e.ctrlKey)return;const t=e.key.replace(/^Arrow/,""),o=this.items.indexOf(this.focused);if(/[a-zA-Z0-9]/.test(t)&&1===t.length){const e=this._searchKey(o,t);return void(e>=0&&this._focus(e))}const i=e=>!(e.disabled||this._isItemHidden(e));let s,a;const r=this._isRTL?-1:1;this._vertical&&"Up"===t||!this._vertical&&"Left"===t?(a=-r,s=o-r):this._vertical&&"Down"===t||!this._vertical&&"Right"===t?(a=r,s=o+r):"Home"===t?(a=1,s=0):"End"===t&&(a=-1,s=this.items.length-1),s=this._getAvailableIndex(s,a,i),s>=0&&(this._focus(s),e.preventDefault())}_getAvailableIndex(e,t,o){const i=this.items.length;for(let s=0;"number"==typeof e&&s<i;s++,e+=t||1){e<0?e=i-1:e>=i&&(e=0);if(o(this.items[e]))return e}return-1}_isItemHidden(e){return"none"===getComputedStyle(e).display}_setFocusable(e){e=this._getAvailableIndex(e,1,e=>!e.disabled);const t=this.items[e]||this.items[0];this.items.forEach(e=>e.tabIndex=e===t?0:-1)}_focus(e){const t=this.items[e];this.items.forEach(e=>e.focused=e===t),this._setFocusable(e),this._scrollToItem(e),t.focus()}focus(){this._observer&&this._observer.flush();const e=this.querySelector('[tabindex="0"]')||(this.items?this.items[0]:null);e&&e.focus()}get _scrollerElement(){}_scrollToItem(e){const t=this.items[e];if(!t)return;const o=this._vertical?["top","bottom"]:this._isRTL?["right","left"]:["left","right"],i=this._scrollerElement.getBoundingClientRect(),s=(this.items[e+1]||t).getBoundingClientRect(),a=(this.items[e-1]||t).getBoundingClientRect();let r=0;!this._isRTL&&s[o[1]]>=i[o[1]]||this._isRTL&&s[o[1]]<=i[o[1]]?r=s[o[1]]-i[o[1]]:(!this._isRTL&&a[o[0]]<=i[o[0]]||this._isRTL&&a[o[0]]>=i[o[0]])&&(r=a[o[0]]-i[o[0]]),this._scroll(r)}get _vertical(){return"horizontal"!==this.orientation}_scroll(e){if(this._vertical)this._scrollerElement.scrollTop+=e;else{const t=m.detectScrollType(),o=m.getNormalizedScrollLeft(t,this.getAttribute("dir")||"ltr",this._scrollerElement)+e;m.setNormalizedScrollLeft(t,this.getAttribute("dir")||"ltr",this._scrollerElement,o)}}}
/**
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/,ee=/Apple.* Version\/(9|10)/.test(navigator.userAgent);class te extends(h(Q(u(_([$],v))))){static get template(){return g`
<style>
:host {
display: flex;
align-items: center;
}
:host([hidden]) {
display: none !important;
}
:host([orientation="vertical"]) {
display: block;
}
:host([orientation="horizontal"]) [part="tabs"] {
flex-grow: 1;
display: flex;
align-self: stretch;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
/* This seems more future-proof than \`overflow: -moz-scrollbars-none\` which is marked obsolete
and is no longer guaranteed to work:
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Mozilla_Extensions */
@-moz-document url-prefix() {
:host([orientation="horizontal"]) [part="tabs"] {
overflow: hidden;
}
}
:host([orientation="horizontal"]) [part="tabs"]::-webkit-scrollbar {
display: none;
}
:host([orientation="vertical"]) [part="tabs"] {
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
[part="back-button"],
[part="forward-button"] {
pointer-events: none;
opacity: 0;
cursor: default;
}
:host([overflow~="start"]) [part="back-button"],
:host([overflow~="end"]) [part="forward-button"] {
pointer-events: auto;
opacity: 1;
}
[part="back-button"]::after {
content: '◀';
}
[part="forward-button"]::after {
content: '▶';
}
:host([orientation="vertical"]) [part="back-button"],
:host([orientation="vertical"]) [part="forward-button"] {
display: none;
}
/* RTL specific styles */
:host([dir="rtl"]) [part="back-button"]::after {
content: '▶';
}
:host([dir="rtl"]) [part="forward-button"]::after {
content: '◀';
}
</style>
<div on-click="_scrollBack" part="back-button"></div>
<div id="scroll" part="tabs">
<slot></slot>
</div>
<div on-click="_scrollForward" part="forward-button"></div>
`}static get is(){return"vaadin-tabs"}static get version(){return"3.2.0"}static get properties(){return{orientation:{value:"horizontal",type:String},selected:{value:0,type:Number}}}static get observers(){return["_updateOverflow(items.*, vertical)"]}ready(){super.ready(),this.addEventListener("iron-resize",()=>this._updateOverflow()),this._scrollerElement.addEventListener("scroll",()=>this._updateOverflow()),this.setAttribute("role","tablist"),S(this,()=>{this._updateOverflow()})}_scrollForward(){this._scroll(-this.__direction*this._scrollOffset)}_scrollBack(){this._scroll(this.__direction*this._scrollOffset)}get _scrollOffset(){return this._vertical?this._scrollerElement.offsetHeight:this._scrollerElement.offsetWidth}get _scrollerElement(){return this.$.scroll}get __direction(){return this._vertical||"rtl"!==this.getAttribute("dir")?-1:1}_updateOverflow(){const e=this._vertical?this._scrollerElement.scrollTop:this.__getNormalizedScrollLeft(this._scrollerElement);let t=this._vertical?this._scrollerElement.scrollHeight:this._scrollerElement.scrollWidth;t-=1;let o=e>0?"start":"";o+=e+this._scrollOffset<t?" end":"",1==this.__direction&&(o=o.replace(/start|end/gi,e=>"start"===e?"end":"start")),o?this.setAttribute("overflow",o.trim()):this.removeAttribute("overflow"),this._repaintShadowNodesHack()}_repaintShadowNodesHack(){if(ee&&this.root){const e="-webkit-backface-visibility";this.root.querySelectorAll("*").forEach(t=>{t.style[e]="visible",t.style[e]=""})}}}customElements.define(te.is,te),x({_template:g`
<style>
:host {
display: block;
box-sizing: border-box;
position: relative;
--paper-input-container-focus-color: var(--primary-color);
--paper-icon-button: {
height: 24px;
width: 24px;
padding: 2px;
}
--paper-input-container-ms-clear: {
display: none;
}
}
.input-wrapper {
@apply --layout-horizontal;
}
.input-wrapper paper-input {
@apply --layout-flex;
}
#clear {
display: none;
line-height: 8px;
}
.sr-only {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
}
paper-autocomplete-suggestions {
--suggestions-wrapper: {
@apply --paper-autocomplete-suggestions-wrapper;
};
--paper-item-min-height: var(--paper-autocomplete-suggestions-item-min-height, 36px);
}
</style>
<div class="input-wrapper" role="combobox" aria-haspopup="true" aria-owns="suggestionsWrapper" aria-expanded\$="[[_isSuggestionsOpened]]">
<!-- For accessibility, it is needed to have a label or aria-label. Label is preferred -->
<label for="autocompleteInput" class="sr-only">[[label]]</label>
<!-- Adding a hidden input to integrate with iron-form, if required -->
<input type="hidden" name\$="[[name]]" value\$="[[value]]">
<paper-input id="autocompleteInput" label="[[label]]" autocapitalize="[[autocapitalize]]" no-label-float="[[noLabelFloat]]" disabled="{{disabled}}" readonly="[[readonly]]" focused="{{focused}}" auto-validate\$="[[autoValidate]]" error-message\$="[[errorMessage]]" required\$="[[required]]" value="{{text}}" allowed-pattern="[[allowedPattern]]" pattern="[[pattern]]" always-float-label="[[alwaysFloatLabel]]" char-counter\$="[[charCounter]]" maxlength\$="[[maxlength]]" placeholder="[[placeholder]]" invalid="{{invalid}}" role="textbox" aria-autocomplete="list" aria-multiline="false" aria-activedescendant\$="[[_highlightedSuggestion.elementId]]" aria-disabled\$="[[disabled]]" aria-controls="autocompleteStatus suggestionsWrapper">
<slot name="prefix" slot="prefix"></slot>
<!-- TODO: remove tabindex workaround when is fixed https://github.com/PolymerElements/paper-input/issues/324 -->
<paper-icon-button slot="suffix" suffix="" id="clear" icon="clear" on-click="_clear" tabindex="-1"></paper-icon-button>
<slot name="suffix" slot="suffix"></slot>
</paper-input>
<!-- to announce current selection to screen reader -->
<span id="autocompleteStatus" role="status" class="sr-only">[[_highlightedSuggestion.textValue]]</span>
</div>
<paper-autocomplete-suggestions for="autocompleteInput" id="paperAutocompleteSuggestions" min-length="[[minLength]]" text-property="[[textProperty]]" value-property="[[valueProperty]]" selected-option="{{selectedOption}}" source="[[source]]" remote-source="[[remoteSource]]" query-fn="[[queryFn]]" event-namespace="[[eventNamespace]]" highlighted-suggestion="{{_highlightedSuggestion}}" is-open="{{_isSuggestionsOpened}}" highlight-first="[[highlightFirst]]" show-results-on-focus="[[showResultsOnFocus]]">
<slot id="templates" name="autocomplete-custom-template"></slot>
</paper-autocomplete-suggestions>
`,is:"paper-autocomplete",properties:{autoValidate:{type:Boolean,value:!1},invalid:{type:Boolean,notify:!0,value:!1},autocapitalize:String,errorMessage:{type:String},label:String,noLabelFloat:{type:Boolean,value:!1},alwaysFloatLabel:{type:Boolean,value:!1},placeholder:String,required:{type:Boolean,value:!1},readonly:{type:Boolean,value:!1},focused:{type:Boolean,value:!1,notify:!0},disabled:{type:Boolean,value:!1},source:{type:Array,observer:"_sourceChanged"},textProperty:{type:String,value:"text"},valueProperty:{type:String,value:"value"},value:{type:Object,notify:!0},text:{type:String,notify:!0,value:""},disableShowClear:{type:Boolean,value:!1},remoteSource:{type:Boolean,value:!1},eventNamespace:{type:String,value:"-"},minLength:{type:Number,value:1},pattern:String,allowedPattern:String,charCounter:{type:Boolean,value:!1},maxlength:{type:Number},name:String,queryFn:{type:Function},highlightFirst:{type:Boolean,value:!1},showResultsOnFocus:{type:Boolean,value:!1},_value:{value:void 0},_text:{value:void 0},_isClearButtonVisible:{type:Boolean,value:!1},_isSuggestionsOpened:{type:Boolean,value:!1},selectedOption:{type:Object,notify:!0}},observers:["_textObserver(text)"],_sourceChanged:function(e){var t=this.text;!Array.isArray(e)||0===e.length||null===t||t.length<this.minLength||this.$.autocompleteInput.focused&&this.$.paperAutocompleteSuggestions._handleSuggestions({target:{value:t}})},ready:function(){this._value=this.value,this.addEventListener("autocomplete"+this.eventNamespace+"selected",this._onAutocompleteSelected.bind(this))},_clear:function(){var e={text:this.text,value:this.value};this.value=null,this._value=null,this.text="",this._text="",this._fireEvent(e,"reset-blur"),this._hideClearButton(),this.$.autocompleteInput.focused||this.$.autocompleteInput.focus()},_fireEvent:function(e,t){var o=this._getId(),i="autocomplete"+this.eventNamespace+t;this.fire(i,{id:o,value:e[this.valueProperty]||e.value,text:e[this.textProperty]||e.text,target:this,option:e})},_textObserver:function(e){e&&e.trim()?this._showClearButton():this._hideClearButton()},_onAutocompleteSelected:function(e){var t=e.detail;this.value=t.value,this.text=t.text},_showClearButton:function(){this.disableShowClear||this._isClearButtonVisible||(this.$.clear.style.display="inline-block",this._isClearButtonVisible=!0)},_hideClearButton:function(){this._isClearButtonVisible&&(this.$.clear.style.display="none",this._isClearButtonVisible=!1)},_getId:function(){var e=this.getAttribute("id");return e||(e=this.dataset.id),e},getOption:function(){return{text:this.text,value:this.value}},setOption:function(e){this.text=e[this.textProperty]||e.text,this.value=e[this.valueProperty]||e.value,this._showClearButton()},disable:function(){this.disabled=!0},enable:function(){this.disabled=!1},suggestions:function(e){this.$.paperAutocompleteSuggestions.suggestions(e)},validate:function(){return this.$.autocompleteInput.validate()},clear:function(){this._value="",this._text="",this._clear()},reset:function(){this._clear()},hideSuggestions:function(){this._hideClearButton(),this.$.paperAutocompleteSuggestions.hideSuggestions()},onSelectHandler:function(e){this.$.paperAutocompleteSuggestions._onSelect(e)}});class oe extends r{static get styles(){return n`
:host {
display: block;
}
.wrapper {
display: grid;
grid-template-columns: 150px auto 50px;
grid-column-gap: 20px;
grid-row-gap: 20px;
margin-bottom: 10px;
}
.editor label {
margin-bottom: 5px;
font-size: 12px;
font-weight: 400;
color: var(--paper-grey-500);
}
paper-dropdown-menu {
}
paper-icon-button {
align-self: center;
}
`}render(){return l`
<div class="wrapper">
<paper-dropdown-menu label="Scope">
<paper-listbox
id="scopeList"
slot="dropdown-content"
selected="${this.scope}"
attr-for-selected="value"
@iron-select="${this._listchanged}"
>
${this.scopes.map(e=>l` <paper-item value="${e}">${e}</paper-item> `)}
</paper-listbox>
</paper-dropdown-menu>
<div class="editor">
<label>Rendition</label>
<jinn-codemirror
id="editor"
label="Rendition"
code="${this.css||""}"
mode="css"
@update="${this._handleCodeChange}"
></jinn-codemirror>
</div>
<paper-icon-button
@click="${this._remove}"
icon="delete"
title="delete this rendition"
></paper-icon-button>
</div>
<slot></slot>
`}static get properties(){return{scopes:{type:Array},css:{type:String,reflect:!0},scope:{type:String,reflect:!0},selected:{type:String}}}constructor(){super(),this.scopes=["","before","after"],this.css="",this.scope="",this.selected="",this._initialized=!1}connectedCallback(){super.connectedCallback(),this.css=this.css.trim(),this.dispatchEvent(new CustomEvent("rendition-connected",{composed:!0,bubbles:!0,detail:{target:this}}))}firstUpdated(e){this.refreshEditor(),this._initialized=!0}refreshEditor(){console.log("refreshEditor"),this.shadowRoot.getElementById("editor")}_remove(e){e.preventDefault(),this.dispatchEvent(new CustomEvent("remove-rendition",{}))}_handleCodeChange(){this.css=this.shadowRoot.getElementById("editor").value,this.dispatchEvent(new CustomEvent("rendition-changed",{composed:!0,bubbles:!0,detail:{name:this.name,css:this.css,scope:this.scope}}))}_listchanged(e){const t=this.shadowRoot.getElementById("scopeList");this.scope=t.selected}}customElements.define("pb-odd-rendition-editor",oe);class ie extends r{static get styles(){return n`
:host {
display: block;
}
.wrapper {
display: grid;
grid-template-columns: 150px auto 50px 50px;
grid-column-gap: 20px;
grid-row-gap: 20px;
margin-bottom: 10px;
}
paper-dropdown-menu {
align-self: start;
}
paper-icon-button,
paper-checkbox {
align-self: center;
margin-top: 16px;
}
.editor label {
margin-bottom: 5px;
font-size: 12px;
font-weight: 400;
color: var(--paper-grey-500);
}
`}render(){return l`
<div class="wrapper">
<paper-autocomplete
id="combo"
text="${this.name}"
placeholder="${E("odd.editor.model.param-name-placeholder")}"
label="Name"
.source="${this._currentParameters}"
></paper-autocomplete>
<div class="editor">
<label>Parameter</label>
<jinn-codemirror
id="editor"
mode="xquery"
code="${this.value}"
linter="${this.endpoint}/${d(this.apiVersion,"1.0.0")?"modules/editor.xql":"api/lint"}"
></jinn-codemirror>
</div>
<paper-checkbox id="set" ?checked="${this.setParam}" @change="${this._handleCodeChange}"
>${E("odd.editor.model.set-param")}</paper-checkbox
>
<paper-icon-button
@click="${this._delete}"
icon="delete"
title="delete this parameter"
></paper-icon-button>
</div>
`}static get properties(){return{name:{type:String,reflect:!0},value:{type:String,reflect:!0},behaviour:{type:String},parameters:{type:Object},setParam:{type:Boolean,attribute:"set"},_currentParameters:{type:Array},endpoint:{type:String},apiVersion:{type:String}}}constructor(){super(),this.name="",this.value="",this.setParam=!1,this.behaviour="",this.currentParameters=[],this.parameters={"":[],alternate:["default","alternate","persistent"],anchor:["content","id"],block:["content"],body:["content"],break:["content","type","label"],cell:["content"],cit:["content","source"],document:["content"],figure:["content","title"],graphic:["content","url","width","height","scale","title"],heading:["content","level"],inline:["content"],link:["content","uri","target"],list:["content","type"],listItem:["content","n"],metadata:["content"],note:["content","place","label"],omit:[],paragraph:["content"],row:["content"],section:["content"],table:["content"],text:["content"],title:["content"],webcomponent:["content","name"]},this.selected="",this.endpoint=""}connectedCallback(){super.connectedCallback(),this.value=this.value.trim(),this.dispatchEvent(new CustomEvent("parameter-connected",{composed:!0,bubbles:!0,detail:{target:this}}))}attributeChangedCallback(e,t,o){super.attributeChangedCallback(e,t,o),"behaviour"===e&&(this._currentParameters=this.parameters[o])}firstUpdated(e){this.selected=this.parameters[this.behaviour]||[],this.requestUpdate(),this.shadowRoot.getElementById("combo").addEventListener("focused-changed",this._handleCodeChange.bind(this)),this.shadowRoot.getElementById("editor").addEventListener("update",this._handleCodeChange.bind(this))}refreshEditor(){this.shadowRoot.getElementById("editor")}_delete(e){console.log("parameter delete ",e),e.preventDefault(),this.dispatchEvent(new CustomEvent("parameter-remove",{}))}_handleCodeChange(e){console.log("_handleCodeChange ",e),this.value=this.shadowRoot.getElementById("editor").content||"",console.log("value %s",this.value),this.name=this.shadowRoot.getElementById("combo").text,this.setParam=this.shadowRoot.getElementById("set").checked,this.dispatchEvent(new CustomEvent("parameter-changed",{composed:!0,bubbles:!0,detail:{name:this.name,value:this.value,set:this.setParam}}))}}customElements.define("pb-odd-parameter-editor",ie);class se extends r{static get styles(){return n`
:host {
display: flex;
flex-direction: column;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Oswald', Verdana, 'Helvetica', sans-serif;
font-weight: 400 !important;
}
form {
margin-bottom: 8px;
}
paper-input,
paper-autocomplete {
margin-bottom: 16px;
}
.models {
margin-left: 20px;
margin-top: 10px;
}
.btn,
.btn-group {
margin-top: 0;
margin-bottom: 0;
}
header {
// background-color: #d1dae0;
background: var(--paper-grey-300);
margin: 0;
}
header div {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
header h4 {
padding: 4px 8px;
margin: 0;
display: grid;
grid-template-columns: 40px 40% auto;
}
h4 .btn-group {
text-align: right;
display: none;
}
#toggle,
.modelType {
align-self: center;
}
header div.info {
padding: 0 16px 4px;
margin: 0;
font-size: 85%;
display: block;
margin: 0 0 0 32px;
}
header div.info * {
display: block;
line-height: 1.2;
}
header .outputDisplay {
text-transform: uppercase;
}
header .description {
font-style: italic;
}
header .predicate {
color: #ff5722;
}
.predicate label,
.template label {
display: block;
font-size: 12px;
font-weight: 300;
color: rgb(115, 115, 115);
}
.model-collapse {
color: #000000;
cursor: pointer;
}
.model-collapse:hover {
text-decoration: none;
}
.behaviour {
color: #ff5722;
}
.behaviour:before {
content: ' [';
}
.behaviour:after {
content: ']';
}
.behaviourWrapper {
display: grid;
grid-template-columns: 140px 40px 140px auto;
}
.behaviourWrapper > * {
display: inline;
align-self: stretch;
}
.group {
margin: 0;
font-size: 16px;
font-weight: bold;
}
.group .title {
/*text-decoration: underline;*/
}
.renditions,
.parameters {
padding-left: 16px;
border-left: 3px solid #e0e0e0;
margin-bottom: 20px;
}
.renditions .group {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.predicate .form-control {
width: 100%;
}
.source {
text-decoration: none;
margin-bottom: 8px;
}
.selectOutput {
margin-right: 10px;
}
:host([currentselection]) > form > header {
@apply --shadow-elevation-4dp;
border-left: 3px solid var(--paper-blue-500);
}
paper-menu-button paper-icon-button {
margin-left: -10px;
}
/* need to play it save for FF */
:host([currentselection]) > form > header > h4 > .btn-group {
display: inline-block;
}
details {
display: block;
}
details summary {
display: none;
}
.renditions {
margin-top: 10px;
}
.details {
padding: 0px 50px 20px 20px;
background: var(--paper-grey-200);
}
details:not([open]) {
padding: 0;
}
.editor label {
margin-bottom: 5px;
font-size: 12px;
font-weight: 400;
color: var(--paper-grey-500);
}
.horizontal {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#mode {
min-width: 18em;
}
`}static get properties(){return{behaviour:{type:String},predicate:{type:String,reflect:!0,converter:(e,t)=>"null"===e.toLowerCase()?"":e},type:{type:String,reflect:!0},template:{type:String,reflect:!0,converter:(e,t)=>"null"===e.toLowerCase()?"":e},output:{type:String,reflect:!0,converter:(e,t)=>"null"===e.toLowerCase()?"":e},css:{type:String,converter:(e,t)=>"null"===e.toLowerCase()?"":e},mode:{type:String},model:{type:Object},models:{type:Array},parameters:{type:Array